// catalog.jsx — 템플릿: RAlly가 실제 심사 수준으로 생성 가능한 문서종·대장 카탈로그

const { Pill, Icon } = window.RAlly;

const Catalog = ({ go }) => {
  const [cat, setCat] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/catalog').then((r) => r.json()).then((d) => { if (d.ok) setCat(d); }).catch(() => {});
  }, []);

  const Section = ({ title, items, variant }) => (
    <div className="card card--pad" style={{ marginBottom: 16 }}>
      <div className="row" style={{ gap: 8, marginBottom: 12 }}>
        <div style={{ fontWeight: 700, color: 'var(--navy)' }}>{title}</div>
        <Pill variant={variant}>{items.length}종</Pill>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 8 }}>
        {items.map((it) => (
          <div key={it.code} className="sec" style={{ alignItems: 'center' }}>
            <div className="sec__b">
              <div className="sec__t" style={{ fontSize: 13 }}>{it.title}</div>
              <div className="sec__c mono" style={{ fontSize: 11 }}>{it.code}</div>
            </div>
            <Pill variant="coral" style={{ fontSize: 10 }}>실제수준</Pill>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <div className="page" style={{ maxWidth: 980, margin: '0 auto' }}>
      <div className="page__head">
        <div>
          <div className="row" style={{ gap: 8, marginBottom: 6 }}>
            <Pill variant="coral">템플릿</Pill>
            <Pill>실제 심사 수준</Pill>
          </div>
          <div className="page__title">생성 가능한 문서 카탈로그</div>
          <div className="page__sub">
            품목 정보만 입력하면 아래 문서들이 실제 GMP 심사 통과 문서 수준으로 자동 작성됩니다.
            증거값(시험결과·서명 등)은 [입력 필요]로 표시되어 직접 채웁니다.
          </div>
        </div>
        {cat && (
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 32, fontWeight: 800, color: 'var(--coral)' }}>{cat.counts.total}</div>
            <div className="muted" style={{ fontSize: 12 }}>문서종 + 대장</div>
          </div>
        )}
      </div>

      {!cat && <div className="muted" style={{ padding: 20 }}>불러오는 중…</div>}
      {cat && (
        <div>
          <Section title="산출물 (DHF)" items={cat.deliverables} variant="navy" />
          <Section title="품질절차서 · 매뉴얼" items={cat.procedures} variant="navy" />
          <Section title="관리대장 (.xlsx)" items={cat.ledgers} variant="default" />
          <div className="row" style={{ gap: 8, marginTop: 8 }}>
            <button className="btn btn--primary" onClick={() => go('intake')}>품목 정보로 생성 시작 →</button>
          </div>
        </div>
      )}
    </div>
  );
};

window.RAlly.Catalog = Catalog;