import { FileTreeEntry } from './FileTree';

interface FileTreeNodeProps {
  entry: FileTreeEntry;
  depth: number;
  isExpanded: boolean;
  isLoading: boolean;
  hasChildren: boolean;
  error?: string;
  onToggle: (path: string) => void;
  onSelect: (path: string) => void;
}

export default function FileTreeNode({
  entry,
  depth,
  isExpanded,
  isLoading,
  hasChildren,
  error,
  onToggle,
  onSelect,
}: FileTreeNodeProps) {
  const handleClick = () => {
    if (hasChildren) {
      onToggle(entry.path);
    } else {
      onSelect(entry.path);
    }
  };

  const getIcon = () => {
    if (entry.type === 'directory') {
      return isExpanded ? (
        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
        </svg>
      ) : (
        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
        </svg>
      );
    } else if (entry.type === 'symlink') {
      return (
        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
        </svg>
      );
    } else {
      // File icon
      return (
        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      );
    }
  };

  const getExpandIcon = () => {
    if (!hasChildren) return null;
    return isExpanded ? (
      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
      </svg>
    ) : (
      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    );
  };

  return (
    <div>
      <div
        className={`flex items-center gap-1 px-2 py-1 rounded cursor-pointer hover:bg-bg-tertiary transition-colors select-none ${
          error ? 'text-red-500' : 'text-text-primary'
        }`}
        style={{ paddingLeft: `${depth * 12 + 8}px` }}
        onClick={handleClick}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleClick();
          }
        }}
      >
        <span className="flex items-center justify-center w-4 h-4 text-text-muted">
          {getExpandIcon()}
        </span>
        
        <span className={`flex items-center justify-center w-5 h-5 ${
          entry.type === 'directory' ? 'text-blue-500' :
          entry.type === 'symlink' ? 'text-purple-500' :
          'text-text-muted'
        }`}>
          {getIcon()}
        </span>

        {isLoading && (
          <span className="flex items-center justify-center w-4 h-4">
            <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-brand"></div>
          </span>
        )}

        <span className={`text-sm truncate ${entry.isHidden ? 'text-text-muted italic' : ''}`}>
          {entry.name}
        </span>
      </div>

      {isExpanded && hasChildren && (
        <div>
          {/* Children will be rendered by parent FileTree component */}
        </div>
      )}
    </div>
  );
}
