tessera-ctl/apps/web/src/components/dashboard/widgets/calendar-widget.tsx

'use client';

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useTranslations } from 'next-intl';
import type { WidgetProps } from '../widget-registry';
import { fetchEvents, fetchSources } from '@/lib/calendar-api';
import type { CalendarEvent } from '@/lib/calendar-api';
import {
  buildCalendarDays,
  buildDayBadges,
  computeFetchWindow,
  eventDayOffset,
  formatEventDate,
  formatEventDay,
  formatEventTime,
  formatMonthLabel,
  groupEventsByDate,
  resolveCalendarConfig,
  selectUpcomingEvents,
  WEEKDAY_LABELS,
} from './calendar-month';

// quick-260916-j4f: Breite und Rand-Klemmung des Termin-Tooltips aus einer
// Quelle, damit Breite und Klemmwert nicht auseinanderlaufen; 288 px
// entspricht Tailwind w-72.
const TOOLTIP_WIDTH_PX = 288;
const TOOLTIP_EDGE_PX = 4;

/**
 * Calendar widget (DASH-05, D-10 read-only), neu gebaut nach dem Vorbild des
 * alten persoenlichen Dashboards des Anwenders (quick-260916-htc).
 *
 * Oben ein Monatsraster (Nav-Zeile Zurueck/Monat/Weiter, Wochentagskopf,
 * 42 Zellen ab Montag, Faehrmonatstage gedaempft, heutiger Tag hervorgehoben,
 * Zaehl-Plakette an Tagen mit Terminen in der Farbe des Kalenders (ein
 * Kalender am Tag); bei mehreren Kalendern am selben Tag je ein kleiner
 * Kreis pro Kalender (max. drei, danach zwei plus grauer Restkreis mit
 * Summe, Logik in `buildDayBadges`, quick-260916-k2z), Tooltip beim
 * Ueberfahren mit Farbpunkt je Zeile (quick-260916-jvj)), darunter
 * der Block "Naechste Termine". Beide Bloecke lassen sich unabhaengig
 * ein-/ausblenden (Config `showMonth`/`maxEvents`, siehe calendar-month.ts).
 *
 * Der Tooltip wird per `createPortal` in `document.body` gerendert, weil die
 * Karte in widget-wrapper.tsx `overflow-hidden` traegt und ein absolut
 * positionierter Tooltip sonst abgeschnitten wuerde. Titel im Tooltip
 * brechen um (kein truncate); Breite/Klemmung kommen aus
 * `TOOLTIP_WIDTH_PX`/`TOOLTIP_EDGE_PX` (quick-260916-j4f).
 *
 * Das Ladefenster ist IMMER auf lokale Tagesgrenzen gerundet
 * (`computeFetchWindow`), damit der Backend-Cache-Schluessel
 * (`${userId}:${from.toISOString()}:${to.toISOString()}`) ueber den
 * 5-Minuten-Refresh hinweg stabil bleibt — auch wenn die Monatsansicht
 * ausgeblendet ist, deckt das Fenster weiterhin das 42-Tage-Raster des
 * (dann immer heutigen) Monats ab, siehe SUMMARY.
 *
 * Mehrtaegige/ganztaegige Termine werden im Raster nur am Starttag gezaehlt
 * (siehe calendar-month.ts).
 *
 * Refreshes every 5 minutes to match the backend cache TTL.
 * NEVER fetches external calendars directly (RESEARCH anti-pattern).
 */
