// pages/NotasFiscaisPage.jsx — real data (NFS-e emitidas + NF-e materiais)

// URLs dos arquivos no backend do portal
const nfEmitidaUrl = (parcela, tipo, dl) =>
  "/portal-cliente/api/notas-fiscais/emitida/file?parcela=" + encodeURIComponent(parcela) +
  (tipo ? "&tipo=" + tipo : "") + (dl ? "&dl=1" : "");
const nfMaterialUrl = (id, tipo, dl) =>
  "/portal-cliente/api/notas-fiscais/material/" + encodeURIComponent(id) + "/file?tipo=" + (tipo || "pdf") + (dl ? "&dl=1" : "");

// Download programatico (sem abrir aba) p/ acoes em lote.
function nfTriggerDownload(url, filename) {
  const a = document.createElement("a");
  a.href = url;
  if (filename) a.download = filename;
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  setTimeout(() => a.remove(), 0);
}

// Baixa XML + PDF de uma NF (emitida ou material), com pequeno intervalo entre eles.
function nfBaixarTudo(nf, tab) {
  let delay = 0;
  const queue = (url, fname) => { setTimeout(() => nfTriggerDownload(url, fname), delay); delay += 300; };
  if (tab === "emitidas") {
    if (nf.hasFile) queue(nfEmitidaUrl(nf.parcela, "pdf", 1), "nfse_parcela-" + nf.parcela + ".pdf");
    if (nf.hasXml) queue(nfEmitidaUrl(nf.parcela, "xml", 1), "nfse_parcela-" + nf.parcela + ".xml");
  } else {
    if (nf.hasFile) queue(nfMaterialUrl(nf.id, "pdf", 1), "nfe_" + nf.id + ".pdf");
    if (nf.hasXml) queue(nfMaterialUrl(nf.id, "xml", 1), "nfe_" + nf.id + ".xml");
  }
}

