/* Paradigma 1 — De Stapel
   Overzicht met mening. Week-strip boven, 2-kolom:
   LEFT: komende toetsen (deadlines)  |  RIGHT: vandaag-stapel (hero) */

function Paradigm1() {
  const t = TK;

  // Data — deze middag
  const todayTasks = [
    {
      id: 1, subject: 'biologie', title: 'Celbiologie — § 4.2 lezen',
      detail: '8 bladzijden · maak 2 mindmap-punten', mins: 25, type: 'lezen',
      source: 'Bio — toets vrijdag', progress: 0, active: true,
    },
    {
      id: 2, subject: 'biologie', title: '10 flashcards herhalen',
      detail: 'Afgelopen 2 dagen · mix nieuw + herhaling', mins: 15, type: 'flashcards',
      source: 'Bio — spaced repetition', progress: 0,
    },
    {
      id: 3, subject: 'wiskunde', title: 'Oefeningen § 2.3',
      detail: '4 sommen over kwadratische vergelijkingen', mins: 10, type: 'quiz',
      source: 'Wi — SO maandag', progress: 0,
    },
  ];

  const upcoming = [
    { subject: 'biologie',     title: 'H4 · Celbiologie',      type: 'Toets',    when: 'vrij 12 okt', daysLeft: 2, progress: 0.35, spread: 4 },
    { subject: 'wiskunde',     title: 'SO · Functies',          type: 'SO',       when: 'ma 15 okt', daysLeft: 5, progress: 0.60, spread: 3 },
    { subject: 'engels',       title: 'Schrijfopdracht · Essay',type: 'Inleveren',when: 'do 18 okt', daysLeft: 8, progress: 0.10, spread: 2 },
    { subject: 'geschiedenis', title: 'H3 · Napoleontische tijd',type: 'Toets',   when: 'vr 19 okt', daysLeft: 9, progress: 0.05, spread: 4 },
  ];

  // 7-day strip — wo 10 okt is today
  const week = [
    { day: 'ma',  date:  8, items: [{ s: 'biologie', dots: 2 }] },
    { day: 'di',  date:  9, items: [{ s: 'wiskunde', dots: 1 }] },
    { day: 'wo',  date: 10, items: [{ s: 'biologie', dots: 1 }, { s: 'wiskunde', dots: 1 }], today: true },
    { day: 'do',  date: 11, items: [{ s: 'biologie', dots: 2 }] },
    { day: 'vr',  date: 12, items: [], deadline: 'biologie', dlLabel: 'Bio toets' },
    { day: 'za',  date: 13, items: [] },
    { day: 'zo',  date: 14, items: [{ s: 'wiskunde', dots: 2 }] },
  ];

  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 · je middag in één blik"
        />

        <main style={{
          flex: 1, overflow: 'hidden', padding: '24px 28px 28px',
          display: 'flex', flexDirection: 'column', gap: 20,
        }}>

          {/* ───── WEEK STRIP ───── */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em' }}>Week 41</div>
                <span style={{ fontSize: 12, color: t.fgMute, fontWeight: 600 }}>7–13 okt · vrijdag is je toetsdag</span>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button style={btnGhost(t)}>
                  <I name="chevron-left" size={14} />
                </button>
                <button style={btnGhost(t)}>
                  <I name="calendar" size={14} />  Maand
                </button>
                <button style={btnGhost(t)}>
                  <I name="chevron-right" size={14} />
                </button>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 10 }}>
              {week.map((d, i) => (
                <WeekCell key={i} d={d} />
              ))}
            </div>
          </div>

          {/* ───── TWO COLUMN: deadlines | vandaag ───── */}
          <div style={{
            flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.15fr',
            gap: 20, minHeight: 0,
          }}>

            {/* LEFT — Komende toetsen */}
            <section style={{ display: 'flex', flexDirection: 'column', minHeight: 0, gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <h2 style={h2(t)}>Komende toetsen</h2>
                  <span style={countPill(t)}>{upcoming.length}</span>
                </div>
                <button style={btnPrimaryGhost(t)}>
                  <I name="plus" size={13} />  Nieuwe deadline
                </button>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, overflow: 'auto', paddingRight: 4 }}>
                {upcoming.map((u, i) => (
                  <DeadlineCard key={i} u={u} />
                ))}
              </div>
            </section>

            {/* RIGHT — Vandaag-stapel */}
            <section style={{ display: 'flex', flexDirection: 'column', minHeight: 0, gap: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Dot c={t.primary} size={8} />
                  <h2 style={{ ...h2(t), color: t.primary }}>Vandaag</h2>
                  <span style={{ ...countPill(t), background: t.primaryDim, color: t.primary,
                    border: `1px solid color-mix(in srgb, ${t.primary} 26%, transparent)` }}>
                    3 taken · ±50 min
                  </span>
                </div>
                <button style={btnGhost(t)}>
                  <I name="settings-2" size={13} />  Aanpassen
                </button>
              </div>

              <ActiveTaskCard task={todayTasks[0]} />
              <QueueTask task={todayTasks[1]} />
              <QueueTask task={todayTasks[2]} />

              {/* Daily summary strip */}
              <div style={{
                marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 14,
                background: t.card, border: `1px solid ${t.border}`, borderRadius: 14,
                padding: '12px 16px',
              }}>
                <PulseMascot variant="glow" mood="happy" size="sm" eyeAnimation="blink" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg, marginBottom: 2 }}>
                    Lekker — 3 taken, meeste in Bio
                  </div>
                  <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.45 }}>
                    Na vandaag ben je op <b style={{ color: t.green }}>~55%</b> voor vrijdag.
                    Pulse geeft geen commando's — jij bepaalt de volgorde.
                  </div>
                </div>
                <button style={btnPrimary(t)}>
                  <I name="play" size={13} fill="currentColor" color="#07090F" strokeWidth={0} />
                  Start middag
                </button>
              </div>
            </section>

          </div>

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

