/* global React */
/* =====================================================
   VendusCatalogo — catálogo-mestre do lojista (Fase B)
   -----------------------------------------------------
   Lista os produtos-mestre e abre o modal de cadastro/edição com a CALCULADORA
   embutida (PricingPanel, mesma lógica da página Calculadora). Salva produtos_mestre
   + precos_niveis. Não trata kits (Fase C).
===================================================== */
const { useState, useEffect, useRef } = React;
const A = window.VendusAtoms;

function CField({ label, value, onChange, placeholder, prefix, suffix, type = "text", textarea, tip }) {
  return (
    <label style={{ display: "block" }}>
      <div title={tip} style={{ fontSize: 11.5, color: "var(--fg-2)", fontWeight: 600, marginBottom: 5, cursor: tip ? "help" : "default", textDecoration: tip ? "underline dotted var(--fg-3)" : "none", textUnderlineOffset: 3 }}>{label}</div>
      <div style={{ position: "relative" }}>
        {prefix && <span style={{ position: "absolute", left: 10, top: 9, color: "var(--fg-3)", fontSize: 12.5 }}>{prefix}</span>}
        {textarea
          ? <textarea className="input" value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} rows={2} style={{ width: "100%", resize: "vertical", paddingLeft: 10 }} />
          : <input className={"input" + (type === "number" ? " mono-numeric" : "")} type={type} step="0.01" value={value} placeholder={placeholder} onChange={(e) => onChange(type === "number" ? (e.target.value === "" ? "" : +e.target.value) : e.target.value)} style={{ width: "100%", paddingLeft: prefix ? 30 : 10, paddingRight: suffix ? 28 : 10 }} />}
        {suffix && <span style={{ position: "absolute", right: 10, top: 9, color: "var(--fg-3)", fontSize: 12.5 }}>{suffix}</span>}
      </div>
    </label>
  );
}

// Resumo do kit no browser (espelha lib/kits.js §2): estoque derivado (min floor) + gargalo + somas.
function resumoKitBrowser(comps) {
  const cs = (comps || []).filter((c) => c && c.componente_id);
  if (!cs.length) return { estoque: null, indeterminado: true, gargalo: null, custo: null, custo_parcial: false, preco_sugerido: null };
  let estoque = Infinity, gargalo = null, indeterminado = false, custo = 0, custoParcial = false, preco = 0, precoParcial = false;
  for (const c of cs) {
    const qty = Math.max(1, parseInt(c.quantidade, 10) || 1);
    if (c.estoque == null) indeterminado = true;
    else { const p = Math.floor(Number(c.estoque) / qty); if (p < estoque) { estoque = p; gargalo = { titulo: c.titulo, possiveis: p }; } }
    if (c.custo == null) custoParcial = true; else custo += Number(c.custo) * qty;
    if (c.preco_cheio == null) precoParcial = true; else preco += Number(c.preco_cheio) * qty;
  }
  return { estoque: estoque === Infinity ? null : estoque, indeterminado, gargalo,
    custo: custoParcial && custo === 0 ? null : Math.round(custo * 100) / 100, custo_parcial: custoParcial,
    preco_sugerido: precoParcial && preco === 0 ? null : Math.round(preco * 100) / 100 };
}

