import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { useForm } from '@inertiajs/react';
import { Loader2 } from 'lucide-react';

type GenerateForm = {
    amount: string;
    description: string;
    client_id: string;
};

interface GenerateLinkDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    t: (namespace: string, key: string) => string;
    clients?: { id: number; name: string }[];
}

export default function GenerateLinkDialog({ open, onOpenChange, t, clients }: GenerateLinkDialogProps) {
    // Language + link validity are not exposed: the server defaults to French and a 24h validity.
    const { data, setData, post, processing, errors, reset } = useForm<GenerateForm>({
        amount: '',
        description: '',
        client_id: '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('clictopay.generate'), {
            onSuccess: () => {
                reset();
                onOpenChange(false);
            },
        });
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md">
                <form onSubmit={handleSubmit}>
                    <DialogHeader>
                        <DialogTitle>{t('clictopay', 'dialog_title')}</DialogTitle>
                    </DialogHeader>

                    <div className="mt-4 flex flex-col gap-4">
                        <div>
                            <Label htmlFor="ctp-amount">{t('clictopay', 'amount')}</Label>
                            <Input
                                id="ctp-amount"
                                type="number"
                                min={1}
                                step="0.001"
                                value={data.amount}
                                onChange={(e) => setData('amount', e.target.value)}
                                required
                            />
                            <p className="mt-1 text-xs text-muted-foreground">{t('clictopay', 'amount_help')}</p>
                            {errors.amount && <p className="mt-1 text-sm text-red-600">{errors.amount}</p>}
                        </div>

                        <div>
                            <Label htmlFor="ctp-description">{t('clictopay', 'description')}</Label>
                            <Textarea
                                id="ctp-description"
                                value={data.description}
                                onChange={(e) => setData('description', e.target.value)}
                                rows={2}
                            />
                            {errors.description && <p className="mt-1 text-sm text-red-600">{errors.description}</p>}
                        </div>

                        {clients && clients.length > 0 && (
                            <div>
                                <Label htmlFor="ctp-client">{t('clictopay', 'client_optional')}</Label>
                                <Select value={data.client_id} onValueChange={(v) => setData('client_id', v)}>
                                    <SelectTrigger id="ctp-client">
                                        <SelectValue placeholder={t('clictopay', 'all')} />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            {clients.map((c) => (
                                                <SelectItem key={c.id} value={String(c.id)}>
                                                    {c.name}
                                                </SelectItem>
                                            ))}
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            </div>
                        )}
                    </div>

                    <DialogFooter className="mt-6">
                        <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={processing}>
                            {t('clictopay', 'cancel')}
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {processing ? (
                                <>
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    {t('clictopay', 'generating')}
                                </>
                            ) : (
                                t('clictopay', 'generate')
                            )}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}