'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Briefcase, DollarSign, Gem, Users } from 'lucide-react';
import Link from 'next/link';
import DashboardCharts from './charts';
import { Button } from '@/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { writeBatch, doc, collection } from 'firebase/firestore';
import { useToast } from '@/hooks/use-toast';
import { useMemo } from 'react';
import type { Business, User, BusinessSubscription, SubscriptionPlan } from '@/lib/types';

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

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

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

    const subscriptionsQuery = useMemoFirebase(() => firestore ? collection(firestore, 'businessSubscriptions') : null, [firestore]);
    const { data: businessSubscriptions } = useCollection<BusinessSubscription>(subscriptionsQuery);
    
    const plansQuery = useMemoFirebase(() => firestore ? collection(firestore, 'subscriptionPlans') : null, [firestore]);
    const { data: subscriptionPlans } = useCollection<SubscriptionPlan>(plansQuery);


    const { activeSubscriptions, totalRevenue, pendingSubscriptions, pendingBusinesses } = useMemo(() => {
        if (!businesses || !users || !businessSubscriptions || !subscriptionPlans) {
            return {
                activeSubscriptions: [],
                totalRevenue: 0,
                pendingSubscriptions: [],
                pendingBusinesses: [],
            };
        }

        const activeSubs = businessSubscriptions.filter(
            sub => sub.status === 'active' && sub.expiryDate && sub.expiryDate.toDate() > new Date()
        );

        const revenue = activeSubs.reduce((acc, sub) => {
            const plan = subscriptionPlans.find(p => p.id === sub.planId);
            return acc + (plan?.price || 0);
        }, 0);

        const pendingSubs = businessSubscriptions
            .filter(sub => sub.status === 'pending')
            .map(sub => {
                const business = businesses.find(b => b.id === sub.businessId);
                const plan = subscriptionPlans.find(p => p.id === sub.planId);
                return {
                    ...sub,
                    businessName: business?.name || 'N/A',
                    planName: plan?.name || 'N/A',
                };
            });
        
        const pendingBiz = businesses.filter(b => b.status === 'pending');

        return {
            activeSubscriptions: activeSubs,
            totalRevenue: revenue,
            pendingSubscriptions: pendingSubs,
            pendingBusinesses: pendingBiz,
        }

    }, [businesses, users, businessSubscriptions, subscriptionPlans]);

    const kpiData = useMemo(() => ([
        { title: 'Total Businesses', value: (businesses?.length || 0).toString(), icon: Briefcase, change: '' },
        { title: 'Total Revenue', value: `$${totalRevenue.toFixed(2)}`, icon: DollarSign, change: 'from active plans' },
        { title: 'Active Subscriptions', value: (activeSubscriptions.length || 0).toString(), icon: Gem, change: '' },
        { title: 'Total Users', value: (users?.length || 0).toString(), icon: Users, change: '' },
    ]), [businesses, totalRevenue, activeSubscriptions, users]);


    const seedDatabase = async () => {
        if (!firestore) {
             toast({
                variant: "destructive",
                title: "Firestore not available",
                description: "Please try again later.",
            });
            return;
        }

        toast({
            title: "Seeding Database...",
            description: "This might take a moment.",
        });

        try {
            const batch = writeBatch(firestore);

            // You would populate your mock data here. 
            // Since mock data was removed, this function would need to be updated with a new data source.
            // For now, it will just show a success message if it runs without data.

            await batch.commit();

            toast({
                title: "Database Action Completed!",
                description: "Your database action was successful (Note: No data was seeded as mock data is removed).",
            });

        } catch (error: any) {
             console.error("Error with database action: ", error);
             toast({
                variant: "destructive",
                title: "Database Action Failed",
                description: error.message || "An unknown error occurred.",
            });
        }
    }

  return (
    <div className='space-y-8'>
      <div className='flex items-center justify-between'>
        <h1 className="text-3xl font-bold text-primary">Dashboard</h1>
        {process.env.NODE_ENV === 'development' && (
          <Button variant="outline" onClick={seedDatabase}>
              Run DB Seed
          </Button>
        )}
      </div>
      
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {kpiData.map((item) => (
          <Card key={item.title}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-primary">{item.title}</CardTitle>
              <item.icon className="h-5 w-5 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{item.value}</div>
              <p className="text-xs text-muted-foreground">{item.change}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <DashboardCharts />

      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         {pendingBusinesses.length > 0 && (
            <Card>
                <CardHeader>
                    <div className='flex items-center justify-between'>
                        <div>
                            <CardTitle>Pending Business Approvals</CardTitle>
                            <CardDescription>These businesses are waiting to be approved.</CardDescription>
                        </div>
                        <Button variant="outline" asChild>
                            <Link href="/admin/businesses">View All</Link>
                        </Button>
                    </div>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Business</TableHead>
                                <TableHead>Category</TableHead>
                                <TableHead className='text-right'>Action</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {pendingBusinesses.map(business => (
                                <TableRow key={business.id}>
                                    <TableCell className='font-medium'>{business.name}</TableCell>
                                    <TableCell><Badge variant="outline">{business.category}</Badge></TableCell>
                                    <TableCell className='text-right'>
                                        <Button variant="secondary" size="sm" asChild>
                                            <Link href="/admin/businesses">
                                                Review
                                            </Link>
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>
        )}
        
        {pendingSubscriptions.length > 0 && (
          <Card>
            <CardHeader>
                <div className='flex items-center justify-between'>
                    <div>
                        <CardTitle>Pending Subscription Approvals</CardTitle>
                        <CardDescription>These businesses are waiting for their subscription to be activated.</CardDescription>
                    </div>
                     <Button variant="outline" asChild>
                        <Link href="/admin/subscriptions">View All</Link>
                    </Button>
                </div>
            </CardHeader>
            <CardContent>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Business</TableHead>
                            <TableHead>Plan Requested</TableHead>
                            <TableHead className='text-right'>Action</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {pendingSubscriptions.map(sub => (
                            <TableRow key={sub.id}>
                                <TableCell className='font-medium'>{sub.businessName}</TableCell>
                                <TableCell>{sub.planName}</TableCell>
                                <TableCell className='text-right'>
                                    <Button variant="secondary" size="sm" asChild>
                                        <Link href="/admin/subscriptions">
                                            Review Request
                                        </Link>
                                    </Button>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
      )}
      </div>
    </div>
  );
}