// ─── COMING UP BAR — sticky, sits below tabs, visible on every tab ──

function fmtMonth(d) { return d.toLocaleDateString("en-US", { month:"short" }).toUpperCase(); }
function fmtDay(d)   { return d.getDate(); }
function fmtWeekday(d){ return d.toLocaleDateString("en-US", { weekday:"short" }); }
function daysBetween(a, b) { return Math.round((a - b) / 86400000); }
function relativeLabel(target, today) {
  const diff = daysBetween(target, today);
  if (diff === 0) return "Today";
  if (diff === 1) return "Tomorrow";
  if (diff > 1 && diff < 7) return `In ${diff} days`;
  if (diff >= 7 && diff < 14) return "Next week";
  if (diff >= 14 && diff < 60) return `In ${Math.round(diff/7)} weeks`;
  if (diff >= 60) return `In ${Math.round(diff/30)} months`;
  if (diff < 0) return `${-diff}d ago`;
  return "";
}

// Today is anchored to Apr 30 2026 — gives a useful "next 5" window
function getToday() { return new Date(2026, 3, 30); }

function getUpcoming(n = 5) {
  const today = getToday();
  return EVENTS
    .map(e => ({ ...e, _date: new Date(e.dateISO + "T00:00:00") }))
    .filter(e => e._date >= today)
    .sort((a, b) => a._date - b._date)
    .slice(0, n);
}

function eventKindBadge(kind) {
  const map = {
    tour:         { label:"TOUR",      color:"var(--forest)" },
    fair:         { label:"FAIR",      color:"var(--gold)"   },
    deadline:     { label:"DEADLINE",  color:"#9C3B2E"       },
    notification: { label:"NOTIFY",    color:"var(--gold)"   },
    reply:        { label:"REPLY",     color:"var(--gold)"   },
    info:         { label:"NOTE",      color:"var(--ink-3)"  },
  };
  return map[kind] || { label:"", color:"var(--ink-3)" };
}

function ComingUpBar({ onJumpToCalendar, onJumpToSchool }) {
  const upcoming = getUpcoming(5);
  const today = getToday();
  if (upcoming.length === 0) return null;

  const next = upcoming[0];
  const rest = upcoming.slice(1);

  return (
    <div style={{
      position: "sticky",
      top: 56, // sits just below the tab nav (56px tall)
      zIndex: 9,
      background: "var(--cream-soft)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{ padding: "14px 20px 16px" }}>
        <div style={{
          display: "flex",
          alignItems: "baseline",
          justifyContent: "space-between",
          marginBottom: 12,
        }}>
          <Eyebrow tone="gold">Coming up</Eyebrow>
          <button onClick={onJumpToCalendar} style={{
            background: "transparent",
            border: "none",
            padding: 0,
            cursor: "pointer",
            fontFamily: "var(--sans)",
            fontSize: 10,
            fontWeight: 500,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            color: "var(--ink-3)",
          }}>Full calendar →</button>
        </div>

        {/* Next event — featured */}
        <button
          onClick={() => next.school ? onJumpToSchool(next.school) : onJumpToCalendar()}
          style={{
            width: "100%",
            background: "transparent",
            border: "none",
            padding: 0,
            cursor: "pointer",
            textAlign: "left",
            display: "flex",
            gap: 14,
            alignItems: "center",
          }}>
          <DateChip date={next._date} accent />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:3 }}>
              <KindBadge kind={next.kind} />
              <span style={{
                fontFamily:"var(--sans)", fontSize:10, fontWeight:500,
                letterSpacing:"0.14em", textTransform:"uppercase",
                color:"var(--gold)",
              }}>{relativeLabel(next._date, today)}</span>
            </div>
            <div className="serif" style={{
              fontSize:19, fontWeight:500, lineHeight:1.2,
              color:"var(--forest-deep)",
              whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis",
            }}>
              {next.school ? `${next.school} — ` : ""}{next.title}
            </div>
            <div style={{
              fontSize:12, color:"var(--ink-2)", marginTop:2,
              whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis",
            }}>
              {next.time} · {next.location}
            </div>
          </div>
        </button>

        {/* Mini-calendar — next 4 */}
        {rest.length > 0 && (
          <div style={{
            display:"flex", gap:8, marginTop:14,
            paddingTop:14, borderTop:"1px solid var(--line-2)",
            overflowX:"auto", scrollbarWidth:"none",
          }}>
            {rest.map(e => (
              <button key={e.id}
                onClick={() => e.school ? onJumpToSchool(e.school) : onJumpToCalendar()}
                style={{
                  flex:"0 0 auto",
                  background:"transparent",
                  border:"1px solid var(--line)",
                  borderRadius:2,
                  padding:"8px 10px",
                  cursor:"pointer",
                  textAlign:"left",
                  display:"flex", gap:10, alignItems:"center",
                  minWidth:0,
                }}>
                <DateChip date={e._date} small />
                <div style={{ minWidth:0 }}>
                  <div style={{
                    fontFamily:"var(--sans)", fontSize:9, fontWeight:500,
                    letterSpacing:"0.14em", textTransform:"uppercase",
                    color: eventKindBadge(e.kind).color,
                    marginBottom:2,
                  }}>{eventKindBadge(e.kind).label}</div>
                  <div className="serif" style={{
                    fontSize:13, fontWeight:500, lineHeight:1.2,
                    color:"var(--forest-deep)",
                    maxWidth:140,
                    whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis",
                  }}>
                    {e.school ? e.school.split(" ")[0] : e.title.split(" ").slice(0,2).join(" ")}
                  </div>
                </div>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function DateChip({ date, accent=false, small=false }) {
  const w = small ? 38 : 56;
  const h = small ? 42 : 60;
  return (
    <div style={{
      flex: `0 0 ${w}px`,
      width: w, height: h,
      border: `1px solid ${accent ? "var(--forest)" : "var(--line)"}`,
      borderRadius: 2,
      background: accent ? "var(--forest)" : "transparent",
      color: accent ? "var(--cream)" : "var(--forest-deep)",
      display:"flex", flexDirection:"column",
      alignItems:"center", justifyContent:"center",
      fontFamily:"var(--sans)",
      lineHeight: 1,
    }}>
      <div style={{
        fontSize: small ? 8 : 9,
        fontWeight:500, letterSpacing:"0.14em",
        opacity: 0.75,
        marginBottom: small ? 2 : 4,
      }}>{fmtMonth(date)}</div>
      <div className="serif" style={{
        fontSize: small ? 18 : 26,
        fontWeight: 400,
      }}>{fmtDay(date)}</div>
    </div>
  );
}

function KindBadge({ kind }) {
  const b = eventKindBadge(kind);
  return (
    <span style={{
      display:"inline-block",
      fontFamily:"var(--sans)", fontSize:9, fontWeight:500,
      letterSpacing:"0.18em", textTransform:"uppercase",
      color: b.color,
    }}>{b.label}</span>
  );
}

Object.assign(window, { ComingUpBar, getUpcoming, getToday, fmtMonth, fmtDay, fmtWeekday, daysBetween, relativeLabel, eventKindBadge, DateChip, KindBadge });