import { Form, Head, Link, router } from '@inertiajs/react';
import { AlertCircle, CalendarDays, CheckCircle2, Circle, Lock, Plus, Sparkles, Trash2, ChevronLeft, ChevronRight, Pencil } from 'lucide-react';
import { useEffect, useState } from 'react';
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 { 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; slug: string } | null;
type Enrollment = { id: number; course: Course } | null;
type Task = {
    id: number;
    title: string;
    type: 'lesson' | 'quiz' | 'assignment' | 'personal' | 'assigned';
    status: 'pending' | 'completed' | 'missed';
    is_priority: boolean;
    is_locked?: boolean;
    deadline_date?: string | null;
    lesson_id: number | null;
    quiz_id: number | null;
    assignment_id: number | null;
    enrollment: Enrollment;
    lesson: { id: number; title: string; type: string; chapter_id: number } | null;
    quiz: { id: number; title: string; deadline: string | null } | null;
    assignment: { id: number; title: string; deadline: string | null } | null;
    scheduled_date?: string | null;
};

type OptionalTask = {
    id: number;
    title: string;
    description: string | null;
    scheduled_date: string | null;
};

type Props = {
    tasks: Task[];
    date: string;
    missedCount: number;
    optionalTasks: OptionalTask[];
    month: string;
    tasksByDate: Record<string, Task[]>;
};

const breadcrumbs: BreadcrumbItem[] = [{ title: 'Planner', href: '/planner' }];

const typeLabels: Record<Task['type'], string> = {
    lesson: 'Lesson',
    quiz: 'Quiz',
    assignment: 'Tugas',
    personal: 'Pribadi',
    assigned: 'Dari Instruktur',
};

const typePill: Record<Task['type'], string> = {
    lesson: 'bg-sky-100 text-sky-600',
    quiz: 'bg-amber-100 text-amber-600',
    assignment: 'bg-violet-100 text-violet-600',
    personal: 'bg-slate-100 text-slate-500',
    assigned: 'bg-sky-100 text-sky-600',
};

const TYPE_DOT: Record<string, string> = {
    lesson: 'bg-sky-300',
    quiz: 'bg-amber-400',
    assignment: 'bg-violet-400',
    personal: 'bg-slate-400',
    assigned: 'bg-sky-300',
};

const DAY_NAMES = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];

const MONTH_NAMES = [
    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember',
];

function getMonthGrid(year: number, month: number): (number | null)[] {
    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const grid: (number | null)[] = Array(firstDay).fill(null);
    for (let d = 1; d <= daysInMonth; d++) {
        grid.push(d);
    }
    while (grid.length % 7 !== 0) {
        grid.push(null);
    }
    return grid;
}

function formatDate(dateStr: string): string {
    return new Intl.DateTimeFormat('id-ID', {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric',
    }).format(new Date(dateStr));
}

function navigateDate(currentDate: string, days: number): string {
    const d = new Date(currentDate);
    d.setDate(d.getDate() + days);
    return d.toISOString().split('T')[0];
}

function FormSuccessHandler({ wasSuccessful, onSuccess }: { wasSuccessful: boolean; onSuccess: () => void }) {
    useEffect(() => {
        if (wasSuccessful) {
            onSuccess();
        }
    }, [wasSuccessful, onSuccess]);
    return null;
}

