(function(){
// ============================================================
// todayrail.jsx — "Heute"-Spalte rechts (Desktop) bzw. Ausklapp-Panel (Mobile)
// Ersetzt den frueheren Tagesplaner: heutige Termine, Lernbloecke/Nachbearbeitungen, heutige Todos
// und eine Zeitbilanz (benoetigte Dauer gegen freie Arbeitszeit).
// Depends on window: t, localISO, hexToRgba, prioCol
// ============================================================

const pad2 = n => String(n).padStart(2, "0");
const hm = d => `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
const toMin = (s, def) => { const m = /^(\d{1,2}):(\d{2})/.exec(s || ""); return m ? (+m[1]) * 60 + (+m[2]) : def; };
const fmtMin = m => {
  m = Math.max(0, Math.round(m));
  const h = Math.floor(m / 60), r = m % 60;
  return h ? (r ? `${h} h ${r} min` : `${h} h`) : `${r} min`;
};

// Heute relevante Todos: heute geplant, ueberfaellig oder heute faellig (wie die Gruppen im Aufgaben-Tab).
function railTodos(todos, today) {
  return (todos || []).filter(t =>
    !t.done && !t.deletedAt && !t.recurring &&
    !(t.snoozedUntil && t.snoozedUntil > today) &&
    ((t.plannedDay && t.plannedDay !== "someday" && t.plannedDay <= today) || t.deadline === today)
  ).sort((a, b) =>
    (a.plannedDay || a.deadline || "").localeCompare(b.plannedDay || b.deadline || "") ||
    ({ hoch: 0, mittel: 1, niedrig: 2 }[a.priority || "mittel"] - { hoch: 0, mittel: 1, niedrig: 2 }[b.priority || "mittel"])
  );
}

// Heutige Termine mit Uhrzeit als [{startMin, endMin, title, cal}]
function railEvents(events, today) {
  return (events || []).filter(e => e.start?.dateTime && e.start.dateTime.slice(0, 10) === today).map(e => {
    const s = new Date(e.start.dateTime), en = e.end?.dateTime ? new Date(e.end.dateTime) : s;
    // Endet ein Termin an einem spaeteren Tag (ueber Mitternacht), belegt er den Rest des Tages.
    const endMin = localISO(en) > today ? 24 * 60 : en.getHours() * 60 + en.getMinutes();
    return { startMin: s.getHours() * 60 + s.getMinutes(), endMin: Math.max(endMin, s.getHours() * 60 + s.getMinutes()), title: e.subject || "", time: hm(s), cal: e._calName || "" };
  }).sort((a, b) => a.startMin - b.startMin);
}

// Zeitbilanz: geplant = Dauer aller heute geplanten Todos; gearbeitet = heute erfasste Zeit (Todo-Timer, Lern-/Vorlesungs-Timer).
// "Graue Zeit": Wird ein heute geplantes Todo erledigt, bevor seine Dauer abgelaufen ist, zaehlt die nicht gebrauchte Restzeit
// als erledigt (nur in dieser Tagesbilanz, nicht in der Statistik). Ueberfaellige Todos zaehlen nicht zur Planung, sondern als Bonus.
function railBalance({ todos, today, lectures, exams }) {
  const [y, m, d] = today.split("-").map(Number);
  const dayStart = new Date(y, m - 1, d).getTime(), dayEnd = dayStart + 86400000, now = Date.now();
  const lecMap = new Map((lectures || []).map(l => [String(l.id), l]));
  const blockByTodo = new Map();
  (exams || []).filter(e => !e.deletedAt).forEach(e => (e.studyBlocks || []).forEach(b => { if (b.todoId != null) blockByTodo.set(String(b.todoId), b); }));
  const sessMin = arr => (arr || []).filter(s => s.date === today).reduce((s, x) => s + (Number(x.ms) > 0 ? Number(x.ms) : 0), 0) / 60000;
  const logMin = t => (t.timeLog || []).reduce((s, e) => {
    const st = Math.max(e.start, dayStart), en = Math.min(e.end == null ? now : e.end, dayEnd);
    return s + Math.max(0, en - st);
  }, 0) / 60000;
  const doneToday = t => t.done && t.doneAt && localISO(new Date(t.doneAt)) === today;
  const lecOf = t => (t.sourceLectureId != null ? lecMap.get(String(t.sourceLectureId)) : null);
  const defMin = t => { const l = lecOf(t); return l ? Math.round((Number(l.hoursAfter) || 0) * 60) : 0; };
  const durOf = t => (Number(t.duration) > 0 ? Number(t.duration) : defMin(t));

  const plan = (todos || []).filter(t => !t.deletedAt && !t.recurring && t.plannedDay === today && (!t.done || doneToday(t)));
  let planned = 0, grey = 0, noDur = 0;
  const lecGroups = new Map();
  plan.forEach(t => {
    const dur = durOf(t);
    if (dur > 0) planned += dur; else noDur++;
    const lec = lecOf(t), blk = blockByTodo.get(String(t.id));
    if (lec) {
      const g = lecGroups.get(String(lec.id)) || { lec, dur: 0, allDone: true };
      g.dur += dur; if (!t.done) g.allDone = false;
      lecGroups.set(String(lec.id), g);
    } else if (blk) {
      if (t.done) grey += Math.max(0, (dur > 0 ? dur : Math.round((Number(blk.hours) || 0) * 60)) - sessMin(blk.sessions));
    } else if (t.done) {
      grey += Math.max(0, dur - logMin(t));
    }
  });
  lecGroups.forEach(g => { if (g.allDone) grey += Math.max(0, g.dur - sessMin(g.lec.sessions)); });

  let worked = 0;
  (lectures || []).forEach(l => { worked += sessMin(l.sessions); });
  (exams || []).filter(e => !e.deletedAt).forEach(e => (e.studyBlocks || []).forEach(b => { worked += sessMin(b.sessions); }));
  (todos || []).forEach(t => { if (!t.deletedAt && !lecOf(t) && !blockByTodo.get(String(t.id))) worked += logMin(t); });

  const overdue = railTodos(todos, today).filter(t => t.plannedDay !== today);
  const bonusMin = overdue.reduce((s, t) => s + durOf(t), 0);
  return { planned, worked: Math.round(worked), grey: Math.round(grey), noDur, bonusMin, bonusN: overdue.length };
}

// Eigene Auswahlliste im App-Stil (die native <select>-Liste laesst sich nicht gestalten): Knopf + Liste, Pfeiltasten,
// Enter, Escape, Schliessen bei Klick daneben.
function AppSelect({ value, onChange, options, placeholder, ariaLabel, style }) {
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState(-1);
  const ref = React.useRef(null);
  const cur = options.find(o => String(o.value) === String(value));
  React.useEffect(() => {
    if (!open) return;
    const away = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", away);
    return () => document.removeEventListener("mousedown", away);
  }, [open]);
  const openMenu = () => { setActive(Math.max(0, options.findIndex(o => String(o.value) === String(value)))); setOpen(true); };
  const pick = o => { onChange(o.value); setOpen(false); };
  const onKey = e => {
    if (!open) { if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") { e.preventDefault(); openMenu(); } return; }
    if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setOpen(false); }
    else if (e.key === "ArrowDown") { e.preventDefault(); setActive(i => Math.min(options.length - 1, i + 1)); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setActive(i => Math.max(0, i - 1)); }
    else if (e.key === "Enter") { e.preventDefault(); if (options[active]) pick(options[active]); }
    else if (e.key === "Tab") setOpen(false);
  };
  return (
    <div ref={ref} style={{ position: "relative", minWidth: 0, ...style }} onKeyDown={onKey}>
      <button type="button" onClick={() => open ? setOpen(false) : openMenu()} aria-haspopup="listbox" aria-expanded={open} aria-label={ariaLabel}
        style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "7px 10px", fontSize: 12.5, textAlign: "left", borderRadius: 8, border: `1px solid ${open ? "var(--col-accent)" : "var(--col-border)"}`, background: "var(--col-bg)", color: cur ? "var(--col-text)" : "var(--col-text-3)", cursor: "pointer" }}>
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{cur ? cur.label : placeholder}</span>
        <span style={{ fontSize: 9, color: "var(--col-text-3)", transform: open ? "rotate(180deg)" : "none", transition: "transform 0.15s", flexShrink: 0 }}>▼</span>
      </button>
      {open && (
        <div role="listbox" style={{ position: "absolute", left: 0, right: 0, top: "calc(100% + 4px)", zIndex: 400, maxHeight: 220, overflowY: "auto", background: "var(--col-bg)", border: "1px solid var(--col-border)", borderRadius: 8, boxShadow: "0 8px 24px rgba(0,0,0,0.14)", padding: 4 }}>
          {options.map((o, i) => {
            const sel = String(o.value) === String(value);
            return (
              <div key={o.value} role="option" aria-selected={sel} onMouseDown={e => e.preventDefault()} onClick={() => pick(o)} onMouseEnter={() => setActive(i)}
                style={{ padding: "7px 10px", fontSize: 12.5, borderRadius: 6, cursor: "pointer", color: sel ? "var(--col-accent)" : "var(--col-text)", fontWeight: sel ? 600 : 400, background: i === active ? "var(--col-accent-wash)" : "transparent", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                {o.label}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// Freier Timer: Vorlesung (Fach) und Dauer waehlen und starten, auch wenn kein Todo vorhanden ist.
function FreeTimerPicker({ lectures, startLectureTimer }) {
  const t = window.t;
  const [open, setOpen] = React.useState(false);
  const [lecId, setLecId] = React.useState("");
  const [min, setMin] = React.useState(60);
  const list = (lectures || []).filter(l => !l.deletedAt).slice().sort((a, b) => String(a.label || a.fromOutlook || "").localeCompare(String(b.label || b.fromOutlook || "")));
  if (!startLectureTimer || list.length === 0) return null;
  const sel = list.find(l => String(l.id) === String(lecId));
    if (!open) {
    return (
      <button onClick={() => setOpen(true)} className="mono"
        style={{ marginTop: 4, padding: "6px 12px", fontSize: 11, borderRadius: 20, border: "1px dashed var(--col-border)", color: "var(--col-text-sec)", background: "transparent", cursor: "pointer", width: "100%", textAlign: "left" }}>
        + {t("study.freeOpen")}
      </button>
    );
  }
  return (
    <div style={{ marginTop: 4, padding: "8px", borderRadius: 8, border: "1px solid var(--col-border-soft)", background: "var(--col-bg-sec)", display: "flex", flexDirection: "column", gap: 6 }}>
      <AppSelect value={lecId} placeholder={t("study.freePick")} ariaLabel={t("study.freePick")}
        onChange={v => { setLecId(String(v)); const l = list.find(x => String(x.id) === String(v)); if (l && l.hoursAfter > 0) setMin(Math.round(l.hoursAfter * 60)); }}
        options={list.map(l => ({ value: String(l.id), label: l.label || l.fromOutlook }))} />
      <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
        <AppSelect style={{ flex: 1 }} value={min} ariaLabel={t("study.freeDuration")} onChange={v => setMin(Number(v))}
          options={[...new Set([15, 30, 45, 60, 90, 120, 180, min])].sort((a, c) => a - c).map(m => ({ value: m, label: fmtMin(m) }))} />
        <button disabled={!sel} onClick={() => { startLectureTimer(sel, null, min / 60, { free: true }); setOpen(false); setLecId(""); }}
          style={{ padding: "6px 14px", fontSize: 12, borderRadius: 20, border: "none", background: "var(--col-accent)", color: "var(--col-bg)", fontWeight: 500, cursor: sel ? "pointer" : "default", opacity: sel ? 1 : 0.4 }}>{t("study.start")}</button>
        <button onClick={() => setOpen(false)} aria-label={t("rail.close")} style={{ background: "none", border: "none", color: "var(--col-text-3)", fontSize: 18, cursor: "pointer", padding: "0 4px" }}>×</button>
      </div>
    </div>
  );
}

function RailBody({ todos, blocks, listEvents, allEvents, today, settings, onToggle, studyBadgeFor, startStudyTimer, startLectureTimer, examColor, setTab, lectures, exams }) {
  const t = window.t;
  const list = railTodos(todos, today);
  const blockTodoIds = new Set((blocks || []).map(b => b.todo && String(b.todo.id)).filter(Boolean));
  const blockLecIds = new Set((blocks || []).filter(b => b._isLecture && b.lec).map(b => String(b.lec.id)));
  // Vom Vorlesungsblock abgedeckte Nachbearbeitungen stehen im Block (mit Anzahl), nicht zusaetzlich in der Liste
  const rest = list.filter(x => !blockTodoIds.has(String(x.id)) && !(x.sourceLectureId != null && x.plannedDay && x.plannedDay <= today && blockLecIds.has(String(x.sourceLectureId))));
  const lecOpen = b => list.filter(x => String(x.sourceLectureId) === String(b.lec.id) && x.plannedDay && x.plannedDay <= today);
  const lecOpenMin = b => lecOpen(b).reduce((s, x) => s + (Number(x.duration) > 0 ? Number(x.duration) : Math.round((Number(b.lec.hoursAfter) || 0) * 60)), 0);
  const bal = railBalance({ todos, today, lectures, exams });
  const events = railEvents(listEvents, today);
  const doneMin = bal.worked + bal.grey;
  const complete = bal.planned > 0 && doneMin >= bal.planned;
  const pct = bal.planned > 0 ? Math.min(100, Math.round(doneMin / bal.planned * 100)) : 0;
  const cap = { color: "var(--col-text-3)", marginBottom: 6, marginTop: 14 };
  const d = new Date();
  const dateLabel = d.toLocaleDateString(settings?.language === "en" ? "en-GB" : "de-CH", { weekday: "long", day: "numeric", month: "long" });

  const renderTodo = (x, nested) => {
    const badge = studyBadgeFor ? studyBadgeFor(x) : null;
    const overdue = x.plannedDay && x.plannedDay < today;
    return (
      <div key={x.id} style={{ display: "flex", alignItems: "flex-start", gap: 8, padding: "5px 0", marginLeft: nested ? 10 : 0, borderBottom: "1px solid var(--col-border-soft)" }}>
        <button onClick={() => onToggle(x)} aria-label={t("rail.complete")} title={t("rail.complete")}
          style={{ width: 16, height: 16, marginTop: 2, borderRadius: "50%", border: `1.5px solid ${(window.prioCol || {})[x.priority || "mittel"] || "var(--col-accent)"}`, background: "transparent", cursor: "pointer", flexShrink: 0, padding: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, color: "var(--col-text)", lineHeight: 1.35, wordBreak: "break-word" }}>{x.text}</div>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 2, fontSize: 10 }}>
            {x.duration > 0 && <span className="mono" style={{ color: "var(--col-text-3)" }}>{fmtMin(x.duration)}</span>}
            {overdue && <span className="mono" style={{ color: "var(--col-danger)" }}>{t("rail.overdue")}</span>}
            {x.deadline === today && <span className="mono" style={{ color: "var(--col-warn)" }}>{t("rail.dueToday")}</span>}
            {!nested && badge !== null && <span className="mono" style={{ color: "var(--col-accent)", border: "1px solid var(--col-accent)", borderRadius: 10, padding: "0 5px" }}>{badge ? t("todoitem.studyBadgeNamed", { name: badge }) : t("todoitem.studyBadge")}</span>}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div>
      <div className="serif" style={{ fontSize: 18, fontStyle: "italic", fontWeight: 500, color: "var(--col-text)", marginBottom: 10 }}>{dateLabel}</div>

      <div style={{ background: "var(--col-bg-sec)", border: "1px solid var(--col-border-soft)", borderRadius: 8, padding: "10px 12px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
          <span className="cap" style={{ color: "var(--col-text-3)" }}>{t("rail.balance")}</span>
          <span className="mono" style={{ fontSize: 11, color: complete ? "var(--col-ok)" : "var(--col-text-sec)" }}>{fmtMin(doneMin)} / {fmtMin(bal.planned)}</span>
        </div>
        <div style={{ height: 4, borderRadius: 2, background: "var(--col-border-soft)", marginTop: 7, overflow: "hidden" }}>
          <div style={{ width: pct + "%", height: 4, background: complete ? "var(--col-ok)" : "var(--col-accent)" }} />
        </div>
        <div style={{ fontSize: 10.5, color: "var(--col-text-3)", marginTop: 6 }}>
          {bal.planned > 0 && (complete ? t("rail.allDone") : t("rail.remaining", { t: fmtMin(bal.planned - doneMin) }))}
          {bal.grey > 0 && ` · ${t("rail.grey", { t: fmtMin(bal.grey) })}`}
          {bal.noDur > 0 && ` · ${t("rail.noDuration", { n: bal.noDur })}`}
        </div>
      </div>

      {bal.bonusN > 0 && (
        <div style={{ background: "var(--col-bg-sec)", border: "1px solid var(--col-border-soft)", borderRadius: 8, padding: "10px 12px", marginTop: 8 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
            <span className="cap" style={{ color: "var(--col-text-3)" }}>{t("rail.overdueBar")}</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--col-warn)" }}>{fmtMin(bal.bonusMin)}</span>
          </div>
          <div style={{ height: 4, borderRadius: 2, background: "var(--col-border-soft)", marginTop: 7, overflow: "hidden" }}>
            <div style={{ width: Math.min(100, Math.round(bal.bonusMin / (bal.planned + bal.bonusMin || 1) * 100)) + "%", height: 4, background: "var(--col-warn)" }} />
          </div>
          <div style={{ fontSize: 10.5, color: "var(--col-text-3)", marginTop: 6 }}>{t("rail.bonusCount", { n: bal.bonusN })}</div>
        </div>
      )}

      {events.length > 0 && <>
        <div className="cap" style={cap}>{t("rail.events")}</div>
        {events.map((e, i) => (
          <div key={i} style={{ display: "flex", gap: 8, alignItems: "baseline", padding: "3px 0", fontSize: 12.5 }}>
            <span className="mono" style={{ fontSize: 10.5, color: "var(--col-text-3)", flexShrink: 0 }}>{e.time}</span>
            <span style={{ color: "var(--col-text)", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={e.title}>{e.title}</span>
          </div>
        ))}
      </>}

      {((blocks || []).length > 0 || ((lectures || []).length > 0 && startLectureTimer)) && <>
        <div className="cap" style={cap}>{t("rail.study")}</div>
        {blocks.map(b => {
          const bc = examColor ? examColor(b.exam) : "var(--col-accent)";
          const done = b._timedOut;
          return (
            <React.Fragment key={b.id}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", marginBottom: 4, borderRadius: 6, background: "var(--col-bg-sec)", borderLeft: `3px solid ${done ? "var(--col-ok)" : bc}`, opacity: done ? 0.75 : 1 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: "var(--col-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={b.exam.name}>{done ? "✓ " : ""}{b.exam.name}</div>
                <div className="mono" style={{ fontSize: 10, color: "var(--col-text-3)" }}>{b._isLecture ? `${t("pruef.followupLabel")} · ${fmtMin(lecOpenMin(b))} · ${(lecOpen(b).length === 1 ? t("rail.taskCountOne") : t("rail.taskCount", { n: lecOpen(b).length }))}` : `${b.todo?.text || ""} · ${fmtMin(Math.round((b.hours || 0) * 60))}`}</div>
              </div>
              <button onClick={() => b._isLecture ? startLectureTimer(b.lec, b.todo?.id, b.hours) : startStudyTimer(b, b.exam)}
                title={done ? t("study.resume") : t("study.start")} aria-label={done ? t("study.resume") : t("study.start")}
                style={{ width: 30, height: 30, borderRadius: "50%", border: "none", background: done ? "transparent" : bc, color: done ? "var(--col-ok)" : "#fff", cursor: "pointer", fontSize: 11, flexShrink: 0 }}>▶</button>
            </div>
            {b._isLecture && lecOpen(b).length > 0 && <div style={{ marginBottom: 6 }}>{lecOpen(b).map(x => renderTodo(x, true))}</div>}
            </React.Fragment>
          );
        })}
        <FreeTimerPicker lectures={lectures} startLectureTimer={startLectureTimer} />
      </>}

      {(rest.length > 0 || (blocks || []).length === 0) && <div className="cap" style={cap}>{t("rail.todos")} ({rest.length})</div>}
      {rest.length === 0 && (blocks || []).length === 0 && <div style={{ fontSize: 12, color: "var(--col-text-3)", fontStyle: "italic" }}>{t("rail.empty")}</div>}
      {rest.map(x => renderTodo(x, false))}
    </div>
  );
}

const RAIL_WIDTH = 300;

function TodayRail(props) {
  return (
    <aside style={{ width: RAIL_WIDTH, flexShrink: 0, padding: "22px 14px", borderLeft: "1px solid var(--col-border-soft)", background: "var(--col-bg)", position: "sticky", top: 0, height: "100vh", overflowY: "auto" }}>
      <RailBody {...props} />
    </aside>
  );
}

// Mobile: Chip mit Zeitbilanz, Tippen oeffnet ein Panel von unten.
function TodayRailChip({ open, onOpen, onClose, ...props }) {
  const t = window.t;
  const list = railTodos(props.todos, props.today);
  const bal = railBalance({ todos: props.todos, today: props.today, lectures: props.lectures, exams: props.exams });
  const complete = bal.planned > 0 && bal.worked + bal.grey >= bal.planned;
  return (
    <>
      <button onClick={onOpen} className="mono"
        style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 12px", marginBottom: 10, fontSize: 11, borderRadius: 20, border: `1px solid ${complete ? "var(--col-ok)" : "var(--col-border)"}`, color: complete ? "var(--col-ok)" : "var(--col-text-sec)", background: "var(--col-bg-sec)", cursor: "pointer" }}>
        {t("rail.chip", { done: fmtMin(bal.worked + bal.grey), planned: fmtMin(bal.planned) })}
      </button>
      {open && (
        <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.35)", zIndex: 300, display: "flex", alignItems: "flex-end" }}>
          <div onClick={e => e.stopPropagation()}
            style={{ width: "100%", maxHeight: "80vh", overflowY: "auto", background: "var(--col-bg)", borderRadius: "14px 14px 0 0", padding: "16px 16px calc(24px + env(safe-area-inset-bottom,0px))", boxShadow: "0 -8px 24px rgba(0,0,0,0.18)" }}>
            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 4 }}>
              <button onClick={onClose} aria-label={t("rail.close")} style={{ background: "none", border: "none", fontSize: 22, lineHeight: 1, color: "var(--col-text-3)", width: 36, height: 36, cursor: "pointer" }}>×</button>
            </div>
            <RailBody {...props} />
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { TodayRail, TodayRailChip, FreeTimerPicker, AppSelect, RAIL_WIDTH });
})();