'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import Link from 'next/link';
import { ChevronLeft } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useFirestore } from '@/firebase';
import { collection, serverTimestamp } from 'firebase/firestore';
import { addDocumentNonBlocking } from '@/firebase/non-blocking-updates';

export default function AddCountryPage() {
  const { toast } = useToast();
  const router = useRouter();
  const firestore = useFirestore();

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!firestore) {
      toast({ title: 'Error', description: 'Database not available.', variant: 'destructive' });
      return;
    }
    const formData = new FormData(e.currentTarget);
    const countryName = formData.get('country-name') as string;

    addDocumentNonBlocking(collection(firestore, 'countries'), {
      name: countryName,
      createdAt: serverTimestamp(),
    });

    toast({
      title: 'Country Added!',
      description: `The country "${countryName}" has been created.`,
    });

    router.push('/admin/countries');
  };

  return (
    <div className="mx-auto grid max-w-2xl flex-1 auto-rows-max gap-4">
        <div className="flex items-center gap-4">
            <Button variant="outline" size="icon" className="h-7 w-7" asChild>
                <Link href="/admin/countries">
                    <ChevronLeft className="h-4 w-4" />
                    <span className="sr-only">Back</span>
                </Link>
            </Button>
            <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
            Add New Country
            </h1>
        </div>
        <form onSubmit={handleSubmit} className="grid gap-4">
            <Card>
                <CardHeader>
                    <CardTitle>Country Details</CardTitle>
                    <CardDescription>Fill in the details for the new country.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                    <div className="space-y-2">
                        <Label htmlFor="country-name">Country Name</Label>
                        <Input id="country-name" name="country-name" placeholder="e.g. United States" required />
                    </div>
                </CardContent>
            </Card>

            <Button type="submit">Add Country</Button>
        </form>
    </div>
  );
}