import { Link, router } from '@inertiajs/react';
import {
    AlertCircle,
    CalendarClock,
    CheckCircle2,
    CheckSquare,
    ChevronLeft,
    ChevronRight,
    MoreHorizontal,
    Search,
    SlidersHorizontal,
    UserRound,
} from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

import { TaskPriorityBadge } from '@/components/TaskPriorityBadge';
import { CreateTaskSheet } from '@/components/tasks/CreateTaskSheet';
import { DeleteTaskDialog } from '@/components/tasks/DeleteTaskDialog';
import { EditTaskSheet } from '@/components/tasks/EditTaskSheet';
import { TaskDetailSheet } from '@/components/tasks/TaskDetailSheet';
import { TaskStatusBadge } from '@/components/TaskStatusBadge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Button, buttonVariants } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import {
    Pagination,
    PaginationContent,
    PaginationItem,
} from '@/components/ui/pagination';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { cn, formatDate } from '@/lib/utils';

import type {
    PaginationLink as PaginationLinkData,
    ProjectTaskSummary,
} from '@/types/project';
import type { Task } from '@/types/task';
import { ProjectTasksCardList } from './ProjectTasksCardList';

interface ProjectTasksProps {
    tasks: Task[];
    paginationLinks: PaginationLinkData[];
    summary: ProjectTaskSummary;
    projectUrl: string;
    allProjects?: {
        id: string;
        name: string;
        divisionId: string;
        members: { id: string; name: string }[];
    }[];
    can?: {
        manageTasks: boolean;
    };
    currentUserId?: string;
    title?: string;
    /**
     * Sort awal saat URL belum menyertakan parameter `sort`. Default 'newest'
     * (perilaku halaman project). Dashboard memakai 'due_soonest' agar konsisten
     * dengan default sort yang diterapkan server.
     */
    defaultSort?: string;
}

const ONE_DAY_IN_MS = 1000 * 60 * 60 * 24;

type DeadlineFilter =
    | 'all'
    | 'overdue'
    | 'today'
    | 'due_soon'
    | 'this_week'
    | 'no_due_date';

function getLocalDayTimestamp(dateString: string) {
    const date = new Date(dateString);

    if (Number.isNaN(date.getTime())) {
        return null;
    }

    return new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
    ).getTime();
}

function getDaysUntilDue(dueDate: string) {
    const dueDay = getLocalDayTimestamp(dueDate);

    if (dueDay === null) {
        return null;
    }

    const now = new Date();
    const today = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
    ).getTime();

    return Math.round((dueDay - today) / ONE_DAY_IN_MS);
}

export function getDeadlineState(task: Task) {
    if (!task.dueDate) {
        return {
            filterValue: 'no_due_date',
            label: 'No due date',
            className: 'text-muted-foreground',
            rowClassName: '',
        };
    }

    const daysUntilDue = getDaysUntilDue(task.dueDate);

    if (daysUntilDue === null) {
        return {
            filterValue: 'all',
            label: formatDate(task.dueDate, task.dueDate),
            className: 'text-muted-foreground',
            rowClassName: '',
        };
    }

    if (['completed', 'cancelled'].includes(task.status)) {
        return {
            filterValue: 'all',
            label: formatDate(task.dueDate),
            className: 'text-muted-foreground',
            rowClassName: '',
        };
    }

    if (daysUntilDue < 0) {
        return {
            filterValue: 'overdue',
            label: `Overdue: ${formatDate(task.dueDate)}`,
            className: 'font-semibold text-red-600 dark:text-red-400',
            rowClassName:
                'border-l-4 border-l-red-500 bg-red-50/40 dark:bg-red-500/5',
        };
    }

    if (daysUntilDue === 0) {
        return {
            filterValue: 'today',
            label: 'Due today',
            className: 'font-semibold text-amber-700 dark:text-amber-400',
            rowClassName:
                'border-l-4 border-l-amber-500 bg-amber-50/50 dark:bg-amber-500/5',
        };
    }

    if (daysUntilDue <= 7) {
        return {
            filterValue: 'this_week',
            label: `Due in ${daysUntilDue}d`,
            className: 'font-semibold text-amber-700 dark:text-amber-400',
            rowClassName:
                'border-l-4 border-l-amber-500 bg-amber-50/50 dark:bg-amber-500/5',
        };
    }

    return {
        filterValue: 'all',
        label: formatDate(task.dueDate),
        className: 'text-muted-foreground',
        rowClassName: '',
    };
}

