// capa.jsx — CAPA(시정 및 예방조치): 가상 심사 지적사항을 개선 항목으로 추적

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

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

const Capa = ({ go }) => {
  const [res, setRes] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [done, setDone] = React.useState({}); // 로컬 조치 완료 표시
  const [noTrack, setNoTrack] = React.useState(false);

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

  const items = res ? res.findings : [];
  const openCount = items.filter((f) => !done[f.id]).length;

  if (noTrack) {
    return (
      <div className="page" style={{ maxWidth: 720, margin: '0 auto' }}>
        <div className="card card--pad" style={{ textAlign: 'center', padding: 44 }}>
          <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--navy)' }}>아직 트랙이 없습니다</div>
          <div className="muted" style={{ marginTop: 8, fontSize: 13 }}>
            CAPA는 가상 심사 지적사항에서 만들어집니다. 먼저 '시작하기'에서 품목을 입력해 문서를 생성하세요.
          </div>
          <div style={{ marginTop: 18 }}><Button variant="primary" onClick={() => go('intake')}>시작하기 →</Button></div>
        </div>
      </div>
    );
  }

  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">CAPA</Pill>
            <Pill>시정 및 예방조치</Pill>
          </div>
          <div className="page__title">개선 항목 추적</div>
          <div className="page__sub">
            가상 심사에서 발견된 지적사항을 시정·예방조치(CAPA) 항목으로 추적합니다.
            각 항목의 권고를 조치하고 완료 표시하세요. (절차: SP-OP-M21 시정 및 예방조치)
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 32, fontWeight: 800, color: openCount ? 'var(--coral)' : 'var(--green,#2e7d52)' }}>{openCount}</div>
          <div className="muted" style={{ fontSize: 12 }}>미조치 항목</div>
          <Button variant="ghost" size="sm" onClick={load} disabled={busy} style={{ marginTop: 6 }}>{busy ? '점검 중…' : '↻ 다시 점검'}</Button>
        </div>
      </div>

      {busy && <div className="card card--pad muted" style={{ textAlign: 'center', padding: 36 }}>심사 지적사항을 불러오는 중…</div>}

      {res && items.length === 0 && (
        <div className="card card--pad" style={{ textAlign: 'center', padding: 36 }}>
          <div style={{ fontSize: 32, marginBottom: 8 }}>✅</div>
          <div style={{ fontWeight: 700, color: 'var(--navy)' }}>조치할 CAPA 항목이 없습니다</div>
          <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>가상 심사에서 지적사항이 발견되지 않았습니다.</div>
        </div>
      )}

      {res && items.map((f) => {
        const isDone = !!done[f.id];
        return (
          <div key={f.id} className="card card--pad" style={{ marginBottom: 10, opacity: isDone ? 0.55 : 1, borderLeft: `3px solid ${SEVC[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: SEVC[f.severity].bg, color: SEVC[f.severity].fg }}>{f.severity}</span>
              <span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>CAPA-{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, textDecoration: isDone ? 'line-through' : 'none' }}>{f.title}</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{f.detail}</div>
            <div className="row" style={{ marginTop: 8, gap: 10, alignItems: 'center' }}>
              <span style={{ fontSize: 12.5, color: 'var(--coral-2,#b94a2c)', flex: 1 }}>
                <Icon name="arrow_right" size={12} /> 조치: {f.recommendation}
              </span>
              <Button variant={isDone ? 'ghost' : 'soft'} size="sm" icon={isDone ? 'check' : ''}
                onClick={() => setDone((d) => ({ ...d, [f.id]: !d[f.id] }))}>
                {isDone ? '조치 완료됨' : '조치 완료 표시'}
              </Button>
            </div>
          </div>
        );
      })}

      <div className="muted" style={{ fontSize: 11.5, marginTop: 8, padding: '0 4px' }}>
        ※ 조치 완료 표시는 현재 세션 내 임시 표시입니다. 정식 CAPA 기록은 시정 및 예방조치 보고서(SP-OP-M21-F01)로 관리합니다.
      </div>
    </div>
  );
};

window.RAlly.Capa = Capa;