<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
>
  <div class="flex items-center justify-center px-4 py-8 min-h-[80vh]">
    <div class="card bg-base-100 w-full max-w-sm shadow-2xl">
      <div class="card-body">
        <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" />
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
