// AAE BR-319 — App principal
const { useState, useMemo, useRef, useEffect } = React;
const DATA = window.__AAE_DATA__;

function App() {
  const [layers, setLayers] = useState({ br319:true, munis:true, rios:true, tis:true, ucs:true });
  const [year, setYear] = useState(2024);
  const [chainFilter, setChainFilter] = useState('todas');
  const [regionFilter, setRegionFilter] = useState('todas');
  const [selectedMun, setSelectedMun] = useState(null);
  const [basemap, setBasemap] = useState('satellite');

  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks({
    accent: '#CD5D1C',
    paper: '#F9FAFB',
    showGraph: true,
    showConsorcio: true,
  }) : [{accent:'#CD5D1C', paper:'#F9FAFB', showGraph:true, showConsorcio:true}, ()=>{}];

  const exportPNGRef = useRef(null);

  useEffect(()=>{
    document.documentElement.style.setProperty('--orange', tweaks.accent);
    document.documentElement.style.setProperty('--bg', tweaks.paper);
  }, [tweaks]);

  const selMuni = useMemo(() => DATA.municipios.find(m => m.nome === selectedMun) || null, [selectedMun]);

  const exportCSV = (rows) => {
    const headers = ['Município','UF','Região','Organizações','Açaí_t','Castanha_t','Palmito_t','Borracha_t','Madeira_m3','Copaíba_t','Sorva_t'];
    const lines = [headers.join(',')];
    for (const r of rows) lines.push([r.nome,r.uf,r.regiao,r.orgs,r.acai,r.castanha,r.palmito,r.borracha,r.madeira,r.copaiba,r.sorva].join(','));
    const blob = new Blob(['\ufeff'+lines.join('\n')], { type:'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url; a.download = `aae-br319-pevs-${year}.csv`; a.click();
    setTimeout(()=>URL.revokeObjectURL(url), 1000);
  };

  const showToast = (msg) => {
    const t = document.getElementById('toast');
    if (t) { t.textContent = msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'), 2200); }
  };

  const getShareLink = () => {
    const params = new URLSearchParams({
      layers: Object.entries(layers).filter(([,v])=>v).map(([k])=>k).join(','),
      year, chain: chainFilter, region: regionFilter, mun: selectedMun || ''
    });
    const url = location.href.split('?')[0] + '?' + params.toString();
    if (navigator.clipboard) {
      navigator.clipboard.writeText(url).then(()=>showToast('✓ link copiado'));
    }
  };

  return (
    <div className="app">
      <div className="aae-stripe"></div>

      {/* HEADER institucional */}
      <header className="hero">
        <div className="hero-top">
          <div className="hero-brand">
            <img src="assets/logos/inpa.png" alt="INPA"/>
            <div className="b-divider"></div>
            <div className="b-text">
              AAE BR-319
              <span className="sub">consórcio institucional</span>
            </div>
          </div>
          <div className="hero-actions">
            <button onClick={getShareLink} className="hero-btn">↗ compartilhar vista</button>
            <button onClick={()=>exportPNGRef.current && exportPNGRef.current()} className="hero-btn">↓ PNG do mapa</button>
          </div>
        </div>

        <div className="hero-body">
          <div className="eyebrow">{DATA.meta.versao} · plataforma de dados territoriais</div>
          <h1>Avaliação Ambiental Estratégica<br/>da Área de Abrangência da <em>BR-319</em></h1>
          <p className="lede">Subsídios para a Sustentabilidade Territorial no Interflúvio Purus-Madeira. Plataforma de consulta sobre cadeias produtivas, organizações de base, território e produção extrativa nos {DATA.recorte.n_municipios} municípios da área de influência (50 km para cada lado da rodovia).</p>
          <div className="hero-meta">
            <span><b>Recorte</b> 20 munis · 4 regiões · AM/RO</span>
            <span><b>Período</b> 2021–2024 (PEVS/IBGE)</span>
            <span><b>Etapa atual</b> Diagnóstico Integrado</span>
            <span><b>Contato</b> {DATA.meta.contato}</span>
          </div>
        </div>
      </header>

      {/* ETAPAS — faixa laranja oficial */}
      <div className="etapas-band">
        <div className="etapas-label">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h18M3 6h18M3 18h12"/></svg>
          Etapas
        </div>
        <div className="etapas-list">
          {DATA.etapas.map((et, i) => (
            <div key={et.id} className={"etapa " + (et.ativo ? 'active' : '')}>
              <div className="etapa-num">{et.id}</div>
              <div className="etapa-text">
                <div className="et-name">{et.nome}</div>
                <div className="et-desc">{et.descricao}</div>
              </div>
              {i < DATA.etapas.length - 1 && <div className="etapa-arrow">→</div>}
            </div>
          ))}
        </div>
      </div>

      {/* INDICADORES */}
      <window.PainelIndicadores data={DATA} year={year} chainFilter={chainFilter}/>

      {/* SEÇÃO 00 · DASHBOARD */}
      <window.Dashboard data={DATA} year={year} onSelectMun={setSelectedMun}/>

      {/* SEÇÃO 01 · MAPA */}
      <div className="section-head">
        <span className="panel-tag">01 · território</span>
        <h2>Mapa interativo da área de abrangência</h2>
        <p className="section-lede">20 sedes municipais distribuídas em 4 regiões do interflúvio Purus-Madeira: Norte (Manaus), Leste (Madeira), Oeste (Purus) e Sul (Porto Velho). Clique num município para ver organizações, produção e cadeias.</p>
      </div>
      <section className="map-section">
        <window.PainelFiltros
          layers={layers} setLayers={setLayers}
          year={year} setYear={setYear}
          chainFilter={chainFilter} setChainFilter={setChainFilter}
          regionFilter={regionFilter} setRegionFilter={setRegionFilter}
          cadeias={DATA.cadeias} regioes={DATA.regioes}
        />
        <div className="map-stage">
          <div className="map-toolbar">
            <span className="map-title">Interflúvio Purus-Madeira · {year}</span>
            <div className="basemap-toggle">
              {[
                {id:'dark', label:'Dark'},
                {id:'satellite', label:'Satélite'},
                {id:'light', label:'Light'},
              ].map(b => (
                <button key={b.id} className={'bm-btn ' + (basemap===b.id?'on':'')} onClick={()=>setBasemap(b.id)}>{b.label}</button>
              ))}
            </div>
          </div>
          <div className="map-canvas">
            <window.MapaBR319
              data={DATA} layers={layers}
              selectedMun={selectedMun} onSelectMun={setSelectedMun}
              year={year} chainFilter={chainFilter} regionFilter={regionFilter}
              basemap={basemap}
              onExportPNG={exportPNGRef}
            />
          </div>
        </div>
        <window.PainelMunicipio
          muni={selMuni} year={year}
          regioes={DATA.regioes}
          onClose={()=>setSelectedMun(null)}
        />
      </section>

      {/* SEÇÃO 02 · GRAFO */}
      {tweaks.showGraph && (
        <div>
          <div className="section-head">
            <span className="panel-tag">02 · rede</span>
            <h2>Fluxos território → cadeias produtivas</h2>
            <p className="section-lede">Diagrama Sankey: cada faixa que sai de um município indica produção que vai para uma cadeia. Espessura proporcional ao volume {year}. Clique num município para isolar suas conexões. Use as abas para alternar entre Sankey, Matriz e Ranking.</p>
          </div>
          <section className="graph-section">
            <div className="graph-stage">
              <window.GrafoTerritorial data={DATA} year={year} focusMun={selectedMun} onFocusMun={setSelectedMun}/>
            </div>
          </section>
        </div>
      )}

      {/* SEÇÃO 03 · TABELA */}
      <div className="section-head">
        <span className="panel-tag">03 · base</span>
        <h2>Síntese tabular · produção PEVS e organizações</h2>
        <p className="section-lede">Base consolidada para download em CSV. Produção da Extração Vegetal e da Silvicultura (IBGE/PEVS) {year} cruzada com cadastro de cooperativas e associações por município.</p>
      </div>
      <section className="table-section">
        <window.TabelaProducao data={DATA} year={year} onExportCSV={exportCSV}/>
      </section>

      {/* SEÇÃO 04 · CONSÓRCIO */}
      {tweaks.showConsorcio && (
        <div>
          <div className="section-head">
            <span className="panel-tag">04 · consórcio</span>
            <h2>Instituições do consórcio AAE BR-319</h2>
            <p className="section-lede">A AAE foi conduzida por consórcio liderado pelo INPA, em articulação com universidades e institutos de pesquisa da região amazônica, com financiamento e apoio do Governo do Brasil.</p>
          </div>
          <section className="consorcio-section">
            <div className="consorcio-grid">
              <div className="consorcio-block">
                <div className="consorcio-head">Instituição responsável</div>
                <div className="consorcio-row responsavel">
                  <img src={DATA.consorcio.responsavel.logo} alt={DATA.consorcio.responsavel.nome}/>
                </div>
              </div>
              <div>
                <div className="consorcio-block">
                  <div className="consorcio-head">Instituições participantes (pesquisadores)</div>
                  <div className="consorcio-row">
                    {DATA.consorcio.participantes.map(p => (
                      <img key={p.nome} src={p.logo} alt={p.nome} title={p.full}/>
                    ))}
                  </div>
                </div>
                <div className="consorcio-block">
                  <div className="consorcio-head">Financiamento e apoio</div>
                  <div className="apoio-list">
                    <div className="apoio-pill"><img src="assets/logos/infra.png" alt="INFRA S.A."/></div>
                    {DATA.consorcio.apoio.slice(1).map(a => (
                      <div key={a.nome} className="apoio-pill">{a.nome}</div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      )}

      {/* RODAPÉ */}
      <footer className="foot">
        <div className="foot-grid">
          <div>
            <div className="foot-h">Sobre o projeto</div>
            <p><b>{DATA.meta.titulo}</b></p>
            <p style={{opacity:0.75}}>{DATA.meta.objetivo}</p>
            <p style={{marginTop:18}}>
              <a href={"mailto:"+DATA.meta.contato} className="foot-conecte">Conecte-se →</a>
            </p>
          </div>
          <div>
            <div className="foot-h">5 eixos temáticos</div>
            <ul className="foot-list">
              {DATA.eixos.map((e,i)=> <li key={i}>{e}</li>)}
            </ul>
          </div>
          <div>
            <div className="foot-h">4 regiões</div>
            <ul className="foot-list">
              {DATA.regioes.map(r => <li key={r.id}>{r.rotulo}</li>)}
            </ul>
            <div className="foot-h" style={{marginTop:24}}>Equipe</div>
            <p style={{fontSize:12, opacity:0.75, margin:0}}>{DATA.meta.coordenador}<br/>{DATA.meta.bolsista}</p>
          </div>
          <div>
            <div className="foot-h">Fontes & créditos</div>
            <ul className="foot-list">
              <li>IBGE/PEVS 2021–2024</li>
              <li>Cadastro de organizações (consórcio)</li>
              <li>FUNAI · MMA · ANA · DNIT 2025</li>
              <li>MapBiomas 2026</li>
            </ul>
            <p className="foot-sub" style={{padding:0, margin:'14px 0 0', borderTop:'none'}}>
              Crédito do mapa: <b>Org. Rafael Rabelo, 2026</b> · DATUM SIRGAS 2000 · EPSG 4674
            </p>
          </div>
        </div>
        <div className="foot-sub">
          © INPA / consórcio AAE BR-319 · {DATA.meta.versao} · {DATA.meta.atualizado} · diagnóstico integrado em construção · plataforma técnica de uso interno e parceiros institucionais
        </div>
      </footer>

      <div id="toast" className="toast"></div>

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Aparência">
            <window.TweakColor label="Cor de acento" value={tweaks.accent} onChange={v=>setTweak('accent', v)}/>
            <window.TweakColor label="Cor de fundo" value={tweaks.paper} onChange={v=>setTweak('paper', v)}/>
          </window.TweakSection>
          <window.TweakSection title="Seções visíveis">
            <window.TweakToggle label="Grafo de conexões" value={tweaks.showGraph} onChange={v=>setTweak('showGraph', v)}/>
            <window.TweakToggle label="Bloco do consórcio" value={tweaks.showConsorcio} onChange={v=>setTweak('showConsorcio', v)}/>
          </window.TweakSection>
          <window.TweakSection title="Acessos rápidos">
            <window.TweakButton label="Zerar filtros" onClick={()=>{ setLayers({br319:true,munis:true,rios:true,tis:true,ucs:true}); setRegionFilter('todas'); setChainFilter('todas'); setSelectedMun(null); }}/>
            <window.TweakButton label="Reset cor de acento" onClick={()=>setTweak('accent', '#CD5D1C')}/>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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