<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} Settings"
  current_path={@url_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={PhoenixKit.Utils.Routes.path("/admin/dashboard")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Dashboard
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">Settings</h1>
        <p class="text-lg text-base-content">Configure system preferences and options</p>
      </div>
    </header>

    <%!-- Settings Form --%>
    <div class="max-w-2xl mx-auto">
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-xl mb-6">System Configuration</h2>

          <.form
            :let={_form}
            for={@changeset}
            id="settings_form"
            phx-submit="save_settings"
            phx-change="validate_settings"
            class="space-y-6"
          >
            <%!-- Project Title Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Project Title</span>
                <span class="label-text-alt text-sm text-base-content/60">
                  Application name display
                </span>
              </label>
              <input
                name="settings[project_title]"
                type="text"
                value={@settings["project_title"]}
                class="input input-bordered w-full focus:input-primary"
                placeholder="Enter project title"
                phx-debounce="500"
              />
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["project_title"] != @saved_settings["project_title"] do %>
                    <span class="text-warning">
                      Selected: {@settings["project_title"]}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {@saved_settings["project_title"]}
                    </span>
                  <% else %>
                    Saved: {@settings["project_title"]}
                  <% end %>
                </span>
              </div>
            </div>

            <%!-- Site Address URL Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Site Address (URL)</span>
              </label>
              <input
                name="settings[site_url]"
                type="url"
                value={@settings["site_url"]}
                class="input input-bordered w-full focus:input-primary"
                placeholder="https://site.com"
                phx-debounce="500"
              />
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["site_url"] != @saved_settings["site_url"] do %>
                    <span class="text-warning">
                      Selected: {if @settings["site_url"] != "",
                        do: @settings["site_url"],
                        else: "(empty)"}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {if @saved_settings["site_url"] != "",
                        do: @saved_settings["site_url"],
                        else: "(empty)"}
                    </span>
                  <% else %>
                    Saved: {if @settings["site_url"] != "",
                      do: @settings["site_url"],
                      else: "(empty)"}
                  <% end %>
                </span>
              </div>
            </div>

            <%!-- Registration Control Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Registration Settings</span>
              </label>
              <div class="flex items-center gap-3 mb-3">
                <input
                  name="settings[allow_registration]"
                  type="hidden"
                  value="false"
                />
                <input
                  name="settings[allow_registration]"
                  type="checkbox"
                  value="true"
                  checked={@settings["allow_registration"] == "true"}
                  class="checkbox checkbox-primary"
                />
                <span class="label-text">Anyone can register</span>
              </div>
              <div class="flex items-center gap-3">
                <input
                  name="settings[track_registration_geolocation]"
                  type="hidden"
                  value="false"
                />
                <input
                  name="settings[track_registration_geolocation]"
                  type="checkbox"
                  value="true"
                  checked={@settings["track_registration_geolocation"] == "true"}
                  class="checkbox checkbox-primary"
                />
                <span class="label-text">Track user registration location</span>
              </div>
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["allow_registration"] != @saved_settings["allow_registration"] or @settings["track_registration_geolocation"] != @saved_settings["track_registration_geolocation"] do %>
                    <span class="text-warning">
                      Registration: {if @settings["allow_registration"] == "true",
                        do: "Enabled",
                        else: "Disabled"} |
                      Geolocation: {if @settings["track_registration_geolocation"] == "true",
                        do: "Enabled",
                        else: "Disabled"}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {if @saved_settings["allow_registration"] == "true",
                        do: "Enabled",
                        else: "Disabled"} | {if @saved_settings["track_registration_geolocation"] ==
                                                  "true",
                                                do: "Enabled",
                                                else: "Disabled"}
                    </span>
                  <% else %>
                    Registration: {if @settings["allow_registration"] == "true",
                      do: "Enabled",
                      else: "Disabled"} |
                    Geolocation: {if @settings["track_registration_geolocation"] == "true",
                      do: "Enabled",
                      else: "Disabled"}
                  <% end %>
                </span>
              </div>

              <%!-- Privacy Notice for Geolocation --%>
              <%= if @settings["track_registration_geolocation"] == "true" do %>
                <div class="alert alert-info text-sm mt-2">
                  <PhoenixKitWeb.Components.Core.Icons.icon_info class="stroke-current shrink-0 h-5 w-5" />
                  <div>
                    <div class="font-semibold">
                      Privacy Notice: IP Geolocation Data
                    </div>
                    <div class="text-xs">
                      When enabled, registration IP addresses and approximate location data (country, region, city) will be collected for analytics.
                      Uses free APIs: IP-API.com (45 requests/minute) with ipapi.co (1000 requests/day) fallback. Defaults to OFF for privacy.
                    </div>
                  </div>
                </div>
              <% end %>
            </div>

            <%!-- Authentication Methods Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Authentication Methods</span>
                <span class="label-text-alt text-sm text-base-content/60">
                  Control available login/registration methods
                </span>
              </label>

              <%!-- Magic Link Methods --%>
              <div class="mb-3">
                <div class="text-sm font-semibold text-base-content/70 mb-2">Magic Link</div>
                <div class="flex items-center gap-3 mb-2 ml-4">
                  <input
                    name="settings[magic_link_login_enabled]"
                    type="hidden"
                    value="false"
                  />
                  <input
                    name="settings[magic_link_login_enabled]"
                    type="checkbox"
                    value="true"
                    checked={@settings["magic_link_login_enabled"] == "true"}
                    class="checkbox checkbox-primary"
                  />
                  <span class="label-text">Enable Magic Link for login</span>
                </div>
                <div class="flex items-center gap-3 ml-4">
                  <input
                    name="settings[magic_link_registration_enabled]"
                    type="hidden"
                    value="false"
                  />
                  <input
                    name="settings[magic_link_registration_enabled]"
                    type="checkbox"
                    value="true"
                    checked={@settings["magic_link_registration_enabled"] == "true"}
                    class="checkbox checkbox-primary"
                  />
                  <span class="label-text">Enable Magic Link for registration</span>
                </div>
              </div>

              <%!-- OAuth Methods --%>
              <div>
                <div class="text-sm font-semibold text-base-content/70 mb-2">OAuth Providers</div>
                <div class="flex items-center gap-3 mb-2 ml-4">
                  <input name="settings[oauth_enabled]" type="hidden" value="false" />
                  <input
                    name="settings[oauth_enabled]"
                    type="checkbox"
                    value="true"
                    checked={@settings["oauth_enabled"] == "true"}
                    class="checkbox checkbox-primary"
                    phx-click="toggle_oauth_master"
                  />
                  <span class="label-text font-semibold">Enable OAuth (Master Switch)</span>
                </div>

                <%!-- Individual OAuth Providers (disabled if master is off) --%>
                <div class={[
                  "ml-8 space-y-2",
                  if(@settings["oauth_enabled"] != "true", do: "opacity-50", else: "")
                ]}>
                  <div class="flex items-center gap-3">
                    <input
                      name="settings[oauth_google_enabled]"
                      type="hidden"
                      value="false"
                    />
                    <input
                      name="settings[oauth_google_enabled]"
                      type="checkbox"
                      value="true"
                      checked={@settings["oauth_google_enabled"] == "true"}
                      disabled={@settings["oauth_enabled"] != "true"}
                      class="checkbox checkbox-primary"
                    />
                    <span class="label-text">Google Sign-In</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <input name="settings[oauth_apple_enabled]" type="hidden" value="false" />
                    <input
                      name="settings[oauth_apple_enabled]"
                      type="checkbox"
                      value="true"
                      checked={@settings["oauth_apple_enabled"] == "true"}
                      disabled={@settings["oauth_enabled"] != "true"}
                      class="checkbox checkbox-primary"
                    />
                    <span class="label-text">Apple Sign-In</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <input
                      name="settings[oauth_github_enabled]"
                      type="hidden"
                      value="false"
                    />
                    <input
                      name="settings[oauth_github_enabled]"
                      type="checkbox"
                      value="true"
                      checked={@settings["oauth_github_enabled"] == "true"}
                      disabled={@settings["oauth_enabled"] != "true"}
                      class="checkbox checkbox-primary"
                    />
                    <span class="label-text">GitHub Sign-In</span>
                  </div>
                </div>
              </div>

              <%!-- OAuth Provider Credential Forms --%>
              <%= if @settings["oauth_enabled"] == "true" do %>
                <%!-- Google OAuth Credentials --%>
                <%= if @settings["oauth_google_enabled"] == "true" do %>
                  <div class="card bg-base-200 p-4 mt-3">
                    <h3 class="font-semibold mb-3 flex items-center gap-2">
                      <PhoenixKitWeb.Components.Core.Icons.icon_google class="h-5 w-5" />
                      Google OAuth Credentials
                    </h3>

                    <div class="form-control">
                      <label class="label">
                        <span class="label-text">Client ID</span>
                      </label>
                      <input
                        type="text"
                        name="settings[oauth_google_client_id]"
                        value={@settings["oauth_google_client_id"] || ""}
                        placeholder="Your Google OAuth Client ID"
                        class="input input-bordered"
                      />
                    </div>

                    <div class="form-control mt-2">
                      <label class="label">
                        <span class="label-text">Client Secret</span>
                      </label>
                      <input
                        type="password"
                        name="settings[oauth_google_client_secret]"
                        value={@settings["oauth_google_client_secret"] || ""}
                        placeholder="Your Google OAuth Client Secret"
                        class="input input-bordered"
                      />
                    </div>

                    <button
                      type="button"
                      phx-click="test_oauth"
                      phx-value-provider="google"
                      class="btn btn-sm btn-outline mt-3 w-fit"
                    >
                      Test Credentials
                    </button>
                  </div>
                <% end %>

                <%!-- Apple OAuth Credentials --%>
                <%= if @settings["oauth_apple_enabled"] == "true" do %>
                  <div class="card bg-base-200 p-4 mt-3">
                    <h3 class="font-semibold mb-3 flex items-center gap-2">
                      <PhoenixKitWeb.Components.Core.Icons.icon_apple class="h-5 w-5" />
                      Apple OAuth Credentials
                    </h3>

                    <div class="form-control">
                      <label class="label">
                        <span class="label-text">Client ID</span>
                      </label>
                      <input
                        type="text"
                        name="settings[oauth_apple_client_id]"
                        value={@settings["oauth_apple_client_id"] || ""}
                        placeholder="com.yourapp.service"
                        class="input input-bordered"
                      />
                    </div>

                    <div class="form-control mt-2">
                      <label class="label">
                        <span class="label-text">Team ID</span>
                      </label>
                      <input
                        type="text"
                        name="settings[oauth_apple_team_id]"
                        value={@settings["oauth_apple_team_id"] || ""}
                        placeholder="Your Apple Team ID"
                        class="input input-bordered"
                      />
                    </div>

                    <div class="form-control mt-2">
                      <label class="label">
                        <span class="label-text">Key ID</span>
                      </label>
                      <input
                        type="text"
                        name="settings[oauth_apple_key_id]"
                        value={@settings["oauth_apple_key_id"] || ""}
                        placeholder="Your Apple Key ID"
                        class="input input-bordered"
                      />
                    </div>

                    <div class="form-control mt-2">
                      <label class="label">
                        <span class="label-text">Private Key</span>
                      </label>
                      <textarea
                        name="settings[oauth_apple_private_key]"
                        rows="5"
                        placeholder="-----BEGIN PRIVATE KEY-----&#10;Your Apple private key content&#10;-----END PRIVATE KEY-----"
                        class="textarea textarea-bordered font-mono text-xs"
                      >{@settings["oauth_apple_private_key"] || ""}</textarea>
                    </div>

                    <button
                      type="button"
                      phx-click="test_oauth"
                      phx-value-provider="apple"
                      class="btn btn-sm btn-outline mt-3 w-fit"
                    >
                      Test Credentials
                    </button>
                  </div>
                <% end %>

                <%!-- GitHub OAuth Credentials --%>
                <%= if @settings["oauth_github_enabled"] == "true" do %>
                  <div class="card bg-base-200 p-4 mt-3">
                    <h3 class="font-semibold mb-3 flex items-center gap-2">
                      <PhoenixKitWeb.Components.Core.Icons.icon_github class="h-5 w-5" />
                      GitHub OAuth Credentials
                    </h3>

                    <div class="form-control">
                      <label class="label">
                        <span class="label-text">Client ID</span>
                      </label>
                      <input
                        type="text"
                        name="settings[oauth_github_client_id]"
                        value={@settings["oauth_github_client_id"] || ""}
                        placeholder="Your GitHub OAuth Client ID"
                        class="input input-bordered"
                      />
                    </div>

                    <div class="form-control mt-2">
                      <label class="label">
                        <span class="label-text">Client Secret</span>
                      </label>
                      <input
                        type="password"
                        name="settings[oauth_github_client_secret]"
                        value={@settings["oauth_github_client_secret"] || ""}
                        placeholder="Your GitHub OAuth Client Secret"
                        class="input input-bordered"
                      />
                    </div>

                    <button
                      type="button"
                      phx-click="test_oauth"
                      phx-value-provider="github"
                      class="btn btn-sm btn-outline mt-3 w-fit"
                    >
                      Test Credentials
                    </button>
                  </div>
                <% end %>

                <%!-- OAuth Configuration Notice --%>
                <div class="alert alert-info text-sm mt-3">
                  <PhoenixKitWeb.Components.Core.Icons.icon_info class="stroke-current shrink-0 h-5 w-5" />
                  <div>
                    <div class="font-semibold">OAuth Setup Instructions</div>
                    <div class="text-xs">
                      <p>1. Enable the provider above and save settings</p>
                      <p>2. Enter your OAuth credentials in the form that appears</p>
                      <p>3. Save settings again to store credentials</p>
                      <p>4. Click "Test Credentials" to verify configuration</p>
                      <p class="mt-1">
                        Note: OAuth providers require ueberauth dependencies to be installed.
                      </p>
                    </div>
                  </div>
                </div>

                <%!-- Reload OAuth Configuration Button --%>
                <button
                  type="button"
                  phx-click="reload_oauth_config"
                  class="btn btn-sm btn-outline btn-secondary mt-3"
                >
                  <PhoenixKitWeb.Components.Core.Icons.icon_refresh class="h-4 w-4" />
                  Reload OAuth Configuration
                </button>
              <% end %>
            </div>

            <%!-- New User Default Role Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">New User Default Role</span>
                <span class="label-text-alt text-sm text-base-content/60">
                  Role assigned to new user registrations
                </span>
              </label>
              <select
                name="settings[new_user_default_role]"
                class="select select-bordered w-full focus:select-primary"
              >
                <%= for {label, value} <- @setting_options["new_user_default_role"] do %>
                  <option value={value} selected={value == @settings["new_user_default_role"]}>
                    {label}
                  </option>
                <% end %>
              </select>
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["new_user_default_role"] != @saved_settings["new_user_default_role"] do %>
                    <span class="text-warning">
                      Selected: {get_option_label(
                        @settings["new_user_default_role"],
                        @setting_options["new_user_default_role"]
                      )}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {get_option_label(
                        @saved_settings["new_user_default_role"],
                        @setting_options["new_user_default_role"]
                      )}
                    </span>
                  <% else %>
                    Saved: {get_option_label(
                      @settings["new_user_default_role"],
                      @setting_options["new_user_default_role"]
                    )}
                  <% end %>
                </span>
              </div>

              <%!-- Security Warning for Admin Role --%>
              <%= if @settings["new_user_default_role"] == "Admin" do %>
                <div class="alert alert-warning text-sm mt-2">
                  <PhoenixKitWeb.Components.Core.Icons.icon_warning class="stroke-current shrink-0 h-5 w-5" />
                  <div>
                    <div class="font-semibold">
                      Security Notice: Medium Risk
                    </div>
                    <div class="text-xs">
                      All new users will receive administrative privileges and access to the admin panel.
                      Consider "User" for most installations to maintain security.
                    </div>
                  </div>
                </div>
              <% end %>
            </div>

            <%!-- Week Start Day Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Week Start On</span>
                <span class="label-text-alt text-sm text-base-content/60">
                  First day of the week
                </span>
              </label>
              <select
                name="settings[week_start_day]"
                class="select select-bordered w-full focus:select-primary"
              >
                <%= for {label, value} <- @setting_options["week_start_day"] do %>
                  <option value={value} selected={value == @settings["week_start_day"]}>
                    {label}
                  </option>
                <% end %>
              </select>
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["week_start_day"] != @saved_settings["week_start_day"] do %>
                    <span class="text-warning">
                      Selected: {get_option_label(
                        @settings["week_start_day"],
                        @setting_options["week_start_day"]
                      )}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {get_option_label(
                        @saved_settings["week_start_day"],
                        @setting_options["week_start_day"]
                      )}
                    </span>
                  <% else %>
                    Saved: {get_option_label(
                      @settings["week_start_day"],
                      @setting_options["week_start_day"]
                    )}
                  <% end %>
                </span>
              </div>
            </div>

            <%!-- Time Zone Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Time Zone</span>
                <span class="label-text-alt text-sm text-base-content/60">
                  System default timezone
                </span>
              </label>
              <select
                name="settings[time_zone]"
                class="select select-bordered w-full focus:select-primary"
              >
                <%= for {label, value} <- @setting_options["time_zone"] do %>
                  <option value={value} selected={value == @settings["time_zone"]}>
                    {label}
                  </option>
                <% end %>
              </select>
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["time_zone"] != @saved_settings["time_zone"] do %>
                    <span class="text-warning">
                      Selected: {get_timezone_label(@settings["time_zone"], @setting_options)}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {get_timezone_label(@saved_settings["time_zone"], @setting_options)}
                    </span>
                  <% else %>
                    Saved: {get_timezone_label(@settings["time_zone"], @setting_options)}
                  <% end %>
                </span>
              </div>
            </div>

            <%!-- Date Format Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Date Format</span>
                <span class="label-text-alt text-sm text-base-content/60">
                  How dates are displayed
                </span>
              </label>
              <select
                name="settings[date_format]"
                class="select select-bordered w-full focus:select-primary"
              >
                <%= for {label, value} <- @setting_options["date_format"] do %>
                  <option value={value} selected={value == @settings["date_format"]}>
                    {label}
                  </option>
                <% end %>
              </select>
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["date_format"] != @saved_settings["date_format"] do %>
                    <span class="text-warning">
                      Selected: {get_option_label(
                        @settings["date_format"],
                        @setting_options["date_format"]
                      )}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {get_option_label(
                        @saved_settings["date_format"],
                        @setting_options["date_format"]
                      )}
                    </span>
                  <% else %>
                    Saved: {get_option_label(
                      @settings["date_format"],
                      @setting_options["date_format"]
                    )}
                  <% end %>
                </span>
              </div>
            </div>

            <%!-- Time Format Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">Time Format</span>
                <span class="label-text-alt text-sm text-base-content/60">
                  How times are displayed
                </span>
              </label>
              <select
                name="settings[time_format]"
                class="select select-bordered w-full focus:select-primary"
              >
                <%= for {label, value} <- @setting_options["time_format"] do %>
                  <option value={value} selected={value == @settings["time_format"]}>
                    {label}
                  </option>
                <% end %>
              </select>
              <div class="label">
                <span class="label-text-alt text-xs text-base-content/50">
                  <%= if @settings["time_format"] != @saved_settings["time_format"] do %>
                    <span class="text-warning">
                      Selected: {get_option_label(
                        @settings["time_format"],
                        @setting_options["time_format"]
                      )}
                    </span>
                    <span class="text-base-content/40">
                      | Saved: {get_option_label(
                        @saved_settings["time_format"],
                        @setting_options["time_format"]
                      )}
                    </span>
                  <% else %>
                    Saved: {get_option_label(
                      @settings["time_format"],
                      @setting_options["time_format"]
                    )}
                  <% end %>
                </span>
              </div>
            </div>

            <%!-- Action Buttons --%>
            <div class="flex gap-3 pt-4">
              <button
                type="submit"
                class={[
                  "btn btn-primary flex-1",
                  if(@saving, do: "loading", else: "")
                ]}
                disabled={@saving}
              >
                <%= if @saving do %>
                  Saving...
                <% else %>
                  Save All Settings
                <% end %>
              </button>

              <button
                type="button"
                class="btn btn-outline"
                phx-click="reset_to_defaults"
              >
                <PhoenixKitWeb.Components.Core.Icons.icon_refresh class="w-4 h-4 mr-2" /> Reset
              </button>
            </div>
          </.form>

          <%!-- Information Panel --%>
          <div class="divider">Information</div>

          <div class="bg-base-200 rounded-lg p-4 mt-6">
            <div class="flex items-start gap-3">
              <div class="text-2xl">💡</div>
              <div class="flex-1">
                <h3 class="font-semibold text-base-content mb-2">About System Settings</h3>
                <ul class="text-sm text-base-content/70 space-y-1">
                  <li>• Make changes to dropdowns and click "Save All Settings" to apply</li>
                  <li>• Changes show "Selected" vs "Saved" values until you click Save</li>
                  <li>
                    • New user default role determines privileges for new registrations (first user always becomes Owner)
                  </li>
                  <li>
                    • Week start day controls which day begins the week (useful for calendar features)
                  </li>
                  <li>• Time zone affects date/time display throughout the system</li>
                  <li>
                    • Date formats control how dates appear (e.g. Users dashboard "Registered" field)
                  </li>
                  <li>• Time formats control 12-hour vs 24-hour time display</li>
                  <li>• Settings are applied system-wide and use Timex for robust formatting</li>
                  <li>• Currently supports 6 date formats including "September 2, 2025" style</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
