import { Head, useForm, Link } from '@inertiajs/react';
import { FormEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { KeyRound } from 'lucide-react';

interface ForgotPasswordProps {
  status?: string;
}

export default function ForgotPassword({ status }: ForgotPasswordProps) {
  const { data, setData, post, processing, errors } = useForm({
    email: '',
  });

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

  return (
    <>
      <Head title="Reset Password" />
      <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">
              <KeyRound className="h-10 w-10 text-primary" />
            </div>
            <h1 className="text-2xl font-bold text-foreground mb-2 text-center">Reset Password</h1>
            <p className="text-muted-foreground text-sm text-center mb-6">
              Enter your email to receive a reset link
            </p>

            {status && (
              <div className="mb-4 text-sm text-emerald-500 text-center">{status}</div>
            )}

            <form onSubmit={submit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  value={data.email}
                  onChange={(e) => setData('email', e.target.value)}
                  placeholder="you@example.com"
                  required
                />
                {errors.email && (
                  <p className="text-xs text-destructive">{errors.email}</p>
                )}
              </div>
              <Button type="submit" size="lg" className="w-full" disabled={processing}>
                {processing ? 'Sending…' : 'Send Reset Link'}
              </Button>
              <div className="text-center">
                <Link href={route('login')} className="text-sm text-primary hover:underline">
                  Back to sign in
                </Link>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}
