/* ============================================================
   Vendas — lançamento (pontos automáticos) + lista
   ============================================================ */

function VendaForm({ clienteId, onClose }) {
  const s        = useStore();
  const [cli,      setCli]      = useState(clienteId ? String(clienteId) : "");
  const [numero,   setNumero]   = useState("");
  const [data,     setData]     = useState(DB.todayISO());
  const [valor,    setValor]    = useState("");
  const [pagamento,setPagamento]= useState("");
  const [obs,      setObs]      = useState("");
  const [saving,   setSaving]   = useState(false);

  const valorNum = parseFloat(String(valor).replace(/\./g, "").replace(",", ".")) || 0;
  const pontos   = DB.calcPontosComPagamento(valorNum, pagamento);
  const mult     = DB.multiplicadorDaPagamento(pagamento);

  async function salvar() {
    if (!cli)           { toast("Selecione o cliente.", "err"); return; }
    if (!numero.trim()) { toast("Informe o número da venda no ERP.", "err"); return; }
    if (valorNum <= 0)  { toast("Informe um valor de venda válido.", "err"); return; }
    if (!pagamento)     { toast("Selecione a forma de pagamento.", "err"); return; }
    setSaving(true);
    try {
      await DB.addVenda({ clienteId: cli, numeroErp: numero, data, valor: valorNum, formaPagamento: pagamento, observacao: obs });
      toast("Venda lançada · +" + DB.formatNum(pontos) + " pts gerados.");
      onClose();
    } catch (e) { toast(e.message, "err"); }
    finally { setSaving(false); }
  }

  return (
    <Modal title="Lançar venda do ERP" subtitle="Os pontos são calculados automaticamente pela regra vigente." onClose={onClose}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="check" onClick={salvar} disabled={saving}>{saving ? "Lançando…" : "Lançar venda"}</Button>
      </>}>
      <Field label="Cliente" required>
        <Select value={cli} onChange={(e) => setCli(e.target.value)}>
          <option value="">Selecione...</option>
          {s.clientes.map((c) => <option key={c.id} value={c.id}>{c.nome}</option>)}
        </Select>
      </Field>
      <div className="form-row">
        <Field label="Nº da venda (ERP)" required>
          <Input value={numero} onChange={(e) => setNumero(e.target.value)} placeholder="Ex.: ERP-10231" />
        </Field>
        <Field label="Data da venda" required>
          <Input type="date" value={data} onChange={(e) => setData(e.target.value)} max={DB.todayISO()} />
        </Field>
      </div>
      <div className="form-row">
        <Field label="Valor da venda (R$)" required>
          <Input value={valor} onChange={(e) => setValor(e.target.value)} placeholder="0,00" inputMode="decimal" />
        </Field>
        <div className="points-preview">
          <span>Pontos gerados</span>
          <strong className="mono">{DB.formatNum(pontos)}</strong>
          {pagamento && mult !== 1 && (
            <em style={{ fontSize: 11, fontStyle: "normal", color: mult > 1 ? "var(--green, #2d8a4e)" : "var(--text-3)", fontWeight: 600 }}>
              ×{mult.toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 2 })} {pagamento}
            </em>
          )}
        </div>
      </div>
      <Field label="Forma de pagamento" required>
        <Select value={pagamento} onChange={(e) => setPagamento(e.target.value)}>
          <option value="">Selecione...</option>
          {(s.formasPagamento || []).map((fp) => (
            <option key={fp.id} value={fp.nome}>
              {fp.nome}{fp.multiplicador !== 1
                ? " (×" + fp.multiplicador.toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 2 }) + ")"
                : ""}
            </option>
          ))}
        </Select>
      </Field>
      <Field label="Observação" hint="Opcional">
        <Textarea value={obs} onChange={(e) => setObs(e.target.value)} rows={2} placeholder="Ex.: Pedido promocional, parcelado, etc." />
      </Field>
    </Modal>
  );
}

