"use client";

import { useState } from "react";
import { auth, AuthError } from "@/lib/auth";
import { useAuth } from "./auth-provider";

/**
 * Top ribbon for accounts whose email is either missing (OAuth sign-up
 * without an address) or present-but-unverified.
 *
 * Two modes:
 *   • Missing email — an inline "Add your email" input that POSTs to
 *     /auth/email. On success the user state refreshes and the banner
 *     automatically flips into the "verify your email" mode.
 *   • Unverified email — existing "Resend verification" call to action.
 *
 * Renders nothing when:
 *   - auth state is still loading
 *   - user is logged out
 *   - user.email_verified_at is set (the address has been confirmed)
 *   - user dismissed it for this session (persistent across navigations
 *     but reset on full page refresh)
 */
export function VerifyEmailBanner() {
  const { user, loading, setUser } = useAuth();
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  const [newEmail, setNewEmail] = useState("");

  if (loading || !user || user.email_verified_at || dismissed) return null;

  const needsEmail = !user.email;

  async function onResend() {
    setError(null);
    setBusy(true);
    try {
      await auth.resendVerification();
      setSent(true);
    } catch (err) {
      setError(
        err instanceof AuthError ? err.message : "Could not send verification email.",
      );
    } finally {
      setBusy(false);
    }
  }

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

  return (
    <div className="w-full bg-amber-50 dark:bg-amber-950/40 text-amber-900 dark:text-amber-100 border-b border-amber-200/60 dark:border-amber-800/60">
      <div className="max-w-5xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-3 text-sm">
        {sent ? (
          <p>
            {needsEmail
              ? "✓ Email saved — check your inbox for a verification link."
              : "✓ Verification email sent — check your inbox."}
          </p>
        ) : needsEmail ? (
          <form
            onSubmit={onSetEmail}
            className="flex flex-1 flex-wrap items-center gap-2"
          >
            <label htmlFor="banner-email" className="shrink-0">
              Add an email to your account:
            </label>
            <input
              id="banner-email"
              type="email"
              required
              value={newEmail}
              onChange={(e) => setNewEmail(e.target.value)}
              placeholder="you@example.com"
              className="flex-1 min-w-[12rem] rounded-md border border-amber-300/70 dark:border-amber-800/70 bg-white/70 dark:bg-amber-950/30 px-2 py-1 text-amber-900 dark:text-amber-50 placeholder:text-amber-700/50 dark:placeholder:text-amber-200/40"
            />
            <button
              type="submit"
              disabled={busy || newEmail.trim() === ""}
              className="font-medium underline-offset-2 hover:underline disabled:opacity-60"
            >
              {busy ? "Saving…" : "Save"}
            </button>
            {error ? (
              <span className="text-amber-900/80 dark:text-amber-100/80">
                {error}
              </span>
            ) : null}
          </form>
        ) : (
          <p>
            {error ?? `Verify your email (${user.email}) to secure your account.`}
          </p>
        )}

        <div className="flex items-center gap-2">
          {!sent && !needsEmail ? (
            <button
              type="button"
              onClick={onResend}
              disabled={busy}
              className="font-medium underline-offset-2 hover:underline disabled:opacity-60"
            >
              {busy ? "Sending…" : "Resend email"}
            </button>
          ) : null}
          <button
            type="button"
            onClick={() => setDismissed(true)}
            aria-label="Dismiss"
            className="opacity-70 hover:opacity-100"
          >
            ✕
          </button>
        </div>
      </div>
    </div>
  );
}