function ProdutoMestreModal({ mestre, onClose, onSaved, todosMestres = [] }) {
  const { brl, I, Btn } = A;
  const editando = !!(mestre && mestre.id);
  const [titulo, setTitulo] = useState(mestre?.titulo || "");
  const [sku, setSku] = useState(mestre?.sku_interno || "");
  const [marca, setMarca] = useState(mestre?.marca || "");
  const [descricao, setDescricao] = useState(mestre?.descricao || "");
  const [peso, setPeso] = useState(mestre?.peso_kg ?? "");
  const [estoque, setEstoque] = useState(mestre?.estoque ?? "");
  const [salvando, setSalvando] = useState(false);
  const pricingRef = useRef({ custo: mestre?.custo ?? null, preco_cheio: mestre?.preco_cheio ?? null, niveis: mestre?.niveis || null });

  // Kit/combo (Fase C)
  const [isKit, setIsKit] = useState(!!mestre?.is_kit);
  const [comps, setComps] = useState(() => (mestre?.componentes || []).map((c) => ({ ...c })));
  const [comboPct, setComboPct] = useState(0);
  const [compBusca, setCompBusca] = useState("");
  const kit = resumoKitBrowser(comps);
  const precoCombo = kit.preco_sugerido == null ? null : Math.round(kit.preco_sugerido * (1 - (Number(comboPct) || 0) / 100) * 100) / 100;
  // margem líquida do kit (referência ML) via a fonte única de precificação
  const [mlCfg, setMlCfg] = useState(null);
  useEffect(() => { if (isKit) window.VendusCopilot.getConfigTaxas().then((d) => setMlCfg((d.configs || []).find((c) => c.marketplace === "mercado_livre") || null)); }, [isKit]);
  let kitMargem = null;
  if (isKit && precoCombo != null && kit.custo != null && window.VendusPrecificacao) {
    const m = window.VendusPrecificacao.margemPorPreco({ preco: precoCombo, custo: kit.custo, imposto_pct: mlCfg?.imposto_pct, ads_pct: mlCfg?.ads_pct, frete: mlCfg?.frete, embalagem: mlCfg?.embalagem, faixas: mlCfg?.faixas, comissaoPadrao: mlCfg?.comissao_pct });
    kitMargem = m.margem_liquida_pct;
  }
  // candidatos a componente: produtos simples do dono, exceto o próprio e os já adicionados
  const candidatos = (todosMestres || []).filter((m) => !m.is_kit && m.id !== (mestre?.id) && !comps.some((c) => c.componente_id === m.id) && (!compBusca.trim() || `${m.titulo || ""} ${m.sku_interno || ""}`.toLowerCase().includes(compBusca.trim().toLowerCase())));
  function addComp(m) { setComps((cs) => [...cs, { componente_id: m.id, quantidade: 1, titulo: m.titulo, custo: m.custo ?? null, preco_cheio: m.preco_cheio ?? null, estoque: m.estoque ?? null }]); setCompBusca(""); }
  function setQty(id, q) { setComps((cs) => cs.map((c) => c.componente_id === id ? { ...c, quantidade: Math.max(1, parseInt(q, 10) || 1) } : c)); }
  function delComp(id) { setComps((cs) => cs.filter((c) => c.componente_id !== id)); }

  async function salvar() {
    if (!titulo.trim()) { window.vendusToast && window.vendusToast("Dê um nome ao produto.", { icon: "alert-triangle", tone: "warning" }); return; }
    if (isKit && !comps.length) { window.vendusToast && window.vendusToast("Um kit precisa de pelo menos um componente.", { icon: "alert-triangle", tone: "warning" }); return; }
    setSalvando(true);
    const p = pricingRef.current;
    const payload = {
      titulo: titulo.trim(), sku_interno: sku || null, marca: marca || null, descricao: descricao || null,
      peso_kg: peso === "" ? null : peso,
      is_kit: isKit,
      // kit: estoque é derivado (não próprio); custo/preço vêm da soma dos componentes (com desconto de combo)
      estoque: isKit ? null : (estoque === "" ? null : estoque),
      custo: isKit ? kit.custo : p.custo,
      preco_cheio: isKit ? precoCombo : p.preco_cheio,
      niveis: isKit ? null : (p.niveis || null),
      componentes: isKit ? comps.map((c) => ({ componente_id: c.componente_id, quantidade: c.quantidade })) : undefined,
    };
    const r = editando
      ? await window.VendusCopilot.updateMestre({ id: mestre.id, ...payload })
      : await window.VendusCopilot.createMestre(payload);
    setSalvando(false);
    if (r.ok) { window.vendusToast && window.vendusToast(editando ? "Produto salvo ✓" : "Produto salvo ✓", { icon: "check-check", tone: "success" }); onSaved && onSaved(); onClose(); }
    else window.vendusToast && window.vendusToast(r.error || "Não consegui salvar.", { icon: "alert-triangle", tone: "danger" });
  }

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.5)", zIndex: 300, display: "flex", justifyContent: "center", alignItems: "flex-start", overflowY: "auto", padding: "40px 16px" }}>
      <div onClick={(e) => e.stopPropagation()} className="fade-in" style={{ width: "min(720px,100%)", background: "var(--bg-surface)", border: "1px solid var(--border)", borderRadius: 16, boxShadow: "0 20px 60px rgba(0,0,0,.4)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
          <div style={{ flex: 1, fontWeight: 700, fontSize: 15 }}>{editando ? "Editar produto" : "Novo produto"}</div>
          <button onClick={onClose} title="Fechar" style={{ background: "transparent", border: "none", color: "var(--fg-2)", cursor: "pointer", fontSize: 18 }}>✕</button>
        </div>

        <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ fontWeight: 700, fontSize: 13 }}>Dados do produto</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div style={{ gridColumn: "1 / -1" }}><CField label="Título" value={titulo} onChange={setTitulo} placeholder="Ex.: Condicionador Aloe Vera 300ml" /></div>
            <CField label="SKU interno" tip="O código que você usa pra identificar o produto." value={sku} onChange={setSku} placeholder="seu código" />
            <CField label="Marca" value={marca} onChange={setMarca} />
            <CField label="Peso" value={peso} onChange={setPeso} type="number" suffix="kg" />
            {!isKit && <CField label="Estoque" value={estoque} onChange={setEstoque} type="number" suffix="un" />}
            <div style={{ gridColumn: "1 / -1" }}><CField label="Descrição" value={descricao} onChange={setDescricao} textarea /></div>
          </div>

          {/* Kit / combo (Fase C) */}
          <div style={{ borderTop: "1px solid var(--border)", paddingTop: 14 }}>
            <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
              <input type="checkbox" checked={isKit} onChange={(e) => setIsKit(e.target.checked)} style={{ accentColor: "var(--primary)", width: 16, height: 16 }} />
              <span style={{ fontWeight: 700, fontSize: 13 }}>Este produto é um kit/combo</span>
            </label>
            {isKit && (
              <div style={{ marginTop: 12 }}>
                <div className="text-faint" style={{ fontSize: 11.5, marginBottom: 8 }}>Monte o kit com produtos do seu catálogo. O estoque do kit é o que dá pra montar com os componentes — não é um estoque separado.</div>
                {/* componentes adicionados */}
                {comps.map((c) => (
                  <div key={c.componente_id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", borderBottom: "1px solid var(--border)" }}>
                    <span style={{ flex: 1, fontSize: 12.5 }}>{c.titulo || "Componente"}{c.estoque != null ? <span className="text-faint"> · {c.estoque} un</span> : <span className="text-faint" title="Sem estoque conhecido — deixa o kit indeterminado por esse componente"> · estoque ?</span>}</span>
                    <input type="number" min="1" className="input mono-numeric" value={c.quantidade} onChange={(e) => setQty(c.componente_id, e.target.value)} style={{ width: 56, textAlign: "center" }} title="Quantidade no kit" />
                    <span className="text-faint" style={{ fontSize: 11 }}>un/kit</span>
                    <button onClick={() => delComp(c.componente_id)} title="Remover" style={{ background: "transparent", border: "none", color: "var(--fg-3)", cursor: "pointer", fontSize: 15 }}>✕</button>
                  </div>
                ))}
                {/* adicionar componente */}
                <div style={{ position: "relative", marginTop: 10 }}>
                  <input className="input" placeholder="Adicionar componente do catálogo…" value={compBusca} onChange={(e) => setCompBusca(e.target.value)} style={{ width: "100%" }} />
                  {compBusca.trim() && (
                    <div style={{ position: "absolute", top: "100%", left: 0, right: 0, zIndex: 5, background: "var(--bg-surface)", border: "1px solid var(--border)", borderRadius: 8, marginTop: 4, maxHeight: 180, overflowY: "auto" }}>
                      {candidatos.length === 0 ? <div className="text-faint" style={{ fontSize: 12, padding: 10 }}>Nenhum produto simples com esse nome. (Kits não podem entrar em kits.)</div>
                        : candidatos.slice(0, 8).map((m) => (
                          <button key={m.id} onClick={() => addComp(m)} className="navbtn" style={{ display: "block", width: "100%", textAlign: "left", padding: "7px 10px", fontSize: 12.5 }}>{m.titulo}{m.sku_interno ? <span className="text-faint"> · {m.sku_interno}</span> : ""}</button>
                        ))}
                    </div>
                  )}
                </div>
                {/* resumo do kit */}
                {comps.length > 0 && (
                  <div style={{ background: "var(--bg-elev)", borderRadius: 10, padding: 12, marginTop: 12 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, padding: "2px 0" }}>
                      <span className="text-muted">Dá pra montar</span>
                      <b className="mono-numeric">{kit.estoque == null ? "—" : `${kit.estoque} kits`}</b>
                    </div>
                    {kit.gargalo && kit.estoque != null && <div className="text-faint" style={{ fontSize: 11 }}>O gargalo é <b>{kit.gargalo.titulo}</b> — é ele que limita.</div>}
                    {kit.indeterminado && <div className="text-faint" style={{ fontSize: 11 }}>Algum componente está sem estoque conhecido — o número pode ser maior.</div>}
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, padding: "2px 0", marginTop: 6 }}>
                      <span className="text-muted">Custo somado</span>
                      <b className="mono-numeric">{kit.custo == null ? "—" : brl(kit.custo)}{kit.custo_parcial ? " (parcial)" : ""}</b>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5, padding: "2px 0" }}>
                      <span className="text-muted">Preço sugerido (soma)</span>
                      <b className="mono-numeric">{kit.preco_sugerido == null ? "—" : brl(kit.preco_sugerido)}</b>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5, padding: "4px 0" }}>
                      <span className="text-muted">Desconto de combo</span>
                      <span><input type="number" className="input mono-numeric" value={comboPct} onChange={(e) => setComboPct(e.target.value === "" ? "" : +e.target.value)} style={{ width: 64, textAlign: "right" }} /> %</span>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--border)", marginTop: 4, paddingTop: 8 }}>
                      <span style={{ fontWeight: 700, fontSize: 12.5 }}>Preço do kit</span>
                      <span className="font-display" style={{ fontWeight: 800, fontSize: 18, color: "var(--primary)" }}>{precoCombo == null ? "—" : brl(precoCombo)}</span>
                    </div>
                    {kitMargem != null && (
                      <div style={{ fontSize: 11.5, marginTop: 6, color: kitMargem <= 0 ? "#FF6A6A" : kitMargem < 10 ? "#FB923C" : "var(--fg-2)" }}>
                        Sobra pra você (no Mercado Livre): <b>{Math.round(kitMargem * 10) / 10}%</b>
                        {kitMargem <= 0 ? " — esse desconto de combo vende no prejuízo." : kitMargem < 10 ? " — o desconto de combo está apertando a margem." : ""}
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Precificação — produto simples usa a calculadora completa; kit usa o resumo acima */}
          {!isKit && (
            <div style={{ borderTop: "1px solid var(--border)", paddingTop: 14 }}>
              <div style={{ fontWeight: 700, fontSize: 13 }}>Precificação</div>
              <div className="text-faint" style={{ fontSize: 11.5, marginBottom: 10 }}>Calcule o preço aqui — depois é só "Usar este preço".</div>
              <window.VendusPricing.PricingPanel
                compact
                custoInicial={mestre?.custo ?? ""}
                precoInicial={mestre?.preco_cheio ?? ""}
                niveisInicial={mestre?.niveis || null}
                onChange={(r) => { pricingRef.current = r; }}
              />
            </div>
          )}
        </div>

        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, padding: "14px 20px", borderTop: "1px solid var(--border)" }}>
          <A.Btn variant="ghost" onClick={onClose}>Cancelar</A.Btn>
          <A.Btn variant="primary" disabled={salvando} onClick={salvar}>{salvando ? "Salvando…" : "Salvar produto"}</A.Btn>
        </div>
      </div>
    </div>
  );
}

