import { router, useForm } from '@inertiajs/react';
import { CalendarClock, Plus } 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 { Textarea } from '@/components/ui/textarea';
import { complete, store as deadlineStore, waive } from '@/routes/deadlines';

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

export type Deadline = {
    id: string;
    title: string;
    type: string;
    type_label: string;
    due_date: string;
    days_left: number;
    status: string;
    status_label: string;
    status_tone: StatusTone;
    owner: string | null;
    imminent: boolean;
    notes: string | null;
};

function CreateDeadline({ matterId, options }: { matterId: string; options: { deadlineTypes: Option[]; users: Option[] } }) {
    const [open, setOpen] = useState(false);
    const form = useForm({ title: '', type: 'custom', due_date: '', owner_id: '' as string });

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

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button size="sm">
                    <Plus /> Add deadline
                </Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Add a deadline</DialogTitle>
                </DialogHeader>
                <form onSubmit={submit} className="grid gap-4">
                    <div className="grid gap-2">
                        <Label htmlFor="dl-title">Title</Label>
                        <Input id="dl-title" value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} required />
                        {form.errors.title && <p className="text-xs text-destructive">{form.errors.title}</p>}
                    </div>
                    <div className="grid gap-2 sm:grid-cols-2">
                        <div className="grid gap-2">
                            <Label htmlFor="dl-type">Type</Label>
                            <Select value={form.data.type} onValueChange={(v) => form.setData('type', v)}>
                                <SelectTrigger id="dl-type"><SelectValue /></SelectTrigger>
                                <SelectContent>
                                    {options.deadlineTypes.map((o) => (
                                        <SelectItem key={o.value} value={String(o.value)}>{o.label}</SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="dl-due">Due date</Label>
                            <Input id="dl-due" type="date" value={form.data.due_date} onChange={(e) => form.setData('due_date', e.target.value)} required />
                            {form.errors.due_date && <p className="text-xs text-destructive">{form.errors.due_date}</p>}
                        </div>
                    </div>
                    <div className="grid gap-2">
                        <Label htmlFor="dl-owner">Owner (optional — falls back to the matter team)</Label>
                        <Select value={form.data.owner_id || 'none'} onValueChange={(v) => form.setData('owner_id', v === 'none' ? '' : v)}>
                            <SelectTrigger id="dl-owner"><SelectValue placeholder="Unassigned" /></SelectTrigger>
                            <SelectContent>
                                <SelectItem value="none">Unassigned</SelectItem>
                                {options.users.map((o) => (
                                    <SelectItem key={o.value} value={String(o.value)}>{o.label}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                    <DialogFooter>
                        <Button type="submit" disabled={form.processing}>Save deadline</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}

function WaiveDeadline({ deadlineId }: { deadlineId: string }) {
    const [open, setOpen] = useState(false);
    const form = useForm({ reason: '' });

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

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button size="xs" variant="ghost">Waive</Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Waive deadline</DialogTitle>
                </DialogHeader>
                <form onSubmit={submit} className="grid gap-4">
                    <div className="grid gap-2">
                        <Label htmlFor="waive-reason">Reason (logged permanently, min 10 characters)</Label>
                        <Textarea id="waive-reason" value={form.data.reason} onChange={(e) => form.setData('reason', e.target.value)} required />
                        {form.errors.reason && <p className="text-xs text-destructive">{form.errors.reason}</p>}
                    </div>
                    <DialogFooter>
                        <Button type="submit" variant="destructive" disabled={form.processing}>Waive</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}

export function MatterDeadlinesTab({
    matterId,
    deadlines,
    options,
    can,
}: {
    matterId: string;
    deadlines: Deadline[];
    options: { deadlineTypes: Option[]; users: Option[] };
    can: { manageDeadlines: boolean };
}) {
    const dueLabel = (d: Deadline) => {
        if (d.status !== 'open') {
return d.due_date;
}

        if (d.days_left < 0) {
return `${d.due_date} · ${Math.abs(d.days_left)}d overdue`;
}

        if (d.days_left === 0) {
return `${d.due_date} · due today`;
}

        return `${d.due_date} · ${d.days_left}d left`;
    };

    return (
        <Card>
            <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>Deadlines</CardTitle>
                {can.manageDeadlines && <CreateDeadline matterId={matterId} options={options} />}
            </CardHeader>
            <CardContent className="space-y-3">
                {deadlines.length === 0 ? (
                    <EmptyState icon={CalendarClock} title="No deadlines tracked" description="Add limitation, filing and appeal-window dates so reminders fire automatically." />
                ) : (
                    deadlines.map((d) => (
                        <div
                            key={d.id}
                            className={`flex flex-wrap items-start justify-between gap-3 rounded-lg border p-3 ${
                                d.imminent ? 'border-destructive/50 bg-destructive/5' : 'border-border'
                            }`}
                        >
                            <div>
                                <div className="flex items-center gap-2">
                                    <span className="font-medium text-foreground">{d.title}</span>
                                    <StatusBadge tone={d.status_tone}>{d.status_label}</StatusBadge>
                                    {d.imminent && <StatusBadge tone="danger">Imminent</StatusBadge>}
                                </div>
                                <p className="text-sm text-muted-foreground">
                                    {d.type_label} · {dueLabel(d)}
                                    {d.owner ? ` · ${d.owner}` : ''}
                                </p>
                            </div>
                            {can.manageDeadlines && d.status === 'open' && (
                                <div className="flex items-center gap-1">
                                    <Button
                                        size="xs"
                                        variant="secondary"
                                        onClick={() => router.patch(complete(d.id).url, {}, { preserveScroll: true })}
                                    >
                                        Complete
                                    </Button>
                                    <WaiveDeadline deadlineId={d.id} />
                                </div>
                            )}
                        </div>
                    ))
                )}
            </CardContent>
        </Card>
    );
}