// ─── Wave 16-C — GaokaoEventsBlock ──────────────────────────────────────────
// "📅 招生宣讲会" chip → modal 显示宣讲会 / 校园开放日日历 list.
// Data loaded via SchoolEventsLoader (lib/school-events-loader.js).
// Follows the same chip+modal pattern as GaokaoFaqBlock.
//
// Rendered inside page-gaokao chips area (Wave 3 FAQ + 9-D 章程 + 13-B 艺考 + 14-C 模考 之后).

const GaokaoEventsBlock = ({ lang, province, year }) => {
  const [open, setOpen] = React.useState(false);
  const [events, setEvents] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [filter, setFilter] = React.useState('all'); // 'all' | 'upcoming' | 'recruitment_talk' | 'open_house' | 'major_intro'
  const [cityFilter, setCityFilter] = React.useState('all');

  const prov = province || 'HI';
  const yr = year || 2024;

  // i18n dict
  const fallbackZh = (window.I18N && window.I18N.zh && window.I18N.zh.gk && window.I18N.zh.gk.schoolEvents) || null;
  const dict = (window.I18N && window.I18N[lang] && window.I18N[lang].gk && window.I18N[lang].gk.schoolEvents) || fallbackZh || {
    chip: '招生宣讲会',
    title: '院校宣讲会 & 校园开放日',
    eyebrow: '招生活动日历',
    subtitle: '各院校在海南举办的招生宣讲会及校园开放日信息',
    close: '关闭',
    filterAll: '全部',
    filterUpcoming: '即将举行',
    filterTalk: '宣讲会',
    filterOpenHouse: '开放日',
    filterMajorIntro: '专业说明会',
    filterCity: '城市',
    filterAllCities: '全部城市',
    colDate: '日期',
    colSchool: '院校',
    colType: '类型',
    colCity: '城市',
    colAddress: '地址',
    colTopics: '主题',
    colSpeaker: '主讲',
    typeRecruitmentTalk: '招生宣讲',
    typeOpenHouse: '校园开放日',
    typeMajorIntro: '专业说明会',
    noData: '暂无宣讲会数据',
    noUpcoming: '近期暂无计划',
    sourceNote: '* 数据基于2024年招生活动，仅供参考，请以各院校官网通知为准',
    sampleBadge: '样例·待官方确认',
    loading: '加载中…',
  };

  // 诚实优先 (M4 EVT-1): some event rows are calibrated/sample (awaiting full ETL),
  // not confirmed published schedules. Detect them so we can label them honestly
  // instead of presenting them as a confirmed calendar.
  const isSampleEvent = (ev) => {
    const s = String((ev && ev.source) || '').toLowerCase();
    return /calibrat|sample|awaiting|placeholder|estimate/.test(s);
  };

  // Load events when modal opens
  React.useEffect(() => {
    if (!open) return;
    if (events.length > 0) return;
    if (!window.SchoolEventsLoader) return;

    setLoading(true);
    window.SchoolEventsLoader.getEventsAsync(prov, yr)
      .then((data) => {
        setEvents(Array.isArray(data) ? data : []);
      })
      .catch(() => setEvents([]))
      .finally(() => setLoading(false));
  }, [open, prov, yr]);

  // Body scroll lock
  React.useEffect(() => {
    if (typeof document === 'undefined' || !document.body) return;
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  // ESC to close
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    const onHash = () => setOpen(false); // #323(1) — close on route change
    window.addEventListener('keydown', onKey);
    window.addEventListener('hashchange', onHash);
    return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('hashchange', onHash); };
  }, [open]);

  // ── filter logic ────────────────────────────────────────────────────────────
  const todayStr = (() => {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
  })();

  let displayed = events.slice();
  if (filter === 'upcoming') {
    displayed = displayed.filter((e) => e.eventDate >= todayStr);
  } else if (filter === 'recruitment_talk') {
    displayed = displayed.filter((e) => e.eventType === 'recruitment_talk');
  } else if (filter === 'open_house') {
    displayed = displayed.filter((e) => e.eventType === 'open_house');
  } else if (filter === 'major_intro') {
    displayed = displayed.filter((e) => e.eventType === 'major_intro');
  }
  if (cityFilter !== 'all') {
    displayed = displayed.filter((e) => e.city === cityFilter);
  }
  // Sort by date ASC then timeStart ASC
  displayed.sort((a, b) => {
    const dc = a.eventDate.localeCompare(b.eventDate);
    if (dc !== 0) return dc;
    return (a.timeStart || '').localeCompare(b.timeStart || '');
  });

  // Unique cities for city filter
  const cities = [...new Set(events.map((e) => e.city).filter(Boolean))].sort();

  // ── event type badge ─────────────────────────────────────────────────────────
  const typeBadge = (eventType) => {
    const styles = {
      recruitment_talk: { bg: 'var(--pb-gold-100, #fef9ec)', color: 'var(--pb-gold-700)', label: dict.typeRecruitmentTalk },
      open_house:       { bg: 'rgba(34,139,230,0.1)', color: '#1c6fb5', label: dict.typeOpenHouse },
      major_intro:      { bg: 'rgba(64,192,87,0.12)', color: '#2a9e42', label: dict.typeMajorIntro },
    };
    const s = styles[eventType] || { bg: 'var(--pb-surface-alt)', color: 'var(--pb-fg-muted)', label: eventType };
    return (
      <span style={{
        display: 'inline-block',
        padding: '2px 8px',
        borderRadius: 100,
        fontSize: 11,
        fontWeight: 600,
        background: s.bg,
        color: s.color,
        whiteSpace: 'nowrap',
      }}>
        {s.label}
      </span>
    );
  };

  return (
    <React.Fragment>
      {/* ── Events chip ── */}
      <button
        type="button"
        data-testid="events-chip"
        onClick={() => setOpen(true)}
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          padding: '6px 14px',
          fontSize: 12,
          fontWeight: 600,
          letterSpacing: '0.04em',
          textTransform: 'uppercase',
          borderRadius: 100,
          border: '1px solid var(--pb-gold-500)',
          background: 'transparent',
          color: 'var(--pb-gold-700)',
          cursor: 'pointer',
          transition: 'background 0.15s, color 0.15s',
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = 'var(--pb-gold-500)';
          e.currentTarget.style.color = 'var(--pb-navy-900)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = 'transparent';
          e.currentTarget.style.color = 'var(--pb-gold-700)';
        }}
      >
        <span aria-hidden="true" style={{ fontSize: 14, lineHeight: 1 }}>📅</span>
        {dict.chip || '招生宣讲会'}
      </button>

      {/* ── Modal — portalled to body to escape sticky stacking context (#258) ── */}
      {open && ReactDOM.createPortal(
        <div
          data-testid="events-modal"
          role="dialog"
          aria-modal="true"
          aria-labelledby="gaokao-events-modal-title"
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 2147483647,
            background: 'rgba(15, 22, 36, 0.55)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '96px 24px 24px',
          }}
          onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
        >
          <div
            className="pb-card"
            style={{
              maxWidth: 860,
              width: '100%',
              maxHeight: 'calc(100vh - 128px)',
              overflow: 'auto',
              padding: 0,
              boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
            }}
          >
            {/* Header */}
            <div
              style={{
                padding: '24px 28px 16px',
                borderBottom: '1px solid var(--pb-border)',
                position: 'sticky',
                top: 0,
                background: 'var(--pb-paper)',
                zIndex: 1,
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 14 }}>
                <div>
                  <div className="pb-eyebrow" style={{ color: 'var(--pb-gold-700)', marginBottom: 6 }}>
                    {dict.eyebrow}
                  </div>
                  <h3
                    id="gaokao-events-modal-title"
                    style={{ fontFamily: 'var(--pb-serif)', fontSize: 22, fontWeight: 600, margin: 0 }}
                  >
                    {dict.title}
                  </h3>
                  {dict.subtitle && (
                    <p style={{ fontSize: 13, color: 'var(--pb-fg-muted)', margin: '5px 0 0', lineHeight: 1.6 }}>
                      {dict.subtitle}
                    </p>
                  )}
                </div>
                <button
                  type="button"
                  data-testid="events-modal-close"
                  aria-label={dict.close}
                  onClick={() => setOpen(false)}
                  style={{
                    background: 'transparent',
                    border: '1px solid var(--pb-border)',
                    borderRadius: 18,
                    fontSize: 16,
                    height: 36,
                    lineHeight: 1,
                    padding: 0,
                    cursor: 'pointer',
                    color: 'var(--pb-fg-muted)',
                    display: 'inline-flex',
                    alignItems: 'center',
                    flexShrink: 0,
                    justifyContent: 'center',
                    width: 36,
                  }}
                >
                  ×
                </button>
              </div>

              {/* Filter row */}
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
                {[
                  { key: 'all', label: dict.filterAll },
                  { key: 'upcoming', label: dict.filterUpcoming },
                  { key: 'recruitment_talk', label: dict.filterTalk },
                  { key: 'open_house', label: dict.filterOpenHouse },
                  { key: 'major_intro', label: dict.filterMajorIntro },
                ].map(({ key, label }) => (
                  <button
                    key={key}
                    type="button"
                    data-testid={`events-filter-${key}`}
                    onClick={() => setFilter(key)}
                    style={{
                      padding: '4px 12px',
                      fontSize: 12,
                      fontWeight: 600,
                      borderRadius: 100,
                      border: `1px solid ${filter === key ? 'var(--pb-gold-500)' : 'var(--pb-border)'}`,
                      background: filter === key ? 'var(--pb-gold-500)' : 'transparent',
                      color: filter === key ? 'var(--pb-navy-900)' : 'var(--pb-fg-muted)',
                      cursor: 'pointer',
                    }}
                  >
                    {label}
                  </button>
                ))}

                {/* City filter */}
                {cities.length > 1 && (
                  <select
                    data-testid="events-city-filter"
                    value={cityFilter}
                    onChange={(e) => setCityFilter(e.target.value)}
                    style={{
                      padding: '4px 10px',
                      fontSize: 12,
                      borderRadius: 6,
                      border: '1px solid var(--pb-border)',
                      background: 'var(--pb-paper)',
                      color: 'var(--pb-fg)',
                      cursor: 'pointer',
                    }}
                  >
                    <option value="all">{dict.filterAllCities}</option>
                    {cities.map((c) => (
                      <option key={c} value={c}>{c}</option>
                    ))}
                  </select>
                )}
              </div>
            </div>

            {/* Body — event list */}
            <div style={{ padding: '8px 0' }}>
              {loading && (
                <div style={{ padding: '40px 28px', textAlign: 'center', color: 'var(--pb-fg-muted)', fontSize: 13 }}>
                  {dict.loading}
                </div>
              )}

              {!loading && displayed.length === 0 && (
                <div style={{ padding: '40px 28px', textAlign: 'center', color: 'var(--pb-fg-muted)', fontSize: 13 }}>
                  {filter === 'upcoming' ? dict.noUpcoming : dict.noData}
                </div>
              )}

              {!loading && displayed.map((ev, idx) => (
                <div
                  key={ev.eventId}
                  data-testid={`event-row-${ev.eventId}`}
                  style={{
                    padding: '14px 28px',
                    borderTop: idx === 0 ? 'none' : '1px solid var(--pb-border)',
                    display: 'grid',
                    gridTemplateColumns: '120px 1fr auto',
                    gap: '8px 16px',
                    alignItems: 'start',
                  }}
                >
                  {/* Date + time column */}
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pb-fg)', lineHeight: 1.4 }}>
                      {ev.eventDate}
                    </div>
                    {ev.timeStart && (
                      <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginTop: 2 }}>
                        {ev.timeStart}{ev.timeEnd ? ` – ${ev.timeEnd}` : ''}
                      </div>
                    )}
                    <div style={{ marginTop: 4 }}>
                      {typeBadge(ev.eventType)}
                    </div>
                    {/* 诚实优先 (M4 EVT-1): mark calibrated/sample rows so they read as
                        provisional, not a confirmed published schedule. */}
                    {isSampleEvent(ev) && (
                      <div
                        data-testid={`event-sample-badge-${ev.eventId}`}
                        style={{
                          marginTop: 4,
                          display: 'inline-block',
                          padding: '1px 8px',
                          borderRadius: 100,
                          fontSize: 10,
                          fontWeight: 600,
                          background: 'var(--pb-surface-alt)',
                          color: 'var(--pb-fg-muted)',
                          border: '1px dashed var(--pb-border)',
                          whiteSpace: 'nowrap',
                        }}
                      >
                        {dict.sampleBadge}
                      </div>
                    )}
                  </div>

                  {/* Main content column */}
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 700, fontFamily: 'var(--pb-serif)', color: 'var(--pb-fg)', marginBottom: 3 }}>
                      {ev.schoolName}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginBottom: 4 }}>
                      📍 {ev.city} · {ev.address}
                    </div>
                    {ev.speakerOrigin && (
                      <div style={{ fontSize: 12, color: 'var(--pb-fg-muted)', marginBottom: 4 }}>
                        🎤 {ev.speakerOrigin}
                      </div>
                    )}
                    {Array.isArray(ev.topics) && ev.topics.length > 0 && (
                      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 4 }}>
                        {ev.topics.map((t, ti) => (
                          <span
                            key={ti}
                            style={{
                              display: 'inline-block',
                              padding: '1px 8px',
                              borderRadius: 100,
                              fontSize: 11,
                              background: 'var(--pb-surface-alt)',
                              color: 'var(--pb-fg-muted)',
                              border: '1px solid var(--pb-border)',
                            }}
                          >
                            {t}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>

                  {/* City badge (right column) */}
                  <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--pb-gold-700)', whiteSpace: 'nowrap' }}>
                    {ev.city}
                  </div>
                </div>
              ))}
            </div>

            {/* Footer note */}
            <div
              style={{
                padding: '12px 28px',
                borderTop: '1px solid var(--pb-border)',
                background: 'var(--pb-surface-alt)',
                fontSize: 11,
                color: 'var(--pb-fg-muted)',
                lineHeight: 1.6,
              }}
            >
              {dict.sourceNote}
            </div>
          </div>
        </div>
      , document.body)}
    </React.Fragment>
  );
};

window.GaokaoEventsBlock = GaokaoEventsBlock;