Auth Magic

"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface AuthMagicProps {
  email?: string;
  onResend?: () => void;
  cooldown?: number;
  mailApps?: { label: string; href: string }[];
  className?: string;
}

/** “Check your inbox” screen: flat envelope illustration with a bouncing letter, email in bold, quick links to open mail apps, resend with countdown and change-email link. */
export function AuthMagic({
  email = "ana@bright.co",
  onResend,
  cooldown = 30,
  mailApps = [
    { label: "Open Gmail", href: "https://mail.google.com" },
    { label: "Open Outlook", href: "https://outlook.live.com" },
  ],
  className,
}: AuthMagicProps) {
  const [left, setLeft] = useState(cooldown);
  useEffect(() => {
    if (left <= 0) return;
    const t = window.setTimeout(() => setLeft((l) => l - 1), 1000);
    return () => window.clearTimeout(t);
  }, [left]);

  return (
    <div className={cn("grid min-h-dvh place-items-center bg-da-bg px-4 py-12 text-da-fg", className)}>
      <main className="w-full max-w-md text-center">
        <div aria-hidden className="relative mx-auto h-40 w-52">
          <div className="sf-letter absolute top-2 left-1/2 h-24 w-36 -translate-x-1/2 rounded-da-md bg-da-surface p-3 shadow-da-md">
            <span className="block h-2 w-20 rounded-full bg-da-primary/30" />
            <span className="mt-2 block h-2 w-24 rounded-full bg-da-muted" />
            <span className="mt-2 block h-2 w-16 rounded-full bg-da-muted" />
          </div>
          <div className="absolute inset-x-0 bottom-0 h-24 rounded-da-lg bg-da-accent" />
          <div className="absolute inset-x-0 bottom-0 h-24 [clip-path:polygon(0_0,50%_55%,100%_0,100%_100%,0_100%)] rounded-da-lg bg-da-warning/80" />
        </div>
        <h1 className="mt-8 font-da-display text-3xl font-extrabold tracking-da-display">Check your inbox 💌</h1>
        <p className="mt-2 text-da-muted-fg">
          We sent a magic link to <span className="font-semibold text-da-fg">{email}</span>. Click it to log in — no password needed.
        </p>
        <div className="mt-8 grid gap-2 sm:grid-cols-2">
          {mailApps.map((m) => (
            <a
              key={m.href}
              href={m.href}
              target="_blank"
              rel="noreferrer"
              className="da-focus da-transition inline-flex h-12 items-center justify-center rounded-da-pill bg-da-surface font-semibold shadow-da-sm hover:-translate-y-0.5"
            >
              {m.label}
            </a>
          ))}
        </div>
        <p className="mt-8 text-sm text-da-muted-fg">
          Didn’t get it?{" "}
          <button
            type="button"
            disabled={left > 0}
            onClick={() => {
              onResend?.();
              setLeft(cooldown);
            }}
            className="da-focus rounded-da-sm font-semibold text-da-fg underline-offset-4 hover:underline disabled:font-normal disabled:text-da-muted-fg disabled:no-underline"
          >
            {left > 0 ? `Resend in ${left}s` : "Resend link"}
          </button>{" "}
          ·{" "}
          <a href="#login" className="da-focus rounded-da-sm font-semibold text-da-fg underline-offset-4 hover:underline">
            Use another email
          </a>
        </p>
      </main>
      <style href="sf-letter" precedence="default">{`
        @keyframes sf-letter { 0%, 100% { translate: -50% 0 } 50% { translate: -50% -10px } }
        .sf-letter { animation: sf-letter 2.4s ease-in-out infinite }
        @media (prefers-reduced-motion: reduce) { .sf-letter { animation: none } }
      `}</style>
    </div>
  );
}

export default AuthMagic;