/* Paradigma 2 — De Aankomst
   Pulse is het primaire interface bij binnenkomst. Groot voorstel in het midden,
   'Ja', 'Korter', 'Anders' knoppen. Week-overzicht rustig terzijde. */

function Paradigm2() {
  const t = TK;

  const proposal = {
    greeting: 'Hé Sanne — fijne middag',
    intent: 'Ik heb iets voorgesteld voor vandaag. Kijk even.',
    reasoning: 'Je hebt <b>vrijdag Bio</b> — nog 35% te doen. Vandaag 50 min, rustig tempo, niet te zwaar. Morgen en donderdag nog 2 studiemomenten.',
    tasks: [
      { subject: 'biologie', icon: 'book-open', title: 'Celbiologie § 4.2 lezen', mins: 25, type: 'Lezen' },
      { subject: 'biologie', icon: 'layers',    title: '10 flashcards herhalen',  mins: 15, type: 'Flashcards' },
      { subject: 'wiskunde', icon: 'check-square', title: 'Oefeningen § 2.3',     mins: 10, type: 'Quiz' },
    ],
  };

  const upcoming = [
    { subject: 'biologie', type: 'Toets', when: 'vrij', days: 2, progress: 0.35 },
    { subject: 'wiskunde', type: 'SO',    when: 'ma',   days: 5, progress: 0.60 },
    { subject: 'engels',   type: 'Essay', when: 'do',   days: 8, progress: 0.10 },
  ];

  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 · Pulse heeft een voorstel voor vandaag"
        />

        <main style={{
          flex: 1, minHeight: 0, display: 'grid',
          gridTemplateColumns: '1.5fr 0.85fr', gap: 0,
          background: `radial-gradient(circle at 25% 40%, rgba(157,78,221,0.06), transparent 60%), radial-gradient(circle at 75% 80%, rgba(0,180,216,0.06), transparent 60%)`,
        }}>

          {/* ───── LEFT: Pulse conversation (the ritual) ───── */}
          <section style={{
            padding: '28px 32px 28px 36px',
            display: 'flex', flexDirection: 'column', gap: 18, minHeight: 0, overflow: 'hidden',
            borderRight: `1px solid ${t.border}`,
          }}>

            {/* Pulse greeting header */}
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
              <div style={{ flexShrink: 0, width: 84, marginBottom: -4 }}>
                <PulseMascot variant="glow" mood="encouraging" size="lg" eyeAnimation="warm" />
              </div>
              <div style={{ flex: 1, minWidth: 0, paddingBottom: 6 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>
                    Pulse · AI coach
                  </span>
                  <PlanBadge plan="premium" size="sm" />
                </div>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 26, color: t.fg, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
                  {proposal.greeting}
                </div>
                <div style={{ fontSize: 14, color: t.fgDim, fontWeight: 500, marginTop: 6, lineHeight: 1.4 }}>
                  {proposal.intent}
                </div>
              </div>
            </div>

            {/* The proposal card */}
            <div style={{
              background: `linear-gradient(180deg, ${t.card} 0%, ${t.cardAlt} 100%)`,
              border: `1.5px solid rgba(157,78,221,0.28)`,
              borderRadius: 18, padding: 22, position: 'relative', overflow: 'hidden',
              boxShadow: '0 20px 50px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(157,78,221,0.08)',
            }}>
              {/* ambient tint */}
              <div style={{
                position: 'absolute', top: -60, left: -60, width: 200, height: 200,
                borderRadius: '50%', background: 'radial-gradient(circle, rgba(157,78,221,0.2), transparent 70%)',
                pointerEvents: 'none',
              }} />

              {/* reasoning strip */}
              <div style={{ position: 'relative', zIndex: 1, marginBottom: 16 }}>
                <div style={{ fontSize: 11, fontWeight: 800, color: t.purpleFg, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8,
                  display: 'flex', alignItems: 'center', gap: 6 }}>
                  <I name="sparkles" size={11} /> Mijn voorstel
                </div>
                <div
                  style={{ fontSize: 13.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55 }}
                  dangerouslySetInnerHTML={{ __html: proposal.reasoning.replace(/<b>/g, `<b style="color:${t.fg};font-weight:800">`) }}
                />
              </div>

              {/* task list */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, position: 'relative', zIndex: 1 }}>
                {proposal.tasks.map((p, i) => <ProposalRow key={i} p={p} num={i + 1} />)}
              </div>

              {/* total */}
              <div style={{
                marginTop: 14, paddingTop: 12, borderTop: `1px dashed ${t.border}`,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <I name="clock" size={14} color={t.fgDim} />
                <span style={{ fontSize: 12, color: t.fgDim, fontWeight: 700 }}>Totaal</span>
                <span style={{ flex: 1 }} />
                <span style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg }}>±50 min</span>
                <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
                  · eindigt <b style={{ color: t.fg }}>17:20</b>
                </span>
              </div>
            </div>

            {/* decision row */}
            <div style={{ display: 'flex', gap: 10, alignItems: 'stretch' }}>
              <button style={{
                flex: 2, display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
                gap: 4, padding: '14px 18px', borderRadius: 14,
                background: t.primary, color: '#07090F', border: 0, cursor: 'pointer',
                fontFamily: 'Nunito', textAlign: 'left',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <I name="check" size={16} strokeWidth={3} />
                  <span style={{ fontFamily: 'Fredoka One', fontSize: 18, letterSpacing: '-0.01em' }}>Ja, zo is goed</span>
                </div>
                <span style={{ fontSize: 11.5, fontWeight: 700, opacity: 0.7 }}>Begin meteen met taak 1</span>
              </button>
              <button style={{
                flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
                gap: 4, padding: '14px 16px', borderRadius: 14,
                background: t.card, color: t.fg, border: `1px solid ${t.border}`, cursor: 'pointer',
                fontFamily: 'Nunito', textAlign: 'left',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <I name="minus-circle" size={14} color={t.fgDim} />
                  <span style={{ fontWeight: 800, fontSize: 14 }}>Korter</span>
                </div>
                <span style={{ fontSize: 11, fontWeight: 600, color: t.fgMute }}>Maak er ±25 min van</span>
              </button>
              <button style={{
                flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
                gap: 4, padding: '14px 16px', borderRadius: 14,
                background: t.card, color: t.fg, border: `1px solid ${t.border}`, cursor: 'pointer',
                fontFamily: 'Nunito', textAlign: 'left',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <I name="shuffle" size={14} color={t.fgDim} />
                  <span style={{ fontWeight: 800, fontSize: 14 }}>Anders</span>
                </div>
                <span style={{ fontSize: 11, fontWeight: 600, color: t.fgMute }}>Kies of vertel wat je wilt</span>
              </button>
            </div>

            {/* footer bar */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 14, marginTop: 'auto',
              paddingTop: 14, borderTop: `1px solid ${t.border}`,
            }}>
              <button style={linkBtn(t)}>
                <I name="layout-grid" size={13} />  Alles zien
              </button>
              <span style={{ width: 1, height: 14, background: t.border }} />
              <button style={linkBtn(t)}>
                <I name="plus" size={13} />  Zelf plannen
              </button>
              <span style={{ flex: 1 }} />
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700, fontStyle: 'italic' }}>
                Pulse stelt voor — jij beslist altijd.
              </span>
            </div>

          </section>

          {/* ───── RIGHT: horizon / week-peek ───── */}
          <section style={{ padding: '28px 32px 28px 28px', display: 'flex', flexDirection: 'column', gap: 16, minHeight: 0, overflow: 'hidden' }}>

            <Sectionlabel>Horizon</Sectionlabel>

            {/* mini week strip */}
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 14,
              padding: 14, display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 12, fontWeight: 800, color: t.fgDim }}>Deze week</span>
                <span style={{ fontSize: 11, fontWeight: 700, color: t.fgMute }}>Week 41</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 5 }}>
                {['ma','di','wo','do','vr','za','zo'].map((d, i) => {
                  const today = i === 2;
                  const deadline = i === 4;
                  const hasWork = [0,1,2,3,6].includes(i);
                  return (
                    <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                      <span style={{ fontSize: 10, fontWeight: 700, color: today ? t.primary : t.fgMute, letterSpacing: 0.4 }}>{d}</span>
                      <div style={{
                        width: '100%', aspectRatio: '1', borderRadius: 8,
                        background: today ? t.primaryDim : deadline ? 'rgba(34,197,94,0.14)' : t.cardAlt,
                        border: today ? `1.5px solid ${t.primary}` : deadline ? '1.5px solid rgba(34,197,94,0.35)' : `1px solid ${t.border}`,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: 'Fredoka One', fontSize: 13,
                        color: today ? t.primary : deadline ? t.green : t.fgDim,
                        position: 'relative',
                      }}>
                        {i + 8}
                        {deadline && (
                          <div style={{ position: 'absolute', bottom: -4, right: -4,
                            width: 16, height: 16, borderRadius: 9999,
                            background: SUBJECTS.biologie.color, color: '#07090F',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            border: `2px solid ${t.card}`,
                          }}>
                            <I name="leaf" size={8} strokeWidth={3} />
                          </div>
                        )}
                      </div>
                      {hasWork && !today && <Dot c={t.fgMute} size={4} />}
                      {today && <Dot c={t.primary} size={4} />}
                      {!hasWork && !today && <div style={{ height: 4 }} />}
                    </div>
                  );
                })}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 6, borderTop: `1px dashed ${t.border}` }}>
                <I name="zap" size={12} color={t.gold} fill={t.gold} strokeWidth={0} />
                <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 700 }}>
                  Vrijdag: <b style={{ color: t.fg }}>Bio-toets</b> — nog 2 dagen
                </span>
              </div>
            </div>

            {/* Komende deadlines compact */}
            <Sectionlabel right={<button style={linkBtn(t)}>Alle <I name="arrow-right" size={11} /></button>}>
              Komende deadlines
            </Sectionlabel>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {upcoming.map((u, i) => <DeadlineMini key={i} u={u} />)}
            </div>

            {/* Premium hint */}
            <div style={{
              marginTop: 'auto', padding: '14px 16px', background: 'rgba(157,78,221,0.08)',
              border: `1px dashed rgba(157,78,221,0.32)`, borderRadius: 12,
              display: 'flex', gap: 12, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8, flexShrink: 0,
                background: 'rgba(157,78,221,0.2)', color: t.purpleFg,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <I name="sparkles" size={15} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                  <span style={{ fontSize: 11.5, fontWeight: 800, color: t.fg }}>AI-voorstel</span>
                  <PlanBadge plan="premium" size="sm" />
                </div>
                <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
                  Pulse plant op basis van je voortgang, deadlines en energie-patronen.
                  Free: zelf plannen, lege bak.
                </div>
              </div>
            </div>

          </section>

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

// ───── rows ─────

function ProposalRow({ p, num }) {
  const t = TK;
  const s = SUBJECTS[p.subject];
  return (
    <div style={{
      background: t.cardAlt, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: 8, background: t.cardHi,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Fredoka One', fontSize: 13, color: t.fgDim, flexShrink: 0,
      }}>{num}</div>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: `color-mix(in srgb, ${s.color} 14%, transparent)`,
        color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <I name={p.icon} size={17} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <SubjPill k={p.subject} size="sm" />
          <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>· {p.type}</span>
        </div>
        <div style={{ fontSize: 13.5, fontWeight: 800, color: t.fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {p.title}
        </div>
      </div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 4,
        padding: '4px 10px', borderRadius: 9999,
        background: t.cardHi, color: t.fgDim,
        fontFamily: 'Fredoka One', fontSize: 12,
      }}>{p.mins}<span style={{ fontFamily: 'Nunito', fontSize: 10, fontWeight: 800 }}>min</span></div>
    </div>
  );
}

function DeadlineMini({ u }) {
  const t = TK;
  const s = SUBJECTS[u.subject];
  const soon = u.days <= 3;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: `color-mix(in srgb, ${s.color} 14%, transparent)`,
        color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <I name={s.icon} size={14} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 800, color: t.fg, marginBottom: 3 }}>
          {s.label} · {u.type}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ flex: 1, height: 3, background: t.cardHi, borderRadius: 9999, overflow: 'hidden' }}>
            <div style={{ width: `${u.progress*100}%`, height: '100%', background: s.color }} />
          </div>
          <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>
            {Math.round(u.progress*100)}%
          </span>
        </div>
      </div>
      <div style={{
        display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 0,
        padding: '4px 8px', borderRadius: 8,
        background: soon ? t.redDim : t.cardHi,
        color: soon ? t.red : t.fgDim,
        border: soon ? '1px solid rgba(239,68,68,0.3)' : `1px solid ${t.border}`,
      }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, lineHeight: 1 }}>{u.days}d</span>
        <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: 0.3 }}>{u.when}</span>
      </div>
    </div>
  );
}

function linkBtn(t) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 5,
    height: 26, padding: '0 8px', borderRadius: 7,
    background: 'transparent', color: t.fgDim, border: 0,
    fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, cursor: 'pointer',
  };
}

window.Paradigm2 = Paradigm2;