import { Filter, Plus, Search } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

interface ProjectToolbarProps {
    searchQuery: string;
    setSearchQuery: (query: string) => void;
    view: 'grid' | 'list';
    setView: (view: 'grid' | 'list') => void;
    selectedStatus: string | null;
    setSelectedStatus: (status: string | null) => void;
    availableStatuses: string[];
    onNewProject: () => void;
}

export function ProjectToolbar({
    searchQuery,
    setSearchQuery,
    selectedStatus,
    setSelectedStatus,
    availableStatuses,
    onNewProject,
}: ProjectToolbarProps) {
    return (
        <div className="flex flex-col items-center justify-between gap-4 rounded-2xl border bg-white p-2 sm:flex-row dark:bg-neutral-900/50">
            <div className="relative w-full max-w-sm flex-1">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                    <Search className="h-4 w-4 text-muted-foreground" />
                </div>
                <input
                    type="text"
                    placeholder="Search projects..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="h-10 w-full rounded-xl border border-transparent bg-neutral-50 pr-4 pl-10 text-sm font-medium outline-hidden transition-all focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 dark:bg-neutral-800"
                />
            </div>
            <div className="flex flex-wrap items-center gap-2">
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            variant="outline"
                            className={`h-10 rounded-xl border-dashed ${selectedStatus ? 'border-blue-500 bg-blue-50 text-blue-600 dark:bg-blue-900/10' : ''}`}
                        >
                            <Filter className="mr-2 h-4 w-4" />
                            {selectedStatus || 'Filter by Status'}
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        align="end"
                        className="w-56 rounded-xl border border-neutral-200 dark:border-neutral-800"
                    >
                        <DropdownMenuLabel>Status</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                            onClick={() => setSelectedStatus(null)}
                            className="cursor-pointer font-medium"
                        >
                            All Status
                        </DropdownMenuItem>
                        {availableStatuses.map((status) => (
                            <DropdownMenuItem
                                key={status}
                                onClick={() => setSelectedStatus(status)}
                                className="cursor-pointer"
                            >
                                {status}
                            </DropdownMenuItem>
                        ))}
                    </DropdownMenuContent>
                </DropdownMenu>

                <Button
                    onClick={onNewProject}
                    className="h-10 transform border-none bg-black px-6 font-semibold text-white shadow-lg transition hover:scale-[1.02] hover:bg-neutral-900 active:scale-[0.98] dark:bg-white dark:text-black dark:hover:bg-neutral-100"
                >
                    <Plus className="mr-2 h-4 w-4" /> New Project
                </Button>
            </div>
        </div>
    );
}