<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} User 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">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin/settings")}
      title={gettext("User Settings")}
      subtitle={gettext("Manage user registration, defaults, and custom fields")}
    />

    <%!-- Settings Form --%>
    <div class="max-w-2xl mx-auto space-y-6">
      <%!-- User Configuration Settings Card --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-xl mb-6">{gettext("User Configuration")}</h2>

          <.form
            :let={_form}
            for={@changeset}
            id="user_settings_form"
            phx-submit="save_settings"
            phx-change="validate_settings"
            class="space-y-6"
          >
            <%!-- Hidden fields for required settings from General page --%>
            <%!-- Use @saved_settings to preserve database values, not @settings which may have incorrect form state --%>

            <%!-- General Settings --%>
            <input
              type="hidden"
              name="settings[project_title]"
              value={@saved_settings["project_title"]}
            />
            <input
              type="hidden"
              name="settings[site_url]"
              value={@saved_settings["site_url"]}
            />
            <input
              type="hidden"
              name="settings[week_start_day]"
              value={@saved_settings["week_start_day"]}
            />
            <input
              type="hidden"
              name="settings[time_zone]"
              value={@saved_settings["time_zone"]}
            />
            <input
              type="hidden"
              name="settings[date_format]"
              value={@saved_settings["date_format"]}
            />
            <input
              type="hidden"
              name="settings[time_format]"
              value={@saved_settings["time_format"]}
            />

            <%!-- Registration Control Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">
                  {gettext("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">{gettext("Anyone can register")}</span>
              </div>
              <div class="flex items-center gap-3 mb-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">{gettext("Track user registration location")}</span>
              </div>
              <div class="flex items-center gap-3">
                <input
                  name="settings[registration_show_username]"
                  type="hidden"
                  value="false"
                />
                <input
                  name="settings[registration_show_username]"
                  type="checkbox"
                  value="true"
                  checked={@settings["registration_show_username"] == "true"}
                  class="checkbox checkbox-primary"
                />
                <span class="label-text">{gettext("Show username field on registration")}</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">
                      {gettext("Registration:")} {if @settings["allow_registration"] == "true",
                        do: gettext("Enabled"),
                        else: gettext("Disabled")} | {gettext("Geolocation:")} {if @settings[
                                                                                     "track_registration_geolocation"
                                                                                   ] == "true",
                                                                                   do:
                                                                                     gettext(
                                                                                       "Enabled"
                                                                                     ),
                                                                                   else:
                                                                                     gettext(
                                                                                       "Disabled"
                                                                                     )}
                    </span>
                    <span class="text-base-content/40">
                      | {gettext("Saved:")} {if @saved_settings["allow_registration"] == "true",
                        do: gettext("Enabled"),
                        else: gettext("Disabled")} | {if @saved_settings[
                                                           "track_registration_geolocation"
                                                         ] ==
                                                           "true",
                                                         do: gettext("Enabled"),
                                                         else: gettext("Disabled")}
                    </span>
                  <% else %>
                    {gettext("Registration:")} {if @settings["allow_registration"] == "true",
                      do: gettext("Enabled"),
                      else: gettext("Disabled")} | {gettext("Geolocation:")} {if @settings[
                                                                                   "track_registration_geolocation"
                                                                                 ] == "true",
                                                                                 do:
                                                                                   gettext(
                                                                                     "Enabled"
                                                                                   ),
                                                                                 else:
                                                                                   gettext(
                                                                                     "Disabled"
                                                                                   )}
                  <% end %>
                </span>
              </div>

              <%!-- Privacy Notice for Geolocation --%>
              <%= if @settings["track_registration_geolocation"] == "true" do %>
                <div class="alert alert-info text-sm mt-2">
                  <.icon name="hero-information-circle" class="w-5 h-5" />
                  <div>
                    <div class="font-semibold">
                      {gettext("Privacy Notice: IP Geolocation Data")}
                    </div>
                    <div class="text-xs">
                      {gettext(
                        "When enabled, registration IP addresses and approximate location data (country, region, city) will be collected for analytics."
                      )}
                      {gettext(
                        "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>

            <%!-- New User Default Role Setting --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">
                  {gettext("New User Default Role")}
                </span>
                <span class="label-text-alt text-sm text-base-content/60">
                  {gettext("Role assigned to new user registrations")}
                </span>
              </label>
              <select
                name="settings[new_user_default_role]"
                class="select 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">
                      {gettext("Selected:")} {get_option_label(
                        @settings["new_user_default_role"],
                        @setting_options["new_user_default_role"]
                      )}
                    </span>
                    <span class="text-base-content/40">
                      | {gettext("Saved:")} {get_option_label(
                        @saved_settings["new_user_default_role"],
                        @setting_options["new_user_default_role"]
                      )}
                    </span>
                  <% else %>
                    {gettext("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">
                  <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
                  <div>
                    <div class="font-semibold">
                      {gettext("Security Notice: Medium Risk")}
                    </div>
                    <div class="text-xs">
                      {gettext(
                        "All new users will receive administrative privileges and access to the admin panel."
                      )}
                      {gettext("Consider \"User\" for most installations to maintain security.")}
                    </div>
                  </div>
                </div>
              <% end %>
            </div>

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

              <%!-- Security Warning for Inactive Status --%>
              <%= if @settings["new_user_default_status"] == "false" do %>
                <div class="alert alert-warning text-sm mt-2">
                  <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
                  <div>
                    <div class="font-semibold">
                      {gettext("Security Notice: Inactive Default")}
                    </div>
                    <div class="text-xs">
                      {gettext(
                        "New users will be created as inactive and will not be able to log in until an admin activates their account."
                      )}
                      {gettext(
                        "The first user (Owner) will always be active regardless of this setting."
                      )}
                    </div>
                  </div>
                </div>
              <% end %>
            </div>

            <%!-- Divider for Custom Fields --%>
            <div class="divider text-base-content/60 mt-6">{gettext("Custom User Fields")}</div>

            <%!-- Custom Fields Section --%>
            <div class="form-control w-full">
              <label class="label">
                <span class="label-text text-base font-medium">
                  {gettext("Manage Custom Fields")}
                </span>
                <span class="label-text-alt text-sm text-base-content/60">
                  {gettext("Define additional profile fields for users")}
                </span>
              </label>

              <%= if Enum.empty?(@field_definitions) do %>
                <%!-- Empty State --%>
                <div class="text-center py-8 border border-dashed border-base-300 rounded-lg">
                  <div class="text-4xl mb-4 opacity-50">📋</div>
                  <p class="text-base-content/60 mb-4">
                    {gettext("No custom fields defined yet")}
                  </p>
                  <button
                    type="button"
                    class="btn btn-primary btn-sm"
                    phx-click="show_add_field_form"
                  >
                    <.icon name="hero-plus" class="w-4 h-4" /> {gettext("Add First Field")}
                  </button>
                </div>
              <% else %>
                <%!-- Table Display --%>
                <.table_default variant="zebra" size="sm">
                  <.table_default_header>
                    <.table_default_row>
                      <.table_default_header_cell>{gettext("Field")}</.table_default_header_cell>
                      <.table_default_header_cell>{gettext("Type")}</.table_default_header_cell>
                      <.table_default_header_cell>
                        {gettext("Required")}
                      </.table_default_header_cell>
                      <.table_default_header_cell>{gettext("Status")}</.table_default_header_cell>
                      <.table_default_header_cell>
                        {gettext("User Access")}
                      </.table_default_header_cell>
                      <.table_default_header_cell>
                        {gettext("Actions")}
                      </.table_default_header_cell>
                    </.table_default_row>
                  </.table_default_header>

                  <.table_default_body>
                    <%= for field <- Enum.sort_by(@field_definitions, & &1["position"]) do %>
                      <.table_default_row>
                        <.table_default_cell>
                          <div class="font-semibold">{field["label"]}</div>
                          <div class="text-xs text-base-content/60">
                            {gettext("Key:")}
                            <code class="bg-base-300 px-1 rounded">{field["key"]}</code>
                          </div>
                        </.table_default_cell>
                        <.table_default_cell>
                          <span class="badge badge-sm h-auto">{field["type"]}</span>
                        </.table_default_cell>
                        <.table_default_cell>
                          <%= if field["required"] do %>
                            <span class="badge badge-sm badge-warning">{gettext("Yes")}</span>
                          <% else %>
                            <span class="badge badge-sm badge-ghost">{gettext("No")}</span>
                          <% end %>
                        </.table_default_cell>
                        <.table_default_cell>
                          <%= if field["enabled"] do %>
                            <span class="badge badge-sm badge-success">{gettext("Enabled")}</span>
                          <% else %>
                            <span class="badge badge-sm badge-ghost">{gettext("Disabled")}</span>
                          <% end %>
                        </.table_default_cell>
                        <.table_default_cell>
                          <%= if Map.get(field, "user_accessible", true) do %>
                            <span class="badge badge-sm badge-success">
                              {gettext("User Editable")}
                            </span>
                          <% else %>
                            <span class="badge badge-sm badge-warning">
                              {gettext("Admin Only")}
                            </span>
                          <% end %>
                        </.table_default_cell>
                        <.table_default_cell>
                          <div class="flex gap-1">
                            <button
                              type="button"
                              class="btn btn-xs btn-ghost tooltip tooltip-bottom"
                              data-tip={
                                if field["enabled"],
                                  do: gettext("Disable"),
                                  else: gettext("Enable")
                              }
                              phx-click="toggle_field_enabled"
                              phx-value-key={field["key"]}
                            >
                              <%= if field["enabled"] do %>
                                <.icon name="hero-eye" class="w-3 h-3 hidden sm:inline" />
                                <span class="sm:hidden whitespace-nowrap">
                                  {gettext("Disable")}
                                </span>
                              <% else %>
                                <.icon name="hero-eye-slash" class="w-3 h-3 hidden sm:inline" />
                                <span class="sm:hidden whitespace-nowrap">
                                  {gettext("Enable")}
                                </span>
                              <% end %>
                            </button>
                            <button
                              type="button"
                              class="btn btn-xs btn-ghost tooltip tooltip-bottom"
                              data-tip={gettext("Edit")}
                              phx-click="show_edit_field_form"
                              phx-value-key={field["key"]}
                            >
                              <.icon name="hero-pencil" class="w-3 h-3 hidden sm:inline" />
                              <span class="sm:hidden whitespace-nowrap">{gettext("Edit")}</span>
                            </button>
                            <button
                              type="button"
                              class="btn btn-xs btn-ghost text-error tooltip tooltip-bottom"
                              data-tip={gettext("Delete")}
                              phx-click="delete_field"
                              phx-value-key={field["key"]}
                              onclick="return confirm('Are you sure you want to delete this field?')"
                            >
                              <.icon name="hero-trash" class="w-3 h-3 hidden sm:inline" />
                              <span class="sm:hidden whitespace-nowrap">{gettext("Delete")}</span>
                            </button>
                          </div>
                        </.table_default_cell>
                      </.table_default_row>
                    <% end %>
                  </.table_default_body>
                </.table_default>

                <button
                  type="button"
                  class="btn btn-outline btn-sm mt-2"
                  phx-click="show_add_field_form"
                >
                  <.icon name="hero-plus" class="w-4 h-4" /> {gettext("Add Custom Field")}
                </button>
              <% end %>
            </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 %>
                  {gettext("Saving...")}
                <% else %>
                  {gettext("Save User Settings")}
                <% end %>
              </button>
            </div>
          </.form>

          <%!-- Field Form Modal (outside main form) --%>
          <%= if @show_field_form do %>
            <div class="modal modal-open">
              <div class="modal-box max-w-2xl">
                <h3 class="font-bold text-lg mb-4">
                  {if @editing_field,
                    do: gettext("Edit Custom Field"),
                    else: gettext("Add Custom Field")}
                </h3>

                <.form :let={_f} for={%{}} phx-submit="save_field" class="space-y-4">
                  <%!-- Field Key --%>
                  <div class="form-control">
                    <label class="label">
                      <span class="label-text">{gettext("Field Key")} *</span>
                    </label>
                    <input
                      type="text"
                      name="field[key]"
                      value={if @editing_field, do: @editing_field["key"], else: ""}
                      class="input input-bordered"
                      placeholder="phone_number"
                      required
                      disabled={!!@editing_field}
                    />
                    <div class="label">
                      <span class="label-text-alt">
                        {gettext("Lowercase letters, numbers, underscores only")}
                      </span>
                    </div>
                  </div>

                  <%!-- Field Label --%>
                  <div class="form-control">
                    <label class="label">
                      <span class="label-text">{gettext("Label")} *</span>
                    </label>
                    <input
                      type="text"
                      name="field[label]"
                      value={if @editing_field, do: @editing_field["label"], else: ""}
                      class="input input-bordered"
                      placeholder={gettext("Phone Number")}
                      required
                    />
                  </div>

                  <%!-- Field Type --%>
                  <div class="form-control">
                    <label class="label">
                      <span class="label-text">{gettext("Type")} *</span>
                    </label>
                    <select
                      name="field[type]"
                      class="select"
                      required
                      phx-change="field_type_changed"
                    >
                      <%= for type <- ~w(text textarea number boolean date email url uuid select radio checkbox) do %>
                        <option
                          value={type}
                          selected={@field_form_type == type}
                        >
                          {String.capitalize(type)}
                        </option>
                      <% end %>
                    </select>
                  </div>

                  <%!-- Required Checkbox --%>
                  <div class="form-control">
                    <label class="label cursor-pointer justify-start gap-3">
                      <input
                        type="checkbox"
                        name="field[required]"
                        value="true"
                        checked={@editing_field && @editing_field["required"]}
                        class="checkbox checkbox-primary"
                      />
                      <span class="label-text">{gettext("Required field")}</span>
                    </label>
                  </div>

                  <%!-- User Accessible Checkbox --%>
                  <div class="form-control">
                    <label class="label cursor-pointer justify-start gap-3">
                      <input
                        type="hidden"
                        name="field[user_accessible]"
                        value="false"
                      />
                      <input
                        type="checkbox"
                        name="field[user_accessible]"
                        value="true"
                        checked={
                          if @editing_field,
                            do: Map.get(@editing_field, "user_accessible", true),
                            else: true
                        }
                        class="checkbox checkbox-primary"
                      />
                      <span class="label-text">{gettext("User can edit this field")}</span>
                    </label>
                    <div class="label">
                      <span class="label-text-alt">
                        {gettext(
                          "When checked, users can view and edit this field on their settings page. When unchecked, only admins can edit it."
                        )}
                      </span>
                    </div>
                  </div>

                  <%!-- Options for Select/Radio/Checkbox types --%>
                  <%= if @field_form_type in ~w(select radio checkbox) do %>
                    <div class="form-control">
                      <label class="label">
                        <span class="label-text">{gettext("Options")} *</span>
                        <span class="label-text-alt">
                          {length(@field_form_options)} {gettext("option(s)")}
                        </span>
                      </label>

                      <%!-- Current options list --%>
                      <%= if @field_form_options != [] do %>
                        <div class="space-y-2 mb-3">
                          <%= for {option, index} <- Enum.with_index(@field_form_options) do %>
                            <div class="flex items-center gap-2">
                              <input type="hidden" name="field[options][]" value={option} />
                              <span class="badge badge-lg flex-1 justify-start">{option}</span>
                              <button
                                type="button"
                                class="btn btn-xs btn-ghost text-error"
                                phx-click="remove_field_option"
                                phx-value-index={index}
                              >
                                <.icon name="hero-x-mark" class="w-4 h-4" />
                              </button>
                            </div>
                          <% end %>
                        </div>
                      <% end %>

                      <%!-- Add option input --%>
                      <div class="flex gap-2">
                        <input
                          type="text"
                          value={@new_option_value}
                          class="input input-bordered input-sm flex-1"
                          placeholder={gettext("Enter option value")}
                          phx-keyup="update_new_option"
                          id="new_option_input"
                        />
                        <button
                          type="button"
                          class="btn btn-sm btn-outline"
                          phx-click="add_field_option"
                        >
                          <.icon name="hero-plus" class="w-4 h-4" /> {gettext("Add")}
                        </button>
                      </div>

                      <div class="label">
                        <span class="label-text-alt">
                          {gettext("Type an option and press Enter or click Add")}
                        </span>
                      </div>

                      <%= if @field_form_options == [] do %>
                        <div class="text-sm text-warning mt-1">
                          <.icon name="hero-exclamation-triangle" class="w-4 h-4 inline" />
                          {gettext("At least one option is required for %{type} fields",
                            type: String.capitalize(@field_form_type)
                          )}
                        </div>
                      <% end %>
                    </div>
                  <% end %>

                  <%!-- Modal Actions --%>
                  <div class="modal-action">
                    <button type="submit" class="btn btn-primary">
                      {if @editing_field, do: gettext("Update Field"), else: gettext("Add Field")}
                    </button>
                    <button type="button" class="btn" phx-click="hide_field_form">
                      {gettext("Cancel")}
                    </button>
                  </div>
                </.form>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
