/* Maand-view + Day-sheet components for Plannen Mobile.
   Builds on foundation-shared + stapel-components + week-components. */

/* ════════════════════════════════════════════════════════════
   1 · MaandTopbar — title "April" + subtitle "Vooruitblik · 4 weken"
   ════════════════════════════════════════════════════════════ */
function MaandTopbar({ t, title = 'April', subtitle = 'Vooruitblik · 4 weken' }) {
  return (
    <header style={{
      background: t.topbar, borderBottom: `1px solid ${t.border}`,
      padding: '8px 16px 10px', display: 'flex', alignItems: 'center',
      gap: 10, flexShrink: 0, minHeight: 56, boxSizing: 'border-box',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 20, color: t.fg,
          lineHeight: 1.15, letterSpacing: '-0.01em',
        }}>{title}</div>
        <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 1, lineHeight: 1.3 }}>{subtitle}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
        <SnapsPillSm t={t} count={240} />
        <StreakPillSm t={t} count={5} />
        <button style={{
          width: 32, height: 32, borderRadius: 9, background: 'transparent',
          border: 'none', color: t.fgDim, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><MI name="bell" size={18} color={t.fgDim} /></button>
      </div>
    </header>
  );
}

/* ════════════════════════════════════════════════════════════
   2 · MaandToolbar — back + Week|Maand toggle + plus
   ════════════════════════════════════════════════════════════ */
