/* global React, Icon, Button, Chip, Field, Drawer, TabelaPrecoDoc, TPD_COLUNAS_VALOR */

// ─── Gerar tabela de preço (Rodada 1) ───────────────────────────────────────
// A dor concreta: o distribuidor pede a tabela e não havia como tirar dela uma
// lista de produtos com preço. Esta tela pega os produtos que JÁ estão na mão
// (o resultado dos filtros da lista, ou a seleção manual) e transforma em papel
// ou planilha.
//
// ⚠️ ESTA TELA NÃO CALCULA PREÇO. Ela escolhe COLUNAS. O que sai no papel é o
// que está gravado em `produtos` — nada de percentual aplicado na hora, que é
// como preço vira mentira sem rastro. Ajuste e preço negociado por item ficam
// pra Rodada 2, onde a tabela é objeto salvo e o desconto tem onde morar.
//
// Cores por token aqui (isto é TELA). O documento em si — TabelaPrecoDoc.jsx —
// usa hex de propósito, porque é papel.

// Extras que não são preço: entram e saem por checkbox.
const TPG_EXTRAS = [
  { key: "estoque", label: "Estoque",        hint: "quantidade em estoque hoje" },
  { key: "marca",   label: "Marca",          hint: "ao lado do SKU, na 2ª linha" },
  { key: "ean",     label: "EAN",            hint: "código de barras" },
  { key: "ncm",     label: "NCM",            hint: "quem revende costuma pedir" },
];

const TPG_AGRUPAR = [
  { key: "nenhum",    label: "Sem agrupar" },
  { key: "linha",     label: "Por linha" },
  { key: "categoria", label: "Por categoria" },
  { key: "marca",     label: "Por marca" },
];

// Normaliza a linha da LISTA (que fala `name`, `cat`, `est`) para o formato que
// o documento espera. Sem isto, agrupar por categoria acha `undefined` e o
// papel sai com um grupo "Sem categoria" que não existe.
function tpgNormaliza(r) {
  return {
    ...r,
    nome:       r.nome || r.name || "",
    categoria:  r.categoria || r.cat || "",
    linha:      r.linha || "",
    marca:      r.marca || "",
    estoque:    Number(r.est != null ? r.est : r.estoque) || 0,
    conteudo:   r.conteudo,
    unidade_conteudo: r.unidade_conteudo || r.unidadeConteudo || "",
  };
}

