// ============================================================
// Section editors (part B): Estilo de vida, Recs, Próximos passos, Care team
// ============================================================

/* ---------- 6. Estilo de vida (subsections) ---------- */
function SubAcc({ icon, label, badge, defaultOpen, children }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div className={'sub-acc ' + (open ? 'open' : 'collapsed')}>
      <div className="sub-acc-head" onClick={() => setOpen(!open)}>
        {icon}
        <span className="lbl">{label}</span>
        {badge && <span className="badge">{badge}</span>}
        <span className="chev"><Ico.Chevron/></span>
      </div>
      <div className="sub-acc-body">{children}</div>
    </div>
  );
}

// Inline chip add/remove used across lifestyle blocks.
function ChipEditor({ items, onChange, danger, placeholder = 'item' }) {
  const [v, setV] = React.useState('');
  const list = items || [];
  const add = () => { const t = v.trim(); if (t && !list.includes(t)) onChange([...list, t]); setV(''); };
  return (
    <div className="chips">
      {list.map(c => (
        <span key={c} className={'chip ' + (danger ? 'danger' : 'selected') + ' removable'} onClick={() => onChange(list.filter(x => x !== c))}>{c} <Ico.X/></span>
      ))}
      <span className="chip add" style={{ padding: 0 }}>
        <input value={v} onChange={e => setV(e.target.value)} onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), add())}
          placeholder={'+ ' + placeholder} style={{ border: 0, outline: 0, background: 'transparent', padding: '6px 10px', width: 130, fontSize: 12, fontFamily: 'inherit' }}/>
      </span>
    </div>
  );
}

const LF_ICONS = [
  { v: 'bowl', el: <Ico.Bowl/> },
  { v: 'activity', el: <Ico.Activity/> },
  { v: 'sleep', el: <Ico.Sleep/> },
  { v: 'heart', el: <Ico.Heart/> },
];
const LF_STATUS = [
  { value: 'ok', label: 'Ótimo' },
  { value: 'warn', label: 'Atenção' },
  { value: 'risk', label: 'Ruim' },
];

// Estrutura em branco para planos novos — a médica preenche cada pilar.
const DEFAULT_ESTILO = {
  frase: '',
  blocks: [
    {
      id: 'alimentacao', icon: 'bowl', title: 'Alimentação', badge: '',
      kv: [
        { k: 'Distribuição de macros', v: '' },
        { k: 'Hidratação', v: '' },
      ],
      direcionamentos: '',
      recomendados: [],
      evite: [],
    },
    {
      id: 'atividade', icon: 'activity', title: 'Atividade Física', badge: 'Meta semanal',
      direcionamentos: '',
      bio: [],
    },
    {
      id: 'sono', icon: 'sleep', title: 'Sono', badge: '',
      direcionamentos: '',
      bio: [],
    },
    {
      id: 'stress', icon: 'heart', title: 'Stress & Bem-estar emocional', badge: '',
      direcionamentos: '',
      bio: [],
    },
  ],
};