function MaandToolbar({ t, view = 'maand' }) {
  const SegTab = ({ label, on }) => (
    <div style={{
      height: 28, padding: '0 14px', borderRadius: 999,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: on ? t.card : 'transparent',
      boxShadow: on ? t.shadowCard : 'none',
      color: on ? t.fg : t.fgDim,
      fontFamily: 'Nunito', fontWeight: on ? 800 : 600, fontSize: 12,
      letterSpacing: 0.2,
    }}>{label}</div>
  );
  return (
    <div style={{
      height: 56, padding: '0 12px', background: t.card,
      borderBottom: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
    }}>
      <button style={{
        width: 32, height: 32, borderRadius: 8, background: 'transparent',
        border: 'none', color: t.fgDim, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="chevron-left" size={22} color={t.fgDim} strokeWidth={2.4} /></button>
      <div style={{
        height: 36, padding: 4, borderRadius: 999,
        background: t.cardSunken, border: `1px solid ${t.border}`,
        display: 'inline-flex', gap: 2,
      }}>
        <SegTab label="Week" on={view === 'week'} />
        <SegTab label="Maand" on={view === 'maand'} />
      </div>
      <div style={{ flex: 1 }} />
      <button style={{
        width: 32, height: 32, borderRadius: 8,
        background: t.primaryDim, border: `1px solid ${hexToRgba(t.primary, 0.30)}`,
        color: t.primary, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="plus" size={20} color={t.primary} strokeWidth={2.6} /></button>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   3 · MaandNav — chev-left  "April 2026"  chev-right · Vandaag-knop
   ════════════════════════════════════════════════════════════ */
function MaandNav({ t, label = 'April 2026', showVandaag = false }) {
  return (
    <div style={{
      height: 48, background: t.card,
      borderBottom: `1px solid ${t.border}`,
      padding: '0 16px', display: 'flex', alignItems: 'center',
      gap: 6, flexShrink: 0,
    }}>
      <button style={{
        width: 32, height: 32, borderRadius: 8, background: 'transparent',
        border: 'none', color: t.fgDim, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="chevron-left" size={20} color={t.fgDim} strokeWidth={2.4} /></button>
      <button style={{
        height: 32, padding: '0 4px', background: 'transparent',
        border: 'none', cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 4,
        color: t.fg, fontFamily: 'Fredoka One', fontSize: 16, letterSpacing: '-0.01em',
      }}>
        {label}
        <MI name="chevron-down" size={14} color={t.fgDim} strokeWidth={2.4} style={{ marginTop: 2 }} />
      </button>
      <button style={{
        width: 32, height: 32, borderRadius: 8, background: 'transparent',
        border: 'none', color: t.fgDim, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="chevron-right" size={20} color={t.fgDim} strokeWidth={2.4} /></button>
      <div style={{ flex: 1 }} />
      {showVandaag && (
        <button style={{
          height: 28, padding: '0 10px', borderRadius: 8,
          background: t.primaryDim, border: `1px solid ${hexToRgba(t.primary, 0.30)}`,
          color: t.primary, cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5, letterSpacing: 0.2,
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          <MI name="crosshair" size={12} color={t.primary} strokeWidth={2.4} />
          Vandaag
        </button>
      )}
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   4 · MaandInfoBanner — Pulse-thinking + uitleg
   ════════════════════════════════════════════════════════════ */
function MaandInfoBanner({ t }) {
  return (
    <div style={{
      background: hexToRgba(t.primary, 0.06),
      border: `1px solid ${hexToRgba(t.primary, 0.20)}`,
      borderRadius: 12, padding: '11px 12px',
      display: 'flex', gap: 10, alignItems: 'flex-start',
    }}>
      <PulseMascotImg size={36} mood="thinking" style={{ marginTop: 1 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 9.5,
          color: t.primary, letterSpacing: 1, textTransform: 'uppercase',
          marginBottom: 2,
        }}>Vooruitblik</div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 12,
          color: t.fg, lineHeight: 1.45,
        }}>Maand-blik is een vooruitblik — niet je hoofdplanner. Hij toont alleen deadlines en drukte per dag.</div>
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   5 · MaandGrid — 7×N grid met DayCells
   ════════════════════════════════════════════════════════════ */
function MaandGrid({ t, weeks, dim = false }) {
  // weeks: array of arrays of 7 day-objects:
  //   { date: number, suffix?: 'mei', load: 0..3, weekend, vakantie, today, past,
  //     overflow, pills?: [subject, subject], extra?: number }
  const DOW = ['MA', 'DI', 'WO', 'DO', 'VR', 'ZA', 'ZO'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {/* Day-of-week header */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4,
        padding: '2px 0 4px',
      }}>
        {DOW.map((d, i) => (
          <div key={i} style={{
            textAlign: 'center', padding: '4px 0',
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 10,
            color: t.fgDim, letterSpacing: 0.8,
          }}>{d}</div>
        ))}
      </div>
      {/* Weeks */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {weeks.map((week, wi) => (
          <div key={wi} style={{
            display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4,
          }}>
            {week.map((d, di) => <DayCell key={di} t={t} d={d} dim={dim} />)}
          </div>
        ))}
      </div>
    </div>
  );
}

function DayCell({ t, d, dim }) {
  const dow = ['MA','DI','WO','DO','VR','ZA','ZO'];
  const isWeekend = d.weekend;
  const vak = d.vakantie;
  const today = d.today;
  const past = d.past;
  const overflow = d.overflow;
  const load = dim ? 0 : (d.load || 0);

  // background
  let bg = 'transparent';
  if (vak) bg = hexToRgba(t.warn, 0.10);
  else if (load === 3) bg = hexToRgba(t.primary, 0.25);
  else if (load === 2) bg = hexToRgba(t.primary, 0.12);
  else if (load === 1) bg = hexToRgba(t.primary, 0.05);
  else if (isWeekend) bg = hexToRgba(t.fgFaint, 0.06);
  else bg = hexToRgba(t.fgFaint, 0.04);

  // border
  let border = `1px solid transparent`;
  if (vak) border = `1px dashed ${hexToRgba(t.warn, 0.40)}`;
  else if (today) border = `2px solid ${t.primary}`;

  // date color
  let dateColor = t.fg;
  if (overflow) dateColor = hexToRgba(t.fgFaint, 0.6);
  else if (past) dateColor = t.fgFaint;
  else if (today) dateColor = t.primary;

  const dateOpacity = overflow ? 0.5 : 1;

  return (
    <div style={{
      minHeight: 56, borderRadius: 8,
      background: bg, border,
      padding: '4px 4px 5px',
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      opacity: dim ? 0.95 : 1,
    }}>
      {/* date top-left */}
      <div style={{
        fontFamily: 'Nunito', fontWeight: today ? 800 : 700, fontSize: 11,
        color: dateColor, lineHeight: 1, letterSpacing: 0.1,
        opacity: dateOpacity,
      }}>
        {d.date}{d.suffix ? <span style={{ fontWeight: 600, fontSize: 9, opacity: 0.85 }}> {d.suffix}</span> : null}
      </div>

      {/* vakantie label or mini-pills bottom */}
      <div style={{
        marginTop: 'auto', display: 'flex', alignItems: 'flex-end',
        justifyContent: 'center', gap: 2, minHeight: 10,
      }}>
        {vak ? (
          <span style={{
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 8.5,
            color: t.warnFg, letterSpacing: 0.6, lineHeight: 1,
          }}>VAK</span>
        ) : d.pills && d.pills.length > 0 ? (
          <>
            {d.pills.slice(0, 2).map((sub, i) => {
              const hex = SUBJECTS[sub] || t.fgMute;
              return (
                <span key={i} style={{
                  width: 16, height: 8, borderRadius: 4,
                  background: hexToRgba(hex, t.mode === 'dark' ? 0.30 : 0.20),
                  border: `1.5px solid ${hexToRgba(hex, 0.70)}`,
                  display: 'inline-block', flexShrink: 0,
                }} />
              );
            })}
            {d.extra && (
              <span style={{
                fontFamily: 'Nunito', fontWeight: 700, fontSize: 8.5,
                color: t.fgDim, letterSpacing: 0.2, lineHeight: 1,
                marginLeft: 1,
              }}>+{d.extra}</span>
            )}
          </>
        ) : null}
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   6 · MaandLegend — onder grid
   ════════════════════════════════════════════════════════════ */
function MaandLegend({ t }) {
  const items = [
    { label: 'rustig', bg: hexToRgba(t.primary, 0.10), bd: hexToRgba(t.primary, 0.20) },
    { label: 'druk', bg: hexToRgba(t.primary, 0.30), bd: hexToRgba(t.primary, 0.40) },
    { label: 'deadline', bg: hexToRgba(SUBJECTS.biologie, 0.30), bd: hexToRgba(SUBJECTS.biologie, 0.70), pill: true },
    { label: 'vakantie', bg: hexToRgba(t.warn, 0.20), bd: hexToRgba(t.warn, 0.40), dashed: true },
  ];
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: '8px 10px', display: 'flex', gap: 12, flexWrap: 'wrap',
      justifyContent: 'space-between',
    }}>
      {items.map((it, i) => (
        <div key={i} style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: it.pill ? 14 : 10, height: it.pill ? 7 : 10,
            borderRadius: it.pill ? 3 : 999,
            background: it.bg,
            border: it.dashed ? `1px dashed ${it.bd}` : `1px solid ${it.bd}`,
            display: 'inline-block', flexShrink: 0,
          }} />
          <span style={{
            fontFamily: 'Nunito', fontWeight: 600, fontSize: 10.5,
            color: t.fgDim, letterSpacing: 0.1,
          }}>{it.label}</span>
        </div>
      ))}
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   7 · VakantieFooter — info-strook na grid bij meivakantie
   ════════════════════════════════════════════════════════════ */
function MaandVakantieFooter({ t, range = '5–11 mei', label = 'meivakantie' }) {
  return (
    <div style={{
      background: hexToRgba(t.warn, 0.12),
      border: `1px solid ${hexToRgba(t.warn, 0.30)}`,
      borderRadius: 12, padding: '11px 13px',
      display: 'flex', gap: 9, alignItems: 'flex-start',
    }}>
      <MI name="sun" size={16} color={t.warnFg} strokeWidth={2.4} style={{ marginTop: 1 }} />
      <div style={{
        fontFamily: 'Nunito', fontWeight: 500, fontSize: 12,
        color: t.fg, lineHeight: 1.45, flex: 1,
      }}>
        <span style={{ fontWeight: 800 }}>{range} · {label}.</span> Pulse plant geen nieuwe taken tenzij je een toets erna hebt.
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   8 · MaandBody — scrollable body wrapper
   ════════════════════════════════════════════════════════════ */
function MaandBody({ children, paddingBottom = 16 }) {
  return (
    <div style={{
      flex: 1, overflow: 'hidden',
      padding: `12px 8px ${paddingBottom}px`,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>{children}</div>
  );
}

Object.assign(window, {
  MaandTopbar, MaandToolbar, MaandNav, MaandInfoBanner,
  MaandGrid, DayCell, MaandLegend, MaandVakantieFooter, MaandBody,
});