import { useState } from 'react';
import { useForm } from '@inertiajs/react';
import { Shuffle } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import {
    Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger,
} from '@/Components/ui/dialog';
import { NativeSelect } from '@/Components/ui/native-select';
import { useToast } from '@/Components/Toast';

/**
 * Change Status action for the ViewAll detail. Admin picks a quotation status + comment;
 * submits to quotations.change-status. Rendered only when capabilities.changeStatus.
 */
export function ChangeStatusDialog({ quotationId, statusOptions = [] }) {
    const { show: showToast } = useToast();
    const [open, setOpen] = useState(false);
    const form = useForm({ QuotationStatusID: '', Comment: '' });

    const submit = (e) => {
        e.preventDefault();
        form.post(route('quotations.change-status', quotationId), {
            onError: () => showToast('Please check the form and try again.', 'error'),
            preserveScroll: true,
            onSuccess: () => { setOpen(false); form.reset(); },
        });
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button type="button" className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-linear-to-br from-violet-500 to-primary px-4 text-xs font-bold text-white shadow-sm transition-[filter] hover:brightness-105">
                    <Shuffle className="size-3.5" /> Change Status
                </Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Change Quotation Status</DialogTitle>
                </DialogHeader>
                <form onSubmit={submit} className="flex flex-col gap-3.5">
                    <label className="flex flex-col gap-1 text-xs font-semibold text-muted-foreground">
                        New Status
                        <NativeSelect
                            value={form.data.QuotationStatusID}
                            onChange={(e) => form.setData('QuotationStatusID', e.target.value)}
                            className="h-9 rounded-md border border-input bg-card px-2 text-xs text-foreground outline-none focus:border-primary"
                            required
                        >
                            <option value="">Select status…</option>
                            {statusOptions.map((o) => (
                                <option key={o.id} value={o.id}>{o.name}</option>
                            ))}
                        </NativeSelect>
                        {form.errors.QuotationStatusID && <small className="text-danger">{form.errors.QuotationStatusID}</small>}
                    </label>
                    <label className="flex flex-col gap-1 text-xs font-semibold text-muted-foreground">
                        Comment
                        <textarea
                            value={form.data.Comment}
                            onChange={(e) => form.setData('Comment', e.target.value)}
                            rows={3}
                            maxLength={500}
                            className="rounded-md border border-input bg-card px-2.5 py-1.5 text-xs text-foreground outline-none focus:border-primary"
                            placeholder="Optional note for the status change"
                        />
                        {form.errors.Comment && <small className="text-danger">{form.errors.Comment}</small>}
                    </label>
                    <DialogFooter>
                        <Button type="submit" disabled={form.processing || !form.data.QuotationStatusID}
                            className="h-9 rounded-lg bg-linear-to-br from-violet-500 to-primary text-xs font-bold text-white shadow-sm transition-[filter] hover:brightness-105">Save</Button>
                        <Button type="button" variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}