import { router, usePage } from '@inertiajs/react';
import {
    ArrowRight,
    Calendar,
    ChevronDown,
    ChevronLeft,
    Edit3,
    FileUp,
    Image as ImageIcon,
    Link as LinkIcon,
    Plus,
    Subscript,
    Trash2,
    User2,
    UserCheck,
    X,
} from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

import { updateStatus as taskUpdateStatus } from '@/actions/App/Domains/Task/Http/Controllers/TaskController';
import { TaskPriorityBadge } from '@/components/TaskPriorityBadge';
import { TaskStatusBadge } from '@/components/TaskStatusBadge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';
import { Textarea } from '@/components/ui/textarea';
import { TASK_DETAIL_STATUS_MAP } from '@/lib/status-config';
import { avatarUrl, cn, formatDateTime, formatTaskCode } from '@/lib/utils';
import { store } from '@/routes/tasks/tasks';
import type { Auth } from '@/types';
import type { Task } from '@/types/task';

import { TaskDeadlineSection } from './TaskDeadlineSection';
import { TaskDiscussionSection } from './TaskDiscussionSection';
import { TaskProofSection } from './TaskProofSection';
import { TaskReviewSection } from './TaskReviewSection';

interface TaskDetailSheetProps {
    task: Task | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onEdit: (task: Task) => void;
    onDelete: (task: Task) => void;
    onNavigate?: (taskId: string) => void;
    divisionId?: string;
    projectMembers?: { id: string; name: string; role?: string }[];
    can?: {
        manageTasks: boolean;
    };
}

