// ─── CALENDAR TAB — full event list, grouped, click-through to schools ──

function CalendarTab({ onJumpToSchool }) {
  const today = getToday();

  const all = EVENTS
    .map(e => ({ ...e, _date: new Date(e.dateISO + "T00:00:00") }))
    .sort((a, b) => a._date - b._date);

  const upcoming = all.filter(e => e._date >= today);
  const past = all.filter(e => e._date < today).reverse(); // most recent first

  // Group upcoming by month
  const byMonth = {};
  upcoming.forEach(e => {
    const key = e._date.toLocaleDateString("en-US", { month:"long", year:"numeric" });
    if (!byMonth[key]) byMonth[key] = [];
    byMonth[key].push(e);
  });

  return (
    <div style={{ padding: "28px 20px 0" }}>
      <Eyebrow tone="gold">The calendar</Eyebrow>
      <h2 className="serif" style={{
        fontSize: 36, fontWeight: 400, lineHeight: 1.05,
        margin: "10px 0 14px",
        color: "var(--forest-deep)",
        letterSpacing: "-0.015em",
      }}>
        Every <em style={{ fontStyle:"italic" }}>tour, fair, and deadline</em> in one place.
      </h2>
      <p style={{
        fontSize: 14, lineHeight: 1.65, color: "var(--ink-2)",
        margin: "0 0 28px", maxWidth: 540,
      }}>
        Tap any event to jump to that school. Past events are at the bottom, with notes from the day.
      </p>

      {/* By-month upcoming */}
      {Object.entries(byMonth).map(([month, items]) => (
        <div key={month} style={{ marginBottom: 28 }}>
          <div style={{
            display:"flex", alignItems:"baseline", gap:14,
            marginBottom:14,
          }}>
            <h3 className="serif" style={{
              margin:0, fontSize:22, fontWeight:500,
              color:"var(--forest-deep)",
              letterSpacing:"-0.01em",
            }}>{month}</h3>
            <div style={{ flex:1, height:1, background:"var(--line)" }} />
            <span style={{
              fontFamily:"var(--sans)", fontSize:10, fontWeight:500,
              letterSpacing:"0.16em", textTransform:"uppercase",
              color:"var(--ink-3)",
            }}>{items.length} {items.length===1?"event":"events"}</span>
          </div>

          <div style={{ display:"flex", flexDirection:"column", gap:1, background:"var(--line-2)" }}>
            {items.map(e => <EventRow key={e.id} ev={e} onJumpToSchool={onJumpToSchool} />)}
          </div>
        </div>
      ))}

      {/* Past */}
      {past.length > 0 && (
        <div style={{ marginTop: 44 }}>
          <SectionRule label="Recent activity" />
          <div style={{ display:"flex", flexDirection:"column", gap:1, background:"var(--line-2)" }}>
            {past.map(e => <EventRow key={e.id} ev={e} onJumpToSchool={onJumpToSchool} past />)}
          </div>
        </div>
      )}

      <div style={{ height: 60 }} />
    </div>
  );
}

function EventRow({ ev, onJumpToSchool, past=false }) {
  const today = getToday();
  return (
    <button
      onClick={() => ev.school && onJumpToSchool(ev.school)}
      style={{
        background: "var(--cream)",
        border: "none",
        padding: "16px 4px",
        cursor: ev.school ? "pointer" : "default",
        textAlign: "left",
        display: "flex", gap: 14, alignItems: "flex-start",
        opacity: past ? 0.7 : 1,
      }}>
      <DateChip date={ev._date} small />
      <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
        <div style={{
          display:"flex", alignItems:"center", gap:10, marginBottom:4, flexWrap:"wrap",
        }}>
          <KindBadge kind={ev.kind} />
          {!past && (
            <span style={{
              fontFamily:"var(--sans)", fontSize:10, fontWeight:500,
              letterSpacing:"0.14em", textTransform:"uppercase",
              color:"var(--ink-3)",
            }}>{relativeLabel(ev._date, today)}</span>
          )}
          {ev.done && (
            <span style={{
              fontFamily:"var(--sans)", fontSize:10, fontWeight:500,
              letterSpacing:"0.14em", textTransform:"uppercase",
              color:"var(--moss)",
            }}>✓ Attended</span>
          )}
        </div>
        <div className="serif" style={{
          fontSize: 17, fontWeight: 500, lineHeight: 1.25,
          color: "var(--forest-deep)",
          letterSpacing: "-0.005em",
        }}>
          {ev.school ? <span>{ev.school} <span style={{ color:"var(--ink-3)", fontWeight:400 }}>—</span> </span> : null}
          {ev.title}
        </div>
        {ev.note && (
          <p style={{
            fontSize: 12.5, lineHeight: 1.55, color: "var(--ink-2)",
            margin: "6px 0 0",
          }}>{ev.note}</p>
        )}
        <div style={{
          fontSize: 11.5, color: "var(--ink-3)", marginTop: 6,
          fontFamily:"var(--sans)",
          letterSpacing: "0.02em",
        }}>
          {ev.time} · {ev.location}
        </div>
      </div>
      {ev.school && (
        <div style={{
          flex:"0 0 auto", paddingTop:6,
          fontFamily:"var(--sans)", fontSize:14, color:"var(--ink-3)",
        }}>›</div>
      )}
    </button>
  );
}

Object.assign(window, { CalendarTab });