// ───── sub-components ─────

function WeekCell({ d }) {
  const t = TK;
  const isToday = !!d.today;
  const isDeadline = !!d.deadline;
  const spec = isDeadline ? SUBJECTS[d.deadline] : null;

  return (
    <div style={{
      background: isToday ? t.primarySoft : t.card,
      border: `1px solid ${isToday ? t.primary : t.border}`,
      borderRadius: 12, padding: '10px 10px 12px',
      display: 'flex', flexDirection: 'column', gap: 8, minHeight: 112,
      position: 'relative', overflow: 'hidden',
      boxShadow: isToday ? `0 8px 20px rgba(0,180,216,0.12)` : 'none',
    }}>
      {isToday && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 3,
          background: `linear-gradient(90deg, ${t.primary}, transparent)`,
        }} />
      )}

      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span style={{
          fontSize: 10, fontWeight: 800, color: isToday ? t.primary : t.fgMute,
          letterSpacing: 0.8, textTransform: 'uppercase',
        }}>{d.day}{isToday ? ' · vandaag' : ''}</span>
        <span style={{
          fontFamily: 'Fredoka One', fontSize: 17, lineHeight: 1,
          color: isToday ? t.primary : t.fg, letterSpacing: '-0.01em',
        }}>{d.date}</span>
      </div>

      {isDeadline ? (
        <div style={{
          marginTop: 2, background: `color-mix(in srgb, ${spec.color} 20%, transparent)`,
          border: `1px solid color-mix(in srgb, ${spec.color} 40%, transparent)`,
          borderRadius: 8, padding: '6px 8px',
          display: 'flex', flexDirection: 'column', gap: 2,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <I name={spec.icon} size={10} color={spec.color} />
            <span style={{ fontSize: 9, fontWeight: 800, color: spec.color, letterSpacing: 0.6, textTransform: 'uppercase' }}>Toets</span>
          </div>
          <span style={{ fontSize: 11, fontWeight: 800, color: t.fg }}>{d.dlLabel}</span>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {d.items.length === 0
            ? <div style={{ fontSize: 10, color: t.fgMute, fontWeight: 600, fontStyle: 'italic' }}>— leeg —</div>
            : d.items.map((it, i) => {
                const s = SUBJECTS[it.s];
                return (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    background: `color-mix(in srgb, ${s.color} 10%, transparent)`,
                    borderRadius: 6, padding: '3px 6px',
                  }}>
                    <div style={{ width: 5, height: 5, borderRadius: 9999, background: s.color }} />
                    <span style={{ fontSize: 10, fontWeight: 700, color: s.color, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {s.label.slice(0,4)}{it.dots > 1 ? ` · ${it.dots}×` : ''}
                    </span>
                  </div>
                );
              })
          }
        </div>
      )}
    </div>
  );
}

