import React from 'react';
import { NavLink } from 'react-router-dom';
import { Activity, Box, Boxes, Cable, ChevronLeft, ChevronRight, CircleGauge, FileOutput, HelpCircle, Ruler, ScanLine, ShieldCheck } from 'lucide-react';
import { scanPath } from '@/lib/appConfig';

const nav = [
  ['', 'Scanner Dashboard', CircleGauge],
  ['new-scan', 'New Scan', ScanLine],
  ['capture', 'Live Capture', Activity],
  ['projects', 'Scan Projects', Boxes],
  ['mesh-lab', 'Mesh Lab', Box],
  ['measurements', 'Measurements', Ruler],
  ['print-check', 'Print Check', ShieldCheck],
  ['exports', 'Exports', FileOutput],
  ['calibration', 'Calibration', CircleGauge],
  ['bridge', 'Scanner Settings', Cable],
  ['help', 'Help and Safety', HelpCircle]
];

export default function Sidebar({ collapsed, onToggleCollapse }) {
  return (
    <nav className={`hidden shrink-0 border-r border-white/10 bg-[#0b0b0d]/95 lg:flex lg:flex-col ${collapsed ? 'w-16' : 'w-64'}`}>
      <div className="flex items-center justify-between gap-2 px-3 py-3">
        {!collapsed && <p className="text-[10px] font-semibold uppercase tracking-[.24em] text-purple-300">ScanForge Tools</p>}
        <button onClick={onToggleCollapse} aria-label="Collapse ScanForge tools" className="rounded-lg border border-white/10 p-1.5 text-zinc-400 hover:text-white">
          {collapsed ? <ChevronRight size={15}/> : <ChevronLeft size={15}/>} 
        </button>
      </div>
      <div className="flex-1 overflow-y-auto px-2 pb-3">
        {nav.map(([sub, label, Icon]) => (
          <NavLink key={sub} to={scanPath(sub)} end={sub === ''} className={({ isActive }) => `mb-1 flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition ${isActive ? 'border border-[#7dff72]/20 bg-[#7dff72]/10 text-[#aaff9f]' : 'text-zinc-400 hover:bg-white/5 hover:text-white'} ${collapsed ? 'justify-center' : ''}`} title={collapsed ? label : undefined}>
            <Icon size={16} className="shrink-0"/>
            {!collapsed && <span>{label}</span>}
          </NavLink>
        ))}
      </div>
    </nav>
  );
}
