/* ============================================================
   Área do Cooperado — telas
   ============================================================ */
const { useState:useStateS, useEffect:useEffectS } = React;
const BRL = COOP.fmt.BRL, NUM = COOP.fmt.NUM;

/* ============================================================
   VISÃO GERAL
   ============================================================ */
function OverviewScreen({onNav}){
  const ov = COOP.overview;
  return (
    <div className="screen-enter">
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",gap:16,marginBottom:24,flexWrap:"wrap"}}>
        <div>
          <div className="eyebrow">Painel do cooperado</div>
          <h2 className="serif" style={{fontSize:27,marginTop:7}}>Bem-vinda, Marina</h2>
        </div>
        <button className="btn btn-gold" onClick={()=>onNav("simulador")}><Icon name="simulador"/>Simular venda</button>
      </div>

      <div className="two-col" style={{gridTemplateColumns:"1.04fr 1fr",alignItems:"stretch"}}>
        <div className="saldo-card">
          <HexWatermark/>
          <div style={{position:"relative",height:"100%",display:"flex",flexDirection:"column"}}>
            <div className="sc-l">A receber</div>
            <div className="sc-v"><span className="pre">R$</span><Counter to={ov.saldoReceber}/></div>
            <div className="sc-sub" style={{marginTop:"auto"}}>
              <span className="sc-chip"><Icon name="romaneios" style={{width:14,height:14}}/>{ov.lotesProcessando} lotes em processamento</span>
            </div>
          </div>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:18}}>
          <CotacaoStrip lme={ov.cotacao.lme} dolar={ov.cotacao.dolar}/>
          <div className="two-col" style={{gap:18}}>
            <StatCard icon="extrato" label="Recebido no mês" count={ov.recebidoMes} prefix="R$ " delta="12% vs. mês anterior" deltaDir="up"/>
            <StatCard icon="royalties" label="Royalties" count={12480} prefix="R$ "/>
          </div>
          <div className="two-col" style={{gap:18}}>
            <StatCard icon="analise" label="Teor médio" count={64.2} dec={1} unit="%"/>
            <StatCard icon="spark" label="Lotes ativos" count={3}/>
          </div>
        </div>
      </div>

      <div className="card card-pad" style={{marginTop:24}}>
        <div className="sec-head" style={{margin:"0 0 6px"}}>
          <div><h2>Acompanhe seus lotes</h2><p>do romaneio ao pagamento, em tempo real</p></div>
          <button className="btn-mini" onClick={()=>onNav("romaneios")}>Ver romaneios</button>
        </div>
        <LotesTimeline lotes={ov.lotesAcomp} steps={ov.lotesSteps}/>
      </div>

      <div className="two-col" style={{marginTop:24}}>
        <div className="chart-card">
          <h3>Recebimentos</h3><div className="csub">últimos 6 meses · R$ mil</div>
          <SoftBars data={ov.recebimentos}/>
        </div>
        <div className="chart-card">
          <h3>Evolução do teor</h3><div className="csub">teor médio de Sn · %</div>
          <LineChart data={ov.teorSerie}/>
          <div className="lc-labels">{ov.teorSerie.map((d,i)=><span key={i}>{d.m}</span>)}</div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   EXTRATO & NOTAS
   ============================================================ */