function DeadlineCard({ u }) {
  const t = TK;
  const s = SUBJECTS[u.subject];
  const isSoon = u.daysLeft <= 3;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 14,
      padding: 14, display: 'flex', flexDirection: 'column', gap: 10,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* subject-tinted left rail */}
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
        background: `linear-gradient(180deg, ${s.color}, transparent)`,
        opacity: 0.8,
      }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <SubjPill k={u.subject} size="sm" />
        <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>{u.type}</span>
        <span style={{ flex: 1 }} />
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          background: isSoon ? t.redDim : t.cardHi, color: isSoon ? t.red : t.fgDim,
          border: `1px solid ${isSoon ? 'rgba(239,68,68,0.3)' : t.border}`,
          borderRadius: 9999, padding: '3px 10px',
          fontFamily: 'Fredoka One', fontSize: 12, lineHeight: 1,
        }}>
          <span>{u.daysLeft}</span>
          <span style={{ fontFamily: 'Nunito', fontSize: 10, fontWeight: 800 }}>dagen</span>
        </div>
      </div>
      <div style={{ fontSize: 14, fontWeight: 800, color: t.fg, lineHeight: 1.35 }}>{u.title}</div>
      <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>{u.when}</div>

      {/* progress */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1, height: 5, background: t.cardHi, borderRadius: 9999, overflow: 'hidden' }}>
          <div style={{
            width: `${u.progress * 100}%`, height: '100%',
            background: `linear-gradient(90deg, ${s.color}, color-mix(in srgb, ${s.color} 70%, #FFF))`,
            borderRadius: 9999,
          }} />
        </div>
        <span style={{ fontSize: 11, fontWeight: 800, color: t.fgDim, fontVariantNumeric: 'tabular-nums' }}>
          {Math.round(u.progress * 100)}%
        </span>
      </div>

      {/* spread preview + action */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 4, borderTop: `1px solid ${t.border}` }}>
        <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
          <b style={{ color: t.fg }}>{u.spread}</b> studiemomenten tot deadline
        </span>
        <span style={{ flex: 1 }} />
        <button style={{ ...btnGhost(t), padding: '6px 10px' }}>
          <I name="arrow-right" size={12} />
        </button>
      </div>
    </div>
  );
}

