'use client';

import React, { useState, useMemo, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import Image from 'next/image';
import { add, format, formatDistanceToNow, parseISO } from 'date-fns';
import { CheckCircle, XCircle, Clock } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import type { Business, BusinessSubscription, SubscriptionPlan } from '@/lib/types';
import { Skeleton } from '@/components/ui/skeleton';
import dynamic from 'next/dynamic';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection, doc } from 'firebase/firestore';
import { updateDocumentNonBlocking } from '@/firebase/non-blocking-updates';

interface EnrichedSubscription extends BusinessSubscription {
    businessName: string;
    businessLogoUrl: string;
    businessImageHint: string;
    planName: string;
    planDuration: number;
}

const getStatusVariant = (status: BusinessSubscription['status'], expiryDate?: Date) => {
    if (status === 'active' && expiryDate && expiryDate < new Date()) {
        return { variant: "destructive" as const, label: "Expired" };
    }
    switch (status) {
        case 'active': return { variant: "default" as const, label: "Active" };
        case 'pending': return { variant: "secondary" as const, label: "Pending" };
        case 'expired': return { variant: "destructive" as const, label: "Expired" };
        case 'rejected': return { variant: "outline" as const, label: "Rejected" };
        default: return { variant: "outline" as const, label: "Unknown" };
    }
};

function AdminSubscriptionsPageInternal() {
    const { toast } = useToast();
    const firestore = useFirestore();

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


    const handleSubscriptionAction = (subscriptionId: string, newStatus: 'active' | 'rejected') => {
        if (!firestore) return;
        
        const sub = subscriptions?.find(s => s.id === subscriptionId);
        if (!sub) return;

        const plan = subscriptionPlans?.find(p => p.id === sub.planId);
        const businessName = businesses?.find(b => b.id === sub.businessId)?.name;
        const subDocRef = doc(firestore, 'businessSubscriptions', subscriptionId);

        if (newStatus === 'active' && plan) {
            const now = new Date();
            const expiry = add(now, { days: plan.durationInDays });
            updateDocumentNonBlocking(subDocRef, {
                status: 'active',
                startDate: now,
                expiryDate: expiry,
            });
            toast({
                title: 'Subscription Activated!',
                description: `The subscription for ${businessName} is now active.`,
            });
        } else {
            updateDocumentNonBlocking(subDocRef, { status: 'rejected' });
            toast({
                title: 'Subscription Rejected',
                variant: 'destructive'
            });
        }
    };
    
    const enrichedSubscriptions = useMemo(() => {
        if (!subscriptions || !businesses || !subscriptionPlans) return [];
        return subscriptions.map(sub => {
            const business = businesses.find(b => b.id === sub.businessId);
            const plan = subscriptionPlans.find(p => p.id === sub.planId);
            
            let displayStatus: BusinessSubscription['status'] = sub.status;
            if (sub.status === 'active' && sub.expiryDate && sub.expiryDate.toDate() < new Date()) {
                displayStatus = 'expired';
            }

            return {
                ...sub,
                status: displayStatus, 
                businessName: business?.name ?? 'Unknown Business',
                businessLogoUrl: business?.logoUrl ?? 'https://placehold.co/64x64',
                businessImageHint: business?.imageHint ?? 'placeholder',
                planName: plan?.name ?? 'Unknown Plan',
                planDuration: plan?.durationInDays ?? 0,
            };
        }).sort((a, b) => b.requestDate.toDate().getTime() - a.requestDate.toDate().getTime());
    }, [subscriptions, businesses, subscriptionPlans]);

    const isLoading = isLoadingSubscriptions || isLoadingBusinesses;

    return (
        <Card>
            <CardHeader>
                <CardTitle>Subscriptions</CardTitle>
                <CardDescription>Manage business subscription requests and view active statuses.</CardDescription>
            </CardHeader>
            <CardContent>
               <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Business</TableHead>
                            <TableHead>Plan</TableHead>
                            <TableHead>Status</TableHead>
                            <TableHead>Expires</TableHead>
                            <TableHead className="text-right">Actions</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {isLoading ? (
                            [...Array(5)].map((_, i) => (
                                <TableRow key={i}>
                                    <TableCell>
                                        <div className="flex items-center gap-3">
                                            <Skeleton className="h-12 w-12 rounded-md" />
                                            <Skeleton className="h-4 w-32" />
                                        </div>
                                    </TableCell>
                                    <TableCell><Skeleton className="h-4 w-24" /></TableCell>
                                    <TableCell><Skeleton className="h-6 w-20 rounded-full" /></TableCell>
                                    <TableCell><Skeleton className="h-4 w-32" /></TableCell>
                                    <TableCell className="text-right"><Skeleton className="h-8 w-24" /></TableCell>
                                </TableRow>
                            ))
                        ) : (
                            enrichedSubscriptions.map((sub) => {
                                const statusInfo = getStatusVariant(sub.status, sub.expiryDate?.toDate());
                                return (
                                    <TableRow key={sub.id}>
                                        <TableCell>
                                            <div className="flex items-center gap-3">
                                                <Image
                                                    alt={sub.businessName}
                                                    className="aspect-square rounded-md object-cover"
                                                    height="48"
                                                    src={sub.businessLogoUrl}
                                                    width="48"
                                                    data-ai-hint={sub.businessImageHint}
                                                />
                                                <span className="font-medium">{sub.businessName}</span>
                                            </div>
                                        </TableCell>
                                        <TableCell>{sub.planName}</TableCell>
                                        <TableCell>
                                            <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
                                        </TableCell>
                                        <TableCell>
                                            {sub.status === 'active' && sub.expiryDate ? (
                                                 <div className='flex items-center gap-2'>
                                                    <Clock className='h-4 w-4 text-muted-foreground' />
                                                    <span>{formatDistanceToNow(sub.expiryDate.toDate(), { addSuffix: true })}</span>
                                                </div>
                                            ) : sub.status === 'pending' && sub.requestDate ? (
                                                `Requested ${formatDistanceToNow(sub.requestDate.toDate(), { addSuffix: true })}`
                                            ) : '-'}
                                        </TableCell>
                                        <TableCell className="text-right">
                                            {sub.status === 'pending' ? (
                                                <div className="flex justify-end gap-2">
                                                    <Button size="sm" variant="outline" className='text-green-600 border-green-600 hover:bg-green-50 hover:text-green-700' onClick={() => handleSubscriptionAction(sub.id, 'active')}>
                                                        <CheckCircle className="mr-2 h-4 w-4" /> Accept
                                                    </Button>
                                                    <Button size="sm" variant="destructive" onClick={() => handleSubscriptionAction(sub.id, 'rejected')}>
                                                        <XCircle className="mr-2 h-4 w-4" /> Reject
                                                    </Button>
                                                </div>
                                            ) : (
                                                <span className='text-sm text-muted-foreground'>No actions</span>
                                            )}
                                        </TableCell>
                                    </TableRow>
                                )
                            })
                        )}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    );
}

const AdminSubscriptionsPage = dynamic(() => Promise.resolve(AdminSubscriptionsPageInternal), { ssr: false });

export default AdminSubscriptionsPage;