import { Head, Link, useForm } from '@inertiajs/react';
import { FormEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Mail } from 'lucide-react';

interface VerifyEmailProps {
  status?: string;
}

export default function VerifyEmail({ status }: VerifyEmailProps) {
  const { post, processing } = useForm({});

  const submit = (e: FormEvent) => {
    e.preventDefault();
    post(route('verification.send'));
  };

  return (
    <>
      <Head title="Verify Email" />
      <div className="min-h-screen bg-background flex items-center justify-center p-4">
        <div className="w-full max-w-md">
          <div className="bg-card border border-border rounded-xl p-8">
            <div className="flex justify-center mb-4">
              <Mail className="h-10 w-10 text-primary" />
            </div>
            <h1 className="text-2xl font-bold text-foreground mb-2 text-center">Verify your email</h1>
            <p className="text-muted-foreground text-sm text-center mb-6">
              We sent you a verification link. Click it to activate your account, or request a new one below.
            </p>

            {status === 'verification-link-sent' && (
              <div className="mb-4 text-sm text-emerald-500 text-center">
                A new verification link has been sent to your email address.
              </div>
            )}

            <form onSubmit={submit} className="space-y-4">
              <Button type="submit" size="lg" className="w-full" disabled={processing}>
                {processing ? 'Sending…' : 'Resend Verification Email'}
              </Button>
              <div className="text-center">
                <Link
                  href={route('logout')}
                  method="post"
                  as="button"
                  className="text-sm text-muted-foreground hover:text-primary hover:underline"
                >
                  Sign Out
                </Link>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}
