"use client";

import { useState } from "react";
import { auth, AuthError } from "@/lib/auth";
import { AddEmailModal } from "./add-email-modal";
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 — "Add an email" button that opens AddEmailModal.
 *     The modal POSTs to /auth/email and refreshes the user; on success
 *     this banner flips into the verify-your-email mode automatically.
 *   • Unverified email — "Resend verification" button calls
 *     auth.resendVerification().
 *
 * 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 } = useAuth();
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  const [emailModalOpen, setEmailModalOpen] = useState(false);

  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);
    }
  }

  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">
          <p>
            {sent
              ? "✓ Verification email sent — check your inbox."
              : error
                ? error
                : needsEmail
                  ? "Add an email to enable password recovery and notifications."
                  : `Verify your email (${user.email}) to secure your account.`}
          </p>
          <div className="flex items-center gap-2">
            {!sent ? (
              needsEmail ? (
                <button
                  type="button"
                  onClick={() => setEmailModalOpen(true)}
                  className="font-medium underline-offset-2 hover:underline"
                >
                  Add email
                </button>
              ) : (
                <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>
      <AddEmailModal
        open={emailModalOpen}
        onClose={() => setEmailModalOpen(false)}
      />
    </>
  );
}