spsays-training/components/auth/add-email-modal.tsx

"use client";

/**
 * AddEmailModal — centred portal dialog with a single email input for
 * users who signed up via OAuth and never shared an address. Mirrors
 * the ChangePasswordModal pattern so the look and feel matches.
 *
 * On success: closes itself and updates the auth-provider's user so the
 * rest of the app immediately sees the new email. The BFF stores the
 * address as unverified and fires a verification link to it; the user
 * sees that as the existing "verify your email" banner on the next
 * render.
 *
 * Entry points:
 *   • VerifyEmailBanner — top-of-page "Add an email" button
 *   • /settings → Authentication → Add your email row
 */

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { X } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { auth, AuthError } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function AddEmailModal({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const { setUser } = useAuth();
  const [email, setEmail] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  // Blank slate every time the modal opens.
  useEffect(() => {
    if (open) return;
    setEmail("");
    setError(null);
    setSubmitting(false);
  }, [open]);

  // Esc-to-close.
  useEffect(() => {
    if (!open) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  // Body scroll-lock while open.
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  if (!open || typeof document === "undefined") return null;

  async function onSubmit(e: React.SyntheticEvent) {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      const updated = await auth.setEmail(email);
      setUser(updated);
      onClose();
    } catch (err) {
      setError(err instanceof AuthError ? err.message : "Could not save email.");
    } finally {
      setSubmitting(false);
    }
  }

  return createPortal(
    <>
      <div
        className="fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
        onClick={onClose}
        aria-hidden
      />
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="add-email-title"
        className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
      >
        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
          <header className="flex items-center justify-between px-5 py-4 border-b border-border">
            <h2
              id="add-email-title"
              className="font-[family-name:var(--font-title)] font-semibold text-xl text-foreground"
            >
              Add your email
            </h2>
            <button
              type="button"
              onClick={onClose}
              className="size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
              aria-label="Close"
            >
              <X className="size-4" />
            </button>
          </header>

          <form onSubmit={onSubmit} className="px-5 py-5 space-y-4">
            <p className="text-sm text-muted-foreground">
              Add an email to enable password recovery and notifications.
              We&apos;ll send a verification link to confirm it&apos;s yours.
            </p>
            <div className="space-y-1.5">
              <Label htmlFor="ae-email">Email address</Label>
              <Input
                id="ae-email"
                type="email"
                autoComplete="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
              />
            </div>

            {error ? (
              <p className="text-sm text-destructive">{error}</p>
            ) : null}

            <div className="flex items-center justify-end gap-2 pt-1">
              <Button
                type="button"
                variant="ghost"
                onClick={onClose}
                className="h-10 px-4 text-sm"
              >
                Cancel
              </Button>
              <Button
                type="submit"
                disabled={submitting || email.trim() === ""}
                className="h-10 px-4 text-sm"
              >
                {submitting ? "Saving…" : "Save email"}
              </Button>
            </div>
          </form>
        </div>
      </div>
    </>,
    document.body,
  );
}