/* ── FINDINGS VIEW ─────────────────────────────────────────────────────── */

function FindingsView({ month, allMonths, onSelectCarteira }) {
  const [tab, setTab] = React.useState('current');

  if (!month) return <div className="empty-state"><p>Nenhum mês carregado.</p></div>;

  const cList = Object.values(month.carteiras);
  const erros   = cList.filter(c => c.erros   !== '-');
  const alertas = cList.filter(c => c.alertas !== '-');
  const clean   = cList.filter(c => c.erros === '-' && c.alertas === '-');

  // Build recidiva map (carteiras that had CORRIGIR in previous months)
  const prevMonths = allMonths.filter(m => m.key < month.key).sort((a,b) => b.key.localeCompare(a.key)).slice(0, 6);
  const recidiva = {};
  for (const c of cList) {
    const hist = prevMonths.map(m => m.carteiras[c.nome]?.status).filter(Boolean);
    const count = hist.filter(s => s === 'CORRIGIR' || s === 'LIBERAR COM ALERTA').length;
    if (count > 0) recidiva[c.nome] = { count, hist };
  }

  // Anomalias: LIBERAR but varPct extreme (>10% or <-10%)
  const anomalias = cList.filter(c => c.status === 'LIBERAR' && Math.abs(c.varPct || 0) > 0.10);

  const TabBtn = ({ id, label, count, color }) => (
    <button onClick={() => setTab(id)} style={{
      padding: '8px 16px', fontSize: '0.72rem', fontWeight: 500,
      borderBottom: tab === id ? '2px solid var(--navy)' : '2px solid transparent',
      color: tab === id ? 'var(--navy)' : 'var(--muted)',
      background: 'transparent', display: 'flex', alignItems: 'center', gap: 6,
    }}>
      {label}
      {count > 0 && <span style={{ background: color || 'var(--rule)', color: tab === id ? 'var(--body)' : 'var(--muted)', fontSize: '0.65rem', padding: '1px 6px', borderRadius: 10, fontWeight: 600 }}>{count}</span>}
    </button>
  );

  return (
    <div>
      <div className="kpi-strip" style={{ marginBottom: 16 }}>
        <div className="kpi-tile">
          <div className="kpi-tile-label">Erros Bloqueantes</div>
          <div className="kpi-tile-value red">{erros.length}</div>
          <div className="kpi-tile-sub">impede liberação</div>
        </div>
        <div className="kpi-tile">
          <div className="kpi-tile-label">Alertas</div>
          <div className="kpi-tile-value amber">{alertas.length}</div>
          <div className="kpi-tile-sub">monitorar</div>
        </div>
        <div className="kpi-tile">
          <div className="kpi-tile-label">Recidiva</div>
          <div className="kpi-tile-value amber">{Object.keys(recidiva).length}</div>
          <div className="kpi-tile-sub">histórico irregular</div>
        </div>
        <div className="kpi-tile">
          <div className="kpi-tile-label">Anomalias var.</div>
          <div className="kpi-tile-value amber">{anomalias.length}</div>
          <div className="kpi-tile-sub">|var%| &gt; 10% mesmo LIBERAR</div>
        </div>
        <div className="kpi-tile">
          <div className="kpi-tile-label">Limpas</div>
          <div className="kpi-tile-value green">{clean.length}</div>
          <div className="kpi-tile-sub">{Math.round(100*clean.length/cList.length)}% sem ressalvas</div>
        </div>
      </div>

      <div className="card">
        <div style={{ display: 'flex', borderBottom: '1px solid var(--rule)', padding: '0 12px', background: 'var(--white)' }}>
          <TabBtn id="current"   label="Mês atual"    count={erros.length + alertas.length} color="var(--red-bg)" />
          <TabBtn id="recidiva"  label="Recidiva"     count={Object.keys(recidiva).length}  color="var(--amber-bg)" />
          <TabBtn id="anomalias" label="Anomalias"    count={anomalias.length}              color="var(--amber-bg)" />
          <TabBtn id="clean"     label="Sem ressalvas" count={clean.length}                  color="var(--green-bg)" />
        </div>

        {/* Current findings */}
        {tab === 'current' && (
          <div>
            {erros.length === 0 && alertas.length === 0 && (
              <div style={{ padding: '32px 20px', display: 'flex', gap: 10, alignItems: 'center', color: 'var(--green)' }}>
                <Icon.check /><span style={{ fontSize: '0.85rem' }}>Nenhum erro ou alerta neste mês.</span>
              </div>
            )}
            {erros.map((c, i) => (
              <div className="finding-item" key={i}>
                <div className="finding-header">
                  <span className="badge badge-corrigir">Erro · bloqueia</span>
                  <span className="finding-nome" style={{ cursor: 'pointer' }} onClick={() => onSelectCarteira(c.nome)}>{c.nome}</span>
                </div>
                {c.erros.split(' | ').map((e, j) => <div className="finding-text error" key={j}>· {e}</div>)}
              </div>
            ))}
            {alertas.map((c, i) => (
              <div className="finding-item" key={i}>
                <div className="finding-header">
                  <span className="badge badge-alerta">Alerta</span>
                  <span className="finding-nome" style={{ cursor: 'pointer' }} onClick={() => onSelectCarteira(c.nome)}>{c.nome}</span>
                </div>
                {c.alertas.split(' | ').map((a, j) => <div className="finding-text warn" key={j}>· {a}</div>)}
              </div>
            ))}
          </div>
        )}

        {/* Recidiva */}
        {tab === 'recidiva' && (
          <div>
            {Object.keys(recidiva).length === 0 ? (
              <div style={{ padding: 32, textAlign: 'center', color: 'var(--muted)', fontSize: '0.85rem' }}>Nenhuma recidiva detectada nos últimos {prevMonths.length} meses.</div>
            ) : (
              Object.entries(recidiva).map(([nome, r], i) => {
                const c = month.carteiras[nome];
                return (
                  <div className="finding-item" key={i}>
                    <div className="finding-header">
                      <span className="badge badge-alerta">Recidiva · {r.count}×</span>
                      <span className="finding-nome" style={{ cursor: 'pointer' }} onClick={() => onSelectCarteira(nome)}>{nome}</span>
                      <span className={`badge ${statusBadge(c?.status)}`} style={{ marginLeft: 'auto' }}>{c?.status}</span>
                    </div>
                    <div className="finding-text" style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 4 }}>
                      {r.hist.map((s, j) => (
                        <span key={j} className={`badge ${statusBadge(s)}`} style={{ fontSize: '0.55rem' }}>
                          {prevMonths[j]?.label?.split(' ')[0]} {s}
                        </span>
                      ))}
                    </div>
                  </div>
                );
              })
            )}
          </div>
        )}

        {/* Anomalias */}
        {tab === 'anomalias' && (
          <div>
            {anomalias.length === 0 ? (
              <div style={{ padding: 32, textAlign: 'center', color: 'var(--muted)', fontSize: '0.85rem' }}>Nenhuma anomalia de variação detectada.</div>
            ) : (
              anomalias.sort((a,b) => Math.abs(b.varPct) - Math.abs(a.varPct)).map((c, i) => (
                <div className="finding-item" key={i}>
                  <div className="finding-header">
                    <span className="badge" style={{ background: 'var(--amber-bg)', color: 'var(--amber)' }}>Var. {fmtPct(c.varPct)}</span>
                    <span className="finding-nome" style={{ cursor: 'pointer' }} onClick={() => onSelectCarteira(c.nome)}>{c.nome}</span>
                    <span className="badge badge-liberar" style={{ marginLeft: 'auto' }}>LIBERAR</span>
                  </div>
                  <div className="finding-text" style={{ marginTop: 4 }}>
                    PL {fmtBRL(c.plAnterior, true)} → {fmtBRL(c.plAtual, true)} · Rent. {fmtPct(c.rentMes)} · {Math.abs(c.varPct) > 0.1 && Math.abs(c.rentMes) < 0.03 ? 'Provável aporte/resgate' : 'Variação expressiva'}
                  </div>
                </div>
              ))
            )}
          </div>
        )}

        {/* Clean */}
        {tab === 'clean' && (
          <div>
            {clean.map((c, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 18px', borderBottom: '1px solid var(--rule)' }}>
                <Icon.check />
                <span style={{ fontWeight: 500, fontSize: '0.82rem', cursor: 'pointer', color: 'var(--heading)' }} onClick={() => onSelectCarteira(c.nome)}>{c.nome}</span>
                <span style={{ fontSize: '0.72rem', color: 'var(--muted)', marginLeft: 'auto' }}>{fmtBRL(c.plAtual, true)} · Rent. {fmtPct(c.rentMes)}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { FindingsView });