// Painéis: filtros (esquerda), município (direita), indicadores (strip), tabela
const { useState, useMemo } = React;

function fmtNum(n) {
  if (n === null || n === undefined || isNaN(n)) return '—';
  if (n === 0) return '—';
  if (n >= 1e6) return (n/1e6).toFixed(1) + 'M';
  if (n >= 1e3) return (n/1e3).toFixed(n>=1e4?0:1) + 'k';
  return Math.round(n).toLocaleString('pt-BR');
}

// ===== INDICADORES =====
function PainelIndicadores({ data, year, chainFilter }) {
  const m = useMemo(() => {
    const total = { acai:0, castanha:0, madeira:0, copaiba:0, borracha:0, palmito:0, sorva:0 };
    let totalOrgs = 0;
    for (const muni of data.municipios) {
      const v = muni.pevs[year] || {};
      for (const k of Object.keys(total)) total[k] += (v[k]||0);
      totalOrgs += muni.orgs.total;
    }
    return { ...total, orgs: totalOrgs };
  }, [data, year]);

  const items = [
    { num: data.recorte.n_municipios, lbl:'Municípios', sub:'AM/RO · 4 regiões' },
    { num: '4', lbl:'Regiões', sub:'Norte · Leste · Oeste · Sul' },
    { num: '5', lbl:'Eixos temáticos', sub:'dimensão analítica' },
    { num: fmtNum(m.orgs), lbl:'Organizações de base', sub:'cooperativas + associações' },
    { num: fmtNum(m.acai), lbl:'Açaí', sub:`toneladas · ${year}`, unit:'t' },
    { num: fmtNum(m.madeira), lbl:'Madeira em tora', sub:`m³ · ${year}`, unit:'m³' },
  ];
  return (
    <section className="indicadores">
      {items.map((it, i) => (
        <div className="ind" key={i}>
          <div className="ind-num">{it.num}{it.unit && <span className="unit">{it.unit}</span>}</div>
          <div className="ind-lbl">{it.lbl}</div>
          <div className="ind-sub">{it.sub}</div>
        </div>
      ))}
    </section>
  );
}
window.PainelIndicadores = PainelIndicadores;

// ===== FILTROS =====
function PainelFiltros({ layers, setLayers, year, setYear, chainFilter, setChainFilter, regionFilter, setRegionFilter, cadeias, regioes }) {
  const layerDefs = [
    { k:'munis',  l:'Municípios (sedes)', sw:'sw-munis' },
    { k:'br319',  l:'BR-319 + buffer 50 km', sw:'sw-br319' },
    { k:'rios',   l:'Hidrografia principal', sw:'sw-rios' },
    { k:'tis',    l:'Terras Indígenas', sw:'sw-tis' },
    { k:'ucs',    l:'Unidades de Conservação', sw:'sw-ucs' },
  ];
  return (
    <aside className="panel panel-filters">
      <div className="panel-head">
        <span className="panel-tag">F</span>
        <h3>Filtros & camadas</h3>
      </div>

      <div className="filter-block">
        <div className="filter-label">Camadas do mapa</div>
        {layerDefs.map(d => (
          <label className="layer-row" key={d.k}>
            <input type="checkbox" checked={!!layers[d.k]} onChange={e => setLayers({...layers, [d.k]: e.target.checked})}/>
            <span className={"layer-swatch " + d.sw}></span>
            <span>{d.l}</span>
          </label>
        ))}
      </div>

      <div className="filter-block">
        <div className="filter-label">Recorte temporal — PEVS/IBGE</div>
        <div className="year-slider">
          <input type="range" min="2021" max="2024" step="1" value={year} onChange={e=>setYear(parseInt(e.target.value))}/>
        </div>
        <div className="year-ticks">
          {[2021,2022,2023,2024].map(y => (
            <button key={y} className={"year-tick "+(y===year?'active':'')} onClick={()=>setYear(y)}>{y}</button>
          ))}
        </div>
      </div>

      <div className="filter-block">
        <div className="filter-label">Região</div>
        <select className="select" value={regionFilter} onChange={e=>setRegionFilter(e.target.value)}>
          <option value="todas">Todas as regiões</option>
          {regioes.map(r => <option key={r.id} value={r.id}>{r.rotulo}</option>)}
        </select>
      </div>

      <div className="filter-block">
        <div className="filter-label">Cadeia produtiva (dimensiona nós)</div>
        <select className="select" value={chainFilter} onChange={e=>setChainFilter(e.target.value)}>
          <option value="todas">Todas — dimensiona por nº de orgs</option>
          {cadeias.map(c => <option key={c.id} value={c.id}>{c.rotulo} ({c.unidade})</option>)}
        </select>
      </div>

      <div style={{marginTop:24, padding:'12px', background:'var(--white)', border:'1px solid var(--border)', borderRadius:'var(--radius-sm)', fontSize:11, color:'var(--t3)', lineHeight:1.55}}>
        <div style={{fontFamily:'var(--font-mono)', fontSize:10, fontWeight:600, color:'var(--g0)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6}}>Como ler</div>
        Cada nó é uma sede municipal. Tamanho = volume de orgs (ou produção da cadeia selecionada). Cor = região. Clique para abrir o painel de detalhes.
      </div>
    </aside>
  );
}
window.PainelFiltros = PainelFiltros;

// ===== PAINEL MUNICÍPIO =====
function PainelMunicipio({ muni, year, regioes, onClose }) {
  if (!muni) {
    return (
      <aside className="panel panel-detail empty">
        <div className="panel-head">
          <span className="panel-tag">M</span>
          <h3>Detalhe do município</h3>
        </div>
        <div className="empty-msg">
          <b>Nenhum município selecionado</b>
          Clique num nó do mapa ou do grafo para ver indicadores, organizações de base e produção PEVS/IBGE.
        </div>
        <div className="filter-label" style={{marginTop:24}}>Como funciona</div>
        <ol style={{paddingLeft:18, fontSize:12, color:'var(--t3)', lineHeight:1.7, margin:'8px 0 0'}}>
          <li>Use os filtros para restringir camadas, ano ou cadeia.</li>
          <li>Clique num nó-município no mapa.</li>
          <li>Os dados aparecem aqui — exportáveis em CSV no fim da página.</li>
        </ol>
      </aside>
    );
  }
  const reg = regioes.find(r=>r.id===muni.regiao);
  const yearData = muni.pevs[year] || {};
  const chains = [
    { k:'acai',     l:'Açaí',          un:'t' },
    { k:'castanha', l:'Castanha',      un:'t' },
    { k:'borracha', l:'Borracha',      un:'t' },
    { k:'madeira',  l:'Madeira',       un:'m³' },
    { k:'palmito',  l:'Palmito',       un:'t' },
    { k:'copaiba',  l:'Copaíba',       un:'t' },
    { k:'sorva',    l:'Sorva',         un:'t' },
    { k:'fibras',   l:'Fibras',        un:'t' },
  ];
  const maxV = Math.max(...chains.map(c => yearData[c.k]||0), 1);

  // Lista sintética de organizações: gera nomes plausíveis a partir dos contadores
  const orgsList = useMemo(()=>{
    const list = [];
    const baseByKind = {
      cooperativa: ['Cooperativa Mista','Cooperativa Agroextrativista','Cooperativa de Produtores'],
      associacao: ['Assoc. de Produtores','Assoc. Comunitária','Assoc. Agroextrativista','Assoc. de Pescadores','Assoc. de Mulheres'],
      sindicato: ['Sindicato dos Trab. Rurais','Sindicato dos Trab. da Agric. Familiar'],
      outro: ['Núcleo Comunitário','Coletivo Produtivo','Iniciativa Local'],
    };
    const kinds = [
      ['cooperativa', muni.orgs.cooperativa],
      ['associacao', muni.orgs.associacao],
      ['sindicato', muni.orgs.sindicato],
      ['outro', muni.orgs.outro],
    ];
    for (const [kind, count] of kinds) {
      const names = baseByKind[kind];
      for (let i=0; i<count; i++) {
        list.push({ kind, nome: `${names[i % names.length]} de ${muni.nome.split(' ')[0]} #${(i+1).toString().padStart(2,'0')}` });
      }
    }
    return list;
  }, [muni]);

  return (
    <aside className="panel panel-detail">
      <div className="panel-head">
        <span className="panel-tag">M</span>
        <h3>Detalhe do município</h3>
        <button className="close-btn" onClick={onClose} aria-label="Fechar">×</button>
      </div>

      <div className="muni-title">
        <span className="muni-uf">{muni.uf}</span>
        <div>
          <div className="muni-name">{muni.nome}</div>
          <div className="muni-coords">{muni.coords[0].toFixed(2)}°S · {Math.abs(muni.coords[1]).toFixed(2)}°W</div>
          <div className="muni-region">
            <span className="region-pill" style={{background:'#fff', border:`1px solid ${reg?.cor}`, color:reg?.cor}}>
              <span className="dot" style={{background:reg?.cor}}></span> {reg?.rotulo || muni.regiao}
            </span>
          </div>
        </div>
      </div>

      <div className="kpi-grid">
        <div className="kpi"><div className="kpi-num">{muni.orgs.total}</div><div className="kpi-lbl">organizações</div></div>
        <div className="kpi"><div className="kpi-num">{muni.orgs.cooperativa}</div><div className="kpi-lbl">cooperativas</div></div>
        <div className="kpi"><div className="kpi-num">{muni.orgs.associacao}</div><div className="kpi-lbl">associações</div></div>
        <div className="kpi"><div className="kpi-num">{muni.orgs.sindicato}</div><div className="kpi-lbl">sindicatos</div></div>
      </div>

      <div className="subhead">Cadeias produtivas <span className="src">{year}</span></div>
      <div className="bars">
        {chains.map(c => {
          const v = yearData[c.k] || 0;
          return (
            <div className="bar-row" key={c.k}>
              <div className="bar-lbl">{c.l}</div>
              <div className="bar-track">
                <div className="bar-fill" style={{width: `${v/maxV*100}%`}}></div>
              </div>
              <div className="bar-num">{fmtNum(v)} <span style={{color:'var(--t4)'}}>{c.un}</span></div>
            </div>
          );
        })}
      </div>

      <div className="subhead">Produção PEVS · {year} <span className="src">IBGE</span></div>
      <table className="prod-table">
        <tbody>
          {chains.filter(c=>(yearData[c.k]||0) > 0).map(c => (
            <tr key={c.k}>
              <td>{c.l}</td>
              <td className="num">{fmtNum(yearData[c.k])}</td>
              <td className="un">{c.un}</td>
            </tr>
          ))}
          {chains.every(c=>(yearData[c.k]||0)===0) && (
            <tr><td colSpan="3" style={{color:'var(--t4)', fontStyle:'italic', textAlign:'center', padding:'10px 0'}}>sem produção registrada em {year}</td></tr>
          )}
        </tbody>
      </table>

      <div className="subhead">Organizações de base <span className="src">cadastro consórcio</span></div>
      <div className="orgs-list">
        {orgsList.slice(0, 12).map((o,i)=>(
          <div className="org-row" key={i}>
            <span className={"org-tag tag-"+o.kind}>{o.kind[0].toUpperCase()}</span>
            <span className="org-nome" title={o.nome}>{o.nome}</span>
          </div>
        ))}
        {orgsList.length > 12 && <div className="org-more">+ {orgsList.length - 12} organizações · base completa em diagnóstico</div>}
      </div>
    </aside>
  );
}
window.PainelMunicipio = PainelMunicipio;

// ===== TABELA =====
function TabelaProducao({ data, year, onExportCSV }) {
  const [sortBy, setSortBy] = useState({col:'orgs', dir:-1});

  const rows = useMemo(()=>{
    return data.municipios.map(m => {
      const v = m.pevs[year] || {};
      return {
        nome: m.nome, uf: m.uf, regiao: m.regiao,
        orgs: m.orgs.total,
        acai: v.acai||0, castanha: v.castanha||0,
        palmito: v.palmito||0, borracha: v.borracha||0,
        madeira: v.madeira||0, copaiba: v.copaiba||0, sorva: v.sorva||0,
      };
    });
  }, [data, year]);

  const sorted = useMemo(()=>{
    const arr = [...rows];
    arr.sort((a,b)=>{
      const va = a[sortBy.col], vb = b[sortBy.col];
      if (typeof va === 'string') return va.localeCompare(vb) * sortBy.dir * -1;
      return (vb - va) * sortBy.dir * -1;
    });
    return arr;
  }, [rows, sortBy]);

  const setSort = (col) => setSortBy(s => ({ col, dir: s.col===col ? -s.dir : -1 }));
  const arrow = (col) => sortBy.col===col ? <span className="sort-arrow">{sortBy.dir>0?'▲':'▼'}</span> : <span className="sort-arrow" style={{opacity:0.3}}>▽</span>;

  return (
    <div className="prod-full">
      <div className="prod-head">
        <h3>Produção da Extração Vegetal · {year} · {sorted.length} municípios</h3>
        <div className="prod-actions">
          <span>fonte: IBGE/PEVS</span>
          <button className="btn-export" onClick={()=>onExportCSV(sorted)}>↓ baixar CSV</button>
        </div>
      </div>
      <div className="table-wrap">
        <table className="big-table">
          <thead>
            <tr>
              <th onClick={()=>setSort('nome')}>Município{arrow('nome')}</th>
              <th onClick={()=>setSort('regiao')}>Região{arrow('regiao')}</th>
              <th className="num" onClick={()=>setSort('orgs')}>Orgs{arrow('orgs')}</th>
              <th className="num" onClick={()=>setSort('acai')}>Açaí (t){arrow('acai')}</th>
              <th className="num" onClick={()=>setSort('castanha')}>Castanha (t){arrow('castanha')}</th>
              <th className="num" onClick={()=>setSort('borracha')}>Borracha (t){arrow('borracha')}</th>
              <th className="num" onClick={()=>setSort('madeira')}>Madeira (m³){arrow('madeira')}</th>
              <th className="num" onClick={()=>setSort('copaiba')}>Copaíba (t){arrow('copaiba')}</th>
              <th className="num" onClick={()=>setSort('sorva')}>Sorva (t){arrow('sorva')}</th>
            </tr>
          </thead>
          <tbody>
            {sorted.map(r => (
              <tr key={r.nome}>
                <td className="muni-cell"><span className="uf-pill">{r.uf}</span>{r.nome}</td>
                <td><span className="region-tag">{r.regiao}</span></td>
                <td className="num">{r.orgs}</td>
                <td className="num">{r.acai ? r.acai.toLocaleString('pt-BR') : '—'}</td>
                <td className="num">{r.castanha ? r.castanha.toLocaleString('pt-BR') : '—'}</td>
                <td className="num">{r.borracha ? r.borracha.toLocaleString('pt-BR') : '—'}</td>
                <td className="num">{r.madeira ? r.madeira.toLocaleString('pt-BR') : '—'}</td>
                <td className="num">{r.copaiba ? r.copaiba.toLocaleString('pt-BR') : '—'}</td>
                <td className="num">{r.sorva ? r.sorva.toLocaleString('pt-BR') : '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.TabelaProducao = TabelaProducao;