import { router, useForm } from '@inertiajs/react';
import { ListChecks, Plus, Wand2 } from 'lucide-react';
import { useState } from 'react';
import { EmptyState } from '@/components/empty-state';
import { StatusBadge  } from '@/components/status-badge';
import type {StatusTone} from '@/components/status-badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { applyTemplate } from '@/routes/matters';
import { store as taskStore } from '@/routes/matters/tasks';
import { update as statusUpdate } from '@/routes/tasks/status';

type Option = { value: number | string; label: string };

export type Task = {
    id: string;
    title: string;
    status: string;
    status_label: string;
    status_tone: StatusTone;
    priority: string;
    priority_label: string;
    priority_tone: StatusTone;
    due_date: string | null;
    overdue: boolean;
    assignee: string | null;
    matter: { id: string; number: string; title: string } | null;
};

type Options = {
    taskPriorities: Option[];
    taskStatuses: Option[];
    users: Option[];
    templates: Option[];
};

function QuickAdd({ matterId, options }: { matterId: string; options: Options }) {
    const form = useForm({ title: '', priority: 'normal', assigned_to: '' as string, due_date: '' });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        form.transform((d) => ({ ...d, assigned_to: d.assigned_to || null, due_date: d.due_date || null }));
        form.post(taskStore(matterId).url, { preserveScroll: true, onSuccess: () => form.reset() });
    };

    return (
        <form onSubmit={submit} className="flex flex-wrap items-end gap-2 border-t border-border pt-4">
            <div className="grid flex-1 gap-2">
                <Label>New task</Label>
                <Input value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} placeholder="e.g. Draft statement of claim" required />
            </div>
            <div className="grid w-36 gap-2">
                <Label>Priority</Label>
                <Select value={form.data.priority} onValueChange={(v) => form.setData('priority', v)}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                        {options.taskPriorities.map((p) => (
                            <SelectItem key={p.value} value={String(p.value)}>{p.label}</SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </div>
            <div className="grid w-44 gap-2">
                <Label>Assignee</Label>
                <Select value={form.data.assigned_to || 'none'} onValueChange={(v) => form.setData('assigned_to', v === 'none' ? '' : v)}>
                    <SelectTrigger><SelectValue placeholder="Unassigned" /></SelectTrigger>
                    <SelectContent>
                        <SelectItem value="none">Unassigned</SelectItem>
                        {options.users.map((u) => (
                            <SelectItem key={u.value} value={String(u.value)}>{u.label}</SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </div>
            <div className="grid w-40 gap-2">
                <Label>Due</Label>
                <Input type="date" value={form.data.due_date} onChange={(e) => form.setData('due_date', e.target.value)} />
            </div>
            <Button type="submit" disabled={form.processing}><Plus /> Add</Button>
        </form>
    );
}

function ApplyTemplate({ matterId, templates }: { matterId: string; templates: Option[] }) {
    const [open, setOpen] = useState(false);
    const form = useForm({ task_template_id: '' as string });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        form.post(applyTemplate(matterId).url, {
            preserveScroll: true,
            onSuccess: () => {
                form.reset();
                setOpen(false);
            },
        });
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button size="sm" variant="secondary">
                    <Wand2 /> Apply checklist
                </Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Apply a task checklist</DialogTitle>
                </DialogHeader>
                <form onSubmit={submit} className="grid gap-4">
                    <div className="grid gap-2">
                        <Label htmlFor="tpl">Template</Label>
                        <Select value={form.data.task_template_id} onValueChange={(v) => form.setData('task_template_id', v)}>
                            <SelectTrigger id="tpl"><SelectValue placeholder="Choose a checklist" /></SelectTrigger>
                            <SelectContent>
                                {templates.map((t) => (
                                    <SelectItem key={t.value} value={String(t.value)}>{t.label}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        {form.errors.task_template_id && <p className="text-xs text-destructive">{form.errors.task_template_id}</p>}
                    </div>
                    <DialogFooter>
                        <Button type="submit" disabled={form.processing || !form.data.task_template_id}>Apply</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}

export function MatterTasksTab({
    matterId,
    tasks,
    options,
    can,
}: {
    matterId: string;
    tasks: Task[];
    options: Options;
    can: { createTasks: boolean; editTasks: boolean };
}) {
    const setStatus = (task: Task, status: string) => {
        router.patch(statusUpdate(task.id).url, { status }, { preserveScroll: true });
    };

    return (
        <Card>
            <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>Tasks</CardTitle>
                {can.createTasks && options.templates.length > 0 && (
                    <ApplyTemplate matterId={matterId} templates={options.templates} />
                )}
            </CardHeader>
            <CardContent className="space-y-3">
                {tasks.length === 0 ? (
                    <EmptyState icon={ListChecks} title="No tasks yet" description="Add tasks or apply a checklist to drive this matter's workflow." />
                ) : (
                    tasks.map((t) => (
                        <div key={t.id} className="flex flex-wrap items-start justify-between gap-3 rounded-lg border border-border p-3">
                            <div>
                                <div className="flex items-center gap-2">
                                    <span className="font-medium text-foreground">{t.title}</span>
                                    <StatusBadge tone={t.status_tone}>{t.status_label}</StatusBadge>
                                    <StatusBadge tone={t.priority_tone}>{t.priority_label}</StatusBadge>
                                    {t.overdue && <StatusBadge tone="danger">Overdue</StatusBadge>}
                                </div>
                                <p className="text-sm text-muted-foreground">
                                    {t.assignee ?? 'Unassigned'}
                                    {t.due_date ? ` · due ${t.due_date}` : ''}
                                </p>
                            </div>
                            {can.editTasks && t.status !== 'done' && t.status !== 'cancelled' && (
                                <div className="w-40">
                                    <Select value={t.status} onValueChange={(v) => setStatus(t, v)}>
                                        <SelectTrigger size="sm"><SelectValue /></SelectTrigger>
                                        <SelectContent>
                                            {options.taskStatuses.map((s) => (
                                                <SelectItem key={s.value} value={String(s.value)}>{s.label}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                            )}
                        </div>
                    ))
                )}
                {can.createTasks && <QuickAdd matterId={matterId} options={options} />}
            </CardContent>
        </Card>
    );
}