// Brief 06 — Cross-pijler streak-chip
// 3 chip-states + popup. Inline chip lives in topbar.

/* ───────────────────────── Inline chip (used in topbars) ───────────────────────── */
function StreakChipInline({ t, count = 12, active = true, broken = false }) {
  // active=true → vandaag al iets gedaan, vlam vol
  // active=false → moet nog iets doen, vlam outline + amber accent
  // broken=true → grijs, "0" met cirkel
  if (broken) {
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '6px 10px', borderRadius: 9999,
        background: t.dark ? '#1E293B' : '#F1F5F9',
        color: t.textSub, fontSize: 12, fontWeight: 800,
      }}>
        <window.LucideIcon name="flame" size={13} style={{ opacity: 0.55 }} />
        0 dagen
      </div>
    );
  }
  const isWarn = !active;
  const c = isWarn ? (t.dark ? '#FBBF24' : '#D97706') : (t.dark ? '#FB7185' : '#E11D48');
  // we use a flame palette: rose-500 active, amber-500 needs-action
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 10px', borderRadius: 9999,
      background: `color-mix(in srgb, ${c} ${t.dark ? 14 : 10}%, transparent)`,
      color: c,
      border: isWarn ? `1px dashed ${c}` : `1px solid color-mix(in srgb, ${c} 30%, transparent)`,
      fontSize: 12, fontWeight: 800,
      position: 'relative',
    }}>
      <window.LucideIcon name="flame" size={13} fill={isWarn ? 'none' : 'currentColor'} />
      {count} dagen
      {isWarn && <span style={{
        position: 'absolute', top: -2, right: -2,
        width: 8, height: 8, borderRadius: 9999, background: c, border: `1.5px solid ${t.topbar}`,
      }} />}
    </div>
  );
}

