/* LerenDashboardView — interactive v7 dashboard view.
   Based on FrameLerenHub from polish/leren-dashboard-frames.jsx.
   All components resolved from window globals loaded by prior scripts. */

function NotificationBanner({ t, icon, variant, title, body, action, onAction, onDismiss }) {
  var dark = t.mode === 'dark';
  var isWarm = variant === 'warm';
  var isInfo = variant === 'info';
  var bgColor = isWarm
    ? (dark ? 'rgba(251,146,60,0.12)' : 'rgba(251,146,60,0.10)')
    : (dark ? 'rgba(0,180,216,0.10)' : 'rgba(0,150,199,0.08)');
  var borderColor = isWarm
    ? (dark ? 'rgba(251,146,60,0.35)' : 'rgba(251,146,60,0.30)')
    : (dark ? 'rgba(0,180,216,0.30)' : 'rgba(0,150,199,0.25)');
  var iconColor = isWarm
    ? (dark ? '#FB923C' : '#EA580C')
    : (dark ? '#7DD3FC' : '#0369A1');
  var pulseColor = isWarm ? '#FB923C' : undefined;

  return (
    <div style={{
      position: 'relative',
      display: 'flex', alignItems: 'flex-start', gap: 12,
      padding: isInfo ? '10px 14px' : '14px 16px',
      borderRadius: 10,
      background: bgColor,
      border: '1px solid ' + borderColor,
    }}>
      <div style={{ flexShrink: 0, marginTop: 2 }}>
        <PulseMascot size={isInfo ? 24 : 32} mood="thinking" color={pulseColor} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: isInfo ? 12.5 : 13.5,
          fontWeight: 800,
          color: t.fg,
          lineHeight: 1.3,
          marginBottom: body ? 3 : 0,
        }}>{title}</div>
        {body && (
          <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 500, lineHeight: 1.45 }}>
            {body}
          </div>
        )}
        {action && onAction && (
          <button
            onClick={onAction}
            style={{
              marginTop: 8,
              padding: '5px 12px',
              borderRadius: 6,
              background: isWarm
                ? (dark ? 'rgba(251,146,60,0.22)' : 'rgba(251,146,60,0.15)')
                : (dark ? 'rgba(0,180,216,0.20)' : 'rgba(0,150,199,0.12)'),
              border: '1px solid ' + borderColor,
              color: iconColor,
              fontSize: 12,
              fontWeight: 800,
              cursor: 'pointer',
            }}
          >{action}</button>
        )}
      </div>
      {onDismiss && (
        <button
          title="Sluiten"
          onClick={onDismiss}
          style={{
            position: 'absolute', top: 8, right: 8,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 22, height: 22, borderRadius: 999,
            background: 'transparent', border: 'none',
            color: t.fgMute, cursor: 'pointer', flexShrink: 0,
          }}
        >
          <PI name="x" size={12} strokeWidth={2.6} />
        </button>
      )}
    </div>
  );
}

