import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { ChevronDown, ChevronRight } from "lucide-react";
import { SignatureListItem } from "@/components/SignatureListItem";
import { SignatureCategory } from "@/hooks/useSignatureCategories";
import { SigviewRecord as Signature } from "@/lib/pbtypes";

interface SignatureCategoriesProps {
  categories: SignatureCategory[];
  onToggleCategory: (categoryId: string) => void;
  onDelete?: (signatureId: string) => Promise<void>;
  onUpdate?: (updatedSignature: Partial<Signature>) => Promise<void>;
}

export const SignatureCategories = ({ categories, onToggleCategory, onDelete, onUpdate }: SignatureCategoriesProps) => {
  if (categories.length === 0) {
    return (
      <Card className="bg-slate-800/30 border-slate-700">
        <CardContent className="pt-4 text-center">
          <div className="text-slate-400">No signatures found</div>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-2">
      {categories.map((category) => (
        <Card key={category.meta.id} className="bg-slate-800/30 border-slate-700">
          <Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.meta.id)}>
            <CollapsibleTrigger asChild>
              <CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors py-2">
                <CardTitle className="text-white flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {category.isVisible ? (
                      <ChevronDown className="h-4 w-4 text-slate-400" />
                    ) : (
                      <ChevronRight className="h-4 w-4 text-slate-400" />
                    )}
                    {category.meta.icon}
                    <span className="text-base font-medium">{category.meta.name}</span>
                  </div>
                  <Badge
                    variant="outline"
                    className={`bg-slate-700 border-slate-600 ${category.meta.color} px-2 py-1`} >
                    {category.signatures.length}
                  </Badge>
                </CardTitle>
              </CardHeader>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <CardContent className="p-0">
                <div className="divide-y divide-slate-700">
                  {category.signatures.map((signature) => (
                    <SignatureListItem
                      key={signature.id}
                      signature={signature}
                      onDelete={onDelete}
                      onUpdate={onUpdate}
                    />
                  ))}
                </div>
              </CardContent>
            </CollapsibleContent>
          </Collapsible>
        </Card>
      ))}
    </div>
  );
};