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

import { ProjectStatusBadge } from '@/components/projects/ProjectStatusBadge';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
    CardDescription,
} 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 projectsIndex,
    create as projectCreate,
} from '@/routes/projects';
import { show as projectShow } from '@/routes/projects';
import type { PaginatedData, ProjectIndexItem } from '@/types/project';

interface ProjectIndexProps {
    projects: PaginatedData<ProjectIndexItem>;
    filters: {
        search: string;
        status: string;
        due_date: string;
        sort: string;
    };
    canCreate: boolean;
}

export default function Projects({
    projects,
    filters,
    canCreate,
}: ProjectIndexProps) {
    // Filter States — di-inisialisasi dari server agar konsisten saat reload.
    const [searchQuery, setSearchQuery] = useState(filters.search);
    const [statusFilter, setStatusFilter] = useState(filters.status);
    const [dueDateFilter, setDueDateFilter] = useState(filters.due_date);
    const [sortBy, setSortBy] = useState(filters.sort);

    const projectsUrl = projectsIndex().url;

    // Middleware TrimStrings memangkas spasi pinggir sebelum controller
    // membacanya, dan nilai terpangkas itu yang dipulangkan sebagai filter —
    // jadi yang dibandingkan di bawah harus terpangkas juga.
    const trimmedSearch = searchQuery.trim();

    /**
     * Penjaga efek: apakah state lokal masih berbeda dari yang dipegang server.
     *
     * Menggantikan flag "sudah mount". Aplikasi berjalan dengan `strictMode`
     * (lihat app.tsx), jadi efeknya dijalankan dua kali saat mount: jalan
     * pertama mematikan flag lalu keluar, dan jalan kedua justru lolos karena
     * flag-nya sudah mati — menembakkan satu request palsu 300ms kemudian.
     * Request itu membawa `replace: true`, jadi ia menimpa navigasi apa pun yang
     * sedang berjalan: klik ke halaman lain tepat setelah halaman ini terbuka
     * terlempar balik ke sini.
     */
    const filtersChanged =
        trimmedSearch !== filters.search ||
        statusFilter !== filters.status ||
        dueDateFilter !== filters.due_date ||
        sortBy !== filters.sort;

    // 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 (!filtersChanged) {
            return;
        }

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

        return () => window.clearTimeout(request);
    }, [
        filtersChanged,
        projectsUrl,
        trimmedSearch,
        statusFilter,
        dueDateFilter,
        sortBy,
    ]);

    const clearAllFilters = () => {
        setSearchQuery('');
        setStatusFilter('all');
        setDueDateFilter('all');
        setSortBy('newest');
    };

    const hasActiveFilters =
        searchQuery !== '' ||
        statusFilter !== 'all' ||
        dueDateFilter !== 'all' ||
        sortBy !== 'newest';

    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;
    };

    return (
        <>
            <Head title="Projects" />
            <div className="flex min-h-full flex-1 flex-col gap-4 rounded-xl p-4 pb-8">
                <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={searchQuery}
                            onChange={(e) => setSearchQuery(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={statusFilter}
                                    onValueChange={setStatusFilter}
                                >
                                    <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={dueDateFilter}
                                    onValueChange={setDueDateFilter}
                                >
                                    <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={sortBy}
                                    onValueChange={setSortBy}
                                >
                                    <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={projectCreate().url}>
                                    <Plus 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">
                        {searchQuery && (
                            <Badge
                                variant="secondary"
                                className="gap-1 px-2 py-1 text-xs"
                            >
                                Search: "{searchQuery}"
                                <button
                                    onClick={() => setSearchQuery('')}
                                    className="ml-1 cursor-pointer hover:text-foreground"
                                >
                                    <XCircle size={12} />
                                </button>
                            </Badge>
                        )}
                        {statusFilter !== 'all' && (
                            <Badge
                                variant="secondary"
                                className="gap-1 px-2 py-1 text-xs"
                            >
                                Status:{' '}
                                {PROJECT_STATUS_MAP[statusFilter]?.label ||
                                    statusFilter}
                                <button
                                    onClick={() => setStatusFilter('all')}
                                    className="ml-1 cursor-pointer hover:text-foreground"
                                >
                                    <XCircle size={12} />
                                </button>
                            </Badge>
                        )}
                        {dueDateFilter !== 'all' && (
                            <Badge
                                variant="secondary"
                                className="gap-1 px-2 py-1 text-xs"
                            >
                                Due Date: {getDueDateFilterLabel(dueDateFilter)}
                                <button
                                    onClick={() => setDueDateFilter('all')}
                                    className="ml-1 cursor-pointer hover:text-foreground"
                                >
                                    <XCircle size={12} />
                                </button>
                            </Badge>
                        )}
                        {sortBy !== 'newest' && (
                            <Badge
                                variant="secondary"
                                className="gap-1 px-2 py-1 text-xs"
                            >
                                Sort: {getSortByLabel(sortBy)}
                                <button
                                    onClick={() => setSortBy('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 lg:grid-cols-3 xl:grid-cols-4"
                >
                    {projects.data.map((project) => {
                        const deadlineState = getProjectDeadlineState(
                            project.deadline,
                            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}
                                                    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-1 flex-col items-center justify-center gap-2 py-16 text-center text-muted-foreground">
                        <FolderKanban className="h-10 w-10" />
                        <p className="text-sm">
                            {hasActiveFilters
                                ? 'No projects found matching your filters.'
                                : 'No projects yet.'}
                        </p>
                    </div>
                )}
            </div>
        </>
    );
}

Projects.layout = {
    breadcrumbs: [
        {
            title: 'Projects',
            href: projectsIndex().url,
        },
    ],
};