import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import InputError from '@/components/InputError';
import { useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';

interface MilestoneFormData {
    target: string;
    description: string;
    [key: string]: string;
}

interface AddMilestoneFormProps {
    onSuccess?: () => void;
}

export default function AddMilestoneForm({ onSuccess }: AddMilestoneFormProps) {
    const { data, setData, post, processing, errors, reset } = useForm<MilestoneFormData>({
        target: '',
        description: '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('milestones.store'), {
            onSuccess: () => {
                reset();
                if (onSuccess) {
                    onSuccess();
                }
            },
        });
    };

    return (
        <div className="w-full max-w-md">
            <div className="space-y-4">
                <form onSubmit={submit} className="space-y-4">
                    <div>
                        <Label htmlFor="target" className="text-red-400">Target Number</Label>
                        <Input
                            id="target"
                            type="number"
                            step="1"
                            min="1"
                            placeholder="1500"
                            value={data.target}
                            onChange={(e) => setData('target', e.target.value)}
                            className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30"
                        />
                        <InputError message={errors.target} />
                    </div>

                    <div>
                        <Label htmlFor="description" className="text-red-400">Description</Label>
                        <Input
                            id="description"
                            type="text"
                            placeholder="First milestone"
                            value={data.description}
                            onChange={(e) => setData('description', e.target.value)}
                            className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30"
                        />
                        <InputError message={errors.description} />
                    </div>

                    <Button 
                        type="submit" 
                        disabled={processing}
                        className="w-full bg-red-600 hover:bg-red-700 text-white border-red-500"
                    >
                        {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
                        Add Milestone
                    </Button>
                </form>
            </div>
        </div>
    );
}