'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Search, Star } from 'lucide-react';
import { Checkbox } from '@/components/ui/checkbox';
import { Separator } from '@/components/ui/separator';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection } from 'firebase/firestore';
import type { Category, Country, City } from '@/lib/types';
import { servicesByCategory } from '@/lib/data';

export type Filters = {
  q: string;
  category: string;
  country: string;
  city: string;
  rating: number;
  openNow: boolean;
  services: string[];
};

interface FilterSidebarProps {
  filters: Filters;
  onFilterChange: (filters: Filters) => void;
  allCountries: Country[];
  citiesByCountry: Record<string, City[]>;
}

export default function FilterSidebar({ filters, onFilterChange, allCountries, citiesByCountry }: FilterSidebarProps) {
    const firestore = useFirestore();
    const categoriesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'categories') : null, [firestore]);
    const { data: categories } = useCollection<Category>(categoriesQuery);

    const [localFilters, setLocalFilters] = useState(filters);
    const [availableCities, setAvailableCities] = useState<City[]>([]);
    const [availableServices, setAvailableServices] = useState<string[]>([]);
    
    const countryId = allCountries.find(c => c.name === filters.country)?.id || 'all';

    useEffect(() => {
        setLocalFilters(filters);
        if (filters.category && filters.category !== 'all') {
            setAvailableServices(servicesByCategory[filters.category] || []);
        } else {
            setAvailableServices([]);
        }
    }, [filters]);
    
    useEffect(() => {
        if(countryId && countryId !== 'all') {
             setAvailableCities(citiesByCountry[countryId] || []);
        } else {
            setAvailableCities([]);
        }
    }, [countryId, citiesByCountry]);

    const handleChange = (field: keyof Filters, value: any) => {
        const newFilters = { ...localFilters, [field]: value };
        
        if (field === 'category') {
            newFilters.services = [];
            setAvailableServices(value !== 'all' ? servicesByCategory[value] || [] : []);
        }
        
        if (field === 'country') {
            newFilters.city = 'all'; 
        }
        
        setLocalFilters(newFilters);
        onFilterChange(newFilters);
    };
    
    const handleServiceChange = (service: string, checked: boolean) => {
        const currentServices = localFilters.services || [];
        const newServices = checked 
            ? [...currentServices, service]
            : currentServices.filter(s => s !== service);
        handleChange('services', newServices);
    };

    return (
        <Card className="sticky top-20">
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <Search className="h-5 w-5" />
                    Filters
                </CardTitle>
            </CardHeader>
            <CardContent>
                <div className="space-y-6">
                    <div>
                        <Label htmlFor="search-input">Search Term</Label>
                        <Input
                            id="search-input"
                            placeholder="e.g. Coffee, Pizza..."
                            value={localFilters.q}
                            onChange={(e) => handleChange('q', e.target.value)}
                        />
                    </div>

                    <div>
                        <Label htmlFor="category-select">Category</Label>
                        <Select value={localFilters.category} onValueChange={value => handleChange('category', value)}>
                            <SelectTrigger id="category-select">
                                <SelectValue placeholder="All Categories" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">All Categories</SelectItem>
                                {categories?.map(category => (
                                    <SelectItem key={category.id} value={category.name}>{category.name}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>

                    {availableServices.length > 0 && (
                        <div className='space-y-4 rounded-md border p-4'>
                            <Label className='font-semibold'>Services in {localFilters.category}</Label>
                            <div className="max-h-40 space-y-2 overflow-y-auto pr-2">
                                {availableServices.map(service => (
                                    <div key={service} className="flex items-center gap-2">
                                        <Checkbox
                                            id={`service-${service}`}
                                            checked={localFilters.services.includes(service)}
                                            onCheckedChange={(checked) => handleServiceChange(service, !!checked)}
                                        />
                                        <Label htmlFor={`service-${service}`} className='font-normal'>{service}</Label>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                    
                    <Separator />

                    <div>
                        <Label htmlFor="country-select">Country</Label>
                        <Select value={localFilters.country} onValueChange={value => handleChange('country', value)}>
                            <SelectTrigger id="country-select">
                                <SelectValue placeholder="Any Country" />
                            </SelectTrigger>
                            <SelectContent>
                                 <SelectItem value="all">Any Country</SelectItem>
                                {allCountries.map(country => (
                                    <SelectItem key={country.id} value={country.name}>{country.name}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>

                    <div>
                        <Label htmlFor="city-select">City</Label>
                        <Select
                            value={localFilters.city}
                            onValueChange={value => handleChange('city', value)}
                            disabled={!localFilters.country || localFilters.country === 'all'}
                        >
                            <SelectTrigger id="city-select">
                                <SelectValue placeholder="Any City" />
                            </SelectTrigger>
                            <SelectContent>
                                 <SelectItem value="all">Any City</SelectItem>
                                {availableCities.map(city => (
                                    <SelectItem key={city.id} value={city.name}>{city.name}</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>

                    <div className="space-y-3">
                        <div className="flex items-center justify-between">
                            <Label htmlFor="rating-slider">Min. Rating</Label>
                            <div className="flex items-center gap-1.5">
                                <span className="font-bold text-primary">{localFilters.rating.toFixed(1)}</span>
                                <Star className="h-4 w-4 text-yellow-400" />
                            </div>
                        </div>
                        <Slider
                            id="rating-slider"
                            min={1}
                            max={5}
                            step={0.1}
                            value={[localFilters.rating]}
                            onValueChange={([value]) => handleChange('rating', value)}
                        />
                    </div>

                    <div className="flex items-center justify-between rounded-md border p-3">
                        <Label htmlFor="open-now">Open Now</Label>
                        <Switch
                            id="open-now"
                            checked={localFilters.openNow}
                            onCheckedChange={checked => handleChange('openNow', checked)}
                        />
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}