function ActiveTaskCard({ task }) {
  const t = TK;
  const s = SUBJECTS[task.subject];
  return (
    <div style={{
      background: `linear-gradient(180deg, ${t.cardHi} 0%, ${t.card} 100%)`,
      border: `1.5px solid ${t.primary}`, borderRadius: 16,
      padding: '18px 18px 16px', display: 'flex', gap: 14,
      boxShadow: `0 12px 32px rgba(0,180,216,0.15), inset 0 0 0 1px rgba(0,180,216,0.08)`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* ambient glow */}
      <div style={{
        position: 'absolute', top: -40, right: -40, width: 180, height: 180,
        borderRadius: '50%', background: `radial-gradient(circle, ${t.primary}, transparent 70%)`,
        opacity: 0.22, pointerEvents: 'none',
      }} />

      {/* subject stripe */}
      <div style={{
        flexShrink: 0, width: 48, display: 'flex', flexDirection: 'column',
        alignItems: 'center', gap: 10, position: 'relative', zIndex: 1,
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: `color-mix(in srgb, ${s.color} 18%, transparent)`,
          border: `1px solid color-mix(in srgb, ${s.color} 36%, transparent)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: s.color,
        }}>
          <I name={s.icon} size={20} />
        </div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 11, color: t.fgMute, letterSpacing: 0.3 }}>1/3</div>
      </div>

      <div style={{ flex: 1, minWidth: 0, position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <SubjPill k={task.subject} size="sm" />
          <span style={{ fontSize: 10, fontWeight: 800, color: t.primary, letterSpacing: 0.6, textTransform: 'uppercase' }}>
            · Nu aan de beurt
          </span>
        </div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1.2, marginBottom: 4 }}>
          {task.title}
        </div>
        <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 500, lineHeight: 1.45, marginBottom: 10 }}>
          {task.detail}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button style={{ ...btnPrimary(t), padding: '10px 16px' }}>
            <I name="play" size={14} fill="currentColor" color="#07090F" strokeWidth={0} />
            Start · 25 min
          </button>
          <button style={btnGhost(t)}>
            <I name="check" size={13} /> Al gedaan
          </button>
          <button style={btnGhost(t)}>
            <I name="move" size={13} /> Verzetten
          </button>
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
            <I name="link-2" size={11} style={{ verticalAlign: '-2px', marginRight: 3 }} />
            {task.source}
          </span>
        </div>
      </div>
    </div>
  );
}

function QueueTask({ task }) {
  const t = TK;
  const s = SUBJECTS[task.subject];
  const typeIcon = {
    flashcards: 'layers',
    quiz: 'check-square',
    lezen: 'book-open',
  }[task.type] || 'circle';
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 14,
      padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{
        width: 20, height: 20, borderRadius: 6, border: `1.5px solid ${t.fgMute}`,
        flexShrink: 0,
      }} />
      <div style={{
        width: 32, height: 32, borderRadius: 9,
        background: `color-mix(in srgb, ${s.color} 14%, transparent)`,
        color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <I name={typeIcon} size={15} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
          <SubjPill k={task.subject} size="sm" />
          <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>{task.source}</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 800, color: t.fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {task.title}
        </div>
      </div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 4,
        background: t.cardHi, color: t.fgDim, borderRadius: 9999,
        padding: '4px 10px', fontSize: 11, fontWeight: 800,
      }}>
        <I name="clock" size={11} /> {task.mins} min
      </div>
    </div>
  );
}

// ───── button styles ─────
function btnPrimary(t) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    height: 36, padding: '0 14px', borderRadius: 10,
    background: t.primary, color: '#07090F', border: 0,
    fontFamily: 'Nunito', fontWeight: 800, fontSize: 13, cursor: 'pointer',
    letterSpacing: 0.2, whiteSpace: 'nowrap',
  };
}
function btnPrimaryGhost(t) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    height: 30, padding: '0 12px', borderRadius: 9,
    background: t.primaryDim, color: t.primary,
    border: `1px solid color-mix(in srgb, ${t.primary} 24%, transparent)`,
    fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, cursor: 'pointer',
    whiteSpace: 'nowrap',
  };
}
function btnGhost(t) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    height: 30, padding: '0 10px', borderRadius: 9,
    background: t.card, color: t.fgDim, border: `1px solid ${t.border}`,
    fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, cursor: 'pointer',
    whiteSpace: 'nowrap',
  };
}
function h2(t) {
  return {
    fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 18,
    color: t.fg, letterSpacing: '-0.01em', lineHeight: 1, margin: 0,
  };
}
function countPill(t) {
  return {
    display: 'inline-flex', alignItems: 'center', height: 22, padding: '0 9px',
    borderRadius: 9999, background: t.cardHi, border: `1px solid ${t.border}`,
    color: t.fgDim, fontSize: 11, fontWeight: 800, letterSpacing: 0.3,
  };
}

window.Paradigm1 = Paradigm1;