<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={
    gettext("%{project_title} %{action} %{entity}",
      project_title: @project_title,
      action: if(@data_record.uuid, do: gettext("Edit"), else: gettext("New")),
      entity: @entity.display_name
    )
  }
  current_path={@url_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container flex flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <.admin_page_header back={
      PhoenixKit.Utils.Routes.path("/admin/entities/#{@entity.name}/data")
    }>
      <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-base-content">
        <%= if @data_record.uuid do %>
          {gettext("Edit %{entity}", entity: @entity.display_name)}
        <% else %>
          {gettext("Create New %{entity}", entity: @entity.display_name)}
        <% end %>
      </h1>
      <p class="text-sm text-base-content/60 mt-0.5">
        <%= if @data_record.uuid do %>
          {gettext("Update data for the %{entity} entity", entity: @entity.display_name)}
        <% else %>
          {gettext("Add data for the %{entity} entity", entity: @entity.display_name)}
        <% end %>
      </p>
    </.admin_page_header>

    <%!-- Readonly Banner --%>
    <%= if @readonly? do %>
      <div class="alert alert-info mb-6">
        <.icon name="hero-eye" class="w-5 h-5" />
        <span>
          {gettext(
            "This record is currently being edited by another user. You are in view-only mode."
          )}
        </span>
      </div>
    <% end %>

    <%!-- Edit Mode Form --%>
    <.form
      :let={f}
      for={@changeset}
      phx-change="validate"
      phx-debounce="500"
      phx-submit="save"
      class="space-y-8"
    >
      <div class="flex justify-end">
        <button
          type="submit"
          class="btn btn-primary"
          disabled={@readonly?}
        >
          <%= if @data_record.uuid do %>
            {gettext("Update %{entity}", entity: @entity.display_name)}
          <% else %>
            {gettext("Create %{entity}", entity: @entity.display_name)}
          <% end %>
        </button>
      </div>

      <%= if @show_multilang_tabs do %>
        <%!-- Multilang: unified card with language tabs wrapping all content --%>
        <% lang_data = get_lang_data(@changeset, @current_lang, @multilang_enabled) %>
        <div class="card bg-base-100 shadow-xl">
          <.multilang_tabs
            multilang_enabled={@multilang_enabled}
            language_tabs={@language_tabs}
            current_lang={@current_lang}
          />

          <.multilang_fields_wrapper
            multilang_enabled={@multilang_enabled}
            current_lang={@current_lang}
          >
            <:skeleton>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                  <div class="skeleton h-4 w-24"></div>
                  <div class="skeleton h-12 w-full"></div>
                </div>
                <div class="space-y-2">
                  <div class="skeleton h-4 w-32"></div>
                  <div class="skeleton h-12 w-full"></div>
                  <div class="skeleton h-3 w-48"></div>
                </div>
              </div>
              <div class="divider my-2"></div>
              <div class="space-y-4">
                <div class="space-y-2">
                  <div class="skeleton h-4 w-24"></div>
                  <div class="skeleton h-12 w-full"></div>
                </div>
                <div class="space-y-2">
                  <div class="skeleton h-4 w-40"></div>
                  <div class="skeleton h-24 w-full"></div>
                </div>
              </div>
            </:skeleton>

            <div class="divider mx-6 my-0"></div>

            <%!-- Tab content: Title & Slug (translatable) --%>
            <div class="card-body pt-4 pb-4">
              <h3 class="text-sm font-semibold text-base-content/70 uppercase tracking-wide mb-3">
                <.icon name="hero-information-circle" class="w-4 h-4 inline -mt-0.5" />
                {gettext("Basic Information")}
              </h3>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <.translatable_field
                  field_name="title"
                  form_prefix="phoenix_kit_entity_data"
                  changeset={@changeset}
                  schema_field={:title}
                  multilang_enabled={@multilang_enabled}
                  current_lang={@current_lang}
                  primary_language={@primary_language}
                  lang_data={lang_data}
                  label={gettext("Title")}
                  placeholder={gettext("Enter a title for this record")}
                  required
                  disabled={@readonly?}
                  class="w-full"
                />

                <.translatable_field
                  field_name="slug"
                  form_prefix="phoenix_kit_entity_data"
                  changeset={@changeset}
                  schema_field={:slug}
                  multilang_enabled={@multilang_enabled}
                  current_lang={@current_lang}
                  primary_language={@primary_language}
                  lang_data={lang_data}
                  label={gettext("Slug (URL-friendly identifier)")}
                  placeholder={gettext("auto-generated-slug")}
                  disabled={@readonly?}
                  class="w-full"
                  pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
                  title={gettext("Use lowercase letters, numbers, and hyphens only.")}
                  hint={gettext("Leave empty to auto-generate from title")}
                  secondary_hint={gettext("Leave empty to use the primary language slug")}
                >
                  <:label_extra>
                    <button
                      type="button"
                      class="btn btn-ghost btn-xs ml-2"
                      phx-click="generate_slug"
                      title={gettext("Generate from title")}
                      disabled={@readonly?}
                    >
                      <.icon name="hero-arrow-path" class="w-3 h-3" /> {gettext("Generate")}
                    </button>
                  </:label_extra>
                </.translatable_field>
              </div>
            </div>

            <%= if @entity.fields_definition != nil and @entity.fields_definition != [] do %>
              <div class="divider mx-6 my-0"></div>

              <%!-- Tab content: Custom Fields (translatable) --%>
              <div class="card-body pt-4">
                <h3 class="text-sm font-semibold text-base-content/70 uppercase tracking-wide mb-3">
                  <.icon name="hero-list-bullet" class="w-4 h-4 inline -mt-0.5" />
                  {gettext("Custom Fields")}
                </h3>

                <%!-- Dynamic form fields generated by FormBuilder --%>
                {PhoenixKit.Modules.Entities.FormBuilder.build_fields(@entity, f,
                  wrapper_class: "mb-6",
                  disabled: @readonly?,
                  lang_code: if(@multilang_enabled, do: @current_lang, else: nil)
                )}
              </div>
            <% end %>
          </.multilang_fields_wrapper>
        </div>

        <%!-- Record Settings (non-translatable, separate card) --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-lg mb-4">
              <.icon name="hero-cog-6-tooth" class="w-5 h-5" />
              {gettext("Record Settings")}
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <%!-- Status --%>
              <div>
                <.label for="phoenix_kit_entity_data_status">{gettext("Status")}</.label>
                <select
                  name="phoenix_kit_entity_data[status]"
                  class="select select-bordered w-full"
                  disabled={@readonly?}
                >
                  <option
                    value="draft"
                    selected={Ecto.Changeset.get_field(@changeset, :status) == "draft"}
                  >
                    {gettext("Draft")}
                  </option>
                  <option
                    value="published"
                    selected={Ecto.Changeset.get_field(@changeset, :status) == "published"}
                  >
                    {gettext("Published")}
                  </option>
                  <option
                    value="archived"
                    selected={Ecto.Changeset.get_field(@changeset, :status) == "archived"}
                  >
                    {gettext("Archived")}
                  </option>
                </select>
              </div>

              <%!-- Entity Type (Read-only) --%>
              <div>
                <.label>{gettext("Entity Type")}</.label>
                <div class="input input-bordered w-full bg-base-200 flex items-center">
                  <%= if @entity.icon do %>
                    <.icon name={@entity.icon} class="w-4 h-4 mr-2" />
                  <% end %>
                  {@entity.display_name}
                </div>
                <input
                  type="hidden"
                  name="phoenix_kit_entity_data[entity_uuid]"
                  value={@entity.uuid}
                />
              </div>
            </div>
          </div>
        </div>
      <% else %>
        <%!-- Non-multilang: separate cards (original layout) --%>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-information-circle" class="w-6 h-6" />
              {gettext("Basic Information")}
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <%!-- Title --%>
              <div>
                <.label for="phoenix_kit_entity_data_title">{gettext("Title")} *</.label>
                <input
                  type="text"
                  name="phoenix_kit_entity_data[title]"
                  id="phoenix_kit_entity_data_title"
                  value={Ecto.Changeset.get_field(@changeset, :title) || ""}
                  placeholder={gettext("Enter a title for this record")}
                  class="input input-bordered w-full"
                  phx-debounce="300"
                  required
                  disabled={@readonly?}
                />
              </div>

              <%!-- Slug with Generator --%>
              <div>
                <.label for="phoenix_kit_entity_data_slug">
                  {gettext("Slug (URL-friendly identifier)")}
                  <button
                    type="button"
                    class="btn btn-ghost btn-xs ml-2"
                    phx-click="generate_slug"
                    title={gettext("Generate from title")}
                    disabled={@readonly?}
                  >
                    <.icon name="hero-arrow-path" class="w-3 h-3" /> {gettext("Generate")}
                  </button>
                </.label>
                <input
                  type="text"
                  name="phoenix_kit_entity_data[slug]"
                  id="phoenix_kit_entity_data_slug"
                  value={Ecto.Changeset.get_field(@changeset, :slug) || ""}
                  placeholder={gettext("auto-generated-slug")}
                  class="input input-bordered w-full"
                  pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
                  title={gettext("Use lowercase letters, numbers, and hyphens only.")}
                  phx-debounce="300"
                  disabled={@readonly?}
                />
                <.label class="label">
                  <span class="label-text-alt">
                    {gettext("Leave empty to auto-generate from title")}
                  </span>
                </.label>
              </div>

              <%!-- Status --%>
              <div>
                <.label for="phoenix_kit_entity_data_status">{gettext("Status")}</.label>
                <select
                  name="phoenix_kit_entity_data[status]"
                  class="select select-bordered w-full"
                  disabled={@readonly?}
                >
                  <option
                    value="draft"
                    selected={Ecto.Changeset.get_field(@changeset, :status) == "draft"}
                  >
                    {gettext("Draft")}
                  </option>
                  <option
                    value="published"
                    selected={Ecto.Changeset.get_field(@changeset, :status) == "published"}
                  >
                    {gettext("Published")}
                  </option>
                  <option
                    value="archived"
                    selected={Ecto.Changeset.get_field(@changeset, :status) == "archived"}
                  >
                    {gettext("Archived")}
                  </option>
                </select>
              </div>

              <%!-- Entity Type (Read-only) --%>
              <div>
                <.label>{gettext("Entity Type")}</.label>
                <div class="input input-bordered w-full bg-base-200 flex items-center">
                  <%= if @entity.icon do %>
                    <.icon name={@entity.icon} class="w-4 h-4 mr-2" />
                  <% end %>
                  {@entity.display_name}
                </div>
                <input
                  type="hidden"
                  name="phoenix_kit_entity_data[entity_uuid]"
                  value={@entity.uuid}
                />
              </div>
            </div>
          </div>
        </div>

        <%= if @entity.fields_definition != nil and @entity.fields_definition != [] do %>
          <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
              <h2 class="card-title text-2xl mb-4">
                <.icon name="hero-list-bullet" class="w-6 h-6" /> {gettext("Custom Fields")}
              </h2>

              <%!-- Dynamic form fields generated by FormBuilder --%>
              {PhoenixKit.Modules.Entities.FormBuilder.build_fields(@entity, f,
                wrapper_class: "mb-6",
                disabled: @readonly?,
                lang_code: nil
              )}
            </div>
          </div>
        <% end %>
      <% end %>

      <%!-- Form Actions --%>
      <div class="flex justify-between items-center">
        <div class="flex gap-2">
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/entities/#{@entity.name}/data")}
            class="btn btn-outline"
          >
            {gettext("Cancel")}
          </.link>

          <button type="button" phx-click="reset" class="btn btn-warning" disabled={@readonly?}>
            <.icon name="hero-arrow-path" class="w-4 h-4" />
            {gettext("Reset Changes")}
          </button>
        </div>

        <button
          type="submit"
          class="btn btn-primary"
          disabled={@readonly?}
        >
          <.icon name="hero-check" class="w-4 h-4 mr-2" />
          <%= if @data_record.uuid do %>
            {gettext("Update %{entity}", entity: @entity.display_name)}
          <% else %>
            {gettext("Create %{entity}", entity: @entity.display_name)}
          <% end %>
        </button>
      </div>
    </.form>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
