<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
>
  <h1 class="text-2xl font-bold text-center mb-2">Magic Link Login</h1>
  <p class="text-center text-base-content/60 text-sm mb-6">
    Enter your email to receive a secure login link
  </p>

  <.form
    for={@form}
    id="magic_link_form"
    phx-submit="send_magic_link"
    phx-change="validate"
  >
    <fieldset class="fieldset">
      <legend class="fieldset-legend sr-only">Magic Link Authentication</legend>

      <div :if={@error} class="alert alert-error text-sm mb-4">
        <PhoenixKitWeb.Components.Core.Icons.icon_error_circle class="stroke-current shrink-0 h-6 w-6" />
        <span>{@error}</span>
      </div>

      <label class="label" for="magic_link_email">
        <span class="label-text flex items-center">
          <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-4 h-4 mr-2" /> Email
        </span>
      </label>
      <.input
        field={@form[:email]}
        type="email"
        placeholder="you@example.com"
        autocomplete="email"
        class="transition-colors focus:input-primary"
        required
      />

      <button
        type="submit"
        phx-disable-with="Sending magic link..."
        class="btn btn-primary w-full mt-4 transition-all hover:scale-[1.02] active:scale-[0.98]"
        disabled={@loading || @sent}
      >
        <%= if @loading do %>
          <span class="loading loading-spinner loading-sm mr-2"></span> Sending magic link...
        <% else %>
          <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" /> Send Magic Link
          <span aria-hidden="true">→</span>
        <% end %>
      </button>
    </fieldset>
  </.form>

  <div :if={@sent} class="alert alert-success mt-4">
    <PhoenixKitWeb.Components.Core.Icons.icon_check_circle_filled class="stroke-current shrink-0 h-6 w-6" />
    <div>
      <h3 class="font-bold">Magic link sent!</h3>
      <div class="text-xs">
        Check your email for a secure login link. The link will expire in 15 minutes.
      </div>
    </div>
  </div>

  <div class="text-center mt-4 text-sm">
    <span>Prefer a password? </span>
    <.link
      navigate={Routes.path("/users/log-in")}
      class="font-semibold text-primary hover:underline"
    >
      Sign in with password
    </.link>
  </div>

  <div class="text-center mt-2 text-sm">
    <span>Don't have an account? </span>
    <.link
      navigate={Routes.path("/users/register")}
      class="font-semibold text-primary hover:underline"
    >
      Create an account
    </.link>
  </div>

  <%!-- Development Mode Notice --%>
  <.dev_mailbox_notice message="magic link emails" />
</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>
