'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 { MoreHorizontal, Trash2, Eye } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Switch } from "@/components/ui/switch";
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 StarRating from '@/components/star-rating';
import Link from 'next/link';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection, doc, updateDoc } from 'firebase/firestore';
import type { Review, Business } from '@/lib/types';
import { format } from 'date-fns';
import { updateDocumentNonBlocking } from '@/firebase/non-blocking-updates';

interface EnrichedReview extends Review {
    businessName: string;
    businessSlug: string;
    isVisible: boolean; // Assuming this logic will be added if needed
}

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

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

    const enrichedReviews = useMemo(() => {
        if (!reviews || !businesses) return [];
        return reviews.map(review => {
            const business = businesses.find(b => b.id === review.businessId);
            return {
                ...review,
                businessName: business?.name || 'Unknown Business',
                businessSlug: business?.slug || '',
                isVisible: true, // Placeholder, implement logic if needed
            };
        }).sort((a,b) => b.createdAt.toDate().getTime() - a.createdAt.toDate().getTime());
    }, [reviews, businesses]);

    const handleVisibilityChange = (reviewId: string, isVisible: boolean) => {
        if (!firestore) return;
        // In a real app, the review would be in a subcollection, e.g. /businesses/{businessId}/reviews/{reviewId}
        // This is a simplification.
        const reviewDoc = doc(firestore, 'reviews', reviewId);
        updateDocumentNonBlocking(reviewDoc, { isVisible });
    };

    const handleViewDetails = (review: EnrichedReview) => {
        setSelectedReview(review);
    };

    if (isLoadingReviews || isLoadingBusinesses) {
        return <p>Loading reviews...</p>;
    }

    return (
        <>
            <Card>
                <CardHeader>
                    <CardTitle>Reviews</CardTitle>
                    <CardDescription>Manage all user-submitted reviews.</CardDescription>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>User</TableHead>
                                <TableHead>Business</TableHead>
                                <TableHead>Rating</TableHead>
                                <TableHead className="w-1/3">Comment</TableHead>
                                <TableHead>Visible</TableHead>
                                <TableHead>
                                    <span className="sr-only">Actions</span>
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {enrichedReviews.map((review) => (
                                <TableRow key={review.id}>
                                    <TableCell>
                                        <div className="flex items-center gap-3">
                                            <Avatar className="h-9 w-9">
                                                <AvatarImage src={review.userAvatar} alt={review.userName} />
                                                <AvatarFallback>{review.userName.charAt(0)}</AvatarFallback>
                                            </Avatar>
                                            <div>
                                                <p className="font-medium">{review.userName}</p>
                                                <p className="text-xs text-muted-foreground">{format(review.createdAt.toDate(), 'PPP')}</p>
                                            </div>
                                        </div>
                                    </TableCell>
                                    <TableCell>
                                        <Link href={`/businesses/${review.businessSlug}`} className="font-medium hover:underline text-accent">
                                          {review.businessName}
                                        </Link>
                                    </TableCell>
                                    <TableCell>
                                        <StarRating rating={review.rating} starClassName='h-4 w-4' />
                                    </TableCell>
                                    <TableCell>
                                        <p className="line-clamp-2 text-sm italic">"{review.comment}"</p>
                                    </TableCell>
                                    <TableCell>
                                        <Switch
                                            checked={review.isVisible}
                                            onCheckedChange={(checked) => handleVisibilityChange(review.id, checked)}
                                        />
                                    </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(review)}>
                                                    <Eye className="mr-2 h-4 w-4" />
                                                    View Details
                                                </DropdownMenuItem>
                                                <DropdownMenuItem className="text-destructive">
                                                    <Trash2 className="mr-2 h-4 w-4" />
                                                    Delete
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            {selectedReview && (
                <Dialog open={!!selectedReview} onOpenChange={(isOpen) => !isOpen && setSelectedReview(null)}>
                    <DialogContent className="sm:max-w-md">
                        <DialogHeader>
                            <DialogTitle>Review Details</DialogTitle>
                            <DialogDescription>
                                Full details for the review on <Link href={`/businesses/${selectedReview.businessSlug}`} className="font-medium text-accent hover:underline">{selectedReview.businessName}</Link>.
                            </DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4 py-4">
                            <div className="flex items-center gap-4">
                                <Avatar className="h-12 w-12">
                                    <AvatarImage src={selectedReview.userAvatar} alt={selectedReview.userName} />
                                    <AvatarFallback>{selectedReview.userName.charAt(0)}</AvatarFallback>
                                </Avatar>
                                <div>
                                    <p className="font-bold text-lg text-primary">{selectedReview.userName}</p>
                                    <p className="text-sm text-muted-foreground">{format(selectedReview.createdAt.toDate(), 'PPP')}</p>
                                </div>
                                <div className="ml-auto">
                                    <StarRating rating={selectedReview.rating} />
                                </div>
                            </div>
                            <div className="rounded-md border bg-muted/50 p-4">
                                <p className="italic text-foreground">"{selectedReview.comment}"</p>
                            </div>
                        </div>
                        <DialogFooter>
                            <Button variant="outline" onClick={() => setSelectedReview(null)}>Close</Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            )}
        </>
    );
}