/* Dashboard — logged-in landing */

function ScreenDashboard() {
  const t = useT();
  const courses = useSampleCourses();
  const articles = useSampleArticles();

  return (
    <>
      <NavBar />

      <main id="main">
        {/* Welcome strip */}
        <section style={{ padding: 'clamp(24px, 4vw, 32px) 0' }}>
          <div className="container" style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
            <div className="hand" style={{ width: 64, height: 64, borderRadius: '50%', border: '1.5px solid var(--ink)', background: 'var(--sky-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, color: 'var(--sky-deep)', flexShrink: 0 }}>MC</div>
            <div style={{ flex: 1, minWidth: 200 }}>
              <div className="sec-tag" style={{ marginBottom: 4 }}>{t('dash_today')}</div>
              <h1 className="hand" style={{ fontSize: 'var(--fs-h2)', margin: 0 }}>{t('dash_welcome')}</h1>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 4 }}>{t('dash_streak')}</div>
            </div>
            <button className="btn btn-sky" onClick={() => goTo('article')}>{t('dash_continue_last')}</button>
          </div>
        </section>

        <div className="wf-rule" />

        {/* Metric strip */}
        <section style={{ padding: 'clamp(16px, 3vw, 24px) 0' }}>
          <div className="container">
            <div className="dash-metrics">
              <CMETracker />
              <div className="wf-border" style={{ padding: 18 }}>
                <div className="sec-tag" style={{ marginBottom: 4 }}>{t('dash_this_week')}</div>
                <div className="hand" style={{ fontSize: 32, lineHeight: 1 }}>4h 20m</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{t('dash_week_sub')}</div>
                <div className="wf-rule" style={{ margin: '10px 0' }} />
                <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end', height: 28 }}>
                  {[12, 22, 8, 18, 26, 4, 14].map((h, i) => (
                    <div key={i} style={{ flex: 1, height: `${h}px`, background: i === 4 ? 'var(--sky-deep)' : 'var(--ink)', borderRadius: 2 }} />
                  ))}
                </div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
                  <span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span>
                </div>
              </div>
              <div className="wf-border" style={{ padding: 18 }}>
                <div className="sec-tag" style={{ marginBottom: 4 }}>{t('dash_board')}</div>
                <div className="hand" style={{ fontSize: 22, lineHeight: 1.1, marginBottom: 6 }}>{t('dash_board_in')}</div>
                <div className="wf-rule" style={{ position: 'relative' }}>
                  <div style={{ width: '38%', height: 4, background: 'var(--sky-deep)', borderRadius: 2 }} />
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>{t('dash_board_pct')}</div>
                <button className="btn btn-block" style={{ marginTop: 10 }}>{t('dash_open_plan')}</button>
              </div>
            </div>
          </div>
        </section>

        {/* Continue learning */}
        <section className="section">
          <div className="container">
            <SectionHead tag={t('dash_continue_learning')} title={t('dash_where_left')} action={t('dash_view_all')} onAction={() => goTo('catalogue')} />
            <div className="card-grid-3">
              {[
                { item: courses[0], pct: 62, last: 'Module 4 / 7' },
                { item: courses[1], pct: 34, last: 'Module 2 / 6' },
                { item: courses[2], pct: 88, last: 'Final assessment' },
              ].map((c, i) => (
                <article
                  key={i}
                  className="wf-border"
                  style={{ padding: 16, cursor: 'pointer' }}
                  onClick={() => goTo('article')}
                  tabIndex={0}
                  onKeyDown={(e) => { if (e.key === 'Enter') goTo('article'); }}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span className="stamp" style={{ background: 'var(--sky-tint)', color: 'var(--sky-deep)', borderColor: 'var(--sky-deep)' }}>{t('card_course')}</span>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{c.item.subj}</span>
                  </div>
                  <h3 className="hand" style={{ fontSize: 19, lineHeight: 1.2, marginTop: 8, marginBottom: 6 }}>{c.item.title}</h3>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{c.last}</div>
                  <div className="wf-rule" style={{ marginTop: 10, position: 'relative' }}>
                    <div style={{ width: `${c.pct}%`, height: 4, background: 'var(--sky-deep)', borderRadius: 2 }} />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{c.pct}% · {c.item.time}</span>
                    <span className="hand" style={{ fontSize: 17, color: 'var(--sky-deep)' }}>{t('cme_resume')}</span>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* Bookmarks + recommended */}
        <section style={{ padding: 'clamp(16px, 3vw, 24px) 0 clamp(20px, 3vw, 32px)' }}>
          <div className="container">
            <div className="dash-two-col">
              <div>
                <SectionHead tag={t('dash_bookmarks')} title={t('dash_saved_later')} action={t('dash_manage')} />
                <div className="wf-border" style={{ padding: '0 16px' }}>
                  <ListRow item={articles[1]} />
                  <ListRow item={articles[3]} />
                  <ListRow item={articles[4]} />
                  <ListRow item={articles[5]} />
                </div>
              </div>
              <div>
                <SectionHead tag={t('dash_recommended')} title={t('dash_because')} action={t('dash_tune')} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <ContentCard item={courses[3]} dense />
                  <ContentCard item={articles[0]} dense />
                  <ContentCard item={articles[2]} dense />
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Activity */}
        <section className="section">
          <div className="container">
            <SectionHead tag={t('dash_activity')} title={t('dash_last_7')} />
            <div className="wf-border" style={{ padding: '8px 20px' }}>
              {[
                { tt: '2h',  a: 'Completed',  what: courses[0].title,  d: '+0.5 credit pending licensure' },
                { tt: '1d',  a: 'Bookmarked', what: articles[0].title, d: `${t('subj_neuro')} · ${articles[0].time}` },
                { tt: '2d',  a: 'Started',    what: courses[2].title,  d: `${t('subj_id')} · 3h 10m` },
                { tt: '3d',  a: 'Note added', what: articles[2].title, d: '"Check eligibility window for nirsevimab"' },
                { tt: '5d',  a: 'Quiz passed', what: articles[5].title, d: t('subj_nursing') },
              ].map((row, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, padding: '12px 0', borderTop: i ? '1px dashed var(--line)' : 'none', alignItems: 'flex-start', flexWrap: 'wrap' }}>
                  <div className="mono" style={{ width: 50, fontSize: 11, color: 'var(--muted)', paddingTop: 3 }}>{row.tt}</div>
                  <div style={{ width: 100 }}>
                    <span className="chip chip-dash" style={{ fontSize: 12 }}>{row.a}</span>
                  </div>
                  <div style={{ flex: 1, minWidth: 200 }}>
                    <div className="hand" style={{ fontSize: 18, lineHeight: 1.2 }}>{row.what}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)' }}>{row.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </>
  );
}

window.ScreenDashboard = ScreenDashboard;