'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useToast } from '@/hooks/use-toast';
import { useFirestore, useUser, useDoc, useMemoFirebase, useCollection } from '@/firebase';
import { doc, collection, getDocs, setDoc } from 'firebase/firestore';
import { setDocumentNonBlocking } from '@/firebase/non-blocking-updates';
import type { Country, City } from '@/lib/types';

const availableLanguages = [
    { code: 'en', name: 'English' },
    { code: 'es', name: 'Spanish' },
];

export default function SettingsPage() {
    const { toast } = useToast();
    const { user } = useUser();
    const firestore = useFirestore();

    const userDocRef = useMemoFirebase(() => user ? doc(firestore, 'users', user.uid) : null, [user, firestore]);
    const { data: userData } = useDoc(userDocRef);

    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 [selectedCountry, setSelectedCountry] = useState('');
    const [selectedCity, setSelectedCity] = useState('');
    const [availableCities, setAvailableCities] = useState<City[]>([]);
    
    useEffect(() => {
        if (userData && allCountries && allCities) {
            const defaultCountry = allCountries.find(c => c.name === userData.defaultCountry);
            if (defaultCountry) {
                setSelectedCountry(defaultCountry.id);
            }
            const defaultCity = allCities.find(c => c.name === userData.defaultCity);
            if (defaultCity) {
                setSelectedCity(defaultCity.id);
            }
        }
    }, [userData, allCountries, allCities]);

    useEffect(() => {
        if (selectedCountry && allCities) {
            setAvailableCities(allCities.filter(city => city.countryId === selectedCountry));
        } else {
            setAvailableCities([]);
        }
    }, [selectedCountry, allCities]);

    const handleCountryChange = (countryId: string) => {
        setSelectedCountry(countryId);
        setSelectedCity(''); // Reset city
    };

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (!user || !userDocRef) return;
        
        const formData = new FormData(e.currentTarget);
        const language = formData.get('language') as string;
        
        const countryName = allCountries?.find(c => c.id === selectedCountry)?.name;
        const cityName = allCities?.find(c => c.id === selectedCity)?.name;

        setDocumentNonBlocking(userDocRef, {
            defaultLanguage: language,
            defaultCountry: countryName,
            defaultCity: cityName
        }, { merge: true });

        toast({
            title: 'Preferences Saved',
            description: 'Your default language and location have been updated.',
        });
    };

    return (
        <div className="container mx-auto max-w-2xl py-12">
            <header className="mb-8">
                <h1 className="text-3xl font-bold text-primary">Settings</h1>
                <p className="mt-1 text-muted-foreground">Manage your account and site preferences.</p>
            </header>
            <Card>
                <CardHeader>
                    <CardTitle>User Preferences</CardTitle>
                    <CardDescription>
                        Set your default language and location for a personalized experience across the app.
                    </CardDescription>
                </CardHeader>
                <form onSubmit={handleSubmit}>
                    <CardContent className="space-y-6">
                        <div className="space-y-2">
                            <Label htmlFor="language">Default Language</Label>
                            <Select name="language" defaultValue={userData?.defaultLanguage || 'en'}>
                                <SelectTrigger id="language">
                                    <SelectValue placeholder="Select a language" />
                                </SelectTrigger>
                                <SelectContent>
                                    {availableLanguages.map(lang => (
                                        <SelectItem key={lang.code} value={lang.code}>
                                            {lang.name}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                            <div className="space-y-2">
                                <Label htmlFor="country">Default Country</Label>
                                <Select name="country" value={selectedCountry} onValueChange={handleCountryChange}>
                                    <SelectTrigger id="country">
                                        <SelectValue placeholder="Select a country" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {allCountries?.map(country => (
                                            <SelectItem key={country.id} value={country.id}>
                                                {country.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="city">Default City</Label>
                                <Select name="city" value={selectedCity} onValueChange={setSelectedCity} disabled={!selectedCountry}>
                                    <SelectTrigger id="city">
                                        <SelectValue placeholder={selectedCountry ? 'Select a city' : 'Select country first'} />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {availableCities.map(city => (
                                            <SelectItem key={city.id} value={city.id}>
                                                {city.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                         <Button type="submit">Save Preferences</Button>
                    </CardContent>
                </form>
            </Card>
        </div>
    );
}