function CatalogoPage({ store }) {
  const { I, Btn, Card, Chip, Eyebrow, EmptyState, brl } = A;
  const [itens, setItens] = useState(null);
  const [modal, setModal] = useState(null); // null | {} (novo) | mestre (editar)
  const [busca, setBusca] = useState("");

  function load() { window.VendusCopilot.getMestres().then(setItens); }
  useEffect(() => { load(); }, []);

  const lista = (itens || []).filter((m) => {
    const q = busca.trim().toLowerCase();
    return !q || `${m.titulo || ""} ${m.sku_interno || ""} ${m.marca || ""}`.toLowerCase().includes(q);
  });

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Catálogo</Eyebrow>
          <h1 className="page-title">Meu catálogo</h1>
          <div className="page-sub">Seus produtos cadastrados — o catálogo de verdade, que junta os anúncios de todas as lojas.</div>
        </div>
        <Btn variant="primary" onClick={() => setModal({})}><I name="plus" size={14} /> Novo produto</Btn>
      </div>

      {!itens ? <Card padding={24}><div className="text-muted">Carregando…</div></Card>
        : itens.length === 0 ? (
          <EmptyState icon="package" title="Seu catálogo está vazio" desc="Nenhum produto no seu catálogo ainda. Crie um, ou vincule seus anúncios na tela Vincular." action={<Btn variant="primary" onClick={() => setModal({})}><I name="plus" size={14} /> Novo produto</Btn>} />
        ) : (
        <>
          <div style={{ position: "relative", marginBottom: 14, maxWidth: 320 }}>
            <I name="search" size={14} style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--fg-3)" }} />
            <input className="input" placeholder="Buscar produto, SKU ou marca…" value={busca} onChange={(e) => setBusca(e.target.value)} style={{ width: "100%", paddingLeft: 32 }} />
          </div>
          <Card padding={0}>
            <table className="tbl">
              <thead><tr><th>Produto</th><th>SKU</th><th>Marca</th><th className="num">Custo</th><th className="num">Preço cheio</th><th className="num">Estoque</th><th className="num">Anúncios</th></tr></thead>
              <tbody>
                {lista.map((m) => (
                  <tr key={m.id} style={{ cursor: "pointer" }} onClick={() => setModal(m)}>
                    <td style={{ fontWeight: 500 }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
                        {m.is_kit && <Chip tone="violet">kit</Chip>}
                        {m.titulo}
                        {m.is_kit && m.descompasso && <span title="O estoque do kit no ML é maior do que dá pra montar com os componentes — risco de vender kit sem ter componente."><Chip tone="warning">checar estoque</Chip></span>}
                      </span>
                    </td>
                    <td className="text-muted" style={{ fontSize: 12 }}>{m.sku_interno || "—"}</td>
                    <td className="text-muted" style={{ fontSize: 12 }}>{m.marca || "—"}</td>
                    <td className="num mono-numeric">{(m.is_kit ? m.custo_kit : m.custo) != null ? brl(m.is_kit ? m.custo_kit : m.custo) : "—"}</td>
                    <td className="num mono-numeric font-display" style={{ fontWeight: 700 }}>{m.preco_cheio != null ? brl(m.preco_cheio) : "—"}</td>
                    <td className="num">{m.is_kit
                      ? <span title="Estoque derivado dos componentes (o que dá pra montar)"><Chip tone={m.estoque_derivado == null ? "default" : m.estoque_derivado < 5 ? "danger" : "success"}>{m.estoque_derivado == null ? "—" : `${m.estoque_derivado} (kit)`}</Chip></span>
                      : <Chip tone={m.estoque == null ? "default" : m.estoque < 5 ? "danger" : "success"}>{m.estoque ?? "—"}</Chip>}</td>
                    <td className="num mono-numeric">{m.anuncios_vinculados || 0}</td>
                  </tr>
                ))}
                {lista.length === 0 && <tr><td colSpan={7} style={{ padding: 24, textAlign: "center" }} className="text-muted">Nenhum produto com esse nome.</td></tr>}
              </tbody>
            </table>
          </Card>
        </>
      )}

      {modal && <ProdutoMestreModal mestre={modal.id ? modal : null} todosMestres={itens || []} onClose={() => setModal(null)} onSaved={load} />}
    </div>
  );
}

window.VendusCatalogo = { CatalogoPage, ProdutoMestreModal };