import {
    Head,
    InfiniteScroll,
    Link,
    router,
    setLayoutProps,
} from '@inertiajs/react';
import {
    ArrowRight,
    CalendarDays,
    FolderKanban,
    FolderPlus,
    Search,
    SlidersHorizontal,
    TriangleAlert,
    XCircle,
} from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

import { DivisionHeader } from '@/components/divisions/DivisionHeader';
import { ProjectStatusBadge } from '@/components/projects/ProjectStatusBadge';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { PROJECT_STATUS_MAP } from '@/lib/status-config';
import { cn, getProjectDeadlineState } from '@/lib/utils';
import { index as divisionsIndex, show_projects } from '@/routes/divisions';
import {
    create as createProject,
    show as projectShow,
} from '@/routes/projects';
import type { DivisionSecondaryData } from '@/types/division';
import type {
    DivisionProjectSummaryItem,
    PaginatedData,
} from '@/types/project';

interface DivisionShowProps {
    data: {
        primary: {
            active_schedule: {
                act: string;
                tasks: unknown[];
            };
            tasks: {
                act: string;
                tasks: unknown[];
            };
        };
        secondary: DivisionSecondaryData & {
            members: {
                act: string;
                members: unknown[];
            };
        };
    };
    projects: PaginatedData<DivisionProjectSummaryItem>;
    filters: {
        search: string;
        status: string;
        due_date: string;
        sort: string;
    };
    canCreate: boolean;
}

