// Dashboard: greeting, stat tiles, continue-learning, course grid.
(function () {
  const NS = window.MineSafeGlobalDesignSystem_760fd2;
  const { Card, LessonCard, CourseHeader, Button, Icon, Tag } = NS;

  function StatTile({ icon, value, label, tone }) {
    return (
      <Card padding="16px" style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ width: 42, height: 42, borderRadius: 'var(--radius-md)', background: 'var(--brand-surface)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
            <Icon name={icon} size={21} color="var(--brand-text)" />
          </span>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, lineHeight: 1, color: 'var(--text-strong)' }}>{value}</div>
            <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 3 }}>{label}</div>
          </div>
        </div>
      </Card>
    );
  }

  function Dashboard({ onOpenCourse }) {
    const d = window.MSA_DATA;
    const T = (k) => (window.msT ? window.msT(k) : k);
    const cont = d.courses.find(c => c.id === 'level9');
    const filters = ['All', 'Core Collision', 'Pedestrian', 'Monitoring', 'Underground', 'Compliance'];
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div>
          <span className="ms-overline">{T('welcome_back')}</span>
          <h1 style={{ marginTop: 6 }}>{T('greeting')}, {d.user.name.split(' ')[0]}.</h1>
          <p style={{ color: 'var(--text-muted)', marginTop: 6 }}>{T('due_msg')}</p>
        </div>

        <CourseHeader
          category={`${T('inprogress')} · ${cont.category} · ${cont.level}`}
          title={`${T('continue_prefix')}: ${cont.title}`}
          bgSrc={cont.cover}
          meta={[{ icon: 'layers', label: `${cont.lessons} modules` }, { icon: 'clock', label: cont.duration }, { icon: 'file-badge', label: 'Certificate on completion' }]}
          progress={cont.progress}
          actionSlot={<Button variant="primary" iconLeft="play" onClick={() => onOpenCourse(cont.id)}>{T('resume')}</Button>}
        />

        <div style={{ display: 'flex', gap: 16 }}>
          <StatTile icon="book-open" value={d.stats.enrolled} label={T('stat_enrolled')} />
          <StatTile icon="circle-check" value={d.stats.completed} label={T('stat_completed')} />
          <StatTile icon="clock" value={`${d.stats.hours}h`} label={T('stat_hours')} />
          <StatTile icon="file-badge" value={d.stats.certs} label={T('stat_certs')} />
        </div>

        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <h3>{T('course_catalog')}</h3>
            <div style={{ display: 'flex', gap: 8 }}>{filters.map((f, i) => <Tag key={f} active={i === 0}>{f}</Tag>)}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
            {d.courses.map(c => (
              <LessonCard key={c.id} level={c.level} category={c.category} title={c.title}
                summary={c.summary} lessons={c.lessons} duration={c.duration} thumbSrc={c.cover}
                progress={c.progress > 0 || c.status === 'inprogress' ? c.progress : undefined}
                status={c.status} onClick={() => onOpenCourse(c.id)} />
            ))}
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { Dashboard });
})();