'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 { Eye, MoreHorizontal, Briefcase, MessageSquare } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import type { User, Review, Business } from '@/lib/types';
import { Badge } from '@/components/ui/badge';
import Link from 'next/link';
import StarRating from '@/components/star-rating';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection, query, where, getDocs, doc } from 'firebase/firestore';
import { format } from 'date-fns';

interface UserDetails extends User {
    businesses: Business[];
    reviews: (Review & { businessName: string; businessSlug: string })[];
}

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

    const usersQuery = useMemoFirebase(() => firestore ? collection(firestore, 'users') : null, [firestore]);
    const { data: users, isLoading: isLoadingUsers } = useCollection<User>(usersQuery);

    const businessesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'businesses') : null, [firestore]);
    const { data: businesses, isLoading: isLoadingBusinesses } = useCollection<Business>(businessesQuery);
    
    const reviewsQuery = useMemoFirebase(() => firestore ? collection(firestore, 'reviews') : null, [firestore]);
    const { data: reviews, isLoading: isLoadingReviews } = useCollection<Review>(reviewsQuery);

    const [selectedUser, setSelectedUser] = useState<UserDetails | null>(null);

    const enrichedUsers = useMemo(() => {
        if (!users || !businesses || !reviews) return [];
        
        const businessOwners = new Set(businesses.map(b => b.createdBy));
        const reviewCounts = reviews.reduce((acc, review) => {
            acc.set(review.userId, (acc.get(review.userId) || 0) + 1);
            return acc;
        }, new Map<string, number>());

        return users.map(user => ({
            ...user,
            hasBusiness: businessOwners.has(user.id),
            reviewCount: reviewCounts.get(user.id) || 0,
        }));
    }, [users, businesses, reviews]);

    const handleViewDetails = (user: User) => {
        const userBusinesses = businesses?.filter(b => b.createdBy === user.id) || [];
        const userReviews = reviews?.filter(r => r.userId === user.id)
            .map(r => {
                const business = businesses?.find(b => b.id === r.businessId);
                return {
                    ...r, 
                    businessName: business?.name || 'N/A', 
                    businessSlug: business?.slug || ''
                }
            }) || [];
        
        setSelectedUser({
            ...user,
            businesses: userBusinesses,
            reviews: userReviews,
        });
    };
    
    if (isLoadingUsers || isLoadingBusinesses || isLoadingReviews) {
        return <p>Loading...</p>;
    }

    return (
        <>
            <Card>
                <CardHeader>
                    <div className="flex items-center justify-between">
                        <div>
                            <CardTitle>Users</CardTitle>
                            <CardDescription>Manage all registered users in the system.</CardDescription>
                        </div>
                    </div>
                </CardHeader>
                <CardContent>
                <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>User</TableHead>
                                <TableHead>Email</TableHead>
                                <TableHead>Has Business</TableHead>
                                <TableHead>Total Reviews</TableHead>
                                <TableHead className="hidden md:table-cell">Joined Date</TableHead>
                                <TableHead>
                                    <span className="sr-only">Actions</span>
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {enrichedUsers.map((user) => (
                            <TableRow key={user.id}>
                                <TableCell>
                                    <div className="flex items-center gap-3">
                                        <Avatar>
                                            <AvatarImage src={user.avatarUrl} alt={user.name} />
                                            <AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>
                                        </Avatar>
                                        <span className='font-medium'>{user.name}</span>
                                    </div>
                                </TableCell>
                                <TableCell>
                                    {user.email}
                                </TableCell>
                                <TableCell>
                                    {user.hasBusiness ? (
                                        <Badge>Yes</Badge>
                                    ) : (
                                        <Badge variant="secondary">No</Badge>
                                    )}
                                </TableCell>
                                <TableCell>
                                    {user.reviewCount}
                                </TableCell>
                                <TableCell className="hidden md:table-cell">
                                    {user.joinedDate ? format(user.joinedDate.toDate(), 'PPP') : 'N/A'}
                                </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={() => handleViewDetails(user)}>
                                            <Eye className="mr-2 h-4 w-4" />
                                            View Details
                                        </DropdownMenuItem>
                                        </DropdownMenuContent>
                                    </DropdownMenu>
                                </TableCell>
                            </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>
            
            {selectedUser && (
                <Dialog open={!!selectedUser} onOpenChange={(isOpen) => !isOpen && setSelectedUser(null)}>
                    <DialogContent className="max-w-2xl">
                        <DialogHeader>
                            <DialogTitle>User Details</DialogTitle>
                            <DialogDescription>
                                A summary of {selectedUser.name}'s activity.
                            </DialogDescription>
                        </DialogHeader>
                        <div className="grid grid-cols-1 gap-6 py-4 md:grid-cols-3">
                            <div className="col-span-1 flex flex-col items-center text-center md:items-start md:text-left">
                                <Avatar className="h-24 w-24">
                                    <AvatarImage src={selectedUser.avatarUrl} alt={selectedUser.name} />
                                    <AvatarFallback>{selectedUser.name?.charAt(0)}</AvatarFallback>
                                </Avatar>
                                <h2 className="mt-4 text-xl font-bold text-primary">{selectedUser.name}</h2>
                                <p className="text-sm text-muted-foreground">{selectedUser.email}</p>
                                <p className="mt-2 text-xs text-muted-foreground">Joined: {selectedUser.joinedDate ? format(selectedUser.joinedDate.toDate(), 'PPP') : 'N/A'}</p>

                                <div className="mt-6 flex w-full flex-col gap-3 text-sm">
                                    <div className="flex items-center justify-between rounded-lg bg-muted p-3">
                                        <div className="flex items-center gap-2">
                                            <Briefcase className="h-4 w-4 text-muted-foreground" />
                                            <span className="font-medium text-primary">Businesses</span>
                                        </div>
                                        <span className="font-bold">{selectedUser.businesses.length}</span>
                                    </div>
                                    <div className="flex items-center justify-between rounded-lg bg-muted p-3">
                                        <div className="flex items-center gap-2">
                                            <MessageSquare className="h-4 w-4 text-muted-foreground" />
                                            <span className="font-medium text-primary">Reviews</span>
                                        </div>
                                        <span className="font-bold">{selectedUser.reviews.length}</span>
                                    </div>
                                </div>
                            </div>
                            <div className="col-span-2 space-y-6">
                                <div>
                                    <h3 className="mb-2 font-semibold text-primary">Businesses Owned</h3>
                                    {selectedUser.businesses.length > 0 ? (
                                        <div className="space-y-2">
                                            {selectedUser.businesses.map(business => (
                                                <Card key={business.id}>
                                                    <CardContent className="p-3">
                                                        <Link href={`/businesses/${business.slug}`} className="font-medium text-accent hover:underline">{business.name}</Link>
                                                        <p className="text-sm text-muted-foreground">{business.category}</p>
                                                    </CardContent>
                                                </Card>
                                            ))}
                                        </div>
                                    ) : (
                                        <p className="text-sm text-muted-foreground">This user does not own any businesses.</p>
                                    )}
                                </div>
                                <div>
                                    <h3 className="mb-2 font-semibold text-primary">Recent Reviews</h3>
                                    {selectedUser.reviews.length > 0 ? (
                                        <div className="max-h-60 space-y-3 overflow-y-auto pr-2">
                                            {selectedUser.reviews.map(review => (
                                                <Card key={review.id}>
                                                    <CardContent className="p-3">
                                                        <div className="flex justify-between text-sm">
                                                            <Link href={`/businesses/${review.businessSlug}`} className="font-medium text-accent hover:underline">{review.businessName}</Link>
                                                            <StarRating rating={review.rating} starClassName="h-4 w-4" />
                                                        </div>
                                                        <p className="mt-2 italic text-muted-foreground">"{review.comment}"</p>
                                                    </CardContent>
                                                </Card>
                                            ))}
                                        </div>
                                    ) : (
                                        <p className="text-sm text-muted-foreground">This user has not written any reviews.</p>
                                    )}
                                </div>
                            </div>
                        </div>
                        <DialogFooter>
                            <Button variant="outline" onClick={() => setSelectedUser(null)}>Close</Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            )}
        </>
    );
}