import { CheckSquare, Search, SlidersHorizontal, XCircle } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } 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';

interface VisibleColumns {
    code: boolean;
    name: boolean;
    priority: boolean;
    assignee: boolean;
    start_date: boolean;
    due_date: boolean;
    status: boolean;
}

interface TasksTableFiltersProps {
    searchQuery: string;
    setSearchQuery: (query: string) => void;
    selectedMatrixFilters: string[];
    setSelectedMatrixFilters: (
        filters: string[] | ((prev: string[]) => string[]),
    ) => void;
    statusFilter: string;
    setStatusFilter: (status: string) => void;
    sortBy: string;
    setSortBy: (sort: string) => void;
    visibleColumns: VisibleColumns;
    setVisibleColumns: (
        columns: VisibleColumns | ((prev: VisibleColumns) => VisibleColumns),
    ) => void;
    setIsCreateTaskOpen: (open: boolean) => void;
    removeMatrixFilter: (filter: string) => void;
    canManageTasks: boolean;
}

export function TasksTableFilters({
    searchQuery,
    setSearchQuery,
    selectedMatrixFilters,
    setSelectedMatrixFilters,
    statusFilter,
    setStatusFilter,
    sortBy,
    setSortBy,
    visibleColumns,
    setVisibleColumns,
    setIsCreateTaskOpen,
    removeMatrixFilter,
    canManageTasks,
}: TasksTableFiltersProps) {
    return (
        <div className="sticky -top-1 z-20 space-y-3 bg-background/95 px-5 py-3 shadow-sm backdrop-blur-md">
            <div className="flex 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 tasks by name or code..."
                        className="h-9 rounded-lg bg-background pl-9"
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                    />
                </div>

                {selectedMatrixFilters.length > 0 && (
                    <Button
                        variant="secondary"
                        size="sm"
                        className="h-9 gap-2 rounded-lg px-3 text-xs font-bold"
                        onClick={() => setSelectedMatrixFilters([])}
                    >
                        <XCircle size={14} />
                        Clear Filters ({selectedMatrixFilters.length})
                    </Button>
                )}

                <div className="flex shrink-0 items-center gap-2">
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                variant="outline"
                                className="h-9 gap-2 rounded-lg bg-background"
                                title="Filters & Display"
                            >
                                <SlidersHorizontal size={16} />
                                Filters
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent
                            align="end"
                            className="w-56 rounded-lg"
                        >
                            {/* Status Filter Section */}
                            <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="on_hold">
                                    On Hold
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="in_progress">
                                    In Progress
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="review">
                                    Review
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="completed">
                                    Completed
                                </DropdownMenuRadioItem>
                                <DropdownMenuRadioItem value="cancelled">
                                    Cancelled
                                </DropdownMenuRadioItem>
                            </DropdownMenuRadioGroup>

                            <DropdownMenuSeparator />

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

                            <DropdownMenuSeparator />

                            {/* Column Visibility Submenu */}
                            <DropdownMenuSub>
                                <DropdownMenuSubTrigger>
                                    Display Columns
                                </DropdownMenuSubTrigger>
                                <DropdownMenuSubContent className="w-48 rounded-lg">
                                    <DropdownMenuCheckboxItem
                                        checked={visibleColumns.code}
                                        onCheckedChange={(checked) =>
                                            setVisibleColumns((prev) => ({
                                                ...prev,
                                                code: checked,
                                            }))
                                        }
                                    >
                                        Code
                                    </DropdownMenuCheckboxItem>
                                    <DropdownMenuCheckboxItem
                                        checked={visibleColumns.name}
                                        onCheckedChange={(checked) =>
                                            setVisibleColumns((prev) => ({
                                                ...prev,
                                                name: checked,
                                            }))
                                        }
                                    >
                                        Task Name
                                    </DropdownMenuCheckboxItem>
                                    <DropdownMenuCheckboxItem
                                        checked={visibleColumns.priority}
                                        onCheckedChange={(checked) =>
                                            setVisibleColumns((prev) => ({
                                                ...prev,
                                                priority: checked,
                                            }))
                                        }
                                    >
                                        Priority
                                    </DropdownMenuCheckboxItem>
                                    <DropdownMenuCheckboxItem
                                        checked={visibleColumns.assignee}
                                        onCheckedChange={(checked) =>
                                            setVisibleColumns((prev) => ({
                                                ...prev,
                                                assignee: checked,
                                            }))
                                        }
                                    >
                                        Assignee
                                    </DropdownMenuCheckboxItem>
                                    <DropdownMenuCheckboxItem
                                        checked={visibleColumns.start_date}
                                        onCheckedChange={(checked) =>
                                            setVisibleColumns((prev) => ({
                                                ...prev,
                                                start_date: checked,
                                            }))
                                        }
                                    >
                                        Start Date
                                    </DropdownMenuCheckboxItem>
                                    <DropdownMenuCheckboxItem
                                        checked={visibleColumns.due_date}
                                        onCheckedChange={(checked) =>
                                            setVisibleColumns((prev) => ({
                                                ...prev,
                                                due_date: checked,
                                            }))
                                        }
                                    >
                                        Due Date
                                    </DropdownMenuCheckboxItem>
                                    <DropdownMenuCheckboxItem
                                        checked={visibleColumns.status}
                                        onCheckedChange={(checked) =>
                                            setVisibleColumns((prev) => ({
                                                ...prev,
                                                status: checked,
                                            }))
                                        }
                                    >
                                        Status
                                    </DropdownMenuCheckboxItem>
                                </DropdownMenuSubContent>
                            </DropdownMenuSub>
                        </DropdownMenuContent>
                    </DropdownMenu>

                    {canManageTasks && (
                        <Button
                            className="h-9 gap-2 rounded-lg"
                            onClick={() => setIsCreateTaskOpen(true)}
                        >
                            <CheckSquare size={16} />
                            <span className="hidden sm:inline">New Task</span>
                        </Button>
                    )}
                </div>
            </div>

            {/* Filter Stack */}
            {selectedMatrixFilters.length > 0 && (
                <div className="flex flex-wrap items-center gap-2 pb-2">
                    <span className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                        Active Filters:
                    </span>
                    {selectedMatrixFilters.map((filter) => (
                        <Badge
                            key={filter}
                            variant="secondary"
                            className="flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium"
                        >
                            {filter
                                .replace(/_/g, ' ')
                                .replace(/\b\w/g, (l) => l.toUpperCase())}
                            <button
                                onClick={() => removeMatrixFilter(filter)}
                                className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20"
                            >
                                <XCircle size={10} />
                            </button>
                        </Badge>
                    ))}
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                            setSelectedMatrixFilters([]);
                            setSearchQuery('');
                            setStatusFilter('all');
                        }}
                        className="h-6 px-2 text-[10px] font-bold text-primary hover:bg-primary/5"
                    >
                        Clear All
                    </Button>
                </div>
            )}
        </div>
    );
}