// Track selection — multiple learning paths (parcours)
// Shown after onboarding; user picks or switches between specialized tracks

function TracksScreen({ theme, lang, onTabClick, onTrackClick }) {
  const tracks_fr = [
    {
      k: 'fondamentaux',
      title: 'Les fondamentaux',
      subtitle: 'Comprendre la comptabilité de A à Z',
      for: 'Pour démarrer',
      duration: '8 semaines',
      lessons: 42,
      color: '#2D5F3F',
      progress: 0.62,
      emotion: 'happy',
      icon: '📘',
      enrolled: true,
    },
    {
      k: 'freelance',
      title: 'Freelance & TPE',
      subtitle: 'Gérer ta compta sans stress',
      for: 'Pour entrepreneurs',
      duration: '4 semaines',
      lessons: 22,
      color: '#D88A3C',
      progress: 0.15,
      emotion: 'focused',
      icon: '🧾',
      enrolled: true,
    },
    {
      k: 'bilan',
      title: 'Lire & analyser un bilan',
      subtitle: 'Décoder les états financiers',
      for: 'Niveau intermédiaire',
      duration: '3 semaines',
      lessons: 18,
      color: '#4A7A8C',
      progress: 0,
      emotion: 'wink',
      icon: '📊',
    },
    {
      k: 'tva',
      title: 'TVA & fiscalité',
      subtitle: 'Collectée, déductible, déclarations',
      for: 'Niveau intermédiaire',
      duration: '3 semaines',
      lessons: 16,
      color: '#8C6B4A',
      progress: 0,
      emotion: 'focused',
      icon: '⚖️',
    },
    {
      k: 'dcg',
      title: 'Préparer le DCG',
      subtitle: 'UE 9 · Comptabilité',
      for: 'Étudiants · certification',
      duration: '12 semaines',
      lessons: 86,
      color: '#6B3A7A',
      progress: 0,
      emotion: 'excited',
      icon: '🎓',
      premium: true,
    },
    {
      k: 'ifrs',
      title: 'IFRS essentiels',
      subtitle: 'Normes internationales appliquées',
      for: 'Niveau avancé',
      duration: '6 semaines',
      lessons: 32,
      color: '#1B3A5C',
      progress: 0,
      emotion: 'focused',
      icon: '🌍',
      premium: true,
    },
  ];
  const tracks_en = [
    { k: 'fondamentaux', title: 'Fundamentals', subtitle: 'Accounting from A to Z', for: 'To get started', duration: '8 weeks', lessons: 42, color: '#2D5F3F', progress: 0.62, emotion: 'happy', icon: '📘', enrolled: true },
    { k: 'freelance', title: 'Freelance & SME', subtitle: 'Manage your books stress-free', for: 'For entrepreneurs', duration: '4 weeks', lessons: 22, color: '#D88A3C', progress: 0.15, emotion: 'focused', icon: '🧾', enrolled: true },
    { k: 'bilan', title: 'Read a balance sheet', subtitle: 'Decode financial statements', for: 'Intermediate', duration: '3 weeks', lessons: 18, color: '#4A7A8C', progress: 0, emotion: 'wink', icon: '📊' },
    { k: 'tva', title: 'VAT & taxes', subtitle: 'Collected, deductible, filings', for: 'Intermediate', duration: '3 weeks', lessons: 16, color: '#8C6B4A', progress: 0, emotion: 'focused', icon: '⚖️' },
    { k: 'dcg', title: 'Prep the DCG', subtitle: 'Unit 9 · Accounting', for: 'Students · cert', duration: '12 weeks', lessons: 86, color: '#6B3A7A', progress: 0, emotion: 'excited', icon: '🎓', premium: true },
    { k: 'ifrs', title: 'IFRS essentials', subtitle: 'International standards', for: 'Advanced', duration: '6 weeks', lessons: 32, color: '#1B3A5C', progress: 0, emotion: 'focused', icon: '🌍', premium: true },
  ];
  const tracks = lang === 'fr' ? tracks_fr : tracks_en;
  const enrolled = tracks.filter(t => t.enrolled);
  const explore = tracks.filter(t => !t.enrolled);

  return (
    <div style={{ height: '100%', background: theme.bg, display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 110 }}>
        {/* hero */}
        <div style={{ padding: '60px 20px 12px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <MiloHead size={52} emotion="wink"/>
            <div>
              <h1 style={{ fontFamily: theme.font, fontSize: 30, fontWeight: theme.headingWeight, color: theme.ink, margin: 0, letterSpacing: -0.5, lineHeight: 1.1 }}>
                {lang==='fr'?'Tes parcours':'Your tracks'}
              </h1>
              <div style={{ fontFamily: theme.fontBody, fontSize: 13, color: theme.inkSoft, marginTop: 2 }}>
                {lang==='fr'?'Avance sur ce qui compte pour toi':'Focus on what matters to you'}
              </div>
            </div>
          </div>
        </div>

        {/* SPEED banner */}
        <div style={{ padding: '16px 20px 0' }}>
          <div onClick={() => onTrackClick({ k: 'speed' })} style={{
            position: 'relative', overflow: 'hidden', cursor: 'pointer',
            background: 'linear-gradient(135deg, #0F1411 0%, #1E2420 100%)',
            borderRadius: theme.radius, padding: '16px 18px',
            display: 'flex', alignItems: 'center', gap: 14,
            boxShadow: `0 6px 20px rgba(15,20,17,0.25)`,
            border: '1px solid rgba(255,201,58,0.3)',
          }}>
            {/* glow */}
            <div style={{ position: 'absolute', top: -40, right: -30, width: 150, height: 150, borderRadius: '50%', background: 'radial-gradient(circle, #FFC93A60 0%, transparent 65%)', pointerEvents: 'none' }}/>
            <div style={{
              width: 56, height: 56, borderRadius: 16, flexShrink: 0, position: 'relative', zIndex: 1,
              background: 'linear-gradient(135deg, #FFC93A, #F59E0B)', color: '#0F1411',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 30, boxShadow: '0 4px 16px rgba(255,201,58,0.5)',
            }}>⚡</div>
            <div style={{ flex: 1, position: 'relative', zIndex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ fontFamily: theme.fontBody, fontSize: 10, fontWeight: 800, color: '#FFC93A', letterSpacing: 2 }}>
                  {lang==='fr'?'NOUVEAU':'NEW'}
                </div>
                <div style={{ width: 4, height: 4, borderRadius: '50%', background: '#FFC93A' }}/>
                <div style={{ fontFamily: theme.fontBody, fontSize: 10, fontWeight: 700, color: 'rgba(255,255,255,0.6)', letterSpacing: 1.2 }}>
                  {lang==='fr'?'1 MIN':'1 MIN'}
                </div>
              </div>
              <div style={{ fontFamily: theme.font, fontSize: 19, fontWeight: theme.headingWeight, color: '#fff', marginTop: 2, letterSpacing: -0.3 }}>
                {lang==='fr'?'Speed drill':'Speed drill'}
              </div>
              <div style={{ fontFamily: theme.fontBody, fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>
                {lang==='fr'?'Un réflexe par seconde. Combo, chrono, record.':'One reflex per second. Combo, timer, record.'}
              </div>
            </div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFC93A" strokeWidth="2.5" strokeLinecap="round"><path d="M9 6l6 6-6 6"/></svg>
          </div>
        </div>

        {/* enrolled */}
        <div style={{ padding: '22px 20px 0' }}>
          <SectionHead theme={theme}>{lang==='fr'?'EN COURS':'ONGOING'}</SectionHead>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 10 }}>
            {enrolled.map(t => <TrackCardActive key={t.k} track={t} theme={theme} lang={lang} onClick={() => onTrackClick(t)}/>)}
          </div>
        </div>

        {/* explore */}
        <div style={{ padding: '24px 20px 0' }}>
          <SectionHead theme={theme}>{lang==='fr'?'DÉCOUVRIR':'EXPLORE'}</SectionHead>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
            {explore.map(t => <TrackCardSmall key={t.k} track={t} theme={theme} lang={lang} onClick={() => onTrackClick(t)}/>)}
          </div>
        </div>

        {/* custom path CTA */}
        <div style={{ padding: '24px 20px 20px' }}>
          <div style={{
            background: theme.ink, color: '#fff', borderRadius: theme.radius,
            padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <MiloHead size={54} emotion="excited"/>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: theme.font, fontSize: 16, fontWeight: theme.headingWeight }}>
                {lang==='fr'?'Créer un parcours sur mesure':'Build a custom track'}
              </div>
              <div style={{ fontFamily: theme.fontBody, fontSize: 12, opacity: 0.7, marginTop: 2 }}>
                {lang==='fr'?'Milo compose ton plan en 2 min':'Milo builds your plan in 2 min'}
              </div>
            </div>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><path d="M9 6l6 6-6 6"/></svg>
          </div>
        </div>
      </div>
      <BottomTabs theme={theme} active="tracks" onTabClick={onTabClick}/>
    </div>
  );
}

function SectionHead({ theme, children }) {
  return (
    <div style={{
      fontFamily: theme.fontBody, fontSize: 11, fontWeight: 800,
      color: theme.inkSoft, letterSpacing: 1.5,
    }}>{children}</div>
  );
}

function TrackCardActive({ track, theme, lang, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: theme.surface, borderRadius: theme.radius,
      border: `1px solid ${theme.border}`, padding: 16, cursor: 'pointer',
      display: 'flex', gap: 14, alignItems: 'center',
      boxShadow: `0 2px 0 ${theme.border}`,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 16, flexShrink: 0,
        background: track.color, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 26, boxShadow: `0 3px 0 ${shadeColor(track.color, -20)}`,
      }}>{track.icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: theme.font, fontSize: 17, fontWeight: theme.headingWeight, color: theme.ink, lineHeight: 1.2 }}>
          {track.title}
        </div>
        <div style={{ fontFamily: theme.fontBody, fontSize: 12, color: theme.inkSoft, marginTop: 2 }}>
          {lang==='fr'?'Progression':'Progress'} · {Math.round(track.progress * 100)} % · {track.lessons} {lang==='fr'?'leçons':'lessons'}
        </div>
        <div style={{ marginTop: 8 }}>
          <ProgressBar theme={theme} value={track.progress * 100} color={track.color} height={8}/>
        </div>
      </div>
    </div>
  );
}

