<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  socket={@socket}
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={gettext("SEO Settings")}
  page_subtitle={
    gettext(
      "Configure environment-wide search optimization defaults and metadata directives from a single place."
    )
  }
  current_path={@current_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="px-4 py-6 space-y-6">
    <div class="card bg-base-100 shadow-xl border border-base-200">
      <div class="card-body space-y-4">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-sm uppercase tracking-wide text-primary font-semibold">
              {gettext("Robots Directive")}
            </p>
            <h2 class="text-2xl font-bold">{gettext("Noindex · Nofollow")}</h2>
            <p class="text-base text-base-content/70">
              {gettext("Adds")}
              <code class="font-mono text-sm bg-base-200 rounded px-1.5 py-0.5">
                &lt;meta name="robots" content="noindex,nofollow"&gt;
              </code>
              {gettext(
                "to every PhoenixKit layout, blocking crawlers from indexing or following links."
              )}
            </p>
          </div>
          <label class="flex items-center gap-2 cursor-pointer">
            <span class="text-sm font-semibold text-base-content/70">
              {if @no_index_enabled, do: gettext("Enabled"), else: gettext("Disabled")}
            </span>
            <input
              type="checkbox"
              class="toggle toggle-primary toggle-lg"
              checked={@no_index_enabled}
              phx-click="toggle_no_index"
            />
          </label>
        </div>

        <div class={[
          "alert",
          if(@no_index_enabled, do: "alert-warning", else: "alert-info"),
          "bg-base-200/70"
        ]}>
          <.icon
            name={
              if @no_index_enabled, do: "hero-no-symbol", else: "hero-magnifying-glass-circle"
            }
            class="w-6 h-6"
          />
          <div class="text-sm leading-relaxed">
            <%= if @no_index_enabled do %>
              {gettext(
                "Search engines are instructed to skip this environment. Remove this before launch."
              )}
            <% else %>
              {gettext(
                "Crawlers are allowed to index the site. Enable the toggle to hide staging deployments."
              )}
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <%!-- robots.txt: reported, never written. See the LiveView moduledoc for
         why PhoenixKit does not generate this file. --%>
    <div class="card bg-base-100 shadow-xl border border-base-200">
      <div class="card-body space-y-4">
        <div>
          <p class="text-sm uppercase tracking-wide text-primary font-semibold">
            {gettext("Crawler Instructions")}
          </p>
          <h2 class="text-2xl font-bold">robots.txt</h2>
          <p class="text-base text-base-content/70">
            {gettext(
              "PhoenixKit does not generate this file — it is yours, and your web server serves it from priv/static before any route is consulted. The one thing worth adding is a pointer to your sitemap, which crawlers otherwise have to guess at."
            )}
          </p>
        </div>

        <div>
          <p class="text-sm font-medium mb-2">
            {gettext("Add this line to priv/static/robots.txt:")}
          </p>
          <div class="flex items-center gap-2">
            <code
              id="pk-robots-sitemap-line"
              class="font-mono text-sm bg-base-200 rounded px-3 py-2 grow overflow-x-auto whitespace-nowrap"
            >Sitemap: {@sitemap_url}</code>
            <button
              type="button"
              class="btn btn-sm btn-outline shrink-0"
              phx-hook="CopyToClipboard"
              id="pk-robots-sitemap-copy"
              data-copy-target="#pk-robots-sitemap-line"
            >
              <.icon name="hero-clipboard-document" class="w-4 h-4" />
              <span data-copy-idle>{gettext("Copy")}</span>
              <span data-copy-feedback class="hidden">{gettext("Copied!")}</span>
            </button>
          </div>
        </div>

        <div class={[
          "alert bg-base-200/70",
          if(@robots_txt_present? and @robots_txt_references_sitemap?,
            do: "alert-success",
            else: "alert-info"
          )
        ]}>
          <.icon
            name={
              if @robots_txt_present? and @robots_txt_references_sitemap?,
                do: "hero-check-circle",
                else: "hero-information-circle"
            }
            class="w-6 h-6"
          />
          <div class="text-sm leading-relaxed">
            <%= cond do %>
              <% not @robots_txt_present? -> %>
                {gettext(
                  "No priv/static/robots.txt found. Without one, crawlers assume everything is allowed — which is usually fine, but they will not learn where your sitemap is."
                )}
              <% not @robots_txt_references_sitemap? -> %>
                {gettext(
                  "priv/static/robots.txt exists but has no Sitemap: line. Add the line above so crawlers are told where to look."
                )}
              <% true -> %>
                {gettext("priv/static/robots.txt points crawlers at your sitemap.")}
            <% end %>
          </div>
        </div>

        <p class="text-xs text-base-content/60">
          {gettext(
            "The noindex toggle above and robots.txt are separate mechanisms: noindex is a per-page meta tag that tells crawlers not to index what they fetched, while robots.txt tells them what not to fetch at all. A staging site usually wants both."
          )}
        </p>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
