import { useState } from 'react';
import { Button } from '../ui/button';
import { Card, CardContent } from '../ui/card';
import { sendVerificationEmail, signOut } from '../../lib/auth-client';
import { Mail } from 'lucide-react';

const logo = '/logo.png';

interface Props {
  email: string;
}

export function EmailVerification({ email }: Props) {
  const [resent, setResent] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleResend() {
    setLoading(true);
    await sendVerificationEmail({
      email,
      callbackURL: window.location.origin,
    });
    setLoading(false);
    setResent(true);
  }

  function handleCheckStatus() {
    window.location.reload();
  }

  return (
    <div className="flex h-screen items-center justify-center bg-secondary">
      <Card className="w-full max-w-sm">
        <CardContent className="p-8 space-y-6 text-center">
          <div className="flex justify-center">
            <img src={logo} alt="LabWise" className="h-12" />
          </div>
          <div className="flex justify-center">
            <div className="rounded-full bg-accent p-4">
              <Mail className="h-8 w-8 text-primary" />
            </div>
          </div>
          <div className="space-y-2">
            <h2 className="font-semibold text-lg">Check your email</h2>
            <p className="text-sm text-muted-foreground">
              We sent a verification link to <span className="font-medium text-foreground">{email}</span>.
              Click the link to activate your account.
            </p>
          </div>
          <div className="space-y-2">
            <Button className="w-full" onClick={handleCheckStatus}>
              I've verified — continue
            </Button>
            <Button
              variant="outline"
              className="w-full"
              onClick={handleResend}
              disabled={loading || resent}
            >
              {resent ? 'Email sent!' : loading ? 'Sending…' : 'Resend email'}
            </Button>
          </div>
          <button
            onClick={() => signOut()}
            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
          >
            Use a different account
          </button>
        </CardContent>
      </Card>
    </div>
  );
}