/* Leren Streaks/Achievements view */
(function () {
  const { useState } = React;

  /* ─── Streak calendar — last 30 days ─────────────────────── */
  function StreakCalendar({ t }) {
    const dark = t.mode === 'dark';
    const orange = dark ? '#F97316' : '#C2410C';
    const orangeBg = dark ? 'rgba(249,115,22,0.14)' : 'rgba(234,88,12,0.10)';
    const orangeBd = dark ? 'rgba(249,115,22,0.28)' : 'rgba(234,88,12,0.24)';

    // Mock: days 1-30 counting back from today (day 30 = today)
    // Streak days: most of last 12 active, a couple of misses earlier
    const activeDays = new Set([1,3,4,5,6,8,9,10,11,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29]);
    const todayIdx = 30; // "today" = slot 30

    const days = Array.from({ length: 30 }, (_, i) => {
      const num = i + 1;
      const isToday = num === todayIdx;
      const isActive = activeDays.has(num);
      return { num, isToday, isActive };
    });

    const activeCount = activeDays.size;

    return (
      <div style={{
        background: t.card, border: `1px solid ${t.border}`,
        borderRadius: 12, padding: '16px 18px',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14,
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: orangeBg, color: orange,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <span style={{ fontSize: 14 }}>🔥</span>
          </div>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.fg }}>
            Kalender — laatste 30 dagen
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6,
          marginBottom: 12,
        }}>
          {days.map(({ num, isToday, isActive }) => (
            <div key={num} title={`Dag ${num}`} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              height: 30, borderRadius: 8,
              background: isActive
                ? orangeBg
                : isToday
                  ? 'transparent'
                  : t.cardSunken,
              border: isToday
                ? `2px dashed ${orange}`
                : isActive
                  ? `1px solid ${orangeBd}`
                  : `1px solid ${t.border}`,
              fontSize: 14,
              opacity: num < 8 && !isActive ? 0.6 : 1,
            }}>
              {isActive
                ? <span>🔥</span>
                : isToday
                  ? <span style={{ fontSize: 10, fontWeight: 800, color: orange }}>Nu</span>
                  : <span style={{ width: 6, height: 6, borderRadius: 999, background: t.border, display: 'inline-block' }} />
              }
            </div>
          ))}
        </div>

        <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, marginBottom: 6 }}>
          <span style={{ color: orange, fontWeight: 800 }}>{activeCount} actieve dagen</span> deze maand
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '8px 10px', borderRadius: 8,
          background: dark ? 'rgba(34,197,94,0.07)' : 'rgba(21,128,61,0.05)',
          border: `1px solid ${dark ? 'rgba(34,197,94,0.22)' : 'rgba(21,128,61,0.16)'}`,
          fontSize: 11.5, color: dark ? '#22C55E' : '#15803D', fontWeight: 700,
        }}>
          <PI name="shield" size={12} strokeWidth={2.4} />
          Recovery: je kan max 1 dag missen — Pulse helpt je streak te herstellen.
        </div>
      </div>
    );
  }

  /* ─── Badge card ─────────────────────────────────────────── */
  function BadgeCard({ t, icon, title, sub, achieved, achievedLabel, progressPct, progressLabel }) {
    const dark = t.mode === 'dark';
    const green = dark ? '#22C55E' : '#15803D';
    const greenDim = dark ? 'rgba(34,197,94,0.12)' : 'rgba(21,128,61,0.08)';
    const greenBd = dark ? 'rgba(34,197,94,0.28)' : 'rgba(21,128,61,0.22)';
    const goldColor = dark ? '#FFD000' : '#D97706';
    const goldDim = dark ? 'rgba(255,208,0,0.12)' : 'rgba(217,119,6,0.08)';
    const goldBd = dark ? 'rgba(255,208,0,0.28)' : 'rgba(217,119,6,0.22)';

    return (
      <div style={{
        background: achieved
          ? (dark ? 'rgba(255,208,0,0.05)' : 'rgba(217,119,6,0.04)')
          : t.card,
        border: `1px solid ${achieved ? goldBd : t.border}`,
        borderRadius: 10, padding: '12px 14px',
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: achieved ? goldDim : t.cardSunken,
          color: achieved ? goldColor : t.fgMute,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PI name={icon} size={17} strokeWidth={2.2}
            color={achieved ? goldColor : t.fgMute} />
        </div>

        <div>
          <div style={{
            fontSize: 12.5, fontWeight: 800, color: achieved ? t.fg : t.fgDim,
            lineHeight: 1.25, marginBottom: 2,
          }}>{title}</div>
          <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 600, lineHeight: 1.4 }}>
            {sub}
          </div>
        </div>

        {achieved ? (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '3px 8px', borderRadius: 999,
            background: greenDim, color: green,
            border: `1px solid ${greenBd}`,
            fontSize: 10, fontWeight: 800, alignSelf: 'flex-start',
          }}>
            <PI name="check" size={9} strokeWidth={2.8} color={green} />
            {achievedLabel}
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {progressPct != null && (
              <div style={{
                width: '100%', height: 4, borderRadius: 999,
                background: t.cardSunken, border: `1px solid ${t.border}`, overflow: 'hidden',
              }}>
                <div style={{
                  width: `${progressPct}%`, height: '100%',
                  background: t.primary, borderRadius: 999,
                }} />
              </div>
            )}
            {progressLabel && (
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                fontSize: 10, fontWeight: 700, color: t.fgMute,
              }}>
                <PI name="lock" size={9} strokeWidth={2.6} />
                {progressLabel}
              </div>
            )}
          </div>
        )}
      </div>
    );
  }

  /* ─── XP progress card ───────────────────────────────────── */
  function XpProgressCard({ t }) {
    const dark = t.mode === 'dark';
    const green = dark ? '#22C55E' : '#15803D';
    const xp = 73, xpMax = 272;
    const pct = Math.round((xp / xpMax) * 100);

    return (
      <div style={{
        background: t.card, border: `1px solid ${t.border}`,
        borderRadius: 12, padding: '16px 18px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: dark ? 'rgba(34,197,94,0.12)' : 'rgba(21,128,61,0.08)',
            color: green,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <PI name="trending-up" size={14} strokeWidth={2.4} color={green} />
          </div>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.fg }}>
            Level-voortgang
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{
              fontFamily: 'Fredoka One', fontSize: 18,
              color: t.primary, lineHeight: 1,
            }}>7</span>
            <PI name="arrow-right" size={14} color={t.fgMute} />
            <span style={{
              fontFamily: 'Fredoka One', fontSize: 18,
              color: t.fgDim, lineHeight: 1,
            }}>8</span>
          </div>
        </div>

        <div style={{ marginBottom: 8 }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            marginBottom: 6,
          }}>
            <span style={{ fontSize: 12.5, color: t.fgDim, fontWeight: 700 }}>
              Level 7 · {xp} / {xpMax} XP
            </span>
            <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: green }}>
              {pct}%
            </span>
          </div>
          <div style={{
            height: 8, borderRadius: 999, background: t.cardSunken,
            border: `1px solid ${t.border}`, overflow: 'hidden',
          }}>
            <div style={{
              width: `${pct}%`, height: '100%',
              background: green, borderRadius: 999,
            }} />
          </div>
        </div>
        <div style={{ fontSize: 11.5, color: t.fgMute, fontWeight: 600 }}>
          Nog <span style={{ color: t.fg, fontWeight: 800 }}>199 XP</span> voor level 8 —
          verdien XP via sessies, mastery, en delen.
        </div>
      </div>
    );
  }

  /* ─── LerenStreaksView ────────────────────────────────────── */
  function LerenStreaksView({ t, navigate, user }) {
    const dark = t.mode === 'dark';
    const orange = dark ? '#F97316' : '#C2410C';
    const orangeBg = dark ? 'rgba(249,115,22,0.10)' : 'rgba(234,88,12,0.07)';
    const orangeBd = dark ? 'rgba(249,115,22,0.28)' : 'rgba(234,88,12,0.24)';
    const gold = dark ? '#FFD000' : '#D97706';
    const goldDim = dark ? 'rgba(255,208,0,0.10)' : 'rgba(217,119,6,0.07)';

    const BADGES = [
      { icon: 'flame',       title: 'Eerste streak',       sub: '3 dagen op rij',              achieved: true,  achievedLabel: '4 maanden geleden' },
      { icon: 'award',       title: 'Week-warrior',         sub: '7 dagen op rij',              achieved: true,  achievedLabel: '3 maanden geleden' },
      { icon: 'trophy',      title: 'Marathon-loper',       sub: '30 dagen op rij',             achieved: false, progressPct: 40, progressLabel: 'Nog 18 dagen!' },
      { icon: 'crown',       title: 'Honderd dagen',        sub: '100 dagen aaneengesloten',    achieved: false, progressPct: 12, progressLabel: 'Doel: 100 dagen' },
      { icon: 'book-open',   title: 'Eerste hoofdstuk',     sub: 'Eerste hoofdstuk gemeesterd', achieved: true,  achievedLabel: '3 maanden geleden' },
      { icon: 'layers',      title: '5 hoofdstukken',       sub: '5 hoofdstukken gemastered',   achieved: true,  achievedLabel: '2 maanden geleden' },
      { icon: 'share-2',     title: 'Community-bijdrage',   sub: 'Gepubliceerd lesmateriaal',   achieved: false, progressPct: 0,  progressLabel: 'Doel: 1 item' },
      { icon: 'star',        title: 'Top contributor',      sub: '5+ items met 4+ sterren',     achieved: false, progressPct: 0,  progressLabel: 'Doel: 5 items' },
      { icon: 'zap',         title: 'Snapper',              sub: '1.000 Snaps verdiend',        achieved: true,  achievedLabel: '1 maand geleden' },
      { icon: 'gem',         title: 'Snap-meester',         sub: '10.000 Snaps verdiend',       achieved: false, progressPct: 12, progressLabel: '1.240 / 10.000' },
      { icon: 'repeat',      title: 'Sessie-streak',        sub: '50 herhaalsessies gedaan',    achieved: true,  achievedLabel: '87 sessies!' },
      { icon: 'graduation-cap', title: 'Diversiteit',      sub: '4 vakken op mastery-niveau',  achieved: false, progressPct: 75, progressLabel: '3/4 — Engels nog' },
    ];

    return (
      <LerenPage t={t} title="Streaks & badges"
        subtitle="Wat je hebt opgebouwd en wat je nog te doen hebt"
        snaps={1240} streak={12} level={7}
        url="snapsnel.nl/leren/streaks">

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 860 }}>

          {/* ── Hero — current streak ─────────────────────── */}
          <div style={{
            background: dark
              ? 'linear-gradient(135deg, #0F1F2E 0%, #0E2235 60%, #102438 100%)'
              : 'linear-gradient(135deg, #ECFEFF 0%, #E0F2FE 60%, #F0F9FF 100%)',
            border: `1px solid ${dark ? 'rgba(0,180,216,0.22)' : '#BAE6FD'}`,
            borderRadius: 14, padding: '22px 24px',
            display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap',
          }}>
            <PulseMascot size={80} mood="celebrating" style={{ flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 200 }}>
              <div style={{
                fontFamily: 'Fredoka One', fontSize: 26,
                color: dark ? '#F1F5F9' : '#0C4A6E',
                lineHeight: 1.2, marginBottom: 6,
              }}>
                12 dagen op rij — pak nog &eacute;&eacute;ntje vandaag
              </div>
              <div style={{ fontSize: 13, color: dark ? '#94A3B8' : '#075985', fontWeight: 600, marginBottom: 14 }}>
                Langste streak ooit: <span style={{ fontWeight: 800, color: dark ? '#F1F5F9' : '#0369A1' }}>24 dagen</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {[
                  { emoji: '🔥', label: '12 huidig' },
                  { emoji: '🏆', label: '24 record' },
                  { emoji: '📅', label: '87 sessies totaal' },
                  { emoji: '⚡', label: '+50 bonus per 7 dagen' },
                ].map(({ emoji, label }) => (
                  <div key={label} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 5,
                    padding: '5px 10px', borderRadius: 999,
                    background: dark ? 'rgba(0,180,216,0.10)' : 'rgba(0,150,199,0.08)',
                    border: `1px solid ${dark ? 'rgba(0,180,216,0.22)' : 'rgba(0,150,199,0.22)'}`,
                    fontSize: 12, fontWeight: 700,
                    color: dark ? '#7DD3FC' : '#0369A1',
                  }}>
                    <span>{emoji}</span>
                    <span>{label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* ── Streak calendar ──────────────────────────── */}
          <StreakCalendar t={t} />

          {/* ── Milestones / achievements grid ───────────── */}
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14,
            }}>
              <div style={{
                fontSize: 10.5, fontWeight: 800, color: t.fgMute,
                letterSpacing: 0.8, textTransform: 'uppercase',
              }}>Badges & milestones</div>
              <div style={{ flex: 1, height: 1, background: t.border }} />
              <div style={{
                padding: '3px 9px', borderRadius: 999,
                background: goldDim,
                border: `1px solid ${dark ? 'rgba(255,208,0,0.24)' : 'rgba(217,119,6,0.22)'}`,
                fontSize: 10.5, fontWeight: 800, color: gold,
              }}>
                6 / 12 behaald
              </div>
            </div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 10,
            }}>
              {BADGES.map(b => (
                <BadgeCard key={b.title} t={t} {...b} />
              ))}
            </div>
          </div>

          {/* ── XP progress ──────────────────────────────── */}
          <XpProgressCard t={t} />

          {/* ── Bottom CTAs ──────────────────────────────── */}
          <div style={{
            display: 'flex', gap: 10, alignItems: 'center',
            paddingTop: 4, flexWrap: 'wrap',
          }}>
            <BtnPrimary t={t} icon="play" onClick={() => navigate('review')}>
              Start herhaalsessie
            </BtnPrimary>
            <BtnGhost t={t} icon="graduation-cap" onClick={() => navigate('mastery')}>
              Bekijk Mastery
            </BtnGhost>
          </div>
        </div>
      </LerenPage>
    );
  }

  window.LerenStreaksView = LerenStreaksView;
})();