<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={@current_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container mx-auto px-4 py-6 space-y-6">
    <div class="flex items-center justify-between">
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/settings", locale: @current_locale)}
        class="btn btn-outline btn-sm"
      >
        <.icon name="hero-arrow-left" class="w-4 h-4 mr-1" />
        {gettext("Back to Settings")}
      </.link>
      <div class="text-right">
        <p class="text-sm text-base-content/70">{gettext("Project")}</p>
        <p class="text-lg font-semibold">{@project_title}</p>
      </div>
    </div>

    <header class="text-center space-y-2">
      <p class="text-sm uppercase tracking-wide text-base-content/60">
        {gettext("Publishing Module")}
      </p>
      <h1 class="text-4xl font-bold text-base-content">{gettext("Manage Types")}</h1>
      <p class="text-base text-base-content/70 max-w-2xl mx-auto">
        {gettext(
          "Define the content types your team can publish. Each type appears as its own tab in the publishing workspace."
        )}
      </p>
    </header>

    <div class="grid gap-6 lg:grid-cols-3">
      <div class="card bg-base-100 shadow-xl border border-base-200 lg:col-span-2">
        <div class="card-body space-y-6">
          <div class="space-y-2">
            <h2 class="text-2xl font-semibold text-base-content">{gettext("Content Types")}</h2>
            <p class="text-sm text-base-content/70">
              {gettext(
                "Create dedicated sections like Blogs, News, or Reviews. Each type stores its content in structured folders on disk."
              )}
            </p>
          </div>

          <form
            phx-submit="add_type"
            class="flex flex-col sm:flex-row gap-3 items-start sm:items-center"
          >
            <input
              type="text"
              name="new_type"
              value={@new_type}
              placeholder={gettext("e.g. News")}
              class="input input-bordered flex-1 w-full sm:w-auto"
              phx-change="update_new_type"
              phx-debounce="300"
            />
            <button type="submit" class="btn btn-primary btn-sm">
              <.icon name="hero-plus-circle" class="w-4 h-4 mr-1" /> {gettext("Add Type")}
            </button>
          </form>

          <%= if @types == [] do %>
            <div class="alert alert-info">
              <.icon name="hero-information-circle" class="w-5 h-5" />
              <div>
                <h3 class="font-bold">{gettext("No publishing types yet")}</h3>
                <p class="text-sm">
                  {gettext("Create your first type to start publishing content.")}
                </p>
              </div>
            </div>
          <% else %>
            <div class="space-y-4">
              <%= for type <- @types do %>
                <div class="border border-base-200 rounded-lg p-4 flex items-center justify-between">
                  <div>
                    <p class="text-base font-semibold text-base-content">{type["name"]}</p>
                    <p class="text-xs text-base-content/60">
                      {gettext("Slug")}: <code class="font-mono">{type["slug"]}</code>
                    </p>
                  </div>
                  <button
                    type="button"
                    phx-click="remove_type"
                    phx-value-slug={type["slug"]}
                    class="btn btn-ghost btn-sm text-error hover:bg-error hover:text-error-content"
                  >
                    <.icon name="hero-trash" class="w-4 h-4 mr-1" /> {gettext("Remove")}
                  </button>
                </div>
              <% end %>
            </div>
          <% end %>
        </div>
      </div>

      <aside class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body space-y-4">
          <h3 class="text-xl font-semibold text-base-content">{gettext("How it works")}</h3>
          <ul class="text-sm text-base-content/70 space-y-3">
            <li>• {gettext("Each type becomes a dedicated publishing workspace.")}</li>
            <li>
              • {gettext("Entries are organized by date & time with multi-language support.")}
            </li>
            <li>
              • {gettext(
                "Files live under priv/static/publishing for easy versioning and deployment."
              )}
            </li>
            <li>
              • {gettext(
                "Language variants are automatically created based on enabled languages."
              )}
            </li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
