"use client";

import React from "react";
import Link from "next/link";
import { useAuth } from "@/hooks/useAuth";
import axios from "@/lib/axios";
import { useToast } from "@/context/ToastContext";
import Button from "@/components/ui/button/Button";
import { Mail, ArrowLeft, RefreshCw } from "lucide-react";
import { useTranslations } from "next-intl";

export default function VerifyEmailPage() {
  const { user, logout } = useAuth();
  const { addToast } = useToast();
  const t = useTranslations("VerifyEmail");
  const [isResending, setIsResending] = React.useState(false);
  const [countdown, setCountdown] = React.useState(0);

  React.useEffect(() => {
    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
      return () => clearTimeout(timer);
    }
  }, [countdown]);

  const handleResend = async () => {
    if (countdown > 0) return;
    
    setIsResending(true);
    try {
      await axios.post("/api/email/verification-notification");
      addToast(t("toast_sent"), "success");
      setCountdown(60); // 1 minute throttle
    } catch (error: any) {
      addToast(error.response?.data?.message || t("toast_fail"), "error");
    } finally {
      setIsResending(false);
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 dark:bg-gray-900 sm:px-6 lg:px-8">
      <div className="w-full max-w-md space-y-8 text-center">
        <div>
          <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
            <Mail className="h-10 w-10 text-blue-600 dark:text-blue-400" />
          </div>
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
            {t("title")}
          </h2>
          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
            {t.rich("desc", {
                email: (chunks) => <span className="font-semibold text-gray-900 dark:text-white">{user?.email}</span>
            })}
          </p>
        </div>

        <div className="space-y-4">
          <Button
            onClick={handleResend}
            disabled={isResending || countdown > 0}
            className="w-full flex items-center justify-center gap-2"
          >
            {isResending ? (
              <RefreshCw className="h-4 w-4 animate-spin" />
            ) : (
              <RefreshCw className="h-4 w-4" />
            )}
            {countdown > 0 ? t("resend_in", { seconds: countdown }) : t("resend_button")}
          </Button>

          <div className="flex items-center justify-center gap-4 pt-4">
            <button
              onClick={() => logout()}
              className="flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
            >
              <ArrowLeft className="h-4 w-4" />
              {t("sign_out")}
            </button>
            
            <span className="text-gray-300 dark:text-gray-700">|</span>
            
            <Link
              href="/dashboard"
              className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
            >
              {t("back_dashboard")}
            </Link>
          </div>
        </div>

        <div className="rounded-lg bg-yellow-50 p-4 border border-yellow-100 dark:bg-yellow-900/20 dark:border-yellow-900/30">
          <p className="text-xs text-yellow-800 dark:text-yellow-200 text-left">
            <strong>{t("note_title")}</strong> {t("note_desc")}
          </p>
        </div>
      </div>
    </div>
  );
}