function Vendas({ go, initial }) {
  const s = useStore();
  const [q, setQ]       = useState("");
  const [form, setForm] = useState(initial && initial.novo ? { clienteId: initial.clienteId } : null);
  const [del, setDel]   = useState(null);
  const [deleting, setDeleting] = useState(false);

  let lista = s.vendas.slice().sort((a, b) => b.data.localeCompare(a.data));
  if (q.trim()) {
    const t = q.toLowerCase();
    lista = lista.filter((v) => {
      const c = DB.cliente(v.clienteId);
      return (v.numeroErp || "").toLowerCase().includes(t)
          || (c && c.nome.toLowerCase().includes(t))
          || (v.formaPagamento || "").toLowerCase().includes(t);
    });
  }

  const totalValor = lista.reduce((a, v) => a + v.valor, 0);
  const totalPts   = lista.reduce((a, v) => a + v.pontos, 0);

  async function confirmarDelete() {
    setDeleting(true);
    try { await DB.removeVenda(del.id); toast("Venda excluída."); setDel(null); }
    catch (e) { toast(e.message, "err"); }
    finally { setDeleting(false); }
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Vendas</h1>
          <p className="page-sub">{DB.formatNum(s.vendas.length)} lançamentos · {DB.formatBRL(totalValor)} · {DB.formatNum(totalPts)} pts</p>
        </div>
        <Button icon="plus" onClick={() => setForm({})}>Lançar venda</Button>
      </div>

      <div className="toolbar">
        <SearchBox value={q} onChange={setQ} placeholder="Buscar por nº, cliente ou pagamento" />
      </div>

      <div className="card">
        {lista.length === 0 ? (
          <Empty icon="cart" title="Nenhuma venda encontrada" hint="Lance a primeira venda para gerar pontos."
            action={<Button icon="plus" onClick={() => setForm({})}>Lançar venda</Button>} />
        ) : (
          <table className="table">
            <thead>
              <tr>
                <th>Nº ERP</th><th>Cliente</th><th className="num">Valor</th>
                <th>Pagamento</th><th className="num">Pontos</th>
                <th className="num">Data</th><th>Validade</th><th>Obs.</th><th></th>
              </tr>
            </thead>
            <tbody>
              {lista.map((v) => {
                const c   = DB.cliente(v.clienteId);
                const exp = DB.isExpired(v.expiraEm);
                const fp  = (s.formasPagamento || []).find(f => f.nome === v.formaPagamento);
                return (
                  <tr key={v.id}>
                    <td className="mono strong">{v.numeroErp || "—"}</td>
                    <td><button className="linklike" onClick={() => c && go("cliente", { id: c.id })}>{c ? c.nome : "—"}</button></td>
                    <td className="num mono">{DB.formatBRL(v.valor)}</td>
                    <td>
                      {v.formaPagamento
                        ? <span>{v.formaPagamento}{fp && fp.multiplicador !== 1
                            ? <em style={{ fontSize: 10, fontStyle: "normal", marginLeft: 4, color: fp.multiplicador > 1 ? "var(--green, #2d8a4e)" : "var(--text-3)", fontWeight: 600 }}>
                                ×{fp.multiplicador.toLocaleString("pt-BR", { minimumFractionDigits: 1 })}
                              </em>
                            : null}
                          </span>
                        : <span className="muted">—</span>}
                    </td>
                    <td className="num mono pos">+{DB.formatNum(v.pontos)}</td>
                    <td className="num muted">{DB.formatDate(v.data)}</td>
                    <td className={exp ? "expired" : "muted"}>{exp ? "expirado" : DB.formatDate(v.expiraEm)}</td>
                    <td className="obs">{v.observacao || "—"}</td>
                    <td className="acts">
                      <button className="icon-btn danger" title="Excluir" onClick={() => setDel(v)}><Icon name="trash" size={17} /></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {form && <VendaForm clienteId={form.clienteId} onClose={() => setForm(null)} />}
      {del && (
        <Modal title="Excluir venda" onClose={() => setDel(null)}
          footer={<>
            <Button variant="ghost" onClick={() => setDel(null)}>Cancelar</Button>
            <Button variant="danger" icon="trash" onClick={confirmarDelete} disabled={deleting}>
              {deleting ? "Excluindo…" : "Excluir"}
            </Button>
          </>}>
          <p className="confirm-txt">Excluir a venda <strong>{del.numeroErp}</strong>? Os <strong>{DB.formatNum(del.pontos)} pts</strong> gerados serão estornados.</p>
        </Modal>
      )}
    </div>
  );
}

Object.assign(window, { Vendas, VendaForm });