/* Course Progress Screen — the home/learn tab. Mirrors the existing app's
   "Course Progress" surface, restyled in MiniMax language. */

const { TopBar, TabBar, Card, Tile, Btn, Progress, Icon, Row, Chip } = window.GG;

const CourseProgress = ({ onOpenLesson = () => {} }) => {
  const units = [
    { n: 1, name: 'Foundation', desc: 'Letters, numbers, pronouns & grammar', pct: 100, status: 'Completed', tone: 'green' },
    { n: 2, name: 'Basics',     desc: 'Greetings, family & food',              pct: 67,  status: '2 / 3 lessons', tone: 'blue' },
    { n: 3, name: 'Vocabulary builder', desc: 'Colors, animals, body parts & more', pct: 14, status: '1 / 7 lessons', tone: 'purple' },
    { n: 4, name: 'Practical Gujarati', desc: 'Actions, places & feelings',     pct: 0,   status: 'Not started', tone: 'orange' },
  ];

  return (
    <div className="gg-screen">
      <TopBar stats={{ streak: 5, coins: 40, hearts: 3 }} />

      <div className="gg-body">
        {/* Hero progress card */}
        <Card featured style={{ marginBottom: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="../../assets/AppIcon.png" alt="" style={{ width: 48, height: 48, borderRadius: 12 }} />
            <div style={{ flex: 1 }}>
              <div style={{ font: '600 16px var(--font-display)', color: '#222' }}>Aanya's progress</div>
              <div style={{ font: '400 12px var(--font-ui)', color: '#8e8e93', marginTop: 2 }}>Unit 2 · last lesson: Greetings</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 14, marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--border-light)' }}>
            <Stat n="40" label="XP" color="#1456f0" />
            <Stat n="5"  label="Streak" color="#f59e0b" />
            <Stat n="5"  label="Lessons" color="#222" />
          </div>
        </Card>

        <h2 className="gg-section-h">Course progress</h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {units.map(u => (
            <Card key={u.n} style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'stretch' }}>
                <div className={`gg-grad-${u.tone}`} style={{ width: 6 }} />
                <div style={{ flex: 1, padding: 14 }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ font: '600 11px var(--font-ui)', color: '#1456f0', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Unit {u.n}</div>
                      <div style={{ font: '600 17px/1.3 var(--font-display)', color: '#222', marginTop: 4 }}>{u.name}</div>
                    </div>
                    <span className="gg-chip" style={{ flexShrink: 0, ...(u.pct === 100 ? { background: '#e8ffea', color: '#047857' } : u.pct === 0 ? { background: '#f2f3f5', color: '#8e8e93' } : {}) }}>
                      {u.status}
                    </span>
                  </div>
                  <div style={{ font: '400 13px var(--font-ui)', color: '#45515e', margin: '8px 0 12px', lineHeight: 1.45 }}>{u.desc}</div>
                  <Progress value={u.pct} />
                </div>
              </div>
            </Card>
          ))}
        </div>

        <div style={{ marginTop: 20 }}>
          <Btn variant="brand" pill block onClick={onOpenLesson}>
            <Icon name="play" size={16} color="#fff" stroke={2.25} /> Continue Unit 2
          </Btn>
        </div>
      </div>

      <TabBar active="learn" />
    </div>
  );
};

const Stat = ({ n, label, color = '#222' }) => (
  <div style={{ flex: 1, minWidth: 0 }}>
    <div className="data" style={{ font: '600 22px var(--font-data)', color }}>{n}</div>
    <div style={{ font: '500 10px var(--font-ui)', color: '#8e8e93', textTransform: 'uppercase', letterSpacing: '0.04em', marginTop: 2, whiteSpace: 'nowrap' }}>{label}</div>
  </div>
);

window.CourseProgress = CourseProgress;