// Cadastros — Clientes / Vendedores (telas simples para mostrar o crescimento do sistema)

function ClientesPage({ vendas }) {
  const clientes = window.MP_DATA.clientes;
  const [busca, setBusca] = React.useState("");

  const lista = clientes.filter(c => !busca || c.nome.toLowerCase().includes(busca.toLowerCase()));

  return (
    <>
      <div className="page__head">
        <div>
          <div className="topbar__crumb" style={{ marginBottom: 4 }}>Cadastros</div>
          <h1>Clientes</h1>
          <p>{clientes.length} clientes cadastrados.</p>
        </div>
        <div className="page__actions">
          <Button variant="accent" icon="plus">Novo cliente</Button>
        </div>
      </div>

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

      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Cliente</th>
              <th>CNPJ</th>
              <th>Contato</th>
              <th>Cidade</th>
              <th className="num">OPs</th>
              <th className="num">Total vendido</th>
            </tr>
          </thead>
          <tbody>
            {lista.map(c => {
              const ops = vendas.filter(v => v.clienteId === c.id);
              const total = ops.reduce((s, v) => s + v.valor, 0);
              return (
                <tr key={c.id}>
                  <td>
                    <div className="client-cell"><b>{c.nome}</b><small>{c.endereco}</small></div>
                  </td>
                  <td className="muted" style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12 }}>{c.cnpj}</td>
                  <td>
                    <div className="client-cell"><b>{c.contato}</b><small>{c.telefone}</small></div>
                  </td>
                  <td>{c.cidade}/{c.uf}</td>
                  <td className="num">{ops.length}</td>
                  <td className="num">{fmtBRL(total)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

function VendedoresPage({ vendas }) {
  const vs = window.MP_DATA.vendedores;
  return (
    <>
      <div className="page__head">
        <div>
          <div className="topbar__crumb" style={{ marginBottom: 4 }}>Cadastros</div>
          <h1>Vendedores</h1>
          <p>{vs.length} vendedores ativos no time comercial.</p>
        </div>
        <div className="page__actions">
          <Button variant="accent" icon="plus">Novo vendedor</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 12 }}>
        {vs.map(v => {
          const ops = vendas.filter(x => x.vendedorId === v.id);
          const total = ops.reduce((s, x) => s + x.valor, 0);
          const peso = ops.reduce((s, x) => s + x.peso, 0);
          return (
            <div key={v.id} className="card" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span className="avatar" style={{ width: 44, height: 44, background: v.cor, fontSize: 14 }}>{v.iniciais}</span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>{v.nome}</div>
                  <div style={{ fontSize: 12, color: "var(--text-3)" }}>{v.email}</div>
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, paddingTop: 12, borderTop: "1px solid var(--border)" }}>
                <div>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: ".08em" }}>OPs</div>
                  <div style={{ fontWeight: 700, fontSize: 16 }}>{ops.length}</div>
                </div>
                <div>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: ".08em" }}>Peso</div>
                  <div style={{ fontWeight: 700, fontSize: 16 }}>{fmtNumber(peso)} kg</div>
                </div>
                <div>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: ".08em" }}>Total</div>
                  <div style={{ fontWeight: 700, fontSize: 16 }}>{fmtBRL(total)}</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}

function SoonPage({ title, hint }) {
  return (
    <>
      <div className="page__head">
        <div>
          <div className="topbar__crumb" style={{ marginBottom: 4 }}>Em breve</div>
          <h1>{title}</h1>
        </div>
      </div>
      <Card>
        <Empty
          icon="sparkle"
          title="Este módulo ainda não foi liberado"
          hint={hint || "Estamos construindo o sistema por etapas. Avise o time se quiser priorizar este módulo."}
        />
      </Card>
    </>
  );
}

window.ClientesPage = ClientesPage;
window.VendedoresPage = VendedoresPage;
window.SoonPage = SoonPage;