// audit.jsx — AI 가상 심사관: 트랙 문서를 심사관 관점으로 검토 → 지적사항 리포트

const { Icon, Pill, Button } = window.RAlly;

const SEV = {
  Critical: { label: 'Critical', bg: '#f3ded7', fg: '#b94a2c' },
  Major: { label: 'Major', bg: '#fbf0d8', fg: '#9a6a12' },
  Minor: { label: 'Minor', bg: '#e7e3da', fg: '#5a6068' },
};

const Audit = ({ go }) => {
  const [res, setRes] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [useLlm, setUseLlm] = React.useState(false);

  const runAudit = () => {
    setBusy(true); setRes(null);
    window.RAlly.resolveTrackId().then((tid) => {
      if (!tid) { setBusy(false); return; }
      fetch('/api/track/' + tid + '/audit', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ use_llm: useLlm }),
      }).then((r) => r.json()).then((d) => { setRes(d); setBusy(false); }).catch(() => setBusy(false));
    });
  };

  const c = res ? res.counts : null;
  return (
    <div className="page" style={{ maxWidth: 920, margin: '0 auto' }}>
      <div className="page__head">
        <div>
          <div className="row" style={{ gap: 8, marginBottom: 6 }}>
            <Pill variant="coral">AI 가상 심사관</Pill>
            <Pill>식약처 심사 관점</Pill>
          </div>
          <div className="page__title">가상 심사 — 제출 전 지적사항 점검</div>
          <div className="page__sub">
            생성된 문서를 심사관 관점에서 검토해 요건 누락·문서 간 불일치·미완 증거를 미리 찾아냅니다.
            <b> 구조·완전성 기계 검토이며 실제 심사 통과를 보장하지 않습니다 — RA 검토가 필요합니다.</b>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <label className="row" style={{ gap: 6, fontSize: 12.5, justifyContent: 'flex-end', marginBottom: 8, cursor: 'pointer' }}>
            <input type="checkbox" checked={useLlm} onChange={(e) => setUseLlm(e.target.checked)} />
            🤖 LLM 정밀 확인(오탐 제거·느림)
          </label>
          <Button variant="primary" onClick={runAudit} disabled={busy}>
            {busy ? (useLlm ? 'LLM 정밀 심사 중…' : '심사 중…') : '가상 심사 시작 →'}
          </Button>
        </div>
      </div>

      {busy && (
        <div className="card card--pad" style={{ textAlign: 'center', padding: 40 }}>
          <div className="muted">{useLlm ? '문서를 검토하고 요건 반영을 LLM으로 정밀 확인하는 중… (수십 초~)' : '문서를 검토하는 중…'}</div>
        </div>
      )}

      {res && (
        <div>
          {/* 종합 판정 */}
          <div className="card card--pad" style={{ marginBottom: 16 }}>
            <div className="row" style={{ gap: 14, alignItems: 'center' }}>
              <div style={{
                fontSize: 22, fontWeight: 800,
                color: res.verdict === '지적사항 없음' ? 'var(--green, #2e7d52)' : 'var(--coral)',
              }}>{res.verdict}</div>
              <div className="row" style={{ gap: 8 }}>
                {['Critical', 'Major', 'Minor'].map((s) => (
                  <span key={s} style={{
                    fontSize: 12.5, fontWeight: 700, padding: '4px 12px', borderRadius: 999,
                    background: SEV[s].bg, color: SEV[s].fg,
                  }}>{SEV[s].label} {c[s]}</span>
                ))}
              </div>
              {res.llm_used && <Pill variant="coral" style={{ marginLeft: 'auto' }}>🤖 LLM 정밀</Pill>}
            </div>
            <div className="muted" style={{ marginTop: 10, fontSize: 13 }}>{res.summary}</div>
          </div>

          {/* 지적사항 목록 */}
          {res.findings.length === 0 && (
            <div className="card card--pad muted">지적사항이 없습니다.</div>
          )}
          {res.findings.map((f) => (
            <div key={f.id} className="card card--pad" style={{ marginBottom: 10, borderLeft: `3px solid ${SEV[f.severity].fg}` }}>
              <div className="row" style={{ gap: 8, marginBottom: 4, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 11.5, fontWeight: 700, padding: '2px 9px', borderRadius: 999, background: SEV[f.severity].bg, color: SEV[f.severity].fg }}>{f.severity}</span>
                <span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{f.id}</span>
                <Pill>{f.category}</Pill>
                <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>· {f.doc}</span>
                <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--ink-3)' }}>근거 {f.basis}</span>
              </div>
              <div style={{ fontWeight: 700, color: 'var(--navy)', fontSize: 14.5 }}>{f.title}</div>
              <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{f.detail}</div>
              {f.authority ? (
                <div style={{ fontSize: 12, marginTop: 6, padding: '5px 9px', background: 'var(--bg, #F6F4EF)', borderRadius: 6, color: 'var(--ink-2, #4a5562)' }}>
                  <b style={{ color: 'var(--navy)' }}>권위 근거</b> · {f.authority}
                </div>
              ) : null}
              <div style={{ fontSize: 12.5, marginTop: 6, color: 'var(--coral-2, #b94a2c)' }}>
                <Icon name="arrow_right" size={12} /> {f.recommendation}
              </div>
            </div>
          ))}
        </div>
      )}

      {!res && !busy && (
        <div className="card card--pad muted" style={{ textAlign: 'center', padding: 36 }}>
          위 <b>가상 심사 시작</b> 버튼을 눌러 현재 트랙의 문서를 심사관 관점으로 점검하세요.
        </div>
      )}
    </div>
  );
};

window.RAlly.Audit = Audit;