// components/Toolbar.jsx
import { LayoutGrid, LayoutList, Plus, Search, Trash2, Filter, ChevronDown } from 'lucide-react';

const ViewToggle = ({ view, onViewChange }) => (
    <div className="flex p-1 gap-1 items-center bg-slate-100 rounded-lg border border-slate-200">
        <button
            className={`p-1.5 rounded-md transition-all duration-200 ${view === 'grid'
                ? 'bg-white text-indigo-600 shadow-sm'
                : 'text-slate-500 hover:text-slate-700 hover:bg-slate-200/50'
                }`}
            onClick={() => onViewChange('grid')}
            title="Grid View"
        >
            <LayoutGrid className="size-4" />
        </button>
        <button
            className={`p-1.5 rounded-md transition-all duration-200 ${view === 'list'
                ? 'bg-white text-indigo-600 shadow-sm'
                : 'text-slate-500 hover:text-slate-700 hover:bg-slate-200/50'
                }`}
            onClick={() => onViewChange('list')}
            title="List View"
        >
            <LayoutList className="size-4" />
        </button>
    </div>
);

const Toolbar = ({
    view,
    onViewChange,
    selectedCount,
    onBulkDelete,
    onSearch,
    onUpload,
    categories = [],
    tags = [],
    selectedCategory,
    onCategoryChange,
    selectedTag,
    onTagChange,
    onSort,
    sortConfig,
    className,
}) => {
    return (
        <div className={`bg-white border-b border-slate-200 sticky top-0 z-30 ${className}`}>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                <div className="flex flex-col xl:flex-row items-stretch xl:items-center justify-between gap-4">

                    {/* Left Actions & View Toggle */}
                    <div className="flex flex-wrap items-center gap-3">
                        <button
                            onClick={onUpload}
                            className="flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white font-medium text-sm rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
                        >
                            <Plus className="size-4" />
                            <span>Upload PDF</span>
                        </button>

                        <div className="h-6 w-px bg-slate-200 mx-1 hidden sm:block"></div>

                        <ViewToggle view={view} onViewChange={onViewChange} />

                        {selectedCount > 0 && (
                            <div className="flex items-center gap-2 px-3 py-1.5 bg-red-50 text-red-600 rounded-lg border border-red-100 animate-in fade-in slide-in-from-left-2 duration-200">
                                <span className="text-sm font-semibold">{selectedCount}</span>
                                <button
                                    onClick={onBulkDelete}
                                    className="p-1 hover:bg-red-100 rounded transition-colors"
                                    title="Delete selected"
                                >
                                    <Trash2 className="size-4" />
                                </button>
                            </div>
                        )}
                    </div>

                    {/* Right: Filters & Search */}
                    <div className="flex flex-col md:flex-row items-center gap-3 flex-1 xl:justify-end">

                        {/* Filters Dropdowns */}
                        <div className="flex items-center gap-2 w-full md:w-auto">
                            <div className="relative flex-1 md:w-36">
                                <select
                                    value={selectedCategory}
                                    onChange={(e) => onCategoryChange(e.target.value)}
                                    className="w-full pl-3 pr-8 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:border-indigo-500 appearance-none cursor-pointer"
                                >
                                    <option value="">All Categories</option>
                                    {categories.map(cat => (
                                        <option key={cat.id} value={cat.id}>{cat.name}</option>
                                    ))}
                                </select>
                                <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-slate-400 pointer-events-none" />
                            </div>

                            <div className="relative flex-1 md:w-36">
                                <select
                                    value={selectedTag}
                                    onChange={(e) => onTagChange(e.target.value)}
                                    className="w-full pl-3 pr-8 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:border-indigo-500 appearance-none cursor-pointer"
                                >
                                    <option value="">All Tags</option>
                                    {tags.map(tag => (
                                        <option key={tag.id} value={tag.id}>{tag.name}</option>
                                    ))}
                                </select>
                                <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-slate-400 pointer-events-none" />
                            </div>

                            <div className="relative flex-1 md:w-40">
                                <select
                                    value={`${sortConfig.key}-${sortConfig.direction}`}
                                    onChange={(e) => {
                                        const [key, direction] = e.target.value.split('-');
                                        onSort(key, direction);
                                    }}
                                    className="w-full pl-3 pr-8 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:border-indigo-500 appearance-none cursor-pointer"
                                >
                                    <option value="uploaded-desc">Newest First</option>
                                    <option value="uploaded-asc">Oldest First</option>
                                    <option value="title-asc">Name (A-Z)</option>
                                    <option value="title-desc">Name (Z-A)</option>
                                    <option value="filesize-asc">Smallest Size</option>
                                    <option value="filesize-desc">Largest Size</option>
                                </select>
                                <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 size-4 text-slate-400 pointer-events-none" />
                            </div>
                        </div>

                        {/* Search Bar */}
                        <div className="relative w-full md:w-64 group">
                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <Search className="size-4 text-slate-400 group-focus-within:text-indigo-500 transition-colors" />
                            </div>
                            <input
                                type="text"
                                placeholder="Search PDFs..."
                                onChange={(e) => onSearch(e.target.value)}
                                className="block w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:border-indigo-500 transition-all group-hover:border-slate-300"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Toolbar;