/* ============================================================
   Clientes — lista, cadastro/edição e detalhe (histórico)
   ============================================================ */

function ClienteForm({ inicial, onClose }) {
  const [nome, setNome]           = useState(inicial ? inicial.nome       : "");
  const [telefone, setTelefone]   = useState(inicial ? inicial.telefone   : "");
  const [documento, setDocumento] = useState(inicial ? inicial.documento  : "");
  const [saving, setSaving]       = useState(false);
  const editar = !!inicial;

  async function salvar() {
    if (!nome.trim()) { toast("Informe o nome do cliente.", "err"); return; }
    setSaving(true);
    try {
      if (editar) { await DB.updateCliente(inicial.id, { nome, telefone, documento }); toast("Cliente atualizado."); }
      else        { await DB.addCliente({ nome, telefone, documento }); toast("Cliente cadastrado."); }
      onClose();
    } catch (e) { toast(e.message, "err"); }
    finally { setSaving(false); }
  }

  return (
    <Modal
      title={editar ? "Editar cliente" : "Novo cliente"}
      subtitle={editar ? null : "A categoria é definida automaticamente pelos pontos."}
      onClose={onClose}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="check" onClick={salvar} disabled={saving}>{editar ? "Salvar" : "Cadastrar"}</Button>
      </>}
    >
      <Field label="Nome completo" required>
        <Input value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Ex.: Maria da Silva" autoFocus />
      </Field>
      <div className="form-row">
        <Field label="CPF / CNPJ">
          <Input value={documento} onChange={(e) => setDocumento(e.target.value)} placeholder="000.000.000-00" />
        </Field>
        <Field label="Telefone">
          <Input value={telefone} onChange={(e) => setTelefone(e.target.value)} placeholder="(00) 00000-0000" />
        </Field>
      </div>
    </Modal>
  );
}