function EstiloEditor() {
  const [data, setData] = useChapter('estilo', JSON.parse(JSON.stringify(DEFAULT_ESTILO)));
  const blocks = data.blocks || [];
  const setBlock = (i, patch) => setData({ ...data, blocks: blocks.map((b, j) => j === i ? { ...b, ...patch } : b) });

  return (
    <>
      <SectionHeader title="Estilo de vida" sub="Pilares de Nutrição, Atividade Física, Sono e Bem-estar emocional." chapterId="estilo"/>

      <SectionCard title={fl('Frase-conceito do ciclo')} right={<span className="muted tiny">Aparece no topo do capítulo no plano</span>}>
        <input className="input lg" value={data.frase || ''} placeholder="Frase que abre o capítulo de estilo de vida…" onChange={e => setData({ ...data, frase: e.target.value })}/>
      </SectionCard>

      <div className="spacer-16"/>
      <div className="sub-accordion">
        {blocks.map((b, i) => (
          <SubAcc key={b.id || i} icon={(LF_ICONS.find(x => x.v === b.icon) || LF_ICONS[0]).el} label={b.title || 'Pilar'} badge={b.badge} defaultOpen={i === 0}>
            <div className="grid-2">
              <div className="field"><label>{fl('Título')}</label><input className="input" value={b.title || ''} onChange={e => setBlock(i, { title: e.target.value })}/></div>
              <div className="field"><label>{fl('Selo (badge)')}</label><input className="input" value={b.badge || ''} onChange={e => setBlock(i, { badge: e.target.value })}/></div>
            </div>

            {b.kv && b.kv.length > 0 && (
              <>
                <div className="spacer-12"/>
                {b.kv.map((kv, k) => (
                  <div className="field" key={k} style={{ marginBottom: 10 }}>
                    <label>{kv.k}</label>
                    <input className="input" value={kv.v} onChange={e => setBlock(i, { kv: b.kv.map((x, j) => j === k ? { ...x, v: e.target.value } : x) })}/>
                  </div>
                ))}
              </>
            )}

            {b.stat && (
              <>
                <div className="spacer-12"/>
                <div className="field">
                  <label>{fl('Medição (wearable)')}</label>
                  <div className="grid-3" style={{ gap: 12 }}>
                    <input className="input" value={b.stat.value} placeholder="6h32" onChange={e => setBlock(i, { stat: { ...b.stat, value: e.target.value } })}/>
                    <input className="input" value={b.stat.unit} placeholder="ms" onChange={e => setBlock(i, { stat: { ...b.stat, unit: e.target.value } })}/>
                    <input className="input" value={b.stat.statusLabel} placeholder="Sono ruim" onChange={e => setBlock(i, { stat: { ...b.stat, statusLabel: e.target.value } })}/>
                  </div>
                  <div className="period-tabs bio-status-tabs" style={{ marginTop: 8 }}>
                    {LF_STATUS.map(s => (
                      <button key={s.value} className={b.stat.statusKind === s.value ? 'active ' + s.value : ''} onClick={() => setBlock(i, { stat: { ...b.stat, statusKind: s.value } })}>{s.label}</button>
                    ))}
                  </div>
                </div>
              </>
            )}

            <div className="spacer-12"/>
            <div className="field"><label>{fl('Direcionamentos')}</label>
              <RichText value={b.direcionamentos || ''} onChange={html => setBlock(i, { direcionamentos: html })} placeholder="Lista de orientações…"/>
            </div>

            {b.recomendados && (
              <>
                <div className="spacer-12"/>
                <div className="field"><label>{fl('Alimentos recomendados')}</label>
                  <ChipEditor items={b.recomendados} onChange={v => setBlock(i, { recomendados: v })} placeholder="alimento"/>
                </div>
              </>
            )}
            {b.evite && (
              <>
                <div className="spacer-12"/>
                <div className="field"><label>{fl('Evite esses alimentos')}</label>
                  <ChipEditor items={b.evite} onChange={v => setBlock(i, { evite: v })} danger placeholder="alimento"/>
                </div>
              </>
            )}
            {b.bio && (
              <>
                <div className="spacer-12"/>
                <div className="field"><label>{fl('Biomarcadores relacionados')}</label>
                  <BioChipEditor items={b.bio} onChange={v => setBlock(i, { bio: v })}/>
                </div>
              </>
            )}
          </SubAcc>
        ))}
      </div>
    </>
  );
}

/* ---------- 7. Health Coach ---------- */
const DEFAULT_COACH = {
  coachName: 'Pedro Costa',
  mensagem: '<p>Olá! Olhei seu exame com calma. Vamos construir o plano uma semana de cada vez, com consistência. Conta comigo nessa.</p>',
  motivacao: '<p>O que faz esse plano importar para você no dia a dia.</p>',
  compromisso: '“Meu compromisso pessoal para este ciclo.”',
};

