// Vendas — lista, detalhe, novo

const { cnpjs, vendedores, clientes, tipos, statusList, formasPagamento } = window.MP_DATA;

function calcFaturado(venda) {
  return (venda.faturamentos || []).reduce((s, f) => s + (f.valor || 0), 0);
}
function calcEntradas(venda) {
  return (venda.entradas || []).reduce((s, e) => s + (e.valor || 0), 0);
}
function vendaPorCnpj(venda) {
  const m = {};
  (venda.faturamentos || []).forEach(f => { m[f.cnpjId] = (m[f.cnpjId] || 0) + (f.valor || 0); });
  return m;
}

// ─────────────────────────────────────────────────────────────────────────────
// LISTA DE VENDAS
// ─────────────────────────────────────────────────────────────────────────────

function VendasList({ vendas, onOpen, onNew, view }) {
  const [filtroStatus, setFiltroStatus] = React.useState("todos");
  const [filtroVendedor, setFiltroVendedor] = React.useState("todos");
  const [busca, setBusca] = React.useState("");
  const [periodo, setPeriodo] = React.useState("maio-2026");

  // Apply filters
  let lista = vendas.slice();
  if (filtroStatus !== "todos") lista = lista.filter(v => v.status === filtroStatus);
  if (filtroVendedor !== "todos") lista = lista.filter(v => v.vendedorId === filtroVendedor);
  if (busca) {
    const q = busca.toLowerCase();
    lista = lista.filter(v => {
      const c = clientes.find(x => x.id === v.clienteId);
      return v.op.includes(q) || (c?.nome.toLowerCase().includes(q)) || v.descricao.toLowerCase().includes(q);
    });
  }

  // KPIs
  const totalVenda = lista.reduce((s, v) => s + v.valor, 0);
  const totalFaturado = lista.reduce((s, v) => s + calcFaturado(v), 0);
  const totalEntradas = lista.reduce((s, v) => s + calcEntradas(v), 0);
  const totalPeso = lista.reduce((s, v) => s + v.peso, 0);
  const saldoReceber = totalFaturado - totalEntradas;

  // Faturamento por CNPJ
  const fatPorCnpj = {};
  lista.forEach(v => {
    Object.entries(vendaPorCnpj(v)).forEach(([id, val]) => {
      fatPorCnpj[id] = (fatPorCnpj[id] || 0) + val;
    });
  });

  return (
    <>
      <div className="page__head">
        <div>
          <div className="topbar__crumb" style={{ marginBottom: 4 }}>Módulo Vendas</div>
          <h1>Vendas de Maio · 2026</h1>
          <p>{lista.length} {lista.length === 1 ? "operação" : "operações"} no período · Substitui a planilha “VENDAS 2026”.</p>
        </div>
        <div className="page__actions">
          <div className="tabs">
            <div className={`tabs__item ${periodo === "abril-2026" ? "tabs__item--active" : ""}`} onClick={() => setPeriodo("abril-2026")}>Abril</div>
            <div className={`tabs__item ${periodo === "maio-2026" ? "tabs__item--active" : ""}`} onClick={() => setPeriodo("maio-2026")}>Maio</div>
            <div className={`tabs__item ${periodo === "junho-2026" ? "tabs__item--active" : ""}`} onClick={() => setPeriodo("junho-2026")}>Junho</div>
          </div>
          <Button variant="accent" icon="plus" onClick={onNew}>Nova venda</Button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="Total em vendas"    icon="money"  value={fmtBRL(totalVenda)}    sub={`${lista.length} OPs no período`}                              accent="#0d0d0d" />
        <KPI label="Faturado"           icon="file"   value={fmtBRL(totalFaturado)} sub={`${Math.round((totalFaturado / (totalVenda || 1)) * 100)}% do total`} accent="var(--mp-yellow)" />
        <KPI label="Recebido"           icon="check"  value={fmtBRL(totalEntradas)} sub={`Saldo a receber ${fmtBRL(saldoReceber)}`}                  accent="#1d7a3b" />
        <KPI label="Peso total"         icon="weight" value={`${fmtNumber(totalPeso)} kg`} sub={`Média ${fmtNumber(totalPeso / (lista.length || 1))} kg/OP`} accent="#5b8def" />
      </div>

      {/* CNPJ split bar */}
      <Card title="Faturamento por CNPJ no período" padded={false}>
        <div style={{ padding: "14px 18px", display: "flex", gap: 24, flexWrap: "wrap", alignItems: "center" }}>
          {cnpjs.map(c => {
            const v = fatPorCnpj[c.id] || 0;
            const pct = totalFaturado > 0 ? (v / totalFaturado) * 100 : 0;
            return (
              <div key={c.id} style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 200 }}>
                <CnpjPill cnpjId={c.id} />
                <div style={{ display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, fontWeight: 700 }}>
                    <span>{fmtBRL(v)}</span>
                    <span style={{ color: "var(--text-3)", fontSize: 11, fontWeight: 600 }}>{pct.toFixed(0)}%</span>
                  </div>
                  <div style={{ height: 4, background: "var(--bg-subtle)", borderRadius: 99, overflow: "hidden" }}>
                    <div style={{ width: `${pct}%`, height: "100%", background: c.id === "padrao" ? "#0d0d0d" : (c.id === "ffc" ? "#a4a39c" : "var(--mp-yellow)") }} />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </Card>

      <div style={{ height: 20 }} />

      <div className="filterbar">
        <div className="input">
          <Icon name="search" size={15} />
          <input value={busca} onChange={e => setBusca(e.target.value)} placeholder="Buscar OP, cliente ou descrição..." style={{ marginLeft: 8 }} />
        </div>

        <div className={`chip ${filtroStatus === "todos" ? "chip--on" : ""}`} onClick={() => setFiltroStatus("todos")}>Todos</div>
        {statusList.map(s => (
          <div key={s.id} className={`chip ${filtroStatus === s.id ? "chip--on" : ""}`} onClick={() => setFiltroStatus(s.id)}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: s.cor, display: "inline-block" }} />
            {s.nome}
          </div>
        ))}

        <div style={{ flex: 1 }} />

        <Select
          value={filtroVendedor}
          onChange={setFiltroVendedor}
          options={[
            { value: "todos", label: "Todos vendedores" },
            ...vendedores.map(v => ({ value: v.id, label: v.nome })),
          ]}
        />
      </div>

      {lista.length === 0 ? (
        <Card>
          <Empty
            title="Nenhuma venda encontrada"
            hint="Ajuste os filtros ou cadastre uma nova venda."
            action={<Button variant="accent" icon="plus" onClick={onNew}>Nova venda</Button>}
          />
        </Card>
      ) : view === "cards" ? (
        <VendasCards lista={lista} onOpen={onOpen} />
      ) : (
        <VendasTable lista={lista} onOpen={onOpen} />
      )}
    </>
  );
}

