// App — nav de topo + rotas. Estado de busca/filtros compartilhado com o Banco.

function App() {
  const first = (window.DEPS && window.DEPS[0] && window.DEPS[0].id) || '';
  const [screen, setScreen] = React.useState('dashboard');
  const [openId, setOpenId] = React.useState(first);
  const [filters, setFilters] = React.useState({ search: '', nicho: '', objecao: '', classes: [] });

  const navigate = (s, id) => {
    setScreen(s);
    if (id) setOpenId(id);
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: 'instant' }));
  };
  const updateFilters = patch => setFilters(f => ({ ...f, ...patch }));
  const toggleFilter = (key, val) => setFilters(f => {
    const arr = f[key] || [];
    return { ...f, [key]: arr.includes(val) ? arr.filter(x => x !== val) : [...arr, val] };
  });
  const clearFilters = () => setFilters({ search: '', nicho: '', objecao: '', classes: [] });

  return (
    <div className="min-h-screen bg-bg">
      <TopNav screen={screen} navigate={navigate} />
      <main>
        {screen === 'dashboard' && <Painel navigate={navigate} />}
        {screen === 'banco' && <Banco navigate={navigate} filters={filters} toggleFilter={toggleFilter} clearFilters={clearFilters} update={updateFilters} />}
        {screen === 'ranking' && <Ranking navigate={navigate} />}
        {screen === 'detalhe' && <Detalhe navigate={navigate} id={openId} />}
        {screen === 'matador' && <Matador navigate={navigate} />}
      </main>
    </div>
  );
}

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