/* Paradigma 3 — Het Pad
   Single-focus. Eén taak groot midden-links. Volgende gluurt erachter.
   Rechts: verticaal pad naar de eerstvolgende deadline. */

function Paradigm3() {
  const t = TK;

  const active = {
    subject: 'biologie',
    title: 'Celbiologie § 4.2 — lezen',
    detail: '8 bladzijden · maak 2 mindmap-punten',
    mins: 25, source: 'Bio — vrijdag',
  };
  const next = {
    subject: 'biologie',
    title: '10 flashcards herhalen',
    mins: 15,
  };

  // Path — bottom is now, top is the deadline
  const path = [
    { kind: 'deadline', subject: 'biologie', label: 'Bio-toets', when: 'vrij 12 okt', days: 2 },
    { kind: 'day',  label: 'donderdag', mins: 40, tasks: 2, subjects: ['biologie'] },
    { kind: 'day',  label: 'vrijdag ochtend', mins: 20, tasks: 1, subjects: ['biologie'], isReview: true },
    { kind: 'here', label: 'vandaag', mins: 50, tasks: 3, subjects: ['biologie', 'wiskunde'] },
  ];

  return (
    <div className="is-dark" style={{
      display: 'flex', height: 880, background: t.bg,
      color: t.fg, fontFamily: 'Nunito',
    }}>
      <Sidebar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar
          title="Plannen"
          subtitle="Woensdag 10 okt · jouw pad naar vrijdag"
          rightExtra={
            <button style={zoomOutBtn(t)}>
              <I name="maximize-2" size={13} />  Uitzoomen
            </button>
          }
        />

        <main style={{
          flex: 1, minHeight: 0, display: 'grid',
          gridTemplateColumns: '1.55fr 0.75fr', gap: 0, overflow: 'hidden',
        }}>

          {/* ───── LEFT: focus stage ───── */}
          <section style={{
            padding: '36px 40px 32px',
            display: 'flex', flexDirection: 'column', gap: 22, minHeight: 0,
            position: 'relative', overflow: 'hidden',
            background: `
              radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,208,0,0.08), transparent 60%),
              radial-gradient(circle at 50% 0%, rgba(0,180,216,0.04), transparent 50%)
            `,
          }}>

            {/* context breadcrumb */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.8, textTransform: 'uppercase' }}>
                Eén ding tegelijk
              </span>
              <div style={{ flex: 1, height: 1, background: t.border }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 5,
                fontSize: 11, color: t.fgDim, fontWeight: 700 }}>
                <Dot c={t.primary} size={6} />
                <span><b style={{ color: t.fg }}>Taak 1</b> van 3 vandaag</span>
              </div>
            </div>

            {/* the next card (peeking, behind) */}
            <div style={{ position: 'relative', flex: 1, minHeight: 420 }}>
              <PeekingCard task={next} />
              <FocusCard task={active} />
            </div>

            {/* actions footer */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 10,
              paddingTop: 16, borderTop: `1px solid ${t.border}`,
            }}>
              <button style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '16px 22px',
                borderRadius: 14, background: t.primary, color: '#07090F', border: 0, cursor: 'pointer',
                fontFamily: 'Nunito', textAlign: 'left', justifyContent: 'center',
                boxShadow: '0 10px 24px rgba(0,180,216,0.28)',
              }}>
                <I name="play" size={18} fill="currentColor" color="#07090F" strokeWidth={0} />
                <span style={{ fontFamily: 'Fredoka One', fontSize: 18, letterSpacing: '-0.01em' }}>Begin nu</span>
                <span style={{ fontSize: 12, fontWeight: 700, opacity: 0.65, marginLeft: 4 }}>· 25 min</span>
              </button>
              <button style={bigGhost(t)}>
                <I name="check" size={16} color={t.fgDim} />
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                  <span style={{ fontWeight: 800, fontSize: 13, color: t.fg }}>Al gedaan</span>
                  <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>Sla over</span>
                </div>
              </button>
              <button style={bigGhost(t)}>
                <I name="calendar-x-2" size={16} color={t.fgDim} />
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                  <span style={{ fontWeight: 800, fontSize: 13, color: t.fg }}>Verzetten</span>
                  <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>Naar morgen</span>
                </div>
              </button>
            </div>

          </section>

          {/* ───── RIGHT: the path ───── */}
          <section style={{
            padding: '28px 28px 28px 0',
            display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0,
            borderLeft: `1px solid ${t.border}`,
          }}>
            <div style={{ padding: '0 0 0 24px' }}>
              <div style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 6 }}>
                Jouw pad
              </div>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 20, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
                Naar <span style={{ color: SUBJECTS.biologie.color }}>Bio-toets</span>
              </div>
              <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, marginTop: 4 }}>
                3 studiemomenten tot vrijdag
              </div>
            </div>

            {/* path visualization */}
            <div style={{
              flex: 1, position: 'relative', padding: '12px 24px 12px',
              display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
              overflow: 'hidden',
            }}>
              <PathViz steps={path} />
            </div>

            {/* bottom: daily snap-progress */}
            <div style={{
              margin: '0 24px', padding: '14px 16px',
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 14,
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <I name="target" size={14} color={t.gold} />
                <span style={{ fontSize: 12, fontWeight: 800, color: t.fg }}>Klaar voor vrijdag</span>
                <span style={{ flex: 1 }} />
                <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.gold }}>35%</span>
              </div>
              <div style={{ position: 'relative', height: 8, background: t.cardHi, borderRadius: 9999, overflow: 'hidden' }}>
                <div style={{
                  width: '35%', height: '100%', background: `linear-gradient(90deg, ${SUBJECTS.biologie.color}, ${t.gold})`,
                  borderRadius: 9999,
                }} />
                <div style={{
                  position: 'absolute', left: '55%', top: -2, bottom: -2, width: 2,
                  background: t.primary, borderRadius: 2,
                }} />
                <div style={{
                  position: 'absolute', left: 'calc(55% - 14px)', top: -22,
                  fontSize: 9, fontWeight: 800, color: t.primary, letterSpacing: 0.3,
                  whiteSpace: 'nowrap',
                }}>na vandaag</div>
              </div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>
                  Op koers — <b style={{ color: t.green }}>ruim</b>. Geen paniek.
                </span>
              </div>
            </div>

            {/* tiny "other things" reminder */}
            <div style={{ padding: '0 24px' }}>
              <button style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 14px', borderRadius: 10,
                background: 'transparent', color: t.fgDim,
                border: `1px dashed ${t.border}`, cursor: 'pointer',
                fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, textAlign: 'left',
              }}>
                <I name="list" size={14} />
                <span style={{ flex: 1 }}>Andere vakken · Wi, En, Gs</span>
                <span style={{ fontSize: 11, color: t.fgMute }}>volgende week</span>
                <I name="chevron-right" size={14} />
              </button>
            </div>

          </section>

        </main>
      </div>
    </div>
  );
}

