'use client';

import { useSearchParams } from 'next/navigation';
import type { Business, Country, City } from '@/lib/types';
import { isBusinessOpen } from '@/lib/utils';
import BusinessCard from '@/components/business-card';
import FilterSidebar, { type Filters } from './filter-sidebar';
import { Card, CardContent } from '@/components/ui/card';
import { Search } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import { useState, useEffect, useCallback, useMemo } from 'react';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection, query, where, getDocs } from 'firebase/firestore';

export default function SearchResultsContentInternal() {
    const searchParams = useSearchParams();
    const firestore = useFirestore();
    const [filteredBusinesses, setFilteredBusinesses] = useState<Business[]>([]);
    const [isLoading, setIsLoading] = useState(true);

    const countriesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'countries') : null, [firestore]);
    const { data: allCountries } = useCollection<Country>(countriesQuery);

    const citiesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'cities') : null, [firestore]);
    const { data: allCities } = useCollection<City>(citiesQuery);

    const citiesByCountry = useMemo(() => {
        if (!allCities) return {};
        return allCities.reduce((acc, city) => {
            if (!acc[city.countryId]) {
                acc[city.countryId] = [];
            }
            acc[city.countryId].push(city);
            return acc;
        }, {} as Record<string, City[]>);
    }, [allCities]);


    const [filters, setFilters] = useState<Filters>({
        q: searchParams.get('q') || '',
        category: searchParams.get('category') || 'all',
        country: searchParams.get('country') || 'all',
        city: searchParams.get('city') || 'all',
        rating: Number(searchParams.get('rating')) || 1,
        openNow: searchParams.get('openNow') === 'true',
        services: searchParams.getAll('services') || [],
    });

    const filterAndSortBusinesses = useCallback(async () => {
        if (!firestore) return;
        setIsLoading(true);

        const conditions: any[] = [where('status', '==', 'active')];

        if (filters.category !== 'all') {
            conditions.push(where('category', '==', filters.category));
        }
        if (filters.country !== 'all') {
            conditions.push(where('country', '==', filters.country));
        }
        if (filters.rating > 1) {
            conditions.push(where('rating', '>=', filters.rating));
        }
        if (filters.services.length > 0) {
            conditions.push(where('services', 'array-contains-any', filters.services));
        }
        if (filters.q) {
            conditions.push(where('name', '>=', filters.q));
            conditions.push(where('name', '<=', filters.q + '\uf8ff'));
        }

        const businessesRef = collection(firestore, 'businesses');
        const q = query(businessesRef, ...conditions);
        
        const querySnapshot = await getDocs(q);
        let results = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as Business));

        if (filters.city !== 'all') {
            results = results.filter(business => business.address.split(',')[1]?.trim() === filters.city);
        }
        if (filters.openNow) {
            results = results.filter(business => isBusinessOpen(business.openingHours));
        }
        
        results.sort((a, b) => {
            const aIsFeatured = !!a.subscriptionId;
            const bIsFeatured = !!b.subscriptionId;
            if (aIsFeatured && !bIsFeatured) return -1;
            if (!aIsFeatured && bIsFeatured) return 1;
            return b.rating - a.rating;
        });

        setFilteredBusinesses(results);
        setIsLoading(false);
    }, [filters, firestore]);


    useEffect(() => {
        filterAndSortBusinesses();
    }, [filterAndSortBusinesses]);

    return (
        <div className="container mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 gap-8 lg:grid-cols-4">
                <div className="lg:col-span-1">
                    <FilterSidebar 
                        filters={filters} 
                        onFilterChange={setFilters} 
                        allCountries={allCountries || []}
                        citiesByCountry={citiesByCountry}
                    />
                </div>
                <div className="lg:col-span-3">
                    <header className="mb-6">
                        <h1 className="text-2xl font-bold font-headline text-primary">Search Results</h1>
                        <p className="text-muted-foreground">
                            {isLoading ? 'Searching for businesses...' : `Found ${filteredBusinesses.length} businesses matching your criteria.`}
                        </p>
                    </header>
                    {isLoading ? (
                         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
                            {[...Array(6)].map((_, i) => (
                                <div key={i} className="space-y-2">
                                    <Skeleton className="h-40 w-full" />
                                    <Skeleton className="h-6 w-3/4" />
                                    <Skeleton className="h-4 w-1/2" />
                                </div>
                            ))}
                        </div>
                    ) : filteredBusinesses.length > 0 ? (
                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
                            {filteredBusinesses.map(business => (
                                <BusinessCard 
                                    key={business.id} 
                                    business={business} 
                                    isFeatured={!!business.subscriptionId}
                                />
                            ))}
                        </div>
                    ) : (
                        <Card>
                            <CardContent className="p-8 text-center">
                                <Search className="mx-auto h-12 w-12 text-muted-foreground" />
                                <h3 className="mt-4 text-lg font-semibold text-primary">No Businesses Found</h3>
                                <p className="mt-2 text-sm text-muted-foreground">
                                    Try adjusting your search or filter criteria.
                                </p>
                            </CardContent>
                        </Card>
                    )}
                </div>
            </div>
        </div>
    );
}