<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 flex flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full relative mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={Routes.path("/admin/settings/publishing", locale: @current_locale)}
        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 Publishing Settings"
        )}
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">
          {gettext("Create a New Publishing Group")}
        </h1>
        <p class="text-lg text-base-content">
          {gettext(
            "Spin up a dedicated workspace for your content team. Choose the content type and storage approach that fits your publishing needs."
          )}
        </p>
      </div>
    </header>

    <div class="max-w-2xl mx-auto space-y-6">
      <div class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body space-y-6">
          <.form
            for={@form}
            id="blog-create-form"
            class="space-y-6"
            phx-change="update_new_group"
            phx-submit="add_group"
          >
            <div class="space-y-2">
              <.input
                field={@form[:name]}
                type="text"
                label={gettext("Group Name")}
                placeholder={gettext("e.g. Product Updates")}
                required
              />
              <p class="text-xs text-base-content/60">
                {gettext("Used for display in the navigation and admin sections.")}
              </p>
            </div>

            <div class="space-y-2">
              <.input
                field={@form[:slug]}
                type="text"
                label={gettext("Group Slug")}
                placeholder={gettext("e.g. product-updates")}
                required
                phx-change="manual_slug"
                phx-debounce="150"
              />
              <div class="space-y-1">
                <p class="text-xs text-base-content/60">
                  {gettext("Used for the URL and the directory where files are stored.")}
                </p>
                <p class="text-xs font-medium text-base-content/70">
                  <span class="font-semibold">{gettext("Format")}:</span>
                  {gettext(
                    "Only lowercase letters (a-z), numbers (0-9), and hyphens (-) are allowed. Must not start or end with a hyphen."
                  )}
                </p>
                <p class="text-xs text-success">
                  ✓ {gettext("Valid examples")}: <code class="font-mono">blog</code>, <code class="font-mono">
                    product-updates
                  </code>,
                  <code class="font-mono">news-2025</code>
                </p>
                <p class="text-xs text-error">
                  ✗ {gettext("Invalid examples")}: <code class="font-mono">Blog</code>, <code class="font-mono">
                    product_updates
                  </code>, <code class="font-mono">-news</code>,
                  <code class="font-mono">
                    my blog
                  </code>
                </p>
              </div>
              <% slug_value = @form[:slug].value || "" %>
              <% slug_sample = if slug_value == "", do: gettext("your-blog"), else: slug_value %>
              <% url_prefix =
                PhoenixKit.Config.get_url_prefix()
                |> case do
                  "/" -> ""
                  prefix -> prefix
                end %>
              <%!-- Use first enabled language (default) for preview URLs --%>
              <% default_language = List.first(@enabled_languages) %>
              <% timestamp_file_pattern =
                "priv/publishing/#{slug_sample}/<YYYY-MM-DD>/<HH:mm>/<locale>.phk" %>
              <% timestamp_url_pattern =
                if length(@enabled_languages) == 1 do
                  @endpoint_url <> "#{url_prefix}/#{slug_sample}/<YYYY-MM-DD>/<HH:mm>"
                else
                  @endpoint_url <>
                    "#{url_prefix}/#{default_language}/#{slug_sample}/<YYYY-MM-DD>/<HH:mm>"
                end %>
              <% slug_file_pattern = "priv/publishing/#{slug_sample}/<slug>/<locale>.phk" %>
              <% slug_url_pattern =
                if length(@enabled_languages) == 1 do
                  @endpoint_url <> "#{url_prefix}/#{slug_sample}/:post_slug"
                else
                  @endpoint_url <> "#{url_prefix}/#{default_language}/#{slug_sample}/:post_slug"
                end %>
            </div>

            <%!-- Content Type Section --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text text-sm font-semibold text-base-content">
                  {gettext("Content Type")}
                </span>
              </label>
              <div class="space-y-3">
                <%= for preset <- @preset_types do %>
                  <label class="cursor-pointer flex items-start gap-3 rounded-lg border border-base-300/70 bg-base-200/40 px-4 py-3 hover:border-primary/60 transition">
                    <input
                      type="radio"
                      name={@form[:type].name}
                      value={preset.type}
                      class="radio radio-primary mt-1"
                      checked={@form[:type].value == preset.type}
                      phx-click="type_changed"
                      phx-value-type={preset.type}
                    />
                    <div>
                      <p class="font-medium text-base-content">{preset.label}</p>
                      <p class="text-sm text-base-content/70">
                        <%= case preset.type do %>
                          <% "blogging" -> %>
                            {gettext(
                              "Posts, news articles, and updates. Items called \"%{plural}\".",
                              plural: preset.item_plural
                            )}
                          <% "faq" -> %>
                            {gettext("Frequently asked questions. Items called \"%{plural}\".",
                              plural: preset.item_plural
                            )}
                          <% "legal" -> %>
                            {gettext(
                              "Legal pages like terms and privacy policy. Items called \"%{plural}\".",
                              plural: preset.item_plural
                            )}
                          <% _ -> %>
                            {gettext("Items called \"%{plural}\".", plural: preset.item_plural)}
                        <% end %>
                      </p>
                    </div>
                  </label>
                <% end %>
                <%!-- Custom Type Option --%>
                <label class="cursor-pointer flex items-start gap-3 rounded-lg border border-base-300/70 bg-base-200/40 px-4 py-3 hover:border-primary/60 transition">
                  <input
                    type="radio"
                    name={@form[:type].name}
                    value="custom"
                    class="radio radio-primary mt-1"
                    checked={@form[:type].value not in ["blogging", "faq", "legal"]}
                    phx-click="type_changed"
                    phx-value-type="custom"
                  />
                  <div class="flex-1">
                    <p class="font-medium text-base-content">{gettext("Custom")}</p>
                    <p class="text-sm text-base-content/70">
                      {gettext("Define your own content type and item names.")}
                    </p>
                    <%= if @form[:type].value not in ["blogging", "faq", "legal"] do %>
                      <div class="mt-2">
                        <input
                          type="text"
                          name="blog[custom_type]"
                          class="input input-bordered input-sm w-full max-w-xs"
                          placeholder={gettext("e.g. tutorials, recipes")}
                          value={
                            if @form[:type].value not in ["blogging", "faq", "legal", "custom"],
                              do: @form[:type].value,
                              else: ""
                          }
                          phx-change="update_new_blog"
                          phx-debounce="300"
                        />
                      </div>
                    <% end %>
                  </div>
                </label>
              </div>
              <label class="label">
                <span class="label-text-alt text-xs text-base-content/60">
                  {gettext(
                    "Content type determines default item naming and may affect how content is displayed."
                  )}
                </span>
              </label>
            </div>

            <%!-- Item Naming Section --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text text-sm font-semibold text-base-content">
                  {gettext("Item Naming")}
                </span>
              </label>
              <p class="text-xs text-base-content/60 mb-3">
                {gettext(
                  "What do you call items in this publishing group? These names appear in the UI."
                )}
              </p>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <.input
                    field={@form[:item_singular]}
                    type="text"
                    label={gettext("Singular")}
                    placeholder={gettext("e.g. post, question")}
                    phx-focus="item_name_changed"
                  />
                </div>
                <div>
                  <.input
                    field={@form[:item_plural]}
                    type="text"
                    label={gettext("Plural")}
                    placeholder={gettext("e.g. posts, questions")}
                    phx-focus="item_name_changed"
                  />
                </div>
              </div>
              <label class="label">
                <span class="label-text-alt text-xs text-base-content/60">
                  {gettext("Examples: \"Create new %{singular}\", \"View all %{plural}\"",
                    singular: @form[:item_singular].value || "item",
                    plural: @form[:item_plural].value || "items"
                  )}
                </span>
              </label>
            </div>

            <%!-- Storage Mode Section --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text text-sm font-semibold text-base-content">
                  {gettext("Storage Mode")}
                </span>
              </label>
              <div class="space-y-3">
                <label class="cursor-pointer flex items-start gap-3 rounded-lg border border-base-300/70 bg-base-200/40 px-4 py-3 hover:border-primary/60 transition">
                  <input
                    type="radio"
                    name={@form[:mode].name}
                    value="timestamp"
                    class="radio radio-primary mt-1"
                    checked={@form[:mode].value == "timestamp"}
                  />
                  <div>
                    <p class="font-medium text-base-content">{gettext("Timestamp-based")}</p>
                    <p class="text-sm text-base-content/70">
                      {gettext(
                        "Organizes posts in date/time folders. Great for news, updates, and chronological feeds."
                      )}
                    </p>
                    <div class="mt-2 space-y-1 text-xs text-base-content/70">
                      <p>
                        <span class="font-medium text-base-content">{gettext("Files")}: </span>
                        <code class="font-mono break-all">{timestamp_file_pattern}</code>
                      </p>
                      <p>
                        <span class="font-medium text-base-content">
                          {gettext("Public URL")}:
                        </span>
                        <code class="font-mono break-all">{timestamp_url_pattern}</code>
                      </p>
                    </div>
                  </div>
                </label>
                <label class="cursor-pointer flex items-start gap-3 rounded-lg border border-base-300/70 bg-base-200/40 px-4 py-3 hover:border-primary/60 transition">
                  <input
                    type="radio"
                    name={@form[:mode].name}
                    value="slug"
                    class="radio radio-primary mt-1"
                    checked={@form[:mode].value == "slug"}
                  />
                  <div>
                    <p class="font-medium text-base-content">{gettext("Slug-based")}</p>
                    <p class="text-sm text-base-content/70">
                      {gettext(
                        "Uses semantic URLs and editable slugs. Ideal for documentation, guides, and evergreen content."
                      )}
                    </p>
                    <div class="mt-2 space-y-1 text-xs text-base-content/70">
                      <p>
                        <span class="font-medium text-base-content">{gettext("Files")}: </span>
                        <code class="font-mono break-all">{slug_file_pattern}</code>
                      </p>
                      <p>
                        <span class="font-medium text-base-content">
                          {gettext("Public URL")}:
                        </span>
                        <code class="font-mono break-all">{slug_url_pattern}</code>
                      </p>
                    </div>
                  </div>
                </label>
              </div>
              <label class="label">
                <span class="label-text-alt text-xs text-base-content/60">
                  {gettext(
                    "The storage mode locks in after creation to keep your structure consistent."
                  )}
                </span>
              </label>
            </div>

            <div class="flex flex-wrap gap-3 justify-end">
              <button type="submit" class="btn btn-primary btn-sm">
                <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext(
                  "Create Publishing Group"
                )}
              </button>
              <button type="button" class="btn btn-ghost btn-sm" phx-click="cancel">
                <.icon name="hero-arrow-uturn-left" class="w-4 h-4 mr-1" /> {gettext("Cancel")}
              </button>
            </div>
          </.form>
        </div>
      </div>

      <div class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body space-y-3">
          <h3 class="text-lg font-semibold text-base-content">
            {gettext("What happens next")}
          </h3>
          <ul class="text-sm text-base-content/70 space-y-2">
            <li>• {gettext("We create a publishing workspace under priv/publishing.")}</li>
            <li>• {gettext("You'll see the new group in the navigation immediately.")}</li>
            <li>• {gettext("Editors can jump right in and start creating content.")}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
