/* Flow C — Flashcard review-sessie
   3 states:
     C1: Eerste kaart, voorzijde (vraag)
     C2: Geflipt, achterkant + 3 rating-knoppen (Weer / Goed / Makkelijk)
     C3: Einde-sessie resultaten

   Vorm: takeover-sessie, eigen sfeer (niet Focus-mode purple — rustig
   blauw-neutraal). Geen drawer: ritme van kaart-flip-rating werkt niet
   in een zijpaneel, je hebt het hele oog nodig. */

function FlowC() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18 }}>
      <FlowCCol label="C1 · Voorzijde" tag="kaart 3 van 17 · Bio H4">
        <CStage><CCard state="front" /></CStage>
      </FlowCCol>
      <FlowCCol label="C2 · Geflipt" tag="achterkant · rating-keuze">
        <CStage><CCard state="flipped" /></CStage>
      </FlowCCol>
      <FlowCCol label="C3 · Klaar" tag="17 kaarten · terug naar Stapel">
        <CStage><CEnd /></CStage>
      </FlowCCol>
    </div>
  );
}

function FlowCCol({ label, tag, children }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 13, color: t.fg,
          background: t.cardHi, borderRadius: 7, padding: '4px 10px',
          letterSpacing: '-0.01em',
        }}>{label}</div>
        <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>{tag}</div>
      </div>
      {children}
    </div>
  );
}

function CStage({ children }) {
  const t = TK;
  return (
    <div style={{
      position: 'relative', height: 620, borderRadius: 14, overflow: 'hidden',
      background: `radial-gradient(ellipse at top, #0F1A2E 0%, ${t.bg} 60%)`,
      border: `1px solid ${t.border}`,
      display: 'flex', flexDirection: 'column',
    }}>
      {children}
    </div>
  );
}

/* ─── Sessie-kaart + header/footer ─── */
function CCard({ state }) {
  const t = TK;
  const flipped = state === 'flipped';
  return (
    <>
      <CHeader progress={3} total={17} />
      <div style={{ flex: 1, padding: '18px 22px 14px', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0 }}>

        {/* kaart */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: 12, minHeight: 0 }}>
          <div style={{
            flex: 1, borderRadius: 16, position: 'relative',
            background: flipped
              ? `linear-gradient(180deg, ${t.card}, color-mix(in srgb, ${t.primary} 6%, ${t.card}))`
              : t.card,
            border: `1.5px solid ${flipped ? 'color-mix(in srgb, ' + t.primary + ' 30%, transparent)' : t.border}`,
            boxShadow: flipped
              ? '0 20px 50px rgba(0,180,216,0.16), 0 0 0 1px rgba(0,180,216,0.2)'
              : '0 20px 40px rgba(0,0,0,0.5)',
            padding: '20px 22px',
            display: 'flex', flexDirection: 'column', gap: 12,
            overflow: 'hidden',
          }}>

            {/* side-label */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{
                fontSize: 8.5, fontWeight: 800, letterSpacing: 0.8, textTransform: 'uppercase',
                color: flipped ? t.primary : t.fgMute,
                background: flipped ? t.primaryDim : t.cardHi,
                padding: '2px 7px', borderRadius: 4,
              }}>{flipped ? 'Achterzijde' : 'Voorzijde'}</span>
              <span style={{ flex: 1 }} />
              <I name="volume-2" size={13} color={t.fgMute} />
              <I name="star" size={13} color={t.fgMute} />
            </div>

            {/* content */}
            {!flipped ? (
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16 }}>
                <div style={{ fontSize: 11, fontWeight: 800, color: t.primary, letterSpacing: 0.5, textTransform: 'uppercase' }}>
                  Vraag
                </div>
                <div style={{
                  fontFamily: 'Nunito', fontSize: 22, fontWeight: 800, color: t.fg,
                  lineHeight: 1.35, letterSpacing: '-0.01em',
                }}>
                  Welke cel-organellen zijn verantwoordelijk voor de eiwitsynthese?
                </div>
                <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 600, fontStyle: 'italic' }}>
                  · term → definitie
                </div>
              </div>
            ) : (
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{
                  fontFamily: 'Nunito', fontSize: 16, fontWeight: 700, color: t.fgDim,
                  lineHeight: 1.3,
                }}>
                  Welke cel-organellen zijn verantwoordelijk voor de eiwitsynthese?
                </div>
                <div style={{
                  height: 1, background: t.border,
                }} />
                <div style={{ fontSize: 11, fontWeight: 800, color: t.primary, letterSpacing: 0.5, textTransform: 'uppercase' }}>
                  Antwoord
                </div>
                <div style={{
                  fontFamily: 'Nunito', fontSize: 20, fontWeight: 800, color: t.fg,
                  lineHeight: 1.35,
                }}>
                  <b style={{ color: t.primary }}>Ribosomen</b> — komen vrij voor in het cytoplasma of zitten vast aan het <b style={{ color: t.primary }}>ruw endoplasmatisch reticulum</b>.
                </div>
                <div style={{ flex: 1 }} />
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  padding: '6px 8px', background: t.cardHi, borderRadius: 6,
                  fontSize: 10.5, color: t.fgDim, fontWeight: 600,
                }}>
                  <I name="book-open" size={11} color={t.fgMute} />
                  Uit: Bio H4 · Celbiologie · § 4.2
                </div>
              </div>
            )}
          </div>

          {/* flip-hint of rating */}
          {!flipped ? (
            <div style={{
              height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 11,
              color: t.fgDim, fontSize: 12, fontWeight: 700,
              cursor: 'pointer',
            }}>
              <I name="refresh-cw" size={13} />
              Tik om te draaien · <kbd style={kbdStyle(t)}>Space</kbd>
            </div>
          ) : (
            <div style={{ display: 'flex', gap: 6 }}>
              <RatingBtn kind="weer" label="Weer" hint="< 1 min" icon="rotate-ccw" />
              <RatingBtn kind="goed" label="Goed" hint="3 dagen" icon="check" primary />
              <RatingBtn kind="makkelijk" label="Makkelijk" hint="7 dagen" icon="sparkles" />
            </div>
          )}
        </div>
      </div>

      <CFooter mood={flipped ? 'encouraging' : 'thinking'} streak={2} />
    </>
  );
}

