/* global React, Icon, Button, Badge, Card, brl, useProdutosList */
const { useState: usePdvState } = React;

function usePdvProdutos() {
  const s = useProdutosList([]);
  return s.rows
    .filter(p => p.venda > 0 || p.temVariacoes === true)
    .map(p => ({
      id: p.id,
      sku: p.sku,
      name: p.name,
      price: Number(p.venda) || 0,
      temVariacoes: p.temVariacoes === true,
      ico: "package",
    }));
}

function PDV() {
  const pdvProds = usePdvProdutos();
  const [cart, setCart] = usePdvState([]);
  const [pay, setPay] = usePdvState("PIX");
  const [filter, setFilter] = usePdvState("Todos");

  const add = (p) => setCart(c => {
    const found = c.find(r => r.sku === p.sku);
    if (found) return c.map(r => r.sku === p.sku ? {...r, qty: r.qty + 1} : r);
    return [...c, { sku: p.sku, name: p.name, price: p.price, qty: 1 }];
  });
  const remove = (sku) => setCart(c => c.filter(r => r.sku !== sku));

  // ── Variações (Fase 2) ──────────────────────────────────────
  const [variacoesPdv, setVariacoesPdv] = usePdvState([]);
  const [varPicker, setVarPicker]       = usePdvState(null);
  React.useEffect(() => {
    if (window.tmDb) window.tmDb.loadVariacoes().then(setVariacoesPdv);
  }, []);
  const variacoesDoProduto = (id) => variacoesPdv.filter(v => v.produtoId === id);
  const addVariacao = (prod, v) => {
    add({ sku: v.sku || `VAR-${v.id}`, name: `${prod.name} · ${v.nome || ""}`.trim(), price: Number(v.venda) || 0 });
    setVarPicker(null);
  };

  const subtotal = cart.reduce((s, r) => s + r.price * r.qty, 0);
  const desc = pay === "PIX" ? subtotal * 0.05 : 0;
  const total = subtotal - desc;

  return (
    <div className="pdv">
      {varPicker && (
        <div onClick={() => setVarPicker(null)}
          style={{ position: "fixed", inset: 0, zIndex: 340, background: "rgba(0,0,0,0.65)",
            display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div onClick={(e) => e.stopPropagation()}
            style={{ background: "var(--tm-bg-1)", borderRadius: 14, width: 480, maxHeight: "80vh",
              border: "1px solid var(--tm-line-1)", boxShadow: "0 24px 64px rgba(0,0,0,0.5)",
              display: "flex", flexDirection: "column" }}>
            <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--tm-line-1)",
              display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ fontFamily: "var(--tm-font-display)", fontSize: 17 }}>Escolher variação</div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{varPicker.name}</div>
              </div>
              <button className="icon-btn" onClick={() => setVarPicker(null)}><Icon name="x" size={16} /></button>
            </div>
            <div style={{ padding: "6px 12px 10px", overflow: "auto" }}>
              {variacoesDoProduto(varPicker.id).length === 0 ? (
                <div style={{ padding: "28px 0", textAlign: "center", color: "var(--tm-fg-3)", fontSize: 13 }}>
                  Nenhuma variação cadastrada para este produto.
                </div>
              ) : variacoesDoProduto(varPicker.id).map((v, vi) => (
                <div key={v.id || vi} onClick={() => addVariacao(varPicker, v)}
                  style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px",
                    borderRadius: 8, cursor: "pointer", borderBottom: "1px solid var(--tm-line-0)" }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{v.nome || `Variação ${vi + 1}`}</div>
                    <div className="muted" style={{ fontSize: 11 }}>
                      {[v.tipo, v.sku].filter(Boolean).join(" · ") || "sem SKU"}
                    </div>
                  </div>
                  <span className="muted" style={{ fontSize: 12 }}>{Number(v.est) || 0} un</span>
                  <span style={{ fontSize: 13, fontWeight: 600, color: "var(--tm-brand-champagne)" }}>
                    R$ {brl(Number(v.venda) || 0)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
      <div className="left">
        <div className="pdv-search">
          <div className="barcode">
            <Icon name="scan-line" size={18} className="muted" />
            <input placeholder="Bipar código de barras ou digitar SKU…" autoFocus />
            <span className="muted" style={{ fontSize: 11, fontFamily: "var(--tm-font-mono)" }}>F2 listar</span>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            {["Todos", "Shampoo", "Coloração", "Tratamento", "Finalizador"].map(f => (
              <span key={f} className={`chip ${filter === f ? "active" : ""}`} onClick={() => setFilter(f)}>{f}</span>
            ))}
          </div>
        </div>
        <div className="pdv-grid">
          {pdvProds.length === 0 && (
            <div style={{ gridColumn: "1 / -1", padding: "40px 0", textAlign: "center", color: "var(--tm-fg-3)" }}>
              <Icon name="package" size={32} style={{ opacity: 0.3, marginBottom: 10 }} />
              <div style={{ fontSize: 13 }}>Nenhum produto cadastrado</div>
              <div style={{ fontSize: 12, marginTop: 4 }}>Cadastre produtos no módulo Produtos</div>
            </div>
          )}
          {pdvProds.map(p => (
            <div key={p.id || p.sku} className="pdv-prod"
              onClick={() => p.temVariacoes ? setVarPicker(p) : add(p)}>
              <div className="thumb"><Icon name={p.ico} size={26} /></div>
              <div className="sku">{p.sku}</div>
              <div className="name">{p.name}</div>
              <div className="price">{p.temVariacoes ? "ver variações" : `R$ ${brl(p.price)}`}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="right">
        <div className="cart-head">
          <div>
            <div style={{ fontFamily: "var(--tm-font-display)", fontSize: 18 }}>Venda atual</div>
            <div className="muted" style={{ fontSize: 11 }}>Nova venda · Caixa PDV</div>
          </div>
          <Button variant="ghost" icon="x" size="sm">Limpar</Button>
        </div>

        <div className="cart-list">
          {cart.length === 0 && (
            <div className="cart-empty" style={{ height: 180 }}>
              <Icon name="shopping-cart" size={28} />
              <div>Adicione produtos<br />escaneando ou tocando</div>
            </div>
          )}
          {cart.map(r => (
            <div key={r.sku} className="cart-item">
              <div>
                <div className="nm">{r.name}</div>
                <div className="sku">{r.sku} · {r.qty}× R$ {brl(r.price)}</div>
              </div>
              <div className="qty" style={{ width: 64 }}>
                <button onClick={() => setCart(c => c.map(x => x.sku === r.sku ? {...x, qty: Math.max(1, x.qty - 1)} : x))}>−</button>
                <input value={r.qty} readOnly style={{ height: 24 }} />
                <button onClick={() => setCart(c => c.map(x => x.sku === r.sku ? {...x, qty: x.qty + 1} : x))}>+</button>
              </div>
              <div className="val">R$ {brl(r.price * r.qty)}</div>
              <div className="x" onClick={() => remove(r.sku)}><Icon name="x" size={12} /></div>
            </div>
          ))}
        </div>

        <div className="cart-foot">
          <div className="summary-line"><span className="l">Subtotal</span><span className="v num">R$ {brl(subtotal)}</span></div>
          {desc > 0 && (
            <div className="summary-line"><span className="l">Desconto PIX (5%)</span><span className="v num" style={{ color: "var(--tm-success)" }}>− R$ {brl(desc)}</span></div>
          )}
          <div className="summary-line total"><span className="l">Total</span><span className="v num">R$ {brl(total)}</span></div>

          <div className="pdv-pay">
            {[
              { id: "PIX", ico: "qr-code", label: "PIX" },
              { id: "Crédito", ico: "credit-card", label: "Crédito" },
              { id: "Débito", ico: "credit-card", label: "Débito" },
              { id: "Dinheiro", ico: "banknote", label: "Dinheiro" },
            ].map(o => (
              <div key={o.id} className={`pay ${pay === o.id ? "active" : ""}`} onClick={() => setPay(o.id)}>
                <Icon name={o.ico} size={16} />
                <span>{o.label}</span>
              </div>
            ))}
          </div>

          {pay === "PIX" && (
            <div style={{ marginTop: 12, padding: 12, background: "var(--tm-bg-2)", borderRadius: 8, display: "flex", gap: 12, alignItems: "center" }}>
              <div className="qr" style={{ width: 80, height: 80 }} />
              <div style={{ flex: 1, fontSize: 12, color: "var(--tm-fg-2)" }}>
                Pix copia e cola
                <div style={{ fontFamily: "var(--tm-font-mono)", fontSize: 10.5, color: "var(--tm-fg-3)", marginTop: 4, wordBreak: "break-all" }}>Configure a chave PIX nas configurações da empresa</div>
              </div>
            </div>
          )}

          <Button variant="primary" size="lg" icon="check" style={{ width: "100%", marginTop: 12, height: 48 }}>Finalizar venda · R$ {brl(total)}</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PDV });