'use client';
import { notFound, useParams } from 'next/navigation';
import Image from 'next/image';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import StarRating from '@/components/star-rating';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
import ReviewForm from './review-form';
import { Clock, Globe, MapPin, Phone } from 'lucide-react';
import { useDoc, useCollection, useFirestore, useMemoFirebase } from '@/firebase';
import { collection, doc, query, where, limit, getDocs } from 'firebase/firestore';
import { useEffect, useState } from 'react';
import type { Business, Review } from '@/lib/types';
import { format } from 'date-fns';
import { Skeleton } from '@/components/ui/skeleton';

function BusinessDetailPage() {
  const params = useParams();
  const slug = params.slug as string;
  const firestore = useFirestore();
  
  const [business, setBusiness] = useState<Business | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
      if (!firestore || !slug) return;
      const getBusiness = async () => {
          setIsLoading(true);
          const q = query(collection(firestore, 'businesses'), where('slug', '==', slug), limit(1));
          const querySnapshot = await getDocs(q);
          if (!querySnapshot.empty) {
              const businessDoc = querySnapshot.docs[0];
              setBusiness({ id: businessDoc.id, ...businessDoc.data() } as Business);
          } else {
              notFound();
          }
          setIsLoading(false);
      }
      getBusiness();
  }, [firestore, slug]);

  const reviewsQuery = useMemoFirebase(() => {
    if (!firestore || !business) return null;
    return collection(firestore, `businesses/${business.id}/reviews`);
  }, [firestore, business]);

  const { data: reviews } = useCollection<Review>(reviewsQuery);

  if (isLoading || !business) {
    return (
        <div className="container mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
            <Skeleton className="h-48 w-full md:h-64" />
            <div className="relative -mt-16 flex flex-col items-start md:-mt-20 md:flex-row md:items-end md:gap-6">
                <Skeleton className="h-32 w-32 rounded-full border-4 border-background md:h-40 md:w-40" />
                <div className="mt-4 w-full md:mt-0 md:w-auto md:pb-4">
                    <Skeleton className="h-12 w-80" />
                    <Skeleton className="mt-2 h-6 w-48" />
                </div>
            </div>
        </div>
    );
  }

  return (
    <div className="bg-background">
      <div className="relative h-48 bg-muted md:h-64">
        <Image
          src={business.coverImageUrl}
          alt={`${business.name} cover image`}
          fill
          className="object-cover"
          data-ai-hint="business cover"
        />
        <div className="absolute inset-0 bg-black/40" />
      </div>

      <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="relative -mt-16 flex flex-col items-start md:-mt-20 md:flex-row md:items-end md:gap-6">
          <Avatar className="h-32 w-32 border-4 border-background md:h-40 md:w-40">
            <AvatarImage src={business.logoUrl} alt={`${business.name} logo`} />
            <AvatarFallback>{business.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div className="mt-4 w-full md:mt-0 md:w-auto md:pb-4">
            <h1 className="text-3xl font-extrabold tracking-tight text-primary md:text-4xl lg:text-5xl">{business.name}</h1>
            <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2">
                <Badge variant="secondary" className="text-base">{business.category}</Badge>
                <div className="flex items-center gap-2">
                    <StarRating rating={business.rating} />
                    <span className="font-bold text-primary">{business.rating.toFixed(1)}</span>
                    <span className="text-sm text-muted-foreground">({business.reviewCount} reviews)</span>
                </div>
            </div>
          </div>
        </div>

        <div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-3">
          <div className="md:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle className="text-2xl text-primary">About {business.name}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">{business.description}</p>
              </CardContent>
            </Card>

            <Card className="mt-8">
              <CardHeader>
                <CardTitle className="text-2xl text-primary">Services</CardTitle>
              </CardHeader>
              <CardContent className="flex flex-wrap gap-2">
                {business.services.map((service, index) => (
                  <Badge key={index} variant="outline" className="text-lg">{service}</Badge>
                ))}
              </CardContent>
            </Card>
          </div>
          
          <div className="space-y-8">
            <Card>
              <CardHeader>
                <CardTitle className="text-2xl text-primary">Contact & Hours</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4 text-muted-foreground">
                <div className="flex items-start gap-3">
                  <MapPin className="mt-1 h-5 w-5 flex-shrink-0 text-accent" /> <span>{business.address}</span>
                </div>
                <div className="flex items-start gap-3">
                  <Phone className="mt-1 h-5 w-5 flex-shrink-0 text-accent" /> <span>{business.phone}</span>
                </div>
                <div className="flex items-start gap-3">
                  <Globe className="mt-1 h-5 w-5 flex-shrink-0 text-accent" /> <a href={business.website} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">{business.website}</a>
                </div>
                <Separator className="my-4" />
                <div className="flex items-start gap-3">
                  <Clock className="mt-1 h-5 w-5 flex-shrink-0 text-accent" />
                  <ul className="space-y-1">
                    {business.openingHours.map(item => (
                      <li key={item.day}><span className="font-semibold text-foreground">{item.day}:</span> {item.hours}</li>
                    ))}
                  </ul>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        <div className="mt-12">
            <h2 className="mb-6 text-3xl font-bold text-primary">Reviews</h2>
            <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
                <div className="space-y-6">
                    {(reviews || []).map(review => (
                        <Card key={review.id}>
                            <CardContent className="p-6">
                                <div className="flex items-center gap-4">
                                    <Avatar>
                                        <AvatarImage src={review.userAvatar} alt={review.userName} />
                                        <AvatarFallback>{review.userName.charAt(0)}</AvatarFallback>
                                    </Avatar>
                                    <div>
                                        <p className="font-bold text-primary">{review.userName}</p>
                                        <p className="text-sm text-muted-foreground">{format(review.createdAt.toDate(), 'MMMM d, yyyy')}</p>
                                    </div>
                                    <div className="ml-auto">
                                        <StarRating rating={review.rating} />
                                    </div>
                                </div>
                                <p className="mt-4 italic text-muted-foreground">"{review.comment}"</p>
                            </CardContent>
                        </Card>
                    ))}
                </div>
                <div>
                  <ReviewForm businessId={business.id} />
                </div>
            </div>
        </div>
      </div>
    </div>
  );
}

export default BusinessDetailPage;