import { useState } from 'react';
import { ChevronRight, ChevronDown, Eye, EyeOff, Lock, MoreVertical, Box, Map, Shield, Sparkles, Layers } from 'lucide-react';

function TreeIcon({ type, category }) {
  if (type === 'customer') return <Box className="h-4 w-4 text-slate-400" />;
  if (type === 'limb') return <Layers className="h-4 w-4 text-cyan-400" />;
  if (type === 'prosthesis') return <Box className="h-4 w-4 text-cyan-400" />;
  if (type === 'component') return <Box className="h-4 w-4 text-slate-400" />;
  if (type === 'sensitive') return <Map className="h-4 w-4 text-purple-400" />;
  if (type === 'access') return <Shield className="h-4 w-4 text-amber-400" />;
  if (type === 'keepout') return <Shield className="h-4 w-4 text-red-400" />;
  if (type === 'cover') return <Sparkles className="h-4 w-4 text-cyan-400" />;
  if (type === 'logo') return <span className="text-[9px] font-bold tracking-wider text-cyan-300">S</span>;
  if (type === 'assembly-group') return <Layers className="h-4 w-4 text-cyan-300" />;
  if (type === 'part') return <Box className="h-4 w-4 text-cyan-400" />;
  if (type === 'stations-group') return <Map className="h-4 w-4 text-slate-400" />;
  return <Box className="h-4 w-4 text-slate-400" />;
}

function TreeNode({ node, depth, selectedId, onSelect, visibility, onToggleVisible, onAction }) {
  const [open, setOpen] = useState(depth < 2);
  const isSelected = selectedId === `${node.type}-${node.uuid || node.id}`;
  const isVisible = visibility[node.uuid || node.id] !== false;

  return (
    <div>
      <div
        className={`group flex items-center gap-1 rounded-lg px-2 py-1.5 text-sm transition ${isSelected ? 'bg-cyan-400/15 text-cyan-300' : 'text-slate-300 hover:bg-white/5'}`}
        style={{ paddingLeft: depth * 16 + 8 }}
        onClick={() => onSelect(node)}
      >
        {node.children?.length > 0 ? (
          <button onClick={(e) => { e.stopPropagation(); setOpen(!open); }} className="shrink-0 text-slate-500 hover:text-cyan-300">
            {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
          </button>
        ) : (
          <span className="w-3.5 shrink-0" />
        )}
        <span className="shrink-0"><TreeIcon type={node.type} category={node.category} /></span>
        <span className="flex-1 truncate">{node.label}</span>
        <button onClick={(e) => { e.stopPropagation(); onToggleVisible(node); }} className="shrink-0 opacity-0 transition group-hover:opacity-100">
          {isVisible ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5 text-slate-600" />}
        </button>
        {node.locked && <Lock className="h-3 w-3 shrink-0 text-amber-400" />}
        <button onClick={(e) => { e.stopPropagation(); onAction(node); }} className="shrink-0 opacity-0 transition group-hover:opacity-100">
          <MoreVertical className="h-3.5 w-3.5" />
        </button>
      </div>
      {open && node.children?.map((child, i) => (
        <TreeNode key={i} node={child} depth={depth + 1} selectedId={selectedId} onSelect={onSelect} visibility={visibility} onToggleVisible={onToggleVisible} onAction={onAction} />
      ))}
    </div>
  );
}

export default function ProjectTree({ tree, selectedId, onSelect, visibility, onToggleVisible, onAction }) {
  return (
    <div className="flex h-full flex-col">
      <div className="border-b border-white/10 px-4 py-3">
        <h2 className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">Project Tree</h2>
      </div>
      <div className="flex-1 overflow-y-auto p-2">
        {tree.length === 0 ? (
          <p className="px-3 py-8 text-center text-sm text-slate-500">No projects loaded.<br />Select a customer to begin.</p>
        ) : (
          tree.map((node, i) => (
            <TreeNode key={i} node={node} depth={0} selectedId={selectedId} onSelect={onSelect} visibility={visibility || {}} onToggleVisible={onToggleVisible || (() => {})} onAction={onAction || (() => {})} />
          ))
        )}
      </div>
    </div>
  );
}