// ───── focus card (the one big card) ─────
function FocusCard({ task }) {
  const t = TK;
  const s = SUBJECTS[task.subject];
  return (
    <div style={{
      position: 'absolute', inset: '0 0 0 0', zIndex: 2,
      background: `linear-gradient(180deg, ${t.cardHi} 0%, ${t.card} 100%)`,
      border: `1.5px solid ${t.border}`, borderRadius: 20,
      padding: '28px 32px', display: 'flex', flexDirection: 'column', gap: 18,
      boxShadow: '0 40px 80px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04)',
      overflow: 'hidden',
    }}>
      {/* subject ambient */}
      <div style={{
        position: 'absolute', top: -80, right: -80, width: 320, height: 320,
        borderRadius: '50%', background: `radial-gradient(circle, color-mix(in srgb, ${s.color} 30%, transparent), transparent 70%)`,
        opacity: 0.3, pointerEvents: 'none',
      }} />

      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative' }}>
        <SubjPill k={task.subject} size="md" />
        <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· {task.source}</span>
        <span style={{ flex: 1 }} />
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '5px 12px', borderRadius: 9999,
          background: t.cardHi, color: t.fgDim,
          fontFamily: 'Fredoka One', fontSize: 13,
        }}>
          <I name="clock" size={12} />
          {task.mins}<span style={{ fontFamily: 'Nunito', fontSize: 11, fontWeight: 800 }}>min</span>
        </div>
      </div>

      {/* big title area */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16,
        position: 'relative', zIndex: 1 }}>

        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{
            width: 72, height: 72, borderRadius: 18, flexShrink: 0,
            background: `linear-gradient(135deg, color-mix(in srgb, ${s.color} 30%, transparent), color-mix(in srgb, ${s.color} 10%, transparent))`,
            border: `1px solid color-mix(in srgb, ${s.color} 36%, transparent)`,
            color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <I name={s.icon} size={34} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 800, color: t.primary, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 6 }}>
              Nu
            </div>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 30, color: t.fg, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
              {task.title}
            </div>
          </div>
        </div>

        <div style={{
          padding: '14px 16px', background: t.cardAlt, borderRadius: 12,
          border: `1px solid ${t.border}`,
          display: 'flex', alignItems: 'flex-start', gap: 12,
        }}>
          <I name="list-checks" size={16} color={t.fgDim} style={{ marginTop: 2 }} />
          <div style={{ fontSize: 13.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55 }}>
            {task.detail}
          </div>
        </div>
      </div>

      {/* corner mascot */}
      <div style={{ position: 'absolute', bottom: 20, right: 24, zIndex: 1 }}>
        <PulseMascot variant="glow" mood="encouraging" size="sm" eyeAnimation="warm" />
      </div>
    </div>
  );
}