function LerenDashboardView({ t, navigate, user, chapters, plan, creditsLeft, creditsMax }) {
  var bannerDismissed = React.useState(false);
  var setBannerDismissed = bannerDismissed[1];
  bannerDismissed = bannerDismissed[0];

  var ch = (chapters && chapters.length > 0) ? chapters : [
    { id: 'bio-h3', subject: 'biologie', chapter: 'H3 — Cellen en celdeling',
      source: 'Biologie voor jou · havo-3', mins: 28, progress: 35, masteryLevel: 2,
      fromPlannen: true, toetsContext: 'toets vrijdag' },
    { id: 'wisk-h4', subject: 'wiskunde', chapter: 'H4 Kwadratische functies',
      source: 'Getal & Ruimte · H4', masteryLevel: 3, progress: 82 },
    { id: 'gesch-h7', subject: 'geschiedenis', chapter: 'H7 De Verlichting',
      source: 'Geschiedeniswerkplaats · H7', masteryLevel: 1, progress: 18 },
    { id: 'eng-u5', subject: 'engels', chapter: 'U5 Past Perfect',
      source: 'Stepping Stones · U5', masteryLevel: 2, progress: 60 },
  ];
  var top = ch[0];

  var effectivePlan = plan || 'premium';
  var effectiveCreditsLeft = creditsLeft != null ? creditsLeft : 3;
  var effectiveCreditsMax = creditsMax != null ? creditsMax : 10;

  return (
    <LerenPage
      t={t}
      subtitle="Vandaag kun je 12 kaarten herhalen — ~6 minuten."
      snaps={user.snaps}
      streak={user.streak}
      level={user.level}
      rightExtra={
        <CreditsCounter
          t={t}
          plan={effectivePlan}
          left={effectiveCreditsLeft}
          max={effectiveCreditsMax}
        />
      }
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20, maxWidth: 1180 }}>

        {/* ── Main column ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>

          {/* ── Notification banners ── */}
          {!bannerDismissed && (
            <NotificationBanner
              t={t}
              icon="alert-circle"
              variant="warm"
              title="Toets vrijdag — Bio H3 nog niet helemaal beheerst"
              body="2 onderwerpen vragen nog aandacht. Pulse plant 25 min vandaag in om je voor te bereiden."
              action="Bekijk planning"
              onAction={function() { navigate('plannen'); }}
              onDismiss={function() { setBannerDismissed(true); }}
            />
          )}

          {!bannerDismissed && (
            <NotificationBanner
              t={t}
              icon="book-open"
              variant="info"
              title="Pulse heeft 5 nieuwe community-hoofdstukken voor jou geselecteerd"
              action="Bekijk Community"
              onAction={function() { navigate('library'); }}
            />
          )}

          <PulseGreetCard
            t={t}
            mood="encouraging"
            kicker="Pulse · vandaag"
            title={"Hé Sam — vrijdag is je Bio-toets, dus pak vandaag rustig H3 op."}
            body="Daarna heb ik 12 herhaalkaarten voor je over je vakken. Twaalf minuten werk, samen tafel-eten klaar."
            badges={
              <HandoffBadge t={t} pillar="plannen" direction="from" label="uit Plannen" />
            }
          />

          {/* Vandaag te leren */}
          <div>
            <SectionLabel t={t}>Vandaag te leren</SectionLabel>
            <div
              onClick={function() { navigate({ name: 'chapter', chapterId: top.id }); }}
              style={{ cursor: 'pointer' }}
            >
              <VandaagLerenCard
                t={t}
                subject={top.subject}
                chapter={top.chapter}
                source={top.source}
                mins={top.mins}
                progress={top.progress}
                masteryLevel={top.masteryLevel}
                fromPlannen={top.fromPlannen}
                toetsContext={top.toetsContext}
              />
            </div>
          </div>

          {/* AI Content CTA */}
          <div>
            <SectionLabel t={t}>Maak studiemateriaal</SectionLabel>
            <div
              onClick={function() { navigate('ai-creator'); }}
              style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '14px 18px', borderRadius: 10,
                background: t.card, border: '1px solid ' + t.border,
                cursor: 'pointer', transition: 'border-color 0.15s',
              }}
              onMouseEnter={function(e) { e.currentTarget.style.borderColor = t.primary; }}
              onMouseLeave={function(e) { e.currentTarget.style.borderColor = t.border; }}
            >
              <div style={{
                width: 36, height: 36, borderRadius: 8, flexShrink: 0,
                background: t.mode === 'dark' ? 'rgba(0,180,216,0.12)' : 'rgba(0,150,199,0.10)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <PI name="camera" size={17} color={t.mode === 'dark' ? '#7DD3FC' : '#0369A1'} strokeWidth={2.0} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, color: t.fg, fontWeight: 800, lineHeight: 1.3 }}>
                  Snap een boekpagina
                </div>
                <div style={{ fontSize: 12, color: t.fgMute, fontWeight: 600, marginTop: 2 }}>
                  Pulse maakt er flashcards van · 1 credit
                </div>
              </div>
              <PI name="arrow-right" size={16} color={t.fgMute} strokeWidth={2.2} />
            </div>
          </div>

          {/* Waar je mee bezig bent */}
          <div>
            <SectionLabel
              t={t}
              right={
                <span
                  onClick={function() { navigate('library'); }}
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 4,
                    fontSize: 11, color: t.primary, fontWeight: 800, cursor: 'pointer',
                  }}
                >
                  Bekijk hele bibliotheek
                  <PI name="arrow-right" size={11} color={t.primary} />
                </span>
              }
            >
              {'Waar je mee bezig bent · ' + ch.length + ' vakken'}
            </SectionLabel>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {ch.map(function(c, i) {
                var isCurrent = i === 0;
                var badge = isCurrent
                  ? (
                    <span style={{
                      fontSize: 9, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
                      color: t.primary, padding: '2px 6px', borderRadius: 4, background: t.primaryDim,
                    }}>nu bezig</span>
                  )
                  : null;
                return (
                  <div
                    key={c.id || i}
                    onClick={function() { navigate({ name: 'chapter', chapterId: c.id }); }}
                    style={{ cursor: 'pointer' }}
                  >
                    <VakRow
                      t={t}
                      subject={c.subject}
                      chapter={c.chapter}
                      source={c.source}
                      masteryLevel={c.masteryLevel}
                      progress={c.progress}
                      isCurrent={isCurrent}
                      badge={badge}
                    />
                  </div>
                );
              })}
            </div>
          </div>

          {/* Mini-cursus rij */}
          <div>
            <SectionLabel t={t} right={
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
                4 mini-cursussen · elk ± 6 min
              </span>
            }>
              Studietechniek
            </SectionLabel>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              <MiniCursusCard t={t} title="Slim spreiden"
                subtitle="Waarom 4×15 min beter werkt dan 1 uur stampen"
                step={2} totalSteps={4} status="active" icon="calendar-clock" />
              <MiniCursusCard t={t} title="Actief ophalen"
                subtitle="Vragen stellen aan jezelf in plaats van herlezen"
                step={0} totalSteps={4} status="idle" icon="brain" />
              <MiniCursusCard t={t} title="Slaap &amp; geheugen"
                subtitle="Wat er 's nachts in je hoofd gebeurt met de stof"
                step={0} totalSteps={4} status="idle" icon="moon" />
              <MiniCursusCard t={t} title="Plannen voor leren"
                subtitle="Hoe verdeel je een hoofdstuk over een week?"
                step={0} totalSteps={4} status="idle" icon="map" />
            </div>
          </div>

          {/* Vraag Pulse */}
          <VraagPulseCard t={t} lastChat="Wat is het verschil tussen mitose en meiose?" />

        </div>

        {/* ── Right rail ── */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

          <div
            onClick={function() { navigate('review'); }}
            style={{ cursor: 'pointer' }}
          >
            <HerhalingenCard
              t={t}
              total={12}
              cappedAt={12}
              perVak={[
                { subject: 'biologie',     count: 5 },
                { subject: 'engels',       count: 4 },
                { subject: 'wiskunde',     count: 2 },
                { subject: 'geschiedenis', count: 1 },
              ]}
            />
          </div>

          <div>
            <SectionLabel t={t}>Pak op waar je was</SectionLabel>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div
                onClick={function() { console.log('doorgaan: hoofdstuk'); }}
                style={{ cursor: 'pointer' }}
              >
                <DoorgaanCard
                  t={t}
                  kind="hoofdstuk"
                  title="H3 §3.2 Mitose"
                  subject="biologie"
                  subtitle="gisteren · 8 min gelezen"
                  progress="35%"
                  icon="book-open"
                />
              </div>
              <div
                onClick={function() { console.log('doorgaan: chat'); }}
                style={{ cursor: 'pointer' }}
              >
                <DoorgaanCard
                  t={t}
                  kind="chat met pulse"
                  title="Wat is een organel?"
                  subtitle="gisteren · 6 berichten"
                  icon="message-circle"
                />
              </div>
            </div>
          </div>

          <FoutenanalyseCard t={t} subject="biologie" score={6} total={10} topic="Bio H3" />

          <div
            onClick={function() { navigate('oefenen'); }}
            style={{ cursor: 'pointer' }}
          >
            <HandoffCard
              t={t}
              pillar="oefenen"
              direction="to"
              title="Test wat je leerde"
              subtitle="Vrijwillige mini-quiz Bio H3 · 5 min"
              compact
            />
          </div>

          <div
            onClick={function() { navigate('plannen'); }}
            style={{ cursor: 'pointer' }}
          >
            <HandoffCard
              t={t}
              pillar="plannen"
              direction="to"
              title="Plan een focus-blok"
              subtitle="Suggestie: 25 min vandaag 16:00 voor Bio H3"
              compact
            />
          </div>

        </aside>

      </div>
    </LerenPage>
  );
}

window.LerenDashboardView = LerenDashboardView;