import { Head, useForm } 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 { ShieldCheck } from 'lucide-react';

export default function ConfirmPassword() {
  const { data, setData, post, processing, errors } = useForm({
    password: '',
  });

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

  return (
    <>
      <Head title="Confirm 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">
              <ShieldCheck className="h-10 w-10 text-primary" />
            </div>
            <h1 className="text-2xl font-bold text-foreground mb-2 text-center">Confirm Password</h1>
            <p className="text-muted-foreground text-sm text-center mb-6">
              Please confirm your password before continuing
            </p>

            <form onSubmit={submit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  type="password"
                  value={data.password}
                  onChange={(e) => setData('password', e.target.value)}
                  required
                  autoComplete="current-password"
                />
                {errors.password && <p className="text-xs text-destructive">{errors.password}</p>}
              </div>
              <Button type="submit" size="lg" className="w-full" disabled={processing}>
                {processing ? 'Confirming…' : 'Confirm'}
              </Button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}
