/* global React, Icon, brl, DocPrintOverlay, DocCabecalhoEmpresa, DocTitulo, DocTituloSecao, DocTabelaItens */

// ─── Documento "Tabela de Preços" (A4, imprimível) ──────────────────────────
// O papel que sai daqui vai pra MÃO DO DISTRIBUIDOR — é peça comercial, não
// tela interna. Por isso reaproveita o layout aprovado dos outros documentos
// (DocImpressao.jsx) sem tocar nele: mesma folha, mesmo cabeçalho de empresa,
// mesma faixa dourada, mesma regra de impressão.
//
// ── A correção da queixa dela (linha comendo a linha) ──
// No PDF antigo, Produto · SKU · Marca eram TRÊS colunas competindo por
// largura; nome longo quebrava e a segunda linha invadia o produto seguinte.
// Aqui SKU e marca descem pra segunda linha DENTRO da célula do nome: some a
// disputa por largura, nasce a hierarquia (nome forte / SKU e marca fracos) e,
// como cada linha é um <tr> de verdade com borda, duas linhas de nome não têm
// como invadir a linha de baixo — a altura da linha cresce junto.
//
// ⚠️ CORES EM HEX AQUI SÃO PROPOSITAIS. Este arquivo é papel: tem que sair
// igual no tema claro e no escuro (e a impressora não conhece var(--tm-*)).
// Mesma escolha do DocImpressao.jsx. O CHROME em volta (barra, botões) usa
// tokens normalmente, porque aquilo é tela.

const TPD_BRAND   = "#C9A36B";
const TPD_INTERNO = "#B4232A";

// Colunas de valor disponíveis. `interno: true` = não pode vazar pro cliente.
const TPD_COLUNAS_VALOR = [
  { key: "custo",  label: "Custo",        campo: "custo",      interno: true },
  { key: "dist",   label: "Distribuidor", campo: "precoDiv"   },
  { key: "salao",  label: "Salão",        campo: "precoSalao" },
  { key: "venda",  label: "Cliente final",campo: "venda"      },
  { key: "promo",  label: "Promocional",  campo: "precoPromo" },
];

function tpdEstoque(p) {
  return Number(p.estoque != null ? p.estoque : p.estoque_atual) || 0;
}

// Agrupa preservando a ordem de chegada dos grupos.
function tpdAgrupar(produtos, chave) {
  if (!chave || chave === "nenhum") return [{ nome: null, itens: produtos }];
  const mapa = new Map();
  produtos.forEach(p => {
    const g = String(p[chave] || "Sem " + chave) || "—";
    if (!mapa.has(g)) mapa.set(g, []);
    mapa.get(g).push(p);
  });
  return Array.from(mapa.entries())
    .sort((a, b) => a[0].localeCompare(b[0], "pt-BR"))
    .map(([nome, itens]) => ({ nome, itens }));
}

