import { Form, Head, Link, router } from '@inertiajs/react';
import {
    CalendarDays,
    CheckCircle2,
    Circle,
    ClipboardList,
    GripVertical,
    ListChecks,
    Plus,
    RotateCcw,
    Send,
    Trash2,
    Users,
    Edit2,
    X,
    Save,
    Pencil
} from 'lucide-react';
import { useState, useEffect, useRef } from 'react';
import { DeleteConfirmModal } from '@/components/delete-confirm-modal';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Spinner } from '@/components/ui/spinner';
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import AppLayout from '@/layouts/app-layout';
import { cn } from '@/lib/utils';
import type { BreadcrumbItem } from '@/types';

type Course = { id: number; title: string };
type LearningPath = { id: number; title: string };

type AssignedTaskItem = {
    id: number;
    title: string;
    description: string | null;
    order: number;
    is_recurring: boolean;
    due_date: string | null;
    interval_days: number | null;
    recurring_count: number | null;
};

type AssignedTask = {
    id: number;
    title: string;
    description: string | null;
    type: 'course' | 'learning_path' | 'optional';
    course: { id: number; title: string } | null;
    learning_path: { id: number; title: string } | null;
    created_by: { id: number; name: string };
    items: AssignedTaskItem[];
};

type Props = {
    task: AssignedTask;
    studentsCount: number;
    courses: Course[];
    learningPaths: LearningPath[];
};

const typeLabels: Record<AssignedTask['type'], string> = {
    course: 'Per Kelas',
    learning_path: 'Per Paket Belajar',
    optional: 'Opsional',
};

const typeColors: Record<AssignedTask['type'], string> = {
    course: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400',
    learning_path: 'bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-400',
    optional: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400',
};

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Admin', href: '/admin' },
    { title: 'To Do List Siswa', href: '/admin/assigned-tasks' },
    { title: 'Detail Group', href: '#' },
];

const textareaCls = 'border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] placeholder:text-muted-foreground';

