/* Sub-Specialty Catalogue page */

function ScreenSubCatalogue() {
  const t = useT();
  const courses = useSampleCourses();
  const articles = useSampleArticles();
  const items = [
    courses[0], articles[0], courses[1], articles[1],
    courses[2], articles[2], courses[3], articles[3], articles[4], articles[5],
  ].filter(Boolean);

  const [format, setFormat] = React.useState(1); // courses
  const [difficulty, setDifficulty] = React.useState(new Set());
  const [sort, setSort] = React.useState(0);
  const [credits, setCredits] = React.useState(1);

  const toggleDifficulty = (i) => {
    setDifficulty((d) => {
      const next = new Set(d);
      next.has(i) ? next.delete(i) : next.add(i);
      return next;
    });
  };

  const formats = [
    `${t('subj_all')} · 192`,
    `${t('courses')} · 38`,
    `${t('articles')} · 142`,
    `${t('cat_metric_guides')} · 12`,
    t('news'),
  ];
  const difficulties = ['Introductory', 'Intermediate', 'Advanced', 'Board review'];
  const sortOpts = [t('cat_sort_newest'), t('cat_sort_read'), t('cat_sort_credits'), t('cat_sort_az')];
  const creditLabels = ['Any', 'AMA PRA', 'AAFP', 'AANP', 'CE for RN'];

  return (
    <>
      <NavBar active="catalogue" />

      <main id="main">
        {/* Breadcrumb */}
        <div style={{ borderBottom: '1px dashed var(--line)' }}>
          <div className="container" style={{ padding: '14px var(--gutter)', fontSize: 13, color: 'var(--ink-2)' }}>
            <span className="mono">
              {t('catalogue')} · <a onClick={() => goTo('catalogue')} style={{ color: 'var(--ink)', cursor: 'pointer' }}>{t('cat_breadcrumb_specs')}</a> · <a onClick={() => goTo('catalogue')} style={{ color: 'var(--ink)', cursor: 'pointer' }}>{t('subj_cardio')}</a> · <strong>{t('cat_hf_title')}</strong>
            </span>
          </div>
        </div>

        {/* Hero strip */}
        <section style={{ padding: 'clamp(28px, 4vw, 36px) 0' }}>
          <div className="container" style={{ display: 'flex', gap: 28, alignItems: 'flex-end', flexWrap: 'wrap' }}>
            <div style={{ flex: 1, minWidth: 280 }}>
              <div className="sec-tag" style={{ marginBottom: 6 }}>{t('cat_subspec_tag')}</div>
              <h1 className="hand t-h1" style={{ margin: 0 }}>
                <span className="scribble-under">{t('cat_hf_title')}</span>
              </h1>
              <p style={{ fontSize: 16, color: 'var(--ink-2)', marginTop: 10, maxWidth: 620 }}>{t('cat_hf_sub')}</p>
            </div>
            <div style={{ display: 'flex', gap: 18, paddingBottom: 6, flexWrap: 'wrap' }}>
              {[
                { n: '38', l: t('cat_metric_courses') },
                { n: '142', l: t('cat_metric_articles') },
                { n: '12', l: t('cat_metric_guides') },
                { n: '76', l: t('cat_metric_cme') },
              ].map((s, i) => (
                <div key={i} style={{ textAlign: 'center', minWidth: 64 }}>
                  <div className="hand" style={{ fontSize: 30, lineHeight: 1 }}>{s.n}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: 1.5, textTransform: 'uppercase', marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <div className="wf-rule" style={{ background: 'var(--ink)' }} />

        {/* Body */}
        <section style={{ padding: 'clamp(24px, 4vw, 36px) 0 clamp(36px, 5vw, 56px)' }}>
          <div className="container">
            <div className="catalogue-body">
              <aside className="catalogue-sidebar">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 18, position: 'sticky', top: 84 }}>
                  <div className="wf-border" style={{ padding: 14 }}>
                    <div className="sec-tag" style={{ marginBottom: 8 }}>{t('cat_filter_format')}</div>
                    {formats.map((f, i) => (
                      <label key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', fontSize: 14, cursor: 'pointer' }}>
                        <input type="radio" name="format" checked={format === i} onChange={() => setFormat(i)} />
                        <span>{f}</span>
                      </label>
                    ))}
                  </div>

                  <div className="wf-border" style={{ padding: 14 }}>
                    <div className="sec-tag" style={{ marginBottom: 8 }}>{t('cat_filter_difficulty')}</div>
                    {difficulties.map((f, i) => (
                      <label key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', fontSize: 14, cursor: 'pointer' }}>
                        <input type="checkbox" checked={difficulty.has(i)} onChange={() => toggleDifficulty(i)} />
                        <span>{f}</span>
                      </label>
                    ))}
                  </div>

                  <div className="wf-border" style={{ padding: 14 }}>
                    <div className="sec-tag" style={{ marginBottom: 8 }}>{t('cat_filter_duration')}</div>
                    <input
                      type="range"
                      min="0"
                      max="240"
                      defaultValue="180"
                      style={{ width: '100%' }}
                      aria-label={t('cat_filter_duration')}
                    />
                    <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', display: 'flex', justifyContent: 'space-between' }}>
                      <span>15m</span><span>4h</span>
                    </div>
                  </div>

                  <div className="wf-border" style={{ padding: 14 }}>
                    <div className="sec-tag" style={{ marginBottom: 8 }}>{t('cat_filter_credits')}</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {creditLabels.map((c, i) => (
                        <span
                          key={i}
                          className={'chip ' + (i === credits ? 'chip-solid' : 'chip-dash')}
                          onClick={() => setCredits(i)}
                        >
                          {c}
                        </span>
                      ))}
                    </div>
                  </div>

                  <button className="btn" onClick={() => { setFormat(0); setDifficulty(new Set()); setCredits(0); }}>
                    {t('cat_reset')}
                  </button>
                </div>
              </aside>

              {/* Results */}
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
                  <div className="hand" style={{ fontSize: 22 }}>{t('cat_showing')}</div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, flexWrap: 'wrap' }} className="mono">
                    <span style={{ color: 'var(--muted)' }}>{t('cat_sort')}</span>
                    {sortOpts.map((s, i) => (
                      <span key={i} className={'chip ' + (i === sort ? 'chip-solid' : '')} onClick={() => setSort(i)}>{s}</span>
                    ))}
                  </div>
                </div>

                <div className="wf-border" style={{ padding: '4px 18px' }}>
                  {items.map((item, i) => <ListRow key={i} item={item} />)}
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 18, flexWrap: 'wrap', gap: 12 }}>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{t('cat_page')}</span>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <span className="chip">←</span>
                    <span className="chip chip-solid">1</span>
                    <span className="chip">2</span>
                    <span className="chip">3</span>
                    <span className="chip">…</span>
                    <span className="chip">20</span>
                    <span className="chip">→</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </>
  );
}

window.ScreenSubCatalogue = ScreenSubCatalogue;