// providers-screen.jsx — Provider directory + per-provider course list
// ─────────────────────────────────────────────────────────────────────────
//  Two related screens:
//
//  <ProvidersScreen>
//      Index of every NCHK-accredited provider, with live course counts.
//      Click → drill into ProviderCoursesScreen.
//
//  <ProviderCoursesScreen>
//      All active courses from one provider, using the same CourseCard
//      the Discover screen uses.
//
//  Design choices:
//    • Two-letter monogram avatars from the provider code — distinctive,
//      cheap to render, no image assets needed.
//    • Search across both EN and ZH names + code, so a nurse who knows
//      "FMSHK" or "醫聯會" finds the same row.
//    • Sort by course_count desc — providers with active courses bubble
//      to the top, so the screen feels alive.
//    • Empty-state for providers with zero active courses points back
//      at Discover.
// ─────────────────────────────────────────────────────────────────────────

const { useState: pvS, useMemo: pvM } = React;

// Pseudo-random hue from the provider code, deterministic so each
// provider always gets the same swatch.
function pvHue(code) {
  let h = 0;
  for (let i = 0; i < code.length; i++) h = (h * 31 + code.charCodeAt(i)) % 360;
  return h;
}

function ProviderAvatar({ code, size = 44 }) {
  const hue = pvHue(code || 'XX');
  const initials = (code || 'X').slice(0, 2).toUpperCase();
  return (
    <div
      className="pv-avatar"
      aria-hidden="true"
      style={{
        width: size, height: size,
        borderRadius: 12,
        background: `oklch(0.92 0.04 ${hue})`,
        color:      `oklch(0.36 0.10 ${hue})`,
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'var(--font-mono)',
        fontSize: size * 0.32,
        fontWeight: 600,
        letterSpacing: '0.04em',
        flexShrink: 0,
      }}>
      {initials}
    </div>
  );
}

function ProvidersScreen({ lang, setLang, providers, providersLoading, onOpenProvider }) {
  const [query, setQuery] = pvS('');

  const filtered = pvM(() => {
    const q = query.trim().toLowerCase();
    let list = providers || [];
    if (q) {
      list = list.filter(p =>
        (p.code || '').toLowerCase().includes(q) ||
        (p.full_name_en || '').toLowerCase().includes(q) ||
        (p.full_name_zh || '').toLowerCase().includes(q)
      );
    }
    // Active providers (with courses) first, then alphabetical
    return list.slice().sort((a, b) => {
      if ((b.course_count || 0) !== (a.course_count || 0)) {
        return (b.course_count || 0) - (a.course_count || 0);
      }
      return (a.code || '').localeCompare(b.code || '');
    });
  }, [providers, query]);

  const withCoursesCount = (providers || []).filter(p => (p.course_count || 0) > 0).length;
  const totalCourses = (providers || []).reduce((s, p) => s + (p.course_count || 0), 0);

  return (
    <div className="scroll fade-in" data-screen-label="Providers" style={{ paddingBottom: 24 }}>
      <ScreenHeader
        title={L(STR.providers, lang)}
        eyebrow={L(STR.providersHeader, lang)}
        actions={<LangPill lang={lang} setLang={setLang} />}
      />

      <div style={{ padding: '8px 20px 0' }}>
        <div className="search-bar">
          <Icon name="search" size={17} color="var(--fg-3)" stroke={1.6} />
          <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder={lang === 'zh' ? '搜尋機構名稱或代碼…' : 'Search provider name or code…'}
          />
        </div>
      </div>

      <div className="pv-summary">
        <div className="pv-summary-stat">
          <div className="pv-summary-num serif">{(providers || []).length}</div>
          <div className="pv-summary-label mono">{L(STR.providersCount, lang)}</div>
        </div>
        <div className="pv-summary-divider" />
        <div className="pv-summary-stat">
          <div className="pv-summary-num serif">{withCoursesCount}</div>
          <div className="pv-summary-label mono">
            {lang === 'zh' ? '有可報課程' : 'with active courses'}
          </div>
        </div>
        <div className="pv-summary-divider" />
        <div className="pv-summary-stat">
          <div className="pv-summary-num serif">{totalCourses}</div>
          <div className="pv-summary-label mono">{L(STR.coursesCount, lang)}</div>
        </div>
      </div>

      {providersLoading && (providers || []).length === 0 ? (
        <div style={{ padding: '40px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[...Array(6)].map((_, i) => (
            <div key={i} className="pv-row pv-row-skel">
              <div className="pv-avatar pv-skel-pulse" style={{ width: 44, height: 44 }} />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div className="pv-skel-pulse" style={{ height: 12, width: '60%', borderRadius: 6 }} />
                <div className="pv-skel-pulse" style={{ height: 10, width: '40%', borderRadius: 6 }} />
              </div>
            </div>
          ))}
        </div>
      ) : filtered.length === 0 ? (
        <div className="vital-empty" style={{ marginTop: 12 }}>
          <div className="vital-empty-icon">
            <Icon name="search" size={22} stroke={1.7} />
          </div>
          <div className="vital-empty-title">
            {lang === 'zh' ? '找不到符合的機構' : 'No matching providers'}
          </div>
          <div className="vital-empty-sub">
            {query
              ? (lang === 'zh' ? `沒有結果符合「${query}」` : `Nothing matched "${query}"`)
              : (lang === 'zh' ? '稍後再試' : 'Try again later')}
          </div>
          {query && (
            <button className="btn btn-ghost" onClick={() => setQuery('')} style={{ marginTop: 12 }}>
              {lang === 'zh' ? '清除搜尋' : 'Clear search'}
            </button>
          )}
        </div>
      ) : (
        <Stagger
          delay={20}
          initialDelay={20}
          style={{ padding: '4px 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {filtered.map(p => (
            <ProviderRow key={p.code} provider={p} lang={lang} onClick={() => onOpenProvider(p.code)} />
          ))}
        </Stagger>
      )}
    </div>
  );
}