// Modal component for editing task group
function EditGroupModal({ task, courses, learningPaths }: { task: AssignedTask; courses: Course[]; learningPaths: Course[] }) {
    const [open, setOpen] = useState(false);
    const [editGroupType, setEditGroupType] = useState<AssignedTask['type']>(task.type);

    function handleOpenChange(val: boolean) {
        if (!val) {
            setEditGroupType(task.type);
        }
        setOpen(val);
    }

    return (
        <Dialog open={open} onOpenChange={handleOpenChange}>
            <DialogTrigger asChild>
                <Button variant="outline" size="sm" className="gap-1.5 w-full text-blue-600 border-blue-200 bg-blue-50/50 hover:bg-blue-100 hover:text-blue-700 dark:border-blue-900/50 dark:text-blue-400 dark:bg-blue-950/20 dark:hover:bg-blue-950/40 shadow-xs">
                    <Pencil className="h-3.5 w-3.5" /> Edit Informasi
                </Button>
            </DialogTrigger>
            <DialogContent className="max-h-[90vh] max-w-md overflow-y-auto">
                <DialogTitle>Edit Informasi Group</DialogTitle>
                <Form
                    action={`/admin/assigned-tasks/${task.id}`}
                    method="patch"
                    onSuccess={() => { setOpen(false); router.reload({ preserveScroll: true }); }}
                    className="mt-3 flex flex-col gap-4"
                >
                    {({ errors, processing }) => (
                        <>
                            <div className="grid gap-1.5">
                                <Label htmlFor="edit-title">Nama Group</Label>
                                <Input id="edit-title" name="title" defaultValue={task.title} required />
                                <InputError message={errors.title} />
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="edit-description">Deskripsi</Label>
                                <textarea id="edit-description" name="description" rows={3} defaultValue={task.description ?? ''} className={textareaCls} />
                                <InputError message={errors.description} />
                            </div>

                            <div className="grid gap-1.5">
                                <Label>Target Siswa</Label>
                                <input type="hidden" name="type" value={editGroupType} />
                                <div className="grid grid-cols-3 gap-2">
                                    {(['course', 'learning_path', 'optional'] as const).map((t) => (
                                        <button
                                            key={t}
                                            type="button"
                                            onClick={() => setEditGroupType(t)}
                                            className={`rounded-lg border p-2 text-center text-xs transition-colors ${
                                                editGroupType === t
                                                    ? 'border-blue-500 bg-blue-50 dark:border-blue-600 dark:bg-blue-950/40 text-blue-700 dark:text-blue-400 font-medium'
                                                    : 'border-border hover:bg-muted/50 text-muted-foreground'
                                            }`}
                                        >
                                            {typeLabels[t]}
                                        </button>
                                    ))}
                                </div>
                                <InputError message={errors.type} />
                            </div>

                            {editGroupType === 'course' && (
                                <div className="grid gap-1.5">
                                    <Label htmlFor="edit-course_id">Pilih Kelas</Label>
                                    <Select name="course_id" defaultValue={String(task.course?.id || '')} required>
                                        <SelectTrigger className="w-full">
                                            <SelectValue placeholder="Pilih kelas..." />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {courses.map((c) => (
                                                <SelectItem key={c.id} value={String(c.id)}>{c.title}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.course_id} />
                                </div>
                            )}

                            {editGroupType === 'learning_path' && (
                                <div className="grid gap-1.5">
                                    <Label htmlFor="edit-learning_path_id">Pilih Paket Belajar</Label>
                                    <Select name="learning_path_id" defaultValue={String(task.learning_path?.id || '')} required>
                                        <SelectTrigger className="w-full">
                                            <SelectValue placeholder="Pilih paket belajar..." />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {learningPaths.map((lp) => (
                                                <SelectItem key={lp.id} value={String(lp.id)}>{lp.title}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.learning_path_id} />
                                </div>
                            )}

                            <div className="flex justify-end gap-2 pt-2 border-t mt-2">
                                <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                                    Batal
                                </Button>
                                <Button type="submit" disabled={processing} className="bg-blue-600 hover:bg-blue-700">
                                    {processing && <Spinner className="mr-1" />}
                                    Simpan Perubahan
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

// Modal component for adding items
function AddItemModal({ taskId }: { taskId: number }) {
    const [open, setOpen] = useState(false);
    const [isRecurring, setIsRecurring] = useState(false);

    return (
        <Dialog open={open} onOpenChange={(val) => { if (!val) setIsRecurring(false); setOpen(val); }}>
            <DialogTrigger asChild>
                <Button size="sm" variant="outline" className="gap-1.5">
                    <Plus className="h-3.5 w-3.5" /> Tambah Item
                </Button>
            </DialogTrigger>
            <DialogContent className="max-w-md">
                <DialogTitle>Tambah Item To-Do</DialogTitle>
                <Form
                    action={`/admin/assigned-tasks/${taskId}/items`}
                    method="post"
                    onSuccess={() => { setOpen(false); setIsRecurring(false); }}
                    className="mt-3 flex flex-col gap-4"
                >
                    {({ errors, processing }) => (
                        <>
                            <div className="grid gap-1.5">
                                <Label htmlFor="item-title">Judul Item *</Label>
                                <Input id="item-title" name="title" placeholder="Contoh: Baca materi bab 1" required autoFocus />
                                <InputError message={errors.title} />
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="item-desc">Deskripsi <span className="font-normal text-muted-foreground">(opsional)</span></Label>
                                <textarea id="item-desc" name="description" rows={2} placeholder="Penjelasan tambahan..." className={textareaCls} />
                                <InputError message={errors.description} />
                            </div>

                            {/* Due date (non-recurring only) */}
                            {!isRecurring && (
                                <div className="grid gap-1.5">
                                    <Label htmlFor="item-due-date" className="text-sm font-medium">
                                        Tenggat Waktu <span className="font-normal text-muted-foreground">(opsional)</span>
                                    </Label>
                                    <Input id="item-due-date" name="due_date" type="date" />
                                    <p className="text-xs text-muted-foreground">Jika dikosongkan, task dijadwalkan otomatis berdasarkan urutan item.</p>
                                    <InputError message={errors.due_date} />
                                </div>
                            )}

                            {/* Recurring */}
                            <div className="flex items-center gap-2.5 rounded-xl border border-dashed p-3">
                                <input
                                    id="item-recurring"
                                    type="checkbox"
                                    checked={isRecurring}
                                    onChange={(e) => setIsRecurring(e.target.checked)}
                                    className="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                />
                                <input type="hidden" name="is_recurring" value={isRecurring ? '1' : '0'} />
                                <Label htmlFor="item-recurring" className="cursor-pointer font-medium text-sm">
                                    <span className="flex items-center gap-1.5">
                                        <RotateCcw className="h-3.5 w-3.5 text-muted-foreground" />
                                        Jadwalkan berulang
                                    </span>
                                </Label>
                            </div>

                            {isRecurring && (
                                <div className="grid grid-cols-2 gap-4 rounded-xl bg-zinc-50 p-4 dark:bg-zinc-900/20">
                                    <div className="grid gap-1.5">
                                        <Label htmlFor="interval-days">Ulangi setiap (hari)</Label>
                                        <Input id="interval-days" name="interval_days" type="number" min="1" defaultValue="3" required />
                                        <InputError message={errors.interval_days} />
                                    </div>
                                    <div className="grid gap-1.5">
                                        <Label htmlFor="recurring-count">Jumlah pengulangan</Label>
                                        <Input id="recurring-count" name="recurring_count" type="number" min="1" max="100" defaultValue="5" required />
                                        <InputError message={errors.recurring_count} />
                                    </div>
                                </div>
                            )}

                            <div className="flex justify-end gap-2 pt-2 border-t mt-2">
                                <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                                    Batal
                                </Button>
                                <Button type="submit" disabled={processing} className="bg-blue-600 hover:bg-blue-700">
                                    {processing && <Spinner className="mr-1" />}
                                    Tambah Item
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

// Modal component for editing individual item
function EditItemModal({ taskId, item }: { taskId: number; item: AssignedTaskItem }) {
    const [open, setOpen] = useState(false);
    const [editItemTitle, setEditItemTitle] = useState(item.title);
    const [editItemDesc, setEditItemDesc] = useState(item.description || '');
    const [editItemRecurring, setEditItemRecurring] = useState(item.is_recurring);
    const [editItemDueDate, setEditItemDueDate] = useState(item.due_date || '');
    const [editItemInterval, setEditItemInterval] = useState<number | string>(item.interval_days || 3);
    const [editItemRecCount, setEditItemRecCount] = useState<number | string>(item.recurring_count || 5);

    function handleOpenChange(val: boolean) {
        if (!val) {
            setEditItemTitle(item.title);
            setEditItemDesc(item.description || '');
            setEditItemRecurring(item.is_recurring);
            setEditItemDueDate(item.due_date || '');
            setEditItemInterval(item.interval_days || 3);
            setEditItemRecCount(item.recurring_count || 5);
        }
        setOpen(val);
    }

    return (
        <Dialog open={open} onOpenChange={handleOpenChange}>
            <DialogTrigger asChild>
                <button
                    className={cn(
                        'flex h-7 w-7 items-center justify-center rounded-lg',
                        'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400',
                    )}
                    title="Edit item"
                >
                    <Edit2 className="h-3.5 w-3.5" />
                </button>
            </DialogTrigger>
            <DialogContent className="max-w-md">
                <DialogTitle>Edit Item To-Do</DialogTitle>
                <Form
                    action={`/admin/assigned-tasks/${taskId}/items/${item.id}`}
                    method="patch"
                    onSuccess={() => setOpen(false)}
                    className="mt-3 flex flex-col gap-4"
                >
                    {({ errors, processing }) => (
                        <>
                            <div className="grid gap-1.5">
                                <Label htmlFor={`edit-item-title-${item.id}`}>Judul Item *</Label>
                                <Input
                                    id={`edit-item-title-${item.id}`}
                                    name="title"
                                    value={editItemTitle}
                                    onChange={(e) => setEditItemTitle(e.target.value)}
                                    required
                                />
                                <InputError message={errors.title} />
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor={`edit-item-desc-${item.id}`}>Deskripsi <span className="font-normal text-muted-foreground">(opsional)</span></Label>
                                <textarea
                                    id={`edit-item-desc-${item.id}`}
                                    name="description"
                                    rows={2}
                                    value={editItemDesc}
                                    onChange={(e) => setEditItemDesc(e.target.value)}
                                    placeholder="Penjelasan tambahan..."
                                    className={textareaCls}
                                />
                                <InputError message={errors.description} />
                            </div>

                            {/* Due date (non-recurring only) */}
                            {!editItemRecurring && (
                                <div className="grid gap-1.5">
                                    <Label htmlFor={`edit-item-due-${item.id}`} className="text-sm font-medium">
                                        Tenggat Waktu <span className="font-normal text-muted-foreground">(opsional)</span>
                                    </Label>
                                    <Input
                                        id={`edit-item-due-${item.id}`}
                                        name="due_date"
                                        type="date"
                                        value={editItemDueDate}
                                        onChange={(e) => setEditItemDueDate(e.target.value)}
                                    />
                                    <p className="text-xs text-muted-foreground">Jika dikosongkan, task dijadwalkan otomatis berdasarkan urutan item.</p>
                                    <InputError message={errors.due_date} />
                                </div>
                            )}

                            {/* Recurring */}
                            <div className="flex items-center gap-2.5 rounded-xl border border-dashed p-3">
                                <input
                                    id={`edit-item-rec-${item.id}`}
                                    type="checkbox"
                                    checked={editItemRecurring}
                                    onChange={(e) => setEditItemRecurring(e.target.checked)}
                                    className="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                />
                                <input type="hidden" name="is_recurring" value={editItemRecurring ? '1' : '0'} />
                                <Label htmlFor={`edit-item-rec-${item.id}`} className="cursor-pointer text-xs font-medium">
                                    Jadwalkan berulang
                                </Label>
                            </div>

                            {editItemRecurring && (
                                <div className="grid grid-cols-2 gap-3 rounded-lg bg-zinc-50 p-3 dark:bg-zinc-900/20">
                                    <div className="grid gap-1.5">
                                        <Label htmlFor={`edit-item-interval-${item.id}`}>Ulangi setiap (hari)</Label>
                                        <Input
                                            id={`edit-item-interval-${item.id}`}
                                            name="interval_days"
                                            type="number"
                                            min="1"
                                            value={editItemInterval}
                                            onChange={(e) => setEditItemInterval(e.target.value)}
                                            required
                                        />
                                        <InputError message={errors.interval_days} />
                                    </div>
                                    <div className="grid gap-1.5">
                                        <Label htmlFor={`edit-item-count-${item.id}`}>Jumlah pengulangan</Label>
                                        <Input
                                            id={`edit-item-count-${item.id}`}
                                            name="recurring_count"
                                            type="number"
                                            min="1"
                                            max="100"
                                            value={editItemRecCount}
                                            onChange={(e) => setEditItemRecCount(e.target.value)}
                                            required
                                        />
                                        <InputError message={errors.recurring_count} />
                                    </div>
                                </div>
                            )}

                            <div className="flex justify-end gap-2 pt-2 border-t mt-2">
                                <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                                    Batal
                                </Button>
                                <Button type="submit" disabled={processing} className="bg-blue-600 hover:bg-blue-700">
                                    {processing && <Spinner className="mr-1" />}
                                    Simpan Perubahan
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

export default function AdminAssignedTasksShow({ task, studentsCount, courses, learningPaths }: Props) {
    const [items, setItems] = useState<AssignedTaskItem[]>(task.items);
    const [draggingIdx, setDraggingIdx] = useState<number | null>(null);
    const dragRef = useRef<number | null>(null);

    const [deleteModal, setDeleteModal] = useState<{ open: boolean; id: number | null; title: string }>({
        open: false,
        id: null,
        title: '',
    });

    useEffect(() => {
        setItems(task.items);
    }, [task.items]);

    function confirmDeleteItem() {
        if (!deleteModal.id) return;
        router.delete(`/admin/assigned-tasks/${task.id}/items/${deleteModal.id}`, {
            preserveScroll: true,
            onSuccess: () => setDeleteModal({ open: false, id: null, title: '' }),
        });
    }

    function distribute() {
        router.post(`/admin/assigned-tasks/${task.id}/distribute`, {}, { preserveScroll: true });
    }

    function handleDragStart(idx: number) {
        dragRef.current = idx;
        setDraggingIdx(idx);
    }

    function handleDragOver(e: React.DragEvent, idx: number) {
        e.preventDefault();
        const from = dragRef.current;
        if (from === null || from === idx) return;

        setItems(prev => {
            const next = [...prev];
            const [moved] = next.splice(from, 1);
            next.splice(idx, 0, moved);
            return next;
        });
        dragRef.current = idx;
        setDraggingIdx(idx);
    }

    function handleDrop() {
        setDraggingIdx(null);
        dragRef.current = null;
        router.patch(`/admin/assigned-tasks/${task.id}/items/reorder`, {
            items: items.map(item => item.id)
        }, {
            preserveScroll: true
        });
    }

    function handleDragEnd() {
        setDraggingIdx(null);
        dragRef.current = null;
    }

    return (
        <>
            <Head title={task.title} />

            <div className="flex flex-col gap-6 p-4 md:p-6">

                {/* ── Gradient Header Card ── */}
                <div className="relative overflow-hidden rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-white to-blue-50 p-5 shadow-sm dark:border-blue-800/30 dark:from-blue-950/40 dark:via-card dark:to-blue-950/30">
                    <div className="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-blue-100/40 dark:bg-blue-700/10" />
                    <div className="relative z-10 flex items-start justify-between gap-4">
                        <div className="flex items-start gap-3 min-w-0 flex-1">
                            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-800/60">
                                <ListChecks className="h-5 w-5 text-blue-600 dark:text-blue-300" />
                            </div>
                            <div className="min-w-0 flex-1">
                                <div className="flex flex-wrap items-center gap-2">
                                    <h1 className="text-xl font-bold text-blue-900 dark:text-blue-100 truncate">{task.title}</h1>
                                    <span className={cn('inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', typeColors[task.type])}>
                                        {typeLabels[task.type]}
                                    </span>
                                </div>
                                <p className="mt-0.5 text-sm text-blue-600 dark:text-blue-400">
                                    {task.course?.title ?? task.learning_path?.title ?? 'Opsional'}{' '}
                                    <span className="text-blue-400 dark:text-blue-500">·</span>{' '}
                                    <span className="font-semibold">{task.items.length}</span> item
                                </p>
                                {task.description && (
                                    <p className="mt-1 text-sm text-blue-700/70 dark:text-blue-300/70">{task.description}</p>
                                )}
                            </div>
                        </div>
                        <Link href="/admin/assigned-tasks" className="shrink-0">
                            <Button size="sm" variant="outline" className="gap-1.5 border-blue-200 bg-white/70 text-blue-700 hover:bg-white dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                                ← Kembali
                            </Button>
                        </Link>
                    </div>
                </div>

                {/* ── Two-column layout ── */}
                <div className="grid gap-5 lg:grid-cols-[1fr_300px]">

                    {/* ── Left: Items ── */}
                    <div className="flex flex-col gap-4">

                        {/* Items card */}
                        <div className="overflow-hidden rounded-2xl border bg-white shadow-sm dark:bg-card">
                            <div className="flex items-center justify-between border-b bg-muted/30 px-5 py-3.5">
                                <div className="flex items-center gap-2">
                                    <ClipboardList className="h-4 w-4 text-muted-foreground" />
                                    <span className="font-semibold">
                                        Item To-Do
                                        <span className="ml-1.5 text-sm font-normal text-muted-foreground">
                                            ({task.items.length})
                                        </span>
                                    </span>
                                </div>
                                <AddItemModal taskId={task.id} />
                            </div>

                            {/* Empty state */}
                            {items.length === 0 && (
                                <div className="p-10 text-center">
                                    <Circle className="mx-auto mb-3 h-8 w-8 text-muted-foreground/30" />
                                    <p className="font-medium text-muted-foreground">Belum ada item</p>
                                    <p className="mt-1 text-sm text-muted-foreground">Klik "Tambah Item" untuk mulai mengisi group ini.</p>
                                </div>
                            )}

                            {/* Item rows */}
                            {items.length > 0 && (
                                <div className="divide-y select-none">
                                    {items.map((item, idx) => (
                                        <div
                                            key={item.id}
                                            draggable
                                            onDragStart={() => handleDragStart(idx)}
                                            onDragOver={(e) => handleDragOver(e, idx)}
                                            onDrop={handleDrop}
                                            onDragEnd={handleDragEnd}
                                            className={cn(
                                                "group flex items-start gap-3 px-5 py-3.5 hover:bg-muted/5 transition-all duration-150 cursor-grab active:cursor-grabbing",
                                                draggingIdx === idx ? "bg-blue-50/50 border-blue-200 opacity-50 scale-[0.99] shadow-inner" : ""
                                            )}
                                        >
                                            <div className="mt-0.5 flex shrink-0 flex-col items-center gap-0.5">
                                                <GripVertical className="h-4 w-4 text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors" />
                                                <span className="text-[11px] font-semibold tabular-nums text-muted-foreground/50">{idx + 1}</span>
                                            </div>
                                            <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-300" />
                                            <div className="min-w-0 flex-1">
                                                <p className="font-medium text-gray-900 dark:text-gray-100">{item.title}</p>
                                                {item.description && (
                                                    <p className="mt-0.5 text-sm text-muted-foreground">{item.description}</p>
                                                )}
                                                <div className="mt-1 flex flex-wrap gap-1.5">
                                                    {item.is_recurring && (
                                                        <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
                                                            <RotateCcw className="h-2.5 w-2.5" />
                                                            Setiap {item.interval_days} hari × {item.recurring_count}
                                                        </span>
                                                    )}
                                                    {!item.is_recurring && item.due_date && (
                                                        <span className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                                                            <CalendarDays className="h-2.5 w-2.5" />
                                                            {new Date(item.due_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })}
                                                        </span>
                                                    )}
                                                </div>
                                            </div>
                                            <div className="flex gap-1.5 shrink-0 transition-all opacity-0 group-hover:opacity-100">
                                                <EditItemModal taskId={task.id} item={item} />
                                                <button
                                                    onClick={() => setDeleteModal({ open: true, id: item.id, title: item.title })}
                                                    className={cn(
                                                        'flex h-7 w-7 items-center justify-center rounded-lg',
                                                        'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400',
                                                    )}
                                                    title="Hapus item"
                                                >
                                                    <Trash2 className="h-3.5 w-3.5" />
                                                </button>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>

                    {/* ── Right: Info + Distribute ── */}
                    <div className="flex flex-col gap-4">

                        {/* Info card */}
                        <div className="rounded-2xl border bg-white p-5 shadow-sm dark:bg-card">
                            <h2 className="mb-4 font-semibold">Info Group</h2>
                            <div className="flex flex-col gap-3 text-sm">
                                <div className="flex items-center justify-between gap-2">
                                    <span className="text-muted-foreground">Tipe</span>
                                    <span className={cn('inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', typeColors[task.type])}>
                                        {typeLabels[task.type]}
                                    </span>
                                </div>
                                <div className="flex items-start justify-between gap-2">
                                    <span className="shrink-0 text-muted-foreground">Target</span>
                                    <span className="max-w-[160px] truncate text-right font-medium">
                                        {task.course?.title ?? task.learning_path?.title ?? '—'}
                                    </span>
                                </div>
                                <div className="flex items-center justify-between gap-2">
                                    <span className="text-muted-foreground">Dibuat oleh</span>
                                    <span className="font-medium">{task.created_by.name}</span>
                                </div>
                                <div className="flex items-center justify-between gap-2 border-t pt-3 pb-2">
                                    <span className="text-muted-foreground">Jumlah item</span>
                                    <span className="text-lg font-bold">{task.items.length}</span>
                                </div>

                                <EditGroupModal task={task} courses={courses} learningPaths={learningPaths} />
                            </div>
                        </div>

                        {/* Distribute card */}
                        <div className="rounded-2xl border border-emerald-100 bg-gradient-to-br from-emerald-50 to-white p-5 shadow-sm dark:border-emerald-800/30 dark:from-emerald-950/40 dark:to-card">
                            <div className="mb-3 flex items-center gap-2">
                                <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-emerald-100 dark:bg-emerald-800/60">
                                    <Users className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                                </div>
                                <h2 className="font-semibold text-emerald-900 dark:text-emerald-100">Distribusi</h2>
                            </div>
                            <p className="mb-4 text-sm text-emerald-700 dark:text-emerald-300">
                                <span className="text-2xl font-bold text-emerald-800 dark:text-emerald-100">
                                    {studentsCount}
                                </span>
                                <br />
                                siswa aktif akan menerima to-do list ini. Siswa yang sudah menerima tidak akan mendapat duplikat.
                            </p>
                            <Button
                                onClick={distribute}
                                disabled={task.items.length === 0}
                                className="w-full gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50"
                            >
                                <Send className="h-4 w-4" />
                                Kirim ke Siswa
                            </Button>
                            {task.items.length === 0 && (
                                <p className="mt-2 text-center text-xs text-emerald-600/60 dark:text-emerald-400/60">
                                    Tambahkan minimal 1 item dulu
                                </p>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            <DeleteConfirmModal
                open={deleteModal.open}
                onClose={() => setDeleteModal({ open: false, id: null, title: '' })}
                onConfirm={confirmDeleteItem}
                title={`Hapus item "${deleteModal.title}"?`}
                description="Item ini akan dihapus dari group. Planner siswa yang sudah menerima tidak akan terpengaruh."
            />
        </>
    );
}

AdminAssignedTasksShow.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;