import { router } from '@inertiajs/react';
import {
    Calendar,
    Edit3,
    Plus,
    Subscript,
    Trash2,
    UserCheck,
    X,
} from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

import { TaskPriorityBadge } from '@/components/TaskPriorityBadge';
import { TaskStatusBadge } from '@/components/TaskStatusBadge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';
import { myTaskStatusBlockReason } from '@/lib/my-task-status';
import { cn, formatDateTime } from '@/lib/utils';
import { store, update } from '@/routes/personal-tasks';
import type { MyTask, MyTaskStatus } from '@/types/my-task';

const STATUS_FLOW = ['todo', 'in_progress', 'done'] as const;

const NEXT_STATUS_LABEL: Record<string, string> = {
    todo: 'Start Progress',
    in_progress: 'Mark as Done',
};

interface MyTaskDetailSheetProps {
    task: MyTask | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onEdit: (task: MyTask) => void;
    onDelete: (task: MyTask) => void;
    onNavigate?: (taskId: number) => void;
    /** Status task induk saat yang dibuka adalah subtask. Dipakai untuk
     *  mencerminkan penjagaan server: subtask belum bisa jalan sebelum
     *  induknya jalan. */
    parentStatus?: MyTaskStatus | null;
}

export function MyTaskDetailSheet({
    task,
    open,
    onOpenChange,
    onEdit,
    onDelete,
    onNavigate,
    parentStatus = null,
}: MyTaskDetailSheetProps) {
    const [isAddingSubtask, setIsAddingSubtask] = useState(false);
    const [subtaskTitle, setSubtaskTitle] = useState('');
    const [isSubmittingSubtask, setIsSubmittingSubtask] = useState(false);

    if (!task) {
        return null;
    }

    const currentStatus = task.status;
    const currentIdx = STATUS_FLOW.indexOf(currentStatus);
    const nextStatus =
        currentIdx !== -1 && currentIdx < STATUS_FLOW.length - 1
            ? STATUS_FLOW[currentIdx + 1]
            : null;
    const subtasks = task.subtasks ?? [];
    const finishedSubtasks = subtasks.filter((s) => s.status === 'done');
    const hasSubtasks = subtasks.length > 0;
    const openSubtaskCount = subtasks.length - finishedSubtasks.length;

    const blockedReason = nextStatus
        ? myTaskStatusBlockReason(nextStatus, {
              isSubtask: task.parent_id !== null,
              parentStatus,
              hasDueDate: task.due_date !== null,
              openSubtaskCount,
          })
        : null;

    const handleChangeStatus = (status: string) => {
        router.put(
            update(task.id).url,
            {
                title: task.title,
                note: task.note,
                status,
                priority_level: task.priority_level,
                due_date: task.due_date,
            },
            {
                preserveScroll: true,
                onSuccess: () => toast.success('Task status updated'),
                onError: () => toast.error('Failed to update task status'),
            },
        );
    };

    const handleAddSubtask = (event: React.FormEvent) => {
        event.preventDefault();

        if (!subtaskTitle.trim()) {
            return;
        }

        setIsSubmittingSubtask(true);
        router.post(
            store().url,
            {
                title: subtaskTitle.trim(),
                parent_id: task.id,
                status: 'todo',
                priority_level: 2,
            },
            {
                preserveScroll: true,
                preserveState: true,
                onSuccess: () => {
                    toast.success('Subtask added');
                    setSubtaskTitle('');
                    setTimeout(() => {
                        document
                            .getElementById('my-subtask-title-input')
                            ?.focus();
                    }, 50);
                },
                onError: (errors) => {
                    toast.error(
                        Object.values(errors)[0] ?? 'Failed to add subtask',
                    );
                },
                onFinish: () => setIsSubmittingSubtask(false),
            },
        );
    };

    return (
        <Sheet open={open} onOpenChange={onOpenChange}>
            <SheetContent
                className="flex h-full w-full flex-col gap-0 bg-card p-0 sm:max-w-3xl"
                hideClose
            >
                {/* Fixed Top Bar */}
                <div className="flex items-center justify-between border-b bg-muted/30 px-6 py-3">
                    <div className="flex items-center gap-2">
                        {task.parent_id && onNavigate && (
                            <Button
                                variant="ghost"
                                size="sm"
                                className="h-7 gap-1 px-2 text-xs font-medium hover:bg-muted"
                                onClick={() => onNavigate(task.parent_id!)}
                            >
                                Back to Parent
                            </Button>
                        )}
                    </div>
                    <div className="flex items-center gap-1">
                        <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 rounded-full"
                            onClick={() => onEdit(task)}
                            aria-label={`Edit task ${task.title}`}
                        >
                            <Edit3 className="h-4 w-4 text-muted-foreground" />
                        </Button>
                        <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 rounded-full hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
                            onClick={() => onDelete(task)}
                            aria-label={`Delete task ${task.title}`}
                        >
                            <Trash2 className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-red-600" />
                        </Button>
                        <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 rounded-full border"
                            onClick={() => onOpenChange(false)}
                            aria-label="Close task details"
                        >
                            <X className="h-4 w-4 text-muted-foreground" />
                        </Button>
                    </div>
                </div>

                <div className="flex flex-1 flex-col overflow-hidden">
                    <div className="flex-1 overflow-y-auto">
                        <SheetHeader className="p-6 pb-4 text-left">
                            <div className="mb-2 flex flex-wrap items-center gap-2">
                                <TaskStatusBadge status={task.status} />
                                <TaskPriorityBadge
                                    level={task.priority_level}
                                />
                            </div>
                            <SheetTitle className="text-2xl leading-tight font-bold tracking-tight text-foreground selection:bg-primary/20">
                                {task.title}
                            </SheetTitle>
                            <SheetDescription className="sr-only">
                                View task details, deadline, subtasks, and
                                status actions.
                            </SheetDescription>
                        </SheetHeader>

                        <div className="min-w-0 px-6">
                            <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-6 py-2">
                                {/* Metadata */}
                                <div className="grid grid-cols-2 gap-3 rounded-xl border bg-muted/20 p-4">
                                    <div className="space-y-1.5">
                                        <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                                            <Calendar className="h-3.5 w-3.5" />
                                            <span>Due Date</span>
                                        </div>
                                        <div className="flex items-center gap-1.5 pl-1 text-sm">
                                            <span
                                                className={cn(
                                                    'font-medium',
                                                    task.is_overdue
                                                        ? 'text-red-600 dark:text-red-400'
                                                        : 'text-foreground',
                                                )}
                                            >
                                                {formatDateTime(
                                                    task.due_date,
                                                    'No due date',
                                                )}
                                            </span>
                                        </div>
                                    </div>

                                    <div className="space-y-1.5 border-l pl-3">
                                        <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                                            <UserCheck className="h-3.5 w-3.5" />
                                            <span>Created</span>
                                        </div>
                                        <div className="pl-1 text-sm font-medium text-foreground">
                                            {formatDateTime(task.created_at)}
                                        </div>
                                    </div>
                                </div>

                                {/* Description */}
                                <div className="space-y-2.5">
                                    <div className="flex items-center justify-between">
                                        <h4 className="text-xs font-bold tracking-widest text-muted-foreground uppercase">
                                            Description
                                        </h4>
                                    </div>
                                    <div className="min-h-20 rounded-xl bg-muted/30 p-4">
                                        {task.note ? (
                                            <p className="text-sm leading-relaxed whitespace-pre-wrap text-foreground/90">
                                                {task.note}
                                            </p>
                                        ) : (
                                            <p className="text-sm text-muted-foreground italic">
                                                No additional notes.
                                            </p>
                                        )}
                                    </div>
                                </div>

                                {/* Subtasks — hanya untuk root task */}
                                {!task.parent_id && (
                                    <>
                                        <Separator className="bg-border/50" />
                                        <div className="space-y-4">
                                            <div className="flex items-center justify-between">
                                                <div className="flex items-center gap-2">
                                                    <Subscript className="h-4 w-4 rotate-180 transform text-muted-foreground" />
                                                    <h4 className="text-sm font-semibold tracking-tight">
                                                        Subtasks
                                                    </h4>
                                                </div>
                                                <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-bold text-muted-foreground">
                                                    {hasSubtasks
                                                        ? `${finishedSubtasks.length}/${subtasks.length}`
                                                        : 0}
                                                </span>
                                            </div>

                                            <div className="space-y-2">
                                                {subtasks.map((sub) => (
                                                    <div
                                                        key={sub.id}
                                                        className={cn(
                                                            'flex cursor-pointer items-center justify-between rounded-lg border border-border/50 bg-background p-3 text-sm transition-all duration-200 hover:border-border hover:bg-muted/50 hover:shadow-sm active:scale-[0.99]',
                                                        )}
                                                        onClick={() =>
                                                            onNavigate?.(sub.id)
                                                        }
                                                    >
                                                        <div className="flex min-w-0 items-center gap-3">
                                                            <div
                                                                className={cn(
                                                                    'h-2 w-2 shrink-0 rounded-full',
                                                                    sub.status ===
                                                                        'done'
                                                                        ? 'bg-emerald-500'
                                                                        : 'bg-neutral-300',
                                                                )}
                                                            />
                                                            <span
                                                                className={cn(
                                                                    'truncate font-medium',
                                                                    sub.status ===
                                                                        'done' &&
                                                                        'text-muted-foreground line-through',
                                                                )}
                                                            >
                                                                {sub.title}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ))}

                                                {!hasSubtasks &&
                                                    !isAddingSubtask && (
                                                        <p className="rounded-lg border border-dashed py-4 text-center text-xs text-muted-foreground italic">
                                                            No subtasks yet.
                                                        </p>
                                                    )}
                                            </div>

                                            <div className="mt-4">
                                                {!isAddingSubtask ? (
                                                    <Button
                                                        variant="ghost"
                                                        size="sm"
                                                        className="h-8 w-full border border-dashed text-xs text-muted-foreground hover:bg-muted"
                                                        onClick={() =>
                                                            setIsAddingSubtask(
                                                                true,
                                                            )
                                                        }
                                                    >
                                                        <Plus className="mr-1.5 h-3 w-3" />
                                                        Add Subtask
                                                    </Button>
                                                ) : (
                                                    <form
                                                        onSubmit={
                                                            handleAddSubtask
                                                        }
                                                        className="space-y-3 rounded-xl border bg-muted/20 p-3"
                                                    >
                                                        <Input
                                                            id="my-subtask-title-input"
                                                            placeholder="Subtask title..."
                                                            value={subtaskTitle}
                                                            onChange={(e) =>
                                                                setSubtaskTitle(
                                                                    e.target
                                                                        .value,
                                                                )
                                                            }
                                                            className="h-9 bg-background"
                                                            autoFocus
                                                            required
                                                        />
                                                        <div className="flex items-center justify-end gap-2 pt-1">
                                                            <Button
                                                                type="button"
                                                                variant="ghost"
                                                                size="sm"
                                                                className="h-8 text-xs"
                                                                onClick={() => {
                                                                    setIsAddingSubtask(
                                                                        false,
                                                                    );
                                                                    setSubtaskTitle(
                                                                        '',
                                                                    );
                                                                }}
                                                            >
                                                                Cancel
                                                            </Button>
                                                            <Button
                                                                type="submit"
                                                                size="sm"
                                                                className="h-8 px-4 text-xs font-semibold"
                                                                disabled={
                                                                    isSubmittingSubtask
                                                                }
                                                            >
                                                                {isSubmittingSubtask
                                                                    ? 'Saving...'
                                                                    : 'Save Subtask'}
                                                            </Button>
                                                        </div>
                                                    </form>
                                                )}
                                            </div>
                                        </div>
                                    </>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Bottom Action Bar */}
                    <div className="border-t bg-background px-6 py-4">
                        {blockedReason && (
                            <p className="mb-3 text-xs text-muted-foreground">
                                {blockedReason}
                            </p>
                        )}
                        <div className="flex items-center gap-3">
                            <div className="flex flex-1 items-center rounded-xl border bg-background/50 p-1.5 shadow-xs">
                                {nextStatus ? (
                                    <Button
                                        className="h-9 flex-1 rounded-lg px-4 py-2 text-xs font-bold shadow-xs"
                                        disabled={blockedReason !== null}
                                        onClick={() =>
                                            handleChangeStatus(nextStatus)
                                        }
                                    >
                                        {NEXT_STATUS_LABEL[currentStatus]}
                                    </Button>
                                ) : (
                                    <Button
                                        variant="outline"
                                        className="h-9 flex-1 rounded-lg border-dashed px-4 py-2 text-xs font-semibold hover:bg-accent"
                                        onClick={() =>
                                            handleChangeStatus('todo')
                                        }
                                    >
                                        Reopen Task
                                    </Button>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </SheetContent>
        </Sheet>
    );
}