<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={@current_path}
>
  <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"
      >
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10 19l-7-7m0 0l7-7m-7 7h18"
          >
          </path>
        </svg>
        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="grid grid-cols-1 md:grid-cols-2 gap-4">
            <%!-- Email --%>
            <div class="md:col-span-2">
              <.input
                field={form[:email]}
                type="email"
                label="Email *"
                placeholder="user@example.com"
                required
              />
            </div>

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

            <%!-- First Name --%>
            <div>
              <.input
                field={form[:first_name]}
                type="text"
                label="First Name"
                placeholder="Optional"
              />
            </div>

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

          <%= 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">
                <svg class="w-5 h-5 mt-0.5 text-info" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clip-rule="evenodd"
                  >
                  </path>
                </svg>
                <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="button"
              phx-click="cancel"
              class="btn btn-outline"
            >
              Cancel
            </button>
            <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>
          </div>
        </.form>
      </div>

      <%!-- Password Reset Section (Edit mode only) --%>
      <%= if @mode == :edit do %>
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mt-6">
          <div class="flex items-start gap-3">
            <svg class="w-6 h-6 text-yellow-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                clip-rule="evenodd"
              />
            </svg>
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-800 mb-2">Password Reset</h3>
              <p class="text-sm text-yellow-700 mb-4">
                Send a password reset email to this user. They will receive a secure link to create a new password.
                <strong class="text-yellow-800">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"
              >
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                  />
                </svg>
                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">
            <svg class="w-8 h-8 text-error" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                clip-rule="evenodd"
              />
            </svg>
            <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">
                <svg class="w-4 h-4 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clip-rule="evenodd"
                  />
                </svg>
                <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..."
            >
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                />
              </svg>
              Yes, Reset Password
            </button>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