function RecomendacoesEditor() {
  const [data, setData] = useChapter('recomendacoes', JSON.parse(JSON.stringify(DEFAULT_COACH)));

  return (
    <>
      <SectionHeader title="Health Coach" sub="Bloco em destaque com a leitura humana do plano." chapterId="recomendacoes"/>

      <SectionCard title={fl('Coach responsável')}>
        <div className="field" style={{ maxWidth: 320 }}>
          <label>{fl('Nome do Health Coach')}</label>
          <input className="input" value={data.coachName || ''} placeholder="Nome do coach" onChange={e => setData({ ...data, coachName: e.target.value })}/>
        </div>
      </SectionCard>

      <SectionCard title={fl('Mensagem do Coach')} right={<span className="muted tiny">Aparece em destaque no plano</span>}>
        <RichText value={data.mensagem || ''} onChange={html => setData({ ...data, mensagem: html })} placeholder="Mensagem pessoal do coach ao paciente…"/>
      </SectionCard>

      <SectionCard title={fl('Motivações pessoais & propósito')}>
        <div className="field"><label>{fl('O que faz isso importar para ele(a)')}</label>
          <RichText value={data.motivacao || ''} onChange={html => setData({ ...data, motivacao: html })} placeholder="Motivação pessoal do paciente…"/>
        </div>
        <div className="spacer-12"/>
        <div className="field"><label>{fl('Compromisso pessoal do paciente')}</label>
          <input className="input" value={data.compromisso || ''} placeholder="“Compromisso em primeira pessoa…”" onChange={e => setData({ ...data, compromisso: e.target.value })}/>
        </div>
      </SectionCard>
    </>
  );
}

/* ---------- 8. Próximos passos ---------- */

// Modal for "Solicitar exame" / "Adicionar exame"
const EXAM_CATALOG = [
  { id: 'usg-abd', cat: 'Imagem', name: 'Ultrassonografia abdominal total', tags: ['Esteatose','Fígado'] },
  { id: 'rmn-cer', cat: 'Imagem', name: 'Ressonância magnética cerebral', tags: ['Neurologia'] },
  { id: 'eco-card', cat: 'Imagem', name: 'Ecocardiograma com Doppler', tags: ['Cardiovascular'] },
  { id: 'tc-pulm', cat: 'Imagem', name: 'Tomografia de tórax (baixa dose)', tags: ['Pulmão','Screening'] },
  { id: 'lipid-c', cat: 'Bioquímico', name: 'Perfil lipídico completo + Apo B', tags: ['Cardio'] },
  { id: 'hba1c', cat: 'Bioquímico', name: 'Hemoglobina glicada (HbA1c)', tags: ['Metabolismo'] },
  { id: 'tsh-t4', cat: 'Hormonal', name: 'TSH e T4 livre', tags: ['Tireóide'] },
  { id: 'cortisol', cat: 'Hormonal', name: 'Cortisol salivar (curva diária)', tags: ['Stress'] },
  { id: 'gen-mthfr', cat: 'Genético', name: 'Painel genético MTHFR / metilação', tags: ['Cardio','Genética'] },
  { id: 'micro-flora', cat: 'Microbioma', name: 'Análise de microbiota intestinal', tags: ['Intestino'] },
  { id: 'qsi', cat: 'Endócrino', name: 'Quantose IR (curva de insulina)', tags: ['Resistência insulínica'] },
  { id: 'omg-idx', cat: 'Bioquímico', name: 'Índice de Ômega-3 (membrana eritrocitária)', tags: ['Inflamação'] },
  { id: 'cons-long', cat: 'Consulta', name: 'Consulta de longevidade', tags: ['Médico'] },
  { id: 'cons-nutri', cat: 'Consulta', name: 'Consulta de nutrição', tags: ['Nutricionista'] },
  { id: 'cons-medrev', cat: 'Consulta', name: 'Revisão de medicamentos', tags: ['Medicamento'] },
  { id: 'cons-retorno', cat: 'Consulta', name: 'Retorno / reavaliação clínica', tags: ['Retorno'] },
];

const MONTHS = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