function readInitialFilters(defaultSort = 'newest') {
    if (typeof window === 'undefined') {
        return {
            search: '',
            status: 'all',
            deadline: 'all' as DeadlineFilter,
            mine: false,
            sort: defaultSort,
        };
    }

    const params = new URLSearchParams(window.location.search);

    return {
        search: params.get('search') ?? '',
        status: params.get('status') ?? 'all',
        deadline: (params.get('deadline') as DeadlineFilter) ?? 'all',
        mine: params.get('mine') === '1',
        sort: params.get('sort') ?? defaultSort,
    };
}

export function ProjectTasks({
    tasks,
    paginationLinks,
    summary,
    projectUrl,
    allProjects = [],
    can = { manageTasks: true },
    currentUserId,
    title = 'Project Tasks',
    defaultSort = 'newest',
}: ProjectTasksProps) {
    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
    const [viewingTaskId, setViewingTaskId] = useState<string | null>(null);
    const [editingTask, setEditingTask] = useState<Task | null>(null);
    const [deletingTask, setDeletingTask] = useState<Task | null>(null);

    // Filter & sort state — disinkronkan ke server via query string (debounced),
    // bukan diproses di client. Diinisialisasi dari URL (lazy) agar konsisten
    // setelah reload / polling.
    const [searchQuery, setSearchQuery] = useState(
        () => readInitialFilters(defaultSort).search,
    );
    const [statusFilter, setStatusFilter] = useState(
        () => readInitialFilters(defaultSort).status,
    );
    const [deadlineFilter, setDeadlineFilter] = useState<DeadlineFilter>(
        () => readInitialFilters(defaultSort).deadline,
    );
    const [showMyTasks, setShowMyTasks] = useState(
        () => readInitialFilters(defaultSort).mine,
    );
    const [sortBy, setSortBy] = useState(
        () => readInitialFilters(defaultSort).sort,
    );
    const [visibleColumns, setVisibleColumns] = useState({
        no: true,
        name: true,
        assignee: true,
        priority: true,
        dueDate: true,
        status: true,
    });

    const isInitialFilterSync = useRef(true);

    useEffect(() => {
        if (isInitialFilterSync.current) {
            isInitialFilterSync.current = false;

            return;
        }

        const request = window.setTimeout(() => {
            router.get(
                projectUrl,
                {
                    tab: 'tasks',
                    search: searchQuery || undefined,
                    status: statusFilter !== 'all' ? statusFilter : undefined,
                    deadline:
                        deadlineFilter !== 'all' ? deadlineFilter : undefined,
                    mine: showMyTasks ? '1' : undefined,
                    sort: sortBy !== defaultSort ? sortBy : undefined,
                },
                {
                    only: ['tasks', 'taskSummary'],
                    preserveScroll: true,
                    preserveState: true,
                    replace: true,
                },
            );
        }, 300);

        return () => window.clearTimeout(request);
    }, [
        searchQuery,
        statusFilter,
        deadlineFilter,
        showMyTasks,
        sortBy,
        projectUrl,
        defaultSort,
    ]);

    // Daftar task sudah difilter, disortir, dan dipaginate di server.
    const paginatedTasks = tasks;

    // Subtask ter-nest di setiap root task (di-load per root dari server), jadi
    // pencarian task yang sedang dilihat harus mencakup root DAN subtask-nya —
    // agar detail subtask bisa dibuka saat diklik dari dalam detail sheet parent.
    const viewingTask = viewingTaskId
        ? (tasks.find((t) => t.id === viewingTaskId) ??
          tasks
              .flatMap((t) => t.subtasks ?? [])
              .find((sub) => sub.id === viewingTaskId) ??
          null)
        : null;

    const hasActiveFilters =
        searchQuery.trim() !== '' ||
        statusFilter !== 'all' ||
        deadlineFilter !== 'all' ||
        showMyTasks;

    // Badge count dihitung di server (dari seluruh root task project).
    const myOpenTasksCount = summary.my_open;
    const dueSoonTasksCount = summary.due_soon;
    const overdueTasksCount = summary.overdue;

    const clearFilters = () => {
        setSearchQuery('');
        setStatusFilter('all');
        setDeadlineFilter('all');
        setShowMyTasks(false);
    };

    return (
        <section className="space-y-4">
            <div className="flex flex-col gap-4">
                <h2 className="text-lg font-bold text-foreground">{title}</h2>

                <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div className="relative flex-1">
                        <Search
                            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground"
                            size={16}
                        />
                        <Input
                            placeholder="Search tasks..."
                            className="h-9 rounded-lg pl-9"
                            value={searchQuery}
                            onChange={(e) => {
                                setSearchQuery(e.target.value);
                            }}
                        />
                    </div>

                    <div className="flex items-center gap-2">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                    variant="outline"
                                    className="h-9 gap-2 rounded-lg"
                                >
                                    <SlidersHorizontal size={16} />
                                    <span className="hidden sm:inline">
                                        Filters
                                    </span>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end" className="w-56">
                                <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                    Filter by Status
                                </DropdownMenuLabel>
                                <DropdownMenuRadioGroup
                                    value={statusFilter}
                                    onValueChange={(value) => {
                                        setStatusFilter(value);
                                    }}
                                >
                                    <DropdownMenuRadioItem value="all">
                                        All Status
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="waiting">
                                        Pending
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="in_progress">
                                        In Progress
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="review">
                                        Review
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="completed">
                                        Completed
                                    </DropdownMenuRadioItem>
                                </DropdownMenuRadioGroup>

                                <DropdownMenuSeparator />

                                <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                    Sort by
                                </DropdownMenuLabel>
                                <DropdownMenuRadioGroup
                                    value={sortBy}
                                    onValueChange={(value) => {
                                        setSortBy(value);
                                    }}
                                >
                                    <DropdownMenuRadioItem value="newest">
                                        Newest
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="oldest">
                                        Oldest
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="priority">
                                        Priority
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="due_soonest">
                                        Due Soonest
                                    </DropdownMenuRadioItem>
                                </DropdownMenuRadioGroup>

                                <DropdownMenuSeparator />

                                <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                    Filter by Deadline
                                </DropdownMenuLabel>
                                <DropdownMenuRadioGroup
                                    value={deadlineFilter}
                                    onValueChange={(value) => {
                                        setDeadlineFilter(
                                            value as DeadlineFilter,
                                        );
                                    }}
                                >
                                    <DropdownMenuRadioItem value="all">
                                        All Deadlines
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="overdue">
                                        Overdue
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="today">
                                        Due Today
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="due_soon">
                                        Due Soon
                                    </DropdownMenuRadioItem>
                                    <DropdownMenuRadioItem value="no_due_date">
                                        No Due Date
                                    </DropdownMenuRadioItem>
                                </DropdownMenuRadioGroup>

                                <DropdownMenuSeparator />

                                <DropdownMenuSub>
                                    <DropdownMenuSubTrigger>
                                        Display Columns
                                    </DropdownMenuSubTrigger>
                                    <DropdownMenuSubContent className="w-48">
                                        <DropdownMenuCheckboxItem
                                            checked={visibleColumns.no}
                                            onCheckedChange={(checked) =>
                                                setVisibleColumns((prev) => ({
                                                    ...prev,
                                                    no: checked,
                                                }))
                                            }
                                        >
                                            Code
                                        </DropdownMenuCheckboxItem>
                                        <DropdownMenuCheckboxItem
                                            checked={visibleColumns.name}
                                            onCheckedChange={(checked) =>
                                                setVisibleColumns((prev) => ({
                                                    ...prev,
                                                    name: checked,
                                                }))
                                            }
                                        >
                                            Task Name
                                        </DropdownMenuCheckboxItem>
                                        <DropdownMenuCheckboxItem
                                            checked={visibleColumns.assignee}
                                            onCheckedChange={(checked) =>
                                                setVisibleColumns((prev) => ({
                                                    ...prev,
                                                    assignee: checked,
                                                }))
                                            }
                                        >
                                            Assignee
                                        </DropdownMenuCheckboxItem>
                                        <DropdownMenuCheckboxItem
                                            checked={visibleColumns.priority}
                                            onCheckedChange={(checked) =>
                                                setVisibleColumns((prev) => ({
                                                    ...prev,
                                                    priority: checked,
                                                }))
                                            }
                                        >
                                            Priority
                                        </DropdownMenuCheckboxItem>
                                        <DropdownMenuCheckboxItem
                                            checked={visibleColumns.dueDate}
                                            onCheckedChange={(checked) =>
                                                setVisibleColumns((prev) => ({
                                                    ...prev,
                                                    dueDate: checked,
                                                }))
                                            }
                                        >
                                            Due Date
                                        </DropdownMenuCheckboxItem>
                                        <DropdownMenuCheckboxItem
                                            checked={visibleColumns.status}
                                            onCheckedChange={(checked) =>
                                                setVisibleColumns((prev) => ({
                                                    ...prev,
                                                    status: checked,
                                                }))
                                            }
                                        >
                                            Status
                                        </DropdownMenuCheckboxItem>
                                    </DropdownMenuSubContent>
                                </DropdownMenuSub>
                            </DropdownMenuContent>
                        </DropdownMenu>

                        {can.manageTasks && (
                            <Button
                                variant="default"
                                size="sm"
                                onClick={() => setIsCreateDialogOpen(true)}
                                className="h-9 rounded-lg font-semibold"
                            >
                                <CheckSquare className="mr-2 h-4 w-4" /> New
                                Task
                            </Button>
                        )}
                    </div>
                </div>

                <div className="flex flex-wrap items-center gap-2">
                    <Button
                        type="button"
                        variant={showMyTasks ? 'default' : 'outline'}
                        size="sm"
                        className="h-8 gap-2 rounded-lg text-xs"
                        disabled={!currentUserId}
                        onClick={() => {
                            setShowMyTasks((value) => !value);
                        }}
                    >
                        <UserRound size={14} />
                        My Tasks
                        <span className="font-mono">{myOpenTasksCount}</span>
                    </Button>
                    <Button
                        type="button"
                        variant={
                            deadlineFilter === 'due_soon'
                                ? 'default'
                                : 'outline'
                        }
                        size="sm"
                        className="h-8 gap-2 rounded-lg text-xs"
                        onClick={() => {
                            setDeadlineFilter((value) =>
                                value === 'due_soon' ? 'all' : 'due_soon',
                            );
                        }}
                    >
                        <CalendarClock size={14} />
                        Due Soon
                        <span className="font-mono">{dueSoonTasksCount}</span>
                    </Button>
                    <Button
                        type="button"
                        variant={
                            deadlineFilter === 'overdue'
                                ? 'destructive'
                                : 'outline'
                        }
                        size="sm"
                        className="h-8 gap-2 rounded-lg text-xs"
                        onClick={() => {
                            setDeadlineFilter((value) =>
                                value === 'overdue' ? 'all' : 'overdue',
                            );
                        }}
                    >
                        <AlertCircle size={14} />
                        Overdue
                        <span className="font-mono">{overdueTasksCount}</span>
                    </Button>
                </div>
            </div>

            <div className="overflow-hidden rounded-xl border bg-background">
                {paginatedTasks && paginatedTasks.length > 0 ? (
                    <>
                        <div className="md:hidden">
                            <ProjectTasksCardList
                                tasks={paginatedTasks}
                                onViewTask={setViewingTaskId}
                            />
                        </div>
                        <Table className="hidden md:table">
                            <TableHeader>
                                <TableRow className="hover:bg-transparent">
                                    {visibleColumns.no && (
                                        <TableHead className="w-28">
                                            Code
                                        </TableHead>
                                    )}
                                    {visibleColumns.name && (
                                        <TableHead>Task Title</TableHead>
                                    )}
                                    {visibleColumns.status && (
                                        <TableHead>Status</TableHead>
                                    )}
                                    {visibleColumns.priority && (
                                        <TableHead>Priority</TableHead>
                                    )}
                                    {visibleColumns.assignee && (
                                        <TableHead>Assignee</TableHead>
                                    )}
                                    {visibleColumns.dueDate && (
                                        <TableHead>Due Date</TableHead>
                                    )}
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {paginatedTasks.map((task) => {
                                    const deadlineState =
                                        getDeadlineState(task);

                                    return (
                                        <TableRow
                                            key={task.id}
                                            className={cn(
                                                'group cursor-pointer',
                                                deadlineState.rowClassName,
                                            )}
                                            onClick={() =>
                                                setViewingTaskId(task.id)
                                            }
                                        >
                                            {visibleColumns.no && (
                                                <TableCell className="font-mono text-xs font-medium text-muted-foreground">
                                                    {task.code || '-'}
                                                </TableCell>
                                            )}
                                            {visibleColumns.name && (
                                                <TableCell className="font-medium">
                                                    <div>
                                                        <div
                                                            className={
                                                                task.status ===
                                                                'completed'
                                                                    ? 'text-muted-foreground line-through'
                                                                    : ''
                                                            }
                                                        >
                                                            {task.title}
                                                        </div>
                                                    </div>
                                                </TableCell>
                                            )}
                                            {visibleColumns.status && (
                                                <TableCell>
                                                    <TaskStatusBadge
                                                        status={task.status}
                                                    />
                                                </TableCell>
                                            )}
                                            {visibleColumns.priority && (
                                                <TableCell>
                                                    <TaskPriorityBadge
                                                        level={
                                                            task.priorityLevel
                                                        }
                                                    />
                                                </TableCell>
                                            )}
                                            {visibleColumns.assignee && (
                                                <TableCell>
                                                    <div className="flex items-center gap-2">
                                                        {!task.assignees ||
                                                        task.assignees
                                                            .length === 0 ? (
                                                            <span className="text-xs text-muted-foreground italic">
                                                                Unassigned
                                                            </span>
                                                        ) : (
                                                            <>
                                                                <div className="flex -space-x-1.5 overflow-hidden">
                                                                    {task.assignees
                                                                        .slice(
                                                                            0,
                                                                            3,
                                                                        )
                                                                        .map(
                                                                            (
                                                                                u,
                                                                                idx,
                                                                            ) => (
                                                                                <Avatar
                                                                                    key={
                                                                                        idx
                                                                                    }
                                                                                    className="h-5 w-5 ring-1 ring-background"
                                                                                >
                                                                                    <AvatarFallback className="text-[8px]">
                                                                                        {u.name?.charAt(
                                                                                            0,
                                                                                        ) ||
                                                                                            '?'}
                                                                                    </AvatarFallback>
                                                                                </Avatar>
                                                                            ),
                                                                        )}
                                                                    {task
                                                                        .assignees
                                                                        .length >
                                                                        3 && (
                                                                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[8px] font-bold text-muted-foreground ring-1 ring-background">
                                                                            +
                                                                            {task
                                                                                .assignees
                                                                                .length -
                                                                                3}
                                                                        </div>
                                                                    )}
                                                                </div>
                                                                <span className="max-w-25 truncate text-xs text-muted-foreground">
                                                                    {task
                                                                        .assignees
                                                                        .length ===
                                                                    1
                                                                        ? task
                                                                              .assignees[0]
                                                                              .name
                                                                        : `${task.assignees.length} Pelaksana`}
                                                                </span>
                                                            </>
                                                        )}
                                                    </div>
                                                </TableCell>
                                            )}
                                            {visibleColumns.dueDate && (
                                                <TableCell>
                                                    <span
                                                        className={cn(
                                                            'text-xs',
                                                            deadlineState.className,
                                                        )}
                                                    >
                                                        {deadlineState.label}
                                                    </span>
                                                </TableCell>
                                            )}
                                        </TableRow>
                                    );
                                })}
                            </TableBody>
                        </Table>

                        {paginationLinks.length > 3 && (
                            <div className="border-t p-4">
                                <Pagination>
                                    <PaginationContent className="flex-wrap">
                                        {paginationLinks.map((link, index) => {
                                            const isPrevious = index === 0;
                                            const isNext =
                                                index ===
                                                paginationLinks.length - 1;
                                            const isEllipsis =
                                                link.label.includes('...');
                                            const label = link.label
                                                .replace(/&laquo;|&raquo;/g, '')
                                                .trim();

                                            const className = cn(
                                                buttonVariants({
                                                    variant: link.active
                                                        ? 'outline'
                                                        : 'ghost',
                                                    size:
                                                        isPrevious || isNext
                                                            ? 'default'
                                                            : 'icon',
                                                }),
                                                (isPrevious || isNext) &&
                                                    'gap-1 px-2.5',
                                                link.url === null &&
                                                    'pointer-events-none opacity-50',
                                            );

                                            const content = isPrevious ? (
                                                <>
                                                    <ChevronLeft size={16} />
                                                    <span className="hidden sm:inline">
                                                        Previous
                                                    </span>
                                                </>
                                            ) : isNext ? (
                                                <>
                                                    <span className="hidden sm:inline">
                                                        Next
                                                    </span>
                                                    <ChevronRight size={16} />
                                                </>
                                            ) : (
                                                label
                                            );

                                            if (isEllipsis) {
                                                return (
                                                    <PaginationItem key={index}>
                                                        <span className="flex size-9 items-center justify-center">
                                                            <MoreHorizontal
                                                                size={16}
                                                            />
                                                        </span>
                                                    </PaginationItem>
                                                );
                                            }

                                            return (
                                                <PaginationItem key={index}>
                                                    {link.url !== null ? (
                                                        <Link
                                                            href={link.url}
                                                            only={[
                                                                'tasks',
                                                                'taskSummary',
                                                            ]}
                                                            preserveScroll
                                                            preserveState
                                                            className={
                                                                className
                                                            }
                                                            aria-current={
                                                                link.active
                                                                    ? 'page'
                                                                    : undefined
                                                            }
                                                        >
                                                            {content}
                                                        </Link>
                                                    ) : (
                                                        <span
                                                            className={
                                                                className
                                                            }
                                                        >
                                                            {content}
                                                        </span>
                                                    )}
                                                </PaginationItem>
                                            );
                                        })}
                                    </PaginationContent>
                                </Pagination>
                            </div>
                        )}
                    </>
                ) : (
                    <div className="flex flex-col items-center justify-center py-12 text-center text-muted-foreground">
                        <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                            <CheckCircle2 className="h-6 w-6" />
                        </div>
                        {hasActiveFilters ? (
                            <>
                                <p>No tasks match your search or filters.</p>
                                <Button
                                    variant="link"
                                    size="sm"
                                    onClick={clearFilters}
                                >
                                    Clear filters
                                </Button>
                            </>
                        ) : (
                            <>
                                <p>No tasks found for this project yet.</p>
                                {can.manageTasks && (
                                    <Button
                                        variant="link"
                                        size="sm"
                                        onClick={() =>
                                            setIsCreateDialogOpen(true)
                                        }
                                    >
                                        Create the first task
                                    </Button>
                                )}
                            </>
                        )}
                    </div>
                )}
            </div>

            <TaskDetailSheet
                task={viewingTask}
                divisionId={
                    allProjects.find((p) => p.id === viewingTask?.projectId)
                        ?.divisionId
                }
                projectMembers={
                    allProjects.find((p) => p.id === viewingTask?.projectId)
                        ?.members
                }
                open={!!viewingTaskId}
                onOpenChange={(open) => !open && setViewingTaskId(null)}
                onEdit={(task) => {
                    setViewingTaskId(null);
                    setEditingTask(task);
                }}
                onDelete={(task) => {
                    setViewingTaskId(null);
                    setDeletingTask(task);
                }}
                onNavigate={(id) => setViewingTaskId(id)}
                can={can}
            />

            <EditTaskSheet
                task={editingTask}
                open={!!editingTask}
                onOpenChange={(open) => !open && setEditingTask(null)}
                projects={allProjects}
            />

            <DeleteTaskDialog
                task={deletingTask}
                open={!!deletingTask}
                onOpenChange={(open) => !open && setDeletingTask(null)}
            />

            <CreateTaskSheet
                open={isCreateDialogOpen}
                onOpenChange={setIsCreateDialogOpen}
                projects={allProjects}
            />
        </section>
    );
}