'use client';

import { notFound, useParams } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import BusinessCard from '@/components/business-card';
import { Separator } from '@/components/ui/separator';
import Image from 'next/image';
import { useCollection, useFirestore, useMemoFirebase } from '@/firebase';
import { collection, query, where, getDocs, limit } from 'firebase/firestore';
import type { Business, Category } from '@/lib/types';
import { useEffect, useState } from 'react';
import { Skeleton } from '@/components/ui/skeleton';

export default function CategoryPage() {
  const params = useParams();
  const slug = params.slug as string;
  const firestore = useFirestore();
  
  const [category, setCategory] = useState<Category | null>(null);
  const [isLoadingCategory, setIsLoadingCategory] = useState(true);

  useEffect(() => {
    if (!firestore || !slug) return;
    const getCategory = async () => {
        setIsLoadingCategory(true);
        const categoryQuery = query(collection(firestore, 'categories'), where('name', '==', slug.charAt(0).toUpperCase() + slug.slice(1)), limit(1));
        const categorySnapshot = await getDocs(categoryQuery);
        if (!categorySnapshot.empty) {
            const categoryDoc = categorySnapshot.docs[0];
            setCategory({ id: categoryDoc.id, ...categoryDoc.data() } as Category);
        } else {
            notFound();
        }
        setIsLoadingCategory(false);
    };
    getCategory();
  }, [firestore, slug]);


  const businessesQuery = useMemoFirebase(() => {
    if (!firestore || !category) return null;
    return query(
        collection(firestore, 'businesses'), 
        where('category', '==', category.name),
        where('status', '==', 'active')
    );
  }, [firestore, category]);

  const { data: businesses, isLoading: isLoadingBusinesses } = useCollection<Business>(businessesQuery);
  
  const featuredBusinesses = businesses?.filter(b => b.subscriptionId);
  const regularBusinesses = businesses?.filter(b => !b.subscriptionId);

  if (isLoadingCategory) {
    return (
        <div className="container mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
            <header className="mb-8 flex items-center gap-4">
                <Skeleton className="h-20 w-20 rounded-full" />
                <div>
                    <Skeleton className="h-10 w-48" />
                    <Skeleton className="mt-2 h-4 w-64" />
                </div>
            </header>
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-80 w-full" />)}
            </div>
        </div>
    );
  }

  if (!category) {
    notFound();
  }

  return (
    <div className="container mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
      <header className="mb-8 flex items-center gap-4 md:text-left">
        <div className="relative h-20 w-20 flex-shrink-0">
            <Image 
                src={category.imageUrl}
                alt={category.name}
                fill
                className="rounded-full object-cover"
            />
        </div>
        <div>
            <h1 className="text-3xl font-bold font-headline text-primary md:text-4xl">{category.name}</h1>
            <p className="mt-1 text-muted-foreground">Browse businesses in the {category.name} category.</p>
        </div>
      </header>
      
      {featuredBusinesses && featuredBusinesses.length > 0 && (
        <section className='mb-12'>
            <h2 className="mb-6 text-2xl font-bold font-headline text-primary">Featured Businesses</h2>
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                {featuredBusinesses.map((business) => (
                    <BusinessCard key={business.id} business={business} isFeatured />
                ))}
            </div>
        </section>
      )}

      {featuredBusinesses && featuredBusinesses.length > 0 && regularBusinesses && regularBusinesses.length > 0 && <Separator className="my-12" />}

      {isLoadingBusinesses && <p>Loading businesses...</p>}

      {regularBusinesses && regularBusinesses.length > 0 && (
        <section>
             <h2 className="mb-6 text-2xl font-bold font-headline text-primary">All Businesses</h2>
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                {regularBusinesses.map((business) => (
                    <BusinessCard key={business.id} business={business} />
                ))}
            </div>
        </section>
      )}

      {!isLoadingBusinesses && businesses && businesses.length === 0 && (
          <Card>
            <CardContent className='p-8 text-center'>
                <p className='text-muted-foreground'>No businesses found in this category yet.</p>
            </CardContent>
          </Card>
      )}
    </div>
  );
}