function Clientes({ go }) {
  const s = useStore();
  const [q, setQ]       = useState("");
  const [cat, setCat]   = useState("todas");
  const [form, setForm] = useState(null);
  const [del, setDel]   = useState(null);
  const [deleting, setDeleting] = useState(false);

  let lista = s.clientes.map((c) => ({
    ...c,
    pts:  DB.pontosAcumulados(c.id),
    saldo: DB.saldoDisponivel(c.id),
    tier: DB.categoriaCliente(c.id)
  }));
  if (q.trim()) {
    const t = q.toLowerCase();
    lista = lista.filter((c) =>
      c.nome.toLowerCase().includes(t) ||
      (c.documento || "").toLowerCase().includes(t) ||
      (c.telefone  || "").includes(t)
    );
  }
  if (cat !== "todas") lista = lista.filter((c) => c.tier.key === cat);

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

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Clientes</h1>
          <p className="page-sub">{DB.formatNum(s.clientes.length)} cadastrados</p>
        </div>
        <Button icon="plus" onClick={() => setForm({})}>Novo cliente</Button>
      </div>

      <div className="toolbar">
        <SearchBox value={q} onChange={setQ} placeholder="Buscar por nome, CPF/CNPJ ou telefone" />
        <div className="seg">
          {[["todas", "Todas"], ...DB.TIERS.map((t) => [t.key, t.label])].map(([k, l]) => (
            <button key={k} className={"seg-btn" + (cat === k ? " on" : "")} onClick={() => setCat(k)}>{l}</button>
          ))}
        </div>
      </div>

      <div className="card">
        {lista.length === 0 ? (
          <Empty icon="users" title="Nenhum cliente encontrado" hint="Ajuste a busca ou cadastre um novo cliente." />
        ) : (
          <table className="table">
            <thead>
              <tr>
                <th>Cliente</th><th>CPF / CNPJ</th><th>Categoria</th>
                <th className="num">Pts acumulados</th><th className="num">Saldo</th>
                <th className="num">Desde</th><th></th>
              </tr>
            </thead>
            <tbody>
              {lista.map((c) => (
                <tr key={c.id} className="row-click" onClick={() => go("cliente", { id: c.id })}>
                  <td>
                    <div className="cell-user">
                      <Avatar name={c.nome} color={c.tier.color} size={34} />
                      <div><strong>{c.nome}</strong><span className="muted">{c.telefone || "—"}</span></div>
                    </div>
                  </td>
                  <td className="mono">{c.documento || "—"}</td>
                  <td><TierBadge tier={c.tier} size="sm" /></td>
                  <td className="num mono">{DB.formatNum(c.pts)}</td>
                  <td className="num mono strong">{DB.formatNum(c.saldo)}</td>
                  <td className="num muted">{DB.formatDate(c.criadoEm)}</td>
                  <td className="acts" onClick={(e) => e.stopPropagation()}>
                    <button className="icon-btn" title="Editar" onClick={() => setForm({ inicial: c })}><Icon name="edit" size={17} /></button>
                    <button className="icon-btn danger" title="Excluir" onClick={() => setDel(c)}><Icon name="trash" size={17} /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {form && <ClienteForm inicial={form.inicial} onClose={() => setForm(null)} />}
      {del && (
        <Modal title="Excluir cliente" onClose={() => setDel(null)}
          footer={<>
            <Button variant="ghost" onClick={() => setDel(null)}>Cancelar</Button>
            <Button variant="danger" icon="trash" onClick={confirmarDelete} disabled={deleting}>Excluir</Button>
          </>}>
          <p className="confirm-txt">Excluir <strong>{del.nome}</strong>? Todas as vendas e resgates vinculados também serão removidos. Esta ação não pode ser desfeita.</p>
        </Modal>
      )}
    </div>
  );
}

/* ---------- Detalhe / histórico ---------- */
function ClienteDetalhe({ id, go }) {
  useStore(); // subscribe to updates
  const c = DB.cliente(id);
  if (!c) return <div className="page"><Empty icon="users" title="Cliente não encontrado" action={<Button onClick={() => go("clientes")}>Voltar</Button>} /></div>;

  const pts       = DB.pontosAcumulados(id);
  const saldo     = DB.saldoDisponivel(id);
  const expirados = DB.pontosExpirados(id);
  const tier      = DB.categoriaFor(pts);
  const vendas    = DB.vendasDe(id).slice().sort((a, b) => b.data.localeCompare(a.data));
  const resgates  = DB.resgatesDe(id).slice().sort((a, b) => b.data.localeCompare(a.data));

  const eventos = [
    ...vendas.map((v) => ({ tipo: "venda",   data: v.data, ...v })),
    ...resgates.map((r) => ({ tipo: "resgate", data: r.data, ...r }))
  ].sort((a, b) => b.data.localeCompare(a.data));

  return (
    <div className="page">
      <button className="backlink" onClick={() => go("clientes")}><Icon name="back" size={16} /> Clientes</button>

      <div className="detail-head" style={{ "--tier": tier.color }}>
        <Avatar name={c.nome} color={tier.color} size={62} />
        <div className="detail-id">
          <div className="detail-name"><h1>{c.nome}</h1><TierBadge tier={tier} /></div>
          <p className="detail-meta">
            <span className="mono">{c.documento || "sem documento"}</span> · {c.telefone || "sem telefone"} · cliente desde {DB.formatDate(c.criadoEm)}
          </p>
        </div>
        <div className="detail-actions">
          <Button variant="soft" icon="cart" onClick={() => go("vendas",   { novo: true, clienteId: id })}>Lançar venda</Button>
          <Button              icon="gift" onClick={() => go("resgates", { novo: true, clienteId: id })}>Resgatar</Button>
        </div>
      </div>

      <div className="mini-stats">
        <div className="mini"><span>Pontos acumulados</span><strong className="mono">{DB.formatNum(pts)}</strong></div>
        <div className="mini hl"><span>Saldo disponível</span><strong className="mono">{DB.formatNum(saldo)}</strong></div>
        <div className="mini"><span>Pontos expirados</span><strong className="mono">{DB.formatNum(expirados)}</strong></div>
        <div className="mini"><span>Resgates</span><strong className="mono">{DB.formatNum(resgates.length)}</strong></div>
      </div>

      <div className="card progress-card"><TierProgress pontos={pts} /></div>

      <section className="card">
        <header className="card-head">
          <div><h3>Histórico</h3><p className="card-sub">Vendas e resgates do cliente</p></div>
        </header>
        {eventos.length === 0 ? (
          <Empty icon="clock" title="Sem movimentações" hint="Lance uma venda para começar a gerar pontos." />
        ) : (
          <ul className="timeline">
            {eventos.map((e) => (
              <li key={e.id + e.tipo} className={"tl-item tl-" + e.tipo}>
                <span className="tl-ic"><Icon name={e.tipo === "venda" ? "cart" : "gift"} size={16} /></span>
                <div className="tl-main">
                  {e.tipo === "venda" ? (
                    <>
                      <strong>Venda {e.numeroErp || "(sem nº)"}</strong>
                      <span className="tl-sub">{DB.formatBRL(e.valor)}{e.observacao ? " · " + e.observacao : ""}{DB.isExpired(e.expiraEm) ? " · pontos expirados" : " · expira em " + DB.formatDate(e.expiraEm)}</span>
                    </>
                  ) : (
                    <>
                      <strong>Resgate · {e.produtoNome}</strong>
                      <span className="tl-sub">Prêmio trocado por pontos</span>
                    </>
                  )}
                </div>
                <div className="tl-right">
                  <span className={"tl-pts " + (e.tipo === "venda" ? "pos" : "neg")}>{e.tipo === "venda" ? "+" : "−"}{DB.formatNum(e.pontos)} pts</span>
                  <span className="tl-date">{DB.formatDate(e.data)}</span>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}

Object.assign(window, { Clientes, ClienteDetalhe, ClienteForm });