"use client";
import * as React from "react";
import Link from "next/link";
import { AlertTriangle, MailCheck } from "lucide-react";
import { Field, Input } from "@/components/ui/input";
import { AuthCard } from "./auth-card";
import { ResendVerification } from "./resend-verification";
import { humanAuthError, isValidEmail } from "./auth-errors";

export function VerifyEmailView({ initialEmail, errorCode }: { initialEmail: string; errorCode: string | null }) {
  const [email, setEmail] = React.useState(initialEmail);
  const valid = isValidEmail(email);
  const failed = !!errorCode;

  return (
    <AuthCard
      icon={failed ? <AlertTriangle /> : <MailCheck />}
      title={failed ? "That link didn't work" : "Verify your email"}
      description={
        failed
          ? humanAuthError({ code: errorCode ?? undefined }, "verify")
          : initialEmail
            ? (
                <>
                  We sent a verification link to <span className="font-medium text-fg">{initialEmail}</span>. Open it to activate your account. Links are valid for 24 hours.
                </>
              )
            : "Your account needs a verified email before you can sign in. Check your inbox for the link we sent when you signed up, or request a new one below."
      }
      footer={
        <>
          Already verified?{" "}
          <Link href="/login" className="font-medium text-accent underline-offset-4 hover:underline">
            Sign in
          </Link>
        </>
      }
    >
      <form
        onSubmit={(e) => e.preventDefault()}
        noValidate
        className="space-y-4"
      >
        <Field label="Email" htmlFor="verify-email" hint={failed ? "We'll send a fresh link to this address." : undefined}>
          <Input
            id="verify-email"
            name="email"
            type="email"
            inputMode="email"
            autoComplete="email"
            autoCapitalize="none"
            spellCheck={false}
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@company.com"
            autoFocus={!initialEmail}
          />
        </Field>
        <ResendVerification email={valid ? email.trim() : ""} variant="primary" className="h-11 w-full rounded-lg text-[15px]" />
        <p className="text-center text-xs text-fg-subtle">Nothing after a minute? Check your spam folder. Verification emails come from PolyLLM.</p>
      </form>
    </AuthCard>
  );
}