function ExtratoScreen(){
  const [filter,setFilter]=useStateS("2026");
  const ex = COOP.extrato;
  const entries = filter==="mes" ? ex.entries.filter(e=>e.date.endsWith("/06")) : ex.entries;
  return (
    <div className="screen-enter">
      <div className="three-col">
        <StatCard icon="romaneios" label="Entregue em 2026" count={ex.resumo.entregue} unit="kg"/>
        <StatCard feature icon="extrato" label="Faturado em 2026" count={9.88} dec={2} prefix="R$ " unit="mi"/>
        <StatCard icon="doc" label="Notas emitidas" count={ex.resumo.notas}/>
      </div>

      <div className="sec-head">
        <div><h2>Movimentações</h2><p>cada linha é uma entrega com nota fiscal eletrônica</p></div>
        <div className="chips">
          <button className={"chip"+(filter==="mes"?" on":"")} onClick={()=>setFilter("mes")}>Este mês</button>
          <button className={"chip"+(filter==="2026"?" on":"")} onClick={()=>setFilter("2026")}>2026</button>
          <button className={"chip"+(filter==="tudo"?" on":"")} onClick={()=>setFilter("tudo")}>Tudo</button>
        </div>
      </div>

      {entries.length===0 ? (
        <div className="card"><div className="empty">
          <div className="ico"><Icon name="extrato"/></div>
          <h3>Nenhuma movimentação no período</h3>
          <p>Ajuste o filtro ou aguarde a próxima entrega ser faturada.</p>
        </div></div>
      ) : (
        <div className="statement">
          <div className="st-row head st-extrato">
            <div className="c">Data</div><div className="c">NF-e / Lote</div><div className="c">Peso seco</div>
            <div className="c r">Teor</div><div className="c r">R$/kg</div><div className="c r">Valor</div><div className="c r"></div>
          </div>
          {entries.map((e,i)=>(
            <div className="st-row body st-extrato" key={i}>
              <div className="st-date"><b>{e.date.split("/")[0]}</b>{e.date.split("/")[1]==="06"?"jun":"mai"}</div>
              <div><div className="st-main">NF-e {e.nf}</div><div className="st-main"><small>lote {e.lote}</small></div></div>
              <div className="st-sub hide-m">{NUM(e.pesoSeco,2)} kg</div>
              <div className="st-sub r hide-m">{NUM(e.teor,2)}%</div>
              <div className="st-sub r hide-m">{BRL(e.rkg)}</div>
              <div className="st-val">{BRL(e.valor)}</div>
              <div className="st-actions">
                <button className="dl"><Icon name="download"/>NF</button>
                <button className="dl"><Icon name="download"/>DM</button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   ROMANEIOS
   ============================================================ */
function RomaneioJourney({step}){
  const steps = COOP.romaneioSteps;
  return (
    <div>
      <div className="journey">
        {steps.map((s,i)=>(
          <React.Fragment key={i}>
            <div className={"jdot "+(i<step?"done":i===step?"cur":"")}>
              {i<step ? <Icon name="check"/> : i===step ? <span className="ic"></span> : null}
            </div>
            {i<steps.length-1 && <div className={"jline"+(i<step?" done":"")}></div>}
          </React.Fragment>
        ))}
      </div>
      <div className="jlabels">
        {steps.map((s,i)=><span key={i} className={i===step?"cur":""}>{s}</span>)}
      </div>
    </div>
  );
}
function RomaneiosScreen(){
  const pillFor = (step)=>{
    return [
      {tone:"amber",label:"Aguardando análise"},
      {tone:"blue",label:"No laboratório"},
      {tone:"green",label:"Demonstrativo"},
      {tone:"gray",label:"NF-e emitida"},
    ][step];
  };
  return (
    <div className="screen-enter">
      <div className="sec-head" style={{marginTop:0}}>
        <div><h2>Romaneios</h2><p>O romaneio é a pesagem do bruto úmido; vira demonstrativo após a análise de teor.</p></div>
        <button className="btn btn-gold"><Icon name="plus"/>Novo romaneio</button>
      </div>
      <div className="rom-grid">
        {COOP.romaneios.map(r=>{
          const p = pillFor(r.step);
          return (
            <div className="rom-card" key={r.code}>
              <div className="rh">
                <div><div className="code">{r.code}</div><div className="rdate">{r.date}</div></div>
                <Pill tone={p.tone}>{p.label}</Pill>
              </div>
              <div className="rweight num">{NUM(r.pesoUmido,2)}<span className="u">kg úmido</span></div>
              <div className="rorigin"><Icon name="pin"/>{r.origem}</div>
              <div style={{marginTop:16,paddingTop:16,borderTop:"1px solid var(--line)"}}>
                <RomaneioJourney step={r.step}/>
              </div>
            </div>
          );
        })}
      </div>
      <div className="note-card" style={{marginTop:24,background:"var(--surface-2)",border:"1px solid var(--line)"}}>
        <div className="ico" style={{background:"var(--blue-soft)",color:"var(--blue)"}}><Icon name="info"/></div>
        <div><h4>Romaneios confirmados puxam o peso real da balança</h4>
        <p>Após a pesagem do bruto úmido, o material segue para o laboratório; o teor de Sn define o R$/kg e gera o demonstrativo de pagamento.</p></div>
      </div>
    </div>
  );
}

/* ============================================================
   ANÁLISE & TEOR
   ============================================================ */
function AnaliseScreen(){
  const a = COOP.analise;
  return (
    <div className="screen-enter">
      <div className="three-col" style={{gridTemplateColumns:"repeat(4,1fr)"}}>
        <StatCard feature icon="analise" label="Seu teor médio" count={64.2} dec={1} unit="%" delta="acima da média da coop" deltaDir="up"/>
        <StatCard icon="romaneios" label="Média da coop" count={52.4} dec={1} unit="%"/>
        <StatCard icon="spark" label="Melhor lote" count={68.1} dec={1} unit="%"/>
        <StatCard icon="drop" label="Umidade média" count={0.21} dec={2} unit="%"/>
      </div>

      <div className="two-col" style={{marginTop:24,gridTemplateColumns:"1.45fr 1fr"}}>
        <div className="chart-card">
          <h3>Teor de Sn por lote</h3>
          <div className="csub">percentual de estanho contido · linha tracejada = média da cooperativa</div>
          <Bars lotes={a.lotes} avg={a.resumo.mediaCoop}/>
        </div>
        <div className="chart-card">
          <h3>Distribuição do teor</h3>
          <div className="csub">por faixa de concentração</div>
          <Donut faixas={a.faixas}/>
        </div>
      </div>

      <div className="note-card" style={{marginTop:24}}>
        <div className="ico"><Icon name="info"/></div>
        <div><h4>Quanto maior o teor de Sn, maior o R$/kg pago</h4>
        <p>O laboratório usa fluorescência de raio-X (XRF) sobre o peso seco para medir a concentração de estanho. Lotes acima de 65% recebem prêmio sobre o preço-base.</p></div>
      </div>
    </div>
  );
}

/* ============================================================
   SIMULADOR DE VENDA
   ============================================================ */
function SimuladorScreen(){
  const d = COOP.simulador;
  const [peso,setPeso]=useStateS(d.pesoSeco);
  const [teor,setTeor]=useStateS(d.teor);
  const [lme,setLme]=useStateS(d.lme);
  const [dolar,setDolar]=useStateS(d.dolar);
  const [rec,setRec]=useStateS(d.recuperacao);

  // valores reais do banco (Supabase) na entrada
  useEffectS(()=>{ fetchCotacaoReal(d.lme,d.dolar).then(r=>{ setLme(Math.round(r.lme)); setDolar(+(+r.dolar).toFixed(2)); }); },[]);
  // LME ao vivo (leve oscilação)
  useEffectS(()=>{
    const id=setInterval(()=>{ setLme(v=> Math.round(v + (Math.random()-0.5)*60)); },2200);
    return ()=>clearInterval(id);
  },[]);

  const snContido = peso*(teor/100)*(rec/100);
  const lmeKgSn = (lme*dolar)/1000;
  const precoKg = lmeKgSn*(teor/100)*(rec/100);
  const total = peso*precoKg;
  const pct = ((teor-20)/(80-20))*100;

  return (
    <div className="screen-enter">
      <div className="sim-grid">
        <div className="card card-pad">
          <div className="eyebrow" style={{marginBottom:18}}>Parâmetros do lote</div>

          <div className="field">
            <label>Peso seco do lote</label>
            <div className="input-wrap has-pre"><span className="pre">kg</span>
              <input className="input" type="number" value={peso} onChange={e=>setPeso(Math.max(0,+e.target.value||0))}/>
            </div>
          </div>

          <div className="field">
            <label>Teor de Sn <span className="lv">{NUM(teor,1)}%</span></label>
            <input className="slider" type="range" min="20" max="80" step="0.1" value={teor}
              style={{"--pct":pct+"%"}} onChange={e=>setTeor(+e.target.value)}/>
            <div className="slider-scale"><span>20%</span><span>50%</span><span>80%</span></div>
          </div>

          <div className="two-col" style={{gap:16}}>
            <div className="field" style={{marginBottom:0}}>
              <label>LME · US$/t <span className="live-tag"><span className="pulse"></span>ao vivo</span></label>
              <div className="input-wrap"><input className="input" type="number" value={lme} onChange={e=>setLme(+e.target.value||0)}/></div>
            </div>
            <div className="field" style={{marginBottom:0}}>
              <label>Dólar · R$ <span className="live-tag"><span className="pulse"></span>real</span></label>
              <div className="input-wrap"><input className="input" type="number" step="0.01" value={dolar} onChange={e=>setDolar(+e.target.value||0)}/></div>
            </div>
          </div>

          <div className="field" style={{marginTop:24,marginBottom:0}}>
            <label>Fator de recuperação <span className="lv">{NUM(rec,0)}%</span></label>
            <input className="slider" type="range" min="80" max="100" step="1" value={rec}
              style={{"--pct":((rec-80)/20*100)+"%"}} onChange={e=>setRec(+e.target.value)}/>
            <div className="slider-scale"><span>80%</span><span>90%</span><span>100%</span></div>
          </div>
        </div>

        <div className="result">
          <HexWatermark/>
          <div style={{position:"relative"}}>
            <div className="rl-head">Quanto você recebe</div>
            <div className="rrow"><span className="rk">Sn contido no lote</span><span className="rv num">{NUM(snContido,1)} kg</span></div>
            <div className="rrow"><span className="rk">LME por kg de Sn</span><span className="rv num">{BRL(lmeKgSn)}</span></div>
            <div className="rrow"><span className="rk">Preço por kg de minério seco</span><span className="rv num">{BRL(precoKg)}</span></div>
            <div className="total">
              <div className="tk">Total a receber (estimado)</div>
              <div className="tv num"><span className="pre">R$</span>{NUM(total,2)}</div>
            </div>
            <div className="rnote">Estimativa — o valor final usa a média semanal do LME e o teor real medido em laboratório (XRF) sobre o peso seco confirmado.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   ROYALTIES & CRÉDITOS
   ============================================================ */
function RoyaltiesScreen(){
  const r = COOP.royalties;
  return (
    <div className="screen-enter">
      <div className="three-col">
        <div className="piggy">
          <HexWatermark/>
          <div style={{position:"relative"}}>
            <div className="pl">Saldo acumulado</div>
            <div className="pv num"><span className="pre">R$</span><Counter to={r.resumo.saldo}/></div>
            <div className="pgrow"><Icon name="royalties" style={{width:15,height:15,color:"var(--gold)"}}/>crédito sobre suas entregas</div>
          </div>
        </div>
        <StatCard icon="royalties" label="Royalty do mês" count={r.resumo.mes} prefix="R$ " delta="6 lançamentos" deltaDir="up"/>
        <StatCard icon="spark" label="% sobre entregas" count={r.resumo.pct} dec={2} unit="%"/>
      </div>

      <div className="sec-head"><div><h2>Histórico de créditos</h2><p>royalty calculado sobre a base de cada venda</p></div></div>
      <div className="statement">
        <div className="st-row head st-royalty">
          <div className="c">Data</div><div className="c">Venda de origem</div><div className="c r">Base</div>
          <div className="c r">%</div><div className="c r">Valor</div><div className="c r">Situação</div>
        </div>
        {r.history.map((h,i)=>(
          <div className="st-row body st-royalty" key={i}>
            <div className="st-date"><b>{h.date.split("/")[0]}</b>{h.date.split("/")[1]==="06"?"jun":"mai"}</div>
            <div className="st-main">{h.origem}</div>
            <div className="st-sub r hide-m">{BRL(h.base)}</div>
            <div className="st-sub r hide-m">{NUM(h.pct,2)}%</div>
            <div className="st-val">{BRL(h.valor)}</div>
            <div className="st-actions">{h.status==="pago" ? <Pill tone="green">Pago</Pill> : <Pill tone="amber">Aguardando</Pill>}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   INSUMOS & REQUISIÇÕES
   ============================================================ */
function InsumosScreen(){
  const ins = COOP.insumos;
  return (
    <div className="screen-enter">
      <div className="sec-head" style={{marginTop:0}}>
        <div><h2>Insumos & requisições</h2><p>Peça reposição com um clique — o sistema gera a requisição automática.</p></div>
        <button className="btn btn-gold"><Icon name="plus"/>Nova requisição</button>
      </div>

      <div className="three-col">
        <StatCard feature icon="insumos" label="Adiantado em aberto" count={ins.resumo.aberto} prefix="R$ "/>
        <StatCard icon="drop" label="Consumido no mês" count={ins.resumo.mes} prefix="R$ "/>
        <StatCard icon="doc" label="Requisições abertas" count={ins.resumo.requisicoes}/>
      </div>

      <div className="sec-head"><div><h2>Insumos adiantados</h2><p>descontados no acerto da próxima entrega</p></div></div>
      <div className="statement">
        <div className="st-row head st-insumo">
          <div className="c">Insumo</div><div className="c">Data</div><div className="c r">Quantidade</div>
          <div className="c r">Valor</div><div className="c r">Situação</div><div className="c r"></div>
        </div>
        {ins.list.map((it,i)=>(
          <div className="st-row body st-insumo" key={i}>
            <div><div className="st-main">{it.insumo}</div><div className="st-main"><small>{it.tipo}</small></div></div>
            <div className="st-sub hide-m">{it.date}</div>
            <div className="st-sub r hide-m">{it.qtd}</div>
            <div className="st-val" style={{fontSize:16}}>{BRL(it.valor)}</div>
            <div className="st-actions">{it.status==="aberto" ? <Pill tone="amber">Em aberto</Pill> : <Pill tone="gray">Quitado</Pill>}</div>
            <div className="st-actions"><button className="btn-mini"><Icon name="plus" style={{width:13,height:13}}/>Repor</button></div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  OverviewScreen, ExtratoScreen, RomaneiosScreen, AnaliseScreen,
  SimuladorScreen, RoyaltiesScreen, InsumosScreen
});