// ─── Wave A1a — GaokaoQjjBlock (强基计划 39-school national list) ──────────────
// Renders the full national list of 39 强基计划 pilot universities.
//
// DATA: /data/gaokao-qjj/_national-39.json
//   { sources[], note, schools:[{name, tags[], disciplines[]}] }
//
// The list is national (not province-gated) — these schools are options for
// any qualifying student regardless of province.
//
// PROVENANCE NOTE (宁缺勿错): this list is compiled from public policy knowledge,
// NOT live-scraped from official sites.  The block carries a visible disclaimer.
//
// data-testid: "qjj-block" / "qjj-school-card" (one per school)

const GaokaoQjjBlock = ({ lang }) => {
  const [schools, setSchools] = React.useState(null); // null = loading, [] = empty/error
  const [note, setNote] = React.useState('');
  // Collapsed by default — 39 cards ran ~6 screens tall and buried everything
  // below. All cards stay in the DOM (e2e counts unchanged); CSS clips height.
  const [expanded, setExpanded] = React.useState(false);

  React.useEffect(() => {
    fetch('/data/gaokao-qjj/_national-39.json')
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (data && Array.isArray(data.schools)) {
          setSchools(data.schools);
          setNote(data.note || '');
        } else {
          setSchools([]);
        }
      })
      .catch(() => setSchools([]));
  }, []);

  // Loading state — render nothing until data resolves to avoid layout flash
  if (schools === null) return null;
  // Empty / error state — silently hide
  if (schools.length === 0) return null;

  const isZh = !lang || lang === 'zh';

  const tagColor = { '985': '#fef3e2', '双一流': '#e8f4fd' };

  return (
    <section data-testid="qjj-block" style={{ margin: '32px 0' }}>
      {/* Header */}
      <div style={{ marginBottom: 20 }}>
        <div className="pb-eyebrow" style={{ marginBottom: 6 }}>
          {isZh ? '国家重点招生通道' : 'Elite National Admissions Track'}
        </div>
        <h3 style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: '0 0 6px' }}>
          {isZh ? '强基计划试点高校名单（全国39所）' : 'Qiangji Plan: 39 National Pilot Universities'}
        </h3>
        <p style={{ fontSize: 13, color: 'var(--pb-fg-muted)', margin: '0 0 4px', lineHeight: 1.6 }}>
          {isZh
            ? '强基计划招收基础学科拔尖学生，面向全国统一报考，分数折算后由各校单独考核录取。'
            : 'Qiangji Plan recruits top students in foundational disciplines. Admission is national with school-specific assessments.'}
        </p>
      </div>

      {/* School grid — wrapped in a height-clipped shell until expanded */}
      <div className={expanded ? 'pb-gk-collapse open' : 'pb-gk-collapse'} style={{ '--pb-gk-collapse-h': '320px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 12 }}>
        {schools.map((school) => (
          <div
            key={school.name}
            data-testid="qjj-school-card"
            style={{
              background: 'var(--pb-surface)',
              border: '1px solid var(--pb-border)',
              borderRadius: 10,
              padding: '12px 16px',
            }}
          >
            <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 6 }}>{school.name}</div>

            {/* Tags: 985 / 双一流 */}
            {Array.isArray(school.tags) && school.tags.length > 0 && (
              <div style={{ marginBottom: 6 }}>
                {school.tags.map((tag) => (
                  <span
                    key={tag}
                    style={{
                      display: 'inline-block',
                      fontSize: 10,
                      fontWeight: 600,
                      padding: '1px 7px',
                      borderRadius: 20,
                      marginRight: 4,
                      background: tagColor[tag] || 'var(--pb-surface-2)',
                      color: 'var(--pb-fg)',
                    }}
                  >
                    {tag}
                  </span>
                ))}
              </div>
            )}

            {/* Disciplines */}
            {Array.isArray(school.disciplines) && school.disciplines.length > 0 && (
              <div style={{ fontSize: 11, color: 'var(--pb-fg-muted)', lineHeight: 1.6 }}>
                <span style={{ marginRight: 4 }}>{isZh ? '开设方向：' : 'Disciplines: '}</span>
                {school.disciplines.join('、')}
              </div>
            )}
          </div>
        ))}
      </div>
      </div>
      <button
        type="button"
        className="pb-gk-collapse-toggle"
        data-testid="qjj-collapse-toggle"
        onClick={() => setExpanded(!expanded)}
      >
        {expanded
          ? (isZh ? '收起名单 ▴' : 'Collapse list ▴')
          : (isZh ? `展开全部 ${schools.length} 所 ▾` : `Show all ${schools.length} schools ▾`)}
      </button>

      {/* Honest provenance label — REQUIRED: data is policy-compiled, not live-verified */}
      <p
        data-testid="qjj-provenance-label"
        style={{
          fontSize: 11,
          color: 'var(--pb-fg-muted)',
          marginTop: 16,
          padding: '8px 12px',
          background: 'rgba(217,164,6,0.08)',
          borderLeft: '3px solid rgba(217,164,6,0.5)',
          borderRadius: '0 6px 6px 0',
          lineHeight: 1.6,
        }}
      >
        {isZh
          ? '强基试点高校名单依据公开政策整理，具体招生专业/计划以各校官方简章为准。本页数据仅供参考，不构成报考建议。'
          : 'This list is compiled from public policy knowledge, not live-verified from official sources. Always check each school\'s official enrollment guidelines (招生简章) for the authoritative information.'}
      </p>
    </section>
  );
};