function ProviderRow({ provider, lang, onClick }) {
  const onKey = (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick && onClick(); }
  };
  const hasCourses = (provider.course_count || 0) > 0;
  return (
    <M.div
      role="button"
      tabIndex={0}
      className="pv-row"
      onClick={onClick}
      onKeyDown={onKey}
      whileHover={{ x: 2 }}
      whileTap={{ scale: 0.99 }}
      transition={{ duration: 0.16 }}
    >
      <ProviderAvatar code={provider.code} />
      <div className="pv-row-body">
        <div className="pv-row-name">
          {lang === 'zh' ? (provider.full_name_zh || provider.full_name_en) : provider.full_name_en}
        </div>
        <div className="pv-row-sub mono">
          {provider.code}
          {hasCourses ? (
            <> · <span style={{ color: 'var(--primary)' }}>
              {provider.course_count} {L(STR.coursesCount, lang)}
            </span></>
          ) : (
            <> · <span style={{ opacity: 0.6 }}>{lang === 'zh' ? '暫無課程' : 'no active courses'}</span></>
          )}
        </div>
      </div>
      {hasCourses && <Icon name="arrow-r" size={16} stroke={1.6} color="var(--fg-3)" />}
    </M.div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Per-provider course list — drilled into from ProvidersScreen.
// ─────────────────────────────────────────────────────────────────────────
function ProviderCoursesScreen({ providerCode, providers, lang, setLang, onBack, onOpenCourse }) {
  const provider = (providers || []).find(p => p.code === providerCode);
  const today = new Date().toISOString().slice(0, 10);
  // Show ALL active courses for this provider (matches the count shown on
  // the index row, which counts every active row regardless of date).
  // Upcoming surface first, then past — past rows are dimmed by .is-ended.
  const { upcoming, past } = pvM(() => {
    const all = (typeof COURSES !== 'undefined' ? COURSES : []);
    const mine = all.filter(c => (c.raw?.provider_code === providerCode || c.providerShort?.en === providerCode));
    const up = mine.filter(c => isUpcomingCourse(c, today))
                   .sort((a, b) => (a.date || '9999') < (b.date || '9999') ? -1 : 1);
    const pa = mine.filter(c => isPastCourse(c, today))
                   .sort((a, b) => (a.date || '0000') > (b.date || '0000') ? -1 : 1);
    return { upcoming: up, past: pa };
  }, [providerCode]);
  const total = upcoming.length + past.length;

  if (!provider) return null;

  return (
    <div className="scroll fade-in" data-screen-label="Provider courses" style={{ paddingBottom: 88 }}>
      <div className="detail-topbar is-scrolled">
        <button className="icon-btn" onClick={onBack} aria-label={lang === 'zh' ? '返回' : 'Back'}>
          <Icon name="chev-l" size={18} />
        </button>
        <div className="detail-topbar-title">{provider.code}</div>
        <div style={{ width: 32 }} aria-hidden="true" />
      </div>

      <div className="pv-hero">
        <ProviderAvatar code={provider.code} size={56} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <h1 className="pv-hero-name">
            {lang === 'zh' ? (provider.full_name_zh || provider.full_name_en) : provider.full_name_en}
          </h1>
          <div className="pv-hero-sub">
            <span className="mono">{provider.code}</span>
            <span>·</span>
            <span>{lang === 'zh' ? '已認可 · NCHK' : 'Accredited · NCHK'}</span>
          </div>
          {provider.source_url && (
            <a className="pv-hero-link" href={provider.source_url} target="_blank" rel="noopener noreferrer">
              <Icon name="globe" size={12} stroke={1.7} />
              <span>{lang === 'zh' ? '官方網站' : 'Official site'}</span>
            </a>
          )}
        </div>
      </div>

      <div style={{ padding: '6px 20px 8px' }} className="muted" >
        <span style={{ fontSize: 12 }}>
          {total} {L(STR.coursesCount, lang)}
          {past.length > 0 && upcoming.length > 0 && (
            <span className="muted-2" style={{ marginLeft: 6 }}>
              · {upcoming.length} {lang === 'zh' ? '可報' : 'upcoming'} · {past.length} {lang === 'zh' ? '已過' : 'past'}
            </span>
          )}
        </span>
      </div>

      {total === 0 ? (
        <div className="vital-empty">
          <div className="vital-empty-icon">
            <Icon name="calendar" size={22} stroke={1.7} />
          </div>
          <div className="vital-empty-title">
            {lang === 'zh' ? '暫無課程' : 'No courses listed'}
          </div>
          <div className="vital-empty-sub">
            {L(STR.noCoursesFromProvider, lang)}
          </div>
        </div>
      ) : (
        <Stagger
          delay={20}
          initialDelay={20}
          style={{ padding: '4px 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {upcoming.map(c => (
            <CourseCard key={c.id} course={c} lang={lang} onClick={() => onOpenCourse(c.id)} />
          ))}
          {past.length > 0 && upcoming.length > 0 && (
            <div className="eyebrow" style={{ padding: '12px 0 4px' }}>
              {lang === 'zh' ? '過往課程' : 'Past courses'}
            </div>
          )}
          {past.map(c => (
            <CourseCard key={c.id} course={c} lang={lang} onClick={() => onOpenCourse(c.id)} />
          ))}
        </Stagger>
      )}
    </div>
  );
}

window.ProvidersScreen        = ProvidersScreen;
window.ProviderCoursesScreen  = ProviderCoursesScreen;
window.ProviderAvatar         = ProviderAvatar;