// Confronto do mês: lançamentos manuais × extrato dos cartões (origem "fatura").
// 1) aponta possíveis duplicidades; 2) pede confirmação do total por categoria.
const { useState: useStateCf } = React;

function cfNorm(s) {
  return (s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9 ]/g, " ").replace(/\s+/g, " ").trim();
}
function cfSimilar(a, b) {
  const ta = cfNorm(a).split(" ").filter(w => w.length >= 4);
  const tb = cfNorm(b).split(" ").filter(w => w.length >= 4);
  return ta.some(w => tb.some(x => x === w || x.includes(w) || w.includes(x)));
}
function cfDia(date) { return (date || "").slice(8, 10) + "/" + (date || "").slice(5, 7); }

function ConfrontoCard({ despesas, monthKey, monthLabel, confronto, onConfronto, onDelete }) {
  const fmt = window.fmtBRLString;
  const data = confronto[monthKey] || {};
  const ignoradas = data.ignoradas || {};
  const confirmadas = data.confirmadas || {};
  const [aberto, setAberto] = useStateCf(true);

  const fatura = despesas.filter(t => t.origem === "fatura");
  const manuais = despesas.filter(t => t.origem !== "fatura" && !t.seguroId);
  if (fatura.length === 0) return null;

  // --- Duplicidades: manual × fatura com mesmo valor, ou descrição parecida e valor próximo ---
  const pares = [];
  const usadasFat = new Set();
  for (const m of manuais) {
    for (const f of fatura) {
      if (usadasFat.has(f.id)) continue;
      const key = m.id + "|" + f.id;
      if (ignoradas[key]) continue;
      const dv = Math.abs(Number(m.amount) - Number(f.amount));
      const mesmoValor = dv < 0.01;
      const parecida = cfSimilar(m.description, f.description) && dv <= Number(f.amount) * 0.15;
      if (mesmoValor || parecida) { pares.push({ key, m, f, mesmoValor }); usadasFat.add(f.id); break; }
    }
  }

  function salvar(patch) { onConfronto(monthKey, { ...data, ...patch }); }
  function ignorarPar(key) { salvar({ ignoradas: { ...ignoradas, [key]: true } }); }

  // --- Confirmação por categoria (categorias que têm linhas do extrato) ---
  const cats = [...new Set(fatura.map(t => t.category))].sort();
  const porCat = cats.map(cat => {
    const doCat = despesas.filter(t => t.category === cat);
    const total = doCat.reduce((s, t) => s + Number(t.amount || 0), 0);
    const conf = confirmadas[cat];
    const mudou = conf != null && Math.abs(conf - total) > 0.01;
    return { cat, total, nManual: doCat.filter(t => t.origem !== "fatura").length, nFat: doCat.filter(t => t.origem === "fatura").length, conferida: conf != null && !mudou, confAnterior: conf, mudou };
  });
  const pendentes = porCat.filter(c => !c.conferida).length;

  function conferir(cat, total) { salvar({ confirmadas: { ...confirmadas, [cat]: total } }); }
  function rever(cat) { const c = { ...confirmadas }; delete c[cat]; salvar({ confirmadas: c }); }

  const tudoOk = pares.length === 0 && pendentes === 0;

  return (
    <div className={`card ck-cf ${tudoOk ? "cf-ok" : ""}`} data-screen-label="Confronto manual × fatura">
      <button className="ck-cf-head" onClick={() => setAberto(a => !a)}>
        <div className="ck-cf-title">
          <h3>🔍 Confronto: lançamentos manuais × extrato dos cartões</h3>
          <span className="page-hint">{fatura.length} do extrato · {manuais.length} manuais em {monthLabel}</span>
        </div>
        <div className="ck-cf-badges">
          {pares.length > 0 && <span className="cf-badge warn">⚠️ {pares.length} possível{pares.length > 1 ? "is" : ""} duplicidade{pares.length > 1 ? "s" : ""}</span>}
          {pendentes > 0 && <span className="cf-badge ask">{pendentes} categoria{pendentes > 1 ? "s" : ""} a conferir</span>}
          {tudoOk && <span className="cf-badge ok">✅ Tudo conferido, sem duplicidade</span>}
          <svg className={aberto ? "up" : ""} width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
        </div>
      </button>

      {aberto && (
        <div className="ck-cf-body">
          {pares.length > 0 && (
            <div className="cf-sec">
              <h4>⚠️ Possíveis duplicidades</h4>
              <p className="cf-hint">Estes lançamentos manuais parecem já ter vindo no extrato do cartão. Mantenha só um para não contar duas vezes.</p>
              {pares.map(({ key, m, f, mesmoValor }) => (
                <div className="cf-par" key={key}>
                  <div className="cf-par-txs">
                    <div className="cf-tx">
                      <span className="cf-tag manual">✋ manual</span>
                      <span className="cf-desc">{m.description}</span>
                      <span className="cf-meta">{cfDia(m.date)} · {m.account}</span>
                      <strong>{fmt(m.amount)}</strong>
                    </div>
                    <div className="cf-tx">
                      <span className="cf-tag fat">💳 extrato</span>
                      <span className="cf-desc">{f.description}</span>
                      <span className="cf-meta">{cfDia(f.date)} · {f.account}</span>
                      <strong>{fmt(f.amount)}</strong>
                    </div>
                  </div>
                  <div className="cf-par-actions">
                    <span className="cf-motivo">{mesmoValor ? "mesmo valor" : "descrição parecida"}</span>
                    <button className="btn-ghost sm" onClick={() => onDelete(m.id)}>Excluir manual</button>
                    <button className="btn-ghost sm" onClick={() => onDelete(f.id)}>Excluir do extrato</button>
                    <button className="btn-ghost sm keep" onClick={() => ignorarPar(key)}>Não é duplicidade</button>
                  </div>
                </div>
              ))}
            </div>
          )}

          <div className="cf-sec">
            <h4>✔️ Conferência por categoria</h4>
            <p className="cf-hint">Confirme se o total do mês de cada categoria bate com o que você esperava.</p>
            {porCat.map(c => (
              <div className={`cf-cat ${c.conferida ? "done" : ""}`} key={c.cat}>
                {c.conferida ? (
                  <>
                    <span className="cf-cat-q">✅ {c.cat} conferido em <strong>{fmt(c.total)}</strong></span>
                    <button className="btn-ghost sm" onClick={() => rever(c.cat)}>Rever</button>
                  </>
                ) : (
                  <>
                    <span className="cf-cat-q">
                      O mês de <strong>{c.cat}</strong> confere no valor de <strong>{fmt(c.total)}</strong>?
                      <span className="cf-meta"> {c.nFat} do extrato{c.nManual > 0 ? ` + ${c.nManual} manuais` : ""}{c.mudou ? ` · conferido antes em ${fmt(c.confAnterior)}, o valor mudou` : ""}</span>
                    </span>
                    <button className="btn-green sm" onClick={() => conferir(c.cat, c.total)}>✓ Confere</button>
                  </>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ConfrontoCard });