import { useState, useEffect } from 'react';
import { invoke } from '@tauri-apps/api/tauri';

interface FileItem {
  name: string;
  path: string;
  is_dir: boolean;
}

const FileTree = ({ onSelect }: { onSelect: (path: string) => void }) => {
  const [tree, setTree] = useState<FileItem[]>([]);
  const [expanded, setExpanded] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const loadTree = async () => {
      try {
        const result = await invoke<FileItem[]>('list_files', { path: '' });
        setTree(result.filter(item => item.is_dir));
      } catch (error) {
        console.error('Error loading file tree:', error);
      }
    };
    loadTree();
  }, []);

  const toggleExpand = async (path: string) => {
    setExpanded(prev => ({ ...prev, [path]: !prev[path] }));
    onSelect(path);
  };

  return (
    <div className="w-64 border-r border-gray-300 p-4 overflow-y-auto">
      <h3 className="text-lg font-semibold mb-4">File Tree</h3>
      <ul className="space-y-1">
        {tree.map((item) => (
          <li key={item.path} className="pl-2">
            <div 
              onClick={() => toggleExpand(item.path)}
              className="flex items-center cursor-pointer hover:bg-gray-100 p-1 rounded"
            >
              <span>{expanded[item.path] ? '📂' : '📁'}</span>
              <span className="ml-2">{item.name}</span>
            </div>
            {expanded[item.path] && (
              <div className="pl-4">
                <FileBrowser path={item.path} />
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileTree;