import { FileText, Folder, Minus, Plus } from "lucide-react";
import { useState } from "react";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { Checkbox } from "~/components/ui/checkbox";

interface ResourceItemProps {
  resource: IResource;
  isSelected: boolean;
  onToggle: (resource: IResource, parent?: IResource) => void;
  selectedResources: Set<number>; // Add this
  level?: number;
  parent?: IResource;
}

export function RoleResourceItem({
  resource,
  isSelected,
  onToggle,
  selectedResources,
  level = 0,
  parent,
}: ResourceItemProps) {
  const [expanded, setExpanded] = useState(false);
  const hasChildren = resource.children && resource.children.length > 0;

  return (
    <div className="space-y-1">
      <div
        className="flex items-center space-x-2 p-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800"
        style={{ paddingLeft: `${level * 20 + 8}px` }}
      >
        {hasChildren && (
          <Button
            variant="ghost"
            size="sm"
            className="h-4 w-4 p-0"
            onClick={() => setExpanded(!expanded)}
          >
            {expanded ? (
              <Minus className="h-3 w-3" />
            ) : (
              <Plus className="h-3 w-3" />
            )}
          </Button>
        )}
        {!hasChildren && <div className="w-4" />}

        <Checkbox
          checked={isSelected}
          onCheckedChange={() => onToggle(resource, parent)}
          disabled={resource.is_public}
        />

        <div className="flex items-center space-x-2 flex-1">
          {resource.type === "controller" ? (
            <Folder className="h-4 w-4 text-blue-500" />
          ) : (
            <FileText className="h-4 w-4 text-green-500" />
          )}

          <div className="flex-1">
            <div className="flex items-center space-x-2">
              <span className="font-medium">{resource.name}</span>
              {resource.is_public && (
                <Badge variant="secondary" className="text-xs">
                  Public (Auto-granted)
                </Badge>
              )}
              {resource.disabled && (
                <Badge variant="outline" className="text-xs">
                  Disabled
                </Badge>
              )}
            </div>
            {resource.description && (
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {resource.description}
              </p>
            )}
            <p className="text-xs text-gray-400 dark:text-gray-500">
              {resource.path} {resource.method && `(${resource.method})`}
            </p>
          </div>
        </div>
      </div>

      {hasChildren && expanded && (
        <div className="space-y-1">
          {resource.children.map((child) => (
            <RoleResourceItem
              key={child.id}
              resource={child}
              parent={resource}
              isSelected={selectedResources.has(child.id)}
              onToggle={onToggle}
              selectedResources={selectedResources}
              level={level + 1}
            />
          ))}
        </div>
      )}
    </div>
  );
}
