
import React, { useEffect } from 'react';
import {
  Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
} from "@/components/ui/dialog";
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Trash2, Loader2, Plus } from "lucide-react";
import { AddSubcategoryDialog } from './AddSubcategoryDialog';
import { useSubcategoryManager } from '@/hooks/useSubcategoryManager';

export function SubcategoryManagementDialog({ open, onOpenChange }) {
  const { 
    subcategories, 
    loading, 
    fetchSubcategories, 
    deleteSubcategory,
    addSubcategory 
  } = useSubcategoryManager();
  
  const [addDialogOpen, setAddDialogOpen] = React.useState(false);

  useEffect(() => {
    if (open) {
      fetchSubcategories();
    }
  }, [open, fetchSubcategories]);

  const handleDelete = async (id) => {
    if (window.confirm("Are you sure you want to delete this subcategory?")) {
      await deleteSubcategory(id);
    }
  };

  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="sm:max-w-[600px] max-h-[80vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>Manage Subcategories</DialogTitle>
            <DialogDescription>
              View and manage fee schedule subcategories.
            </DialogDescription>
          </DialogHeader>

          <div className="flex justify-end mb-4">
             <Button size="sm" onClick={() => setAddDialogOpen(true)}>
                <Plus className="w-4 h-4 mr-2" /> Add Subcategory
             </Button>
          </div>

          <div className="flex-1 overflow-auto border rounded-md">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead className="w-[100px]">Type</TableHead>
                  <TableHead className="w-[100px] text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                   <TableRow>
                     <TableCell colSpan={3} className="text-center py-8">
                       <Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
                     </TableCell>
                   </TableRow>
                ) : subcategories.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={3} className="text-center py-4 text-muted-foreground">
                      No subcategories found.
                    </TableCell>
                  </TableRow>
                ) : (
                  subcategories.map((sub) => (
                    <TableRow key={sub.id}>
                      <TableCell className="font-medium">{sub.name}</TableCell>
                      <TableCell>
                        {sub.is_custom ? (
                          <Badge variant="outline" className="border-primary/20 text-primary bg-primary/5">Custom</Badge>
                        ) : (
                          <Badge variant="secondary">System</Badge>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        {sub.is_custom && (
                          <Button 
                            variant="ghost" 
                            size="icon" 
                            className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                            onClick={() => handleDelete(sub.id)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        )}
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </DialogContent>
      </Dialog>

      <AddSubcategoryDialog 
        open={addDialogOpen} 
        onOpenChange={setAddDialogOpen} 
        onAdd={addSubcategory}
      />
    </>
  );
}
