<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={@url_path}
  current_locale={@current_locale}
>
  <div class="container 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/users")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Users
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">{@page_title}</h1>
        <p class="text-lg text-base-content">
          <%= if @mode == :new do %>
            Create a new user account
          <% else %>
            Edit user information
          <% end %>
        </p>
      </div>
    </header>

    <%!-- User Form --%>
    <div class="max-w-2xl mx-auto">
      <div class="bg-base-100 rounded-lg shadow-md p-6">
        <.form
          :let={form}
          for={@changeset}
          id="user_form"
          phx-submit="save_user"
          phx-change="validate_user"
          class="space-y-6"
        >
          <div class="space-y-4">
            <%!-- Email --%>
            <div class="w-full">
              <.input
                field={form[:email]}
                type="email"
                label="Email *"
                placeholder="user@example.com"
                required
              />
            </div>

            <%!-- Username --%>
            <div class="w-full">
              <.input
                field={form[:username]}
                type="text"
                label="Username"
                placeholder="unique_username"
              />
              <div class="text-xs text-base-content/60 mt-2">
                Unique username (3-30 characters, letters, numbers, and underscores only)
              </div>
            </div>

            <%!-- Password (only for new users) --%>
            <%= if @mode == :new do %>
              <div class="w-full">
                <.input
                  field={form[:password]}
                  type="password"
                  label="Password *"
                  placeholder="Minimum 8 characters"
                  required
                />
              </div>
            <% end %>

            <%!-- Name Fields --%>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <%!-- First Name --%>
              <div class="w-full">
                <.input
                  field={form[:first_name]}
                  type="text"
                  label="First Name"
                  placeholder="Optional"
                />
              </div>

              <%!-- Last Name --%>
              <div class="w-full">
                <.input
                  field={form[:last_name]}
                  type="text"
                  label="Last Name"
                  placeholder="Optional"
                />
              </div>
            </div>
          </div>

          <%!-- Password Change Section (Edit mode, Admin/Owner only) --%>
          <%= if @mode == :edit and (PhoenixKit.Users.Auth.Scope.admin?(@phoenix_kit_current_scope) or PhoenixKit.Users.Auth.Scope.owner?(@phoenix_kit_current_scope)) do %>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-semibold">Password Management</span>
              </label>
              <div class="flex items-center gap-4 mt-2">
                <button
                  type="button"
                  phx-click="toggle_password_field"
                  class="btn btn-outline btn-sm"
                >
                  <%= if @show_password_field do %>
                    Hide Password Field
                  <% else %>
                    Change Password
                  <% end %>
                </button>
                <span class="text-sm text-base-content/70">
                  Set a new password for this user (Admin privilege required)
                </span>
              </div>
            </div>

            <%!-- Inline Password Field --%>
            <%= if @show_password_field do %>
              <div class="w-full mt-4">
                <.input
                  field={form[:password]}
                  type="password"
                  label="New Password *"
                  placeholder="Enter new password (minimum 8 characters)"
                  required
                />
                <div class="text-xs text-base-content/60 mt-2">
                  <PhoenixKitWeb.Components.Core.Icons.icon_info_filled class="w-4 h-4 inline mr-1" />
                  <strong>Note:</strong>
                  This will immediately invalidate all current sessions for this user.
                </div>
              </div>
            <% end %>
          <% end %>

          <%= if @mode == :new do %>
            <div class="divider">Additional Information</div>

            <div class="bg-base-200 p-4 rounded-lg">
              <div class="flex items-start gap-3">
                <PhoenixKitWeb.Components.Core.Icons.icon_info_filled class="w-5 h-5 mt-0.5 text-info" />
                <div class="text-sm">
                  <p class="font-medium">Default Settings:</p>
                  <ul class="mt-1 text-base-content/70">
                    <li>• User will be assigned default "User" role</li>
                    <li>• Account will be active by default</li>
                    <li>• Confirmation email will be sent automatically</li>
                    <li>• User can update their profile after first login</li>
                  </ul>
                </div>
              </div>
            </div>
          <% end %>

          <%!-- Form Actions --%>
          <div class="flex justify-end gap-3 pt-6 border-t border-base-300">
            <button
              type="submit"
              class="btn btn-primary"
              phx-disable-with={
                if @mode == :new, do: "Creating user...", else: "Updating user..."
              }
            >
              <%= if @mode == :new do %>
                Create User
              <% else %>
                Update User
              <% end %>
            </button>
            <button
              type="button"
              phx-click="cancel"
              class="btn btn-outline"
            >
              Cancel
            </button>
          </div>
        </.form>
      </div>

      <%!-- Password Reset via Email Section (Edit mode only) --%>
      <%= if @mode == :edit do %>
        <div class="bg-yellow-50 border border-yellow-200 dark:bg-warning/10 dark:border-warning/30 rounded-lg p-6 mt-6">
          <div class="flex items-start gap-3">
            <PhoenixKitWeb.Components.Core.Icons.icon_warning_filled />
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-800 dark:text-warning mb-2">
                Password Reset via Email
              </h3>
              <p class="text-sm text-yellow-700 dark:text-base-content/80 mb-6">
                Send a password reset email to this user. They will receive a secure link to create a new password.
                <strong class="text-yellow-800 dark:text-warning">
                  This action cannot be undone
                </strong>
                and will invalidate their current password immediately.
              </p>
              <button
                type="button"
                phx-click="show_reset_password_modal"
                class="btn btn-warning btn-sm mt-3"
              >
                <PhoenixKitWeb.Components.Core.Icons.icon_sessions class="w-4 h-4 mr-2" />
                Reset User Password
              </button>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <%!-- Reset Password Confirmation Modal --%>
    <%= if @mode == :edit && @show_reset_password_modal do %>
      <div class="modal modal-open">
        <div class="modal-box max-w-lg">
          <div class="flex items-center gap-3 mb-4">
            <PhoenixKitWeb.Components.Core.Icons.icon_warning_filled class="w-8 h-8 text-error" />
            <h3 class="font-bold text-xl text-error">Confirm Password Reset</h3>
          </div>

          <div class="space-y-4 mb-6">
            <div class="bg-error/10 border border-error/20 rounded-lg p-4">
              <p class="text-sm"><strong>Warning:</strong> This action cannot be undone!</p>
            </div>

            <div class="space-y-2 text-sm">
              <p>You are about to reset the password for:</p>
              <div class="bg-base-200 p-3 rounded font-mono text-primary">
                {@user.email || "Unknown user"}
              </div>
            </div>

            <div class="space-y-2 text-sm text-base-content/80">
              <p><strong>What will happen:</strong></p>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>Their current password will be immediately invalidated</li>
                <li>They will receive an email with reset instructions</li>
                <li>They must create a new password using the emailed link</li>
                <li>The reset link expires in 1 hour</li>
              </ul>
            </div>

            <div class="bg-info/10 border border-info/20 rounded-lg p-4">
              <p class="text-sm">
                <PhoenixKitWeb.Components.Core.Icons.icon_info_filled class="w-4 h-4 inline mr-1" />
                <strong>Note:</strong>
                Make sure the user has access to their email account before proceeding.
              </p>
            </div>
          </div>

          <div class="modal-action">
            <button
              type="button"
              phx-click="hide_reset_password_modal"
              class="btn btn-outline"
            >
              Cancel
            </button>
            <button
              type="button"
              phx-click="admin_reset_password"
              class="btn btn-error"
              phx-disable-with="Sending email..."
            >
              <PhoenixKitWeb.Components.Core.Icons.icon_lock class="w-4 h-4 mr-2" />
              Yes, Reset Password
            </button>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
