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';
import { Input } from '@/components/ui/input';

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-xl border bg-card p-2 sm:flex-row">
            <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 pr-4 pl-10 font-medium"
                />
            </div>
            <div className="flex flex-wrap items-center gap-2">
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            variant="outline"
                            className={`h-10 rounded-lg border-dashed ${selectedStatus ? 'border-primary bg-primary/5 text-primary' : ''}`}
                        >
                            <Filter className="mr-2 h-4 w-4" />
                            {selectedStatus || 'Filter by Status'}
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        align="end"
                        className="w-56 rounded-lg"
                    >
                        <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 px-6 font-semibold shadow-lg transition hover:scale-[1.02] active:scale-[0.98]"
                >
                    <Plus className="mr-2 h-4 w-4" /> New Project
                </Button>
            </div>
        </div>
    );
}