function PeekingCard({ task }) {
  const t = TK;
  const s = SUBJECTS[task.subject];
  return (
    <div style={{
      position: 'absolute', top: 28, left: 24, right: 24, bottom: -8, zIndex: 1,
      background: t.cardAlt, border: `1px solid ${t.border}`, borderRadius: 20,
      padding: '16px 22px', opacity: 0.6, filter: 'blur(0.4px)',
      transform: 'scale(0.97) translateY(-14px)', transformOrigin: '50% 0',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <I name="arrow-down" size={13} color={t.fgMute} />
      <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>
        Daarna
      </span>
      <div style={{ width: 1, height: 14, background: t.border }} />
      <SubjPill k={task.subject} size="sm" muted />
      <span style={{ fontSize: 13, fontWeight: 800, color: t.fgDim, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
        {task.title}
      </span>
      <span style={{ fontSize: 11, fontWeight: 800, color: t.fgMute }}>{task.mins} min</span>
    </div>
  );
}

// ───── vertical path (bottom = now, top = deadline) ─────
function PathViz({ steps }) {
  const t = TK;
  return (
    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* vertical spine */}
      <div style={{
        position: 'absolute', left: 19, top: 16, bottom: 16, width: 2,
        background: `linear-gradient(180deg, ${SUBJECTS.biologie.color} 0%, ${t.gold} 50%, ${t.primary} 100%)`,
        borderRadius: 2, opacity: 0.5,
      }} />
      {steps.map((s, i) => <PathStep key={i} step={s} isLast={i === steps.length - 1} />)}
    </div>
  );
}

function PathStep({ step, isLast }) {
  const t = TK;
  if (step.kind === 'deadline') {
    const bg = SUBJECTS[step.subject].color;
    return (
      <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-start', gap: 12, zIndex: 1 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 9999, flexShrink: 0,
          background: bg, color: '#07090F',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 0 0 4px color-mix(in srgb, ${bg} 22%, transparent), 0 10px 24px color-mix(in srgb, ${bg} 36%, transparent)`,
          border: `2px solid ${t.bg}`,
        }}>
          <I name="flag" size={18} strokeWidth={3} fill="currentColor" color="#07090F" />
        </div>
        <div style={{
          flex: 1, background: `color-mix(in srgb, ${bg} 14%, transparent)`,
          border: `1px solid color-mix(in srgb, ${bg} 34%, transparent)`,
          borderRadius: 12, padding: '10px 12px',
        }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: bg, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 3 }}>
            Eindpunt
          </div>
          <div style={{ fontSize: 14, fontWeight: 800, color: t.fg, lineHeight: 1.2 }}>{step.label}</div>
          <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 700, marginTop: 2 }}>
            {step.when} · nog {step.days} {step.days === 1 ? 'dag' : 'dagen'}
          </div>
        </div>
      </div>
    );
  }
  if (step.kind === 'here') {
    return (
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12, zIndex: 1 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 9999, flexShrink: 0,
          background: t.primary, color: '#07090F',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 0 0 4px rgba(0,180,216,0.22), 0 0 0 8px rgba(0,180,216,0.08), 0 10px 24px rgba(0,180,216,0.4)`,
          border: `2px solid ${t.bg}`,
          fontFamily: 'Fredoka One', fontSize: 14,
        }}>
          <div style={{
            position: 'absolute', inset: -6, borderRadius: 9999,
            border: `2px solid ${t.primary}`, animation: 'ring-pulse 2.5s ease-in-out infinite',
          }} />
          <I name="user" size={17} strokeWidth={3} />
        </div>
        <div style={{
          flex: 1, background: t.primaryDim,
          border: `1.5px solid ${t.primary}`,
          borderRadius: 12, padding: '10px 12px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
            <span style={{ fontSize: 10, fontWeight: 800, color: t.primary, letterSpacing: 0.6, textTransform: 'uppercase' }}>
              Hier ben je
            </span>
            <span style={{ fontSize: 10, fontWeight: 700, color: t.fgMute }}>· {step.label}</span>
          </div>
          <div style={{ fontSize: 13.5, fontWeight: 800, color: t.fg }}>
            {step.tasks} taken · ±{step.mins} min
          </div>
        </div>
      </div>
    );
  }
  // day step
  const primary = SUBJECTS[step.subjects[0]];
  return (
    <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12, zIndex: 1 }}>
      <div style={{
        width: 40, height: 40, borderRadius: 9999, flexShrink: 0,
        background: t.card, color: t.fgDim,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: `2px solid ${t.border}`,
        position: 'relative',
      }}>
        <I name={step.isReview ? 'repeat-2' : 'book-open'} size={15} />
      </div>
      <div style={{
        flex: 1, background: t.card,
        border: `1px solid ${t.border}`,
        borderRadius: 12, padding: '10px 12px',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
            <span style={{ fontSize: 11, fontWeight: 800, color: t.fg }}>{step.label}</span>
            {step.isReview && (
              <span style={{ fontSize: 9, fontWeight: 800, color: t.gold, letterSpacing: 0.5, textTransform: 'uppercase',
                padding: '1px 6px', background: t.goldDim, borderRadius: 4 }}>herhaling</span>
            )}
          </div>
          <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>
            {step.tasks} taken · ~{step.mins} min
          </div>
        </div>
        <div style={{ display: 'flex', gap: 3 }}>
          {step.subjects.map((k, i) => (
            <div key={i} style={{
              width: 18, height: 18, borderRadius: 6,
              background: `color-mix(in srgb, ${SUBJECTS[k].color} 16%, transparent)`,
              color: SUBJECTS[k].color,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <I name={SUBJECTS[k].icon} size={10} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ───── buttons ─────
function bigGhost(t) {
  return {
    display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px',
    borderRadius: 14, background: t.card, color: t.fg,
    border: `1px solid ${t.border}`, cursor: 'pointer',
    fontFamily: 'Nunito', textAlign: 'left',
  };
}
function zoomOutBtn(t) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    height: 32, padding: '0 12px', borderRadius: 9,
    background: t.card, color: t.fgDim,
    border: `1px solid ${t.border}`,
    fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, cursor: 'pointer',
  };
}

window.Paradigm3 = Paradigm3;