/* ============================================================
   Área do Cliente — como o cliente vê os próprios pontos.
   O admin seleciona um cliente para visualizar a experiência.
   ============================================================ */
function AreaCliente({ go, initial }) {
  const s = useStore();
  const [sel, setSel] = useState((initial && initial.id) || (s.clientes[0] && s.clientes[0].id) || "");

  const c = sel ? DB.cliente(sel) : null;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Área do cliente</h1>
          <p className="page-sub">Pré-visualização da experiência do cliente</p>
        </div>
        <div className="client-picker">
          <Select value={sel} onChange={(e) => setSel(e.target.value)}>
            {s.clientes.map((cl) => <option key={cl.id} value={cl.id}>{cl.nome}</option>)}
          </Select>
        </div>
      </div>

      {!c ? (
        <div className="card"><Empty icon="user" title="Nenhum cliente" hint="Cadastre um cliente para visualizar a área." /></div>
      ) : <ClientePortal id={c.id} go={go} />}
    </div>
  );
}

function ClientePortal({ id, go }) {
  const c = DB.cliente(id);
  const pts = DB.pontosAcumulados(id);
  const saldo = DB.saldoDisponivel(id);
  const tier = DB.categoriaFor(pts);
  const s = DB.getState();
  const vendas = DB.vendasDe(id).slice().sort((a, b) => b.data.localeCompare(a.data)).slice(0, 5);
  const resgates = DB.resgatesDe(id).slice().sort((a, b) => b.data.localeCompare(a.data)).slice(0, 5);
  const disponiveis = s.produtos.filter((p) => p.ativo && p.estoque > 0).sort((a, b) => a.custoPontos - b.custoPontos);

  return (
    <div className="portal">
      {/* Cartão de fidelidade */}
      <div className="loyalty-card" style={{ "--tier": tier.color }}>
        <div className="lc-top">
          <div className="lc-brand"><span className="logo-mark sm">R</span> RECO64 · Clube</div>
          <TierBadge tier={tier} />
        </div>
        <div className="lc-name">{c.nome}</div>
        <div className="lc-saldo">
          <span>Saldo disponível</span>
          <strong className="mono">{DB.formatNum(saldo)} <em>pts</em></strong>
        </div>
        <div className="lc-foot">
          <span className="mono">{c.documento || "—"}</span>
          <span>{DB.formatNum(pts)} pts acumulados</span>
        </div>
      </div>

      <div className="portal-progress card">
        <div className="pp-head"><span>Sua categoria</span><TierBadge tier={tier} size="sm" /></div>
        <TierProgress pontos={pts} />
      </div>

      {/* Prêmios que pode resgatar */}
      <section className="card">
        <header className="card-head"><div><h3>Prêmios disponíveis</h3><p className="card-sub">Troque seus pontos</p></div></header>
        <div className="portal-prizes">
          {disponiveis.map((p) => {
            const podeResgatar = saldo >= p.custoPontos;
            return (
              <div key={p.id} className={"pp-prize" + (podeResgatar ? " ok" : "")}>
                <div className="pp-prize-ic"><Icon name="gift" size={22} /></div>
                <div className="pp-prize-info">
                  <strong>{p.nome}</strong>
                  <span className="mono">{DB.formatNum(p.custoPontos)} pts</span>
                </div>
                {podeResgatar
                  ? <span className="pp-ok"><Icon name="check" size={14} /> Disponível</span>
                  : <span className="pp-falta">faltam {DB.formatNum(p.custoPontos - saldo)}</span>}
              </div>
            );
          })}
        </div>
      </section>

      {/* Extratos */}
      <div className="portal-cols">
        <section className="card">
          <header className="card-head"><div><h3>Últimas compras</h3></div></header>
          <ul className="mini-list">
            {vendas.length === 0 ? <li className="mini-empty">Nenhuma compra ainda.</li> : vendas.map((v) => (
              <li key={v.id}>
                <div><strong>{v.numeroErp || "Venda"}</strong><span>{DB.formatDate(v.data)} · {DB.formatBRL(v.valor)}</span></div>
                <span className="mono pos">+{DB.formatNum(v.pontos)}</span>
              </li>
            ))}
          </ul>
        </section>
        <section className="card">
          <header className="card-head"><div><h3>Resgates</h3></div></header>
          <ul className="mini-list">
            {resgates.length === 0 ? <li className="mini-empty">Nenhum resgate ainda.</li> : resgates.map((r) => (
              <li key={r.id}>
                <div><strong>{r.produtoNome}</strong><span>{DB.formatDate(r.data)}</span></div>
                <span className="mono neg">−{DB.formatNum(r.pontos)}</span>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  );
}

Object.assign(window, { AreaCliente, ClientePortal });