/* ============================================================
   Resgates — registrar (valida saldo/estoque) + comprovante
   ============================================================ */

function ResgateForm({ clienteId, onClose, onDone }) {
  const s = useStore();
  const [cli,  setCli]  = useState(clienteId ? String(clienteId) : "");
  const [prod, setProd] = useState("");
  const [saving, setSaving] = useState(false);

  const saldo   = cli  ? DB.saldoDisponivel(cli)  : 0;
  const produtos = s.produtos.filter((p) => p.ativo);
  const p       = prod ? DB.produto(prod)          : null;
  const check   = (cli && prod) ? DB.podeResgatar(cli, prod) : null;

  async function salvar() {
    if (!cli)  { toast("Selecione o cliente.", "err"); return; }
    if (!prod) { toast("Selecione o prêmio.",  "err"); return; }
    setSaving(true);
    try {
      const r = await DB.addResgate(cli, prod);
      if (!r.ok) { toast(r.motivo, "err"); return; }
      toast("Resgate registrado!");
      onDone && onDone(r.resgate);
      onClose();
    } finally {
      setSaving(false);
    }
  }

  return (
    <Modal title="Registrar resgate" subtitle="Valida o saldo, desconta os pontos e baixa o estoque." onClose={onClose}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="gift" onClick={salvar} disabled={saving || (check && !check.ok)}>
          {saving ? "Registrando…" : "Confirmar resgate"}
        </Button>
      </>}>
      <Field label="Cliente" required>
        <Select value={cli} onChange={(e) => { setCli(e.target.value); setProd(""); }}>
          <option value="">Selecione...</option>
          {s.clientes.map((c) => (
            <option key={c.id} value={c.id}>
              {c.nome} — {DB.formatNum(DB.saldoDisponivel(c.id))} pts
            </option>
          ))}
        </Select>
      </Field>

      {cli && (
        <div className="saldo-banner">
          <span>Saldo disponível</span>
          <strong className="mono">{DB.formatNum(saldo)} pts</strong>
        </div>
      )}

      <Field label="Prêmio" required>
        <Select value={prod} onChange={(e) => setProd(e.target.value)}>
          <option value="">Selecione...</option>
          {produtos.map((pr) => (
            <option key={pr.id} value={pr.id} disabled={pr.estoque <= 0}>
              {pr.nome} — {DB.formatNum(pr.custoPontos)} pts{pr.estoque <= 0 ? " (sem estoque)" : ""}
            </option>
          ))}
        </Select>
      </Field>

      {p && (
        <div className="resgate-resumo">
          <div className="rr-row"><span>Custo do prêmio</span><strong className="mono">−{DB.formatNum(p.custoPontos)} pts</strong></div>
          <div className="rr-row"><span>Saldo após resgate</span><strong className="mono">{DB.formatNum(Math.max(0, saldo - p.custoPontos))} pts</strong></div>
          {check && !check.ok && <div className="rr-warn"><Icon name="alert" size={16} /> {check.motivo}</div>}
        </div>
      )}
    </Modal>
  );
}

