/* ============================================================
   SKYVIDYA — OperacoesView (aba SICOR)
   View de operações de crédito SICOR extraída de AssetsView.
   fmtBRL/fmtPct/fmtDate/fmtNum são globais definidos em v3-assets.jsx
   (carregado antes deste arquivo por index.html).
   ============================================================ */
const { useState, useEffect } = React;

function OperacoesView({ chat, access, initialH3, onConsumeInitial, onBack }) {
  const [opFiltros, setOpFiltros]         = useState(null);
  const [opFAno, setOpFAno]               = useState("");
  const [opFInst, setOpFInst]             = useState("");
  const [opFCultura, setOpFCultura]       = useState("");
  const [opFUf, setOpFUf]                 = useState("");
  const [opFMun, setOpFMun]               = useState("");
  const [opFCar, setOpFCar]               = useState("");
  const [opH3, setOpH3]                   = useState("");
  const [opPage, setOpPage]               = useState(1);
  const [opPerPage, setOpPerPage]         = useState(50);
  const [opListData, setOpListData]       = useState(null);
  const [opListLoading, setOpListLoading] = useState(false);
  const [opCarInput, setOpCarInput]       = useState("");
  const [expandedOp, setExpandedOp]       = useState(null);
  const [opCarsCache, setOpCarsCache]     = useState({});
  const [opColSet, setOpColSet]           = useState("credito");

  // handoff de uso único: célula vinda do botão "Ver operações desta célula"
  useEffect(function() {
    if (!initialH3) return;
    setOpH3(initialH3);
    setOpFAno(""); setOpFInst(""); setOpFUf(""); setOpFMun("");
    setOpFCultura(""); setOpFCar(""); setOpCarInput("");
    setOpPage(1);
    if (onConsumeInitial) onConsumeInitial();
  }, [initialH3]);

  // carregar opções de filtro uma única vez
  useEffect(function() {
    if (!window.SKY_API_BASE || opFiltros) return;
    fetch(window.SKY_API_BASE + "/v1/atma/operacoes-filtros")
      .then(function(r) { return r.ok ? r.json() : null; })
      .then(function(d) { if (d) setOpFiltros(d); })
      .catch(function() {});
  }, []);

  // debounce CAR input → opFCar
  useEffect(function() {
    var t = setTimeout(function() { setOpFCar(opCarInput); setOpPage(1); }, 350);
    return function() { clearTimeout(t); };
  }, [opCarInput]);

  // fetch server-side (sempre ativo — esta view está sempre visível)
  useEffect(function() {
    if (!window.SKY_API_BASE) return;
    setOpListLoading(true);
    var params = new URLSearchParams();
    if (opFAno)     params.set("ano", opFAno);
    if (opFInst)    params.set("instituicao", opFInst);
    if (opFUf)      params.set("uf", opFUf);
    if (opFMun)     params.set("municipio", opFMun);
    if (opFCultura) params.set("cultura", opFCultura);
    if (opFCar)     params.set("car", opFCar);
    if (opH3)       params.set("h3", opH3);
    params.set("limit",  opPerPage);
    params.set("offset", (opPage - 1) * opPerPage);
    fetch(window.SKY_API_BASE + "/v1/atma/operacoes-list?" + params.toString())
      .then(function(r) { return r.ok ? r.json() : null; })
      .then(function(d) { setOpListData(d); setOpListLoading(false); })
      .catch(function() { setOpListLoading(false); });
  }, [opFAno, opFInst, opFUf, opFMun, opFCultura, opFCar, opH3, opPage, opPerPage]);

  // resetar página ao mudar filtros
  useEffect(function() { setOpPage(1); }, [opFAno, opFInst, opFUf, opFMun, opFCultura, opFCar, opH3]);

  function toggleOpExpand(key, ref_bacen, nu_ordem) {
    if (expandedOp === key) { setExpandedOp(null); return; }
    setExpandedOp(key);
    if (opCarsCache[key] !== undefined) return;
    fetch(window.SKY_API_BASE + "/v1/atma/operacao-cars?ref_bacen=" + ref_bacen + "&nu_ordem=" + nu_ordem)
      .then(function(r) { return r.ok ? r.json() : []; })
      .then(function(d) { setOpCarsCache(function(prev) { var n = Object.assign({}, prev); n[key] = d; return n; }); })
      .catch(function() { setOpCarsCache(function(prev) { var n = Object.assign({}, prev); n[key] = []; return n; }); });
  }

  return (
    <div className="v2-pad fade-up">
      {onBack && (
        <button className="btn" style={{marginBottom:12,fontSize:11,padding:"5px 10px",display:"inline-flex",alignItems:"center",gap:6}}
          onClick={onBack}>
          <Icon name="chevL" size={12} /> Voltar para Ativos
        </button>
      )}
      <ViewHead eyebrow="// SICOR · Operações de crédito rural"
        title="Operações SICOR"
        sub="Operações de crédito rural SICOR/BCB por gleba — safras 2020–2025. Filtros server-side. Clique em uma linha para expandir os CARs vinculados." />

      {/* barra de filtros server-side */}
      <div className="asset-filters op-filters">
        <div className="af-field"><span className="eyebrow">Ano</span>
          <select value={opFAno} onChange={function(e) { setOpFAno(e.target.value); }}>
            <option value="">Todos</option>
            {(opFiltros ? opFiltros.anos : []).map(function(a) { return <option key={a} value={a}>{a}</option>; })}
          </select>
        </div>
        <div className="af-field"><span className="eyebrow">UF</span>
          <select value={opFUf} onChange={function(e) { setOpFUf(e.target.value); setOpFMun(""); }}>
            <option value="">Todos</option>
            {(opFiltros ? opFiltros.ufs : []).map(function(u) { return <option key={u} value={u}>{u}</option>; })}
          </select>
        </div>
        <div className="af-field"><span className="eyebrow">Município</span>
          <select value={opFMun} onChange={function(e) { setOpFMun(e.target.value); }}>
            <option value="">Todos</option>
            {(opFiltros ? opFiltros.municipios : [])
              .filter(function(m) { return !opFUf || m.uf === opFUf; })
              .map(function(m) { return <option key={m.nome} value={m.nome}>{m.nome}</option>; })}
          </select>
        </div>
        <div className="af-field"><span className="eyebrow">Instituição</span>
          <select value={opFInst} onChange={function(e) { setOpFInst(e.target.value); }}>
            <option value="">Todas</option>
            {(opFiltros ? opFiltros.instituicoes : []).map(function(i) { return <option key={i} value={i}>{i}</option>; })}
          </select>
        </div>
        <div className="af-field"><span className="eyebrow">Cultura</span>
          <select value={opFCultura} onChange={function(e) { setOpFCultura(e.target.value); }}>
            <option value="">Todas</option>
            {(opFiltros ? opFiltros.culturas : []).map(function(c) { return <option key={c} value={c}>{c}</option>; })}
          </select>
        </div>
        <div className="af-field grow"><span className="eyebrow">Buscar por CAR</span>
          <input type="text" className="af-search" placeholder="Digite código CAR…"
            value={opCarInput} onChange={function(e) { setOpCarInput(e.target.value); }} />
        </div>
        {(opFAno || opFInst || opFUf || opFMun || opFCultura || opFCar || opH3) && (
          <div className="af-field" style={{justifyContent:"flex-end"}}>
            <button className="btn" style={{fontSize:11,padding:"5px 10px"}} onClick={function() {
              setOpFAno(""); setOpFInst(""); setOpFUf(""); setOpFMun(""); setOpFCultura("");
              setOpFCar(""); setOpCarInput(""); setOpH3("");
            }}>Limpar</button>
          </div>
        )}
      </div>

      {/* barra de resultado / tags ativas */}
      <div className="af-result-bar">
        {opH3 && <span className="af-result-tag">Célula: {opH3.slice(-8).toUpperCase()} <button className="af-result-clear-inline" onClick={function(){setOpH3("");}}>✕</button></span>}
        {opFCar && <span className="af-result-tag">CAR: {opFCar}</span>}
        {opListData && <span className="af-result-count tnum" style={{marginLeft:"auto"}}>{opListData.total.toLocaleString("pt-BR")} operações</span>}
      </div>

      {/* tabela full-width */}
      <div className="v2-card" style={{overflow:"hidden"}}>
        {/* toggle Crédito / Financeiro */}
        <div style={{padding:"10px 14px 0",borderBottom:"1px solid var(--rule)"}}>
          <div className="pd-optabs" style={{maxWidth:280}}>
            <button className={opColSet === "credito" ? "on" : ""} onClick={function(){setOpColSet("credito");}}>Crédito</button>
            <button className={opColSet === "financeiro" ? "on" : ""} onClick={function(){setOpColSet("financeiro");}}>Financeiro</button>
          </div>
        </div>
        <div className="tbl-scroll">
          {opListLoading && (
            <div style={{padding:"24px 16px",display:"flex",alignItems:"center",gap:10,color:"var(--fg-soft)"}}>
              <span className="led-spin" /><span className="mono" style={{fontSize:11}}>carregando operações…</span>
            </div>
          )}
          {!opListLoading && !window.SKY_API_BASE && (
            <p style={{padding:"24px 16px",color:"var(--fg-mute)",fontSize:12}}>API não configurada — dados de operações indisponíveis.</p>
          )}
          {!opListLoading && opListData && (
            <>
              <table className="tbl op-tbl">
                <thead>
                  <tr>
                    {opColSet === "credito" ? (
                      <>
                        <th>Ano</th><th>Emissão</th><th>Instituição</th>
                        <th>Cultura</th><th>UF</th><th>Município</th>
                        <th>Vl. Parcela</th><th>Classe</th><th>Sinistro</th>
                        <th>CPF/CNPJ</th><th>CARs</th>
                      </>
                    ) : (
                      <>
                        <th>Ano</th><th>Juros%</th><th>CET%</th><th>Alíq.PROAGRO</th>
                        <th>Tp.Seguro</th><th>Irrigação</th><th>Rec.Próprio</th>
                        <th>Risco STN%</th><th>Risco F.C.%</th><th>Prest.Inv.</th>
                        <th>Rec.Bruta Esp.</th><th>Prev.Prod.</th><th>Bônus CAR%</th>
                        <th>Cédula IF</th><th>CARs</th>
                      </>
                    )}
                  </tr>
                </thead>
                <tbody>
                  {opListData.items.map(function(o) {
                    var key = o.ref_bacen + "-" + o.nu_ordem;
                    var isExp = expandedOp === key;
                    var cars = opCarsCache[key];
                    return [
                      <tr key={key} className={"op-row-exp" + (isExp ? " op-row-open" : "") + (o.sinistro ? " anomaly" : "")}
                          onClick={function(){ toggleOpExpand(key, o.ref_bacen, o.nu_ordem); }}>
                        {opColSet === "credito" ? (
                          <>
                            <td>{o.ano_safra}</td>
                            <td>{fmtDate(o.dt_emissao)}</td>
                            <td style={{maxWidth:180,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{o.instituicao || "—"}</td>
                            <td>{o.cultura || o.produto || "—"}</td>
                            <td>{o.uf || "—"}</td>
                            <td>{o.municipio || "—"}</td>
                            <td className="num">{fmtBRL(o.vl_parc_credito)}</td>
                            <td>{o.classe === "REVISAO"
                              ? <span className="tier tier-rev" title="Modelo não classificou com confiança — requer revisão humana">Rev.</span>
                              : <TierBadge tier={o.classe} />}</td>
                            <td>{o.sinistro ? <span className="esg-pill bad mono"><Icon name="alert" size={10}/> sim</span> : <span className="esg-pill ok mono"><Icon name="check" size={10}/> ok</span>}</td>
                            <td className="mono" style={{fontSize:9.5}}>{o.cpf_cnpj || "—"}</td>
                            <td className="num op-cars-count">{o.car_count} <span className="op-chevron">{isExp ? "▾" : "▸"}</span></td>
                          </>
                        ) : (
                          <>
                            <td>{o.ano_safra}</td>
                            <td className="num">{fmtPct(o.vl_juros)}</td>
                            <td className="num">{fmtPct(o.vl_cet)}</td>
                            <td className="num">{fmtPct(o.vl_aliq_proagro)}</td>
                            <td>{o.tipo_seguro || "—"}</td>
                            <td>{o.tipo_irrigacao || "—"}</td>
                            <td className="num">{fmtBRL(o.vl_rec_proprio)}</td>
                            <td className="num">{fmtPct(o.vl_perc_risco_stn)}</td>
                            <td className="num">{fmtPct(o.vl_perc_risco_fc)}</td>
                            <td className="num">{fmtBRL(o.vl_prestacao_inv)}</td>
                            <td className="num">{fmtBRL(o.vl_rec_bruta_esp)}</td>
                            <td className="num">{fmtNum(o.vl_prev_prod, 0)}</td>
                            <td className="num">{fmtPct(o.pc_bonus_car)}</td>
                            <td className="mono" style={{fontSize:9}}>{o.num_cedula_if || "—"}</td>
                            <td className="num op-cars-count">{o.car_count} <span className="op-chevron">{isExp ? "▾" : "▸"}</span></td>
                          </>
                        )}
                      </tr>,
                      isExp && (
                        <tr key={key + "-cars"} className="op-cars-sub">
                          <td colSpan={opColSet === "credito" ? 11 : 15}>
                            {cars === undefined ? (
                              <span className="led-spin" style={{width:10,height:10}} />
                            ) : cars.length === 0 ? (
                              <span className="op-empty">Nenhum CAR vinculado.</span>
                            ) : (
                              <div className="op-cars-list">
                                {cars.map(function(c, ci) {
                                  return (
                                    <div key={ci} className="op-car-item">
                                      <span className="mono pd-car-cod">{c.cod_imovel || c.cd_car}</span>
                                      {c.in_poc && <span className="car-badge" style={{marginLeft:4}}>POC</span>}
                                      <span className="pd-car-info">
                                        {c.num_area ? fmtNum(c.num_area, 1) + " ha" : ""}
                                        {c.municipio ? " · " + c.municipio : ""}
                                        {c.des_condic ? " · " + c.des_condic : ""}
                                      </span>
                                    </div>
                                  );
                                })}
                              </div>
                            )}
                          </td>
                        </tr>
                      )
                    ];
                  })}
                </tbody>
              </table>
              <Paginator page={opPage} perPage={opPerPage} total={opListData.total} onPage={setOpPage} onPerPage={setOpPerPage} />
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OperacoesView });