function SolicitarExameModal({ onClose, onSave }) {
  const [step, setStep] = React.useState(1); // 1: pick exam · 2: details
  const [query, setQuery] = React.useState('');
  const [filter, setFilter] = React.useState('Todos');
  const [picked, setPicked] = React.useState(null);
  const [typeVal, setTypeVal] = React.useState('');
  const [titleVal, setTitleVal] = React.useState('');
  const [month, setMonth] = React.useState('Jun');
  const [year, setYear] = React.useState('2026');
  const [reason, setReason] = React.useState('');
  const [priority, setPriority] = React.useState('Normal');
  const [biomarkers, setBiomarkers] = React.useState([]);

  // ESC to close
  React.useEffect(() => {
    const k = e => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [onClose]);

  const cats = ['Todos', ...new Set(EXAM_CATALOG.map(e => e.cat))];
  const filtered = EXAM_CATALOG.filter(e =>
    (filter === 'Todos' || e.cat === filter) &&
    (query === '' || e.name.toLowerCase().includes(query.toLowerCase()))
  );
  const exactMatch = EXAM_CATALOG.some(e => e.name.toLowerCase() === query.trim().toLowerCase());

  // Pick a preset entry → prefill the editable type/title.
  const pickEntry = (e) => { setPicked(e); setTypeVal(e.cat); setTitleVal(e.name); };
  // Start a fully custom entry (any exam or consultation the doctor types).
  const startCustom = (presetType) => {
    const q = query.trim();
    setPicked({ id: '__custom__', cat: presetType || 'Exame', name: q || 'Novo item', tags: [] });
    setTypeVal(presetType || 'Exame');
    setTitleVal(q);
    setStep(2);
  };

  const save = () => {
    onSave({
      date: `${month} ${year}`,
      type: (typeVal || '').trim() || 'Exame',
      title: (titleVal || '').trim() || (picked && picked.name) || 'Item',
      note: reason || `Solicitado · prioridade ${priority.toLowerCase()}`,
    });
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="muted tiny" style={{ letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>Próximos passos</div>
            <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>Adicionar exame ou consulta</div>
          </div>
          <button className="btn ghost sm" onClick={onClose}><Ico.X/></button>
        </div>

        {/* stepper */}
        <div className="modal-steps">
          <div className={'mstep' + (step >= 1 ? ' on' : '')}>
            <span className="dot">1</span> Escolher
          </div>
          <span className="mstep-line"/>
          <div className={'mstep' + (step >= 2 ? ' on' : '')}>
            <span className="dot">2</span> Detalhes
          </div>
        </div>

        <div className="modal-body">
          {step === 1 && (
            <>
              <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--surface-2)', padding: '8px 12px', borderRadius: 'var(--r-md)', flex: 1, border: '1px solid var(--line)' }}>
                  <Ico.Search/>
                  <input
                    autoFocus
                    style={{ border: 0, outline: 0, background: 'transparent', flex: 1, fontSize: 13.5 }}
                    placeholder="Buscar ou digitar um exame / consulta…"
                    value={query}
                    onChange={e => setQuery(e.target.value)}
                  />
                </div>
              </div>
              <div className="chips" style={{ marginBottom: 12 }}>
                {cats.map(c => (
                  <span key={c} className={'chip ' + (filter === c ? 'selected' : '')} onClick={() => setFilter(c)}>{c}</span>
                ))}
              </div>
              <div className="exam-list">
                {filtered.map(e => (
                  <div
                    key={e.id}
                    className={'exam-row' + (picked?.id === e.id ? ' picked' : '')}
                    onClick={() => pickEntry(e)}
                  >
                    <div className="exam-radio">{picked?.id === e.id && <span/>}</div>
                    <div style={{ flex: 1 }}>
                      <div className="muted tiny" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>{e.cat}</div>
                      <div style={{ fontWeight: 500, fontSize: 13.5, marginTop: 2 }}>{e.name}</div>
                    </div>
                    <div className="chips">
                      {e.tags.map(t => <span key={t} className="chip" style={{ fontSize: 10.5, padding: '2px 8px' }}>{t}</span>)}
                    </div>
                  </div>
                ))}
                {query.trim() && !exactMatch && (
                  <div className="exam-row" onClick={() => startCustom('Exame')} style={{ cursor: 'pointer' }}>
                    <div className="exam-radio"/>
                    <div style={{ flex: 1 }}>
                      <div className="muted tiny" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>Personalizado</div>
                      <div style={{ fontWeight: 500, fontSize: 13.5, marginTop: 2 }}>+ Adicionar “{query.trim()}”</div>
                    </div>
                    <div className="chips">
                      <span className="chip" onClick={ev => { ev.stopPropagation(); startCustom('Exame'); }} style={{ fontSize: 10.5, padding: '2px 8px' }}>Exame</span>
                      <span className="chip" onClick={ev => { ev.stopPropagation(); startCustom('Consulta'); }} style={{ fontSize: 10.5, padding: '2px 8px' }}>Consulta</span>
                    </div>
                  </div>
                )}
                {filtered.length === 0 && !query.trim() && (
                  <div className="muted tiny" style={{ textAlign: 'center', padding: 24 }}>
                    Digite acima para buscar um exame ou criar um exame/consulta personalizado.
                  </div>
                )}
              </div>
            </>
          )}

          {step === 2 && picked && (
            <>
              <div className="grid-2" style={{ marginBottom: 16, gap: 12 }}>
                <div className="field">
                  <label>{fl('Tipo')}</label>
                  <input className="input" value={typeVal} onChange={e => setTypeVal(e.target.value)} placeholder="Exame · Consulta · Imagem…"/>
                </div>
                <div className="field">
                  <label>{fl('Título')}</label>
                  <input className="input" value={titleVal} onChange={e => setTitleVal(e.target.value)} placeholder="Nome do exame ou consulta"/>
                </div>
              </div>

              <div className="field" style={{ marginBottom: 14 }}>
                <label>{fl('Quando o paciente deve realizar')}</label>
                <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                  <select className="select" value={month} onChange={e => setMonth(e.target.value)} style={{ flex: 1 }}>
                    {MONTHS.map(m => <option key={m}>{m}</option>)}
                  </select>
                  <select className="select" value={year} onChange={e => setYear(e.target.value)} style={{ width: 110 }}>
                    {['2026','2027'].map(y => <option key={y}>{y}</option>)}
                  </select>
                </div>
              </div>

              <div className="field" style={{ marginBottom: 14 }}>
                <label>{fl('Prioridade')}</label>
                <div className="period-tabs" style={{ marginTop: 4 }}>
                  {['Urgente','Normal','Quando puder'].map(p => (
                    <button key={p} className={priority === p ? 'active' : ''} onClick={() => setPriority(p)}>{p}</button>
                  ))}
                </div>
              </div>

              <div className="field" style={{ marginBottom: 14 }}>
                <label>{fl('Biomarcadores que motivam a solicitação')}</label>
                <div className="chips" style={{ marginTop: 4 }}>
                  {['Apo B','HDL Colesterol','Vitamina D','Homocisteína','Ferritina','Magnésio'].map(b => (
                    <span key={b} className={'chip ' + (biomarkers.includes(b) ? 'selected' : '')}
                      onClick={() => setBiomarkers(s => s.includes(b) ? s.filter(x=>x!==b) : [...s, b])}>{b}</span>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>{fl('Observação para o paciente')} <span className="muted tiny">{fl('(opcional)')}</span></label>
                <textarea className="textarea" value={reason} onChange={e => setReason(e.target.value)}
                  placeholder="Ex.: Reavaliação 90 dias após início da suplementação."/>
              </div>
            </>
          )}
        </div>

        <div className="modal-foot">
          {step === 2 && <button className="btn ghost" onClick={() => setStep(1)}>← Voltar</button>}
          <div style={{ flex: 1 }}/>
          <button className="btn" onClick={onClose}>Cancelar</button>
          {step === 1 && (
            <button className="btn primary" disabled={!picked}
              onClick={() => picked && setStep(2)}
              style={!picked ? { opacity: 0.4, pointerEvents: 'none' } : {}}>
              Continuar →
            </button>
          )}
          {step === 2 && (
            <button className="btn primary" onClick={save}>
              <Ico.Check/> Adicionar ao plano
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// Modal to add a biomarker follow-up (Acompanhamento).
const ACOMP_INTERVALS = ['30 dias', '90 dias', '6 meses', '12 meses', 'Personalizado'];
const ACOMP_SUGGEST = ['Perfil lipídico + Apo B', 'Homocisteína', '25-OH Vitamina D', 'Hemoglobina glicada (HbA1c)', 'Ferritina', 'TSH'];

function AddAcompanhamentoModal({ onClose, onSave }) {
  const [name, setName] = React.useState('');
  const [tag, setTag] = React.useState('90 dias');
  const [customTag, setCustomTag] = React.useState('');
  const [note, setNote] = React.useState('');

  React.useEffect(() => {
    const k = e => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [onClose]);

  const finalTag = tag === 'Personalizado' ? (customTag.trim() || '—') : tag;
  const canSave = name.trim().length > 0;
  const save = () => {
    if (!canSave) return;
    onSave({ name: name.trim(), tag: finalTag, note: note.trim() });
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="muted tiny" style={{ letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>Próximos passos</div>
            <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>Adicionar acompanhamento</div>
          </div>
          <button className="btn ghost sm" onClick={onClose}><Ico.X/></button>
        </div>

        <div className="modal-body">
          <div className="field" style={{ marginBottom: 14 }}>
            <label>{fl('Biomarcador a acompanhar')}</label>
            <input className="input" autoFocus value={name} onChange={e => setName(e.target.value)}
              placeholder="Ex.: Homocisteína" onKeyDown={e => { if (e.key === 'Enter' && canSave) save(); }}/>
            <div className="chips" style={{ marginTop: 8 }}>
              {ACOMP_SUGGEST.map(b => (
                <span key={b} className={'chip ' + (name === b ? 'selected' : '')} onClick={() => setName(b)}>{b}</span>
              ))}
            </div>
          </div>

          <div className="field" style={{ marginBottom: 14 }}>
            <label>{fl('Intervalo de revisão')}</label>
            <div className="period-tabs" style={{ marginTop: 4 }}>
              {ACOMP_INTERVALS.map(p => (
                <button key={p} className={tag === p ? 'active' : ''} onClick={() => setTag(p)}>{p}</button>
              ))}
            </div>
            {tag === 'Personalizado' && (
              <input className="input" style={{ marginTop: 8 }} value={customTag} onChange={e => setCustomTag(e.target.value)}
                placeholder="Ex.: 8 semanas"/>
            )}
          </div>

          <div className="field">
            <label>{fl('Observação')} <span className="muted tiny">{fl('(opcional)')}</span></label>
            <textarea className="textarea" value={note} onChange={e => setNote(e.target.value)}
              placeholder="Ex.: Após início do complexo B metilado."/>
          </div>
        </div>

        <div className="modal-foot">
          <div style={{ flex: 1 }}/>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn primary" onClick={save} disabled={!canSave}
            style={!canSave ? { opacity: 0.4, pointerEvents: 'none' } : {}}>
            <Ico.Check/> Adicionar ao plano
          </button>
        </div>
      </div>
    </div>
  );
}

function ProximosEditor() {
  const [tab, setTab] = React.useState('exames');
  const [showExamModal, setShowExamModal] = React.useState(false);
  const [showAcompModal, setShowAcompModal] = React.useState(false);

  const [data, setData] = useChapter('proximos', { exames: [], acompanha: [] });
  const exames = data.exames || [];
  const setExames = (next) => setData({ ...data, exames: typeof next === 'function' ? next(exames) : next });
  const acompanha = data.acompanha || [];
  const setAcompanha = (next) => setData({ ...data, acompanha: typeof next === 'function' ? next(acompanha) : next });

  // Lightweight drag-to-reorder for exam rows
  const [dragIdx, setDragIdx] = React.useState(null);
  const onDragStart = i => setDragIdx(i);
  const onDragOver = (i, e) => {
    e.preventDefault();
    if (dragIdx === null || dragIdx === i) return;
    setExames(arr => {
      const next = [...arr];
      const [moved] = next.splice(dragIdx, 1);
      next.splice(i, 0, moved);
      setDragIdx(i);
      return next;
    });
  };
  const onDragEnd = () => setDragIdx(null);

  return (
    <>
      <SectionHeader title="Próximos passos" sub="O que o paciente fará nas próximas semanas — vira agenda e tarefas no app." chapterId="proximos"/>

      <AIRationale
        sources={['Plano anterior · v2 (jan/2026)', 'Sugestões de protocolo · B-Life Care', 'Histórico de exames de Fabrizio · 2022–2026', 'Polimorfismo genético não investigado anteriormente']}
        text={<>Selecionei <strong>4 exames de reavaliação</strong> e <strong>4 biomarcadores de acompanhamento</strong> a partir do que a v2 do plano deixou em aberto. O <strong>painel MTHFR</strong> é novo — explica parte da homocisteína elevada e não foi investigado antes. A <strong>ultrassonografia abdominal</strong> é prioridade pelo padrão de gordura visceral observado no DEXA de jan/2026.</>}
      />

      <div className="banner muted" style={{ marginBottom: 14 }}>
        As tarefas e exames aparecem como "Próximos passos" no app do paciente.
      </div>

      {/* sub tabs */}
      <div style={{ display: 'inline-flex', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-pill)', padding: 3, marginBottom: 14 }}>
        {[
          ['exames','Exames adicionais',exames.length],
          ['acomp','Acompanhamento',acompanha.length],
        ].map(([id, lbl, n]) => (
          <button key={id} onClick={() => setTab(id)} className={'btn xs ghost' + (tab===id?' ':'')}
            style={{ background: tab===id ? 'var(--brand-tint)' : 'transparent', color: tab===id ? 'var(--brand)' : 'var(--ink-2)', borderRadius: 'var(--r-pill)', padding: '5px 12px', fontWeight: 500 }}>
            {lbl} <span style={{ background: tab===id ? 'white' : 'var(--surface-3)', color: 'var(--ink-3)', padding: '0 6px', borderRadius: 8, marginLeft: 4, fontSize: 11 }}>{n}</span>
          </button>
        ))}
      </div>

      {tab === 'exames' && (
        <SectionCard
          title="Exames adicionais"
          count={exames.length}
          right={<button className="btn xs" onClick={() => setShowExamModal(true)}><Ico.Plus/> Solicitar exame</button>}
        >
          {exames.map((e, i) => (
            <div
              className={'task-card draggable' + (dragIdx === i ? ' dragging' : '')}
              key={i}
              draggable
              onDragStart={() => onDragStart(i)}
              onDragOver={ev => onDragOver(i, ev)}
              onDragEnd={onDragEnd}
              style={{ gridTemplateColumns: '20px 110px 1fr auto' }}
            >
              <span className="grip" title="Arrastar para reordenar" style={{ cursor: 'grab', color: 'var(--ink-4)', display: 'grid', placeItems: 'center' }}>
                <Ico.Grip/>
              </span>
              <div className="date-tag">
                <span className="m">{e.date.split(' ')[0]}</span>
                <span className="y">{e.date.split(' ')[1]}</span>
              </div>
              <div>
                <div className="typ">{e.type}</div>
                <div className="ttl">{e.title}</div>
                <div className="muted tiny" style={{ marginTop: 2 }}>{e.note}</div>
              </div>
              <div className="actions">
                <button className="btn ghost xs"><Ico.Pencil/></button>
                <button className="btn ghost xs" onClick={() => setExames(exames.filter((_,j)=>j!==i))}><Ico.X/></button>
              </div>
            </div>
          ))}
          <div className="add-section" style={{ padding: 12, marginTop: 6 }} onClick={() => setShowExamModal(true)}>
            <Ico.Plus/> Adicionar exame
          </div>
        </SectionCard>
      )}

      {tab === 'acomp' && (
        <SectionCard title={fl('Acompanhamento')} count={acompanha.length}>
          {acompanha.map((a, i) => (
            <div className="task-card" key={i} style={{ gridTemplateColumns: '20px 90px 1fr auto' }}>
              <span className="grip" style={{ cursor: 'grab', color: 'var(--ink-4)', display: 'grid', placeItems: 'center' }}><Ico.Grip/></span>
              <div className="date-tag" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
                <span className="m">Revisar</span>
                <span className="y" style={{ color: 'var(--brand)' }}>{a.tag}</span>
              </div>
              <div>
                <div className="typ">Biomarcador</div>
                <div className="ttl">{a.name}</div>
                <div className="muted tiny" style={{ marginTop: 2 }}>{a.note}</div>
              </div>
              <div className="actions">
                <button className="btn ghost xs" title="Remover" onClick={() => setAcompanha(acompanha.filter((_, j) => j !== i))}><Ico.X/></button>
              </div>
            </div>
          ))}
          <div className="add-section" style={{ padding: 12, marginTop: 6 }} onClick={() => setShowAcompModal(true)}>
            <Ico.Plus/> Adicionar acompanhamento
          </div>
        </SectionCard>
      )}

      {showExamModal && <SolicitarExameModal onClose={() => setShowExamModal(false)} onSave={(novo) => {
        setExames([...exames, novo]);
        setShowExamModal(false);
      }}/>}

      {showAcompModal && <AddAcompanhamentoModal onClose={() => setShowAcompModal(false)} onSave={(novo) => {
        setAcompanha([...acompanha, novo]);
        setShowAcompModal(false);
        setTab('acomp');
      }}/>}
    </>
  );
}

/* ---------- 10. Observações finais ---------- */
function ObservacoesEditor() {
  const [data, setData] = useChapter('observacoes', { texto: '' });
  return (
    <>
      <SectionHeader title={fl('Observações finais')} sub="Observações finais e disclaimers que aparecem no fim do PDF." chapterId="observacoes"/>
      <SectionCard title={fl('Observações finais')} right={<span className="muted tiny">Aparece no final do PDF</span>}>
        <RichText
          value={data.texto || ''}
          onChange={html => setData({ ...data, texto: html })}
          placeholder="Notas livres do médico ao paciente — incluídas no final do PDF…"
        />
        <div className="muted tiny" style={{ marginTop: 8 }}>Notas livres do médico ao paciente — incluídas no final do PDF.</div>
      </SectionCard>
    </>
  );
}

/* ---------- 9. Care Team ---------- */
function TeamEditor() {
  const team = [
    { name: 'Dr.ª Luiza Simões', role: 'Médica longevidade', kind: 'Líder do plano', color: 'linear-gradient(135deg,#74B0A8,#04261E)' },
    { name: 'Pedro Costa', role: 'Health Coach', kind: 'Acompanha no dia-a-dia', color: 'linear-gradient(135deg,#C0BCAE,#74B0A8)' },
    { name: 'Marcela Saporta', role: 'Nutricionista funcional', kind: 'Plano alimentar', color: 'linear-gradient(135deg,#C0BCAE,#878582)' },
  ];
  return (
    <>
      <SectionHeader title={fl('Meu Care Team')} sub="Profissionais que aparecem no rodapé do plano e ficam acessíveis pelo chat."/>
      <SectionCard title={fl('Equipe atribuída')} count={team.length} right={<button className="btn xs"><Ico.Plus/> Adicionar membro</button>}>
        <div className="team-grid">
          {team.map((m, i) => (
            <div className="team-card" key={i}>
              <div className="av" style={{ background: m.color }}>{m.name.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
              <div style={{ flex: 1 }}>
                <div className="nm">{m.name}</div>
                <div className="ro">{m.role}</div>
                <div className="muted tiny" style={{ marginTop: 2 }}>{m.kind}</div>
              </div>
              <button className="btn ghost xs"><Ico.More/></button>
            </div>
          ))}
        </div>
      </SectionCard>
      <SectionCard title={fl('Chat & contato')} right={<span className="muted tiny">Botões que ficam no rodapé do plano</span>}>
        <div className="grid-2">
          <div className="field"><label>{fl('Texto do botão principal')}</label><input className="input" defaultValue="Conversar com meu coach"/></div>
          <div className="field"><label>{fl('Canal preferencial')}</label>
            <select className="select"><option>Chat in-app</option><option>WhatsApp</option><option>Videochamada</option></select>
          </div>
        </div>
      </SectionCard>
    </>
  );
}

window.EstiloEditor = EstiloEditor;
window.RecomendacoesEditor = RecomendacoesEditor;
window.ProximosEditor = ProximosEditor;
window.ObservacoesEditor = ObservacoesEditor;
window.TeamEditor = TeamEditor;