/* ============================================================
   Configurações — regra de pontos, validade, categorias,
                   multiplicadores por forma de pagamento
   ============================================================ */
function Configuracoes() {
  const s   = useStore();
  const cfg = s.config || {};

  const [reais,    setReais]    = useState(String(cfg.reaisPorPonto  || 1));
  const [validade, setValidade] = useState(String(cfg.validadeMeses || 12));
  const [saving,    setSaving]    = useState(false);
  const [resetting, setResetting] = useState(false);

  // multiplicadores: { [id]: string } — editado localmente, salvo no botão
  const [mults, setMults] = useState(() =>
    Object.fromEntries((s.formasPagamento || []).map(fp => [fp.id, String(fp.multiplicador).replace(".", ",")]))
  );

  const reaisNum = parseFloat(String(reais).replace(",", ".")) || 1;
  const exemplo  = Math.floor(100 / reaisNum);

  function multNum(fp) {
    return parseFloat(String(mults[fp.id] ?? fp.multiplicador).replace(",", ".")) || 0;
  }

  async function salvar() {
    setSaving(true);
    try {
      await DB.updateConfig({ reaisPorPonto: reaisNum, validadeMeses: Number(validade) || 12 });
      const updates = (s.formasPagamento || []).map(fp => ({ id: fp.id, multiplicador: multNum(fp) }));
      if (updates.length) await DB.updateFormasPagamento(updates);
      toast("Configurações salvas. Novas vendas usarão a nova regra.");
    } catch (e) { toast(e.message, "err"); }
    finally { setSaving(false); }
  }

  async function restaurarExemplo() {
    if (!confirm("Restaurar dados de exemplo? Todos os dados atuais serão apagados permanentemente.")) return;
    setResetting(true);
    try {
      await DB.resetSeed();
      toast("Dados de exemplo restaurados.");
    } catch (e) { toast(e.message, "err"); }
    finally { setResetting(false); }
  }

  return (
    <div className="page narrow">
      <div className="page-head">
        <div>
          <h1>Configurações</h1>
          <p className="page-sub">Regras de pontuação do clube</p>
        </div>
      </div>

      <section className="card">
        <header className="card-head"><div><h3>Regra de acúmulo</h3><p className="card-sub">Quantos reais valem 1 ponto</p></div></header>
        <div className="card-pad">
          <div className="rule-builder">
            <span>A cada</span>
            <div className="rule-input"><em>R$</em><input className="input" value={reais} onChange={(e) => setReais(e.target.value)} inputMode="decimal" /></div>
            <span>em vendas, o cliente ganha</span>
            <strong className="rule-fixed">1 ponto</strong>
          </div>
          <p className="rule-eg">Exemplo: uma venda de <strong>{DB.formatBRL(100)}</strong> gera <strong>{DB.formatNum(exemplo)} pontos</strong> (sem multiplicador).</p>
        </div>
      </section>

      <section className="card">
        <header className="card-head"><div><h3>Validade dos pontos</h3><p className="card-sub">Tempo até os pontos expirarem</p></div></header>
        <div className="card-pad">
          <Field label="Validade (meses)">
            <Select value={validade} onChange={(e) => setValidade(e.target.value)}>
              {[6, 12, 18, 24, 36].map((m) => <option key={m} value={m}>{m} meses</option>)}
            </Select>
          </Field>
          <p className="rule-eg">Pontos gerados hoje expiram em <strong>{DB.formatDate(DB.addMonthsISO(DB.todayISO(), Number(validade) || 12))}</strong>. Vale apenas para vendas futuras.</p>
        </div>
      </section>

      {(s.formasPagamento || []).length > 0 && (
        <section className="card">
          <header className="card-head">
            <div>
              <h3>Multiplicadores por pagamento</h3>
              <p className="card-sub">Pontos gerados = valor ÷ R$/pt × multiplicador</p>
            </div>
          </header>
          <table className="table">
            <thead>
              <tr>
                <th>Forma de pagamento</th>
                <th className="num">Multiplicador</th>
                <th className="num">Pts em venda de {DB.formatBRL(100)}</th>
              </tr>
            </thead>
            <tbody>
              {(s.formasPagamento || []).map((fp) => {
                const m    = multNum(fp);
                const pts  = Math.floor(100 / reaisNum * m);
                const cor  = m > 1 ? "var(--green, #2d8a4e)" : m < 1 ? "var(--red, #c0392b)" : "inherit";
                return (
                  <tr key={fp.id}>
                    <td>{fp.nome}</td>
                    <td className="num">
                      <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
                        <span className="muted" style={{ fontSize: 13 }}>×</span>
                        <input
                          className="input"
                          style={{ width: 72, textAlign: "right", color: cor, fontWeight: m !== 1 ? 600 : undefined }}
                          value={mults[fp.id] ?? String(fp.multiplicador).replace(".", ",")}
                          onChange={(e) => setMults(prev => ({ ...prev, [fp.id]: e.target.value }))}
                          inputMode="decimal"
                        />
                      </div>
                    </td>
                    <td className="num mono" style={{ color: cor }}>
                      {DB.formatNum(pts)} pts
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          <p className="rule-eg" style={{ padding: "0 16px 12px" }}>
            Valores acima de ×1,0 bonificam; abaixo penalizam. Vendas já lançadas não são alteradas.
          </p>
        </section>
      )}

      <section className="card">
        <header className="card-head"><div><h3>Categorias</h3><p className="card-sub">Classificação automática por pontos acumulados</p></div></header>
        <div className="tier-config">
          {DB.TIERS.map((t) => (
            <div key={t.key} className="tier-config-row" style={{ "--c": t.color }}>
              <TierBadge tier={t} />
              <span className="tier-range">{DB.formatNum(t.min)}{t.max === Infinity ? "+ pts" : " – " + DB.formatNum(t.max) + " pts"}</span>
            </div>
          ))}
        </div>
      </section>

      <div className="config-actions">
        <Button variant="ghost" onClick={restaurarExemplo} disabled={resetting}>
          {resetting ? "Restaurando…" : "Restaurar exemplo"}
        </Button>
        <Button icon="check" onClick={salvar} disabled={saving}>
          {saving ? "Salvando…" : "Salvar configurações"}
        </Button>
      </div>
    </div>
  );
}

window.Configuracoes = Configuracoes;