function VendasTable({ lista, onOpen }) {
  return (
    <div className="table-wrap">
      <table className="tbl">
        <thead>
          <tr>
            <th style={{ width: 60 }}>OP</th>
            <th style={{ width: 50 }}>Vend.</th>
            <th>Cliente / Descrição</th>
            <th style={{ width: 90 }}>Tipo</th>
            <th className="num" style={{ width: 90 }}>Peso (kg)</th>
            <th className="num" style={{ width: 130 }}>Valor venda</th>
            <th style={{ width: 200 }}>Faturamento</th>
            <th className="num" style={{ width: 130 }}>Recebido</th>
            <th style={{ width: 110 }}>Status</th>
          </tr>
        </thead>
        <tbody>
          {lista.map(v => {
            const c = clientes.find(x => x.id === v.clienteId);
            const t = tipos.find(x => x.id === v.tipoId);
            const fat = calcFaturado(v);
            const ent = calcEntradas(v);
            const fatPct = (fat / v.valor) * 100;
            const cnpjMap = vendaPorCnpj(v);
            return (
              <tr key={v.op} onClick={() => onOpen(v)}>
                <td><span className="op-tag">{v.op}</span></td>
                <td><Avatar vendedorId={v.vendedorId} size={28} /></td>
                <td>
                  <div className="client-cell">
                    <b>{c?.nome}</b>
                    <small>{v.descricao}</small>
                  </div>
                </td>
                <td>
                  <Badge bg="rgba(0,0,0,.04)" color="var(--text-2)" size="sm">{t?.nome}</Badge>
                </td>
                <td className="num">{fmtNumber(v.peso)}</td>
                <td className="num">{fmtBRL(v.valor)}</td>
                <td>
                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                    <div className="cnpj-stack">
                      {Object.entries(cnpjMap).length === 0
                        ? <span style={{ color: "var(--text-4)", fontSize: 11.5 }}>—</span>
                        : Object.entries(cnpjMap).map(([id]) => <CnpjPill key={id} cnpjId={id} />)}
                    </div>
                    {fat > 0 && (
                      <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5, color: "var(--text-3)", fontWeight: 600 }}>
                        <div className="faturado-mini-bar">
                          <span style={{ width: `${Math.min(100, fatPct)}%`, background: fatPct >= 100 ? "var(--st-fat)" : "var(--mp-yellow-deep)" }} />
                        </div>
                        <span>{fatPct.toFixed(0)}%</span>
                      </div>
                    )}
                  </div>
                </td>
                <td className="num">{ent > 0 ? fmtBRL(ent) : <span style={{ color: "var(--text-4)" }}>—</span>}</td>
                <td><StatusBadge statusId={v.status} /></td>
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan={4} style={{ color: "var(--text-3)", fontWeight: 600 }}>{lista.length} operações</td>
            <td className="num">{fmtNumber(lista.reduce((s, v) => s + v.peso, 0))}</td>
            <td className="num">{fmtBRL(lista.reduce((s, v) => s + v.valor, 0))}</td>
            <td></td>
            <td className="num">{fmtBRL(lista.reduce((s, v) => s + calcEntradas(v), 0))}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

function VendasCards({ lista, onOpen }) {
  return (
    <div className="vendas-cards">
      {lista.map(v => {
        const c = clientes.find(x => x.id === v.clienteId);
        const t = tipos.find(x => x.id === v.tipoId);
        const fat = calcFaturado(v);
        const ent = calcEntradas(v);
        const pct = (fat / v.valor) * 100;
        const cnpjMap = vendaPorCnpj(v);
        return (
          <div key={v.op} className="vcard" onClick={() => onOpen(v)}>
            <div className="vcard__head">
              <span className="vcard__op">OP {v.op}</span>
              <StatusBadge statusId={v.status} />
              <div style={{ flex: 1 }} />
              <Avatar vendedorId={v.vendedorId} size={26} />
            </div>
            <div>
              <div className="vcard__cliente">{c?.nome}</div>
              <div className="vcard__desc">{v.descricao}</div>
            </div>
            <div className="vcard__row">
              <div>
                <small>Valor</small>
                <b>{fmtBRL(v.valor)}</b>
              </div>
              <div style={{ textAlign: "right" }}>
                <small>Peso</small>
                <b>{fmtNumber(v.peso)} kg</b>
              </div>
            </div>
            <div className="vcard__progress"><span style={{ width: `${Math.min(100, pct)}%` }} /></div>
            <div className="vcard__foot">
              {Object.keys(cnpjMap).length > 0
                ? Object.keys(cnpjMap).map(id => <CnpjPill key={id} cnpjId={id} />)
                : <span style={{ color: "var(--text-4)", fontSize: 11.5 }}>Sem faturamento</span>}
              <div style={{ flex: 1 }} />
              <Badge bg="rgba(0,0,0,.04)" color="var(--text-2)" size="sm">{t?.nome}</Badge>
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.VendasList = VendasList;
window.calcFaturado = calcFaturado;
window.calcEntradas = calcEntradas;
window.vendaPorCnpj = vendaPorCnpj;