'use client';

import {
  ChevronDown,
  ChevronRight,
  FileCode,
  Folder,
  FolderOpen,
} from 'lucide-react';

import { Button } from '@spoon/ui';

import type { FileTreeNode } from './types';

const TreeNode = ({
  node,
  selectedPath,
  expandedPaths,
  onSelect,
  onToggle,
  depth = 0,
}: {
  node: FileTreeNode;
  selectedPath?: string;
  expandedPaths: Set<string>;
  onSelect: (path: string) => void;
  onToggle: (path: string) => void;
  depth?: number;
}) => {
  if (node.type === 'directory') {
    const isRoot = !node.path;
    const expanded = isRoot || expandedPaths.has(node.path);
    return (
      <div>
        {!isRoot ? (
          <button
            type='button'
            aria-expanded={expanded}
            className='text-muted-foreground hover:bg-muted flex h-7 w-full items-center gap-1 px-2 text-left text-xs font-medium'
            style={{ paddingLeft: depth * 12 + 8 }}
            onClick={() => onToggle(node.path)}
          >
            {expanded ? (
              <ChevronDown className='size-3 flex-none' />
            ) : (
              <ChevronRight className='size-3 flex-none' />
            )}
            {expanded ? (
              <FolderOpen className='size-3 flex-none' />
            ) : (
              <Folder className='size-3 flex-none' />
            )}
            <span className='truncate'>{node.name}</span>
          </button>
        ) : null}
        {expanded ? (
          <div>
            {node.children?.map((child) => (
              <TreeNode
                key={`${child.type}:${child.path}`}
                node={child}
                selectedPath={selectedPath}
                expandedPaths={expandedPaths}
                onSelect={onSelect}
                onToggle={onToggle}
                depth={node.path ? depth + 1 : depth}
              />
            ))}
          </div>
        ) : null}
      </div>
    );
  }

  return (
    <Button
      type='button'
      variant={selectedPath === node.path ? 'secondary' : 'ghost'}
      className='h-7 w-full justify-start gap-2 rounded-none px-2 text-left text-xs font-normal'
      style={{ paddingLeft: depth * 12 + 8 }}
      onClick={() => onSelect(node.path)}
    >
      <FileCode className='size-3 flex-none' />
      <span className='truncate'>{node.name}</span>
    </Button>
  );
};

export const FileTree = ({
  tree,
  selectedPath,
  expandedPaths,
  onSelect,
  onToggleDirectory,
}: {
  tree: FileTreeNode | null;
  selectedPath?: string;
  expandedPaths: string[];
  onSelect: (path: string) => void;
  onToggleDirectory: (path: string) => void;
}) => {
  if (!tree) {
    return (
      <p className='text-muted-foreground p-3 text-sm'>
        Workspace files are not available yet.
      </p>
    );
  }
  return (
    <div className='h-full overflow-auto py-2'>
      <TreeNode
        node={tree}
        selectedPath={selectedPath}
        expandedPaths={new Set(expandedPaths)}
        onSelect={onSelect}
        onToggle={onToggleDirectory}
      />
    </div>
  );
};
