// Course detail: banner, module list, sidebar meta.
(function () {
  const NS = window.MineSafeGlobalDesignSystem_760fd2;
  const { CourseHeader, Card, ModuleListItem, Button, Badge, Icon, ProgressBar } = NS;

  function CourseDetail({ course, onBack, onOpenModule }) {
    const c = course;
    const meta = [
      { icon: 'layers', label: `${c.lessons} modules` },
      { icon: 'clock', label: c.duration },
      { icon: 'signal', label: c.level },
      { icon: 'file-badge', label: 'Certificate' },
    ];
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <button onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 14, alignSelf: 'flex-start', fontFamily: 'var(--font-body)' }}>
          <Icon name="arrow-left" size={17} />Back to dashboard
        </button>

        <CourseHeader category={`${c.category} · ${c.level}`} title={c.title} bgSrc={c.cover}
          meta={meta} progress={c.progress}
          actionSlot={<Button variant="primary" iconLeft="play" onClick={() => onOpenModule(3)}>Resume course</Button>} />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 20, alignItems: 'start' }}>
          <div>
            <h3 style={{ marginBottom: 12 }}>Course content</h3>
            <Card padding="0" style={{ overflow: 'hidden' }}>
              {(c.modules || []).map((m, i) => (
                <ModuleListItem key={i} index={i + 1} title={m.title} type={m.type}
                  duration={m.duration} status={m.status}
                  onClick={m.status === 'locked' ? undefined : () => onOpenModule(i)} />
              ))}
            </Card>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card>
              <h4 style={{ marginBottom: 10 }}>Your progress</h4>
              <ProgressBar value={c.progress} showLabel label="Completed" />
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 9, fontSize: 13.5, color: 'var(--text-body)' }}>
                <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}><Icon name="circle-check" size={16} color="var(--safe)" />3 of 8 modules done</span>
                <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}><Icon name="clock" size={16} color="var(--text-muted)" />~50 min remaining</span>
              </div>
            </Card>
            <Card>
              <h4 style={{ marginBottom: 10 }}>About this course</h4>
              <p style={{ fontSize: 13.5, color: 'var(--text-body)', lineHeight: 1.5 }}>{c.summary}</p>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 12 }}>
                <Badge tone="ink">{c.level}</Badge><Badge tone="brand">ISO 21815</Badge><Badge tone="neutral">Certificate</Badge>
              </div>
            </Card>
          </div>
        </div>
      </div>
    );
  }

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