function App() {
  const [plan, setPlan] = React.useState(() => loadPlan());
  const [activeChapter, setActiveChapter] = React.useState('patient');
  const [zoom, setZoom] = React.useState(0.6);
  const [savedAt, setSavedAt] = React.useState(null);
  const [coverVariant, setCoverVariant] = React.useState('cream');

  const saveTimeout = React.useRef(null);
  React.useEffect(() => {
    clearTimeout(saveTimeout.current);
    saveTimeout.current = setTimeout(() => {
      savePlan(plan);
      setSavedAt(new Date());
    }, 250);
    return () => clearTimeout(saveTimeout.current);
  }, [plan]);

  function updatePlan(patch) {
    setPlan(prev => ({ ...prev, ...patch }));
  }

  function loadExample() {
    if (window.confirm('Substituir o plano atual pelo exemplo do Dr. Guilherme Hilsdorf?')) {
      setPlan(SAMPLE_PLAN);
    }
  }

  function clearPlan() {
    if (window.confirm('Apagar todo o conteúdo e começar em branco?')) {
      setPlan(EMPTY_PLAN);
    }
  }

  function exportPdf() {
    const original = document.title;
    const patientName = plan.patient.name || 'paciente';
    document.title = `Plano de Acao - ${patientName.replace(/[^a-zA-Z0-9 ]/g, '')}`;
    requestAnimationFrame(() => {
      window.print();
      setTimeout(() => { document.title = original; }, 500);
    });
  }

  const chapter = CHAPTERS.find(c => c.id === activeChapter);

  const savedLabel = !savedAt ? 'Pronto' :
    'Guardado às ' + savedAt.toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit' });

  return (
    <React.Fragment>
      <TopBar
        onExport={exportPdf}
        onLoadExample={loadExample}
        onClear={clearPlan}
        savedLabel={savedLabel}
        coverVariant={coverVariant}
        setCoverVariant={setCoverVariant}
      />

      <div className="workspace">
        <Sidebar
          chapters={CHAPTERS}
          activeId={activeChapter}
          onSelect={setActiveChapter}
          plan={plan}
        />

        <EditorPanel chapter={chapter} plan={plan} updatePlan={updatePlan} />

        <PdfPreview
          plan={plan}
          zoom={zoom}
          setZoom={setZoom}
          coverVariant={coverVariant}
        />
      </div>
    </React.Fragment>
  );
}

function TopBar({ onExport, onLoadExample, onClear, savedLabel, coverVariant, setCoverVariant }) {
  const [showCoverMenu, setShowCoverMenu] = React.useState(false);
  const menuRef = React.useRef(null);

  React.useEffect(() => {
    if (!showCoverMenu) return;
    const close = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) setShowCoverMenu(false);
    };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [showCoverMenu]);

  return (
    <header className="topbar">
      <div className="topbar__brand">
        <img src="assets/blife-symbol-molecule.svg" alt="B-Life" />
        <div className="topbar__title">
          <span className="eyebrow">B-Life Clinic</span>
          <span className="name">Plano de Ação · Editor</span>
        </div>
      </div>

      <div className="topbar__actions">
        <span className="save-indicator">
          <span className="save-indicator__dot" />
          {savedLabel}
        </span>

        <div style={{ position: 'relative' }} ref={menuRef}>
          <button
            className="topbar__btn topbar__btn--ghost"
            onClick={() => setShowCoverMenu(!showCoverMenu)}
            title="Estilo da capa"
          >
            <Icon name="target" size={14} />
            Capa
          </button>
          {showCoverMenu && (
            <div style={{
              position: 'absolute', top: '100%', right: 0, marginTop: 6,
              background: 'var(--paper)', border: '1px solid var(--neutral-10)',
              borderRadius: 12, padding: 8, minWidth: 150,
              boxShadow: '0 8px 32px rgba(0,0,0,0.12)', zIndex: 100,
              display: 'flex', flexDirection: 'column', gap: 2,
            }}>
              {[
                { value: 'cream', label: 'Cream' },
                { value: 'forest', label: 'Forest' },
                { value: 'bold', label: 'Bold' },
              ].map(opt => (
                <button
                  key={opt.value}
                  onClick={() => { setCoverVariant(opt.value); setShowCoverMenu(false); }}
                  style={{
                    border: 0, background: coverVariant === opt.value ? 'var(--forest)' : 'transparent',
                    color: coverVariant === opt.value ? 'var(--paper)' : 'var(--ink)',
                    padding: '8px 14px', borderRadius: 8, cursor: 'pointer',
                    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300,
                    textAlign: 'left', transition: 'background 150ms',
                  }}
                >
                  {opt.label}
                </button>
              ))}
            </div>
          )}
        </div>

        <button className="topbar__btn topbar__btn--ghost" onClick={onLoadExample} title="Carregar exemplo">
          <Icon name="refresh" size={14} />
          Carregar exemplo
        </button>
        <button className="topbar__btn topbar__btn--ghost" onClick={onClear} title="Limpar tudo">
          <Icon name="trash" size={14} />
          Limpar
        </button>
        <button className="topbar__btn topbar__btn--primary" onClick={onExport}>
          <Icon name="download" size={14} />
          Exportar PDF
        </button>
      </div>
    </header>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);