<div class="space-y-8" data-controller="modal">
  <div>
    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Account Security</h1>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Manage your account settings, active sessions, and connected applications.</p>
  </div>

  <!-- Account Information -->
  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Account Information</h3>
      <div class="mt-5 space-y-6">
        <%= form_with model: @user, url: profile_path, method: :patch, class: "space-y-6" do |form| %>
          <% if @user.errors.any? %>
            <div class="rounded-md bg-red-50 dark:bg-red-900/30 p-4">
              <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
                <%= pluralize(@user.errors.count, "error") %> prohibited this from being saved:
              </h3>
              <ul class="mt-2 list-disc list-inside text-sm text-red-700 dark:text-red-300">
                <% @user.errors.each do |error| %>
                  <li><%= error.full_message %></li>
                <% end %>
              </ul>
            </div>
          <% end %>

          <div>
            <%= form.label :email_address, "Email Address", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
            <%= form.email_field :email_address,
                required: true,
                autocomplete: "email",
                class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
          </div>

          <div>
            <%= form.label :current_password, "Current Password", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
            <%= form.password_field :current_password,
                autocomplete: "current-password",
                placeholder: "Required to change email",
                class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Enter your current password to confirm this change</p>
          </div>

          <div>
            <%= form.submit "Update Email", class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Change Password -->
  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Change Password</h3>
      <div class="mt-5">
        <%= form_with model: @user, url: profile_path, method: :patch, class: "space-y-6" do |form| %>
          <div>
            <%= form.label :current_password, "Current Password", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
            <%= form.password_field :current_password,
                autocomplete: "current-password",
                placeholder: "Enter current password",
                class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
          </div>

          <div>
            <%= form.label :password, "New Password", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
            <%= form.password_field :password,
                autocomplete: "new-password",
                placeholder: "Enter new password",
                class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Must be at least 8 characters</p>
          </div>

          <div>
            <%= form.label :password_confirmation, "Confirm New Password", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
            <%= form.password_field :password_confirmation,
                autocomplete: "new-password",
                placeholder: "Confirm new password",
                class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
          </div>

          <div>
            <%= form.submit "Update Password", class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Two-Factor Authentication -->
  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Two-Factor Authentication</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
        <p>Add an extra layer of security to your account by enabling two-factor authentication.</p>
      </div>
      <div class="mt-5">
        <% if @user.totp_enabled? %>
          <div class="rounded-md bg-green-50 dark:bg-green-900/30 p-4">
            <div class="flex">
              <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                </svg>
              </div>
              <div class="ml-3 flex-1">
                <p class="text-sm font-medium text-green-800 dark:text-green-200">
                  Two-factor authentication is enabled
                </p>
                <% if @user.totp_required? %>
                  <p class="mt-1 text-sm text-green-700 dark:text-green-300">
                    <svg class="inline h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                    </svg>
                    Required by administrator
                  </p>
                <% end %>
              </div>
            </div>
          </div>
          <% if @user.totp_required? %>
            <div class="mt-4 rounded-md bg-blue-50 dark:bg-blue-900/30 p-4">
              <div class="flex">
                <svg class="h-5 w-5 text-blue-400 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                  <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>
                <p class="text-sm text-blue-800 dark:text-blue-200">
                  Your administrator requires two-factor authentication. You cannot disable it.
                </p>
              </div>
            </div>
            <div class="mt-4 flex gap-3">
              <button type="button"
                      data-action="click->modal#show"
                      data-modal-id="view-backup-codes-modal"
                      class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
                View Backup Codes
              </button>
            </div>
          <% else %>
            <div class="mt-4 flex gap-3">
              <button type="button"
                      data-action="click->modal#show"
                      data-modal-id="disable-2fa-modal"
                      class="inline-flex items-center rounded-md border border-red-300 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
                Disable 2FA
              </button>
              <button type="button"
                      data-action="click->modal#show"
                      data-modal-id="view-backup-codes-modal"
                      class="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
                View Backup Codes
              </button>
            </div>
          <% end %>
        <% else %>
          <%= link_to new_totp_path, class: "inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" do %>
            Enable 2FA
          <% end %>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Disable 2FA Modal -->
  <div id="disable-2fa-modal"
       data-action="click->modal#closeOnBackdrop keyup@window->modal#closeOnEscape"
       class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 shadow-xl max-w-md w-full">
      <div class="sm:flex sm:items-start">
        <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50 sm:mx-0 sm:h-10 sm:w-10">
          <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
          <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Disable Two-Factor Authentication</h3>
          <div class="mt-2">
            <p class="text-sm text-gray-500 dark:text-gray-400">Enter your password to disable 2FA. This will make your account less secure.</p>
          </div>
          <%= form_with url: totp_path, method: :delete, class: "mt-4" do |form| %>
            <div>
              <%= password_field_tag :password, nil,
                  placeholder: "Enter your password",
                  autocomplete: "current-password",
                  required: true,
                  class: "block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm" %>
            </div>
            <div class="mt-4 flex gap-3">
              <%= form.submit "Disable 2FA",
                  class: "inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
              <button type="button"
                      data-action="click->modal#hide"
                      class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
                Cancel
              </button>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>

  <!-- Regenerate Backup Codes Modal -->
  <div id="view-backup-codes-modal"
       data-action="click->modal#closeOnBackdrop keyup@window->modal#closeOnEscape"
       class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 shadow-xl max-w-md w-full">
      <div>
        <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Generate New Backup Codes</h3>
        <div class="mt-2">
          <p class="text-sm text-gray-500 dark:text-gray-400">Due to security improvements, you need to generate new backup codes. Your old codes have been invalidated.</p>
        </div>
        <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/30 rounded-md">
          <div class="flex">
            <svg class="h-5 w-5 text-yellow-400 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
            </svg>
            <p class="text-sm text-yellow-800 dark:text-yellow-200">
              <strong>Important:</strong> Save the new codes immediately after generation. You won't be able to see them again without regenerating.
            </p>
          </div>
        </div>
        <%= form_with url: create_new_backup_codes_totp_path, method: :post, class: "mt-4" do |form| %>
          <div>
            <%= password_field_tag :password, nil,
                placeholder: "Enter your password",
                autocomplete: "current-password",
                required: true,
                class: "block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
          </div>
          <div class="mt-4 flex gap-3">
            <%= form.submit "Generate New Codes",
                class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
            <button type="button"
                    data-action="click->modal#hide"
                    class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
              Cancel
            </button>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Passkeys (WebAuthn) -->
  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6" data-controller="webauthn" data-webauthn-challenge-url-value="/webauthn/challenge" data-webauthn-create-url-value="/webauthn/create">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Passkeys</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
        <p>Use your fingerprint, face recognition, or security key to sign in without passwords.</p>
      </div>

      <!-- Add Passkey Form -->
      <div class="mt-5">
        <div id="add-passkey-form" class="space-y-4">
          <div>
            <label for="passkey-nickname" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Passkey Name</label>
            <input type="text"
                   id="passkey-nickname"
                   data-webauthn-target="nickname"
                   placeholder="e.g., MacBook Touch ID, iPhone Face ID"
                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Give this passkey a memorable name so you can identify it later.</p>
          </div>

          <div>
            <button type="button"
                    data-action="click->webauthn#register"
                    data-webauthn-target="submitButton"
                    class="inline-flex items-center rounded-md border border-transparent bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
              <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 4v16m8-8H4"></path>
              </svg>
              Add New Passkey
            </button>
          </div>

          <!-- Status Messages -->
          <div data-webauthn-target="status" class="hidden mt-2 p-3 rounded-md text-sm"></div>
          <div data-webauthn-target="error" class="hidden mt-2 p-3 rounded-md text-sm"></div>
        </div>
      </div>

      <!-- Existing Passkeys List -->
      <div class="mt-8">
        <h4 class="text-md font-medium text-gray-900 dark:text-gray-100 mb-4">Your Passkeys</h4>
        <% if @user.webauthn_credentials.exists? %>
          <div class="space-y-3">
            <% @user.webauthn_credentials.order(created_at: :desc).each do |credential| %>
              <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="flex items-center space-x-3">
                  <div class="flex-shrink-0">
                    <% if credential.platform_authenticator? %>
                      <!-- Platform authenticator icon -->
                      <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                      </svg>
                    <% else %>
                      <!-- Roaming authenticator icon -->
                      <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                      </svg>
                    <% end %>
                  </div>
                  <div>
                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                      <%= credential.nickname %>
                    </div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                      <%= credential.authenticator_type.humanize %> •
                      Last used <%= credential.last_used_ago %>
                      <% if credential.backed_up? %>
                        • <span class="text-green-600">Synced</span>
                      <% end %>
                    </div>
                  </div>
                </div>
                <div class="flex items-center space-x-2">
                  <% if credential.created_recently? %>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200">
                      New
                    </span>
                  <% end %>
                  <%= link_to webauthn_credential_path(credential),
                              method: :delete,
                              data: {
                                confirm: "Are you sure you want to delete '#{credential.nickname}'? You'll need to set it up again to sign in with this device.",
                                turbo_method: :delete
                              },
                              class: "text-red-600 hover:text-red-800 text-sm font-medium" do %>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                    </svg>
                  <% end %>
                </div>
              </div>
            <% end %>
          </div>

          <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
            <div class="flex">
              <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                  <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>
              </div>
              <div class="ml-3">
                <p class="text-sm text-blue-800 dark:text-blue-200">
                  <strong>Tip:</strong> Add passkeys on multiple devices for easy access. Platform authenticators (like Touch ID) are synced across your devices if you use iCloud Keychain or Google Password Manager.
                </p>
              </div>
            </div>
          </div>
        <% else %>
          <div class="text-center py-8">
            <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No passkeys</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by adding your first passkey for passwordless sign-in.</p>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
