"use client";

import { Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { motion } from "framer-motion";
import { MailCheck, ShieldAlert, CheckCircle2 } from "lucide-react";
import { AuthShell } from "@/components/auth/AuthShell";
import { Button } from "@/components/ui/Button";
import { apiPost } from "@/lib/api/client";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

const RESEND_COOLDOWN = 45;

function VerifyEmailContent() {
  const searchParams = useSearchParams();
  const { t } = useTranslation();
  const email = searchParams.get("email") ?? "";
  const status = searchParams.get("status");
  const [cooldown, setCooldown] = useState(RESEND_COOLDOWN);
  const [sent, setSent] = useState(false);

  useEffect(() => {
    if (cooldown <= 0) return;
    const timer = setTimeout(() => setCooldown((c) => c - 1), 1000);
    return () => clearTimeout(timer);
  }, [cooldown]);

  async function handleResend() {
    if (cooldown > 0 || !email) return;
    try {
      await apiPost("/api/auth/resend-verification", { email });
    } finally {
      // Same reasoning as forgot-password: the API never reveals
      // whether the address is registered, so there's nothing to
      // branch on — always show "sent."
      setSent(true);
      setCooldown(RESEND_COOLDOWN);
      setTimeout(() => setSent(false), 3000);
    }
  }

  if (status === "success") {
    return (
      <AuthShell title={t("verifyEmail.successTitle")}>
        <div className="flex flex-col items-center gap-5 text-center">
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ type: "spring", stiffness: 260, damping: 18 }}
            className="flex h-20 w-20 items-center justify-center rounded-full bg-gold/15"
          >
            <CheckCircle2 size={36} strokeWidth={1.8} className="text-gold-bright" />
          </motion.div>
          <p className="text-sm leading-relaxed text-paper/70">{t("verifyEmail.successDesc")}</p>
          <Link href="/login">
            <Button size="lg">{t("verifyEmail.goToLogin")}</Button>
          </Link>
        </div>
      </AuthShell>
    );
  }

  if (status === "invalid") {
    return (
      <AuthShell title={t("verifyEmail.invalidTitle")} backHref="/login">
        <div className="flex flex-col items-center gap-5 text-center">
          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-danger/15">
            <ShieldAlert size={36} strokeWidth={1.8} className="text-danger" />
          </div>
          <p className="text-sm leading-relaxed text-paper/70">{t("verifyEmail.invalidDesc")}</p>
          {email && (
            <Button size="lg" onClick={handleResend} disabled={cooldown > 0}>
              {cooldown > 0 ? t("verifyEmail.resendIn", { seconds: cooldown }) : t("verifyEmail.resendEmail")}
            </Button>
          )}
          {sent && <p className="text-xs font-medium text-teal">{t("verifyEmail.sent")}</p>}
        </div>
      </AuthShell>
    );
  }

  return (
    <AuthShell title={t("verifyEmail.title")} backHref="/signup">
      <div className="flex flex-col items-center gap-5 text-center">
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ type: "spring", stiffness: 260, damping: 18 }}
          className="flex h-20 w-20 items-center justify-center rounded-full bg-gold/15"
        >
          <MailCheck size={36} strokeWidth={1.8} className="text-gold-bright" />
        </motion.div>

        <p className="text-sm leading-relaxed text-paper/70">
          {t("verifyEmail.body", { email: email || t("verifyEmail.yourEmail") })}
        </p>

        <Button
          variant="secondary"
          fullWidth
          size="lg"
          onClick={handleResend}
          disabled={cooldown > 0 || !email}
        >
          {cooldown > 0 ? t("verifyEmail.resendIn", { seconds: cooldown }) : t("verifyEmail.resendEmail")}
        </Button>
        {sent && <p className="text-xs font-medium text-teal">{t("verifyEmail.sent")}</p>}

        <Link href="/login" className="text-sm font-semibold text-gold-bright">
          {t("verifyEmail.backToLogin")}
        </Link>
      </div>
    </AuthShell>
  );
}

export default function VerifyEmailPage() {
  return (
    <Suspense fallback={null}>
      <VerifyEmailContent />
    </Suspense>
  );
}