import { useEffect, useState } from 'react'
import { useAuth, jget } from './auth'
import LoginGate from './AdminLogin'
import { won, box, cell, th } from './util'

/** 통계 현황 보고서 — 전체 거래 집계(요약·대사·금액·처리시간·기관별). ADMIN 전용. */
export default function Report() {
  return <LoginGate><ReportInner /></LoginGate>
}

const n = (v: unknown) => Number(v ?? 0)
const num = (v: unknown) => n(v).toLocaleString('ko-KR')
const ms = (v: unknown) => `${num(v)} ms`

function ReportInner() {
  const { token } = useAuth()
  const [rep, setRep] = useState<any>(null)
  const [err, setErr] = useState<string | null>(null)
  const [at, setAt] = useState<number>(0)

  const load = async () => {
    setErr(null)
    try { setRep(await jget('/admin/report')); setAt(Date.now()) }
    catch (e: any) { setErr('보고서 로드 실패: ' + e.message) }
  }
  useEffect(() => { if (token) load() }, [token])

  if (err) return <p style={{ color: '#c00', marginTop: 16 }}>{err}</p>
  if (!rep) return <p style={{ color: '#888', marginTop: 16 }}>보고서 생성 중…</p>

  const t = rep.totals ?? {}
  const rec = rep.reconciliation ?? {}
  const amt = rep.amount ?? {}
  const lat = rep.latency ?? {}
  const tp = rep.throughput ?? {}
  const cnt = (st: string) => n((t.byStatus ?? []).find((b: any) => b.status === st)?.cnt)
  const total = n(t.transfers)
  const accc = cnt('ACCC'), rjct = cnt('RJCT')
  const pending = Math.max(0, total - accc - rjct)
  const rate = total > 0 ? Math.round((accc / total) * 1000) / 10 : 0

  const card: React.CSSProperties = { flex: '1 1 150px', border: '1px solid #e2e2e2', borderRadius: 8, padding: '12px 16px', background: '#fff' }
  const big: React.CSSProperties = { fontSize: 24, fontWeight: 700, fontFamily: 'monospace' }
  const lbl: React.CSSProperties = { color: '#777', fontSize: 13, marginBottom: 4 }

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12 }}>
        <h2 style={{ margin: 0 }}>📈 통계 현황 보고서</h2>
        <button onClick={load} style={{ padding: '6px 14px', border: '1px solid #ccc', borderRadius: 6, cursor: 'pointer', background: '#fff' }}>새로고침</button>
        {at > 0 && <span style={{ color: '#999', fontSize: 12 }}>생성 {new Date(at).toLocaleString('ko-KR')}</span>}
      </div>

      {/* 요약 카드 */}
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 16 }}>
        <div style={card}><div style={lbl}>총 거래</div><div style={big}>{num(total)}</div></div>
        <div style={card}><div style={lbl}>완결 (ACCC)</div><div style={{ ...big, color: '#1a7f37' }}>{num(accc)}</div></div>
        <div style={card}><div style={lbl}>반려 (RJCT)</div><div style={{ ...big, color: '#c00' }}>{num(rjct)}</div></div>
        <div style={card}><div style={lbl}>미결(대기)</div><div style={{ ...big, color: '#8a6d00' }}>{num(pending)}</div></div>
        <div style={card}><div style={lbl}>완결률</div><div style={big}>{rate}%</div></div>
      </div>

      {/* 대사(정합성) */}
      <section style={{ ...box, background: '#f7fbff' }}>
        <h3 style={{ marginTop: 0 }}>🔗 대사(정합성)</h3>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center' }}>
          <div>원장(transfer) <b style={{ fontFamily: 'monospace' }}>{num(rec.transferCount)}</b></div>
          <div>선저널(journal) <b style={{ fontFamily: 'monospace' }}>{num(rec.journalCount)}</b></div>
          <div>조회사본(view) <b style={{ fontFamily: 'monospace' }}>{num(rec.viewCount)}</b></div>
          <div>{rec.consistent ? <span style={{ color: '#1a7f37', fontWeight: 600 }}>✓ 계층 일치</span> : <span style={{ color: '#c00', fontWeight: 600 }}>⚠ 불일치</span>}</div>
          <div style={{ marginLeft: 'auto' }}>총액 <b style={{ fontFamily: 'monospace' }}>{won(n(rec.totalBalance))}</b> {rec.balancePreserved ? <span style={{ color: '#1a7f37' }}>✓ 보존</span> : <span style={{ color: '#c00' }}>⚠ 확인</span>}</div>
        </div>
      </section>

      {/* 금액 통계 */}
      <section style={box}>
        <h3 style={{ marginTop: 0 }}>💰 금액 통계 <span style={{ fontSize: 12, color: '#888' }}>(완결 ACCC {num(amt.count)}건 기준)</span></h3>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <div>합계 <b style={{ fontFamily: 'monospace' }}>{won(n(amt.sum))}</b></div>
          <div>평균 <b style={{ fontFamily: 'monospace' }}>{won(n(amt.avg))}</b></div>
          <div>최소 <b style={{ fontFamily: 'monospace' }}>{won(n(amt.min))}</b></div>
          <div>최대 <b style={{ fontFamily: 'monospace' }}>{won(n(amt.max))}</b></div>
        </div>
      </section>

      {/* 처리시간(지연) */}
      <section style={box}>
        <h3 style={{ marginTop: 0 }}>⏱️ 처리시간 (지연) <span style={{ fontSize: 12, color: '#888' }}>(완결 {num(lat.count)}건 · 단일 파티션 저널 = 성능 급소)</span></h3>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', marginBottom: 12 }}>
          <div>접수→완결 평균 <b style={{ fontFamily: 'monospace' }}>{ms(lat.e2e_avg)}</b></div>
          <div>p50 <b style={{ fontFamily: 'monospace' }}>{ms(lat.e2e_p50)}</b></div>
          <div>p95 <b style={{ fontFamily: 'monospace' }}>{ms(lat.e2e_p95)}</b></div>
          <div>최대 <b style={{ fontFamily: 'monospace' }}>{ms(lat.e2e_max)}</b></div>
        </div>
        <table style={{ borderCollapse: 'collapse', width: '100%' }}>
          <thead><tr><th style={th}>단계</th><th style={{ ...th, textAlign: 'right' }}>평균 지연</th></tr></thead>
          <tbody>
            {[
              ['접수 → 순번 (Sequencer)', lat.recv_to_actc],
              ['순번 → 기록 (Dior)', lat.actc_to_pdng],
              ['기록 → 정산 (Hermes)', lat.pdng_to_acsp],
              ['정산 → 완결 (Prada)', lat.acsp_to_accc],
            ].map(([k, v]) => (
              <tr key={k as string}><td style={cell}>{k}</td><td style={{ ...cell, textAlign: 'right', fontFamily: 'monospace' }}>{ms(v)}</td></tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* 처리량(TPS) */}
      <section style={box}>
        <h3 style={{ marginTop: 0 }}>🚀 처리량 (TPS) <span style={{ fontSize: 12, color: '#888' }}>(초당 건수 관측치 · 테스트 드라이버 부하 기준, 시스템 한계 아님)</span></h3>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ ...card, background: '#f7fbff' }}><div style={lbl}>완결 최대 TPS</div><div style={{ ...big, color: '#1a7f37' }}>{num(tp.settled_peak)}<span style={{ fontSize: 13, color: '#777' }}> /s</span></div></div>
          <div style={card}><div style={lbl}>완결 평균 TPS <span style={{ fontSize: 11 }}>(활성구간)</span></div><div style={big}>{num(tp.settled_avg)}<span style={{ fontSize: 13, color: '#777' }}> /s</span></div></div>
          <div style={card}><div style={lbl}>접수 최대 TPS</div><div style={big}>{num(tp.received_peak)}<span style={{ fontSize: 13, color: '#777' }}> /s</span></div></div>
          <div style={card}><div style={lbl}>활성 구간</div><div style={big}>{num(tp.active_secs)}<span style={{ fontSize: 13, color: '#777' }}> s</span></div></div>
        </div>
        <p style={{ color: '#888', fontSize: 12, margin: '10px 0 0' }}>※ 접수·완결 최대 TPS가 비슷하면 파이프라인이 부하를 따라온 것(=드라이버 한계). 진짜 최대 용량은 k6 부하시험으로 측정.</p>
      </section>

      {/* 기관별 */}
      <section style={box}>
        <h3 style={{ marginTop: 0 }}>🏛 기관별 송·수신 <span style={{ fontSize: 12, color: '#888' }}>(완결 ACCC 기준)</span></h3>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ borderCollapse: 'collapse', width: '100%' }}>
            <thead><tr>
              <th style={th}>코드</th><th style={th}>기관</th><th style={{ ...th, textAlign: 'right' }}>현재잔액</th>
              <th style={{ ...th, textAlign: 'right' }}>송신 건</th><th style={{ ...th, textAlign: 'right' }}>송신 금액</th>
              <th style={{ ...th, textAlign: 'right' }}>수신 건</th><th style={{ ...th, textAlign: 'right' }}>수신 금액</th>
              <th style={{ ...th, textAlign: 'right' }}>순증감</th>
            </tr></thead>
            <tbody>
              {(rep.byInstitution ?? []).map((r: any) => (
                <tr key={r.code}>
                  <td style={{ ...cell, fontFamily: 'monospace' }}>{r.code}</td>
                  <td style={cell}>{r.name}</td>
                  <td style={{ ...cell, textAlign: 'right', fontFamily: 'monospace' }}>{won(n(r.balance))}</td>
                  <td style={{ ...cell, textAlign: 'right', fontFamily: 'monospace' }}>{num(r.sent_cnt)}</td>
                  <td style={{ ...cell, textAlign: 'right', fontFamily: 'monospace' }}>{won(n(r.sent_amt))}</td>
                  <td style={{ ...cell, textAlign: 'right', fontFamily: 'monospace' }}>{num(r.recv_cnt)}</td>
                  <td style={{ ...cell, textAlign: 'right', fontFamily: 'monospace' }}>{won(n(r.recv_amt))}</td>
                  <td style={{ ...cell, textAlign: 'right', fontFamily: 'monospace', color: n(r.net) >= 0 ? '#1a7f37' : '#c00' }}>{won(n(r.net))}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  )
}