/* ───────────────────────── State 1 — chip catalogue (3 states side-by-side) ───────────────────────── */
function STK_Catalogue() {
  const tL = window.theme(false);
  const tD = window.theme(true);

  function Cell({ t, label, sub, children }) {
    return (
      <div style={{
        background: t.card, border: `1px solid ${t.border}`, borderRadius: 10,
        padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        <div style={{ fontSize: 10, color: t.textSub, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase' }}>{label}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 0' }}>{children}</div>
        <div style={{ fontSize: 11, color: t.textSub, lineHeight: 1.45 }}>{sub}</div>
      </div>
    );
  }

  function Theme({ t, label }) {
    return (
      <div style={{
        background: t.bg, border: `1px solid ${t.border}`, borderRadius: 14, padding: 16,
        color: t.text, flex: 1,
      }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 16, marginBottom: 12 }}>{label}</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          <Cell t={t} label="Active today" sub="Vandaag al iets gedaan. Streak veilig.">
            <StreakChipInline t={t} count={12} active={true} />
          </Cell>
          <Cell t={t} label="Not active today" sub="Streak op het spel. Dashed border + amber pulse-dot.">
            <StreakChipInline t={t} count={12} active={false} />
          </Cell>
          <Cell t={t} label="Broken" sub="Geen verwijt — neutrale grijstoon. Vandaag opnieuw beginnen.">
            <StreakChipInline t={t} count={0} broken={true} />
          </Cell>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      height: '100%', background: '#E2E8F0', padding: 24,
      display: 'flex', flexDirection: 'column', gap: 16, overflow: 'auto',
    }}>
      <div>
        <div style={{ fontSize: 11, color: '#64748B', fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase' }}>
          6C · Cross-pijler streak-chip
        </div>
        <h1 style={{ fontFamily: 'Fredoka One', fontSize: 24, margin: '4px 0 0', color: '#0F172A' }}>
          Eén chip — drie toestanden, drie pijler-contexten.
        </h1>
        <p style={{ fontSize: 13, color: '#475569', margin: '4px 0 0' }}>
          Vlam-icoon (Lucide). Active = gevuld, vol-coral. Not-active = outline + amber-accent + dashed border + dot. Broken = neutraal grijs.
        </p>
      </div>
      <div style={{ display: 'flex', gap: 16 }}>
        <Theme t={tL} label="Light" />
        <Theme t={tD} label="Dark" />
      </div>

      {/* Placement preview — same chip in 3 different pijler topbars */}
      <div style={{
        background: '#fff', border: '1px solid #E2E8F0', borderRadius: 14, padding: 16,
      }}>
        <div style={{ fontSize: 11, color: '#64748B', fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 12 }}>
          Plaatsing in 3 pijler-topbars · zelfde chip, verschillende achtergrond
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { name: 'Leren · rustig',     accent: '#0096C7' },
            { name: 'Oefenen · energiek', accent: '#16A34A' },
            { name: 'Plannen · zakelijk', accent: '#7C3AED' },
          ].map((p, i) => (
            <div key={i} style={{
              border: '1px solid #E2E8F0', borderRadius: 10, padding: '10px 14px',
              display: 'flex', alignItems: 'center', gap: 12,
              background: '#fff',
            }}>
              <div style={{ width: 4, height: 24, background: p.accent, borderRadius: 2 }} />
              <div style={{ fontSize: 13, fontWeight: 800, color: '#0F172A', flex: 1 }}>{p.name}</div>
              <StreakChipInline t={tL} count={12} active={true} />
              <StreakChipInline t={tL} count={12} active={false} />
              <StreakChipInline t={tL} count={0} broken={true} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 2 — Click popup (calendar + 3 CTAs) ───────────────────────── */
function STK_Popup() {
  const t = window.theme(false);
  // Build last 30 days. day 30 = today (active). days 1..29 mostly active, a couple miss.
  const days = Array.from({ length: 30 }, (_, i) => {
    const idx = i + 1;
    const isToday = idx === 30;
    const missed = idx === 13 || idx === 22; // 2 misses
    const recoveryUsed = idx === 22;
    return {
      idx,
      pillars: missed ? [] : (idx === 5 ? ['leren'] : idx === 8 ? ['oefenen','plannen'] : ['leren','oefenen','plannen']),
      isToday, missed, recoveryUsed,
    };
  });

  return (
    <div style={{
      height: '100%', background: t.bg, padding: 24,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* Mock topbar peek showing where it anchors */}
      <div style={{ position: 'absolute', top: 24, left: 24, right: 24,
        background: t.card, border: `1px solid ${t.border}`, borderRadius: 10,
        padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 10, opacity: 0.85,
      }}>
        <window.LucideIcon name="search" size={13} style={{ color: t.textSub }} />
        <span style={{ flex: 1, fontSize: 12, color: t.textSub }}>Zoek …</span>
        <div style={{ outline: `2px solid ${t.primary}`, outlineOffset: 3, borderRadius: 9999 }}>
          <StreakChipInline t={t} count={12} active={false} />
        </div>
        <span style={{ fontSize: 10, color: t.primary, fontWeight: 800, letterSpacing: 0.5 }}>↓ klik opent popup</span>
      </div>

      {/* Popup panel */}
      <div style={{
        marginTop: 20,
        width: 460, background: t.card, border: `1px solid ${t.border}`,
        borderRadius: 14, boxShadow: '0 16px 48px rgba(0,0,0,0.18)',
        overflow: 'hidden',
      }}>
        {/* Header */}
        <div style={{ padding: '16px 18px', borderBottom: `1px solid ${t.borderSoft}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <window.LucideIcon name="flame" size={20} style={{ color: '#E11D48' }} fill="currentColor" />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 22, lineHeight: 1, color: t.text }}>
                12 dagen — pak nog ééntje vandaag
              </div>
              <div style={{ fontSize: 12, color: t.textSub, marginTop: 4 }}>
                Cross-pijler · 1 actie in elke pijler vandaag = streak vasthouden
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 11, fontWeight: 800, padding: '3px 8px', borderRadius: 9999, background: 'rgba(225,29,72,0.10)', color: '#E11D48' }}>12 huidig</span>
            <span style={{ fontSize: 11, fontWeight: 800, padding: '3px 8px', borderRadius: 9999, background: t.dark ? '#1E293B' : '#F1F5F9', color: t.textSub }}>24 record</span>
            <span style={{ fontSize: 11, fontWeight: 800, padding: '3px 8px', borderRadius: 9999, background: 'rgba(0,150,199,0.08)', color: t.primary }}>+50 bonus per 7 dagen</span>
          </div>
        </div>

        {/* Calendar */}
        <div style={{ padding: '14px 18px' }}>
          <div style={{ fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>
            Laatste 30 dagen
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 5 }}>
            {days.map(d => {
              const c3 = d.pillars.length === 3;
              const c12 = d.pillars.length > 0 && d.pillars.length < 3;
              const bg = d.isToday ? 'rgba(0,150,199,0.12)' :
                         c3 ? 'rgba(225,29,72,0.16)' :
                         c12 ? 'rgba(217,119,6,0.14)' :
                         d.missed ? (t.dark ? '#1E293B' : '#F1F5F9') : 'transparent';
              const border = d.isToday ? `1.5px dashed ${t.primary}` :
                             c3 ? '1px solid rgba(225,29,72,0.30)' :
                             c12 ? '1px solid rgba(217,119,6,0.25)' :
                             `1px solid ${t.borderSoft}`;
              const flameC = c3 ? '#E11D48' : c12 ? '#D97706' : t.textDim;
              return (
                <div key={d.idx} title={`Dag ${d.idx}`} style={{
                  aspectRatio: '1 / 1', borderRadius: 6, background: bg, border,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                }}>
                  {d.missed && !d.recoveryUsed && <window.LucideIcon name="x" size={10} style={{ color: t.textDim }} />}
                  {d.recoveryUsed && <window.LucideIcon name="rotate-ccw" size={10} style={{ color: t.primary }} />}
                  {!d.missed && !d.isToday && <window.LucideIcon name="flame" size={11} fill={c3 ? 'currentColor' : 'none'} style={{ color: flameC }} />}
                  {d.isToday && <span style={{ fontSize: 8, fontWeight: 800, color: t.primary, letterSpacing: 0.4 }}>NU</span>}
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', gap: 14, marginTop: 10, fontSize: 10, color: t.textSub, fontWeight: 600 }}>
            <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: 'rgba(225,29,72,0.6)', marginRight: 4 }} />3 pijlers</span>
            <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: 'rgba(217,119,6,0.55)', marginRight: 4 }} />1–2 pijlers</span>
            <span><window.LucideIcon name="rotate-ccw" size={10} style={{ color: t.primary, marginRight: 3 }} />recovery</span>
            <span><window.LucideIcon name="x" size={10} style={{ color: t.textDim, marginRight: 3 }} />gemist</span>
          </div>
        </div>

        {/* CTAs */}
        <div style={{ padding: '12px 18px 16px', borderTop: `1px solid ${t.borderSoft}` }}>
          <div style={{ fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>
            Vandaag te doen — 1 van 3 al gedaan
          </div>
          {[
            { p: 'leren',   icon: 'book-open',       text: 'Lees een paragraaf', sub: 'Bio H3 staat klaar', done: true },
            { p: 'oefenen', icon: 'target',          text: 'Speel een quiz',     sub: '5 min', done: false, primary: true },
            { p: 'plannen', icon: 'calendar-clock',  text: 'Vink een taak af',   sub: '4 deadlines deze week', done: false },
          ].map((cta, i) => {
            const c = window.PILLAR[cta.p].light;
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '8px 10px', borderRadius: 8,
                background: cta.done ? (t.dark ? '#0F1525' : '#F8FAFC') : 'transparent',
                border: cta.primary ? `1.5px solid ${c}` : `1px solid ${t.borderSoft}`,
                marginBottom: 6, opacity: cta.done ? 0.55 : 1,
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: `color-mix(in srgb, ${c} 12%, transparent)`,
                  color: c,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <window.LucideIcon name={cta.icon} size={14} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 800, color: t.text }}>
                    {cta.text}{cta.done && <span style={{ marginLeft: 8, fontSize: 10, color: '#16A34A', fontWeight: 800 }}>✓ gedaan</span>}
                  </div>
                  <div style={{ fontSize: 11, color: t.textSub }}>{cta.sub}</div>
                </div>
                {!cta.done && <window.LucideIcon name="chevron-right" size={14} style={{ color: t.textSub }} />}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  StreakChipInline, STK_Catalogue, STK_Popup,
});