function NotasFiscaisPage() {
  const [tab, setTab] = React.useState("emitidas");
  const [monthFilter, setMonthFilter] = React.useState("all");

  const monthLabel = (yyyymm) => {
    const [y, m] = yyyymm.split("-");
    const d = new Date(Number(y), Number(m) - 1, 1);
    return d.toLocaleDateString("pt-BR", { month: "long", year: "numeric" })
      .replace(/^./, (c) => c.toUpperCase());
  };
  const ymKey = (iso) => String(iso || "").slice(0, 7);

  const allMonths = React.useMemo(() => {
    const months = new Set();
    NF_EMITIDAS.forEach((nf) => nf.competencia && months.add(nf.competencia));
    NF_MATERIAIS.forEach((nf) => nf.emissao && months.add(ymKey(nf.emissao)));
    return [...months].sort().reverse();
  }, []);

  const dataset = tab === "emitidas" ? NF_EMITIDAS : NF_MATERIAIS;
  const filtered = React.useMemo(() => {
    if (monthFilter === "all") return dataset;
    return dataset.filter((nf) =>
      tab === "emitidas" ? nf.competencia === monthFilter : ymKey(nf.emissao) === monthFilter
    );
  }, [dataset, monthFilter, tab]);

  const grouped = React.useMemo(() => {
    const map = new Map();
    filtered.forEach((nf) => {
      const key = tab === "emitidas" ? nf.competencia : ymKey(nf.emissao);
      if (!map.has(key)) map.set(key, []);
      map.get(key).push(nf);
    });
    return [...map.entries()].sort((a, b) => b[0].localeCompare(a[0]));
  }, [filtered, tab]);

  const totalValor = filtered.reduce((s, nf) => s + nf.valor, 0);
  const totalCount = filtered.length;
  const totalEmitidas = NF_EMITIDAS.reduce((s, nf) => s + nf.valor, 0);
  const totalMateriais = NF_MATERIAIS.reduce((s, nf) => s + nf.valor, 0);
  const ultima = NF_EMITIDAS[0] || null;

  const hasAnything = NF_EMITIDAS.length > 0 || NF_MATERIAIS.length > 0;

  // Acoes em lote — baixa XML + PDF de cada nota
  const baixarLote = (items) => {
    let delay = 0;
    items.forEach((nf) => {
      const queue = (url, fname) => { setTimeout(() => nfTriggerDownload(url, fname), delay); delay += 300; };
      if (tab === "emitidas") {
        if (nf.hasFile) queue(nfEmitidaUrl(nf.parcela, "pdf", 1), "nfse_parcela-" + nf.parcela + ".pdf");
        if (nf.hasXml) queue(nfEmitidaUrl(nf.parcela, "xml", 1), "nfse_parcela-" + nf.parcela + ".xml");
      } else {
        if (nf.hasFile) queue(nfMaterialUrl(nf.id, "pdf", 1), "nfe_" + nf.id + ".pdf");
        if (nf.hasXml) queue(nfMaterialUrl(nf.id, "xml", 1), "nfe_" + nf.id + ".xml");
      }
    });
  };
  const exportarXml = () => {
    let delay = 0;
    const src = tab === "emitidas" ? NF_EMITIDAS : NF_MATERIAIS;
    src.forEach((nf) => {
      if (!nf.hasXml) return;
      const url = tab === "emitidas" ? nfEmitidaUrl(nf.parcela, "xml", 1) : nfMaterialUrl(nf.id, "xml", 1);
      const fname = tab === "emitidas" ? ("nfse_parcela-" + nf.parcela + ".xml") : ("nfe_" + nf.id + ".xml");
      setTimeout(() => nfTriggerDownload(url, fname), delay);
      delay += 300;
    });
  };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Notas fiscais</h1>
          <div className="page-sub">
            {NF_EMITIDAS.length} emitidas · {NF_MATERIAIS.length} de materiais · contrato {PROJECT.code}
          </div>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={exportarXml} disabled={!filtered.some((n) => n.hasXml)}>
            <I.Filter size={14} /> Exportar XML
          </button>
          <button className="btn primary" onClick={() => baixarLote(filtered)} disabled={!filtered.some((n) => n.hasFile || n.hasXml)}>
            <I.Download size={14} /> Baixar XML + PDF
          </button>
        </div>
      </div>

      {!hasAnything ? (
        <div className="card" style={{ padding: 32, textAlign: "center", color: "var(--fg-4)" }}>
          Ainda nao ha notas fiscais lancadas para esta obra. Conforme a Strucon emite NFS-e e registra
          NF-e de materiais, elas aparecem aqui automaticamente.
        </div>
      ) : (
      <>
      {/* KPIs */}
      <div className="grid grid-4" style={{ marginBottom: 18 }}>
        <div className="kpi">
          <div className="kpi-label">NFS-e emitidas</div>
          <div className="kpi-value">{NF_EMITIDAS.length}</div>
          <div className="kpi-foot">
            <span>{fmtBRL(totalEmitidas)}</span>
            <span>ao condomínio</span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">NF-e de materiais</div>
          <div className="kpi-value">{NF_MATERIAIS.length}</div>
          <div className="kpi-foot">
            <span>{fmtBRL(totalMateriais)}</span>
            <span>compradas</span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Última emitida</div>
          <div className="kpi-value" style={{ fontSize: 18 }}>{ultima ? ultima.num : "—"}</div>
          <div className="kpi-foot">
            <span>{ultima ? fmtDate(ultima.emissao) : "—"}</span>
            <span>{ultima ? fmtBRL(ultima.valor) : ""}</span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Filtro ativo</div>
          <div className="kpi-value" style={{ fontSize: 18 }}>
            {monthFilter === "all" ? "Todos" : monthLabel(monthFilter)}
          </div>
          <div className="kpi-foot">
            <span>{totalCount} {totalCount === 1 ? "nota" : "notas"}</span>
            <span>{fmtBRL(totalValor)}</span>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, padding: 4, background: "var(--bg-muted)", borderRadius: 999, width: "fit-content", marginBottom: 14 }}>
        {[
          { id: "emitidas",  label: "Emitidas ao condomínio", count: NF_EMITIDAS.length },
          { id: "materiais", label: "Materiais da obra",      count: NF_MATERIAIS.length },
        ].map((t) => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className="btn"
            style={{
              background: tab === t.id ? "#fff" : "transparent",
              borderColor: tab === t.id ? "var(--border)" : "transparent",
              height: 30,
              fontSize: 12,
              borderRadius: 999,
            }}
          >
            {t.label}
            <span className="mono" style={{ color: "var(--fg-4)", fontSize: 11, marginLeft: 6 }}>{t.count}</span>
          </button>
        ))}
      </div>

      {/* Month filter chips */}
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 20 }}>
        <button
          onClick={() => setMonthFilter("all")}
          className="pill"
          style={{
            cursor: "pointer",
            background: monthFilter === "all" ? "var(--fg-3)" : "#fff",
            color: monthFilter === "all" ? "#fff" : "var(--fg-3)",
            borderColor: monthFilter === "all" ? "var(--fg-3)" : "var(--border)",
          }}
        >
          Todos os meses
        </button>
        {allMonths.map((m) => (
          <button
            key={m}
            onClick={() => setMonthFilter(m)}
            className="pill"
            style={{
              cursor: "pointer",
              background: monthFilter === m ? "var(--fg-3)" : "#fff",
              color: monthFilter === m ? "#fff" : "var(--fg-3)",
              borderColor: monthFilter === m ? "var(--fg-3)" : "var(--border)",
            }}
          >
            {monthLabel(m)}
          </button>
        ))}
      </div>

      {/* Groups */}
      {grouped.length === 0 && (
        <div className="card" style={{ padding: 32, textAlign: "center", color: "var(--fg-4)" }}>
          Nenhuma nota fiscal neste período.
        </div>
      )}

      {grouped.map(([month, items]) => {
        const groupTotal = items.reduce((s, nf) => s + nf.valor, 0);
        return (
          <div key={month} className="card" style={{ marginBottom: 16 }}>
            <div className="card-head">
              <div>
                <div className="card-title">{monthLabel(month)}</div>
                <div className="card-sub mono">{items.length} {items.length === 1 ? "nota" : "notas"} · total {fmtBRL(groupTotal)}</div>
              </div>
              <button className="btn ghost" onClick={() => baixarLote(items)} disabled={!items.some((n) => n.hasFile)}>
                <I.Download size={13} /> Lote
              </button>
            </div>

            {tab === "emitidas" ? (
              <table className="t">
                <thead>
                  <tr>
                    <th style={{ width: 140 }}>Nº NFS-e</th>
                    <th style={{ width: 130 }}>Emissão</th>
                    <th>Descrição</th>
                    <th className="right" style={{ width: 130 }}>ISS retido</th>
                    <th className="right" style={{ width: 150 }}>Valor (R$)</th>
                    <th style={{ width: 70 }}></th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((nf) => (
                    <tr key={nf.parcela}>
                      <td className="mono" style={{ fontWeight: 500 }}>{nf.num}</td>
                      <td className="mono">{fmtDate(nf.emissao)}</td>
                      <td>{nf.desc}</td>
                      <td className="right mono num" style={{ color: "var(--fg-4)" }}>{nf.iss ? fmtBRL2(nf.iss) : "—"}</td>
                      <td className="right mono num" style={{ fontWeight: 500 }}>{fmtBRL2(nf.valor)}</td>
                      <td>
                        <div style={{ display: "flex", gap: 4 }}>
                          <button
                            className="icon-btn"
                            title={nf.hasFile ? "Ver DANFSe" : "PDF indisponivel"}
                            disabled={!nf.hasFile}
                            onClick={() => nf.hasFile && window.open(nfEmitidaUrl(nf.parcela, "pdf"), "_blank")}
                          >
                            <I.Eye size={14} />
                          </button>
                          <button
                            className="icon-btn"
                            title={(nf.hasFile || nf.hasXml) ? "Baixar XML + PDF" : "Arquivos indisponiveis"}
                            disabled={!nf.hasFile && !nf.hasXml}
                            onClick={() => nfBaixarTudo(nf, "emitidas")}
                          >
                            <I.Download size={14} />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <table className="t">
                <thead>
                  <tr>
                    <th style={{ width: 110 }}>Nº NF-e</th>
                    <th style={{ width: 120 }}>Emissão</th>
                    <th>Fornecedor</th>
                    <th>Descrição</th>
                    <th style={{ width: 130 }}>Categoria</th>
                    <th className="right" style={{ width: 140 }}>Valor (R$)</th>
                    <th style={{ width: 70 }}></th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((nf) => (
                    <tr key={nf.id}>
                      <td className="mono">{nf.num}</td>
                      <td className="mono">{fmtDate(nf.emissao)}</td>
                      <td style={{ fontWeight: 500 }}>{nf.fornecedor}</td>
                      <td style={{ color: "var(--fg-2)" }}>{nf.desc}</td>
                      <td><span className="pill">{nf.cat}</span></td>
                      <td className="right mono num" style={{ fontWeight: 500 }}>{fmtBRL2(nf.valor)}</td>
                      <td>
                        <div style={{ display: "flex", gap: 4 }}>
                          <button
                            className="icon-btn"
                            title={nf.hasFile ? "Ver NF-e" : "Arquivo indisponivel"}
                            disabled={!nf.hasFile}
                            onClick={() => nf.hasFile && window.open(nfMaterialUrl(nf.id, "pdf"), "_blank")}
                          >
                            <I.Eye size={14} />
                          </button>
                          <button
                            className="icon-btn"
                            title={(nf.hasFile || nf.hasXml) ? "Baixar XML + PDF" : "Arquivos indisponiveis"}
                            disabled={!nf.hasFile && !nf.hasXml}
                            onClick={() => nfBaixarTudo(nf, "materiais")}
                          >
                            <I.Download size={14} />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        );
      })}
      </>
      )}
    </div>
  );
}

window.NotasFiscaisPage = NotasFiscaisPage;