<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={"#{@project_title} - #{@page_title}"}
  current_path={assigns[:url_path] || "/users/register/magic-link"}
>
  <h1 class="text-2xl font-bold text-center mb-2">{gettext("Register via Magic Link")}</h1>
  <p class="text-center text-base-content/60 text-sm mb-6">
    {gettext("Enter your email to receive a registration link. No password required!")}
  </p>

  <%= if @email_sent do %>
    <%!-- Success state --%>
    <div class="alert alert-success">
      <PhoenixKitWeb.Components.Core.Icons.icon_check_circle_filled class="fill-current shrink-0 h-6 w-6" />
      <div>
        <h3 class="font-bold">{gettext("Email Sent!")}</h3>
        <p class="text-sm">
          {gettext("We've sent a registration link to %{email}", email: @email)}
        </p>
      </div>
    </div>

    <div class="bg-base-200 rounded-lg p-4 mt-4">
      <p class="text-sm text-base-content/80">
        <strong>{gettext("Next steps:")}</strong>
      </p>
      <ol class="list-decimal list-inside text-sm text-base-content/70 mt-2 space-y-1">
        <li>{gettext("Check your email inbox")}</li>
        <li>{gettext("Click the registration link")}</li>
        <li>{gettext("Complete your profile")}</li>
      </ol>
    </div>

    <div class="text-center mt-6">
      <p class="text-sm text-base-content/60 mb-2">{gettext("Didn't receive the email?")}</p>
      <button
        phx-click={JS.push("send_magic_link", value: %{email: @email})}
        class="btn btn-sm btn-ghost"
      >
        {gettext("Resend Link")}
      </button>
    </div>
  <% else %>
    <%!-- Email input form --%>
    <form phx-submit="send_magic_link" class="space-y-4">
      <%= if @error_message do %>
        <div class="alert alert-error text-sm">
          <PhoenixKitWeb.Components.Core.Icons.icon_error_circle class="stroke-current shrink-0 h-5 w-5" />
          <span>{@error_message}</span>
        </div>
      <% end %>

      <div>
        <label class="label" for="email">
          <span class="label-text flex items-center">
            <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-4 h-4 mr-2" /> {gettext(
              "Email Address"
            )}
          </span>
        </label>
        <input
          id="email"
          name="email"
          type="email"
          value={@email}
          placeholder="you@example.com"
          class="input w-full transition-colors focus:input-primary"
          required
          autofocus
        />
      </div>

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

    <%!-- Info box --%>
    <div class="bg-info/10 border border-info/20 rounded-lg p-4 mt-4">
      <div class="flex items-start gap-2">
        <PhoenixKitWeb.Components.Core.Icons.icon_info class="stroke-current shrink-0 h-5 w-5 text-info mt-0.5" />
        <div class="text-sm text-base-content/70">
          <p class="font-semibold text-base-content mb-1">
            {gettext("Passwordless Registration")}
          </p>
          <p>
            {gettext(
              "We'll send you a secure link to complete your registration. The link expires in 30 minutes."
            )}
          </p>
        </div>
      </div>
    </div>
  <% end %>

  <%!-- Alternative options --%>
  <div class="divider mt-6">{gettext("Other options")}</div>

  <div class="space-y-2">
    <.link
      navigate={Routes.path("/users/register")}
      class="btn btn-outline w-full"
    >
      <PhoenixKitWeb.Components.Core.Icons.icon_user_add class="w-5 h-5 mr-2" />
      {gettext("Register with Password")}
    </.link>

    <.link
      navigate={Routes.path("/users/log-in")}
      class="btn btn-ghost w-full"
    >
      {gettext("Already have an account? Sign in")}
    </.link>
  </div>
</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>
