frontend/src/components/layout/Sidebar.jsx

import { useForm } from '../../context/FormContext';
import { getTemplateData } from '../../data/templateData';
import * as Icons from 'lucide-react';
import { User, BookOpen, FileText, PlusCircle } from 'lucide-react';

function getIcon(name, size = 18) {
  const Icon = Icons[name];
  return Icon ? <Icon size={size} /> : null;
}

const SPECIAL_SECTIONS = [
  { id: '_header', label: 'Patient Info', icon: <User size={18} /> },
  { id: '_abbreviations', label: 'Abbreviations', icon: <BookOpen size={18} /> },
  { id: '_smart_phrases', label: 'Smart Phrases', icon: <FileText size={18} /> },
];

export default function Sidebar({ activeSection, onSectionClick, onAddSection, isOpen }) {
  const { formState, getFilledCount } = useForm();
  const TEMPLATE_SECTIONS = getTemplateData()?.sections || [];

  return (
    <nav className={`sidebar ${isOpen ? 'sidebar--open' : ''}`} aria-label="Section navigation">
      <div className="sidebar__section-title">Document</div>

      {SPECIAL_SECTIONS.map(s => (
        <div
          key={s.id}
          className={`sidebar__item ${activeSection === s.id ? 'sidebar__item--active' : ''}`}
          onClick={() => onSectionClick(s.id)}
        >
          <span className="sidebar__item-icon">{s.icon}</span>
          <span className="sidebar__item-label">{s.label}</span>
        </div>
      ))}

      <div className="sidebar__section-title">CPT Sections</div>

      {TEMPLATE_SECTIONS.map(section => {
        const count = getFilledCount(section.id);
        const isEnabled = formState.enabledSections[section.id] !== false;
        return (
          <div
            key={section.id}
            className={`sidebar__item ${activeSection === section.id ? 'sidebar__item--active' : ''}`}
            onClick={() => onSectionClick(section.id)}
            style={{ opacity: isEnabled ? 1 : 0.4 }}
          >
            <span className="sidebar__item-icon">{getIcon(section.icon)}</span>
            <span className="sidebar__item-label">
              {section.cptCode ? `${section.cptCode} — ` : ''}
              {section.title.replace(/^\d+\s*[—–-]\s*/, '')}
            </span>
            {count > 0 && <span className="sidebar__item-badge">{count}</span>}
          </div>
        );
      })}

      {formState.customSections.length > 0 && (
        <>
          <div className="sidebar__section-title">Custom Sections</div>
          {formState.customSections.map(cs => (
            <div
              key={cs.id}
              className={`sidebar__item ${activeSection === cs.id ? 'sidebar__item--active' : ''}`}
              onClick={() => onSectionClick(cs.id)}
            >
              <span className="sidebar__item-icon"><FileText size={18} /></span>
              <span className="sidebar__item-label">{cs.title}</span>
            </div>
          ))}
        </>
      )}

      <div className="sidebar__item" onClick={onAddSection} style={{ color: 'var(--accent-500)', marginTop: 'var(--space-2)' }}>
        <span className="sidebar__item-icon"><PlusCircle size={18} /></span>
        <span className="sidebar__item-label">Add Custom Section</span>
      </div>
    </nav>
  );
}