Calendar_Frontend/components/admin/useEvents.ts

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { goToAdminLogin } from "@/lib/admin-auth";
import { api } from "@/lib/api";
import { describeApiError, isSessionExpired } from "@/lib/api-errors";
import { CALENDARS, calendarById } from "@/lib/calendars";
import type { CalendarEvent } from "@/lib/types";

export type CalendarLoad = { status: "loading" } | { status: "ready" } | { status: "error"; message: string };

const initialLoads = (): Record<number, CalendarLoad> =>
  Object.fromEntries(CALENDARS.map((c) => [c.id, { status: "loading" } as CalendarLoad]));

/**
 * Every calendar's events, loaded in parallel - there is no endpoint that
 * returns them all at once (docs/api-wishlist.md).
 *
 * Each calendar loads and fails on its own: one calendar the API cannot serve
 * shows an error on its chip instead of blanking the whole list. The admin feed
 * returns exactly the calendar's own events (it ignores `includes_calendars`),
 * so a calendar's slice of the list can be replaced by calendarId.
 *
 * A 401 on any of them means the session is gone, and goes to the login page.
 */
export function useEvents() {
  const [events, setEvents] = useState<CalendarEvent[]>([]);
  const [loads, setLoads] = useState<Record<number, CalendarLoad>>(initialLoads);
  // Per-calendar request counter, so a slow response cannot overwrite a newer one.
  const generation = useRef<Record<number, number>>({});

  const fetchCalendar = useCallback(async (calendarId: number) => {
    const calendar = calendarById(calendarId);
    if (!calendar) return;
    const mine = (generation.current[calendarId] = (generation.current[calendarId] ?? 0) + 1);
    try {
      const loaded = await api.getEvents(calendar.slug);
      if (generation.current[calendarId] !== mine) return;
      setEvents((current) => [...current.filter((e) => e.calendarId !== calendarId), ...loaded]);
      setLoads((current) => ({ ...current, [calendarId]: { status: "ready" } }));
    } catch (e) {
      if (generation.current[calendarId] !== mine) return;
      if (isSessionExpired(e)) {
        goToAdminLogin();
        return;
      }
      setLoads((current) => ({ ...current, [calendarId]: { status: "error", message: describeApiError(e) } }));
    }
  }, []);

  useEffect(() => {
    for (const calendar of CALENDARS) {
      void fetchCalendar(calendar.id);
    }
  }, [fetchCalendar]);

  /** Reload one calendar, or all. Shows the loading state; existing events stay visible meanwhile. */
  const reload = useCallback(
    (calendarId?: number) => {
      const ids = calendarId === undefined ? CALENDARS.map((c) => c.id) : [calendarId];
      setLoads((current) => ({ ...current, ...Object.fromEntries(ids.map((id) => [id, { status: "loading" }])) }));
      for (const id of ids) {
        void fetchCalendar(id);
      }
    },
    [fetchCalendar],
  );

  /** Re-fetch without flagging the calendar as loading - after a write, to pick up server-side fields. */
  const refresh = useCallback((calendarId: number) => void fetchCalendar(calendarId), [fetchCalendar]);

  /** Put a saved event into the list (new or changed), replacing any copy with the same id. */
  const upsertEvent = useCallback((event: CalendarEvent) => {
    setEvents((current) => [...current.filter((e) => e.eventId !== event.eventId), event]);
  }, []);

  const removeEvent = useCallback((eventId: number) => {
    setEvents((current) => current.filter((e) => e.eventId !== eventId));
  }, []);

  return { events, loads, reload, refresh, upsertEvent, removeEvent };
}