"use client";

import { ChevronRight, ChevronDown, Trash2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

interface TreeCategoryHeaderProps {
  category: string;
  isExpanded: boolean;
  onToggle: () => void;
  icon?: React.ReactNode;
  itemCount: number;
  itemLabel: string; // "skill" or "équipe" etc.
  showSeparator?: boolean;
  onDelete?: () => void;
  canDelete?: boolean;
  isDirection?: boolean; // Pour différencier les directions des catégories de skills
  directionStats?: {
    direction: string;
    totalMembers: number;
    hasMembers: boolean;
  };
}

export function TreeCategoryHeader({
  category,
  isExpanded,
  onToggle,
  icon,
  itemCount,
  itemLabel,
  showSeparator = false,
  onDelete,
  canDelete = true,
  isDirection = false,
  directionStats,
}: TreeCategoryHeaderProps) {
  return (
    <div>
      {/* Séparateur entre catégories (sauf pour la première) */}
      {showSeparator && <div className="border-t border-white/5" />}

      {/* Header de catégorie */}
      <div
        className="flex items-center gap-2 p-3 cursor-pointer hover:bg-white/5 transition-colors"
        onClick={onToggle}
      >
        {isExpanded ? (
          <ChevronDown className="w-4 h-4 text-slate-400" />
        ) : (
          <ChevronRight className="w-4 h-4 text-slate-400" />
        )}
        {icon}
        <h3 className="text-base font-semibold text-white">{category}</h3>
        <div className="flex items-center gap-2 ml-auto">
          {isDirection && directionStats && directionStats.hasMembers && (
            <Badge
              variant="secondary"
              className="text-xs px-2 py-0.5 bg-blue-500/20 text-blue-300 border-blue-500/30"
            >
              {directionStats.totalMembers} membre
              {directionStats.totalMembers > 1 ? "s" : ""}
            </Badge>
          )}
          <Badge variant="outline" className="text-xs px-2 py-0.5">
            {itemCount} {itemLabel}
            {itemCount > 1 ? "s" : ""}
          </Badge>
          {isDirection && onDelete && (
            <Button
              variant="ghost"
              size="sm"
              onClick={(e) => {
                e.stopPropagation(); // Empêcher l'ouverture/fermeture
                onDelete();
              }}
              className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0"
              disabled={!canDelete}
              title={
                canDelete
                  ? `Supprimer la direction "${category}" et toutes ses équipes`
                  : `Impossible de supprimer la direction "${category}" car elle contient des membres`
              }
            >
              <Trash2 className="w-3 h-3" />
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}