import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Search, X, ChevronDown, ChevronUp } from 'lucide-react';
import { type ExploreCategory } from '@/types/explore';
import { cn } from '@/lib/utils';
import { useLaravelReactI18n } from 'laravel-react-i18n';
import { useState } from 'react';

interface ExploreFiltersProps {
    search: string | null;
    category: string | null;
    categories: ExploreCategory[];
    onSearchChange: (value: string) => void;
    onCategoryChange: (value: string | null) => void;
    onClearFilters: () => void;
}

export default function ExploreFilters({
    search,
    category,
    categories,
    onSearchChange,
    onCategoryChange,
    onClearFilters,
}: ExploreFiltersProps) {
    const { t } = useLaravelReactI18n();
    const [isExpanded, setIsExpanded] = useState(false);

    const hasActiveFilters = search || category;

    return (
        <div className="space-y-4 mb-6">
            {/* Search Bar */}
            <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                    type="text"
                    placeholder={t('Search experiences and places...')}
                    value={search || ''}
                    onChange={(e) => onSearchChange(e.target.value)}
                    className="pl-10 pr-10 h-11 rounded-xl border-0 shadow-md bg-white/80 dark:bg-card/80 backdrop-blur-sm"
                />
                {search && (
                    <button
                        onClick={() => onSearchChange('')}
                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                        <X className="h-4 w-4" />
                    </button>
                )}
            </div>

            {/* Collapsible Categories Toggle */}
            <button
                onClick={() => setIsExpanded(!isExpanded)}
                className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground bg-white/60 dark:bg-card/60 rounded-lg shadow-sm transition-colors"
            >
                <span>{t('Categories')}</span>
                {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
            </button>

            {/* Category Filters - Collapsible on both mobile and desktop */}
            <div className={cn(
                "flex items-center gap-2 flex-wrap transition-all duration-300",
                !isExpanded && "hidden"
            )}>
                <Badge
                    variant={!category ? "default" : "secondary"}
                    className={cn(
                        "cursor-pointer px-4 py-2 text-sm font-medium transition-all",
                        !category && "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700"
                    )}
                    onClick={() => onCategoryChange(null)}
                >
                    {t('All')}
                </Badge>

                {categories.map((cat) => (
                    <Badge
                        key={cat.id}
                        variant={category === String(cat.id) ? "default" : "secondary"}
                        className={cn(
                            "cursor-pointer px-4 py-2 text-sm font-medium transition-all",
                            category === String(cat.id) && "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700"
                        )}
                        onClick={() => onCategoryChange(String(cat.id))}
                    >
                        {cat.name_en}
                    </Badge>
                ))}

                {hasActiveFilters && (
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={onClearFilters}
                        className="ml-auto"
                    >
                        <X className="h-4 w-4 mr-2" />
                        {t('Clear Filters')}
                    </Button>
                )}
            </div>
        </div>
    );
}