<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} - Maintenance Mode Settings"
  current_path={@url_path}
  project_title={@project_title}
  current_locale={assigns[:current_locale] || "en"}
>
  <div class="container mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full mb-6">
      <div class="mb-4">
        <%!-- Back Button --%>
        <.link
          navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}
          class="btn btn-outline btn-primary btn-sm"
        >
          <.icon name="hero-arrow-left" class="w-4 h-4" /> Back to Modules
        </.link>
      </div>
      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-2xl sm:text-4xl font-bold text-base-content mb-3">
          Maintenance Mode Settings
        </h1>
        <p class="text-base sm:text-lg text-base-content/70">
          Customize the maintenance page message
        </p>
      </div>
    </header>
    <%!-- Maintenance Mode Toggle --%>
    <div class="card bg-base-100 shadow-xl mb-6">
      <div class="card-body">
        <div class="flex items-center justify-between">
          <div class="flex-1">
            <h2 class="card-title mb-2">
              <.icon name="hero-power" class="w-5 h-5" /> Maintenance Mode Status
            </h2>
            <p class="text-sm text-base-content/70">
              {if @enabled,
                do:
                  "Site is currently in maintenance mode - non-admin users see the maintenance page",
                else: "Site is operating normally - all users have access"}
            </p>
          </div>
          <div class="flex-shrink-0 ml-4">
            <input
              type="checkbox"
              class="toggle toggle-lg toggle-warning"
              checked={@enabled}
              phx-click="toggle_maintenance_mode"
            />
          </div>
        </div>
        <%= if @enabled do %>
          <div class="alert alert-warning mt-4">
            <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
            <span>
              <strong>Active:</strong>
              Non-admin users are currently seeing the maintenance page below.
            </span>
          </div>
        <% end %>
      </div>
    </div>
    <div class="grid gap-6 lg:grid-cols-2">
      <%!-- Settings Form --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title mb-4">
            <.icon name="hero-cog-6-tooth" class="w-5 h-5" /> Configuration
          </h2>
          <form phx-submit="save" class="space-y-4">
            <%!-- Header Input --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-semibold">Header Text</span>
              </label>
              <input
                type="text"
                name="header"
                value={@header}
                phx-change="update_header"
                phx-debounce="300"
                class="input input-bordered w-full"
                placeholder="Under Construction"
                required
              />
              <label class="label">
                <span class="label-text-alt">Main heading shown on maintenance page</span>
              </label>
            </div>
            <%!-- Subtext Input --%>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-semibold">Message Text</span>
              </label>
              <textarea
                name="subtext"
                phx-change="update_subtext"
                phx-debounce="300"
                class="textarea textarea-bordered w-full h-32"
                placeholder="We'll be back soon..."
                required
              >{@subtext}</textarea>
              <label class="label">
                <span class="label-text-alt">Detailed message shown below the header</span>
              </label>
            </div>
            <%!-- Reminder Info --%>
            <div class="alert alert-info">
              <.icon name="hero-information-circle" class="w-5 h-5" />
              <div>
                <div class="text-sm">
                  Changes to header and message text take effect immediately.
                  Use the toggle above to activate or deactivate maintenance mode.
                </div>
              </div>
            </div>
            <%!-- Action Buttons --%>
            <div class="flex gap-2">
              <button
                type="submit"
                class={"btn btn-primary flex-1 #{if @saved, do: "btn-success"}"}
              >
                <.icon
                  name={if @saved, do: "hero-check", else: "hero-arrow-down-tray"}
                  class="w-5 h-5"
                />
                {if @saved, do: "Saved!", else: "Save Changes"}
              </button>
              <button
                type="button"
                phx-click="cancel"
                class="btn btn-outline"
                disabled={@saved}
              >
                <.icon name="hero-x-mark" class="w-5 h-5" /> Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
      <%!-- Live Preview --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title mb-4">
            <.icon name="hero-eye" class="w-5 h-5" /> Live Preview
          </h2>
          <div class="bg-base-200 rounded-lg p-8 min-h-[400px] flex items-center justify-center">
            <div class="card bg-base-100 shadow-2xl border-2 border-dashed border-base-300 w-full">
              <div class="card-body text-center py-8">
                <%!-- Icon --%>
                <div class="text-6xl mb-4 opacity-70">
                  🚧
                </div>
                <%!-- Header --%>
                <h1 class="text-3xl font-bold text-base-content mb-3">
                  {@header}
                </h1>
                <%!-- Subtext --%>
                <p class="text-base text-base-content/70 mb-6">
                  {@subtext}
                </p>
              </div>
            </div>
          </div>
          <div class="alert alert-info mt-4">
            <.icon name="hero-information-circle" class="w-5 h-5" />
            <span class="text-sm">This is how non-admin users will see the maintenance page</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