function CHeader({ progress, total }) {
  const t = TK;
  const pct = (progress / total) * 100;
  return (
    <div style={{
      padding: '14px 20px 12px', borderBottom: `1px solid ${t.border}`,
      background: t.topbar, flexShrink: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <button style={{
          width: 28, height: 28, borderRadius: 7, background: t.card,
          border: `1px solid ${t.border}`, color: t.fgDim,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><I name="x" size={13} /></button>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <SubjPill k="biologie" size="sm" />
            <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>·</span>
            <span style={{ fontSize: 10.5, fontWeight: 700, color: t.fgDim }}>Quiz H4 · Celbiologie</span>
          </div>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg, marginTop: 2 }}>
            Flashcards herhalen
          </div>
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'baseline', gap: 3,
          background: t.card, border: `1px solid ${t.border}`,
          borderRadius: 9, padding: '5px 12px',
        }}>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.primary }}>{progress}</span>
          <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 800 }}>/ {total}</span>
        </div>
      </div>
      {/* progress bar with SRS dots */}
      <div style={{ position: 'relative', height: 4, background: t.cardHi, borderRadius: 9999, overflow: 'visible' }}>
        <div style={{
          width: `${pct}%`, height: '100%',
          background: `linear-gradient(90deg, ${t.primary}, #60E6FF)`,
          borderRadius: 9999,
        }} />
      </div>
    </div>
  );
}

