<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="Posts Settings"
  current_path={@url_path}
  project_title={@project_title}
>
  <div class="container flex flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/settings")}
        class="btn btn-outline btn-primary btn-sm"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Settings
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-2xl sm:text-4xl font-bold text-base-content mb-3">Posts Settings</h1>
        <p class="text-base sm:text-lg text-base-content">
          Configure posts module behavior, limits, and features
        </p>
      </div>
    </header>

    <%!-- Main Content --%>
    <div class="max-w-4xl mx-auto space-y-8">
      <.form for={%{}} phx-submit="save">
        <%!-- Content Limits Card --%>
        <div class="card bg-base-100 shadow-xl mb-6">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-adjustments-horizontal" class="w-6 h-6" /> Content Limits
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <%!-- Max Media --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Max Media Per Post</span>
                </label>
                <input
                  name="settings[posts_max_media]"
                  type="number"
                  value={@posts_max_media}
                  class="input input-bordered focus:input-primary"
                  min="0"
                  max="50"
                />
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Maximum number of images/media files per post (0-50)
                  </span>
                </label>
              </div>

              <%!-- Max Title Length --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Max Title Length</span>
                </label>
                <input
                  name="settings[posts_max_title_length]"
                  type="number"
                  value={@posts_max_title_length}
                  class="input input-bordered focus:input-primary"
                  min="10"
                  max="500"
                />
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Maximum characters for post title (10-500)
                  </span>
                </label>
              </div>

              <%!-- Max Subtitle Length --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Max Subtitle Length</span>
                </label>
                <input
                  name="settings[posts_max_subtitle_length]"
                  type="number"
                  value={@posts_max_subtitle_length}
                  class="input input-bordered focus:input-primary"
                  min="10"
                  max="1000"
                />
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Maximum characters for post subtitle/tagline (10-1000)
                  </span>
                </label>
              </div>

              <%!-- Max Content Length --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Max Content Length</span>
                </label>
                <input
                  name="settings[posts_max_content_length]"
                  type="number"
                  value={@posts_max_content_length}
                  class="input input-bordered focus:input-primary"
                  min="100"
                  max="100000"
                />
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Maximum characters for post content (100-100000)
                  </span>
                </label>
              </div>

              <%!-- Max Mentions --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Max Mentions</span>
                </label>
                <input
                  name="settings[posts_max_mentions]"
                  type="number"
                  value={@posts_max_mentions}
                  class="input input-bordered focus:input-primary"
                  min="0"
                  max="50"
                />
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Maximum user mentions per post (0-50)
                  </span>
                </label>
              </div>

              <%!-- Max Tags --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Max Tags</span>
                </label>
                <input
                  name="settings[posts_max_tags]"
                  type="number"
                  value={@posts_max_tags}
                  class="input input-bordered focus:input-primary"
                  min="0"
                  max="100"
                />
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Maximum hashtags per post (0-100)
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <%!-- Module Configuration Card --%>
        <div class="card bg-base-100 shadow-xl mb-6">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-cog-6-tooth" class="w-6 h-6" /> Module Configuration
            </h2>

            <div class="space-y-4">
              <%!-- Posts Per Page --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Posts Per Page</span>
                </label>
                <input
                  name="settings[posts_per_page]"
                  type="number"
                  value={@posts_per_page}
                  class="input input-bordered focus:input-primary w-full max-w-xs"
                  min="5"
                  max="100"
                />
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Number of posts to display per page (5-100)
                  </span>
                </label>
              </div>

              <div class="divider"></div>

              <%!-- Default Status --%>
              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium">Default Post Status</span>
                </label>
                <select
                  name="settings[posts_default_status]"
                  class="select select-bordered focus:select-primary w-full max-w-xs"
                >
                  <option value="draft" selected={@posts_default_status == "draft"}>
                    Draft
                  </option>
                  <option value="public" selected={@posts_default_status == "public"}>
                    Public
                  </option>
                  <option value="unlisted" selected={@posts_default_status == "unlisted"}>
                    Unlisted
                  </option>
                </select>
                <label class="label">
                  <span class="label-text-alt text-base-content/70">
                    Default visibility status for new posts
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <%!-- Feature Toggles Card --%>
        <div class="card bg-base-100 shadow-xl mb-6">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-check-circle" class="w-6 h-6" /> Feature Toggles
            </h2>

            <div class="space-y-4">
              <%!-- Likes Enabled --%>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <span class="label-text text-lg">
                    <span class="font-semibold">Enable Likes</span>
                    <div class="text-sm text-base-content/70 mt-1">
                      Allow users to like/favorite posts
                    </div>
                  </span>
                  <input type="hidden" name="settings[posts_likes_enabled]" value="false" />
                  <input
                    type="checkbox"
                    name="settings[posts_likes_enabled]"
                    value="true"
                    class="toggle toggle-secondary"
                    checked={@posts_likes_enabled == "true"}
                  />
                </label>
              </div>

              <div class="divider"></div>

              <%!-- Allow Scheduling --%>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <span class="label-text text-lg">
                    <span class="font-semibold">Allow Scheduling</span>
                    <div class="text-sm text-base-content/70 mt-1">
                      Enable scheduling posts for future publication
                    </div>
                  </span>
                  <input type="hidden" name="settings[posts_allow_scheduling]" value="false" />
                  <input
                    type="checkbox"
                    name="settings[posts_allow_scheduling]"
                    value="true"
                    class="toggle toggle-accent"
                    checked={@posts_allow_scheduling == "true"}
                  />
                </label>
              </div>

              <div class="divider"></div>

              <%!-- Allow Groups --%>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <span class="label-text text-lg">
                    <span class="font-semibold">Allow Groups</span>
                    <div class="text-sm text-base-content/70 mt-1">
                      Enable user-specific post collections (Pinterest-style)
                    </div>
                  </span>
                  <input type="hidden" name="settings[posts_allow_groups]" value="false" />
                  <input
                    type="checkbox"
                    name="settings[posts_allow_groups]"
                    value="true"
                    class="toggle toggle-accent"
                    checked={@posts_allow_groups == "true"}
                  />
                </label>
              </div>

              <div class="divider"></div>

              <%!-- Allow Reposts --%>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <span class="label-text text-lg">
                    <span class="font-semibold">Allow Reposts</span>
                    <div class="text-sm text-base-content/70 mt-1">
                      Enable sharing/reposting of other users' posts
                    </div>
                  </span>
                  <input type="hidden" name="settings[posts_allow_reposts]" value="false" />
                  <input
                    type="checkbox"
                    name="settings[posts_allow_reposts]"
                    value="true"
                    class="toggle toggle-accent"
                    checked={@posts_allow_reposts == "true"}
                  />
                </label>
              </div>

              <div class="divider"></div>

              <%!-- SEO Auto Slug --%>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <span class="label-text text-lg">
                    <span class="font-semibold">Auto-generate SEO Slugs</span>
                    <div class="text-sm text-base-content/70 mt-1">
                      Automatically create URL-friendly slugs from post titles
                    </div>
                  </span>
                  <input type="hidden" name="settings[posts_seo_auto_slug]" value="false" />
                  <input
                    type="checkbox"
                    name="settings[posts_seo_auto_slug]"
                    value="true"
                    class="toggle toggle-info"
                    checked={@posts_seo_auto_slug == "true"}
                  />
                </label>
              </div>

              <div class="divider"></div>

              <%!-- Show View Count --%>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <span class="label-text text-lg">
                    <span class="font-semibold">Show View Count</span>
                    <div class="text-sm text-base-content/70 mt-1">
                      Display view counter on posts
                    </div>
                  </span>
                  <input type="hidden" name="settings[posts_show_view_count]" value="false" />
                  <input
                    type="checkbox"
                    name="settings[posts_show_view_count]"
                    value="true"
                    class="toggle toggle-info"
                    checked={@posts_show_view_count == "true"}
                  />
                </label>
              </div>
            </div>
          </div>
        </div>

        <%!-- Moderation Card --%>
        <div class="card bg-base-100 shadow-xl mb-6">
          <div class="card-body">
            <h2 class="card-title text-2xl mb-4">
              <.icon name="hero-shield-check" class="w-6 h-6" /> Moderation
            </h2>

            <div class="space-y-4">
              <%!-- Require Approval --%>
              <div class="form-control">
                <label class="label cursor-pointer">
                  <span class="label-text text-lg">
                    <span class="font-semibold">Require Post Approval</span>
                    <div class="text-sm text-base-content/70 mt-1">
                      All new posts must be approved by an admin before going public
                    </div>
                  </span>
                  <input type="hidden" name="settings[posts_require_approval]" value="false" />
                  <input
                    type="checkbox"
                    name="settings[posts_require_approval]"
                    value="true"
                    class="toggle toggle-warning"
                    checked={@posts_require_approval == "true"}
                  />
                </label>
              </div>
            </div>

            <div class="alert alert-info mt-4">
              <.icon name="hero-information-circle" class="w-5 h-5" />
              <div>
                <h3 class="font-bold">Moderation Tips</h3>
                <p class="text-sm mt-1">
                  Enable these features for tighter content control. Moderation can help prevent spam and inappropriate content from appearing on your platform.
                </p>
              </div>
            </div>
          </div>
        </div>

        <%!-- Action Buttons --%>
        <div class="flex flex-col sm:flex-row gap-4 justify-end">
          <button
            type="button"
            phx-click="reset_defaults"
            class="btn btn-ghost btn-outline"
            data-confirm="Are you sure you want to reset all settings to defaults?"
          >
            <.icon name="hero-arrow-path" class="w-4 h-4 mr-2" /> Reset to Defaults
          </button>

          <button
            type="submit"
            class={["btn btn-primary", if(@saving, do: "loading", else: "")]}
            disabled={@saving}
          >
            <%= if @saving do %>
              Saving...
            <% else %>
              <.icon name="hero-check" class="w-4 h-4 mr-2" /> Save Settings
            <% end %>
          </button>
        </div>
      </.form>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
