import { Button } from "@xtablo/ui/components/button";
import { Text } from "@xtablo/ui/components/typography";
import { CheckCircle2, Loader2Icon, MailIcon } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { twMerge } from "tailwind-merge";
import { useResendConfirmationEmail } from "../hooks/auth";

export function ConfirmEmailPage() {
  const { t } = useTranslation("auth");
  const navigate = useNavigate();
  const pendingEmail = localStorage.getItem("pendingConfirmationEmail");
  const { mutate: resendEmail, isPending } = useResendConfirmationEmail();

  if (!pendingEmail) {
    // If no pending email, redirect to signup
    navigate("/signup");
    return;
  }

  const handleResendEmail = () => {
    resendEmail(pendingEmail);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5">
      <div
        className={twMerge(
          "w-full max-w-lg p-8 bg-card/80 backdrop-blur-lg rounded-2xl",
          "border border-border",
          "shadow-xl"
        )}
      >
        <div className="text-center space-y-6">
          <div className="flex justify-center">
            <div className="rounded-full bg-blue-100 dark:bg-blue-900/20 p-3">
              <MailIcon className="w-12 h-12 text-blue-600 dark:text-blue-400" />
            </div>
          </div>

          <div className="space-y-2">
            <h1 className="text-3xl font-bold text-foreground">{t("confirmEmail.title")}</h1>
            <Text className="text-muted-foreground">{t("confirmEmail.subtitle")}</Text>
          </div>

          <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <div className="space-y-3">
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                <div className="text-left">
                  <Text className="text-sm text-blue-800 dark:text-blue-200 font-medium">
                    {t("confirmEmail.emailSentTo")}
                  </Text>
                  <Text className="text-sm text-blue-700 dark:text-blue-300 font-mono mt-1">
                    {pendingEmail}
                  </Text>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-muted/50 rounded-lg p-4 text-left space-y-3">
            <Text className="text-sm font-medium text-foreground">
              {t("confirmEmail.nextSteps")}
            </Text>
            <ol className="text-sm text-muted-foreground space-y-2 list-decimal list-inside">
              <li>{t("confirmEmail.step1")}</li>
              <li>{t("confirmEmail.step2")}</li>
              <li>{t("confirmEmail.step3")}</li>
            </ol>
          </div>

          <div className="pt-4 space-y-3">
            <Text className="text-sm text-muted-foreground">{t("confirmEmail.didntReceive")}</Text>
            <Button
              variant="outline"
              onClick={handleResendEmail}
              disabled={isPending}
              className="w-full"
            >
              {isPending ? (
                <>
                  <Loader2Icon className="w-4 h-4 mr-2 animate-spin" />
                  {t("confirmEmail.resending")}
                </>
              ) : (
                t("confirmEmail.resendEmail")
              )}
            </Button>
          </div>

          <div className="pt-4 border-t border-border">
            <Text className="text-sm text-muted-foreground mb-3">
              {t("confirmEmail.wrongEmail")}
            </Text>
            <Link to="/signup" className="block">
              <Button variant="ghost" className="w-full">
                {t("confirmEmail.backToSignup")}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
