import { useState } from 'react'
import { useForm } from '@inertiajs/react'
import { Loader2, 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'

// The generic admin status override (legacy listcomplaindetailsall.php's `Status :` row +
// `Comment :` box + btn-change). Rendered only when capabilities.changeStatus — the View All
// screen alone. All 9 complainstatus rows are offered, legacy parity; this is the only path
// that can set status 9 (Re-Review).
//
// This is the ONE gradient action in the header cluster; Print and Cancel stay outline.
//
// Comment is REQUIRED, matching the legacy's client-side validate() which refused to submit
// without one — the row it writes is the only audit trail of the override. maxLength mirrors
// the server's max:500, which is the width of the latin1 complaindetailsassignment remark
// columns the comment fans out into.
export function ChangeComplaintStatusDialog({ complaintId, statusOptions = [] }) {
    const { show: showToast } = useToast()
    const [open, setOpen] = useState(false)
    const form = useForm({ ComplainStatusID: '', Comment: '' })

    const submit = (e) => {
        e.preventDefault()
        form.post(route('complaints.change-status', complaintId), {
            onError: () => showToast('Please check the form and try again.', 'error'),
            preserveScroll: true,
            onSuccess: () => { setOpen(false); form.reset() },   // side effect only — the toast comes from the server
        })
    }

    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 className="bg-card">
                <DialogHeader>
                    <DialogTitle>Change Complaint 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.ComplainStatusID}
                            onChange={(e) => form.setData('ComplainStatusID', 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.StatusName}</option>
                            ))}
                        </NativeSelect>
                        {form.errors.ComplainStatusID && <small className="text-danger-text">{form.errors.ComplainStatusID}</small>}
                    </label>
                    <label className="flex flex-col gap-1 text-xs font-semibold text-muted-foreground">
                        Comment <span className="text-danger-text">*</span>
                        <textarea
                            value={form.data.Comment}
                            onChange={(e) => form.setData('Comment', e.target.value)}
                            rows={3}
                            maxLength={500}
                            className="resize-y rounded-md border border-input bg-card px-2.5 py-1.5 text-xs text-foreground outline-none focus:border-primary"
                            placeholder="Why is the status being changed…"
                        />
                        {form.errors.Comment && <small className="text-danger-text">{form.errors.Comment}</small>}
                    </label>
                    <DialogFooter>
                        <Button type="submit" disabled={form.processing || !form.data.ComplainStatusID || !form.data.Comment.trim()}
                            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">
                            {form.processing ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}Save
                        </Button>
                        <Button type="button" variant="outline" disabled={form.processing} onClick={() => setOpen(false)}>Cancel</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    )
}