<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.id, 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 --%>
    <header class="w-full relative mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/entities/#{@entity.name}/data")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <.icon name="hero-arrow-left" class="w-4 h-4 mr-2" />
        {gettext("Back to %{entity} Data", entity: @entity.display_name)}
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">
          <%= if @data_record.id do %>
            {gettext("Edit %{entity}", entity: @entity.display_name)}
          <% else %>
            {gettext("Create New %{entity}", entity: @entity.display_name)}
          <% end %>
        </h1>
        <p class="text-lg text-base-content">
          <%= if @data_record.id 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>
      </div>
    </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"
    >
      <%!-- Basic Metadata Section --%>
      <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_id]" value={@entity.id} />
            </div>
          </div>
        </div>
      </div>

      <%!-- Dynamic Fields Section --%>
      <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?
          )}
        </div>
      </div>

      <%!-- 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.id 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>