// CSV local (não depende de helper de outro arquivo): ";" + BOM + vírgula
// decimal — o que o Excel em pt-BR abre sem perguntar nada.
function tpgBaixarCsv(nome, linhas) {
  const esc = (v) => {
    const x = v == null ? "" : String(v);
    return /[";\n\r]/.test(x) ? '"' + x.replace(/"/g, '""') + '"' : x;
  };
  const txt = "" + linhas.map(l => l.map(esc).join(";")).join("\r\n");
  const url = URL.createObjectURL(new Blob([txt], { type: "text/csv;charset=utf-8;" }));
  const a = document.createElement("a");
  a.href = url; a.download = nome;
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function tpgNumBr(n) { return (Number(n) || 0).toFixed(2).replace(".", ","); }

function GerarTabelaPrecoModal({ produtos, origem, filtros, empresa, onClose }) {
  const [cols,   setCols]   = React.useState({ dist: true });
  const [extras, setExtras] = React.useState({ estoque: false, marca: true, ean: false, ncm: false });
  const [agrupar,  setAgrupar]  = React.useState("linha");
  const [subtotal, setSubtotal] = React.useState(true);
  const [titulo,   setTitulo]   = React.useState("Tabela de Preços");
  const [subtitulo,setSubtitulo]= React.useState("");
  const [paraQuem, setParaQuem] = React.useState("");
  const [validade, setValidade] = React.useState("");
  const [obs,      setObs]      = React.useState("");
  const [cienteCusto, setCienteCusto] = React.useState(false);
  const [doc, setDoc] = React.useState(null);

  const rows      = (produtos || []).map(tpgNormaliza);
  const colsAtivas= TPD_COLUNAS_VALOR.filter(c => cols[c.key]);
  const temCusto  = colsAtivas.some(c => c.interno);
  // Custo no papel exige o "sim, eu sei" — a tarja vermelha no documento é o
  // segundo aviso, este é o primeiro, e é ele que trava o botão.
  const pode      = rows.length > 0 && colsAtivas.length > 0 && (!temCusto || cienteCusto);

  const motivo = rows.length === 0 ? "Nenhum produto selecionado."
    : colsAtivas.length === 0 ? "Escolha pelo menos uma coluna de valor."
    : temCusto && !cienteCusto ? "Confirme que entendeu o aviso de custo."
    : "";

  const config = {
    titulo: titulo || "Tabela de Preços",
    subtitulo,
    colunas: colsAtivas.map(c => c.key),
    estoque: !!extras.estoque, marca: !!extras.marca, ean: !!extras.ean, ncm: !!extras.ncm,
    agrupar, subtotal: subtotal && !!extras.estoque,
    validade, observacao: obs,
    filtros: (filtros || []).concat([
      ["Base de valor", colsAtivas.map(c => c.label).join(" · ")],
      ["Ajuste", "Nenhum"],
    ]),
  };

  const baixarPlanilha = () => {
    const cab = ["Produto", "SKU"]
      .concat(extras.marca ? ["Marca"] : [])
      .concat(agrupar === "categoria" ? ["Categoria"] : ["Linha"])
      .concat(extras.ean ? ["EAN"] : [])
      .concat(extras.ncm ? ["NCM"] : [])
      .concat(extras.estoque ? ["Estoque"] : [])
      .concat(colsAtivas.map(c => c.label));
    const corpo = rows.map(p => [p.nome, p.sku || ""]
      .concat(extras.marca ? [p.marca] : [])
      .concat(agrupar === "categoria" ? [p.categoria] : [p.linha])
      .concat(extras.ean ? [p.ean || ""] : [])
      .concat(extras.ncm ? [p.ncm || ""] : [])
      .concat(extras.estoque ? [String(p.estoque)] : [])
      .concat(colsAtivas.map(c => tpgNumBr(p[c.campo]))));
    // O papel diz de onde veio; a planilha também. Sem isto, o arquivo circula
    // sem ninguém saber que filtro gerou aquilo.
    const cabecalho = [["Tabela de preços — " + (titulo || "")], ["Gerado em", new Date().toLocaleString("pt-BR")]]
      .concat((config.filtros || []).map(([l, v]) => [l, v]))
      .concat([[]]);
    tpgBaixarCsv(`tabela-precos-${new Date().toISOString().slice(0, 10)}.csv`,
      cabecalho.concat([cab]).concat(corpo));
  };

  if (doc) {
    return (
      <TabelaPrecoDoc
        produtos={rows} config={config} empresa={empresa}
        destinatario={paraQuem.trim() ? { nome: paraQuem.trim() } : null}
        onClose={() => setDoc(null)}
      />
    );
  }

  return (
    <Drawer open={true} width={640} onClose={onClose}
      title="Gerar tabela de preço"
      subtitle={`${rows.length} produto${rows.length !== 1 ? "s" : ""} · ${origem || "lista atual"}`}
      footer={<>
        <span style={{ flex: 1, fontSize: 11.5, color: "var(--tm-fg-4)" }}>{motivo}</span>
        <Button variant="secondary" size="sm" icon="table" disabled={!pode} onClick={baixarPlanilha}>Planilha</Button>
        <Button variant="primary" size="sm" icon="file-text" disabled={!pode} onClick={() => setDoc(true)}>Ver documento</Button>
      </>}>

      {/* ── Colunas de valor ─────────────────────────────────────────── */}
      <div className="form-section">
        <div className="sh">Preços que saem no papel</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {TPD_COLUNAS_VALOR.map(c => (
            <Chip key={c.key} active={!!cols[c.key]} onClick={() => setCols(s => ({ ...s, [c.key]: !s[c.key] }))}>
              {c.label}
              {c.interno && <span className="badge2 b-danger" style={{ marginLeft: 7 }}>interno</span>}
            </Chip>
          ))}
        </div>
        {temCusto && (
          <label style={{
            display: "flex", gap: 8, alignItems: "flex-start", marginTop: 12, padding: "10px 12px",
            borderRadius: 8, cursor: "pointer",
            background: "color-mix(in srgb, var(--tm-danger) 10%, transparent)",
            border: "1px solid color-mix(in srgb, var(--tm-danger) 35%, transparent)",
          }}>
            <input type="checkbox" checked={cienteCusto} onChange={(e) => setCienteCusto(e.target.checked)} style={{ marginTop: 2 }} />
            <span style={{ fontSize: 12, color: "var(--tm-fg-2)", lineHeight: 1.5 }}>
              <b style={{ color: "var(--tm-danger)" }}>Esta tabela mostra o seu custo.</b> O documento sai marcado
              como uso interno. Não envie a clientes, distribuidores ou salões.
            </span>
          </label>
        )}
      </div>

      {/* ── Colunas extras ───────────────────────────────────────────── */}
      <div className="form-section">
        <div className="sh">Mostrar também</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {TPG_EXTRAS.map(e => (
            <label key={e.key} style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12.5, color: "var(--tm-fg-2)", cursor: "pointer" }}>
              <input type="checkbox" checked={!!extras[e.key]}
                onChange={(ev) => setExtras(s => ({ ...s, [e.key]: ev.target.checked }))} />
              {e.label} <span style={{ color: "var(--tm-fg-4)", fontSize: 11 }}>· {e.hint}</span>
            </label>
          ))}
        </div>
      </div>

      {/* ── Organização ──────────────────────────────────────────────── */}
      <div className="form-section">
        <div className="sh">Organização</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {TPG_AGRUPAR.map(a => (
            <Chip key={a.key} active={agrupar === a.key} onClick={() => setAgrupar(a.key)}>{a.label}</Chip>
          ))}
        </div>
        {/* Subtotal sem estoque seria "valor total" sem quantidade: número sem
            lastro. Em vez de esconder a opção, ela aparece desabilitada COM o
            motivo — condição invisível já mordeu neste app. */}
        <label style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 10, fontSize: 12.5,
                        color: extras.estoque ? "var(--tm-fg-2)" : "var(--tm-fg-4)", cursor: extras.estoque ? "pointer" : "default" }}>
          <input type="checkbox" checked={subtotal && !!extras.estoque} disabled={!extras.estoque}
            onChange={(e) => setSubtotal(e.target.checked)} />
          Subtotal por grupo
          <span style={{ fontSize: 11, color: "var(--tm-fg-4)" }}>
            {extras.estoque ? "· unidades e valor em estoque" : "· requer a coluna Estoque ligada"}
          </span>
        </label>
      </div>

      {/* ── Cabeçalho do documento ───────────────────────────────────── */}
      <div className="form-section">
        <div className="sh">Cabeçalho do documento <span className="meta">o que aparece no topo da folha</span></div>
        {/* <Field> com children truthy — nunca condicional aqui dentro: a
            primitiva inventa um input próprio quando children é falsy. */}
        <div className="field-grid-2">
          <Field label="Título">
            <input className="input" value={titulo} onChange={(e) => setTitulo(e.target.value)} placeholder="Tabela de Preços" />
          </Field>
          <Field label="Subtítulo">
            <input className="input" value={subtitulo} onChange={(e) => setSubtitulo(e.target.value)} placeholder="Distribuidor" />
          </Field>
        </div>
        <div className="field-grid-2" style={{ marginTop: 14 }}>
          <Field label="Preparada para">
            <input className="input" value={paraQuem} onChange={(e) => setParaQuem(e.target.value)} placeholder="Nome do distribuidor (opcional)" />
          </Field>
          <Field label="Preços válidos até">
            <input className="input" value={validade} onChange={(e) => setValidade(e.target.value)} placeholder="dd/mm/aaaa" />
          </Field>
        </div>
        <div style={{ marginTop: 14 }}>
          <Field label="Observação no rodapé">
            <textarea className="input" value={obs} onChange={(e) => setObs(e.target.value)}
              placeholder="Pedido mínimo, condição de frete, prazo de pagamento…" />
          </Field>
        </div>
      </div>

      {/* Limitação real, dita em voz alta: nem Chrome nem Safari numeram página
          a partir do HTML. Em vez de fingir um "Página X de Y" que não existe,
          ensina onde ligar o do navegador. */}
      <div style={{ display: "flex", gap: 8, alignItems: "flex-start", padding: "9px 12px", borderRadius: 8,
                    background: "var(--tm-bg-2)", fontSize: 11.5, color: "var(--tm-fg-3)", lineHeight: 1.55 }}>
        <Icon name="info" size={13} style={{ color: "var(--tm-fg-4)", flexShrink: 0, marginTop: 2 }} />
        <span>Para numerar as páginas, ative <b style={{ color: "var(--tm-fg-2)" }}>"Cabeçalhos e rodapés"</b> no
          diálogo de impressão do navegador — a numeração vem de lá, não do documento.</span>
      </div>
    </Drawer>
  );
}

Object.assign(window, { GerarTabelaPrecoModal, TPG_EXTRAS, TPG_AGRUPAR, tpgNormaliza, tpgBaixarCsv });