function TrackCardSmall({ track, theme, lang, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: theme.surface, borderRadius: theme.radius,
      border: `1px solid ${theme.border}`, padding: 14, cursor: 'pointer',
      boxShadow: `0 2px 0 ${theme.border}`, position: 'relative', overflow: 'hidden',
    }}>
      {track.premium && (
        <div style={{
          position: 'absolute', top: 10, right: 10,
          background: theme.gold, color: theme.ink,
          padding: '2px 7px', borderRadius: 6,
          fontFamily: theme.fontBody, fontSize: 9, fontWeight: 800,
          letterSpacing: 0.5, textTransform: 'uppercase',
        }}>PRO</div>
      )}
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: track.color, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 22, marginBottom: 10,
        boxShadow: `0 2px 0 ${shadeColor(track.color, -20)}`,
      }}>{track.icon}</div>
      <div style={{ fontFamily: theme.font, fontSize: 15, fontWeight: theme.headingWeight, color: theme.ink, lineHeight: 1.2 }}>
        {track.title}
      </div>
      <div style={{ fontFamily: theme.fontBody, fontSize: 11, color: theme.inkSoft, marginTop: 4, lineHeight: 1.4 }}>
        {track.subtitle}
      </div>
      <div style={{
        display: 'flex', gap: 6, marginTop: 10,
        fontFamily: theme.fontBody, fontSize: 10, color: theme.inkSoft, fontWeight: 700,
      }}>
        <span>⏱ {track.duration}</span>
        <span>·</span>
        <span>{track.lessons} {lang==='fr'?'leçons':'lessons'}</span>
      </div>
    </div>
  );
}

Object.assign(window, { TracksScreen, TrackCardActive, TrackCardSmall, SectionHead });