function RatingBtn({ kind, label, hint, icon, primary }) {
  const t = TK;
  const colors = {
    weer: { bg: 'rgba(239,68,68,0.12)', fg: t.red, bd: 'rgba(239,68,68,0.3)' },
    goed: { bg: t.primary, fg: '#07090F', bd: 'transparent' },
    makkelijk: { bg: 'rgba(34,197,94,0.12)', fg: t.green, bd: 'rgba(34,197,94,0.3)' },
  };
  const c = colors[kind];
  return (
    <div style={{
      flex: 1, height: 54, borderRadius: 11,
      background: c.bg, color: c.fg,
      border: `1.5px solid ${c.bd}`,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
      cursor: 'pointer',
      boxShadow: primary ? '0 10px 24px rgba(0,180,216,0.3)' : 'none',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <I name={icon} size={13} strokeWidth={2.5} />
        <span style={{ fontFamily: 'Nunito', fontSize: 13, fontWeight: 800 }}>{label}</span>
      </div>
      <span style={{
        fontSize: 9.5, fontWeight: 700,
        opacity: primary ? 0.7 : 0.8,
      }}>{hint}</span>
    </div>
  );
}

function CFooter({ mood, streak }) {
  const t = TK;
  return (
    <div style={{
      padding: '10px 20px', borderTop: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
      background: t.bg,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 9,
        background: 'rgba(0,180,216,0.1)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <PulseMascot variant="glow" mood={mood} size="sm" />
      </div>
      <div style={{ flex: 1, minWidth: 0, fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.35 }}>
        {mood === 'thinking' ? 'Neem de tijd.' : <span><b style={{ color: t.fg }}>{streak} op rij goed</b> — lekker tempo.</span>}
      </div>
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 4,
        fontFamily: 'Fredoka One', fontSize: 12, color: t.gold,
      }}>
        <I name="zap" size={11} fill={t.gold} color={t.gold} strokeWidth={0} />
        +{mood === 'thinking' ? 0 : streak * 2}
      </span>
      <button style={{
        width: 28, height: 28, borderRadius: 7, background: t.card,
        border: `1px solid ${t.border}`, color: t.fgDim,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><I name="settings" size={12} /></button>
    </div>
  );
}

function kbdStyle(t) {
  return {
    fontFamily: 'Nunito', fontSize: 10, fontWeight: 800,
    background: t.cardHi, border: `1px solid ${t.border}`,
    padding: '2px 6px', borderRadius: 4,
    color: t.fg,
  };
}

/* ─── C3 — Einde sessie ─── */
function CEnd() {
  const t = TK;
  return (
    <>
      <div style={{ padding: '14px 20px', borderBottom: `1px solid ${t.border}`, background: t.topbar, flexShrink: 0,
        display: 'flex', alignItems: 'center', gap: 10 }}>
        <SubjPill k="biologie" size="sm" />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg }}>Sessie klaar</span>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 10.5, fontWeight: 700, color: t.fgMute }}>4 min 22 sec</span>
      </div>

      <div style={{ flex: 1, padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>

        {/* Pulse trots */}
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          padding: '10px 0 4px',
        }}>
          <div style={{
            width: 70, height: 70, borderRadius: 18,
            background: `radial-gradient(circle, rgba(34,197,94,0.2), transparent 70%)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <PulseMascot variant="glow" mood="proud" size="md" />
          </div>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.fg, letterSpacing: '-0.02em' }}>
            17 kaarten herhaald
          </div>
          <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, textAlign: 'center', maxWidth: 280 }}>
            Solide sessie — <b style={{ color: t.green }}>14 goed</b>, 3 terug in de korte-termijn bak.
          </div>
        </div>

        {/* rating breakdown */}
        <div style={{
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
          padding: 12, display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>
            Verdeling
          </div>
          <div style={{ display: 'flex', gap: 2, height: 28, borderRadius: 8, overflow: 'hidden' }}>
            <div style={{ flex: 3, background: 'rgba(239,68,68,0.5)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 800, color: '#fff' }}>3</div>
            <div style={{ flex: 10, background: t.primary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 800, color: '#07090F' }}>10</div>
            <div style={{ flex: 4, background: 'rgba(34,197,94,0.6)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 800, color: '#07090F' }}>4</div>
          </div>
          <div style={{ display: 'flex', gap: 10, fontSize: 10.5, fontWeight: 700 }}>
            <span style={{ color: t.red }}>● Weer · 3</span>
            <span style={{ color: t.primary }}>● Goed · 10</span>
            <span style={{ color: t.green }}>● Makkelijk · 4</span>
          </div>
        </div>

        {/* stats strip */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <StatBlock label="Sessie-streak" value="11" unit="op rij" color={t.gold} icon="flame" />
          <StatBlock label="Snaps verdiend" value="+34" unit="" color={t.gold} icon="zap" />
        </div>

        {/* SRS next */}
        <div style={{
          background: 'rgba(0,180,216,0.06)',
          border: '1px solid rgba(0,180,216,0.24)',
          borderRadius: 10, padding: '10px 12px',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8, background: t.primaryDim, color: t.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <I name="calendar-clock" size={14} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, fontWeight: 800, color: t.primary, letterSpacing: 0.5, textTransform: 'uppercase' }}>
              Volgende review
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: t.fg, marginTop: 1, lineHeight: 1.35 }}>
              Over <b>3 dagen</b> — 14 kaarten. Drie <span style={{ color: t.red }}>wéér</span>-kaarten morgen terug.
            </div>
          </div>
        </div>
      </div>

      {/* footer CTAs */}
      <div style={{
        padding: '12px 16px', borderTop: `1px solid ${t.border}`,
        display: 'flex', gap: 6, flexShrink: 0,
      }}>
        <button style={{ ...shellBtn(t, 'ghost'), flex: 1, height: 38, justifyContent: 'center', fontSize: 11.5, padding: '0 8px', minWidth: 0 }}>
          <I name="rotate-cw" size={12} /> Nog een ronde
        </button>
        <button style={{
          flex: 1.2, height: 38, borderRadius: 10, border: 0,
          background: t.primary, color: '#07090F',
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5,
          boxShadow: '0 8px 20px rgba(0,180,216,0.28)',
          minWidth: 0, padding: '0 8px',
        }}>
          <I name="arrow-left" size={12} strokeWidth={3} /> Terug naar Stapel
        </button>
      </div>
    </>
  );
}

function StatBlock({ label, value, unit, color, icon }) {
  const t = TK;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 10,
      padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: `color-mix(in srgb, ${color} 18%, transparent)`,
        color, display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <I name={icon} size={14} fill="currentColor" strokeWidth={0} color={color} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.5, textTransform: 'uppercase' }}>
          {label}
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg }}>{value}</span>
          {unit && <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>{unit}</span>}
        </div>
      </div>
    </div>
  );
}

window.FlowC = FlowC;