frontend/src/App.jsx

import React, { useEffect, useState } from 'react'
import { api } from './api'
import ElaboracaoTab from './components/ElaboracaoTab'
import VisualizacaoTab from './components/VisualizacaoTab'

const TABS = [
  { key: 'Pesquisa', label: 'Pesquisa', hint: 'Módulo em desenvolvimento' },
  { key: 'Elaboração/Edição', label: 'Elaboração/Edição', hint: 'Fluxo completo de modelagem' },
  { key: 'Visualização/Avaliação', label: 'Visualização/Avaliação', hint: 'Leitura e avaliação de modelos .dai' },
]

export default function App() {
  const [activeTab, setActiveTab] = useState(TABS[0].key)
  const [sessionId, setSessionId] = useState('')
  const [bootError, setBootError] = useState('')

  useEffect(() => {
    let mounted = true

    api.createSession()
      .then((resp) => {
        if (mounted) setSessionId(resp.session_id)
      })
      .catch((err) => {
        if (mounted) setBootError(err.message)
      })

    return () => {
      mounted = false
    }
  }, [])

  return (
    <div className="app-shell">
      <header className="app-header app-header-logo-only">
        <div className="brand-mark" aria-hidden="true">
          <img src={`${import.meta.env.BASE_URL}logo_mesa.png`} alt="MESA" />
        </div>
      </header>

      <nav className="tabs" aria-label="Navegação principal">
        {TABS.map((tab) => {
          const active = tab.key === activeTab
          return (
            <button
              key={tab.key}
              className={active ? 'tab-pill active' : 'tab-pill'}
              onClick={() => setActiveTab(tab.key)}
              type="button"
            >
              <strong>{tab.label}</strong>
              <small>{tab.hint}</small>
            </button>
          )
        })}
      </nav>

      {bootError ? <div className="error-line">Falha ao criar sessão: {bootError}</div> : null}

      {activeTab === 'Pesquisa' ? (
        <section className="workflow-section placeholder-section" style={{ '--section-order': 1 }}>
          <header className="section-head">
            <span className="section-index">1</span>
            <div className="section-title-wrap">
              <h3>Pesquisa</h3>
              <p>Este módulo segue em desenvolvimento no app original e foi mantido com o mesmo status.</p>
            </div>
          </header>
          <div className="section-body">
            <div className="empty-box">Aba disponível para expansão futura.</div>
          </div>
        </section>
      ) : null}

      <div className="tab-pane" hidden={activeTab !== 'Elaboração/Edição'}>
        <ElaboracaoTab sessionId={sessionId} />
      </div>
      <div className="tab-pane" hidden={activeTab !== 'Visualização/Avaliação'}>
        <VisualizacaoTab sessionId={sessionId} />
      </div>
    </div>
  )
}