export default function PlannerIndex({ tasks, date, missedCount, optionalTasks, month, tasksByDate }: Props) {
    const [showAddForm, setShowAddForm] = useState(false);
    const [selectedCategory, setSelectedCategory] = useState<'all' | 'study' | 'todo' | 'personal'>('all');
    const [editingTask, setEditingTask] = useState<Task | null>(null);
    const [deletingTask, setDeletingTask] = useState<Task | null>(null);
    const [localTasks, setLocalTasks] = useState<Task[]>(tasks);
    const [isFormRecurring, setIsFormRecurring] = useState(false);
    const today = new Date().toISOString().split('T')[0];
    const isToday = date === today;

    const [year, mon] = month.split('-').map(Number);
    const prevMonth = new Date(year, mon - 2, 1);
    const nextMonth = new Date(year, mon, 1);
    const grid = getMonthGrid(year, mon - 1);

    useEffect(() => {
        setLocalTasks(tasks);
    }, [tasks]);

    const pendingTasks = localTasks.filter((t) => t.status === 'pending');
    const completedTasks = localTasks.filter((t) => t.status === 'completed');
    const missedTasks = localTasks.filter((t) => t.status === 'missed');

    function changeDate(newDate: string) {
        router.get('/planner', { date: newDate, month: month }, { replace: true, preserveScroll: true });
    }

    function navMonth(d: Date) {
        router.get('/planner', {
            date: date,
            month: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`,
        }, { replace: true, preserveScroll: true, preserveState: true });
    }

    function markComplete(taskId: number) {
        setLocalTasks((prev) => prev.map((t) => (t.id === taskId ? { ...t, status: 'completed' } : t)));
        router.patch(`/planner/${taskId}/complete`, {}, {
            preserveScroll: true,
            preserveState: true,
            onError: () => setLocalTasks(tasks)
        });
    }

    function revertComplete(taskId: number) {
        setLocalTasks((prev) => prev.map((t) => (t.id === taskId ? { ...t, status: 'pending' } : t)));
        router.patch(`/planner/${taskId}/revert`, {}, {
            preserveScroll: true,
            preserveState: true,
            onError: () => setLocalTasks(tasks)
        });
    }

    function deleteTask(taskId: number) {
        setLocalTasks((prev) => prev.filter((t) => t.id !== taskId));
        router.delete(`/planner/${taskId}`, {
            preserveScroll: true,
            preserveState: true,
            onError: () => setLocalTasks(tasks)
        });
    }

    function handleDeleteClick(task: Task) {
        if (task.recurring_group_id) {
            setDeletingTask(task);
        } else {
            deleteTask(task.id);
        }
    }

    function takeOptionalTask(taskId: number, scheduledDate: string) {
        router.post(`/assigned-tasks/${taskId}/take`, { scheduled_date: scheduledDate }, { preserveScroll: true });
    }

    function getTaskLink(task: Task): string | null {
        const slug = task.enrollment?.course?.slug;
        if (!slug) return null;
        if (task.type === 'lesson' && task.lesson_id) return `/courses/${slug}/learn/${task.lesson_id}`;
        if (task.type === 'quiz' && task.quiz_id) return `/courses/${slug}/quiz/${task.quiz_id}`;
        if (task.type === 'assignment' && task.assignment_id) return `/courses/${slug}/assignment/${task.assignment_id}`;
        return null;
    }

    const studyTasks = localTasks.filter((t) => t.type === 'quiz' || t.type === 'assignment');
    const todoTasks = localTasks.filter((t) => t.type === 'assigned' || t.type === 'lesson');
    const personalTasks = localTasks.filter((t) => t.type === 'personal');

    const renderCourseTaskList = (taskList: Task[], emptyMessage: string) => {
        if (taskList.length === 0) {
            return (
                <div className="rounded-2xl border border-dashed border-sky-200 bg-white py-10 text-center">
                    <CalendarDays className="mx-auto mb-2 h-8 w-8 text-sky-200" />
                    <p className="text-sm text-slate-400">{emptyMessage}</p>
                </div>
            );
        }

        return (
            <div className="overflow-hidden rounded-2xl border border-sky-100 bg-white shadow-sm shadow-sky-50">
                {taskList.map((task, idx) => {
                    const link = getTaskLink(task);
                    const isMissed = task.status === 'missed';

                    return (
                        <div
                            key={task.id}
                            className={cn(
                                'flex items-center gap-3 px-4 py-3.5',
                                idx > 0 && 'border-t border-sky-50',
                                isMissed && 'bg-rose-50/50',
                                task.status === 'completed' && 'bg-slate-50/40 opacity-75',
                            )}
                        >
                            {task.status !== 'completed' && task.is_locked ? (
                                <span className="shrink-0 text-slate-400 p-1" title="Task ini masih terkunci. Selesaikan materi sebelumnya terlebih dahulu.">
                                    <Lock className="h-4 w-4 text-slate-300" />
                                </span>
                            ) : (
                                <button
                                    onClick={() => {
                                        if (task.status === 'pending' || task.status === 'missed') {
                                            markComplete(task.id);
                                        } else if (task.status === 'completed') {
                                            revertComplete(task.id);
                                        }
                                    }}
                                    className="shrink-0 transition-colors"
                                >
                                    {task.status === 'completed' ? (
                                        <CheckCircle2 className="h-5 w-5 text-teal-400 hover:text-rose-400" />
                                    ) : isMissed ? (
                                        <Circle className="h-5 w-5 text-rose-400" />
                                    ) : (
                                        <Circle className="h-5 w-5 text-sky-300 hover:text-sky-500" />
                                    )}
                                </button>
                            )}
                            <div className="min-w-0 flex-1">
                                {link && !task.is_locked ? (
                                    <Link
                                        href={link}
                                        className={cn(
                                            'block truncate text-sm font-medium transition-colors hover:text-sky-600',
                                            task.status === 'completed' ? 'text-slate-400 line-through font-normal' : (isMissed ? 'text-rose-600' : 'text-slate-700'),
                                        )}
                                    >
                                        {task.title}
                                    </Link>
                                ) : (
                                    <p
                                        className={cn(
                                            'truncate text-sm font-medium',
                                            task.status === 'completed' ? 'text-slate-400 line-through font-normal' : (isMissed ? 'text-rose-600' : 'text-slate-700'),
                                            task.is_locked && task.status !== 'completed' && 'opacity-60',
                                        )}
                                    >
                                        {task.title}
                                    </p>
                                )}
                                <div className="mt-1 flex flex-wrap items-center gap-1.5">
                                    <span className={cn('rounded-full px-2 py-0.5 text-xs font-medium', typePill[task.type])}>
                                        {typeLabels[task.type]}
                                    </span>
                                    {task.enrollment?.course && (
                                        <span className="truncate text-xs text-slate-400">
                                            {task.enrollment.course.title}
                                        </span>
                                    )}
                                    {task.is_priority && (
                                        <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-600">
                                            Prioritas
                                        </span>
                                    )}
                                    {isMissed && (
                                        <span className="rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-500">
                                            Terlambat
                                        </span>
                                    )}
                                    {task.deadline_date && (
                                        <span className="rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-950/20 dark:text-red-400">
                                            Deadline: {new Date(task.deadline_date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })}
                                        </span>
                                    )}
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    };

    return (
        <>
            <Head title="Planner" />

            <div className="min-h-screen bg-sky-50/40">
                <div className="mx-auto flex max-w-3xl flex-col gap-6 px-5 py-8">
                    {/* Header */}
                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                            <h1 className="text-2xl font-bold text-slate-800">Daily Planner</h1>
                        </div>
                        <div className="flex items-center gap-2">
                            {missedCount > 0 && (
                                <div className="flex items-center gap-1.5 rounded-full bg-rose-100 px-3 py-1.5 text-sm font-medium text-rose-600">
                                    <AlertCircle className="h-4 w-4" />
                                    {missedCount} task terlewat
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Monthly Calendar View */}
                    <div className="overflow-hidden rounded-2xl border border-sky-100 bg-white p-4 shadow-sm shadow-sky-50">
                        <div className="mb-4 flex items-center justify-between">
                            <h2 className="font-bold text-slate-800 text-sm">Kalender Bulanan</h2>
                            <div className="flex items-center gap-2">
                                <button
                                    onClick={() => navMonth(prevMonth)}
                                    className="calendar-nav-btn-sm flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition-colors hover:bg-slate-50"
                                >
                                    <ChevronLeft className="h-5 w-5 text-slate-600" />
                                </button>
                                <span className="min-w-[120px] text-center text-xs font-semibold text-slate-700">
                                    {MONTH_NAMES[mon - 1]} {year}
                                </span>
                                <button
                                    onClick={() => navMonth(nextMonth)}
                                    className="calendar-nav-btn-sm flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition-colors hover:bg-slate-50"
                                >
                                    <ChevronRight className="h-5 w-5 text-slate-600" />
                                </button>
                            </div>
                        </div>

                        {/* Day names */}
                        <div className="grid grid-cols-7 gap-1 text-center text-[10px] font-semibold text-sky-400 uppercase tracking-wide bg-sky-50/60 rounded-xl py-1 mb-2">
                            {DAY_NAMES.map((d) => (
                                <div key={d}>{d}</div>
                            ))}
                        </div>

                        {/* Days grid */}
                        <div className="grid grid-cols-7 gap-1">
                            {grid.map((day, i) => {
                                if (!day) {
                                    return <div key={i} className="min-h-[44px] bg-sky-50/5 rounded-xl" />;
                                }

                                const dateStr = `${year}-${String(mon).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                                const dayTasks = tasksByDate[dateStr] ?? [];
                                const isCurrentSelected = dateStr === date;
                                const isRealToday = dateStr === today;

                                return (
                                    <button
                                        key={i}
                                        onClick={() => changeDate(dateStr)}
                                        className={cn(
                                            'flex min-h-[44px] flex-col items-center justify-between p-1 rounded-xl border transition-colors cursor-pointer',
                                            isCurrentSelected
                                                ? 'border-sky-400 bg-sky-50 text-sky-600 font-bold'
                                                : isRealToday
                                                ? 'border-slate-200 bg-slate-50 text-slate-700'
                                                : 'border-transparent hover:bg-slate-50 text-slate-600',
                                        )}
                                    >
                                        <span className="text-xs">{day}</span>
                                        {/* Status dots */}
                                        <div className="flex gap-0.5 justify-center mt-0.5">
                                            {dayTasks.slice(0, 3).map((t) => (
                                                <span
                                                    key={t.id}
                                                    className={cn(
                                                        'h-1.5 w-1.5 rounded-full',
                                                        TYPE_DOT[t.type],
                                                    )}
                                                    title={t.title}
                                                />
                                            ))}
                                            {dayTasks.length > 3 && (
                                                <span className="text-[8px] text-slate-400 font-normal leading-none">+</span>
                                            )}
                                        </div>
                                    </button>
                                );
                            })}
                        </div>
                    </div>

                    {/* Date Navigation */}
                    <div className="flex items-center gap-3 rounded-2xl border border-sky-100 bg-white px-5 py-4 shadow-sm shadow-sky-50">
                        <button
                            onClick={() => changeDate(navigateDate(date, -1))}
                            className="calendar-nav-btn flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition-colors hover:bg-slate-50"
                        >
                            <ChevronLeft className="h-5 w-5 text-slate-600" />
                        </button>
                        <div className="flex-1 text-center">
                            <p className="font-semibold text-slate-800">{formatDate(date)}</p>
                            {isToday && (
                                <span className="mt-0.5 inline-block rounded-full bg-sky-100 px-2 py-0.5 text-xs font-medium text-sky-600">
                                    Hari Ini
                                </span>
                            )}
                        </div>
                        <button
                            onClick={() => changeDate(navigateDate(date, 1))}
                            className="calendar-nav-btn flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-sm transition-colors hover:bg-slate-50"
                        >
                            <ChevronRight className="h-5 w-5 text-slate-600" />
                        </button>
                        {!isToday && (
                            <button
                                onClick={() => changeDate(today)}
                                className="rounded-xl bg-sky-400 px-3 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-sky-500"
                            >
                                Hari Ini
                            </button>
                        )}
                    </div>

                    {/* Category Filter Dropdown */}
                    <div className="flex w-full items-center gap-2 rounded-2xl border border-sky-100 bg-white px-4 py-2.5 shadow-sm shadow-sky-50">
                        <span className="text-xs font-semibold text-slate-400 whitespace-nowrap">Filter Kategori:</span>
                        <select
                            value={selectedCategory}
                            onChange={(e) => setSelectedCategory(e.target.value as any)}
                            className="w-full bg-transparent text-sm font-semibold text-slate-700 outline-none cursor-pointer"
                        >
                            <option value="all">Semua Kategori</option>
                            <option value="study">Task Belajar (Kuis & Tugas)</option>
                            <option value="todo">Task To-Do (Instruktur & Pelajaran)</option>
                            <option value="personal">Task Pribadi</option>
                        </select>
                    </div>

                    {/* Tasks Vertical Flow */}
                    <div className="flex flex-col gap-6">
                        {/* Task Belajar */}
                        {(selectedCategory === 'all' || selectedCategory === 'study') && (
                            <section>
                                <h2 className="mb-3 font-semibold text-slate-700">Task Belajar</h2>
                                {renderCourseTaskList(studyTasks, 'Tidak ada task belajar hari ini')}
                            </section>
                        )}

                        {/* Task To-Do */}
                        {(selectedCategory === 'all' || selectedCategory === 'todo') && (
                            <section>
                                <h2 className="mb-3 font-semibold text-slate-700">Task To-Do</h2>
                                {renderCourseTaskList(todoTasks, 'Tidak ada task to-do hari ini')}
                            </section>
                        )}

                        {/* Personal Tasks */}
                        {(selectedCategory === 'all' || selectedCategory === 'personal') && (
                            <section>
                                <div className="mb-3 flex items-center justify-between">
                                    <h2 className="font-semibold text-slate-700">Task Pribadi</h2>
                                    <Dialog open={showAddForm} onOpenChange={(open) => {
                                        setShowAddForm(open);
                                        if (!open) {
                                            setEditingTask(null);
                                            setIsFormRecurring(false);
                                        }
                                    }}>
                                        <DialogTrigger asChild>
                                            <button
                                                onClick={() => {
                                                    setEditingTask(null);
                                                    setShowAddForm(true);
                                                }}
                                                className="flex items-center gap-1 rounded-full bg-sky-100 px-3 py-1 text-sm font-medium text-sky-600 transition-colors hover:bg-sky-200 cursor-pointer"
                                            >
                                                <Plus className="h-3.5 w-3.5" />
                                                Tambah
                                            </button>
                                        </DialogTrigger>
                                        <DialogContent className="max-h-[90vh] max-w-md overflow-y-auto">
                                            <DialogTitle>{editingTask ? 'Edit Task Pribadi' : 'Tambah Task Pribadi'}</DialogTitle>
                                            <Form
                                                key={editingTask ? `edit-${editingTask.id}` : 'create'}
                                                action={editingTask ? `/planner/${editingTask.id}` : '/planner'}
                                                method={editingTask ? 'patch' : 'post'}
                                                className="mt-3 flex flex-col gap-4"
                                                resetOnSuccess
                                            >
                                                {({ errors, processing, wasSuccessful }) => {
                                                    return (
                                                        <div className="flex flex-col gap-3">
                                                            <FormSuccessHandler
                                                                wasSuccessful={wasSuccessful}
                                                                onSuccess={() => {
                                                                    setShowAddForm(false);
                                                                    setEditingTask(null);
                                                                    setIsFormRecurring(false);
                                                                }}
                                                            />
                                                            <div className="grid gap-1">
                                                                 <Label htmlFor="task-title" className="text-slate-600">
                                                                     Nama Task
                                                                 </Label>
                                                                 <Input
                                                                     id="task-title"
                                                                     name="title"
                                                                     defaultValue={editingTask ? editingTask.title : ''}
                                                                     placeholder="Contoh: Baca buku, Olahraga..."
                                                                     className="border-sky-200 bg-white focus-visible:ring-sky-300"
                                                                     required
                                                                 />
                                                                 <InputError message={errors.title} />
                                                            </div>
                                                            <div className="grid gap-1">
                                                                 <Label htmlFor="task-date" className="text-slate-600">
                                                                     Tanggal Mulai
                                                                 </Label>
                                                                 <Input
                                                                     id="task-date"
                                                                     type="date"
                                                                     name="scheduled_date"
                                                                     defaultValue={editingTask && editingTask.scheduled_date ? editingTask.scheduled_date : date}
                                                                     className="border-sky-200 bg-white focus-visible:ring-sky-300"
                                                                     required
                                                                 />
                                                                 <InputError message={errors.scheduled_date} />
                                                            </div>

                                                            {editingTask && editingTask.recurring_group_id && (
                                                                <div className="flex flex-col gap-2 rounded-xl bg-slate-50 p-3 border border-slate-100 mt-1">
                                                                    <span className="text-xs font-semibold text-slate-500">Pilihan Edit:</span>
                                                                    <div className="flex items-center gap-2">
                                                                        <input
                                                                            type="radio"
                                                                            id="update-single"
                                                                            name="update_type"
                                                                            value="single"
                                                                            defaultChecked
                                                                            className="text-sky-500 focus:ring-sky-300 cursor-pointer"
                                                                        />
                                                                        <Label htmlFor="update-single" className="text-xs text-slate-600 cursor-pointer select-none">
                                                                            Hanya ubah hari ini saja
                                                                        </Label>
                                                                    </div>
                                                                    <div className="flex items-center gap-2">
                                                                        <input
                                                                            type="radio"
                                                                            id="update-all"
                                                                            name="update_type"
                                                                            value="all"
                                                                            className="text-sky-500 focus:ring-sky-300 cursor-pointer"
                                                                        />
                                                                        <Label htmlFor="update-all" className="text-xs text-slate-600 cursor-pointer select-none">
                                                                            Ubah semua nama perulangan
                                                                        </Label>
                                                                    </div>
                                                                </div>
                                                            )}

                                                            {/* Recurring Task Option - Only for creating new tasks */}
                                                            {editingTask === null && (
                                                                <>
                                                                    <div className="flex items-center gap-2 py-1">
                                                                        <input
                                                                            id="task-is-recurring"
                                                                            type="checkbox"
                                                                            name="is_recurring"
                                                                            value="1"
                                                                            checked={isFormRecurring}
                                                                            onChange={(e) => setIsFormRecurring(e.target.checked)}
                                                                            className="rounded border-sky-200 text-sky-400 focus:ring-sky-300 cursor-pointer"
                                                                        />
                                                                        <Label htmlFor="task-is-recurring" className="text-slate-600 cursor-pointer select-none text-xs">
                                                                            Ulangi task ini (Recurring)
                                                                        </Label>
                                                                    </div>

                                                                    {isFormRecurring && (
                                                                        <div className="grid grid-cols-2 gap-3">
                                                                            <div className="grid gap-1">
                                                                                <Label htmlFor="task-interval" className="text-slate-600 text-xs">
                                                                                    Setiap (hari)
                                                                                </Label>
                                                                                <Input
                                                                                    id="task-interval"
                                                                                    type="number"
                                                                                    name="interval_days"
                                                                                    defaultValue="1"
                                                                                    min="1"
                                                                                    className="border-sky-200 bg-white focus-visible:ring-sky-300 text-xs"
                                                                                    required
                                                                                />
                                                                            </div>
                                                                            <div className="grid gap-1">
                                                                                <Label htmlFor="task-count" className="text-slate-600 text-xs">
                                                                                    Sebanyak (kali)
                                                                                </Label>
                                                                                <Input
                                                                                    id="task-count"
                                                                                    type="number"
                                                                                    name="recurring_count"
                                                                                    defaultValue="5"
                                                                                    min="1"
                                                                                    max="100"
                                                                                    className="border-sky-200 bg-white focus-visible:ring-sky-300 text-xs"
                                                                                    required
                                                                                />
                                                                            </div>
                                                                        </div>
                                                                    )}
                                                                </>
                                                            )}

                                                            <div className="flex gap-2 justify-end mt-2">
                                                                <Button
                                                                    type="button"
                                                                    variant="outline"
                                                                    size="sm"
                                                                    className="rounded-xl border-sky-200 text-slate-500 hover:bg-sky-50"
                                                                    onClick={() => {
                                                                        setShowAddForm(false);
                                                                        setEditingTask(null);
                                                                    }}
                                                                >
                                                                    Batal
                                                                </Button>
                                                                <Button
                                                                    type="submit"
                                                                    size="sm"
                                                                    disabled={processing}
                                                                    className="rounded-xl bg-sky-400 hover:bg-sky-500"
                                                                >
                                                                    {processing && <Spinner />}
                                                                    Simpan
                                                                </Button>
                                                            </div>
                                                        </div>
                                                    );
                                                }}
                                            </Form>
                                        </DialogContent>
                                    </Dialog>
                                </div>

                                {personalTasks.length === 0 ? (
                                    <div className="rounded-2xl border border-dashed border-sky-200 bg-white py-10 text-center">
                                        <p className="text-sm text-slate-400">Belum ada task pribadi</p>
                                    </div>
                                ) : (
                                    <div className="overflow-hidden rounded-2xl border border-sky-100 bg-white shadow-sm shadow-sky-50">
                                        {personalTasks.map((task, idx) => (
                                            <div
                                                key={task.id}
                                                className={cn(
                                                    'flex items-center gap-3 px-4 py-3.5',
                                                    idx > 0 && 'border-t border-sky-50',
                                                )}
                                            >
                                                <button
                                                    onClick={() => {
                                                        if (task.status === 'pending' || task.status === 'missed') {
                                                            markComplete(task.id);
                                                        } else if (task.status === 'completed') {
                                                            revertComplete(task.id);
                                                        }
                                                    }}
                                                    className="shrink-0 transition-colors"
                                                >
                                                    {task.status === 'completed' ? (
                                                        <CheckCircle2 className="h-5 w-5 text-teal-400 hover:text-rose-400" />
                                                    ) : (
                                                        <Circle className="h-5 w-5 text-sky-300 hover:text-sky-500" />
                                                    )}
                                                </button>
                                                <p
                                                    className={cn(
                                                        'flex-1 text-sm font-medium',
                                                        task.status === 'completed' ? 'text-slate-400' : 'text-slate-700',
                                                    )}
                                                >
                                                    {task.title}
                                                </p>
                                                {task.status === 'pending' && (
                                                    <div className="flex items-center gap-2 shrink-0">
                                                        <button
                                                            onClick={() => {
                                                                setEditingTask(task);
                                                                setShowAddForm(true);
                                                            }}
                                                            className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-100 text-amber-700 transition-colors hover:bg-amber-200 cursor-pointer"
                                                            title="Edit Task"
                                                        >
                                                            <Pencil className="h-3.5 w-3.5" />
                                                        </button>
                                                        <button
                                                            onClick={() => handleDeleteClick(task)}
                                                            className="flex h-7 w-7 items-center justify-center rounded-lg bg-rose-100 text-rose-700 transition-colors hover:bg-rose-200 cursor-pointer"
                                                            title="Hapus Task"
                                                        >
                                                            <Trash2 className="h-3.5 w-3.5" />
                                                        </button>
                                                    </div>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </section>
                        )}
                    </div>

                    {/* Optional Tasks */}
                    {optionalTasks.length > 0 && (
                        <section>
                            <div className="mb-3 flex items-center gap-2">
                                <Sparkles className="h-4 w-4 text-amber-400" />
                                <h2 className="font-semibold text-slate-700">Tugas Tersedia</h2>
                                <span className="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-600">
                                    {optionalTasks.length} opsional
                                </span>
                            </div>
                            <div className="grid gap-3 sm:grid-cols-2">
                                {optionalTasks.map((task) => (
                                    <div
                                        key={task.id}
                                        className="rounded-2xl border border-amber-100 bg-amber-50/60 p-4 shadow-sm"
                                    >
                                        <p className="font-medium text-slate-700">{task.title}</p>
                                        {task.description && (
                                            <p className="mt-1 text-xs text-slate-400">{task.description}</p>
                                        )}
                                        <div className="mt-3 flex items-center gap-2">
                                            <Input
                                                type="date"
                                                defaultValue={task.scheduled_date ?? today}
                                                className="h-8 rounded-xl border-amber-200 bg-white text-xs focus-visible:ring-amber-300"
                                                id={`opt-date-${task.id}`}
                                            />
                                            <button
                                                className="flex shrink-0 items-center gap-1 rounded-xl bg-amber-200 px-3 py-1.5 text-xs font-semibold text-amber-700 transition-colors hover:bg-amber-300"
                                                onClick={() => {
                                                    const input = document.getElementById(
                                                        `opt-date-${task.id}`,
                                                    ) as HTMLInputElement;
                                                    takeOptionalTask(task.id, input?.value ?? today);
                                                }}
                                            >
                                                <Plus className="h-3.5 w-3.5" />
                                                Ambil
                                            </button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </section>
                    )}
                </div>
            </div>
            {/* Delete Confirmation Modal for Recurring Tasks */}
            <Dialog open={deletingTask !== null} onOpenChange={(open) => { if (!open) setDeletingTask(null); }}>
                <DialogContent className="max-w-md">
                    <DialogTitle>Hapus Task Pribadi</DialogTitle>
                    <p className="text-sm text-slate-500 mt-2">
                        Task ini dibuat sebagai bagian dari rangkaian perulangan. Apakah Anda ingin menghapus task ini saja atau seluruh perulangannya?
                    </p>
                    <div className="mt-4 flex flex-col gap-2">
                        <Button
                            onClick={() => {
                                if (deletingTask) {
                                    router.delete(`/planner/${deletingTask.id}`, {
                                        data: { delete_type: 'single' },
                                        preserveScroll: true,
                                        preserveState: true,
                                        onSuccess: () => setDeletingTask(null),
                                        onError: () => setDeletingTask(null)
                                    });
                                    setLocalTasks((prev) => prev.filter((t) => t.id !== deletingTask.id));
                                }
                            }}
                            className="w-full rounded-xl bg-amber-500 hover:bg-amber-600 text-white cursor-pointer"
                        >
                            Hapus Hanya Hari Ini
                        </Button>
                        <Button
                            onClick={() => {
                                if (deletingTask) {
                                    router.delete(`/planner/${deletingTask.id}`, {
                                        data: { delete_type: 'all' },
                                        preserveScroll: true,
                                        preserveState: true,
                                        onSuccess: () => setDeletingTask(null),
                                        onError: () => setDeletingTask(null)
                                    });
                                    setLocalTasks((prev) => prev.filter((t) => t.recurring_group_id !== deletingTask.recurring_group_id));
                                }
                            }}
                            className="w-full rounded-xl bg-rose-500 hover:bg-rose-600 text-white cursor-pointer"
                        >
                            Hapus Semua Rangkaian Perulangan
                        </Button>
                        <Button
                            variant="outline"
                            onClick={() => setDeletingTask(null)}
                            className="w-full rounded-xl border-slate-200 text-slate-500 hover:bg-slate-50 cursor-pointer"
                        >
                            Batal
                        </Button>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}

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