export default function DivisionsShowProjects({
    data,
    projects,
    filters,
    canCreate,
}: DivisionShowProps) {
    const { base_info } = data.secondary;

    // Filter States — di-inisialisasi dari server agar konsisten saat reload.
    const [projectSearchQuery, setProjectSearchQuery] = useState(
        filters.search,
    );
    const [projectStatusFilter, setProjectStatusFilter] = useState(
        filters.status,
    );
    const [projectDueDateFilter, setProjectDueDateFilter] = useState(
        filters.due_date,
    );
    const [projectSortBy, setProjectSortBy] = useState(filters.sort);

    const isInitialFilterSync = useRef(true);
    const projectsUrl = show_projects({ division: base_info.slug }).url;

    // Sinkronkan perubahan filter ke server (debounce 300ms). `reset: ['projects']`
    // memaksa infinite scroll mulai dari halaman 1 setiap filter berubah,
    // sehingga hasil filter lama tidak menumpuk.
    useEffect(() => {
        if (isInitialFilterSync.current) {
            isInitialFilterSync.current = false;

            return;
        }

        const request = window.setTimeout(() => {
            router.get(
                projectsUrl,
                {
                    project_search: projectSearchQuery || undefined,
                    project_status:
                        projectStatusFilter !== 'all'
                            ? projectStatusFilter
                            : undefined,
                    project_due_date:
                        projectDueDateFilter !== 'all'
                            ? projectDueDateFilter
                            : undefined,
                    project_sort:
                        projectSortBy !== 'newest' ? projectSortBy : undefined,
                },
                {
                    only: ['projects'],
                    reset: ['projects'],
                    preserveScroll: true,
                    preserveState: true,
                    replace: true,
                },
            );
        }, 300);

        return () => window.clearTimeout(request);
    }, [
        projectsUrl,
        projectSearchQuery,
        projectStatusFilter,
        projectDueDateFilter,
        projectSortBy,
    ]);

    // Clear all filters
    const clearAllFilters = () => {
        setProjectSearchQuery('');
        setProjectStatusFilter('all');
        setProjectDueDateFilter('all');
        setProjectSortBy('newest');
    };

    // Check if any filter is active
    const hasActiveFilters =
        projectSearchQuery !== '' ||
        projectStatusFilter !== 'all' ||
        projectDueDateFilter !== 'all' ||
        projectSortBy !== 'newest';

    // Helper functions for labels
    const getDueDateFilterLabel = (filter: string) => {
        const labels: Record<string, string> = {
            overdue: 'Overdue',
            upcoming: 'Upcoming',
            this_month: 'This Month',
            no_due_date: 'No Due Date',
        };

        return labels[filter] || filter;
    };

    const getSortByLabel = (sort: string) => {
        const labels: Record<string, string> = {
            oldest: 'Oldest Created',
            due_date_soonest: 'Due Soonest',
            due_date_latest: 'Due Latest',
        };

        return labels[sort] || sort;
    };

    setLayoutProps({
        breadcrumbs: [
            {
                title: 'Divisions',
                href: divisionsIndex().url,
            },
            {
                title: base_info.name,
            },
            {
                title: 'Projects',
            },
        ],
    });

    return (
        <>
            <Head title={`${base_info.name} - Projects`} />

            <div className="flex min-h-full flex-col bg-muted/50">
                {/* Division Header */}
                <DivisionHeader baseInfo={base_info} />

                {/* Main Content Area */}
                <div className="px-5">
                    <div className="mx-auto w-full pb-8">
                        <section className="space-y-4">
                            <div className="space-y-3">
                                <h1 className="text-xl font-bold tracking-tight text-foreground">
                                    Projects
                                </h1>
                                <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
                                    <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 projects by name or description..."
                                            className="h-9 rounded-lg bg-background pl-9"
                                            value={projectSearchQuery}
                                            onChange={(e) =>
                                                setProjectSearchQuery(
                                                    e.target.value,
                                                )
                                            }
                                        />
                                    </div>

                                    <div className="flex shrink-0 items-center gap-2">
                                        {hasActiveFilters && (
                                            <Button
                                                variant="secondary"
                                                size="sm"
                                                className="h-9 gap-2 rounded-lg px-3 text-xs font-bold"
                                                onClick={clearAllFilters}
                                            >
                                                <XCircle size={14} />
                                                Clear Filters
                                            </Button>
                                        )}

                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button
                                                    variant="outline"
                                                    className="h-9 gap-2 rounded-lg bg-background"
                                                >
                                                    <SlidersHorizontal
                                                        size={16}
                                                    />
                                                    Filters
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent
                                                align="end"
                                                className="w-56 rounded-lg"
                                            >
                                                <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                                    Filter by Status
                                                </DropdownMenuLabel>
                                                <DropdownMenuRadioGroup
                                                    value={projectStatusFilter}
                                                    onValueChange={
                                                        setProjectStatusFilter
                                                    }
                                                >
                                                    <DropdownMenuRadioItem value="all">
                                                        All Status
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="draft">
                                                        Draft
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="todo">
                                                        To Do
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="in_progress">
                                                        In Progress
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="completed">
                                                        Completed
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="on_hold">
                                                        On Hold
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="cancelled">
                                                        Cancelled
                                                    </DropdownMenuRadioItem>
                                                </DropdownMenuRadioGroup>

                                                <DropdownMenuSeparator />

                                                <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                                    Filter by Due Date
                                                </DropdownMenuLabel>
                                                <DropdownMenuRadioGroup
                                                    value={projectDueDateFilter}
                                                    onValueChange={
                                                        setProjectDueDateFilter
                                                    }
                                                >
                                                    <DropdownMenuRadioItem value="all">
                                                        All Dates
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="overdue">
                                                        Overdue
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="upcoming">
                                                        Upcoming (This Week)
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="this_month">
                                                        This Month
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="no_due_date">
                                                        No Due Date
                                                    </DropdownMenuRadioItem>
                                                </DropdownMenuRadioGroup>

                                                <DropdownMenuSeparator />

                                                <DropdownMenuLabel className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                                                    Sort by
                                                </DropdownMenuLabel>
                                                <DropdownMenuRadioGroup
                                                    value={projectSortBy}
                                                    onValueChange={
                                                        setProjectSortBy
                                                    }
                                                >
                                                    <DropdownMenuRadioItem value="newest">
                                                        Newest Created
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="oldest">
                                                        Oldest Created
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="due_date_soonest">
                                                        Due Soonest
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="due_date_latest">
                                                        Due Latest
                                                    </DropdownMenuRadioItem>
                                                </DropdownMenuRadioGroup>
                                            </DropdownMenuContent>
                                        </DropdownMenu>

                                        {canCreate && (
                                            <Button
                                                className="h-9 gap-2 rounded-lg"
                                                asChild
                                            >
                                                <Link
                                                    href={
                                                        createProject({
                                                            query: {
                                                                division_id:
                                                                    base_info.id,
                                                            },
                                                        }).url
                                                    }
                                                >
                                                    <FolderPlus size={16} />
                                                    <span className="hidden sm:inline">
                                                        New Project
                                                    </span>
                                                </Link>
                                            </Button>
                                        )}
                                    </div>
                                </div>

                                {/* Active Filter Indicators */}
                                {hasActiveFilters && (
                                    <div className="flex flex-wrap gap-2">
                                        {projectSearchQuery && (
                                            <Badge
                                                variant="secondary"
                                                className="gap-1 px-2 py-1 text-xs"
                                            >
                                                Search: "{projectSearchQuery}"
                                                <button
                                                    onClick={() =>
                                                        setProjectSearchQuery(
                                                            '',
                                                        )
                                                    }
                                                    className="ml-1 cursor-pointer hover:text-foreground"
                                                >
                                                    <XCircle size={12} />
                                                </button>
                                            </Badge>
                                        )}
                                        {projectStatusFilter !== 'all' && (
                                            <Badge
                                                variant="secondary"
                                                className="gap-1 px-2 py-1 text-xs"
                                            >
                                                Status:{' '}
                                                {PROJECT_STATUS_MAP[
                                                    projectStatusFilter
                                                ]?.label || projectStatusFilter}
                                                <button
                                                    onClick={() =>
                                                        setProjectStatusFilter(
                                                            'all',
                                                        )
                                                    }
                                                    className="ml-1 cursor-pointer hover:text-foreground"
                                                >
                                                    <XCircle size={12} />
                                                </button>
                                            </Badge>
                                        )}
                                        {projectDueDateFilter !== 'all' && (
                                            <Badge
                                                variant="secondary"
                                                className="gap-1 px-2 py-1 text-xs"
                                            >
                                                Due Date:{' '}
                                                {getDueDateFilterLabel(
                                                    projectDueDateFilter,
                                                )}
                                                <button
                                                    onClick={() =>
                                                        setProjectDueDateFilter(
                                                            'all',
                                                        )
                                                    }
                                                    className="ml-1 cursor-pointer hover:text-foreground"
                                                >
                                                    <XCircle size={12} />
                                                </button>
                                            </Badge>
                                        )}
                                        {projectSortBy !== 'newest' && (
                                            <Badge
                                                variant="secondary"
                                                className="gap-1 px-2 py-1 text-xs"
                                            >
                                                Sort:{' '}
                                                {getSortByLabel(projectSortBy)}
                                                <button
                                                    onClick={() =>
                                                        setProjectSortBy(
                                                            'newest',
                                                        )
                                                    }
                                                    className="ml-1 cursor-pointer hover:text-foreground"
                                                >
                                                    <XCircle size={12} />
                                                </button>
                                            </Badge>
                                        )}
                                    </div>
                                )}

                                <InfiniteScroll
                                    data="projects"
                                    buffer={400}
                                    className="grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"
                                >
                                    {projects.data.map((project) => {
                                        const deadlineState =
                                            getProjectDeadlineState(
                                                project.due_date,
                                                project.status,
                                            );

                                        return (
                                            <Link
                                                key={project.id}
                                                href={
                                                    projectShow({ project }).url
                                                }
                                                className="group block h-full"
                                            >
                                                <Card className="flex h-full min-h-56 flex-col transition-colors hover:border-primary/60 hover:shadow-sm">
                                                    <CardHeader className="space-y-4">
                                                        <div className="flex items-start justify-between gap-3">
                                                            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
                                                                <FolderKanban className="h-5 w-5" />
                                                            </div>
                                                            <div className="flex shrink-0 items-center gap-2">
                                                                {project.hasUrgentTask && (
                                                                    <TriangleAlert
                                                                        className="h-4 w-4 text-destructive"
                                                                        aria-label="Ada task urgent"
                                                                    />
                                                                )}
                                                                <ProjectStatusBadge
                                                                    status={
                                                                        project.status ||
                                                                        'todo'
                                                                    }
                                                                    className="text-[10px] font-semibold tracking-wide uppercase"
                                                                />
                                                            </div>
                                                        </div>

                                                        <div className="space-y-2">
                                                            <CardTitle className="line-clamp-2 text-base leading-snug transition-colors group-hover:text-primary">
                                                                {project.name}
                                                            </CardTitle>
                                                            <CardDescription className="line-clamp-2 min-h-10">
                                                                {project.description ||
                                                                    'No description provided.'}
                                                            </CardDescription>
                                                        </div>
                                                    </CardHeader>

                                                    <CardContent className="mt-auto space-y-4">
                                                        <div className="space-y-2">
                                                            <div className="flex items-center justify-between gap-3 text-xs">
                                                                <span className="font-medium text-muted-foreground">
                                                                    Progress
                                                                </span>
                                                                <span className="font-semibold text-foreground">
                                                                    {
                                                                        project.progressPercentage
                                                                    }
                                                                    %
                                                                </span>
                                                            </div>
                                                            <div className="h-2 overflow-hidden rounded-full bg-muted">
                                                                <div
                                                                    className="h-full rounded-full bg-primary transition-[width]"
                                                                    style={{
                                                                        width: `${project.progressPercentage}%`,
                                                                    }}
                                                                />
                                                            </div>
                                                            <p className="text-xs text-muted-foreground">
                                                                {project.taskCount >
                                                                0
                                                                    ? `${project.completedTaskCount}/${project.taskCount} tasks completed`
                                                                    : 'No tasks yet'}
                                                            </p>
                                                        </div>

                                                        <div className="flex items-center justify-between gap-3 border-t pt-4 text-xs">
                                                            <div
                                                                className={cn(
                                                                    'flex min-w-0 items-center gap-2 font-medium',
                                                                    deadlineState.className,
                                                                )}
                                                            >
                                                                <CalendarDays className="h-4 w-4 shrink-0" />
                                                                <span className="truncate">
                                                                    {
                                                                        deadlineState.label
                                                                    }
                                                                </span>
                                                            </div>
                                                            <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-primary" />
                                                        </div>
                                                    </CardContent>
                                                </Card>
                                            </Link>
                                        );
                                    })}
                                </InfiniteScroll>

                                {projects.data.length === 0 && (
                                    <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">
                                            <Search className="h-6 w-6" />
                                        </div>
                                        <p className="font-medium">
                                            No projects found matching your
                                            filters.
                                        </p>
                                    </div>
                                )}
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </>
    );
}