// ── Bloco "Filtros aplicados" ────────────────────────────────────────────────
// É o que dá confiança a quem recebe: o papel diz de onde saiu. Os pares vêm
// prontos de quem chamou (a tela sabe o que estava filtrado; o documento não).
function TpdFiltros({ pares }) {
  const linhas = (pares || []).filter(par => par && par[1]);
  if (!linhas.length) return null;
  return (
    <div className="doc-section-break" style={{
      border: "1px solid #e2e2e2", borderLeft: `3px solid ${TPD_BRAND}`,
      background: "#fbfaf7", padding: "9px 12px", marginBottom: 14,
    }}>
      <div style={{ fontSize: 8.5, fontWeight: "bold", color: "#8a7550", textTransform: "uppercase", letterSpacing: "0.09em", marginBottom: 5 }}>
        Filtros aplicados
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", columnGap: 22, rowGap: 3 }}>
        {linhas.map(([lbl, val]) => (
          <div key={lbl} style={{ fontSize: 10, color: "#333" }}>
            <span style={{ color: "#888" }}>{lbl}:</span> <b style={{ fontWeight: 600 }}>{val}</b>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Bloco RESUMO ─────────────────────────────────────────────────────────────
// Só mostra unidades/valor quando a coluna de estoque está ligada — sem estoque
// no papel, "valor total" seria um número que ninguém consegue conferir.
function TpdResumo({ caixas }) {
  return (
    <div className="doc-section-break" style={{ display: "flex", gap: 10, marginBottom: 18 }}>
      {caixas.map(([lbl, val]) => (
        <div key={lbl} style={{ minWidth: 132, border: "1px solid #ddd", background: "#fff", padding: "8px 14px" }}>
          <div style={{ fontSize: 8.5, color: "#888", textTransform: "uppercase", letterSpacing: "0.08em" }}>{lbl}</div>
          <div style={{ fontSize: 15, fontWeight: "bold", color: "#1a1a1a", fontVariantNumeric: "tabular-nums", marginTop: 2 }}>{val}</div>
        </div>
      ))}
    </div>
  );
}

// ── Tarja de uso interno ─────────────────────────────────────────────────────
// Uma tabela com a coluna de CUSTO não pode sair por engano pro distribuidor.
// A tarja é vermelha, larga e fica no topo: quem imprimir errado vê antes de
// entregar.
function TpdTarjaInterna() {
  return (
    <div className="doc-section-break" style={{
      border: `2px solid ${TPD_INTERNO}`, background: "#fdf1f1",
      padding: "8px 12px", marginBottom: 16, display: "flex", alignItems: "center", gap: 9,
    }}>
      <span style={{
        background: TPD_INTERNO, color: "#fff", fontSize: 9, fontWeight: "bold",
        letterSpacing: "0.1em", padding: "3px 8px", borderRadius: 2, flexShrink: 0,
      }}>USO INTERNO</span>
      <span style={{ fontSize: 10.5, color: "#7a1a1f", lineHeight: 1.4 }}>
        Este documento mostra o <b>custo</b> dos produtos. Não envie a clientes, distribuidores ou salões.
      </span>
    </div>
  );
}

// ── O documento ──────────────────────────────────────────────────────────────
// produtos: linhas já filtradas e ordenadas pela tela (o documento não filtra).
// config:   { titulo, subtitulo, colunas:[keys], estoque, marca, ean, ncm,
//             agrupar, subtotal, filtros:[[lbl,val]], validade, observacao }
// preco(p, key): resolve o valor da coluna — é aqui que entram o ajuste da
//             tabela e o override por item, JÁ CALCULADOS por quem chamou.
//             O documento nunca recalcula preço.
function TabelaPrecoDoc({ produtos, config, empresa, destinatario, onClose }) {
  const cfg   = config || {};
  const rows  = produtos || [];
  const chave = cfg.agrupar && cfg.agrupar !== "nenhum" ? cfg.agrupar : null;
  const preco = cfg.preco || ((p, col) => Number(p[col.campo]) || 0);

  const colsValor = TPD_COLUNAS_VALOR.filter(c => (cfg.colunas || ["dist"]).indexOf(c.key) >= 0);
  const temCusto  = colsValor.some(c => c.interno);
  const grupos    = tpdAgrupar(rows, chave);

  // Cabeçalho da tabela: Produto (largo) + identificadores opcionais + valores.
  const colunas = [{ label: "Produto" }]
    .concat(cfg.ean     ? [{ label: "EAN",     width: 92 }] : [])
    .concat(cfg.ncm     ? [{ label: "NCM",     width: 62 }] : [])
    .concat(cfg.estoque ? [{ label: "Estoque", width: 54, align: "right" }] : [])
    // Uma coluna só + rótulo próprio = documento de uma tabela salva ("Preço
    // Distribuidor Ouro"), onde "Distribuidor" sozinho seria o canal errado.
    .concat(colsValor.map(c => ({
      label: (cfg.rotuloValor && colsValor.length === 1) ? cfg.rotuloValor : c.label,
      width: 68, align: "right",
    })));

  const linhaDe = (p) => [{
    v: (
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, color: "#111", lineHeight: 1.28 }}>{p.nome || p.name || "—"}</div>
        <div style={{ fontSize: 9, color: "#7d7d7d", marginTop: 2 }}>
          <span style={{ fontFamily: "'Courier New', monospace", letterSpacing: "-0.01em" }}>{p.sku || "—"}</span>
          {cfg.marca !== false && chave !== "marca" && p.marca ? <span> · {p.marca}</span> : null}
          {p.conteudo ? <span> · {p.conteudo}{p.unidade_conteudo || p.unidadeConteudo || ""}</span> : null}
        </div>
      </div>
    ),
  }]
    .concat(cfg.ean     ? [{ v: p.ean || "—", muted: true, num: true }] : [])
    .concat(cfg.ncm     ? [{ v: p.ncm || "—", muted: true, num: true }] : [])
    .concat(cfg.estoque ? [{ v: String(tpdEstoque(p)), align: "right", num: true }] : [])
    .concat(colsValor.map(c => ({ v: brl(preco(p, c)), align: "right", num: true })));

  // Subtotal por grupo. Só faz sentido com estoque no papel — sem quantidade,
  // "valor total" de uma tabela de preço seria número sem lastro.
  //
  // Vai como LINHA da própria tabela (não como `totais` do DocTabelaItens):
  // aquele prop joga o rótulo na penúltima coluna, que aqui é uma coluna de
  // preço unitário — o número cairia embaixo do cabeçalho errado. Assim cada
  // valor fica na coluna a que pertence.
  const linhaSubtotal = (nomeGrupo, itens) => {
    const un   = itens.reduce((a, p) => a + tpdEstoque(p), 0);
    const base = colsValor.find(c => !c.interno) || colsValor[0];
    const vl   = itens.reduce((a, p) => a + tpdEstoque(p) * preco(p, base), 0);
    return [{
      v: (
        <div style={{ paddingTop: 1 }}>
          <div style={{ fontSize: 10.5, fontWeight: "bold", color: "#7A4F1A" }}>Subtotal · {nomeGrupo}</div>
          <div style={{ fontSize: 9, color: "#8a7550", marginTop: 1 }}>
            {itens.length} produto{itens.length !== 1 ? "s" : ""} · {brl(vl)} em estoque ({base.label.toLowerCase()})
          </div>
        </div>
      ),
    }]
      .concat(cfg.ean ? [{ v: "" }] : [])
      .concat(cfg.ncm ? [{ v: "" }] : [])
      .concat([{ v: <b style={{ color: "#7A4F1A" }}>{un.toLocaleString("pt-BR")}</b>, align: "right", num: true }])
      .concat(colsValor.map(() => ({ v: "" })));
  };

  const linhasDoGrupo = (g) => {
    const base = g.itens.map(linhaDe);
    return (cfg.subtotal && cfg.estoque && g.nome) ? base.concat([linhaSubtotal(g.nome, g.itens)]) : base;
  };

  const totalUn = rows.reduce((a, p) => a + tpdEstoque(p), 0);
  const baseRes = colsValor.find(c => !c.interno) || colsValor[0];
  const caixas  = [["Produtos", String(rows.length)]]
    .concat(chave ? [[chave === "linha" ? "Linhas" : chave === "categoria" ? "Categorias" : "Marcas", String(grupos.length)]] : [])
    .concat(cfg.estoque ? [["Unidades em estoque", totalUn.toLocaleString("pt-BR")]] : [])
    .concat(cfg.estoque && baseRes ? [[`Valor · ${baseRes.label}`, brl(rows.reduce((a, p) => a + tpdEstoque(p) * preco(p, baseRes), 0))]] : []);

  const agora = new Date();
  const geradoEm = agora.toLocaleDateString("pt-BR") + " às " + agora.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });

  return (
    <DocPrintOverlay barraTitulo={cfg.titulo || "Tabela de Preços"} onClose={onClose}>
      <DocCabecalhoEmpresa empresa={empresa} />
      <DocTitulo texto={cfg.titulo || "Tabela de Preços"} numero={cfg.subtitulo || ""} />

      {/* Destinatário — quem pediu a tabela. Some quando é tabela geral. */}
      {destinatario && destinatario.nome && (
        <table width="100%" style={{ borderCollapse: "collapse", marginBottom: 14 }}><tbody><tr>
          <td style={{ padding: "9px 12px", border: "1px solid #ccc", background: "#fafafa" }}>
            <span style={{ fontSize: 9, fontWeight: "bold", color: "#666", textTransform: "uppercase", letterSpacing: "0.06em" }}>Preparada para</span>
            <span style={{ fontSize: 12.5, fontWeight: "bold", marginLeft: 10 }}>{destinatario.nome}</span>
            {destinatario.doc && <span style={{ fontSize: 10.5, color: "#555", marginLeft: 10 }}>{destinatario.doc}</span>}
            {destinatario.cidade && <span style={{ fontSize: 10.5, color: "#555", marginLeft: 10 }}>{destinatario.cidade}</span>}
          </td>
        </tr></tbody></table>
      )}

      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "#666", marginBottom: 12 }}>
        <span>Gerado em {geradoEm}</span>
        {cfg.validade && <span>Preços válidos até <b style={{ color: "#333" }}>{cfg.validade}</b></span>}
      </div>

      {temCusto && <TpdTarjaInterna />}
      <TpdFiltros pares={cfg.filtros} />
      {caixas.length > 0 && <TpdResumo caixas={caixas} />}

      {rows.length === 0 && (
        <div style={{ border: "1px dashed #ccc", padding: 32, textAlign: "center", color: "#888", fontSize: 12 }}>
          Nenhum produto selecionado para esta tabela.
        </div>
      )}

      {grupos.map((g, i) => (
        <div key={g.nome || i} style={{ marginBottom: g.nome ? 6 : 0 }}>
          {g.nome && (
            <div className="doc-section-break" style={{ marginTop: i === 0 ? 0 : 14 }}>
              <DocTituloSecao>
                {g.nome}
                <span style={{ fontWeight: "normal", color: "#888", marginLeft: 8 }}>
                  {g.itens.length} produto{g.itens.length !== 1 ? "s" : ""}
                </span>
              </DocTituloSecao>
            </div>
          )}
          <DocTabelaItens colunas={colunas} linhas={linhasDoGrupo(g)} />
        </div>
      ))}

      {cfg.observacao && (
        <div className="doc-section-break" style={{ border: "1px solid #ddd", padding: "9px 12px", fontSize: 10.5, whiteSpace: "pre-wrap", marginTop: 4 }}>
          {cfg.observacao}
        </div>
      )}

      <div style={{ borderTop: `2px solid ${TPD_BRAND}`, marginTop: 22, paddingTop: 8, display: "flex", justifyContent: "space-between", fontSize: 9, color: "#888" }}>
        <span>{(empresa && (empresa.nome_fantasia || empresa.razao_social)) || "TopMix Profissional"} · {agora.toLocaleDateString("pt-BR")}</span>
        <span>Gerado por TopMix ProHub</span>
      </div>
    </DocPrintOverlay>
  );
}

Object.assign(window, { TabelaPrecoDoc, TPD_COLUNAS_VALOR, tpdAgrupar, tpdEstoque });