'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,
  computeFetchWindow,
  formatEventDate,
  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, Tooltip beim Ueberfahren), 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);

  const { showMonth, maxEvents, lookaheadDays } = useMemo(
    () => resolveCalendarConfig(config),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [config.showMonth, config.maxEvents, config.lookaheadDays],
  );

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

    async function loadData() {
      try {
        // Check if user has any sources configured
        const sources = await fetchSources();
        if (cancelled) return;

        if (sources.length === 0) {
          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 eventData = await fetchEvents(from.toISOString(), to.toISOString());
        if (cancelled) return;
        setEvents(eventData);
      } catch {
        // Silent fail — show empty state
        if (!cancelled) {
          setEvents([]);
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false);
        }
      }
    }

    loadData();

    // Refresh every 5 minutes (300000ms) to match backend cache TTL
    intervalRef.current = setInterval(() => {
      loadData();
    }, 300_000);

    return () => {
      cancelled = true;
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [monthDate.getTime(), 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);
    const now = new Date();
    setMonthDate(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-1 overflow-hidden p-1.5">
      {showMonth && (
        <div data-testid="calendar-month" className="flex shrink-0 flex-col gap-1">
          {/* Nav-Zeile */}
          <div className="grid grid-cols-[1fr_1.4fr_1fr] gap-1">
            <button
              type="button"
              className="widgetNoDrag rounded border border-border bg-muted/50 px-1 py-[clamp(2px,0.8cqh,6px)] text-[clamp(10px,2.6cqw,13px)] leading-none text-foreground hover:bg-muted"
              onClick={showPrev}
            >
              {t('calendar.monthPrev')}
            </button>
            <button
              type="button"
              className="widgetNoDrag truncate rounded border border-border bg-muted/50 px-1 py-[clamp(2px,0.8cqh,6px)] text-[clamp(10px,2.6cqw,13px)] font-semibold leading-none text-foreground hover:bg-muted"
              title={t('calendar.monthToday')}
              onClick={showToday}
            >
              {formatMonthLabel(monthDate)}
            </button>
            <button
              type="button"
              className="widgetNoDrag rounded border border-border bg-muted/50 px-1 py-[clamp(2px,0.8cqh,6px)] text-[clamp(10px,2.6cqw,13px)] leading-none text-foreground hover:bg-muted"
              onClick={showNext}
            >
              {t('calendar.monthNext')}
            </button>
          </div>

          {/* Wochentagskopf */}
          <div className="grid grid-cols-7 gap-px text-center text-[clamp(9px,2.2cqw,12px)] font-medium text-muted-foreground">
            {WEEKDAY_LABELS.map((label) => (
              <div key={label}>{label}</div>
            ))}
          </div>

          {/* Raster */}
          <div className="grid grid-cols-7 gap-px">
            {days.map((day) => {
              const hasEvents = day.events.length > 0;
              const cellClass = [
                'widgetNoDrag relative flex min-h-[clamp(16px,5.5cqh,40px)] items-start rounded bg-muted/50 px-1 py-0.5 text-[clamp(9px,2.4cqw,13px)] leading-none',
                day.inCurrentMonth ? 'text-foreground' : 'text-muted-foreground/60',
                day.isToday ? 'ring-1 ring-primary font-semibold text-primary' : '',
                hasEvents ? 'cursor-default hover:bg-muted' : '',
              ]
                .filter(Boolean)
                .join(' ');

              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}
                  onMouseEnter={(e) =>
                    hasEvents &&
                    setHover({ key: day.key, rect: e.currentTarget.getBoundingClientRect() })
                  }
                  onMouseLeave={() => setHover(null)}
                >
                  <span>{day.date.getDate()}</span>
                  {hasEvents && (
                    <span
                      data-testid="calendar-day-count"
                      className="absolute bottom-px right-px flex h-[clamp(10px,3cqw,16px)] min-w-[clamp(10px,3cqw,16px)] items-center justify-center rounded-full bg-primary px-0.5 text-[clamp(7px,1.8cqw,10px)] font-semibold leading-none text-primary-foreground"
                    >
                      {day.events.length}
                    </span>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {maxEvents > 0 && (
        <section className="flex min-h-0 flex-1 flex-col gap-1">
          <h3 className="shrink-0 text-[clamp(10px,2.6cqw,13px)] font-semibold text-foreground">
            {t('calendar.upcomingTitle')}
          </h3>
          {upcoming.length === 0 ? (
            <p className="text-[clamp(9px,2.2cqw,12px)] text-muted-foreground">
              {t('calendar.emptyNoEvents')}
            </p>
          ) : (
            <ul data-testid="calendar-upcoming" className="min-h-0 flex-1 space-y-1 overflow-y-auto">
              {upcoming.map((event) => (
                <li key={event.id} className="flex items-start gap-2 rounded bg-muted/50 px-2 py-1">
                  <span
                    data-testid="event-color-dot"
                    className="mt-1 h-2 w-2 shrink-0 rounded-full"
                    style={{ backgroundColor: event.color || 'var(--muted-foreground)' }}
                    aria-hidden="true"
                  />
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-[clamp(9px,2.2cqw,12px)] text-muted-foreground">
                      {formatEventDate(event)}
                    </p>
                    <p className="truncate text-[clamp(10px,2.5cqw,14px)] font-semibold text-foreground">
                      {event.title}
                    </p>
                    {event.location && (
                      <p className="truncate text-[clamp(9px,2.1cqw,12px)] text-muted-foreground">
                        {event.location}
                      </p>
                    )}
                  </div>
                </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 border border-border bg-card 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 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>
  );
}