'use client';

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import Image from 'next/image';
import StarRating from '@/components/star-rating';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import Link from 'next/link';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Edit, PlusCircle, Rocket } from 'lucide-react';
import PromoteDialog from './promote-dialog';
import type { Business, Review, User } from '@/lib/types';
import { useUser, useFirestore, useDoc, useCollection, useMemoFirebase } from '@/firebase';
import { doc, collection, query, where, Timestamp } from 'firebase/firestore';
import { format } from 'date-fns';
import { Skeleton } from '@/components/ui/skeleton';

export default function MyProfilePage() {
  const { user, isUserLoading } = useUser();
  const firestore = useFirestore();
  const [isPromoteDialogOpen, setIsPromoteDialogOpen] = useState(false);
  const [selectedBusiness, setSelectedBusiness] = useState<Business | null>(null);

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

  const userBusinessesQuery = useMemoFirebase(() => user ? query(collection(firestore, 'businesses'), where('createdBy', '==', user.uid)) : null, [user, firestore]);
  const { data: userBusinesses, isLoading: areBusinessesLoading } = useCollection<Business>(userBusinessesQuery);
  
  const userReviewsQuery = useMemoFirebase(() => user ? query(collection(firestore, 'reviews'), where('userId', '==', user.uid)) : null, [user, firestore]);
  const { data: userReviews, isLoading: areReviewsLoading } = useCollection<Review>(userReviewsQuery);

  if (isUserLoading || isCurrentUserLoading) {
    return (
        <div className="container mx-auto max-w-5xl 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 className='space-y-2'>
                    <Skeleton className="h-8 w-48" />
                    <Skeleton className="h-4 w-64" />
                </div>
            </header>
            <Skeleton className="h-10 w-full mb-6" />
            <Card>
                <CardHeader>
                    <Skeleton className="h-6 w-40" />
                    <Skeleton className="h-4 w-52" />
                </CardHeader>
                <CardContent className="p-8 text-center">
                    <Skeleton className="h-5 w-1/2 mx-auto" />
                </CardContent>
            </Card>
        </div>
    );
  }

  if (!user || !currentUser) {
    return (
        <div className="container mx-auto max-w-5xl px-4 py-12 text-center">
            <p className='text-lg text-muted-foreground'>Please log in to see your profile.</p>
            <Button asChild className='mt-4'>
                <Link href="/login">Login</Link>
            </Button>
        </div>
    );
  }
  
  const handlePromoteClick = (business: Business) => {
    setSelectedBusiness(business);
    setIsPromoteDialogOpen(true);
  };

  return (
    <>
      <div className="container mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8">
        <header className="mb-8">
            <div className='flex items-center gap-4'>
                <Avatar className='h-20 w-20'>
                    <AvatarImage src={currentUser.avatarUrl} alt={currentUser.name} />
                    <AvatarFallback>{currentUser.name?.charAt(0)}</AvatarFallback>
                </Avatar>
                <div>
                    <h1 className="text-3xl font-bold font-headline text-primary md:text-4xl">{currentUser.name}</h1>
                    <p className="mt-1 text-muted-foreground">{currentUser.email}</p>
                </div>
            </div>
        </header>

        <Tabs defaultValue="profile">
            <TabsList className="mb-6 grid w-full grid-cols-2">
                <TabsTrigger value="profile">My Businesses ({userBusinesses?.length || 0})</TabsTrigger>
                <TabsTrigger value="reviews">My Reviews ({userReviews?.length || 0})</TabsTrigger>
            </TabsList>
            
            <TabsContent value="profile">
                <Card>
                    <CardHeader>
                        <div className="flex items-center justify-between">
                            <div>
                                <CardTitle>My Businesses</CardTitle>
                                <CardDescription>Manage your business listings.</CardDescription>
                            </div>
                            <Button asChild>
                                <Link href="/add-business">
                                    <PlusCircle className='mr-2 h-4 w-4' />
                                    Add New Business
                                </Link>
                            </Button>
                        </div>
                    </CardHeader>
                    <CardContent>
                        {areBusinessesLoading ? (
                            <p>Loading businesses...</p>
                        ) : userBusinesses && userBusinesses.length > 0 ? (
                            <div className="space-y-4">
                                {userBusinesses.map(business => (
                                    <Card key={business.id} className="flex flex-col items-start gap-4 p-4 sm:flex-row">
                                        <Image
                                            src={business.logoUrl}
                                            alt={business.name}
                                            width={128}
                                            height={128}
                                            className="aspect-square w-full rounded-md object-cover sm:w-32"
                                        />
                                        <div className="flex-grow">
                                            <h3 className="text-lg font-semibold text-primary">{business.name}</h3>
                                            <p className="text-sm text-muted-foreground">{business.description}</p>
                                        </div>
                                        <div className="flex w-full shrink-0 flex-col gap-2 sm:w-auto">
                                            <Button variant="outline" asChild>
                                                <Link href={`/admin/businesses/edit/${business.id}`}>
                                                    <Edit className="mr-2 h-4 w-4" /> Edit
                                                </Link>
                                            </Button>
                                            <Button className='bg-accent hover:bg-accent/90' onClick={() => handlePromoteClick(business)}>
                                                <Rocket className="mr-2 h-4 w-4" /> Promote
                                            </Button>
                                        </div>
                                    </Card>
                                ))}
                            </div>
                        ) : (
                            <div className="py-8 text-center text-muted-foreground">
                                <p>You haven't listed any businesses yet.</p>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </TabsContent>

            <TabsContent value="reviews">
                <div className="space-y-6">
                    {areReviewsLoading ? (
                        <p>Loading reviews...</p>
                    ) : userReviews && userReviews.length > 0 ? (
                    userReviews.map((review) => (
                        <Card key={review.id} className="overflow-hidden">
                        <div className="flex">
                            <div className="w-full">
                            <CardHeader>
                                {/* Need to get business name and slug from businessId */}
                                <CardTitle className="text-xl text-primary">{review.businessId}</CardTitle>
                                <div className="flex items-center gap-2 pt-1 text-sm text-muted-foreground">
                                <StarRating rating={review.rating} />
                                <span className="font-semibold">{review.rating.toFixed(1)}</span>
                                <span>&middot;</span>
                                <span>{review.createdAt ? format(review.createdAt.toDate(), 'MMMM d, yyyy') : 'Date unavailable'}</span>
                                </div>
                            </CardHeader>
                            <CardContent>
                                <p className="italic text-foreground">"{review.comment}"</p>
                            </CardContent>
                            </div>
                        </div>
                        </Card>
                    ))
                    ) : (
                    <Card>
                        <CardContent className="p-8 text-center">
                        <p className="text-muted-foreground">You haven't written any reviews yet.</p>
                        </CardContent>
                    </Card>
                    )}
                </div>
            </TabsContent>
        </Tabs>
      </div>

      {selectedBusiness && (
          <PromoteDialog
              isOpen={isPromoteDialogOpen}
              onOpenChange={setIsPromoteDialogOpen}
              business={selectedBusiness}
          />
      )}
    </>
  );
}