/* ANISAN — Check list de cozinha. O usuário preenche a quantidade em estoque de
   cada item e define um nível de referência (Ref); o sistema sugere a
   quantidade a comprar (Pedido = max(0, Ref − Total)). Catálogo em
   ChecklistData.js (extraído do Checklist_Cozinha_Anisan_2025.xlsx).
   Tabela 1 (cozinha): Estoque + Cozinha → Total. Tabela 2 (hortifruti): Total. */

function Checklist({ unit, user }) {
  const store = window.useStore();
  const D = window.ANISAN_DATA;
  const isMaster = !!(user && user.role === "master");
  const data = store.data;
  const cons = window.isCons(unit);
  const mobile = window.useIsMobile();
  const [busca, setBusca] = React.useState("");
  const [dia, setDia] = React.useState(window.todayISO());  // filtro por DIA (padrão hoje)

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  // Por unidade: edita a loja atual. No Consolidado: SOMA todas as unidades
  // (leitura, pois o estoque é por loja) — Estoque/Cozinha/Total/Ref agregados.
  const tu = cons ? D.units[0] : unit;

  const get = (id) => window.clDiaVals(data, tu, id, dia);
  const aggOf = (id) => {
    const o = { estoque: 0, cozinha: 0, ref: 0, total: 0 };
    D.units.forEach(u => {
      const c = window.clDiaVals(data, u, id, dia);
      o.estoque += Number(c.estoque) || 0;
      o.cozinha += Number(c.cozinha) || 0;
      o.ref += Number(c.ref) || 0;
      o.total += Number(c.total) || 0;
    });
    return o;
  };
  // valor exibido: agregado no Consolidado, por loja caso contrário.
  const valOf = (id) => cons ? aggOf(id) : get(id);
  const totalDe = (it, c) => it.dupla ? (Number(c.estoque) || 0) + (Number(c.cozinha) || 0) : (Number(c.total) || 0);
  // Pedido do SISTEMA = quanto falta para o nível de referência.
  const pedidoSistema = (it, c) => Math.max(0, (Number(c.ref) || 0) - totalDe(it, c));
  // Há override manual de pedido nesta contagem? (string vazia / null = não)
  const temPedidoManual = (c) => c && c.pedidoManual !== undefined && c.pedidoManual !== null && c.pedidoManual !== "";
  // Pedido EFETIVO de uma contagem: manual se preenchido, senão sistema.
  const pedidoEffCount = (it, c) => temPedidoManual(c) ? (Number(c.pedidoManual) || 0) : pedidoSistema(it, c);
  // Pedido exibido: por loja = efetivo; no Consolidado = soma do efetivo das lojas.
  const pedidoDe = (it, id) => {
    if (!cons) return pedidoEffCount(it, get(id));
    return D.units.reduce((s, u) => s + pedidoEffCount(it, window.clDiaVals(data, u, id, dia)), 0);
  };

  const setField = (id, field, raw) => store.set(d => {
    window.setClDia(d, tu, dia, id, { [field]: window.parseBRL(raw) });
  }, "checklistDia");

  // Override manual do Pedido: vazio/apagado → remove (volta ao sistema).
  const setPedido = (id, raw) => store.set(d => {
    if (String(raw).trim() === "") window.setClDia(d, tu, dia, id, { pedidoManual: "" });
    else window.setClDia(d, tu, dia, id, { pedidoManual: window.parseBRL(raw) });
  }, "checklistDia");

  // Imprime a lista de compras (PRODUTO + PEDIDO) da unidade/dia atuais.
  const imprimirPedido = () => {
    const linhas = [...t1, ...t2]
      .map(it => ({ nome: it.nome, un: it.un, ped: pedidoDe(it, it.id) }))
      .filter(x => x.ped > 0);
    // escapa qualquer texto interpolado no HTML do print (defesa contra injeção
    // caso nomes de itens passem a ser editáveis no futuro).
    const esc = (s) => String(s == null ? "" : s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
    const titulo = "Pedido de compras";
    const sub = (cons ? "Todas as unidades" : tu) + " · " + window.dateLabel(dia);
    const rows = linhas.length
      ? linhas.map(x => `<tr><td>${esc(x.nome)} <span class="un">${esc(x.un)}</span></td><td class="q">${Number(x.ped) || 0}</td></tr>`).join("")
      : `<tr><td colspan="2" class="empty">Nenhum item a comprar.</td></tr>`;
    const html = `<!DOCTYPE html><html lang="pt-BR"><head><meta charset="utf-8"><title>${esc(titulo)}</title>
      <style>
        *{box-sizing:border-box}
        body{font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1c1a17;margin:32px;}
        h1{font-size:20px;margin:0 0 2px;}
        .sub{font-size:12px;color:#6b6256;margin:0 0 18px;text-transform:uppercase;letter-spacing:.08em;}
        table{width:100%;border-collapse:collapse;}
        th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8a7f6f;border-bottom:2px solid #1c1a17;padding:0 0 6px;}
        th.q,td.q{text-align:right;}
        td{padding:9px 0;border-bottom:1px solid #e3ddd0;font-size:14px;}
        td.q{font-variant-numeric:tabular-nums;font-weight:700;width:80px;}
        .un{color:#9a8f7d;font-size:11px;margin-left:6px;}
        .empty{color:#9a8f7d;text-align:center;padding:24px 0;}
        .foot{margin-top:18px;font-size:10px;color:#9a8f7d;}
        @media print{body{margin:14mm;} .noprint{display:none;}}
      </style></head><body>
        <h1>${esc(titulo)}</h1><p class="sub">${esc(sub)}</p>
        <table><thead><tr><th>Produto</th><th class="q">Pedido</th></tr></thead><tbody>${rows}</tbody></table>
        <p class="foot">Grupo Anisan · gerado em ${window.dateLabel(window.todayISO())}</p>
        <script>window.onload=function(){window.print();}<\/script>
      </body></html>`;
    const w = window.open("", "_blank");
    if (w) { w.document.open(); w.document.write(html); w.document.close(); }
    else {
      // fallback: imprime via iframe oculto se popup for bloqueado
      const f = document.createElement("iframe");
      f.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
      document.body.appendChild(f);
      f.contentDocument.open(); f.contentDocument.write(html); f.contentDocument.close();
      setTimeout(() => { f.contentWindow.focus(); f.contentWindow.print(); setTimeout(() => f.remove(), 1000); }, 300);
    }
  };

  // monta as duas tabelas: cozinha (dupla: estoque+cozinha) e hortifruti (total único)
  const t1 = (window.CHECKLIST_COZINHA || []).map(x => ({ ...x, dupla: true }));
  const t2 = (window.CHECKLIST_HORTI || []).map(x => ({ ...x, dupla: false }));
  const matchBusca = (it) => !busca || (it.nome + " " + it.cat).toLowerCase().includes(busca.toLowerCase());

  const grupos = (items) => {
    const g = {};
    items.filter(matchBusca).forEach(it => { (g[it.cat] = g[it.cat] || []).push(it); });
    return Object.keys(g).map(cat => ({ cat, items: g[cat] }));
  };

  // KPIs: itens a comprar + itens conferidos (agregado no Consolidado)
  const todos = [...t1, ...t2];
  const aComprar = todos.filter(it => pedidoDe(it, it.id) > 0);
  const itensContados = todos.filter(it => { const c = valOf(it.id); return totalDe(it, c) > 0 || (Number(c.ref) || 0) > 0; }).length;

  const SectionTitle = window.SectionTitle, StatCard = window.StatCard, Badge = window.Badge;

  // Célula editável por loja; no Consolidado vira número (soma das lojas, leitura).
  const NumCell = ({ id, field, value, accent, readOnly }) => (cons || readOnly)
    ? <span style={{ display: "inline-block", width: 58, textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 13, color: accent || "var(--paper)", padding: "6px 8px" }}>{value || 0}</span>
    : <input type="text" inputMode="decimal" value={value || ""} placeholder="0"
        onChange={(e) => setField(id, field, e.target.value)}
        style={{ width: 58, textAlign: "right", background: "var(--ink)", border: "1px solid var(--hairline-strong)", borderRadius: 7, color: accent || "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 13, padding: "6px 8px", outline: "none" }} />;

  const Tabela = ({ titulo, items, dupla }) => {
    const gs = grupos(items);
    const colHead = (lbl, w) => <th style={{ width: w, textAlign: "right", padding: "0 8px 9px", fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--muted-2)", fontWeight: 500 }}>{lbl}</th>;
    return (
      <div style={{ width: "100%" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500, color: "var(--paper)", marginBottom: 12 }}>{titulo}</div>
        <div style={{ border: "1px solid var(--hairline)", borderRadius: "var(--radius)", overflow: "hidden", background: "var(--surface)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse" }}>
            <thead><tr style={{ borderBottom: "1px solid var(--hairline-strong)" }}>
              <th style={{ textAlign: "left", padding: "11px 14px 9px", fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--muted-2)", fontWeight: 500 }}>Produto</th>
              {dupla && colHead("Estoque", 70)}
              {dupla && colHead("Cozinha", 70)}
              {!dupla && colHead("Total", 70)}
              {colHead("Ref.", 64)}
              {colHead("Pedido", 70)}
            </tr></thead>
            <tbody>
              {gs.map(g => (
                <React.Fragment key={g.cat}>
                  <tr><td colSpan={dupla ? 5 : 4} style={{ padding: "9px 14px 7px", background: "var(--surface-2)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--brass)" }}>{g.cat}</td></tr>
                  {g.items.map(it => {
                    const c = valOf(it.id), ped = pedidoDe(it, it.id), tot = totalDe(it, c);
                    const sysPed = pedidoSistema(it, c), manual = !cons && temPedidoManual(get(it.id));
                    return (
                      <tr key={it.id} style={{ borderTop: "1px solid var(--hairline)" }}>
                        <td style={{ padding: "8px 14px" }}>
                          <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--paper)" }}>{it.nome}</span>
                          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted-2)", marginLeft: 7 }}>{it.un}</span>
                        </td>
                        {dupla && <td style={{ padding: "6px 8px", textAlign: "right" }}><NumCell id={it.id} field="estoque" value={c.estoque} /></td>}
                        {dupla && <td style={{ padding: "6px 8px", textAlign: "right" }}><NumCell id={it.id} field="cozinha" value={c.cozinha} /></td>}
                        {!dupla && <td style={{ padding: "6px 8px", textAlign: "right" }}><NumCell id={it.id} field="total" value={c.total} /></td>}
                        <td style={{ padding: "6px 8px", textAlign: "right" }}><NumCell id={it.id} field="ref" value={c.ref} accent="var(--muted)" readOnly={!isMaster} /></td>
                        <td style={{ padding: "6px 14px 6px 8px", textAlign: "right" }}>
                          {(cons || !isMaster)
                            ? <span style={{ display: "inline-block", minWidth: 44, textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 13.5, fontWeight: 600, color: ped > 0 ? "var(--clay)" : "var(--muted-2)" }}>{ped > 0 ? ped : "—"}</span>
                            : <input type="text" inputMode="decimal"
                                value={manual ? get(it.id).pedidoManual : ""}
                                placeholder={String(sysPed)}
                                onChange={(e) => setPedido(it.id, e.target.value)}
                                title={manual ? "Pedido manual — apague para voltar ao sistema (" + sysPed + ")" : "Sugerido pelo sistema: " + sysPed + " · digite para sobrescrever"}
                                style={{ width: 58, textAlign: "right", background: "var(--ink)", border: "1px solid " + (manual ? "var(--brass)" : "var(--hairline-strong)"), borderRadius: 7, color: ped > 0 ? "var(--clay)" : "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, padding: "6px 8px", outline: "none" }} />}
                        </td>
                      </tr>
                    );
                  })}
                </React.Fragment>
              ))}
              {gs.length === 0 && <tr><td colSpan={dupla ? 5 : 4} style={{ padding: "18px", textAlign: "center", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)" }}>Nenhum item.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    );
  };

  return (
    <div style={{ padding: mobile ? "18px 14px 40px" : "26px 32px 48px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: 16 }}>
        <SectionTitle style={{ margin: 0 }} meta={cons ? "soma de todas as unidades" : "Unidade " + tu}>Check list de cozinha</SectionTitle>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-pill)", padding: "7px 12px" }}>
            <button onClick={() => setDia(window.addDaysISO(dia, -1))} title="Dia anterior" style={dayNavCl}><i data-lucide="chevron-left" style={{ width: 15, height: 15, strokeWidth: 1.8 }}></i></button>
            <input type="date" value={dia} onChange={(e) => setDia(e.target.value || window.todayISO())} style={{ background: "transparent", border: "none", outline: "none", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 12.5, colorScheme: "dark" }} />
            <button onClick={() => setDia(window.addDaysISO(dia, 1))} title="Próximo dia" style={dayNavCl}><i data-lucide="chevron-right" style={{ width: 15, height: 15, strokeWidth: 1.8 }}></i></button>
          </span>
          {dia !== window.todayISO() && <button onClick={() => setDia(window.todayISO())} style={{ background: "none", border: "1px solid var(--hairline-strong)", borderRadius: "var(--radius-pill)", color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 11, padding: "7px 12px", cursor: "pointer" }}>Hoje</button>}
          <span style={{ display: "flex", alignItems: "center", gap: 9, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-pill)", padding: "8px 14px", minWidth: 170 }}>
            <i data-lucide="search" style={{ width: 15, height: 15, strokeWidth: 1.7, color: "var(--muted-2)" }}></i>
            <input value={busca} onChange={(e) => setBusca(e.target.value)} placeholder="Buscar item…" style={{ flex: 1, minWidth: 0, background: "transparent", border: "none", outline: "none", color: "var(--paper)", fontFamily: "var(--font-body)", fontSize: 13 }} />
          </span>
          <button onClick={imprimirPedido} title="Gerar lista de compras (Produto + Pedido)" style={{ display: "flex", alignItems: "center", gap: 7, background: "var(--brass)", border: "1px solid var(--brass)", borderRadius: "var(--radius-pill)", color: "var(--ink)", fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.02em", padding: "9px 15px", cursor: "pointer" }}><i data-lucide="printer" style={{ width: 15, height: 15, strokeWidth: 1.9 }}></i>Imprimir Pedido</button>
        </div>
      </div>

      {cons && <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", marginBottom: 16, background: "var(--fill-accent)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted)" }}><i data-lucide="info" style={{ width: 14, height: 14, strokeWidth: 1.7, color: "var(--brass)" }}></i>Consolidado: os valores são a <b style={{ color: "var(--paper)", margin: "0 3px" }}>soma de todas as unidades</b> (leitura). Para preencher o estoque, selecione uma loja no menu.</div>}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 18 }}>
        <StatCard label="Itens a comprar" count={aComprar.length} value={aComprar.length + " itens"} accent="var(--clay)" />
        <StatCard label="Itens conferidos" count={itensContados} value={itensContados + " / " + todos.length} accent="var(--jade)" />
      </div>

      <p style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--muted-2)", lineHeight: 1.6, margin: "0 2px 18px", maxWidth: 760 }}>
        Preencha a quantidade em estoque de cada item e o nível de referência (<b style={{ color: "var(--paper)" }}>Ref.</b> = quanto você quer ter). O sistema sugere o <b style={{ color: "var(--clay)" }}>Pedido</b> automaticamente (<b>Ref − Total</b>; na cozinha, Total = Estoque + Cozinha). Você pode <b style={{ color: "var(--paper)" }}>digitar o Pedido manualmente</b> — o valor digitado prevalece (borda dourada); apague para voltar à sugestão do sistema.
      </p>

      <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
        <Tabela titulo="Cozinha / Estoque" items={t1} dupla={true} />
        <Tabela titulo="Hortifruti / Plásticos" items={t2} dupla={false} />
      </div>
    </div>
  );
}

window.Checklist = Checklist;
const dayNavCl = { width: 26, height: 26, borderRadius: "50%", background: "none", border: "none", display: "grid", placeItems: "center", cursor: "pointer", color: "var(--muted)" };