function Comprovante({ resgate, onClose }) {
  const c     = DB.cliente(resgate.clienteId);
  const saldo = DB.saldoDisponivel(resgate.clienteId);
  const proto = "#" + String(resgate.id).padStart(8, "0");
  return (
    <Modal title="Comprovante de resgate" onClose={onClose} wide
      footer={<>
        <Button variant="ghost" onClick={onClose}>Fechar</Button>
        <Button icon="print" onClick={() => window.print()}>Imprimir</Button>
      </>}>
      <div className="receipt" id="receipt-print">
        <div className="receipt-head">
          <div className="receipt-brand">
            <span className="logo-mark">R</span>
            <div><strong>RECO64</strong><em>Clube de Recompensas</em></div>
          </div>
          <span className="receipt-tag">COMPROVANTE</span>
        </div>
        <div className="receipt-grid">
          <div><span>Cliente</span><strong>{c ? c.nome : "—"}</strong></div>
          <div><span>Documento</span><strong className="mono">{c && c.documento ? c.documento : "—"}</strong></div>
          <div><span>Data</span><strong>{DB.formatDate(resgate.data)}</strong></div>
          <div><span>Protocolo</span><strong className="mono">{proto}</strong></div>
        </div>
        <div className="receipt-prize">
          <span>Prêmio resgatado</span>
          <strong>{resgate.produtoNome}</strong>
        </div>
        <div className="receipt-points">
          <div><span>Pontos utilizados</span><strong className="mono neg">−{DB.formatNum(resgate.pontos)}</strong></div>
          <div><span>Saldo restante</span><strong className="mono">{DB.formatNum(saldo)}</strong></div>
        </div>
        <p className="receipt-foot">Apresente este comprovante para retirada do prêmio. Documento gerado pelo Clube de Recompensas.</p>
      </div>
    </Modal>
  );
}

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

  let lista = s.resgates.slice().sort((a, b) => b.data.localeCompare(a.data));
  if (q.trim()) {
    const t = q.toLowerCase();
    lista = lista.filter((r) => {
      const c = DB.cliente(r.clienteId);
      return r.produtoNome.toLowerCase().includes(t) || (c && c.nome.toLowerCase().includes(t));
    });
  }
  const totalPts = s.resgates.reduce((a, r) => a + r.pontos, 0);

  async function confirmarEstorno() {
    setDeleting(true);
    try {
      await DB.removeResgate(del.id);
      toast("Resgate estornado.");
      setDel(null);
    } catch (e) { toast(e.message, "err"); }
    finally { setDeleting(false); }
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Resgates</h1>
          <p className="page-sub">{DB.formatNum(s.resgates.length)} resgates · {DB.formatNum(totalPts)} pts trocados</p>
        </div>
        <Button icon="plus" onClick={() => setForm({})}>Registrar resgate</Button>
      </div>

      <div className="toolbar">
        <SearchBox value={q} onChange={setQ} placeholder="Buscar por cliente ou prêmio" />
      </div>

      <div className="card">
        {lista.length === 0 ? (
          <Empty icon="swap" title="Nenhum resgate registrado" hint="Registre o primeiro resgate de um prêmio."
            action={<Button icon="plus" onClick={() => setForm({})}>Registrar resgate</Button>} />
        ) : (
          <table className="table">
            <thead>
              <tr><th>Data</th><th>Cliente</th><th>Prêmio</th><th className="num">Pontos</th><th>Protocolo</th><th></th></tr>
            </thead>
            <tbody>
              {lista.map((r) => {
                const c = DB.cliente(r.clienteId);
                return (
                  <tr key={r.id}>
                    <td className="num muted">{DB.formatDate(r.data)}</td>
                    <td><button className="linklike" onClick={() => c && go("cliente", { id: c.id })}>{c ? c.nome : "—"}</button></td>
                    <td className="strong">{r.produtoNome}</td>
                    <td className="num mono neg">−{DB.formatNum(r.pontos)}</td>
                    <td className="mono muted">{"#" + String(r.id).padStart(8, "0")}</td>
                    <td className="acts">
                      <button className="icon-btn" title="Comprovante" onClick={() => setComprovante(r)}><Icon name="print" size={17} /></button>
                      <button className="icon-btn danger" title="Estornar" onClick={() => setDel(r)}><Icon name="trash" size={17} /></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {form && <ResgateForm clienteId={form.clienteId} onClose={() => setForm(null)} onDone={(r) => setComprovante(r)} />}
      {comprovante && <Comprovante resgate={comprovante} onClose={() => setComprovante(null)} />}
      {del && (
        <Modal title="Estornar resgate" onClose={() => setDel(null)}
          footer={<>
            <Button variant="ghost" onClick={() => setDel(null)}>Cancelar</Button>
            <Button variant="danger" icon="trash" onClick={confirmarEstorno} disabled={deleting}>
              {deleting ? "Estornando…" : "Estornar"}
            </Button>
          </>}>
          <p className="confirm-txt">Estornar o resgate de <strong>{del.produtoNome}</strong>? Os <strong>{DB.formatNum(del.pontos)} pts</strong> voltam ao saldo do cliente. O estoque não é reposto automaticamente.</p>
        </Modal>
      )}
    </div>
  );
}

Object.assign(window, { Resgates, ResgateForm, Comprovante });