'use client';

import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { PlusCircle, MoreHorizontal, Edit, Trash2 } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { useToast } from '@/hooks/use-toast';
import type { SubscriptionPlan } from '@/lib/types';
import { useFirestore, useCollection, useMemoFirebase } from '@/firebase';
import { collection, doc, serverTimestamp } from 'firebase/firestore';
import { addDocumentNonBlocking, updateDocumentNonBlocking } from '@/firebase/non-blocking-updates';


export default function AdminPlansPage() {
    const { toast } = useToast();
    const firestore = useFirestore();
    
    const plansQuery = useMemoFirebase(() => firestore ? collection(firestore, 'subscriptionPlans') : null, [firestore]);
    const { data: plans, isLoading } = useCollection<SubscriptionPlan>(plansQuery);

    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [editingPlan, setEditingPlan] = useState<SubscriptionPlan | null>(null);

    const handleOpenDialog = (plan: SubscriptionPlan | null = null) => {
        setEditingPlan(plan);
        setIsDialogOpen(true);
    };

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (!firestore) {
            toast({ title: 'Error', description: 'Database not available', variant: 'destructive' });
            return;
        }

        const formData = new FormData(e.currentTarget);
        const name = formData.get('name') as string;
        const durationInDays = parseInt(formData.get('duration') as string, 10);
        const price = parseFloat(formData.get('price') as string);
        
        if (editingPlan) {
            const planDocRef = doc(firestore, 'subscriptionPlans', editingPlan.id);
            updateDocumentNonBlocking(planDocRef, { name, durationInDays, price });
            toast({ title: "Plan Updated", description: `The plan "${name}" has been updated.` });
        } else {
            addDocumentNonBlocking(collection(firestore, 'subscriptionPlans'), { name, durationInDays, price });
            toast({ title: "Plan Added", description: `The plan "${name}" has been created.` });
        }

        setIsDialogOpen(false);
        setEditingPlan(null);
    };

    if (isLoading) {
        return <p>Loading plans...</p>
    }

    return (
        <>
            <Card>
                <CardHeader>
                    <div className="flex items-center justify-between">
                        <div>
                            <CardTitle>Subscription Plans</CardTitle>
                            <CardDescription>Manage the subscription plans available for businesses.</CardDescription>
                        </div>
                        <Button size="sm" className="gap-1" onClick={() => handleOpenDialog()}>
                            <PlusCircle className="h-4 w-4" />
                            Add New Plan
                        </Button>
                    </div>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Plan Name</TableHead>
                                <TableHead>Duration (Days)</TableHead>
                                <TableHead>Price ($)</TableHead>
                                <TableHead>
                                    <span className="sr-only">Actions</span>
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {plans?.map((plan) => (
                                <TableRow key={plan.id}>
                                    <TableCell className="font-medium">{plan.name}</TableCell>
                                    <TableCell>{plan.durationInDays}</TableCell>
                                    <TableCell>{plan.price.toFixed(2)}</TableCell>
                                    <TableCell className="text-right">
                                        <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={() => handleOpenDialog(plan)}>
                                                    <Edit className="mr-2 h-4 w-4" />
                                                    Edit
                                                </DropdownMenuItem>
                                                <DropdownMenuItem className="text-destructive">
                                                    <Trash2 className="mr-2 h-4 w-4" />
                                                    Delete
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                <DialogContent>
                    <form onSubmit={handleSubmit}>
                        <DialogHeader>
                            <DialogTitle>{editingPlan ? 'Edit Plan' : 'Add New Plan'}</DialogTitle>
                            <DialogDescription>
                                {editingPlan ? 'Update the details for this plan.' : 'Create a new plan for businesses to subscribe to.'}
                            </DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4 py-4">
                            <div className="space-y-2">
                                <Label htmlFor="name">Plan Name</Label>
                                <Input id="name" name="name" placeholder="e.g. 1 Month Premium" defaultValue={editingPlan?.name} required />
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="duration">Duration (in days)</Label>
                                <Input id="duration" name="duration" type="number" placeholder="e.g. 30" defaultValue={editingPlan?.durationInDays} required />
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="price">Price ($)</Label>
                                <Input id="price" name="price" type="number" step="0.01" placeholder="e.g. 29.99" defaultValue={editingPlan?.price} required />
                            </div>
                        </div>
                        <DialogFooter>
                            <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>Cancel</Button>
                            <Button type="submit">{editingPlan ? 'Save Changes' : 'Add Plan'}</Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
}