"use client";

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

interface TreeItemRowProps {
  icon?: React.ReactNode;
  title: string;
  subtitle?: string;
  badges?: Array<{
    text: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
    className?: string;
  }>;
  onEdit?: () => void;
  onDelete?: () => void;
  onViewMembers?: () => void;
  canDelete?: boolean;
  showSeparator?: boolean;
  additionalInfo?: React.ReactNode;
  hasMembers?: boolean;
}

export function TreeItemRow({
  icon,
  title,
  subtitle,
  badges = [],
  onEdit,
  onDelete,
  onViewMembers,
  canDelete = true,
  showSeparator = false,
  additionalInfo,
  hasMembers = false,
}: TreeItemRowProps) {
  return (
    <div>
      {/* Séparateur entre items */}
      {showSeparator && <div className="border-t border-white/5 ml-12" />}

      <div className="flex items-center justify-between p-2 ml-6 border-l-2 border-slate-700/50 hover:bg-white/5 transition-colors">
        <div className="flex items-center gap-3 flex-1 min-w-0">
          {icon}
          <div className="flex items-center gap-3 flex-1 min-w-0">
            <h4 className="text-sm font-medium text-white truncate">{title}</h4>
            {badges.map((badge, index) => (
              <Badge
                key={index}
                variant={badge.variant || "outline"}
                className={`text-xs px-2 py-0.5 shrink-0 ${
                  badge.className || ""
                }`}
              >
                {badge.text}
              </Badge>
            ))}
            {subtitle && (
              <p className="text-slate-400 text-xs truncate flex-1">
                {subtitle}
              </p>
            )}
          </div>
        </div>

        {/* Informations additionnelles (comme les métriques) */}
        {additionalInfo && (
          <div className="mx-4 shrink-0">{additionalInfo}</div>
        )}

        {/* Actions */}
        <div className="flex items-center gap-1 shrink-0">
          {onViewMembers && hasMembers && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onViewMembers}
              className="text-green-400 hover:text-green-300 hover:bg-green-500/20 h-6 w-6 p-0"
              title="Voir les membres"
            >
              <Users className="w-3 h-3" />
            </Button>
          )}
          {onEdit && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onEdit}
              className="text-blue-400 hover:text-blue-300 hover:bg-blue-500/20 h-6 w-6 p-0"
            >
              <Edit className="w-3 h-3" />
            </Button>
          )}
          {onDelete && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onDelete}
              className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0"
              disabled={!canDelete}
            >
              <Trash2 className="w-3 h-3" />
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}