/* ═════════ Content-rich week grid — hergebruikt in alle flows ═════════
   7 dag-boxen naast elkaar met:
   - dag-naam (MA/DI/...) + datum-nummer boven elkaar
   - vak-pills met aantal ("Biol 2×", "Wisk")
   - toets-tag met type-kleur ("TOETS · Bio toets")
   - vandaag visueel geaccentueerd
   - gemist-indicator (rode punt + tint)
   - "— leeg —" placeholder op rustige dagen
   Optioneel: onderin samenvatting + acties

   Props:
     week:        array van { day, date, items?, deadline?, dlLabel?,
                              today?, past?, missed? }
     density?:    'full' (default) | 'medium' | 'compact' — 3 maten
     compact?:    legacy alias voor density='compact'
     showHeader?: bool — Week 41 · 7-13 okt titel (default true)
     showFooter?: bool — samenvatting onderin (default false)
     subtitle?:   string — onder "Week 41"
     highlightDay?: index — zonder dat de dag 'today' is, een accent-border tonen
     onDayClick?: (i) => void
*/

function WeekGrid({
  week, density: densityProp, compact = false,
  showHeader = true, showFooter = false,
  subtitle = null, highlightDay = null, onDayClick = null,
  headerTitle = 'Week 41', headerRange = '7–13 okt',
}) {
  const t = TK;
  const density = densityProp || (compact ? 'compact' : 'full');
  const isCompact = density === 'compact';
  const isMedium  = density === 'medium';

  const gap = isCompact ? 6 : isMedium ? 7 : 9;
  const outerGap = isCompact ? 8 : isMedium ? 9 : 10;
  const headFz = isCompact ? 15 : isMedium ? 16 : 17;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: outerGap }}>
      {showHeader && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ fontFamily: 'Fredoka One', fontSize: headFz, color: t.fg, letterSpacing: '-0.01em' }}>
            {headerTitle}
          </div>
          <span style={{ fontSize: 11.5, color: t.fgMute, fontWeight: 700 }}>· {headerRange}</span>
          {subtitle && <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>· {subtitle}</span>}
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap }}>
        {week.map((d, i) => (
          <WeekGridCell key={i} d={d} density={density}
            highlight={highlightDay === i} onClick={onDayClick ? () => onDayClick(i) : null} />
        ))}
      </div>

      {showFooter && <WeekGridSummary week={week} />}
    </div>
  );
}

function WeekGridCell({ d, density = 'full', highlight, onClick }) {
  const t = TK;
  const isToday = !!d.today;
  const isPast = !!d.past;
  const isMissed = !!d.missed;
  const isDeadline = !!d.deadline;
  const spec = isDeadline ? SUBJECTS[d.deadline] : null;
  const items = d.items || [];
  const empty = !isDeadline && items.length === 0;

  const isCompact = density === 'compact';
  const isMedium  = density === 'medium';
  const padTop = isCompact ? 8 : isMedium ? 9 : 10;
  const padSide = isCompact ? 8 : isMedium ? 9 : 10;
  const padBot = isCompact ? 9 : isMedium ? 10 : 11;
  const minH = isCompact ? 96 : isMedium ? 104 : 118;

  return (
    <div
      onClick={onClick}
      style={{
        background: isToday ? 'rgba(0,180,216,0.08)' :
                    isMissed ? 'rgba(239,68,68,0.06)' : t.card,
        border: isToday ? `1.5px solid ${t.primary}` :
                isMissed ? `1.5px solid rgba(239,68,68,0.32)` :
                highlight ? `1.5px solid ${t.purpleFg}` :
                `1px solid ${t.border}`,
        borderRadius: 11, padding: `${padTop}px ${padSide}px ${padBot}px`,
        display: 'flex', flexDirection: 'column', gap: isCompact ? 5 : 6, minHeight: minH,
        position: 'relative', overflow: 'hidden',
        boxShadow: isToday ? '0 8px 20px rgba(0,180,216,0.12)' :
                   highlight ? '0 8px 20px rgba(196,181,253,0.15)' : 'none',
        opacity: isPast && !isToday && !isMissed ? 0.55 : 1,
        cursor: onClick ? 'pointer' : 'default',
      }}
    >
      {isToday && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 3,
          background: `linear-gradient(90deg, ${t.primary}, transparent)`,
        }} />
      )}
      {isMissed && !isToday && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 2,
          background: `linear-gradient(90deg, ${t.red}, transparent)`, opacity: 0.7,
        }} />
      )}

      {/* ── header: dag + datum ── */}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span style={{
          fontSize: isCompact ? 9 : 10, fontWeight: 800,
          color: isToday ? t.primary : isMissed ? t.red : t.fgMute,
          letterSpacing: 0.8, textTransform: 'uppercase',
        }}>
          {d.day}{isToday ? ' · nu' : ''}{isMissed && !isToday ? ' · gemist' : ''}
        </span>
        <span style={{
          fontFamily: 'Fredoka One', fontSize: isCompact ? 14 : isMedium ? 15 : 17, lineHeight: 1,
          color: isToday ? t.primary : isMissed ? t.red : t.fg, letterSpacing: '-0.01em',
        }}>
          {d.date}
        </span>
      </div>

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

function WeekGridSummary({ week }) {
  const t = TK;
  const today = week.find(d => d.today);
  const deadlines = week.filter(d => d.deadline);
  const totalMins = (today?.items || []).reduce((s, it) => s + (it.mins || 15), 0) || 50;
  const taskCount = (today?.items || []).reduce((s, it) => s + (it.n || 1), 0) || 3;

  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 11,
      padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8, background: t.primaryDim,
          color: t.primary, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name="check-circle-2" size={14} />
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.4, textTransform: 'uppercase' }}>Vandaag</div>
          <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg, marginTop: 1 }}>
            {taskCount} taken · ±{totalMins} min
          </div>
        </div>
      </div>
      <div style={{ width: 1, height: 28, background: t.border }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, flex: 1 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8, background: 'rgba(255,208,0,0.14)',
          color: t.gold, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name="flag" size={13} />
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.4, textTransform: 'uppercase' }}>Komende toetsen</div>
          <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg, marginTop: 1 }}>
            {deadlines.length} deze week
          </div>
        </div>
      </div>
      <button style={shellBtn(t, 'ghost')}>
        <I name="plus" size={13} /> Deadline
      </button>
    </div>
  );
}

window.WeekGrid = WeekGrid;