"use client";

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

/**
 * Persistent top ribbon shown when a logged-in user has not yet verified
 * their email. Lets them re-trigger the verification mail without leaving
 * the page.
 *
 * Renders nothing when:
 *   - auth state is still loading
 *   - user is logged out
 *   - user.email_verified_at is set
 *   - user dismissed it for this session (banner is meant to be persistent
 *     across navigations but skippable per-tab; we keep the dismissed flag
 *     in component state so a refresh brings it back)
 */
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);

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

  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
              : `Verify your email (${user.email}) to secure your account.`}
        </p>
        <div className="flex items-center gap-2">
          {!sent ? (
            <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>
  );
}