"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
import deLocale from "@fullcalendar/core/locales/de";
import { useSession } from "next-auth/react";
import { CircleMarker, MapContainer, Popup, TileLayer, useMap } from "react-leaflet";
import EventForm from "./EventForm";

type EventItem = {
  id: string;
  title: string;
  description?: string | null;
  location?: string | null;
  locationPlaceId?: string | null;
  locationLat?: number | null;
  locationLng?: number | null;
  startAt: string;
  endAt?: string | null;
  status: string;
  category?: { id: string; name: string } | null;
};

type ViewItem = {
  id: string;
  token: string;
  items: { eventId: string }[];
  categories: { categoryId: string; category?: { name: string } }[];
  exclusions: { eventId: string }[];
};

type DateBucket = "past" | "today" | "tomorrow" | "future";

const MAP_FILTER_STORAGE_KEY = "mapFilters";

export default function CalendarBoard() {
  const { data } = useSession();
  const [events, setEvents] = useState<EventItem[]>([]);
  const [view, setView] = useState<ViewItem | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [query, setQuery] = useState("");
  const [categoryFilter, setCategoryFilter] = useState("ALL");
  const [sortKey, setSortKey] = useState("startAt");
  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
  const [detailsEvent, setDetailsEvent] = useState<EventItem | null>(null);
  const [placesKey, setPlacesKey] = useState("");
  const [placesProvider, setPlacesProvider] = useState<"google" | "osm">("osm");
  const [categories, setCategories] = useState<{ id: string; name: string }[]>(
    []
  );
  const [editEvent, setEditEvent] = useState<EventItem | null>(null);
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [editStatus, setEditStatus] = useState<string | null>(null);
  const [editError, setEditError] = useState<string | null>(null);
  const [bulkSelection, setBulkSelection] = useState<Set<string>>(new Set());
  const [mapFullscreen, setMapFullscreen] = useState(false);
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const [mapDateFilter, setMapDateFilter] = useState<Set<DateBucket>>(
    new Set(["past", "today", "tomorrow", "future"])
  );
  const [mapCategoryFilter, setMapCategoryFilter] = useState<Set<string>>(
    new Set()
  );
  const [formOpen, setFormOpen] = useState(false);
  const [prefillStartAt, setPrefillStartAt] = useState<string | null>(null);
  const [viewOrder, setViewOrder] = useState<
    Array<"calendar" | "list" | "map">
  >(["calendar", "map", "list"]);
  const [collapsed, setCollapsed] = useState<{
    calendar: boolean;
    list: boolean;
    map: boolean;
  }>({
    calendar: false,
    list: false,
    map: false
  });
  const [activeRange, setActiveRange] = useState<{
    start: Date;
    end: Date;
    viewType: string;
  } | null>(null);
  const [initialView, setInitialView] = useState("dayGridMonth");
  const [dragSource, setDragSource] = useState<
    "calendar" | "list" | "map" | null
  >(null);
  const [dragOver, setDragOver] = useState<
    "calendar" | "list" | "map" | null
  >(null);
  const calendarRef = useRef<HTMLDivElement | null>(null);
  const listRef = useRef<HTMLDivElement | null>(null);
  const mapRef = useRef<HTMLDivElement | null>(null);
  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
  const detailsModalRef = useRef<HTMLDivElement | null>(null);
  const lastActiveElementRef = useRef<HTMLElement | null>(null);
  const isAdmin =
    data?.user?.role === "ADMIN" || data?.user?.role === "SUPERADMIN";

  const fetchEvents = async () => {
    setLoading(true);
    setError(null);
    try {
      const [eventsResponse, viewResponse] = await Promise.all([
        fetch("/api/events"),
        fetch("/api/views/default")
      ]);
      if (!eventsResponse.ok) {
        throw new Error("Events konnten nicht geladen werden.");
      }
      const payload = await eventsResponse.json();
      setEvents(payload);
      if (viewResponse.ok) {
        setView(await viewResponse.json());
      }
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (data?.user) {
      fetchEvents();
    }
  }, [data?.user]);

  useEffect(() => {
    const loadKey = async () => {
      try {
      const response = await fetch("/api/settings/system");
        if (!response.ok) return;
        const payload = await response.json();
        setPlacesKey(payload.apiKey || "");
        setPlacesProvider(payload.provider === "google" ? "google" : "osm");
      } catch {
        // ignore
      }
    };

    if (data?.user) {
      loadKey();
    }
  }, [data?.user]);

  useEffect(() => {
    if (!data?.user || !isAdmin) return;
    const loadCategories = async () => {
      try {
        const response = await fetch("/api/categories");
        if (!response.ok) return;
        const payload = await response.json();
        setCategories(payload);
      } catch {
        // ignore
      }
    };
    loadCategories();
  }, [data?.user, isAdmin]);

  useEffect(() => {
    const handler = () => {
      fetchEvents();
    };
    window.addEventListener("views-updated", handler);
    return () => window.removeEventListener("views-updated", handler);
  }, []);

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem("calendarLastView");
      if (stored) {
        setInitialView(stored);
      }
    } catch {
      // ignore
    }
  }, []);

  useEffect(() => {
    if (typeof document === "undefined") return;
    setPortalRoot(document.body);
  }, []);

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem(MAP_FILTER_STORAGE_KEY);
      if (!stored) return;
      const parsed = JSON.parse(stored);
      const allowed: DateBucket[] = ["past", "today", "tomorrow", "future"];
      if (parsed?.dates && Array.isArray(parsed.dates)) {
        const nextDates = parsed.dates.filter((value: string) =>
          allowed.includes(value as DateBucket)
        );
        if (nextDates.length > 0) {
          setMapDateFilter(new Set(nextDates as DateBucket[]));
        }
      }
      if (parsed?.categories && Array.isArray(parsed.categories)) {
        setMapCategoryFilter(new Set(parsed.categories.filter(Boolean)));
      }
    } catch {
      // ignore
    }
  }, []);

  useEffect(() => {
    try {
      const payload = {
        dates: Array.from(mapDateFilter),
        categories: Array.from(mapCategoryFilter)
      };
      window.localStorage.setItem(MAP_FILTER_STORAGE_KEY, JSON.stringify(payload));
    } catch {
      // ignore
    }
  }, [mapDateFilter, mapCategoryFilter]);

  useEffect(() => {
    if (typeof document === "undefined") return;
    const root = document.documentElement;
    const updateTheme = () => {
      setIsDarkTheme(root.dataset.theme === "dark");
    };
    updateTheme();
    const observer = new MutationObserver(updateTheme);
    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!detailsEvent) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setDetailsEvent(null);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [detailsEvent]);

  useEffect(() => {
    if (!isEditOpen) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setIsEditOpen(false);
        setEditEvent(null);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [isEditOpen]);

  useEffect(() => {
    if (!mapFullscreen) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setMapFullscreen(false);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [mapFullscreen]);

  useEffect(() => {
    if (!detailsEvent) return;
    lastActiveElementRef.current = document.activeElement as HTMLElement | null;
    const node = detailsModalRef.current;
    if (!node) return;
    const focusable = node.querySelectorAll<HTMLElement>(
      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
    );
    const target = focusable[0] || node;
    target.focus();
  }, [detailsEvent]);

  useEffect(() => {
    if (detailsEvent) return;
    const previous = lastActiveElementRef.current;
    if (previous) {
      previous.focus();
      lastActiveElementRef.current = null;
    }
  }, [detailsEvent]);

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem("listSort");
      if (!stored) return;
      const parsed = JSON.parse(stored);
      if (
        parsed &&
        typeof parsed === "object" &&
        typeof parsed.key === "string" &&
        (parsed.dir === "asc" || parsed.dir === "desc")
      ) {
        setSortKey(parsed.key);
        setSortDir(parsed.dir);
      }
    } catch {
      // ignore
    }
  }, []);

  useEffect(() => {
    try {
      window.localStorage.setItem(
        "listSort",
        JSON.stringify({ key: sortKey, dir: sortDir })
      );
    } catch {
      // ignore
    }
  }, [sortKey, sortDir]);

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem("calendarViewOrder");
      if (!stored) return;
      const parsed = JSON.parse(stored);
      if (Array.isArray(parsed)) {
        const normalized = [
          ...new Set(
            parsed.filter((item) =>
              ["calendar", "list", "map"].includes(String(item))
            )
          )
        ] as Array<"calendar" | "list" | "map">;
        if (normalized.includes("calendar") && normalized.includes("list")) {
          if (!normalized.includes("map")) {
            normalized.splice(1, 0, "map");
          }
          setViewOrder(normalized);
        }
      }
    } catch {
      // ignore
    }
  }, []);

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem("calendarViewCollapsed");
      if (!stored) return;
      const parsed = JSON.parse(stored);
      if (
        parsed &&
        typeof parsed === "object" &&
        typeof parsed.calendar === "boolean" &&
        typeof parsed.list === "boolean"
      ) {
        setCollapsed({
          calendar: parsed.calendar,
          list: parsed.list,
          map: typeof parsed.map === "boolean" ? parsed.map : false
        });
      }
    } catch {
      // ignore
    }
  }, []);

  const persistOrder = (nextOrder: Array<"calendar" | "list" | "map">) => {
    setViewOrder(nextOrder);
    try {
      window.localStorage.setItem("calendarViewOrder", JSON.stringify(nextOrder));
    } catch {
      // ignore
    }
  };

  const toggleCollapse = (section: "calendar" | "list" | "map") => {
    const next = { ...collapsed, [section]: !collapsed[section] };
    setCollapsed(next);
    try {
      window.localStorage.setItem("calendarViewCollapsed", JSON.stringify(next));
    } catch {
      // ignore
    }
  };

  const swapOrder = (
    source: "calendar" | "list" | "map",
    target: "calendar" | "list" | "map"
  ) => {
    if (source === target) return;
    const next = [...viewOrder];
    const sourceIndex = next.indexOf(source);
    const targetIndex = next.indexOf(target);
    if (sourceIndex === -1 || targetIndex === -1) return;
    next[sourceIndex] = target;
    next[targetIndex] = source;
    persistOrder(next);
  };

  const onDragStart = (
    event: React.DragEvent<HTMLDivElement>,
    section: "calendar" | "list" | "map"
  ) => {
    event.dataTransfer.setData("text/plain", section);
    event.dataTransfer.effectAllowed = "move";
    setDragSource(section);
    setDragOver(section);
    const node =
      section === "calendar"
        ? calendarRef.current
        : section === "list"
        ? listRef.current
        : mapRef.current;
    if (node) {
      event.dataTransfer.setDragImage(node, 20, 20);
    }
  };

  const onDragEnter = (target: "calendar" | "list" | "map") => {
    setDragOver(target);
  };

  const onDragEnd = () => {
    setDragSource(null);
    setDragOver(null);
  };

  const onDrop = (
    event: React.DragEvent<HTMLDivElement>,
    target: "calendar" | "list" | "map"
  ) => {
    event.preventDefault();
    const source = event.dataTransfer.getData("text/plain") as
      | "calendar"
      | "list"
      | "map";
    if (source) {
      swapOrder(source, target);
    }
    setDragSource(null);
    setDragOver(null);
  };

  const openFormForDate = (date: Date | null) => {
    if (date) {
      const prefill = new Date(date);
      prefill.setHours(12, 0, 0, 0);
      setPrefillStartAt(prefill.toISOString());
    } else {
      setPrefillStartAt(null);
    }
    setFormOpen(true);
  };

  const calendarEvents = useMemo(
    () =>
      events.map((event) => ({
        id: event.id,
        title: event.title,
        start: event.startAt,
        end: event.endAt || undefined,
        extendedProps: {
          status: event.status,
          location: event.location,
          description: event.description,
          category: event.category?.name
        }
      })),
    [events]
  );

  const selectedEventIds = useMemo(() => {
    if (!view) return new Set<string>();
    const ids = new Set(view.items.map((item) => item.eventId));
    const excluded = new Set(view.exclusions.map((item) => item.eventId));
    const subscribedCategoryIds = new Set(
      view.categories.map((item) => item.categoryId)
    );
    events.forEach((event) => {
      if (event.category?.id && subscribedCategoryIds.has(event.category.id)) {
        ids.add(event.id);
      }
    });
    excluded.forEach((eventId) => ids.delete(eventId));
    return ids;
  }, [view, events]);

  const subscribedCategoryIds = useMemo(() => {
    return new Set(view?.categories.map((item) => item.categoryId) || []);
  }, [view]);

  const toggleEvent = async (eventId: string) => {
    if (!view) return;
    const isSelected = selectedEventIds.has(eventId);
    await fetch(`/api/views/${view.id}/items`, {
      method: isSelected ? "DELETE" : "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ eventId })
    });
    await fetchEvents();
    window.dispatchEvent(new Event("views-updated"));
  };

  const formatLocalDateTime = (value?: string | null) => {
    if (!value) return "";
    const date = new Date(value);
    const offset = date.getTimezoneOffset() * 60000;
    return new Date(date.getTime() - offset).toISOString().slice(0, 16);
  };

  const toIsoString = (value: FormDataEntryValue | null) => {
    if (!value) return null;
    const raw = String(value);
    if (!raw) return null;
    const date = new Date(raw);
    if (Number.isNaN(date.getTime())) return null;
    return date.toISOString();
  };

  const updateEvent = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setEditStatus(null);
    setEditError(null);
    if (!editEvent) return;

    const formData = new FormData(event.currentTarget);
    const payload = {
      title: formData.get("title"),
      description: formData.get("description"),
      location: formData.get("location"),
      locationPlaceId: formData.get("locationPlaceId"),
      locationLat: formData.get("locationLat"),
      locationLng: formData.get("locationLng"),
      startAt: toIsoString(formData.get("startAt")),
      endAt: toIsoString(formData.get("endAt")),
      categoryId: formData.get("categoryId")
    };

    const response = await fetch(`/api/events/${editEvent.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      const data = await response.json();
      setEditError(data.error || "Termin konnte nicht aktualisiert werden.");
      return;
    }

    setEditStatus("Termin aktualisiert.");
    setIsEditOpen(false);
    setEditEvent(null);
    await fetchEvents();
  };

  const deleteEvent = async (eventId: string) => {
    const ok = window.confirm("Termin wirklich löschen?");
    if (!ok) return;
    const response = await fetch(`/api/events/${eventId}`, { method: "DELETE" });
    if (!response.ok) {
      setEditError("Termin konnte nicht gelöscht werden.");
      return;
    }
    setEditStatus(null);
    setEditError(null);
    setIsEditOpen(false);
    setEditEvent(null);
    await fetchEvents();
  };

  const toggleBulkSelection = (eventId: string) => {
    setBulkSelection((prev) => {
      const next = new Set(prev);
      if (next.has(eventId)) {
        next.delete(eventId);
      } else {
        next.add(eventId);
      }
      return next;
    });
  };

  const toggleSelectAllVisible = (checked: boolean) => {
    if (!checked) {
      setBulkSelection(new Set());
      return;
    }
    setBulkSelection(new Set(displayedEvents.map((event) => event.id)));
  };

  const deleteSelectedEvents = async () => {
    if (bulkSelection.size === 0) return;
    const ok = window.confirm(
      `Wirklich ${bulkSelection.size} Termin(e) löschen?`
    );
    if (!ok) return;
    await Promise.all(
      Array.from(bulkSelection).map((eventId) =>
        fetch(`/api/events/${eventId}`, { method: "DELETE" })
      )
    );
    setBulkSelection(new Set());
    await fetchEvents();
  };


  const filteredEvents = useMemo(() => {
    const normalizedQuery = query.trim().toLowerCase();
    const filtered = events.filter((event) => {
      const categoryName = event.category?.name || "Ohne Kategorie";
      if (categoryFilter !== "ALL" && categoryName !== categoryFilter) {
        return false;
      }
      if (!normalizedQuery) return true;
      return (
        event.title.toLowerCase().includes(normalizedQuery) ||
        (event.description || "").toLowerCase().includes(normalizedQuery) ||
        (event.location || "").toLowerCase().includes(normalizedQuery) ||
        categoryName.toLowerCase().includes(normalizedQuery)
      );
    });

    const sorted = [...filtered].sort((a, b) => {
      const dir = sortDir === "asc" ? 1 : -1;
      if (sortKey === "title") {
        return a.title.localeCompare(b.title) * dir;
      }
      if (sortKey === "category") {
        const aCat = a.category?.name || "Ohne Kategorie";
        const bCat = b.category?.name || "Ohne Kategorie";
        return aCat.localeCompare(bCat) * dir;
      }
      if (sortKey === "location") {
        const aLoc = a.location || "";
        const bLoc = b.location || "";
        return aLoc.localeCompare(bLoc) * dir;
      }
      if (sortKey === "status") {
        return a.status.localeCompare(b.status) * dir;
      }
      const aDate = new Date(a.startAt).getTime();
      const bDate = new Date(b.startAt).getTime();
      return (aDate - bDate) * dir;
    });

    return sorted;
  }, [events, query, categoryFilter, sortKey, sortDir]);

  const categoryOptions = useMemo(() => {
    const list = events
      .map((event) => event.category?.name || "Ohne Kategorie")
      .filter(Boolean);
    return Array.from(new Set(list)).sort();
  }, [events]);

  const getDateBucket = (value: string): DateBucket => {
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return "future";
    const now = new Date();
    const startToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const startTomorrow = new Date(startToday);
    startTomorrow.setDate(startTomorrow.getDate() + 1);
    const startAfterTomorrow = new Date(startTomorrow);
    startAfterTomorrow.setDate(startAfterTomorrow.getDate() + 1);

    if (date < startToday) return "past";
    if (date >= startToday && date < startTomorrow) return "today";
    if (date >= startTomorrow && date < startAfterTomorrow) return "tomorrow";
    return "future";
  };

  const getCategoryColor = (value?: string | null) => {
    const palette = [
      "#2563eb",
      "#7c3aed",
      "#db2777",
      "#ea580c",
      "#16a34a",
      "#0f766e",
      "#0ea5e9",
      "#65a30d"
    ];
    const name = (value || "Ohne Kategorie").toLowerCase();
    let hash = 0;
    for (let i = 0; i < name.length; i += 1) {
      hash = (hash * 31 + name.charCodeAt(i)) % 997;
    }
    return palette[hash % palette.length];
  };

  const mapEvents = useMemo(() => {
    const currentYear = new Date().getFullYear();
    return events
      .filter((event) => {
        if (!event.locationLat || !event.locationLng) return false;
        const start = new Date(event.startAt);
        return start.getFullYear() === currentYear;
      })
      .map((event) => ({
        ...event,
        bucket: getDateBucket(event.startAt),
        categoryName: event.category?.name || "Ohne Kategorie"
      }));
  }, [events]);

  const filteredMapEvents = useMemo(() => {
    return mapEvents.filter((event) => {
      if (!mapDateFilter.has(event.bucket)) return false;
      if (mapCategoryFilter.size === 0) return true;
      return mapCategoryFilter.has(event.categoryName);
    });
  }, [mapEvents, mapDateFilter, mapCategoryFilter]);

  const mapPoints = useMemo(
    () =>
      filteredMapEvents.map((event) => ({
        lat: event.locationLat as number,
        lng: event.locationLng as number
      })),
    [filteredMapEvents]
  );

  const mapCategoryOptions = useMemo(() => {
    return Array.from(
      new Set(mapEvents.map((event) => event.categoryName))
    ).sort((a, b) => a.localeCompare(b));
  }, [mapEvents]);

  const toggleMapDateFilter = (key: DateBucket) => {
    setMapDateFilter((prev) => {
      const next = new Set(prev);
      if (next.has(key)) {
        next.delete(key);
      } else {
        next.add(key);
      }
      return next;
    });
  };

  const toggleMapCategoryFilter = (category: string) => {
    setMapCategoryFilter((prev) => {
      const next = new Set(prev);
      if (next.has(category)) {
        next.delete(category);
      } else {
        next.add(category);
      }
      return next;
    });
  };

  const displayedEvents = useMemo(() => {
    if (!activeRange) {
      return filteredEvents;
    }
    return filteredEvents.filter((event) => {
      const start = new Date(event.startAt);
      return start >= activeRange.start && start < activeRange.end;
    });
  }, [filteredEvents, activeRange]);

  useEffect(() => {
    setBulkSelection((prev) => (prev.size > 0 ? new Set() : prev));
  }, [query, categoryFilter, activeRange]);

  const toggleSort = (nextKey: string) => {
    let nextDir: "asc" | "desc" = "asc";
    if (sortKey === nextKey) {
      nextDir = sortDir === "asc" ? "desc" : "asc";
      setSortDir(nextDir);
    } else {
      setSortKey(nextKey);
      setSortDir("asc");
    }
    try {
      const key = sortKey === nextKey ? sortKey : nextKey;
      window.localStorage.setItem(
        "listSort",
        JSON.stringify({ key, dir: nextDir })
      );
    } catch {
      // ignore
    }
  };

  if (!data?.user) {
    return (
      <div className="card-muted text-center">
        <p className="text-slate-700">
          Bitte anmelden, um die Vereinskalender zu sehen.
        </p>
      </div>
    );
  }

  return (
    <section className="space-y-4 fade-up">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-xs uppercase tracking-[0.2em] text-slate-500">Kalender</p>
          <h2 className="text-2xl font-semibold">Termine im Blick</h2>
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            className="btn-accent"
            onClick={() => openFormForDate(null)}
          >
            Neuer Termin
          </button>
          <button
            type="button"
            onClick={fetchEvents}
            className="btn-ghost"
          >
            Aktualisieren
          </button>
        </div>
      </div>
      <EventForm
        variant="inline"
        showTrigger={false}
        open={formOpen}
        onOpenChange={(open) => {
          setFormOpen(open);
          if (!open) {
            setPrefillStartAt(null);
          }
        }}
        prefillStartAt={prefillStartAt}
      />
      {error && <p className="text-sm text-red-600">{error}</p>}
      {loading && <p className="text-sm text-slate-500">Lade Termine...</p>}
      {viewOrder.map((section) => {
        if (section === "calendar") {
          return (
            <div
              key="calendar"
              ref={calendarRef}
              className={`card drag-card ${
                dragSource === "calendar" ? "dragging" : ""
              } ${
                dragOver === "calendar" && dragSource && dragSource !== "calendar"
                  ? "drag-target"
                  : ""
              } ${
                dragSource === "list" && dragOver === "calendar" ? "shift-down" : ""
              }`}
              onDragOver={(event) => event.preventDefault()}
              onDragEnter={() => onDragEnter("calendar")}
              onDrop={(event) => onDrop(event, "calendar")}
            >
              <div className="mb-3 flex items-center justify-between">
                <h3 className="text-sm font-semibold text-slate-700">Kalender</h3>
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
                    onClick={() => toggleCollapse("calendar")}
                    aria-label={collapsed.calendar ? "Kalender aufklappen" : "Kalender zuklappen"}
                    title={collapsed.calendar ? "Aufklappen" : "Zuklappen"}
                  >
                    {collapsed.calendar ? <IconChevronDown /> : <IconChevronUp />}
                  </button>
                  <div
                    className="drag-handle"
                    draggable
                    onDragStart={(event) => onDragStart(event, "calendar")}
                    onDragEnd={onDragEnd}
                    title="Zum Tauschen ziehen"
                    aria-label="Kalender verschieben"
                  >
                    <IconGrip />
                  </div>
                </div>
              </div>
              {!collapsed.calendar && (
                <FullCalendar
                  plugins={[dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]}
                locale={deLocale}
                initialView={initialView}
                firstDay={1}
                headerToolbar={{
                  left: "prev,next today",
                  center: "title",
                  right: "dayGridMonth,timeGridWeek,dayGridYear,listWeek"
                  }}
                  views={{
                    dayGridMonth: { buttonText: "Monat" },
                    timeGridWeek: {
                      buttonText: "Woche",
                      slotDuration: "02:00:00",
                      slotLabelInterval: "02:00:00",
                      slotLabelFormat: { hour: "2-digit", minute: "2-digit", hour12: false }
                    },
                    dayGridYear: { buttonText: "Jahr" },
                    listWeek: { buttonText: "Übersicht" }
                  }}
                  buttonText={{ today: "Heute" }}
                  events={calendarEvents}
                  dayCellContent={(arg) => {
                    if (arg.view.type !== "dayGridMonth") {
                      return arg.dayNumberText;
                    }
                    return (
                      <div className="flex items-center justify-between">
                        <span>{arg.dayNumberText}</span>
                        <button
                          type="button"
                          className="rounded-full border border-slate-200 bg-white/80 px-2 py-0.5 text-xs text-slate-600 hover:bg-slate-100"
                          aria-label={`Termin am ${arg.date.toLocaleDateString("de-DE")} anlegen`}
                          onClick={(event) => {
                            event.preventDefault();
                            event.stopPropagation();
                            openFormForDate(arg.date);
                          }}
                        >
                          +
                        </button>
                      </div>
                    );
                  }}
                  eventClick={(info) => {
                    const match = events.find((event) => event.id === info.event.id);
                    if (match) {
                      setDetailsEvent(match);
                    }
                  }}
                eventContent={(arg) => {
                  const status = arg.event.extendedProps.status as string;
                  const isSelected = selectedEventIds.has(arg.event.id);
                  return (
                      <div className="event-shell">
                        <div className="min-w-0">
                          <div className="text-sm font-medium truncate">{arg.event.title}</div>
                          <div className="text-xs text-slate-600 truncate">
                            {arg.event.extendedProps.category || "Ohne Kategorie"}
                          </div>
                        </div>
                        <ViewToggleButton
                          isSelected={isSelected}
                          onClick={(event) => {
                            event.preventDefault();
                            event.stopPropagation();
                            toggleEvent(arg.event.id);
                          }}
                          size="sm"
                        />
                      </div>
                    );
                  }}
                  height="auto"
                  datesSet={(arg) => {
                    setActiveRange({
                      start: arg.start,
                      end: arg.end,
                      viewType: arg.view.type
                    });
                    try {
                      window.localStorage.setItem("calendarLastView", arg.view.type);
                    } catch {
                      // ignore
                    }
                  }}
                />
              )}
            </div>
          );
        }

        if (section === "map") {
          return (
            <div
              key="map"
              ref={mapRef}
              className={`card drag-card ${
                dragSource === "map" ? "dragging" : ""
              } ${
                dragOver === "map" && dragSource && dragSource !== "map"
                  ? "drag-target"
                  : ""
              } ${dragSource === "calendar" && dragOver === "map" ? "shift-down" : ""} ${
                dragSource === "list" && dragOver === "map" ? "shift-up" : ""
              }`}
              onDragOver={(event) => event.preventDefault()}
              onDragEnter={() => onDragEnter("map")}
              onDrop={(event) => onDrop(event, "map")}
            >
              <div className="mb-3 flex items-center justify-between">
                <h3 className="text-sm font-semibold text-slate-700">Karte</h3>
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
                    onClick={() => toggleCollapse("map")}
                    aria-label={collapsed.map ? "Karte aufklappen" : "Karte zuklappen"}
                    title={collapsed.map ? "Aufklappen" : "Zuklappen"}
                  >
                    {collapsed.map ? <IconChevronDown /> : <IconChevronUp />}
                  </button>
                  <button
                    type="button"
                    className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
                    onClick={() => setMapFullscreen(true)}
                  >
                    Vollbild
                  </button>
                  <div
                    className="drag-handle"
                    draggable
                    onDragStart={(event) => onDragStart(event, "map")}
                    onDragEnd={onDragEnd}
                    title="Zum Tauschen ziehen"
                    aria-label="Karte verschieben"
                  >
                    <IconGrip />
                  </div>
                </div>
              </div>
              {!collapsed.map && (
                <div className="space-y-3">
                  <div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
                    <button
                      type="button"
                      onClick={() => {
                        setMapDateFilter(new Set(["past", "today", "tomorrow", "future"]));
                        setMapCategoryFilter(new Set());
                      }}
                      className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
                    >
                      Alles
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        setMapDateFilter(new Set());
                        setMapCategoryFilter(new Set(mapCategoryOptions));
                      }}
                      className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
                    >
                      Nichts
                    </button>
                    <button
                      type="button"
                      onClick={() => toggleMapDateFilter("today")}
                      className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                        mapDateFilter.has("today")
                          ? "border-amber-300 bg-amber-50 text-amber-900"
                          : "border-slate-200 bg-white"
                      }`}
                    >
                      <span className="h-2.5 w-2.5 rounded-full border border-amber-500 bg-amber-200"></span>
                      Heute
                    </button>
                    <button
                      type="button"
                      onClick={() => toggleMapDateFilter("tomorrow")}
                      className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                        mapDateFilter.has("tomorrow")
                          ? "border-emerald-300 bg-emerald-50 text-emerald-900"
                          : "border-slate-200 bg-white"
                      }`}
                    >
                      <span className="h-2.5 w-2.5 rounded-full border border-emerald-500 bg-emerald-200"></span>
                      Morgen
                    </button>
                    <button
                      type="button"
                      onClick={() => toggleMapDateFilter("past")}
                      className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                        mapDateFilter.has("past")
                          ? "border-slate-300 bg-slate-100 text-slate-700"
                          : "border-slate-200 bg-white"
                      }`}
                    >
                      <span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-200"></span>
                      Vergangenheit
                    </button>
                    <button
                      type="button"
                      onClick={() => toggleMapDateFilter("future")}
                      className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                        mapDateFilter.has("future")
                          ? "border-sky-200 bg-sky-50 text-sky-900"
                          : "border-slate-200 bg-white"
                      }`}
                    >
                      <span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-100"></span>
                      Zukunft
                    </button>
                    {mapCategoryOptions.map((category) => {
                      const active = mapCategoryFilter.has(category);
                      return (
                        <button
                          key={category}
                          type="button"
                          onClick={() => toggleMapCategoryFilter(category)}
                          className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                            active
                              ? "border-slate-300 bg-slate-100 text-slate-900"
                              : "border-slate-200 bg-white"
                          }`}
                        >
                          <span
                            className="h-2.5 w-2.5 rounded-full"
                            style={{ backgroundColor: getCategoryColor(category) }}
                          ></span>
                          {category}
                        </button>
                      );
                    })}
                  </div>
                  <div
                    className="h-80 overflow-hidden rounded-xl overscroll-contain"
                    onWheel={(event) => event.stopPropagation()}
                  >
                  <MapContainer
                    center={[52.52, 13.405]}
                    zoom={5}
                    scrollWheelZoom
                    className="h-full w-full"
                  >
                    <TileLayer
                      attribution={
                        isDarkTheme
                          ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
                          : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                      }
                      url={
                        isDarkTheme
                          ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
                          : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                      }
                    />
                    <MapAutoBounds points={mapPoints} />
                    {filteredMapEvents.map((event) => {
                      const fillColor = getCategoryColor(event.categoryName);
                      const isPast = event.bucket === "past";
                      const isToday = event.bucket === "today";
                      const isTomorrow = event.bucket === "tomorrow";
                      const strokeColor = isPast
                        ? "#94a3b8"
                        : isToday
                        ? "#f59e0b"
                        : isTomorrow
                        ? "#10b981"
                        : fillColor;
                      return (
                        <CircleMarker
                          key={event.id}
                          center={[event.locationLat as number, event.locationLng as number]}
                          radius={isToday || isTomorrow ? 8 : 6}
                          color={strokeColor}
                          fillColor={fillColor}
                          fillOpacity={isPast ? 0.35 : 0.75}
                          weight={isToday || isTomorrow ? 2 : 1}
                        >
                          <Popup>
                            <div className="space-y-1">
                              <p className="text-sm font-semibold">{event.title}</p>
                              <p className="text-xs text-slate-600">
                                {new Date(event.startAt).toLocaleString("de-DE", {
                                  dateStyle: "medium",
                                  timeStyle: "short"
                                })}
                              </p>
                              <p className="text-xs text-slate-600">
                                {event.categoryName}
                              </p>
                              {event.location && (
                                <p className="text-xs text-slate-600">
                                  {event.location}
                                </p>
                              )}
                            </div>
                          </Popup>
                        </CircleMarker>
                      );
                    })}
                  </MapContainer>
                  </div>
                </div>
              )}
            </div>
          );
        }

        return (
          <div
            key="list"
            ref={listRef}
            className={`card space-y-4 drag-card ${
              dragSource === "list" ? "dragging" : ""
            } ${
              dragOver === "list" && dragSource && dragSource !== "list" ? "drag-target" : ""
            } ${
              dragSource === "calendar" && dragOver === "list" ? "shift-up" : ""
            }`}
            onDragOver={(event) => event.preventDefault()}
            onDragEnter={() => onDragEnter("list")}
            onDrop={(event) => onDrop(event, "list")}
          >
            <div className="flex items-center justify-between">
              <h3 className="text-sm font-semibold text-slate-700">Liste</h3>
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
                  onClick={() => toggleCollapse("list")}
                  aria-label={collapsed.list ? "Liste aufklappen" : "Liste zuklappen"}
                  title={collapsed.list ? "Aufklappen" : "Zuklappen"}
                >
                  {collapsed.list ? <IconChevronDown /> : <IconChevronUp />}
                </button>
                <div
                  className="drag-handle"
                  draggable
                  onDragStart={(event) => onDragStart(event, "list")}
                  onDragEnd={onDragEnd}
                  title="Zum Tauschen ziehen"
                  aria-label="Liste verschieben"
                >
                  <IconGrip />
                </div>
              </div>
            </div>
            {!collapsed.list && (
              <>
            <div className="flex flex-wrap items-center justify-between gap-3">
              <input
                value={query}
                onChange={(event) => setQuery(event.target.value)}
                placeholder="Suchen..."
                className="min-w-[220px] rounded-xl border border-slate-300 px-3 py-2 text-sm"
              />
              {isAdmin && (
                <div className="flex flex-wrap items-center gap-2">
                  <button
                    type="button"
                    className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700"
                    onClick={() => toggleSelectAllVisible(true)}
                    disabled={displayedEvents.length === 0}
                  >
                    Alle markieren
                  </button>
                  <button
                    type="button"
                    className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700"
                    onClick={() => toggleSelectAllVisible(false)}
                    disabled={bulkSelection.size === 0}
                  >
                    Auswahl löschen
                  </button>
                  <button
                    type="button"
                    className="rounded-full border border-red-200 p-2 text-red-600"
                    onClick={deleteSelectedEvents}
                    disabled={bulkSelection.size === 0}
                    aria-label="Ausgewählte löschen"
                  >
                    <svg
                      viewBox="0 0 24 24"
                      className="h-4 w-4"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                    >
                      <path d="M3 6h18" strokeLinecap="round" />
                      <path d="M8 6V4h8v2" strokeLinecap="round" />
                      <path d="M19 6l-1 14H6L5 6" strokeLinecap="round" />
                      <path d="M10 11v6M14 11v6" strokeLinecap="round" />
                    </svg>
                  </button>
                  <span className="text-xs text-slate-500">
                    {bulkSelection.size} ausgewählt
                  </span>
                </div>
              )}
            </div>
        <div className="overflow-x-auto">
          <table className="list-table min-w-full text-left text-sm">
            <thead className="text-xs uppercase tracking-[0.2em] text-slate-500">
              <tr>
                {isAdmin && (
                  <th className="pb-2 w-[44px] pl-2">
                    <input
                      type="checkbox"
                      aria-label="Alle sichtbaren Termine auswählen"
                      checked={
                        displayedEvents.length > 0 &&
                        displayedEvents.every((event) =>
                          bulkSelection.has(event.id)
                        )
                      }
                      onChange={(event) =>
                        toggleSelectAllVisible(event.target.checked)
                      }
                    />
                  </th>
                )}
                <th className="pb-2">
                  <SortButton
                    label="Datum"
                    active={sortKey === "startAt"}
                    direction={sortDir}
                    onClick={() => toggleSort("startAt")}
                  />
                </th>
                <th className="pb-2">
                  <SortButton
                    label="Titel"
                    active={sortKey === "title"}
                    direction={sortDir}
                    onClick={() => toggleSort("title")}
                  />
                </th>
                <th className="pb-2">
                  <div className="flex items-center gap-2">
                    <SortButton
                      label="Kategorie"
                      active={sortKey === "category"}
                      direction={sortDir}
                      onClick={() => toggleSort("category")}
                    />
                    <select
                      className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs text-slate-600"
                      value={categoryFilter}
                      onChange={(event) => setCategoryFilter(event.target.value)}
                      aria-label="Kategorie filtern"
                    >
                      <option value="ALL">Alle</option>
                      {categoryOptions.map((category) => (
                        <option key={category} value={category}>
                          {category}
                        </option>
                      ))}
                    </select>
                  </div>
                </th>
                <th className="pb-2">
                  <SortButton
                    label="Ort"
                    active={sortKey === "location"}
                    direction={sortDir}
                    onClick={() => toggleSort("location")}
                  />
                </th>
                <th className="pb-2 w-[96px]">Aktionen</th>
              </tr>
            </thead>
            <tbody>
              {displayedEvents.length === 0 ? (
                <tr>
                  <td colSpan={isAdmin ? 6 : 5} className="py-4 text-slate-600">
                    Keine Termine für die aktuelle Auswahl.
                  </td>
                </tr>
              ) : (
                displayedEvents.map((event) => (
                  <tr
                    key={event.id}
                    data-bucket={getDateBucket(event.startAt)}
                    className={`border-t border-slate-200 ${
                      getDateBucket(event.startAt) === "past"
                        ? "bg-slate-50 text-slate-500"
                        : getDateBucket(event.startAt) === "today"
                        ? "bg-amber-50/60"
                        : getDateBucket(event.startAt) === "tomorrow"
                        ? "bg-emerald-50/60"
                        : "bg-sky-50/40"
                    }`}
                  >
                    {isAdmin && (
                      <td className="py-3 pr-3 pl-2">
                        <input
                          type="checkbox"
                          aria-label={`${event.title} auswählen`}
                          checked={bulkSelection.has(event.id)}
                          onChange={() => toggleBulkSelection(event.id)}
                        />
                      </td>
                    )}
                    <td className="py-3 pr-3 pl-2 whitespace-nowrap">
                      {new Date(event.startAt).toLocaleString("de-DE", {
                        dateStyle: "medium",
                        timeStyle: "short"
                      })}
                    </td>
                    <td className="py-3 pr-3 font-medium">{event.title}</td>
                    <td className="py-3 pr-3">
                      {event.category?.name || "Ohne Kategorie"}
                    </td>
                    <td className="py-3 pr-3">
                      <div className="flex items-center justify-between gap-2">
                        <span className="flex-1">{formatLocation(event.location)}</span>
                        {event.locationLat && event.locationLng && (
                          <a
                            className="inline-flex items-center justify-center rounded-full border border-slate-200 p-1 text-slate-600 hover:bg-slate-100"
                            href={`https://maps.google.com/?q=${event.locationLat},${event.locationLng}&z=14`}
                            target="_blank"
                            rel="noreferrer"
                            title="Google Maps"
                            aria-label="Google Maps"
                          >
                            <IconMapPin />
                          </a>
                        )}
                      </div>
                    </td>
                    <td className="py-3 pr-3">
                      <div className="flex flex-nowrap gap-1">
                        <ViewToggleButton
                          isSelected={selectedEventIds.has(event.id)}
                          onClick={() => toggleEvent(event.id)}
                        />
                        {isAdmin && (
                          <button
                            type="button"
                            className="rounded-full border border-slate-200 p-2 text-slate-600"
                            onClick={() => {
                              setEditStatus(null);
                              setEditError(null);
                              setEditEvent(event);
                              setIsEditOpen(true);
                            }}
                            aria-label="Termin bearbeiten"
                          >
                            <svg
                              viewBox="0 0 24 24"
                              className="h-4 w-4"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                            >
                              <path
                                d="M4 20h4l10-10-4-4L4 16v4z"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                              <path
                                d="M13 7l4 4"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                              />
                            </svg>
                          </button>
                        )}
                        <button
                          type="button"
                          className="rounded-full border border-slate-200 p-2 text-slate-600"
                          onClick={() => setDetailsEvent(event)}
                          aria-label="Termin Details"
                        >
                          <svg
                            viewBox="0 0 24 24"
                            className="h-4 w-4"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                          >
                            <circle cx="12" cy="12" r="9" />
                            <path d="M12 8h.01M12 12v4" strokeLinecap="round" />
                          </svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
              </>
            )}
          </div>
        );
      })}
      {detailsEvent && portalRoot
        ? createPortal(
            <div
              className="fixed inset-0 z-30 flex items-center justify-center bg-black/40 px-4 py-6"
              onClick={() => setDetailsEvent(null)}
            >
              <div
                className="card w-full max-w-2xl max-h-[90vh] overflow-y-auto"
                ref={detailsModalRef}
                role="dialog"
                aria-modal="true"
                tabIndex={-1}
                onClick={(event) => event.stopPropagation()}
                onKeyDown={(event) => {
                  if (event.key !== "Tab") return;
                  const node = detailsModalRef.current;
                  if (!node) return;
                  const focusable = node.querySelectorAll<HTMLElement>(
                    'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
                  );
                  if (focusable.length === 0) {
                    event.preventDefault();
                    return;
                  }
                  const first = focusable[0];
                  const last = focusable[focusable.length - 1];
                  if (event.shiftKey && document.activeElement === first) {
                    event.preventDefault();
                    last.focus();
                  } else if (!event.shiftKey && document.activeElement === last) {
                    event.preventDefault();
                    first.focus();
                  }
                }}
              >
                  <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">Termin Details</h3>
                  <div className="flex items-center gap-2">
                    {isAdmin && (
                      <button
                        type="button"
                        className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700"
                        onClick={() => {
                          setEditStatus(null);
                          setEditError(null);
                          setEditEvent(detailsEvent);
                          setIsEditOpen(true);
                          setDetailsEvent(null);
                        }}
                      >
                        Bearbeiten
                      </button>
                    )}
                    <button
                      type="button"
                      className="text-sm text-slate-600"
                      onClick={() => setDetailsEvent(null)}
                    >
                      Schließen
                    </button>
                  </div>
                </div>
                <div className="mt-4 grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <div>
                      <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
                        Titel
                      </p>
                      <p className="text-sm font-semibold">{detailsEvent.title}</p>
                    </div>
                    <div>
                      <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
                        Zeitpunkt
                      </p>
                      <p className="text-sm">
                        {new Date(detailsEvent.startAt).toLocaleString("de-DE", {
                          dateStyle: "full",
                          timeStyle: "short"
                        })}
                      </p>
                    </div>
                    <div>
                      <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
                        Ort
                      </p>
                      <p className="text-sm">{detailsEvent.location || "-"}</p>
                    </div>
                    <div>
                      <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
                        Kategorie
                      </p>
                      <p className="text-sm">
                        {detailsEvent.category?.name || "Ohne Kategorie"}
                      </p>
                    </div>
                    {detailsEvent.description && (
                      <div>
                        <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
                          Beschreibung
                        </p>
                        <p className="text-sm text-slate-700">
                          {detailsEvent.description}
                        </p>
                      </div>
                    )}
                    {detailsEvent.locationLat && detailsEvent.locationLng && (
                      <div className="flex flex-wrap gap-2">
                        <a
                          className="btn-ghost"
                          href={`https://maps.google.com/?q=${detailsEvent.locationLat},${detailsEvent.locationLng}&z=14`}
                          target="_blank"
                          rel="noreferrer"
                        >
                          Google Maps
                        </a>
                        <a
                          className="btn-ghost"
                          href={`https://maps.apple.com/?ll=${detailsEvent.locationLat},${detailsEvent.locationLng}`}
                          target="_blank"
                          rel="noreferrer"
                        >
                          Apple Karten
                        </a>
                        <a
                          className="btn-ghost"
                          href={`https://www.openstreetmap.org/?mlat=${detailsEvent.locationLat}&mlon=${detailsEvent.locationLng}#map=17/${detailsEvent.locationLat}/${detailsEvent.locationLng}`}
                          target="_blank"
                          rel="noreferrer"
                        >
                          OpenStreetMap
                        </a>
                      </div>
                    )}
                  </div>
                  <div className="min-h-[240px] overflow-hidden rounded-xl border border-slate-200 bg-slate-100">
                    {placesProvider === "google" &&
                    placesKey &&
                    (detailsEvent.locationPlaceId ||
                      (detailsEvent.locationLat && detailsEvent.locationLng)) ? (
                      <iframe
                        title="Karte"
                        className="h-[320px] w-full"
                        loading="lazy"
                        referrerPolicy="no-referrer-when-downgrade"
                        src={
                          detailsEvent.locationPlaceId
                            ? `https://www.google.com/maps/embed/v1/place?key=${placesKey}&q=place_id:${detailsEvent.locationPlaceId}&zoom=14`
                            : `https://www.google.com/maps/embed/v1/place?key=${placesKey}&q=${detailsEvent.locationLat},${detailsEvent.locationLng}&zoom=14`
                        }
                      />
                    ) : placesProvider === "osm" &&
                      detailsEvent.locationLat &&
                      detailsEvent.locationLng ? (
                      <iframe
                        title="Karte"
                        className="h-[320px] w-full"
                        loading="lazy"
                        src={`https://www.openstreetmap.org/export/embed.html?bbox=${
                          detailsEvent.locationLng - 0.0045
                        },${detailsEvent.locationLat - 0.0045},${
                          detailsEvent.locationLng + 0.0045
                        },${detailsEvent.locationLat + 0.0045}&layer=mapnik&marker=${detailsEvent.locationLat},${detailsEvent.locationLng}`}
                      />
                    ) : (
                      <div className="flex h-full items-center justify-center text-sm text-slate-500">
                        Keine Karte verfügbar.
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>,
            portalRoot
          )
        : null}
      {isEditOpen && editEvent && portalRoot
        ? createPortal(
            <div
              className="fixed inset-0 z-30 flex items-center justify-center bg-black/40 px-4 py-6"
              onClick={() => {
                setIsEditOpen(false);
                setEditEvent(null);
              }}
            >
              <div
                className="card w-full max-w-2xl max-h-[90vh] overflow-y-auto"
                onClick={(event) => event.stopPropagation()}
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">Termin bearbeiten</h3>
                  <button
                    type="button"
                    className="text-sm text-slate-600"
                    onClick={() => {
                      setIsEditOpen(false);
                      setEditEvent(null);
                    }}
                  >
                    Schließen
                  </button>
                </div>
                <form onSubmit={updateEvent} className="mt-4 space-y-3">
                  <div className="grid gap-3 md:grid-cols-2">
                    <input
                      name="title"
                      required
                      defaultValue={editEvent.title}
                      className="rounded-xl border border-slate-300 px-3 py-2"
                      placeholder="Titel"
                    />
                    <input
                      name="location"
                      defaultValue={editEvent.location || ""}
                      className="rounded-xl border border-slate-300 px-3 py-2"
                      placeholder="Ort"
                    />
                    <input
                      type="hidden"
                      name="locationPlaceId"
                      value={editEvent.locationPlaceId || ""}
                    />
                    <input
                      type="hidden"
                      name="locationLat"
                      value={editEvent.locationLat ?? ""}
                    />
                    <input
                      type="hidden"
                      name="locationLng"
                      value={editEvent.locationLng ?? ""}
                    />
                    <input
                      name="startAt"
                      type="datetime-local"
                      required
                      defaultValue={formatLocalDateTime(editEvent.startAt)}
                      className="rounded-xl border border-slate-300 px-3 py-2"
                    />
                    <input
                      name="endAt"
                      type="datetime-local"
                      defaultValue={formatLocalDateTime(editEvent.endAt)}
                      className="rounded-xl border border-slate-300 px-3 py-2"
                    />
                    <select
                      name="categoryId"
                      required
                      defaultValue={editEvent.category?.id || ""}
                      className="rounded-xl border border-slate-300 px-3 py-2 md:col-span-2"
                    >
                      <option value="" disabled>
                        Kategorie wählen
                      </option>
                      {categories.map((category) => (
                        <option key={category.id} value={category.id}>
                          {category.name}
                        </option>
                      ))}
                    </select>
                  </div>
                  <textarea
                    name="description"
                    defaultValue={editEvent.description || ""}
                    placeholder="Beschreibung"
                    className="min-h-[96px] rounded-xl border border-slate-300 px-3 py-2"
                  />
                  <button type="submit" className="btn-accent">
                    Speichern
                  </button>
                  <button
                    type="button"
                    className="rounded-full border border-red-200 px-3 py-1 text-xs text-red-600"
                    onClick={() => deleteEvent(editEvent.id)}
                  >
                    Löschen
                  </button>
                  {editStatus && (
                    <p className="text-sm text-emerald-600">{editStatus}</p>
                  )}
                  {editError && (
                    <p className="text-sm text-red-600">{editError}</p>
                  )}
                </form>
              </div>
            </div>,
            portalRoot
          )
        : null}
      {mapFullscreen && portalRoot
        ? createPortal(
            <div
              className="fixed inset-0 z-40 flex flex-col bg-slate-950/40 p-4"
              onClick={() => setMapFullscreen(false)}
            >
              <div
                className="card flex h-full w-full flex-col"
                onClick={(event) => event.stopPropagation()}
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">Karte</h3>
                  <button
                    type="button"
                    className="text-sm text-slate-600"
                    onClick={() => setMapFullscreen(false)}
                  >
                    Schließen
                  </button>
                </div>
                <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-slate-600">
                  <button
                    type="button"
                    onClick={() => {
                      setMapDateFilter(new Set(["past", "today", "tomorrow", "future"]));
                      setMapCategoryFilter(new Set());
                    }}
                    className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
                  >
                    Alles
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      setMapDateFilter(new Set());
                      setMapCategoryFilter(new Set(mapCategoryOptions));
                    }}
                    className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
                  >
                    Nichts
                  </button>
                  <button
                    type="button"
                    onClick={() => toggleMapDateFilter("today")}
                    className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                      mapDateFilter.has("today")
                        ? "border-amber-300 bg-amber-50 text-amber-900"
                        : "border-slate-200 bg-white"
                    }`}
                  >
                    <span className="h-2.5 w-2.5 rounded-full border border-amber-500 bg-amber-200"></span>
                    Heute
                  </button>
                  <button
                    type="button"
                    onClick={() => toggleMapDateFilter("tomorrow")}
                    className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                      mapDateFilter.has("tomorrow")
                        ? "border-emerald-300 bg-emerald-50 text-emerald-900"
                        : "border-slate-200 bg-white"
                    }`}
                  >
                    <span className="h-2.5 w-2.5 rounded-full border border-emerald-500 bg-emerald-200"></span>
                    Morgen
                  </button>
                  <button
                    type="button"
                    onClick={() => toggleMapDateFilter("past")}
                    className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                      mapDateFilter.has("past")
                        ? "border-slate-300 bg-slate-100 text-slate-700"
                        : "border-slate-200 bg-white"
                    }`}
                  >
                    <span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-200"></span>
                    Vergangenheit
                  </button>
                  <button
                    type="button"
                    onClick={() => toggleMapDateFilter("future")}
                    className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                      mapDateFilter.has("future")
                        ? "border-sky-200 bg-sky-50 text-sky-900"
                        : "border-slate-200 bg-white"
                    }`}
                  >
                    <span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-100"></span>
                    Zukunft
                  </button>
                  {mapCategoryOptions.map((category) => {
                    const active = mapCategoryFilter.has(category);
                    return (
                      <button
                        key={category}
                        type="button"
                        onClick={() => toggleMapCategoryFilter(category)}
                        className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
                          active
                            ? "border-slate-300 bg-slate-100 text-slate-900"
                            : "border-slate-200 bg-white"
                        }`}
                      >
                        <span
                          className="h-2.5 w-2.5 rounded-full"
                          style={{ backgroundColor: getCategoryColor(category) }}
                        ></span>
                        {category}
                      </button>
                    );
                  })}
                </div>
                <div
                  className="mt-4 flex-1 overflow-hidden rounded-xl overscroll-contain"
                  onWheel={(event) => event.stopPropagation()}
                >
                  <MapContainer
                    center={[52.52, 13.405]}
                    zoom={5}
                    scrollWheelZoom
                    className="h-full w-full"
                  >
                    <TileLayer
                      attribution={
                        isDarkTheme
                          ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
                          : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                      }
                      url={
                        isDarkTheme
                          ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
                          : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                      }
                    />
                    <MapAutoBounds points={mapPoints} />
                    {filteredMapEvents.map((event) => {
                      const fillColor = getCategoryColor(event.categoryName);
                      const isPast = event.bucket === "past";
                      const isToday = event.bucket === "today";
                      const isTomorrow = event.bucket === "tomorrow";
                      const strokeColor = isPast
                        ? "#94a3b8"
                        : isToday
                        ? "#f59e0b"
                        : isTomorrow
                        ? "#10b981"
                        : fillColor;
                      return (
                        <CircleMarker
                          key={event.id}
                          center={[event.locationLat as number, event.locationLng as number]}
                          radius={isToday || isTomorrow ? 8 : 6}
                          color={strokeColor}
                          fillColor={fillColor}
                          fillOpacity={isPast ? 0.35 : 0.75}
                          weight={isToday || isTomorrow ? 2 : 1}
                        >
                          <Popup>
                            <div className="space-y-1">
                              <p className="text-sm font-semibold">{event.title}</p>
                              <p className="text-xs text-slate-600">
                                {new Date(event.startAt).toLocaleString("de-DE", {
                                  dateStyle: "medium",
                                  timeStyle: "short"
                                })}
                              </p>
                              <p className="text-xs text-slate-600">
                                {event.categoryName}
                              </p>
                              {event.location && (
                                <p className="text-xs text-slate-600">
                                  {event.location}
                                </p>
                              )}
                            </div>
                          </Popup>
                        </CircleMarker>
                      );
                    })}
                  </MapContainer>
                </div>
              </div>
            </div>,
            portalRoot
          )
        : null}
    </section>
  );
}

function formatLocation(value?: string | null) {
  if (!value) return "-";
  const parts = value.split(",").map((part) => part.trim()).filter(Boolean);
  if (parts.length === 0) return value;
  const postal = parts.find((part) => /\b\d{5}\b/.test(part));
  const street = parts[0] || "";
  const city = parts[1] || "";
  if (postal && city) {
    return street ? `${street}, ${postal} ${city}` : `${postal} ${city}`;
  }
  if (postal) {
    return street ? `${street}, ${postal}` : postal;
  }
  const main = parts.slice(0, 2).join(", ");
  return main || value;
}

function MapAutoBounds({ points }: { points: Array<{ lat: number; lng: number }> }) {
  const map = useMap();
  useEffect(() => {
    if (points.length === 0) return;
    const bounds = points.map((point) => [point.lat, point.lng]) as [
      number,
      number
    ][];
    map.fitBounds(bounds, { padding: [24, 24] });
  }, [map, points]);
  return null;
}

function StatusIcon({ status }: { status: string }) {
  if (status === "APPROVED") {
    return (
      <span title="Freigegeben" aria-label="Freigegeben" className="text-emerald-600">
        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M5 12l4 4L19 6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
    );
  }
  if (status === "REJECTED") {
    return (
      <span title="Abgelehnt" aria-label="Abgelehnt" className="text-red-600">
        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M6 6l12 12M18 6l-12 12" strokeLinecap="round" />
        </svg>
      </span>
    );
  }
  return (
    <span title="Offen" aria-label="Offen" className="text-amber-600">
      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M12 6v6l4 2" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="12" cy="12" r="9" />
      </svg>
    </span>
  );
}

function ViewToggleButton({
  isSelected,
  onClick,
  size = "md"
}: {
  isSelected: boolean;
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
  size?: "sm" | "md";
}) {
  const base =
    size === "sm"
      ? "event-toggle rounded-full bg-white/80 px-2 py-1 text-[10px] text-slate-700"
      : "rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700";
  const label = isSelected
    ? "Vom Kalenderfeed entfernen"
    : "Zum Kalenderfeed hinzufügen";
  return (
    <button
      type="button"
      className={base}
      onClick={onClick}
      aria-label={label}
      title={label}
    >
      {isSelected ? <IconBell /> : <IconSleep />}
    </button>
  );
}

function IconBell() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M6 8a6 6 0 1112 0c0 7 2 7 2 7H4s2 0 2-7" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M10 19a2 2 0 004 0" strokeLinecap="round" />
    </svg>
  );
}

function IconSleep() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M3 5h6l-6 6h6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M9 9h6l-6 6h6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M15 13h6l-6 6h6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function IconGrip() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="8" cy="6" r="1" />
      <circle cx="16" cy="6" r="1" />
      <circle cx="8" cy="12" r="1" />
      <circle cx="16" cy="12" r="1" />
      <circle cx="8" cy="18" r="1" />
      <circle cx="16" cy="18" r="1" />
    </svg>
  );
}

function IconChevronDown() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function IconChevronUp() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M6 15l6-6 6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function SortButton({
  label,
  active,
  direction,
  onClick
}: {
  label: string;
  active: boolean;
  direction: "asc" | "desc";
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`inline-flex items-center gap-1 text-xs uppercase tracking-[0.2em] ${
        active ? "text-slate-900" : "text-slate-500"
      }`}
      title="Sortieren"
    >
      {label}
      <SortIcon direction={direction} active={active} />
    </button>
  );
}

function SortIcon({
  direction,
  active
}: {
  direction: "asc" | "desc";
  active: boolean;
}) {
  return (
    <svg
      viewBox="0 0 24 24"
      className={`h-3 w-3 ${active ? "opacity-100" : "opacity-40"}`}
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
    >
      {direction === "asc" ? (
        <path d="M6 15l6-6 6 6" strokeLinecap="round" strokeLinejoin="round" />
      ) : (
        <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
      )}
    </svg>
  );
}

function IconMapPin() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M12 21s6-6.5 6-11a6 6 0 10-12 0c0 4.5 6 11 6 11z" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="12" cy="10" r="2.5" />
    </svg>
  );
}