// ============================================================
// Sidebar — Etapas (steps) navigation. Simple numbered steps.
// ============================================================

const STEPS = [
  { id: 'carta', label: 'Paciente' },
  { id: 'resultado', label: 'Bio Age e Exame' },
  { id: 'objetivos', label: 'Objetivos de saúde' },
  { id: 'biomarcadores', label: 'Biomarcadores em foco' },
  { id: 'recmedicas', label: 'Recomendações médicas' },
  { id: 'medicamentos', label: 'Medicamentos' },
  { id: 'suplementacao', label: 'Suplementação' },
  { id: 'estilo', label: 'Estilo de vida' },
  { id: 'recomendacoes', label: 'Health Coach' },
  { id: 'proximos', label: 'Próximos passos' },
  { id: 'observacoes', label: 'Observações finais' },
];

function StepNumber({ n, active, saved }) {
  if (saved) {
    return (
      <span className="step-status-ic step-saved" title="Capítulo salvo">
        <svg viewBox="0 0 14 14" width="9" height="9" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="2 7 6 11 12 3"/>
        </svg>
      </span>
    );
  }
  return (
    <span className={'step-status-ic step-num' + (active ? ' active' : '')}>
      {String(n).padStart(2, '0')}
    </span>
  );
}

function Sidebar({ active, onSelect }) {
  const { plan } = usePlan();
  const lang = plan.lang || 'pt-BR';
  const savedMap = plan.savedChapters || {};
  const savedCount = STEPS.filter(s => savedMap[s.id]).length;

  return (
    <div className="sidebar">
      <div className="group-label">Etapas</div>
      <div className="step-tree">
        {STEPS.map((s, i) => (
          <div
            key={s.id}
            className={'step' + (active === s.id ? ' active' : '') + (savedMap[s.id] ? ' saved' : '')}
            onClick={() => onSelect(s.id)}
          >
            <StepNumber n={i + 1} active={active === s.id} saved={!!savedMap[s.id]}/>
            <span>{(typeof tr === 'function' ? tr('step.' + s.id, lang) : s.label) || s.label}</span>
          </div>
        ))}
      </div>

      <div className="divider"/>

      <div className="group-label">Plano</div>
      <div style={{ padding: '4px 10px', fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.7 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
          <span style={{ flexShrink: 0 }}>Salvos</span>
          <span style={{ color: 'var(--ink)', whiteSpace: 'nowrap' }}>{savedCount} de {STEPS.length}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
          <span style={{ flexShrink: 0 }}>Versão</span>
          <span style={{ color: 'var(--ink)', whiteSpace: 'nowrap' }}>v1 — rascunho</span>
        </div>
      </div>
    </div>
  );
}

window.Sidebar = Sidebar;
window.STEPS = STEPS;