export function CalendarWidget({ config }: WidgetProps) {
  const t = useTranslations('widgets');
  const [events, setEvents] = useState<CalendarEvent[]>([]);
  const [hasSources, setHasSources] = useState<boolean | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [monthDate, setMonthDate] = useState(() => {
    const now = new Date();
    return new Date(now.getFullYear(), now.getMonth(), 1);
  });
  const [hover, setHover] = useState<{
    key: string;
    rect: { top: number; left: number; bottom: number; right: number };
  } | null>(null);
  const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);

  // Restposten 3a/3b (quick-260921-jt4): zwei Merkungen ausserhalb des
  // Render-Zustands, damit ein Monatswechsel, der weder die Quellenliste noch
  // das Termin-Ladefenster tatsaechlich aendert, keinen erneuten Abruf
  // ausloest — der 5-Minuten-Auffrischer (siehe `force` unten) ruft
  // unabhaengig davon immer beide ab, sonst veraltet die Anzeige still.
  // hasSourcesRef: `null` heisst "noch nie erfolgreich geholt".
  const hasSourcesRef = useRef<boolean | null>(null);
  // lastFetchWindowRef: die beiden ISO-Zeichenketten, die zuletzt
  // TATSAECHLICH an fetchEvents gingen (nicht nur berechnet) — derselbe
  // Vergleichswert, den auch die API sieht.
  const lastFetchWindowRef = useRef<{ from: string; to: string } | null>(null);

  // Befund 1/2 (quick-260921-gof): keine Merkung noetig — resolveCalendarConfig
  // ist eine reine Funktion, die nur drei einfache Werte liefert; eine
  // Merkung um das ganze config-Objekt hat hier nie etwas gespart.
  const { showMonth, maxEvents, lookaheadDays } = resolveCalendarConfig(config);

  useEffect(() => {
    let cancelled = false;

    // `force`: true nur fuer den 5-Minuten-Auffrischer. Ein durch
    // Monatswechsel ausgeloester Lauf (force=false) darf beide Sperrgriffe
    // unten greifen lassen; der Auffrischer muss sie UNBEDINGT umgehen,
    // sonst friert die Anzeige ein.
    async function loadData(force: boolean) {
      try {
        // Restposten 3b: die Quellenliste haengt nicht vom angezeigten Monat
        // ab — nur holen, wenn sie noch unbekannt ist ODER der Lauf
        // erzwungen wurde (Aufbau: hasSourcesRef ist null, greift also
        // ohnehin; Auffrischer: force=true).
        if (hasSourcesRef.current === null || force) {
          const sources = await fetchSources();
          if (cancelled) return;
          hasSourcesRef.current = sources.length > 0;
        }

        if (!hasSourcesRef.current) {
          setHasSources(false);
          setEvents([]);
          setIsLoading(false);
          return;
        }

        setHasSources(true);

        // Fetch aggregated events for the current grid/lookahead window —
        // ALWAYS with both day-boundary ISO strings (T-HTC-03).
        const { from, to } = computeFetchWindow(monthDate, lookaheadDays);
        const fromIso = from.toISOString();
        const toIso = to.toISOString();

        // Restposten 3a: das neu berechnete Fenster deckt sich bei einem
        // Monatswechsel manchmal mit dem zuletzt tatsaechlich geholten
        // (siehe Kopfkommentar computeFetchWindow/SUMMARY) — dann ist der
        // Abruf verschwendet und faellt bis zum naechsten Server durch.
        const windowUnchanged =
          !force &&
          lastFetchWindowRef.current !== null &&
          lastFetchWindowRef.current.from === fromIso &&
          lastFetchWindowRef.current.to === toIso;
        if (windowUnchanged) {
          setIsLoading(false);
          return;
        }

        const eventData = await fetchEvents(fromIso, toIso);
        if (cancelled) return;
        lastFetchWindowRef.current = { from: fromIso, to: toIso };
        setEvents(eventData);
      } catch {
        // Silent fail — show empty state
        if (!cancelled) {
          setEvents([]);
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false);
        }
      }
    }

    // Aufbau bzw. Monatswechsel: nicht erzwungen — die beiden Sperrgriffe
    // oben entscheiden selbst, ob wirklich etwas Neues zu holen ist (beim
    // allerersten Aufbau sind beide Merkungen leer, holen also ohnehin).
    loadData(false);

    // Refresh every 5 minutes (300000ms) to match backend cache TTL — IMMER
    // erzwungen, sonst bemerkt die Kachel weder eine neue Quelle noch neue
    // Termine innerhalb des Fensters.
    intervalRef.current = setInterval(() => {
      loadData(true);
    }, 300_000);

    return () => {
      cancelled = true;
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
    // Befund 3/4 (quick-260921-gof): haengt jetzt direkt an monthDate statt an
    // monthDate.getTime(). Das ist nur deshalb gefahrlos, weil showToday
    // (unten) das Datum identitaetserhaltend setzt, wenn der gewuenschte
    // Monat bereits angezeigt wird — sonst wuerde jeder Druck auf den
    // Monatsknopf im laufenden Monat einen neuen Termin-Abruf ausloesen, der
    // ueber die API bis zum Exchange-Server durchschlaegt (D-04). Das
    // Ladefenster bleibt weiterhin auf lokale Tagesgrenzen gerundet, der
    // Backend-Cache-Schluessel aendert sich dadurch nicht.
  }, [monthDate, lookaheadDays]);

  const showPrev = useCallback(() => {
    setHover(null);
    setMonthDate((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
  }, []);
  const showNext = useCallback(() => {
    setHover(null);
    setMonthDate((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
  }, []);
  const showToday = useCallback(() => {
    setHover(null);
    // Identitaetserhaltend: wird der aktuelle Monat bereits angezeigt, bleibt
    // dieselbe monthDate-Referenz stehen, statt ein frisches Date-Objekt zu
    // erzeugen. Der Ladeeffekt haengt jetzt direkt an monthDate — ohne diese
    // Stabilisierung wuerde jeder Druck auf den Knopf einen neuen
    // Termin-Abruf ausloesen (Befund 3/4, D-04).
    setMonthDate((d) => {
      const now = new Date();
      if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth()) {
        return d;
      }
      return new Date(now.getFullYear(), now.getMonth(), 1);
    });
  }, []);

  const eventsByDate = useMemo(() => groupEventsByDate(events), [events]);
  const days = useMemo(() => buildCalendarDays(monthDate, eventsByDate), [monthDate, eventsByDate]);
  const upcoming = useMemo(
    () => selectUpcomingEvents(events, lookaheadDays, maxEvents),
    [events, lookaheadDays, maxEvents],
  );

  // Loading state
  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center p-2">
        <span className="text-sm text-muted-foreground">{t('calendar.loading')}</span>
      </div>
    );
  }

  // No sources configured
  if (hasSources === false) {
    return (
      <div className="flex h-full items-center justify-center p-2">
        <span className="text-sm text-muted-foreground">{t('calendar.emptyNoSources')}</span>
      </div>
    );
  }

  // Both blocks hidden by configuration
  if (!showMonth && maxEvents === 0) {
    return (
      <div className="flex h-full items-center justify-center p-2">
        <span className="text-sm text-muted-foreground">{t('calendar.nothingSelected')}</span>
      </div>
    );
  }

  const hoverEvents = hover ? (eventsByDate.get(hover.key) ?? []) : [];

  return (
    <div className="flex h-full flex-col gap-2 overflow-hidden px-3 pb-3 pt-1">
      {showMonth && (
        <div data-testid="calendar-month" className="flex shrink-0 flex-col gap-1">
          {/* Nav-Zeile: Pfeilknoepfe links/rechts, Monatsname mittig */}
          <div className="grid grid-cols-[auto_1fr_auto] items-center gap-1">
            <button
              type="button"
              aria-label={t('calendar.monthPrev')}
              title={t('calendar.monthPrev')}
              className="widgetNoDrag flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              onClick={showPrev}
            >
              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6" /></svg>
            </button>
            <button
              type="button"
              className="widgetNoDrag mx-auto truncate rounded-md px-2 py-1 text-sm font-semibold leading-5 text-foreground transition-colors hover:bg-muted"
              title={t('calendar.monthToday')}
              onClick={showToday}
            >
              {formatMonthLabel(monthDate)}
            </button>
            <button
              type="button"
              aria-label={t('calendar.monthNext')}
              title={t('calendar.monthNext')}
              className="widgetNoDrag flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              onClick={showNext}
            >
              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6" /></svg>
            </button>
          </div>

          {/* Wochentagskopf */}
          <div className="grid grid-cols-7 text-center text-[11px] font-medium leading-4 text-muted-foreground">
            {WEEKDAY_LABELS.map((label) => (
              <div key={label}>{label}</div>
            ))}
          </div>

          {/* Raster */}
          <div className="grid grid-cols-7 gap-y-0.5">
            {days.map((day) => {
              const hasEvents = day.events.length > 0;
              const badges = buildDayBadges(day.events);
              // Tag als Kreis (Design „Mosaik“): heute gelb gefuellt, Termine
              // als kleine Punkte unter der Zahl — je Kalenderquelle einer,
              // in deren Farbe; ohne Farbe im Akzentton, Rest grau.
              const cellClass = [
                'widgetNoDrag relative mx-auto flex h-[clamp(20px,7cqw,28px)] w-[clamp(20px,7cqw,28px)] items-center justify-center rounded-full text-[clamp(11px,2.9cqw,13px)] leading-none tabular-nums',
                day.inCurrentMonth ? 'text-foreground' : 'text-muted-foreground/70',
                day.isToday ? 'bg-primary font-semibold text-primary-foreground' : '',
                hasEvents && !day.isToday ? 'cursor-default font-medium hover:bg-muted' : '',
              ]
                .filter(Boolean)
                .join(' ');

              const cellContent = (
                <>
                  <span>{day.date.getDate()}</span>
                  {hasEvents && (
                    <span
                      data-testid="calendar-day-badges"
                      className="absolute bottom-[3px] left-1/2 flex -translate-x-1/2 items-center gap-[2px]"
                    >
                      {badges.map((badge) => {
                        const badgeClass = [
                          'block h-1 w-1 rounded-full',
                          badge.rest
                            ? 'bg-muted-foreground'
                            : badge.color
                              ? ''
                              : day.isToday
                                ? 'bg-primary-foreground'
                                : 'bg-primary-strong',
                        ]
                          .filter(Boolean)
                          .join(' ');
                        return (
                          <span
                            key={badge.key}
                            data-testid={badge.rest ? 'calendar-day-count-rest' : 'calendar-day-count'}
                            data-count={badge.count}
                            className={badgeClass}
                            style={badge.color && !badge.rest ? { backgroundColor: badge.color } : undefined}
                          >
                            <span className="sr-only">{badge.count}</span>
                          </span>
                        );
                      })}
                    </span>
                  )}
                </>
              );

              // Nur Tage MIT Terminen werden zu Tab-Stopps (D-01) — ein
              // Widget mit 42 zusaetzlichen Tab-Stopps waere eine
              // Verschlechterung. Wer nicht mit der Maus arbeitet, bekam
              // die Termin-Einblendung bislang gar nicht zu sehen; die
              // Schaltflaeche traegt deshalb zusaetzlich onFocus/onBlur mit
              // demselben Rumpf wie onMouseEnter/onMouseLeave.
              if (hasEvents) {
                const dayLabel = new Intl.DateTimeFormat('de-DE', {
                  weekday: 'short',
                  day: '2-digit',
                  month: '2-digit',
                }).format(day.date);
                const eventCount = day.events.length;
                const ariaLabel =
                  eventCount === 1
                    ? t('calendar.dayEventsOne', { date: dayLabel })
                    : t('calendar.dayEventsMany', { date: dayLabel, count: eventCount });

                return (
                  <button
                    key={day.key}
                    type="button"
                    data-testid="calendar-day"
                    data-date={day.key}
                    data-today={day.isToday || undefined}
                    data-outside={!day.inCurrentMonth || undefined}
                    className={cellClass}
                    aria-label={ariaLabel}
                    onMouseEnter={(e) =>
                      setHover({ key: day.key, rect: e.currentTarget.getBoundingClientRect() })
                    }
                    onMouseLeave={() => setHover(null)}
                    onFocus={(e) =>
                      setHover({ key: day.key, rect: e.currentTarget.getBoundingClientRect() })
                    }
                    onBlur={() => setHover(null)}
                  >
                    {cellContent}
                  </button>
                );
              }

              return (
                <div
                  key={day.key}
                  data-testid="calendar-day"
                  data-date={day.key}
                  data-today={day.isToday || undefined}
                  data-outside={!day.inCurrentMonth || undefined}
                  className={cellClass}
                >
                  {cellContent}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {maxEvents > 0 && (
        <section className="flex min-h-0 flex-1 flex-col gap-1">
          <h3 className="shrink-0 text-xs font-semibold text-muted-foreground">
            {t('calendar.upcomingTitle')}
          </h3>
          {upcoming.length === 0 ? (
            <p className="text-[clamp(9px,2.2cqw,12px)] text-muted-foreground">
              {t('calendar.emptyNoEvents')}
            </p>
          ) : (
            // Einzeilige Terminliste (Design „Mosaik“, Runde 3): Farbstrich,
            // Tag, Titel, Uhrzeit rechts — rund 26 px je Termin statt 40, so
            // passen auch in eine kleine Kachel mehrere Termine. „Heute“ und
            // „Morgen“ stehen in der Akzentfarbe.
            <ul data-testid="calendar-upcoming" className="min-h-0 flex-1 overflow-y-auto">
              {upcoming.map((event) => {
                const offset = eventDayOffset(event);
                const dayLabel =
                  offset === 0
                    ? t('calendar.today')
                    : offset === 1
                      ? t('calendar.tomorrow')
                      : formatEventDay(event);
                const soon = offset === 0 || offset === 1;
                return (
                  <li
                    key={event.id}
                    title={[formatEventDate(event), event.title, event.location].filter(Boolean).join(' · ')}
                    className="flex h-[26px] items-center gap-2 rounded-md px-1.5 hover:bg-muted"
                  >
                    <span
                      data-testid="event-color-dot"
                      className="h-3.5 w-[3px] shrink-0 rounded-full"
                      style={{ backgroundColor: event.color || 'var(--muted-foreground)' }}
                      aria-hidden="true"
                    />
                    <span
                      className={`w-[62px] shrink-0 truncate text-[11px] tabular-nums ${
                        soon ? 'font-semibold text-primary-strong' : 'text-muted-foreground'
                      }`}
                    >
                      {dayLabel}
                    </span>
                    <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">
                      {event.title}
                    </span>
                    <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
                      {event.allDay ? t('calendar.allDay') : formatEventTime(event.start)}
                    </span>
                  </li>
                );
              })}
            </ul>
          )}
        </section>
      )}

      {hover !== null &&
        typeof document !== 'undefined' &&
        createPortal(
          <div
            data-testid="calendar-day-tooltip"
            role="tooltip"
            className="pointer-events-none fixed z-50 rounded bg-card dark:border dark:border-border p-2 text-xs text-foreground shadow-lg"
            style={{
              width: TOOLTIP_WIDTH_PX,
              top: hover.rect.bottom + TOOLTIP_EDGE_PX,
              left: Math.max(
                TOOLTIP_EDGE_PX,
                Math.min(hover.rect.left, window.innerWidth - TOOLTIP_WIDTH_PX - TOOLTIP_EDGE_PX),
              ),
            }}
          >
            {hoverEvents.slice(0, 5).map((event) => (
              <div key={event.id} className="flex gap-2">
                <span
                  data-testid="tooltip-color-dot"
                  className="mt-1 h-2 w-2 shrink-0 rounded-full"
                  style={{ backgroundColor: event.color || 'var(--muted-foreground)' }}
                  aria-hidden="true"
                />
                <span className="shrink-0 tabular-nums text-muted-foreground">
                  {event.allDay ? t('calendar.allDay') : formatEventTime(event.start)}
                </span>
                <span className="min-w-0 break-words">{event.title}</span>
              </div>
            ))}
            {hoverEvents.length > 5 && (
              <div className="mt-1 text-muted-foreground">{t('calendar.tooltipMore')}</div>
            )}
          </div>,
          document.body,
        )}
    </div>
  );
}