components/Sidebar.jsx

import { FileText, Database, Cpu, Waypoints, ArrowRight, Send, Trash2, Link } from 'lucide-react';

const tools = [
  { id: 'input', label: 'Data Source', icon: FileText, group: 'Data Ingestion' },
  { id: 'vector-db', label: 'Vector Store', icon: Database, group: 'Data Ingestion' },
  { id: 'llm', label: 'LLM Core', icon: Cpu, group: 'AI Processing' },
  { id: 'embedder', label: 'Embeddings', icon: Waypoints, group: 'AI Processing' },
  { id: 'router', label: 'Semantic Router', icon: ArrowRight, group: 'Logic' },
  { id: 'output', label: 'Response', icon: Send, group: 'Output' },
];

export default function Sidebar({ onAddNode, onClear, onConnectSelected, hasSelection }) {
  return (
    <aside className="w-64 bg-panel border-r border-border flex flex-col">
      <div className="p-4 flex-1 overflow-y-auto">
        {['Data Ingestion', 'AI Processing', 'Logic', 'Output'].map(group => (
          <div key={group} className="mb-6">
            <h3 className="text-[10px] uppercase tracking-widest text-muted font-bold mb-3">{group}</h3>
            <div className="space-y-2">
              {tools.filter(t => t.group === group).map(tool => {
                const Icon = tool.icon;
                return (
                  <button
                    key={tool.id}
                    onClick={() => onAddNode(tool.id)}
                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded bg-surface border border-border hover:border-primary hover:bg-primary/5 transition-all text-sm text-main text-left group"
                  >
                    <div className="w-8 h-8 rounded bg-white/5 flex items-center justify-center group-hover:bg-primary/10 transition-colors">
                      <Icon size={16} className="text-muted group-hover:text-primary" />
                    </div>
                    {tool.label}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div className="p-4 border-t border-border space-y-2 bg-surface/30">
        <button 
          onClick={onConnectSelected}
          disabled={!hasSelection}
          className="w-full flex items-center justify-center gap-2 py-2 rounded bg-surface border border-border hover:border-success hover:text-success transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
          title="Connect currently selected nodes"
        >
          <Link size={16} /> Connect Selected
        </button>
        <button 
          onClick={onClear}
          className="w-full flex items-center justify-center gap-2 py-2 rounded bg-surface border border-border hover:border-red-500 hover:text-red-400 transition-all text-sm"
        >
          <Trash2 size={16} /> Clear Canvas
        </button>
      </div>
    </aside>
  );
}