'use client';

import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { MoreHorizontal, Edit, Trash2, PlusCircle } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Switch } from "@/components/ui/switch";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { useToast } from '@/hooks/use-toast';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection, doc } from 'firebase/firestore';
import type { Business, City, Country } from '@/lib/types';
import Link from 'next/link';
import { updateDocumentNonBlocking } from '@/firebase/non-blocking-updates';

interface EnrichedCity extends City {
    countryName: string;
    businessCount: number;
    isActive: boolean;
}

export default function AdminCitiesPage() {
    const firestore = useFirestore();

    const businessesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'businesses') : null, [firestore]);
    const { data: businesses, isLoading: isLoadingBusinesses } = useCollection<Business>(businessesQuery);
    
    const citiesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'cities') : null, [firestore]);
    const { data: cities, isLoading: isLoadingCities } = useCollection<City>(citiesQuery);
    
    const countriesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'countries') : null, [firestore]);
    const { data: countries, isLoading: isLoadingCountries } = useCollection<Country>(countriesQuery);
    
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [editingCity, setEditingCity] = useState<EnrichedCity | null>(null);
    const { toast } = useToast();

    const enrichedCities = useMemo(() => {
        if (!cities || !countries || !businesses) return [];

        const businessCounts = businesses.reduce((acc, business) => {
            const city = business.address.split(',')[1]?.trim();
            if (city) {
                acc[city] = (acc[city] || 0) + 1;
            }
            return acc;
        }, {} as Record<string, number>);

        return cities.map(city => {
            const country = countries.find(c => c.id === city.countryId);
            return {
                ...city,
                countryName: country?.name || 'Unknown',
                businessCount: businessCounts[city.name] || 0,
                isActive: true, // Placeholder for active status
            };
        });
    }, [cities, countries, businesses]);

    const handleActiveChange = (cityId: string, isActive: boolean) => {
        if (!firestore) return;
        updateDocumentNonBlocking(doc(firestore, 'cities', cityId), { isActive });
    };

    const handleOpenDialog = (city: EnrichedCity | null = null) => {
        setEditingCity(city);
        setIsDialogOpen(true);
    };

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (!firestore || !editingCity) return;
        
        const formData = new FormData(e.currentTarget);
        const name = formData.get('name') as string;
        const countryId = formData.get('country') as string;
        
        updateDocumentNonBlocking(doc(firestore, 'cities', editingCity.id), { name, countryId });
        toast({ title: 'City Updated', description: `"${name}" has been updated.` });
        
        setIsDialogOpen(false);
        setEditingCity(null);
    };
    
    if (isLoadingBusinesses || isLoadingCities || isLoadingCountries) {
        return <p>Loading...</p>
    }

    return (
        <>
            <Card>
                <CardHeader>
                    <div className="flex items-center justify-between">
                        <div>
                            <CardTitle>Cities</CardTitle>
                            <CardDescription>Manage all available cities.</CardDescription>
                        </div>
                        <Button asChild size="sm" className="gap-1">
                            <Link href="/admin/cities/add">
                                <PlusCircle className="h-4 w-4" />
                                Add New City
                            </Link>
                        </Button>
                    </div>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Name</TableHead>
                                <TableHead>Country</TableHead>
                                <TableHead>Businesses</TableHead>
                                <TableHead>Active</TableHead>
                                <TableHead>
                                    <span className="sr-only">Actions</span>
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {enrichedCities.map((city) => (
                                <TableRow key={city.id}>
                                    <TableCell className="font-medium">{city.name}</TableCell>
                                    <TableCell>{city.countryName}</TableCell>
                                    <TableCell>{city.businessCount}</TableCell>
                                    <TableCell>
                                        <Switch
                                            checked={city.isActive}
                                            onCheckedChange={(checked) => handleActiveChange(city.id, checked)}
                                        />
                                    </TableCell>
                                    <TableCell>
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button aria-haspopup="true" size="icon" variant="ghost">
                                                    <MoreHorizontal className="h-4 w-4" />
                                                    <span className="sr-only">Toggle menu</span>
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem onClick={() => handleOpenDialog(city)}>
                                                    <Edit className="mr-2 h-4 w-4" />
                                                    Edit
                                                </DropdownMenuItem>
                                                <DropdownMenuItem className="text-destructive">
                                                    <Trash2 className="mr-2 h-4 w-4" />
                                                    Delete
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                <DialogContent>
                    <form onSubmit={handleSubmit}>
                        <DialogHeader>
                            <DialogTitle>Edit City</DialogTitle>
                            <DialogDescription>Update the details for this city.</DialogDescription>
                        </DialogHeader>
                        {editingCity && (
                            <div className="space-y-4 py-4">
                                <div className="space-y-2">
                                    <Label htmlFor="name">City Name</Label>
                                    <Input id="name" name="name" placeholder="e.g. New York" defaultValue={editingCity?.name} required />
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="country">Country</Label>
                                    <Select name="country" defaultValue={editingCity?.countryId} required>
                                        <SelectTrigger id="country">
                                            <SelectValue placeholder="Select a country" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {countries?.map(country => (
                                                <SelectItem key={country.id} value={country.id}>{country.name}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>
                        )}
                        <DialogFooter>
                            <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>Cancel</Button>
                            {editingCity && <Button type="submit">Save Changes</Button>}
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
}