'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 { PlusCircle, MoreHorizontal, Edit, Trash2, CheckCircle, XCircle, Eye } from "lucide-react";
import Link from "next/link";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import Image from 'next/image';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import type { Business, BusinessSubscription } from '@/lib/types';
import { useToast } from '@/hooks/use-toast';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection, query, doc, updateDoc } from 'firebase/firestore';
import { updateDocumentNonBlocking } from '@/firebase/non-blocking-updates';
import { Switch } from '@/components/ui/switch';

const getStatusVariant = (status: Business['status']) => {
    switch (status) {
        case 'active': return { variant: "default", label: "Active" } as const;
        case 'pending': return { variant: "secondary", label: "Pending" } as const;
        case 'rejected': return { variant: "destructive", label: "Rejected" } as const;
        default: return { variant: "outline", label: "Unknown" } as const;
    }
};

export default function AdminBusinessesPage() {
    const { toast } = useToast();
    const firestore = useFirestore();

    const businessesQuery = useMemoFirebase(() => firestore ? collection(firestore, 'businesses') : null, [firestore]);
    const { data: businesses, isLoading: isLoadingBusinesses } = useCollection<Business>(businessesQuery);
    
    const subscriptionsQuery = useMemoFirebase(() => firestore ? collection(firestore, 'businessSubscriptions') : null, [firestore]);
    const { data: businessSubscriptions } = useCollection<BusinessSubscription>(subscriptionsQuery);


    const handleApprovalAction = (businessId: string, newStatus: 'active' | 'rejected') => {
        if (!firestore) return;
        const businessDocRef = doc(firestore, 'businesses', businessId);
        updateDocumentNonBlocking(businessDocRef, { status: newStatus });
        
        const businessName = businesses?.find(b => b.id === businessId)?.name;
        if (newStatus === 'active') {
            toast({
                title: "Business Approved!",
                description: `"${businessName}" is now active and visible on the site.`,
            });
        } else {
            toast({
                title: "Business Rejected",
                variant: "destructive",
                description: `"${businessName}" has been rejected.`,
            });
        }
    };
    
    const handleFeaturedChange = (businessId: string, isFeatured: boolean) => {
        if(!firestore) return;
        const businessDoc = doc(firestore, 'businesses', businessId);
        updateDocumentNonBlocking(businessDoc, { isFeatured: isFeatured });
    };

    const businessesWithFeaturedStatus = useMemo(() => {
        if (!businesses || !businessSubscriptions) return [];
        const activeSubIds = new Set(businessSubscriptions
            .filter(sub => sub.status === 'active' && sub.expiryDate && sub.expiryDate.toDate() > new Date())
            .map(sub => sub.businessId));
        
        return businesses.map(b => ({
            ...b,
            hasActiveSubscription: activeSubIds.has(b.id)
        })).sort((a, b) => {
            if (a.status === 'pending') return -1;
            if (b.status === 'pending') return 1;
            return 0;
        });
    }, [businesses, businessSubscriptions]);

    if (isLoadingBusinesses) {
        return <p>Loading Businesses...</p>
    }

    return (
        <Card>
            <CardHeader>
                <div className="flex items-center justify-between">
                    <div>
                        <CardTitle>Businesses</CardTitle>
                        <CardDescription>Manage and approve all registered businesses.</CardDescription>
                    </div>
                    <Button asChild size="sm" className="gap-1">
                      <Link href="/admin/businesses/add">
                        <PlusCircle className="h-4 w-4" />
                        Add New Business
                      </Link>
                    </Button>
                </div>
            </CardHeader>
            <CardContent>
               <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead className="hidden w-[100px] sm:table-cell">
                                <span className="sr-only">Logo</span>
                            </TableHead>
                            <TableHead>Name</TableHead>
                            <TableHead>Category</TableHead>
                            <TableHead>Status</TableHead>
                            <TableHead>Featured</TableHead>
                             <TableHead className="hidden md:table-cell">
                                Created by
                            </TableHead>
                            <TableHead className="text-right">Actions</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {businessesWithFeaturedStatus.map((business) => {
                            const statusInfo = getStatusVariant(business.status);
                            const isFeatured = business.hasActiveSubscription || business.isFeatured;
                            return (
                                <TableRow key={business.id}>
                                    <TableCell className="hidden sm:table-cell">
                                        <Image
                                            alt={business.name}
                                            className="aspect-square rounded-md object-cover"
                                            height="64"
                                            src={business.logoUrl}
                                            width="64"
                                            data-ai-hint={business.imageHint}
                                        />
                                    </TableCell>
                                    <TableCell className="font-medium">
                                        {business.name}
                                        {isFeatured && <Badge className="ml-2">Featured</Badge>}
                                    </TableCell>
                                    <TableCell>
                                        <Badge variant="outline">{business.category}</Badge>
                                    </TableCell>
                                    <TableCell>
                                       <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
                                    </TableCell>
                                    <TableCell>
                                        <Switch
                                            checked={business.isFeatured}
                                            onCheckedChange={(checked) => handleFeaturedChange(business.id, checked)}
                                            aria-label="Toggle Featured"
                                            disabled={business.hasActiveSubscription}
                                        />
                                    </TableCell>
                                    <TableCell className="hidden md:table-cell">
                                        {business.createdBy}
                                    </TableCell>
                                    <TableCell className="text-right">
                                        {business.status === 'pending' ? (
                                            <div className="flex justify-end gap-2">
                                                <Button size="sm" variant="outline" asChild>
                                                    <Link href={`/businesses/${business.slug}`} target="_blank">
                                                        <Eye className="mr-2 h-4 w-4" /> View
                                                    </Link>
                                                </Button>
                                                <Button size="sm" variant="outline" className='text-green-600 border-green-600 hover:bg-green-50 hover:text-green-700' onClick={() => handleApprovalAction(business.id, 'active')}>
                                                    <CheckCircle className="mr-2 h-4 w-4" /> Approve
                                                </Button>
                                                <Button size="sm" variant="destructive" onClick={() => handleApprovalAction(business.id, 'rejected')}>
                                                    <XCircle className="mr-2 h-4 w-4" /> Reject
                                                </Button>
                                            </div>
                                        ) : (
                                            <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 asChild>
                                                        <Link href={`/admin/businesses/edit/${business.id}`}>
                                                            <Edit className="mr-2 h-4 w-4" />
                                                            Edit
                                                        </Link>
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem className='text-destructive'>
                                                        <Trash2 className="mr-2 h-4 w-4" />
                                                        Delete
                                                    </DropdownMenuItem>
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        )}
                                    </TableCell>
                                </TableRow>
                            )
                        })}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    );
}