export function TaskDetailSheet({
    task,
    open,
    onOpenChange,
    onEdit,
    onDelete,
    onNavigate,
    divisionId,
    projectMembers = [],
    can = { manageTasks: true },
}: TaskDetailSheetProps) {
    const { auth } = usePage<Auth>().props;
    const currentUserId = auth?.user?.id;
    const isAssignee = task?.assignees?.some(
        (user) => String(user.id) === String(currentUserId),
    );
    const isParentAssignee = task?.parentAssigneeIds?.some(
        (id) => String(id) === String(currentUserId),
    );
    // Izin berkomentar datang dari server (`TaskPolicy::discuss`), bukan
    // ditebak ulang di sini. Rumus lokal yang dulu berdiri di baris ini —
    // assignee/owner/PIC — lebih sempit dari policy, sehingga member project
    // kehilangan kolom komentar yang sebenarnya haknya, dan sekaligus tidak
    // tahu apa-apa soal project beku sehingga composer tetap tampil lalu 403.
    const canComment = task?.canDiscuss ?? false;
    // Routine work = task hasil generate template recurring. Isi, deadline, dan
    // jadwalnya ditentukan manajemen lewat template, jadi task-nya sendiri tidak
    // boleh diedit, dihapus, atau diajukan perpanjangan deadline — selaras dengan
    // TaskPolicy. Subtask-nya tetap milik pelaksana, jadi tidak ikut dikunci.
    const isRoutineWork = Boolean(task?.recurringTaskId && !task?.parentId);
    // Edit/hapus subtask tetap hak pelaksana task utama.
    const canManageSubtask = Boolean(task?.parentId && isParentAssignee);
    // Status subtask boleh digerakkan pelaksana subtask itu sendiri juga,
    // karena subtask kini bisa di-assign ke anggota di luar task utama
    // (selaras dengan TaskPolicy::updateStatus).
    const canUpdateSubtaskStatus = Boolean(
        task?.parentId && (isParentAssignee || isAssignee),
    );
    const canAdvanceStatus = task?.parentId
        ? canUpdateSubtaskStatus
        : Boolean(isAssignee);
    const currentStatus = (task?.status || 'waiting').toLowerCase();
    // Izin reopen datang dari server (`TaskPolicy::updateStatus`), bukan
    // disimpulkan ulang dari daftar anggota project di sini: daftar itu tidak
    // dikirim oleh pemanggil lintas project seperti dashboard, sehingga
    // owner/PIC yang membuka task selesai dari sana tidak pernah menemukan
    // tombolnya. Jebakan yang sama sudah dibongkar untuk `can_review`.
    const canReopen = task?.canReopen ?? false;
    // Bottom action bar is visible to anyone who can manage or is involved.
    // `canReopen` ikut membukanya: ia satu-satunya izin di bar ini yang datang
    // per task dari policy, sementara `can.manageTasks` adalah flag per halaman
    // yang di dashboard selalu false. Tanpa cabang ini, izin per task yang sudah
    // benar tetap tidak pernah sampai ke layar karena tertahan gerbang luarnya.
    const canUpdateStatus = task?.parentId
        ? canUpdateSubtaskStatus
        : can.manageTasks || isAssignee || canReopen;
    // Manager can still manually override via dropdown, but cannot advance sequentially
    const canManualOverride = can.manageTasks;
    // Hierarki dibatasi satu level: hanya task utama yang boleh punya subtask.
    // Routine work dikecualikan — isinya sudah ditentukan template recurring.
    const canCreateSubtask = Boolean(
        isAssignee && !task?.parentId && !isRoutineWork,
    );
    // Subtask boleh di-assign ke anggota konteks task (project/divisi), bukan
    // hanya pelaksana task utama. Viewer dikecualikan — server menolaknya dengan
    // 422. Fallback ke pelaksana task kalau daftar anggota tidak dikirim oleh
    // pemanggil.
    const subtaskAssigneeOptions = projectMembers.length
        ? projectMembers.filter((member) => member.role !== 'viewer')
        : (task?.assignees ?? []).map((user) => ({
              id: String(user.id),
              name: user.name,
          }));

    const [isAddingSubtask, setIsAddingSubtask] = useState(false);
    const [subtaskTitle, setSubtaskTitle] = useState('');
    const [subtaskDescription, setSubtaskDescription] = useState('');
    const [subtaskAssigneeId, setSubtaskAssigneeId] = useState('');
    const [isSubmittingSubtask, setIsSubmittingSubtask] = useState(false);

    const TASK_STATUS_FLOW = task?.parentId
        ? ['waiting', 'in_progress', 'completed']
        : ['waiting', 'in_progress', 'review', 'completed'];
    const subtasks = task?.subtasks || [];
    const finishedSubtasks = subtasks.filter((subtask) =>
        ['completed', 'cancelled'].includes(
            (subtask.status || '').toLowerCase(),
        ),
    );
    const hasSubtasks = subtasks.length > 0;
    const allSubtasksFinished =
        hasSubtasks && finishedSubtasks.length === subtasks.length;

    const currentIdx = TASK_STATUS_FLOW.indexOf(currentStatus);
    const nextStatus =
        currentStatus !== 'review' &&
        currentIdx !== -1 &&
        currentIdx < TASK_STATUS_FLOW.length - 1
            ? TASK_STATUS_FLOW[currentIdx + 1]
            : null;

    const handleUpdateTaskStatus = (statusVal: string) => {
        if (!task) {
            return;
        }

        const normalizedTarget = statusVal.toLowerCase();
        const proofRequired =
            task.requiredProofType && task.requiredProofType !== 'none';
        const hasProof = (task.proofs || []).length > 0;

        if (normalizedTarget === 'review' && proofRequired && !hasProof) {
            toast.error('Completion proof must be uploaded first');
            const el = document.getElementById('task-proof-section');

            if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                el.classList.add(
                    'ring-2',
                    'ring-destructive',
                    'rounded-xl',
                    'animate-pulse',
                );
                setTimeout(
                    () =>
                        el.classList.remove(
                            'ring-2',
                            'ring-destructive',
                            'rounded-xl',
                            'animate-pulse',
                        ),
                    2000,
                );
            }

            return;
        }

        if (['review', 'completed'].includes(normalizedTarget)) {
            const incompleteSubtasks = (task.subtasks || []).filter(
                (subtask) =>
                    !['completed', 'cancelled'].includes(
                        (subtask.status || '').toLowerCase(),
                    ),
            );

            if (incompleteSubtasks.length > 0) {
                toast.error(
                    `Tidak bisa diubah ke ${
                        normalizedTarget === 'review' ? 'Review' : 'Completed'
                    }`,
                    {
                        description: `Masih ada ${incompleteSubtasks.length} sub-tugas yang belum selesai. Selesaikan semua sub-tugas terlebih dahulu!`,
                        duration: 6000,
                    },
                );

                return;
            }
        }

        router.patch(
            taskUpdateStatus({ task: task.code }).url,
            {
                status: statusVal,
            },
            {
                preserveScroll: true,
                preserveState: true,
                onSuccess: () => {
                    toast.success('Task status updated!');
                },
                onError: (errors) => {
                    console.error(errors);
                    toast.error(
                        Object.values(errors)[0] ||
                            'Failed to update task status.',
                    );
                },
            },
        );
    };

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

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

        setIsSubmittingSubtask(true);
        router.post(
            store().url,
            {
                // Pemanggil lintas project (dashboard) tidak mengirim konteks
                // divisi, dan `division_id` wajib saat membuat task. Payload task
                // selalu membawanya (`TaskResource`), jadi dipakai sebagai
                // fallback — pola yang sama dengan `EditTaskSheet`.
                division_id: divisionId ?? task.divisionId,
                project_id: task.projectId ? task.projectId : null,
                recurring_task_id: task.recurringTaskId ?? null,
                parent_id: task.id,
                name: subtaskTitle.trim(),
                description: subtaskDescription.trim() || null,
                status: 'waiting',
                // Tenggat subtask selalu tenggat induknya — form ini sengaja
                // tidak punya kolom deadline. Induk yang sudah telat ikut
                // diwariskan apa adanya; `TaskController::validateTaskDates()`
                // mengecualikan nilai warisan dari aturan "harus di masa depan".
                due_date: task.dueDate ?? null,
                priority_level: 2,
                // Tidak lagi diisi diri sendiri diam-diam: pelaksana wajib punya
                // deadline, jadi assignee otomatis membuat subtask di bawah
                // parent tanpa deadline ditolak tanpa pengguna pernah memilih
                // siapa pun.
                assignee_ids: subtaskAssigneeId ? [subtaskAssigneeId] : [],
            },
            {
                onSuccess: () => {
                    toast.success('Subtask added');
                    setSubtaskTitle('');
                    setSubtaskDescription('');
                    setSubtaskAssigneeId('');
                    setTimeout(() => {
                        document.getElementById('subtask-title-input')?.focus();
                    }, 50);
                },
                onError: (err) => {
                    console.error(err);
                    toast.error(
                        Object.values(err)[0] || 'Failed to add subtask',
                    );
                },
                onFinish: () => setIsSubmittingSubtask(false),
                preserveScroll: true,
                preserveState: true,
            },
        );
    };

    if (!task) {
        return null;
    }

    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.parentId && onNavigate && (
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7 gap-1 px-2 text-xs font-medium hover:bg-muted"
                                    onClick={() => onNavigate(task.parentId!)}
                                >
                                    <ChevronLeft className="h-3.5 w-3.5" />
                                    Back to Parent
                                </Button>
                            )}
                            {!task.parentId && (
                                <Badge
                                    variant="secondary"
                                    className="font-normal"
                                >
                                    {task.project?.projectName || 'No Project'}
                                </Badge>
                            )}
                        </div>
                        <div className="flex items-center gap-1">
                            {(can.manageTasks || canManageSubtask) &&
                                !isRoutineWork &&
                                !['review', 'completed'].includes(
                                    currentStatus,
                                ) && (
                                    <>
                                        <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>
                                    </>
                                )}
                            {/* Tombol close manual — sheet memakai hideClose */}
                            <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
                        key={`task-content-${task.id}`}
                        className="flex flex-1 animate-in flex-col overflow-hidden duration-300 fade-in slide-in-from-right-4"
                    >
                        <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.priorityLevel}
                                    />
                                    {task.requiredProofType &&
                                        task.requiredProofType !== 'none' && (
                                            <Badge
                                                variant="outline"
                                                className="gap-1.5 border-amber-200 bg-amber-50/50 font-medium text-amber-700 shadow-none hover:bg-amber-50/50 dark:border-amber-900/30 dark:bg-amber-900/20 dark:text-amber-400"
                                            >
                                                {task.requiredProofType ===
                                                'image' ? (
                                                    <ImageIcon className="h-3 w-3" />
                                                ) : task.requiredProofType ===
                                                  'link' ? (
                                                    <LinkIcon className="h-3 w-3" />
                                                ) : (
                                                    <FileUp className="h-3 w-3" />
                                                )}
                                                Proof:{' '}
                                                {task.requiredProofType ===
                                                'image'
                                                    ? 'Image'
                                                    : task.requiredProofType ===
                                                        'link'
                                                      ? 'Link'
                                                      : 'File'}
                                            </Badge>
                                        )}
                                </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, assignee, due date,
                                    subtasks, discussions, and status actions.
                                </SheetDescription>
                                <p className="mt-1 text-xs font-medium text-muted-foreground">
                                    {formatTaskCode(task.code, task.id)}
                                </p>
                            </SheetHeader>

                            <div className="min-w-0 px-6">
                                <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-6 py-2">
                                    {/* Grid Metadata */}
                                    <div className="grid grid-cols-3 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">
                                                <User2 className="h-3.5 w-3.5" />
                                                <span>Assignee</span>
                                            </div>
                                            <div className="pl-1">
                                                {!task.assignees ||
                                                task.assignees.length === 0 ? (
                                                    <span className="text-sm text-muted-foreground italic">
                                                        Unassigned
                                                    </span>
                                                ) : (
                                                    <div className="flex max-h-30 flex-col gap-2 overflow-y-auto pr-1">
                                                        {task.assignees.map(
                                                            (assignee) => (
                                                                <div
                                                                    key={
                                                                        assignee.id
                                                                    }
                                                                    className="flex items-center gap-2"
                                                                >
                                                                    <Avatar className="h-6 w-6 shrink-0 border border-background shadow-xs">
                                                                        <AvatarImage
                                                                            src={avatarUrl(
                                                                                assignee.avatar,
                                                                            )}
                                                                            alt=""
                                                                        />
                                                                        <AvatarFallback className="bg-primary/10 text-[10px] font-bold text-primary">
                                                                            {
                                                                                assignee
                                                                                    .name?.[0]
                                                                            }
                                                                        </AvatarFallback>
                                                                    </Avatar>
                                                                    <span className="truncate text-sm font-medium text-foreground">
                                                                        {
                                                                            assignee.name
                                                                        }
                                                                    </span>
                                                                </div>
                                                            ),
                                                        )}
                                                    </div>
                                                )}
                                            </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">
                                                <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.dueDate &&
                                                            new Date(
                                                                task.dueDate,
                                                            ) < new Date() &&
                                                            task.status !==
                                                                'completed'
                                                            ? 'text-red-600 dark:text-red-400'
                                                            : 'text-foreground',
                                                    )}
                                                >
                                                    {formatDateTime(
                                                        task.dueDate,
                                                    )}
                                                </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 by</span>
                                            </div>
                                            <div className="pl-1">
                                                {task.creator ? (
                                                    <div className="flex items-center gap-2">
                                                        <Avatar className="h-6 w-6 shrink-0 border border-background shadow-xs">
                                                            <AvatarImage
                                                                src={avatarUrl(
                                                                    task.creator
                                                                        .avatar,
                                                                )}
                                                                alt=""
                                                            />
                                                            <AvatarFallback className="bg-secondary/50 text-[10px] font-bold text-secondary-foreground">
                                                                {
                                                                    task.creator
                                                                        .name?.[0]
                                                                }
                                                            </AvatarFallback>
                                                        </Avatar>
                                                        <span className="truncate text-sm font-medium text-foreground">
                                                            {task.creator.name}
                                                        </span>
                                                    </div>
                                                ) : (
                                                    <span className="text-sm text-muted-foreground italic">
                                                        —
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    </div>

                                    {/* Description Section */}
                                    <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.description ? (
                                                <p className="text-sm leading-relaxed whitespace-pre-wrap text-foreground/90">
                                                    {task.description}
                                                </p>
                                            ) : (
                                                <p className="text-sm text-muted-foreground italic">
                                                    No description provided.
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div
                                        id="task-proof-section"
                                        className="min-w-0 transition-all duration-300"
                                    >
                                        <TaskProofSection
                                            task={task}
                                            isAssignee={Boolean(isAssignee)}
                                        />
                                    </div>

                                    <Separator className="bg-border/50" />

                                    {/* Izin dari policy — jangan diturunkan
                                        ulang di sini. Baris ini dulu membaca
                                        `can.manageTasks`, flag per halaman yang
                                        di dashboard selalu false, sehingga
                                        atasan tidak pernah bisa approve dari
                                        sana. */}
                                    <TaskReviewSection
                                        task={task}
                                        canReview={task.canReview ?? false}
                                    />

                                    {(task.status === 'review' ||
                                        (task.reviews || []).length > 0) && (
                                        <Separator className="bg-border/50" />
                                    )}

                                    {/* Izin dari policy — jangan diturunkan ulang di sini. */}
                                    <TaskDeadlineSection
                                        task={task}
                                        canRequest={Boolean(
                                            task.canRequestDeadline,
                                        )}
                                        canDecide={Boolean(
                                            task.canDecideDeadline,
                                        )}
                                    />

                                    {((task.deadlineRequests || []).length >
                                        0 ||
                                        (Boolean(isAssignee) &&
                                            ![
                                                'review',
                                                'completed',
                                                'cancelled',
                                            ].includes(currentStatus))) && (
                                        <Separator className="bg-border/50" />
                                    )}

                                    {/* Subtasks Section — hanya untuk task utama; tetap tampil kalau data lama sudah punya subtask */}
                                    {(canCreateSubtask || hasSubtasks) && (
                                        <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>
                                            {!task.parentId &&
                                                currentStatus ===
                                                    'in_progress' &&
                                                allSubtasksFinished && (
                                                    <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/30 dark:text-emerald-200">
                                                        All subtasks are done or
                                                        cancelled. This task is
                                                        ready to submit for
                                                        review.
                                                    </div>
                                                )}

                                            {/* List of Subtasks */}
                                            <div className="space-y-2">
                                                {task.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]',
                                                            onNavigate &&
                                                                'group',
                                                        )}
                                                        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 ===
                                                                        'completed'
                                                                        ? 'bg-emerald-500'
                                                                        : 'bg-neutral-300',
                                                                )}
                                                            />
                                                            <span
                                                                className={cn(
                                                                    'truncate font-medium',
                                                                    sub.status ===
                                                                        'completed' &&
                                                                        'text-muted-foreground line-through',
                                                                )}
                                                            >
                                                                {sub.title}
                                                            </span>
                                                        </div>
                                                        <div className="ml-4 flex shrink-0 items-center gap-2">
                                                            <div className="flex -space-x-1">
                                                                {sub.assignees
                                                                    ?.slice(
                                                                        0,
                                                                        2,
                                                                    )
                                                                    .map(
                                                                        (u) => (
                                                                            <Avatar
                                                                                key={
                                                                                    u.id
                                                                                }
                                                                                className="h-5 w-5 border border-background"
                                                                            >
                                                                                <AvatarImage
                                                                                    src={avatarUrl(
                                                                                        u.avatar,
                                                                                    )}
                                                                                    alt={
                                                                                        u.name
                                                                                    }
                                                                                />
                                                                                <AvatarFallback className="bg-primary/10 text-[8px] text-primary">
                                                                                    {u
                                                                                        .name?.[0] ||
                                                                                        '?'}
                                                                                </AvatarFallback>
                                                                            </Avatar>
                                                                        ),
                                                                    )}
                                                            </div>
                                                        </div>
                                                    </div>
                                                ))}

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

                                            {canCreateSubtask &&
                                                ![
                                                    'review',
                                                    'completed',
                                                    'cancelled',
                                                ].includes(currentStatus) && (
                                                    <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,
                                                                    );
                                                                    // Default ke diri sendiri, tetap bisa diganti ke anggota lain
                                                                    setSubtaskAssigneeId(
                                                                        currentUserId
                                                                            ? String(
                                                                                  currentUserId,
                                                                              )
                                                                            : '',
                                                                    );
                                                                }}
                                                            >
                                                                <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="subtask-title-input"
                                                                    placeholder="Subtask title..."
                                                                    value={
                                                                        subtaskTitle
                                                                    }
                                                                    onChange={(
                                                                        e,
                                                                    ) =>
                                                                        setSubtaskTitle(
                                                                            e
                                                                                .target
                                                                                .value,
                                                                        )
                                                                    }
                                                                    className="h-9 bg-background"
                                                                    autoFocus
                                                                    required
                                                                />

                                                                <Textarea
                                                                    id="subtask-description-input"
                                                                    placeholder="Description (optional)..."
                                                                    value={
                                                                        subtaskDescription
                                                                    }
                                                                    onChange={(
                                                                        e,
                                                                    ) =>
                                                                        setSubtaskDescription(
                                                                            e
                                                                                .target
                                                                                .value,
                                                                        )
                                                                    }
                                                                    rows={2}
                                                                    maxLength={
                                                                        10000
                                                                    }
                                                                    className="resize-none bg-background text-sm"
                                                                />

                                                                <div className="space-y-1">
                                                                    <span className="text-[10px] font-semibold text-muted-foreground">
                                                                        ASSIGNEE
                                                                    </span>
                                                                    <Select
                                                                        value={
                                                                            subtaskAssigneeId
                                                                        }
                                                                        onValueChange={
                                                                            setSubtaskAssigneeId
                                                                        }
                                                                    >
                                                                        <SelectTrigger className="w-full bg-background">
                                                                            <SelectValue placeholder="Select subtask assignee" />
                                                                        </SelectTrigger>
                                                                        <SelectContent>
                                                                            {subtaskAssigneeOptions.map(
                                                                                (
                                                                                    member,
                                                                                ) => (
                                                                                    <SelectItem
                                                                                        key={
                                                                                            member.id
                                                                                        }
                                                                                        value={String(
                                                                                            member.id,
                                                                                        )}
                                                                                    >
                                                                                        {
                                                                                            member.name
                                                                                        }
                                                                                    </SelectItem>
                                                                                ),
                                                                            )}
                                                                        </SelectContent>
                                                                    </Select>
                                                                </div>

                                                                <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(
                                                                                '',
                                                                            );
                                                                            setSubtaskDescription(
                                                                                '',
                                                                            );
                                                                            setSubtaskAssigneeId(
                                                                                '',
                                                                            );
                                                                        }}
                                                                    >
                                                                        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>
                                                )}
                                            <Separator className="bg-border/50" />
                                        </div>
                                    )}

                                    <TaskDiscussionSection
                                        task={task}
                                        open={open}
                                        canComment={canComment}
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Bottom Action Bar */}
                        {canUpdateStatus && (
                            <div className="border-t bg-background px-6 py-4 backdrop-blur-md">
                                <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">
                                        {/* Current Status Info Badge */}
                                        <div
                                            className={`flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-bold tracking-wide uppercase transition-all duration-300 ${
                                                TASK_DETAIL_STATUS_MAP[
                                                    currentStatus
                                                ]?.color || 'bg-muted'
                                            }`}
                                        >
                                            <span className="relative flex h-2 w-2">
                                                {currentStatus !==
                                                    'completed' && (
                                                    <span
                                                        className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
                                                            TASK_DETAIL_STATUS_MAP[
                                                                currentStatus
                                                            ]?.ping ||
                                                            'bg-primary'
                                                        }`}
                                                    ></span>
                                                )}
                                                <span
                                                    className={`relative inline-flex h-2 w-2 rounded-full ${
                                                        TASK_DETAIL_STATUS_MAP[
                                                            currentStatus
                                                        ]?.dot || 'bg-primary'
                                                    }`}
                                                ></span>
                                            </span>
                                            {TASK_DETAIL_STATUS_MAP[
                                                currentStatus
                                            ]?.label || currentStatus}
                                        </div>

                                        <div className="mx-2 h-6 w-px bg-border/70" />

                                        {canUpdateStatus ? (
                                            <>
                                                {/* Sequential Advance Button */}
                                                {nextStatus &&
                                                canAdvanceStatus ? (
                                                    <Button
                                                        className="h-9 flex-1 rounded-lg px-4 py-2 text-xs font-bold shadow-xs transition-all active:scale-98"
                                                        onClick={() =>
                                                            handleUpdateTaskStatus(
                                                                nextStatus,
                                                            )
                                                        }
                                                    >
                                                        {task.parentId &&
                                                        nextStatus ===
                                                            'completed'
                                                            ? 'Complete Subtask'
                                                            : TASK_DETAIL_STATUS_MAP[
                                                                  currentStatus
                                                              ]?.nextLabel ||
                                                              `Ke ${nextStatus}`}
                                                        <ArrowRight className="ml-2 h-4 w-4 shrink-0" />
                                                    </Button>
                                                ) : nextStatus &&
                                                  !canAdvanceStatus ? (
                                                    <div className="flex-1 text-center text-xs font-medium text-muted-foreground select-none">
                                                        Menunggu pelaksana
                                                        memproses task
                                                    </div>
                                                ) : currentStatus ===
                                                  'completed' ? (
                                                    canReopen ? (
                                                        <Button
                                                            variant="outline"
                                                            className="h-9 flex-1 rounded-lg border-dashed px-4 py-2 text-xs font-semibold hover:bg-accent"
                                                            onClick={() =>
                                                                handleUpdateTaskStatus(
                                                                    'in_progress',
                                                                )
                                                            }
                                                        >
                                                            Reopen Task
                                                        </Button>
                                                    ) : (
                                                        <div className="flex-1 text-center text-xs font-medium text-muted-foreground select-none">
                                                            Task telah selesai
                                                        </div>
                                                    )
                                                ) : currentStatus ===
                                                  'review' ? (
                                                    <div className="flex-1 text-center text-xs font-medium text-muted-foreground select-none">
                                                        Menunggu review atasan
                                                    </div>
                                                ) : currentStatus ===
                                                  'on_hold' ? (
                                                    /* `on_hold` di luar
                                                       TASK_STATUS_FLOW, jadi
                                                       tanpa cabang ini bar
                                                       aksinya kosong dan
                                                       pelaksana tidak punya
                                                       jalan keluar — padahal
                                                       TaskPolicy::updateStatus
                                                       memang mengizinkan
                                                       assignee menggerakkan
                                                       task yang belum selesai. */
                                                    canAdvanceStatus ? (
                                                        <Button
                                                            variant="outline"
                                                            className="h-9 flex-1 rounded-lg border-dashed px-4 py-2 text-xs font-semibold hover:bg-accent"
                                                            onClick={() =>
                                                                handleUpdateTaskStatus(
                                                                    'in_progress',
                                                                )
                                                            }
                                                        >
                                                            Resume Task
                                                        </Button>
                                                    ) : (
                                                        <div className="flex-1 text-center text-xs font-medium text-muted-foreground select-none">
                                                            Task sedang ditahan
                                                        </div>
                                                    )
                                                ) : currentStatus ===
                                                  'cancelled' ? (
                                                    <div className="flex-1 text-center text-xs font-medium text-muted-foreground select-none">
                                                        Task dibatalkan
                                                    </div>
                                                ) : (
                                                    <div className="flex-1 text-center text-xs font-medium text-muted-foreground select-none">
                                                        Special Status Active
                                                    </div>
                                                )}

                                                {/* Dropdown Menu for manual override */}
                                                {currentStatus !== 'review' &&
                                                    canManualOverride && (
                                                        <DropdownMenu>
                                                            <DropdownMenuTrigger
                                                                asChild
                                                            >
                                                                <Button
                                                                    variant="ghost"
                                                                    size="icon"
                                                                    className="ml-1 h-9 w-9 rounded-lg hover:bg-accent hover:text-accent-foreground"
                                                                    aria-label="Open task status options"
                                                                >
                                                                    <ChevronDown className="h-4 w-4 opacity-60" />
                                                                </Button>
                                                            </DropdownMenuTrigger>
                                                            <DropdownMenuContent
                                                                align="end"
                                                                className="w-48 p-1"
                                                            >
                                                                <div className="px-2.5 py-2 text-[10px] font-extrabold tracking-wider text-muted-foreground uppercase select-none">
                                                                    Change Task
                                                                    Status
                                                                </div>
                                                                {Object.entries(
                                                                    TASK_DETAIL_STATUS_MAP,
                                                                )
                                                                    .filter(
                                                                        ([
                                                                            key,
                                                                        ]) => {
                                                                            // Status yang tidak boleh ada di dropdown sama sekali
                                                                            const assigneeOnlyStatuses =
                                                                                [
                                                                                    'waiting',
                                                                                    'in_progress',
                                                                                    'review',
                                                                                ];

                                                                            if (
                                                                                assigneeOnlyStatuses.includes(
                                                                                    key,
                                                                                )
                                                                            ) {
                                                                                return false;
                                                                            }

                                                                            if (
                                                                                key ===
                                                                                'completed'
                                                                            ) {
                                                                                return Boolean(
                                                                                    task.parentId,
                                                                                );
                                                                            }

                                                                            return (
                                                                                !task.parentId ||
                                                                                key !==
                                                                                    'review'
                                                                            );
                                                                        },
                                                                    )
                                                                    .map(
                                                                        ([
                                                                            key,
                                                                            cfg,
                                                                        ]) => (
                                                                            <DropdownMenuItem
                                                                                key={
                                                                                    key
                                                                                }
                                                                                onClick={() =>
                                                                                    handleUpdateTaskStatus(
                                                                                        key,
                                                                                    )
                                                                                }
                                                                                className={`flex cursor-pointer items-center justify-between rounded-md px-2.5 py-2 text-sm transition-all hover:bg-accent ${
                                                                                    currentStatus ===
                                                                                    key
                                                                                        ? 'bg-accent/60 font-semibold text-foreground'
                                                                                        : 'text-muted-foreground hover:text-foreground'
                                                                                }`}
                                                                            >
                                                                                <span>
                                                                                    {
                                                                                        cfg.label
                                                                                    }
                                                                                </span>
                                                                                {currentStatus ===
                                                                                    key && (
                                                                                    <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
                                                                                )}
                                                                            </DropdownMenuItem>
                                                                        ),
                                                                    )}
                                                            </DropdownMenuContent>
                                                        </DropdownMenu>
                                                    )}
                                            </>
                                        ) : (
                                            <div className="flex-1 text-center text-xs font-medium text-muted-foreground italic select-none">
                                                Hanya pelaksana yang dapat
                                                mengubah status
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </SheetContent>
            </Sheet>
        </>
    );
}