"use client";

import AddRoundedIcon from "@mui/icons-material/AddRounded";
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
import EditRoundedIcon from "@mui/icons-material/EditRounded";
import KeyRoundedIcon from "@mui/icons-material/KeyRounded";
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import NotificationsActiveRoundedIcon from "@mui/icons-material/NotificationsActiveRounded";
import SavingsRoundedIcon from "@mui/icons-material/SavingsRounded";
import SettingsRoundedIcon from "@mui/icons-material/SettingsRounded";
import UploadFileRoundedIcon from "@mui/icons-material/UploadFileRounded";
import VerifiedRoundedIcon from "@mui/icons-material/VerifiedRounded";
import WalletRoundedIcon from "@mui/icons-material/WalletRounded";
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  MenuItem,
  Stack,
  Tab,
  Tabs,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery
} from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
import { signOut } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import type { FormEvent } from "react";
import { startTransition, useEffect, useMemo, useRef, useState } from "react";

import { BudgetColumn } from "@/components/dashboard/budget-column";
import { ColorPickerField } from "@/components/dashboard/color-picker-field";
import type {
  DashboardAccountingPeriod,
  DashboardAuditLog,
  DashboardDonation,
  DashboardManagedUser,
  DashboardPeriodCutoff,
  DashboardSettings,
  DashboardViewer,
  DashboardWorkingGroup
} from "@/lib/dashboard-types";
import {
  APPROVAL_FLOW,
  approvalLabel,
  canManageBudgets,
  canManageUsers,
  getAvailableApprovalRoles,
  roleLabel
} from "@/lib/domain";

type DashboardShellProps = {
  viewer: DashboardViewer;
  workingGroups: DashboardWorkingGroup[];
  managedUsers: DashboardManagedUser[];
  auditLogs: DashboardAuditLog[];
  accountingPeriods: DashboardAccountingPeriod[];
  currentPeriodId: string;
  settings: DashboardSettings;
  donations: DashboardDonation[];
};

type ExpenseFormState = {
  title: string;
  description: string;
  amount: string;
  agId: string;
  budgetId: string;
  recurrence: "NONE" | "MONTHLY";
  recurrenceStartAt: string;
  cutoffId: string;
  cutoffPhase: "PRE" | "POST";
};

type BudgetFormState = {
  workingGroupId: string;
  name: string;
  totalBudget: string;
  colorCode: string;
};

type BudgetReleaseFormState = {
  workingGroupId: string;
  budgetId: string;
  releasedAmount: string;
};

type DonationFormState = {
  title: string;
  description: string;
  amount: string;
  donatedAt: string;
  target: "GENERAL" | "EXPENSE";
  workingGroupId: string;
  expenseId: string;
};

type DonationDraft = DonationFormState;

type ExpenseEditDraft = {
  title: string;
  description: string;
  amount: string;
  agId: string;
  budgetId: string;
  cutoffId: string;
  cutoffPhase: "PRE" | "POST";
};

type CutoffFormState = {
  name: string;
  date: string;
};

type CutoffDraft = CutoffFormState;

type WorkingGroupFormState = {
  name: string;
};

type ApprovalPermissionValue = (typeof APPROVAL_FLOW)[number];

type UserFormState = {
  username: string;
  password: string;
  role: "BOARD" | "ORGA" | "FINANCE" | "MEMBER";
  workingGroupId: string;
};

type ManagedUserDraft = {
  role: "BOARD" | "ORGA" | "FINANCE" | "MEMBER";
  workingGroupId: string;
};

type PeriodFormState = {
  name: string;
  startsAt: string;
  endsAt: string;
  copyBudgetsFromPeriodId: string;
};

type PeriodEditFormState = {
  name: string;
  startsAt: string;
  endsAt: string;
  cutoffName: string;
  cutoffDate: string;
};

type OrgaSettingsDraft = {
  requiredApprovalTypes: ApprovalPermissionValue[];
  budgetReleaseNotifyTarget: "ALL_GROUP_USERS" | "GROUP_MEMBERS_ONLY";
};

type DashboardMessage = {
  type: "success" | "error";
  text: string;
};

type DriveDiagnosticResult = {
  ok?: boolean;
  error?: string;
  code?: string;
  details?: string[];
  folderId?: string;
  serviceAccountEmail?: string;
};

function sortApprovalPermissions(value: ApprovalPermissionValue[]) {
  return APPROVAL_FLOW.filter((approvalType) => value.includes(approvalType));
}

function toggleApprovalPermission(
  currentValue: ApprovalPermissionValue[],
  approvalType: ApprovalPermissionValue
) {
  return currentValue.includes(approvalType)
    ? currentValue.filter((entry) => entry !== approvalType)
    : sortApprovalPermissions([...currentValue, approvalType]);
}
function sortManagedUsersList(users: DashboardManagedUser[]) {
  const roleOrder: Record<DashboardManagedUser["role"], number> = {
    BOARD: 0,
    ORGA: 1,
    FINANCE: 2,
    MEMBER: 3
  };

  return [...users].sort((left, right) => {
    const roleDifference = roleOrder[left.role] - roleOrder[right.role];
    if (roleDifference !== 0) {
      return roleDifference;
    }

    return left.username.localeCompare(right.username, "de-DE");
  });
}


type MobileSection = "overview" | "finance" | "actions";
type MobileAction =
  | "expense"
  | "donation"
  | "budgetRelease"
  | "workingGroup"
  | "budget"
  | "periods"
  | "backup"
  | "userCreate"
  | "approvalThreshold"
  | "users"
  | "logs";
type FinanceViewMode = "monthly" | "yearly" | "cutoff";
type FinancePresentation = "charts" | "table";
type DesktopSection = "overview" | "finance" | "budgetGroups" | "periods" | "users" | "logs";
const GENERAL_DONATIONS_MOBILE_ID = "__general_donations__";
type CutoffSelectionOption = {
  value: string;
  cutoffId: string;
  cutoffPhase: "PRE" | "POST";
  label: string;
};
const currencyFormatter = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR"
});

const dateTimeFormatter = new Intl.DateTimeFormat("de-DE", {
  dateStyle: "medium",
  timeStyle: "short"
});

const dateFormatter = new Intl.DateTimeFormat("de-DE", {
  dateStyle: "medium"
});

function toDateInputValue(value: string) {
  return value.slice(0, 10);
}

function createCutoffSelectionValue(cutoffId: string, cutoffPhase: "PRE" | "POST") {
  return `${cutoffId}:${cutoffPhase}`;
}

function parseCutoffSelectionValue(value: string) {
  const [cutoffId, cutoffPhase] = value.split(":");

  return {
    cutoffId: cutoffId ?? "",
    cutoffPhase: cutoffPhase === "POST" ? "POST" : "PRE"
  } as const;
}

function getCutoffSelectionOptions(cutoffs: DashboardPeriodCutoff[]): CutoffSelectionOption[] {
  if (cutoffs.length === 0) {
    return [];
  }

  const options: CutoffSelectionOption[] = cutoffs.map((cutoff) => ({
    value: createCutoffSelectionValue(cutoff.id, "PRE"),
    cutoffId: cutoff.id,
    cutoffPhase: "PRE" as const,
    label: `Pre ${cutoff.name}`
  }));
  const lastCutoff = cutoffs[cutoffs.length - 1];

  options.push({
    value: createCutoffSelectionValue(lastCutoff.id, "POST"),
    cutoffId: lastCutoff.id,
    cutoffPhase: "POST",
    label: `Post ${lastCutoff.name}`
  });

  return options;
}

function getGeneralDonationCutoffSelectionValue(cutoffs: DashboardPeriodCutoff[], donatedAt: string) {
  const options = getCutoffSelectionOptions(cutoffs);

  if (options.length === 0) {
    return "";
  }

  const donationDate = new Date(donatedAt);
  donationDate.setHours(0, 0, 0, 0);

  for (const cutoff of cutoffs) {
    if (!cutoff.date) {
      continue;
    }

    const cutoffDate = new Date(cutoff.date);
    cutoffDate.setHours(0, 0, 0, 0);

    if (donationDate <= cutoffDate) {
      return createCutoffSelectionValue(cutoff.id, "PRE");
    }
  }

  return createCutoffSelectionValue(cutoffs[cutoffs.length - 1].id, "POST");
}

function getExpenseFinanceDate(expense: { createdAt: string; documents: { invoiceDate: string }[] }) {
  const invoiceDate = expense.documents
    .map((document) => document.invoiceDate)
    .sort((left, right) => new Date(left).getTime() - new Date(right).getTime())[0];

  return new Date(invoiceDate ?? expense.createdAt);
}

function getFinanceMonthKey(date: Date) {
  return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, "0")}`;
}

function getFinanceMonthLabel(date: Date) {
  return new Intl.DateTimeFormat("de-DE", { month: "long", year: "numeric" }).format(date);
}

function formatPeriodRange(startsAt: string, endsAt: string) {
  const formatter = new Intl.DateTimeFormat("de-DE", { dateStyle: "medium" });
  return `${formatter.format(new Date(startsAt))} bis ${formatter.format(new Date(endsAt))}`;
}

function getSuggestedPeriodDraft(currentPeriod: DashboardAccountingPeriod | undefined): PeriodFormState {
  if (!currentPeriod) {
    const year = new Date().getFullYear();
    return {
      name: `Haushalt ${year}`,
      startsAt: toDateInputValue(new Date(Date.UTC(year, 0, 1)).toISOString()),
      endsAt: toDateInputValue(new Date(Date.UTC(year, 11, 31)).toISOString()),
      copyBudgetsFromPeriodId: ""
    };
  }

  const startsAt = new Date(currentPeriod.startsAt);
  const endsAt = new Date(currentPeriod.endsAt);
  const duration = Math.max(endsAt.getTime() - startsAt.getTime(), 24 * 60 * 60 * 1000);
  const nextStart = new Date(endsAt.getTime() + 24 * 60 * 60 * 1000);
  const nextEnd = new Date(nextStart.getTime() + duration);

  return {
    name: `${currentPeriod.name} Folgezeitraum`,
    startsAt: toDateInputValue(nextStart.toISOString()),
    endsAt: toDateInputValue(nextEnd.toISOString()),
    copyBudgetsFromPeriodId: currentPeriod.id
  };
}

function getPeriodEditDraft(period: DashboardAccountingPeriod | null | undefined): PeriodEditFormState {
  if (!period) {
    return {
      name: "",
      startsAt: "",
      endsAt: "",
      cutoffName: "Open Air",
      cutoffDate: ""
    };
  }

  return {
    name: period.name,
    startsAt: toDateInputValue(period.startsAt),
    endsAt: toDateInputValue(period.endsAt),
    cutoffName: period.cutoffName || "Open Air",
    cutoffDate: period.cutoffDate ? toDateInputValue(period.cutoffDate) : ""
  };
}

function generatePassword(length = 14) {
  const alphabet = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789!@$%";
  const cryptoSource = globalThis.crypto;

  if (!cryptoSource?.getRandomValues) {
    return "RFP2026!Start";
  }

  const values = cryptoSource.getRandomValues(new Uint32Array(length));
  return Array.from(values, (value) => alphabet[value % alphabet.length]).join("");
}

async function parseResponse(response: Response) {
  const payload = await response.json().catch(() => null);

  if (!response.ok) {
    const detailText = Array.isArray(payload?.details) && payload.details.length > 0
      ? `\n\n${payload.details.map((detail: string) => `- ${detail}`).join("\n")}`
      : "";
    const codeText = typeof payload?.code === "string" ? `\nCode: ${payload.code}` : "";
    throw new Error(`${payload?.error ?? "Die Anfrage konnte nicht verarbeitet werden."}${codeText}${detailText}`);
  }

  return payload;
}

function urlBase64ToUint8Array(value: string) {
  const padding = "=".repeat((4 - (value.length % 4)) % 4);
  const base64 = `${value}${padding}`.replace(/-/g, "+").replace(/_/g, "/");
  const rawData = window.atob(base64);
  return Uint8Array.from([...rawData], (character) => character.charCodeAt(0));
}

function hasFocusedEditableElement() {
  const activeElement = document.activeElement;

  if (!activeElement || activeElement === document.body) {
    return false;
  }

  return Boolean(activeElement.closest('input, textarea, select, [contenteditable="true"]'));
}

export function DashboardShell({
  viewer,
  workingGroups,
  managedUsers,
  auditLogs,
  accountingPeriods,
  currentPeriodId,
  settings,
  donations
}: DashboardShellProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const isCompactLayout = useMediaQuery(theme.breakpoints.down("lg"));
  const router = useRouter();
  const searchParams = useSearchParams();

  const visibleGroups = workingGroups;
  const editableExpenseGroups =
    viewer.role === "MEMBER"
      ? workingGroups.filter((group) => group.id === viewer.workingGroupId)
      : workingGroups;
  const canManageAccounts = canManageUsers(viewer.role);
  const canManagePeriods = canManageBudgets(viewer.role);
  const currentPeriod = accountingPeriods.find((period) => period.id === currentPeriodId) ?? accountingPeriods[0];
  const approvalThreshold = settings.approvalThreshold;
  const desktopSections = [
    { value: "overview" as const, label: "AG-\u00dcbersicht" },
    { value: "finance" as const, label: "Finanz\u00fcbersicht" },
    ...(canManagePeriods ? [{ value: "budgetGroups" as const, label: "AGs & Budgets" }] : []),
    ...(canManagePeriods ? [{ value: "periods" as const, label: "Zeitraum" }] : []),
    ...(canManageAccounts ? [{ value: "users" as const, label: "Nutzerverwaltung" }] : []),
    ...(canManageAccounts ? [{ value: "logs" as const, label: "Backup & Log" }] : [])
  ];
  const mobileActions = [
    { value: "expense" as const, label: "Neue Ausgabe" },
    ...(canManagePeriods ? [{ value: "donation" as const, label: "Spende erfassen" }] : []),
    ...(canManagePeriods ? [{ value: "budgetRelease" as const, label: "Bereits an AG übergeben" }] : []),
    ...(canManageBudgets(viewer.role)
      ? [
          { value: "workingGroup" as const, label: "AG anlegen" },
          { value: "budget" as const, label: "Budget anlegen" }
        ]
      : []),
    ...(canManagePeriods ? [{ value: "periods" as const, label: "Zeitraum" }] : []),
    ...(canManageAccounts
      ? [
          { value: "backup" as const, label: "CSV-Backup" },
          { value: "userCreate" as const, label: "Nutzer anlegen" },
          { value: "approvalThreshold" as const, label: "Freigabe-Schwelle" },
          { value: "users" as const, label: "Nutzer verwalten" },
          { value: "logs" as const, label: "Änderungsverlauf" }
        ]
      : [])
  ];
  const showDesktopSectionTabs = !isCompactLayout && desktopSections.length > 1;

  const defaultEditableGroup =
    editableExpenseGroups.find((group) => group.id === viewer.workingGroupId) ??
    editableExpenseGroups[0] ??
    visibleGroups[0];
  const defaultBudget = defaultEditableGroup?.budgets[0];

  const [expenseForm, setExpenseForm] = useState<ExpenseFormState>({
    title: "",
    description: "",
    amount: "",
    agId: defaultEditableGroup?.id ?? "",
    budgetId: defaultBudget?.id ?? "",
    recurrence: "NONE",
    recurrenceStartAt: toDateInputValue(currentPeriod?.startsAt ?? new Date().toISOString()),
    cutoffId: currentPeriod?.cutoffs[0]?.id ?? "",
    cutoffPhase: "PRE"
  });
  const [donationForm, setDonationForm] = useState<DonationFormState>({
    title: "",
    description: "",
    amount: "",
    donatedAt: toDateInputValue(new Date().toISOString()),
    target: "GENERAL",
    workingGroupId: visibleGroups[0]?.id ?? "",
    expenseId: ""
  });
  const [budgetForm, setBudgetForm] = useState<BudgetFormState>({
    workingGroupId: visibleGroups[0]?.id ?? "",
    name: "Hauptbudget",
    totalBudget: "1200",
    colorCode: "#FFB94A"
  });
  const [budgetReleaseForm, setBudgetReleaseForm] = useState<BudgetReleaseFormState>({
    workingGroupId: visibleGroups[0]?.id ?? "",
    budgetId: visibleGroups[0]?.budgets[0]?.id ?? "",
    releasedAmount: (visibleGroups[0]?.budgets[0]?.releasedAmount ?? 0).toFixed(2)
  });
  const [workingGroupForm, setWorkingGroupForm] = useState<WorkingGroupFormState>({
    name: ""
  });
  const [userForm, setUserForm] = useState<UserFormState>({
    username: "",
    password: "",
    role: "MEMBER",
    workingGroupId: ""
  });
  const [message, setMessage] = useState<DashboardMessage | null>(null);
  const [busy, setBusy] = useState(false);
  const [mobileSection, setMobileSection] = useState<MobileSection>("overview");
  const [selectedMobileAction, setSelectedMobileAction] = useState<MobileAction>("expense");
  const [desktopSection, setDesktopSection] = useState<DesktopSection>("overview");
  const [financeViewMode, setFinanceViewMode] = useState<FinanceViewMode>("monthly");
  const [financePresentation, setFinancePresentation] = useState<FinancePresentation>("charts");
  const [selectedFinanceMonth, setSelectedFinanceMonth] = useState("ALL");
  const [selectedCurrentPeriodId, setSelectedCurrentPeriodId] = useState(currentPeriodId);
  const [selectedMobileGroupId, setSelectedMobileGroupId] = useState(visibleGroups[0]?.id ?? "");
  const [focusedBudgetId, setFocusedBudgetId] = useState<string | null>(null);
  const [backupFile, setBackupFile] = useState<File | null>(null);
  const [editingPasswordUserId, setEditingPasswordUserId] = useState<string | null>(null);
  const [editingUserId, setEditingUserId] = useState<string | null>(null);
  const [passwordDrafts, setPasswordDrafts] = useState<Record<string, string>>({});
  const [managedUsersState, setManagedUsersState] = useState(() => sortManagedUsersList(managedUsers));
  const [userDrafts, setUserDrafts] = useState<Record<string, ManagedUserDraft>>({});
  const [approvalThresholdDraft, setApprovalThresholdDraft] = useState(approvalThreshold.toFixed(2));
  const [isOrgaSettingsOpen, setIsOrgaSettingsOpen] = useState(false);
  const [driveDiagnosticResult, setDriveDiagnosticResult] = useState<DriveDiagnosticResult | null>(null);
  const [donationDrafts, setDonationDrafts] = useState<Record<string, DonationDraft>>({});
  const [editingDonationId, setEditingDonationId] = useState<string | null>(null);
  const [orgaSettingsDraft, setOrgaSettingsDraft] = useState<OrgaSettingsDraft>({
    requiredApprovalTypes: settings.requiredApprovalTypes,
    budgetReleaseNotifyTarget: settings.budgetReleaseNotifyTarget
  });
  const [periodForm, setPeriodForm] = useState<PeriodFormState>(getSuggestedPeriodDraft(currentPeriod));
  const [periodEditForm, setPeriodEditForm] = useState<PeriodEditFormState>(getPeriodEditDraft(currentPeriod));
  const [cutoffForm, setCutoffForm] = useState<CutoffFormState>({
    name: "Open Air",
    date: ""
  });
  const [cutoffDrafts, setCutoffDrafts] = useState<Record<string, CutoffDraft>>({});
  const [editingCutoffId, setEditingCutoffId] = useState<string | null>(null);
  const [pushStatus, setPushStatus] = useState<"idle" | "enabled" | "blocked" | "unsupported">("idle");
  const handledDeepLinkRef = useRef<string | null>(null);
  const busyRef = useRef(busy);
	  useEffect(() => {
    setSelectedCurrentPeriodId(currentPeriodId);
    setPeriodForm(getSuggestedPeriodDraft(currentPeriod));
  }, [currentPeriod, currentPeriodId]);

  useEffect(() => {
    busyRef.current = busy;
  }, [busy]);

  useEffect(() => {
    function refreshIfSafe() {
      if (document.visibilityState !== "visible" || busyRef.current || hasFocusedEditableElement()) {
        return;
      }

      router.refresh();
    }

    function handleVisibilityChange() {
      if (document.visibilityState === "visible") {
        refreshIfSafe();
      }
    }

    function handlePageShow() {
      refreshIfSafe();
    }

    document.addEventListener("visibilitychange", handleVisibilityChange);
    window.addEventListener("focus", refreshIfSafe);
    window.addEventListener("pageshow", handlePageShow);

    const intervalId = window.setInterval(refreshIfSafe, 45_000);

    return () => {
      window.clearInterval(intervalId);
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      window.removeEventListener("focus", refreshIfSafe);
      window.removeEventListener("pageshow", handlePageShow);
    };
  }, [router]);

  useEffect(() => {
    const selectedPeriod = accountingPeriods.find((period) => period.id === selectedCurrentPeriodId) ?? currentPeriod ?? null;
    setPeriodEditForm(getPeriodEditDraft(selectedPeriod));
  }, [accountingPeriods, currentPeriod, selectedCurrentPeriodId]);

  useEffect(() => {
    if (!desktopSections.some((section) => section.value === desktopSection)) {
      setDesktopSection("overview");
    }
  }, [desktopSection, desktopSections]);

  useEffect(() => {
    if (!mobileActions.some((action) => action.value === selectedMobileAction)) {
      setSelectedMobileAction(mobileActions[0]?.value ?? "expense");
    }
  }, [mobileActions, selectedMobileAction]);

  useEffect(() => {
    const directGroupId = searchParams.get("group");
    const budgetId = searchParams.get("budget");
    const expenseId = searchParams.get("expense");
    const deepLinkKey = [directGroupId, budgetId, expenseId].filter(Boolean).join(":");

    if (!deepLinkKey) {
      handledDeepLinkRef.current = null;
      return;
    }

    if (handledDeepLinkRef.current === deepLinkKey) {
      return;
    }

    const budgetGroup = visibleGroups.find((group) => budgetId && group.budgets.some((budget) => budget.id === budgetId));
    const expenseBudget = visibleGroups
      .flatMap((group) => group.budgets)
      .find((budget) => expenseId && budget.expenses.some((expense) => expense.id === expenseId));
    const targetGroupId =
      (directGroupId && visibleGroups.some((group) => group.id === directGroupId) ? directGroupId : null) ??
      budgetGroup?.id ??
      visibleGroups.find((group) =>
        expenseId && group.budgets.some((budget) => budget.expenses.some((expense) => expense.id === expenseId))
      )?.id ??
      null;
    const targetBudgetId = budgetId ?? expenseBudget?.id ?? null;

    if (targetGroupId) {
      handledDeepLinkRef.current = deepLinkKey;
      setSelectedMobileGroupId(targetGroupId);
      setFocusedBudgetId(targetBudgetId);
      setMobileSection("overview");
      setDesktopSection("overview");
      router.replace("/", { scroll: false });
    }
  }, [router, searchParams, visibleGroups]);

  useEffect(() => {
    if (selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID) {
      return;
    }

    if (!visibleGroups.some((group) => group.id === selectedMobileGroupId)) {
      setSelectedMobileGroupId(visibleGroups[0]?.id ?? "");
    }
  }, [selectedMobileGroupId, visibleGroups]);

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

    async function syncExistingPushSubscription() {
      if (!("serviceWorker" in navigator) || !("PushManager" in window) || !("Notification" in window)) {
        if (!cancelled) {
          setPushStatus("unsupported");
        }
        return;
      }

      if (Notification.permission === "denied") {
        if (!cancelled) {
          setPushStatus("blocked");
        }
        return;
      }

      if (Notification.permission !== "granted") {
        if (!cancelled) {
          setPushStatus("idle");
        }
        return;
      }

      const registration = await navigator.serviceWorker.ready.catch(() => null);
      const subscription = await registration?.pushManager.getSubscription().catch(() => null);

      if (cancelled) {
        return;
      }

      if (!subscription) {
        setPushStatus("idle");
        return;
      }

      setPushStatus("enabled");

      await fetch("/api/push-subscriptions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(subscription.toJSON())
      }).catch(() => {
        // Der Browser hat noch eine Subscription; ein temporärer Sync-Fehler soll den UI-Status nicht zurücksetzen.
      });
    }

    syncExistingPushSubscription();

    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    if (visibleGroups.length === 0) {
      setBudgetForm((current) => ({
        ...current,
        workingGroupId: ""
      }));
      return;
    }

    const groupStillExists = visibleGroups.some((group) => group.id === budgetForm.workingGroupId);

    if (!groupStillExists) {
      setBudgetForm((current) => ({
        ...current,
        workingGroupId: ""
      }));
    }
  }, [budgetForm.workingGroupId, visibleGroups]);

  useEffect(() => {
    if (visibleGroups.length === 0) {
      setBudgetReleaseForm({
        workingGroupId: "",
        budgetId: "",
        releasedAmount: "0.00"
      });
      return;
    }

    const selectedGroup = visibleGroups.find((group) => group.id === budgetReleaseForm.workingGroupId) ?? visibleGroups[0];
    const selectedBudget = selectedGroup?.budgets.find((budget) => budget.id === budgetReleaseForm.budgetId) ?? selectedGroup?.budgets[0];

    if (
      budgetReleaseForm.workingGroupId !== (selectedGroup?.id ?? "") ||
      budgetReleaseForm.budgetId !== (selectedBudget?.id ?? "")
    ) {
      setBudgetReleaseForm({
        workingGroupId: selectedGroup?.id ?? "",
        budgetId: selectedBudget?.id ?? "",
        releasedAmount: (selectedBudget?.releasedAmount ?? 0).toFixed(2)
      });
    }
  }, [budgetReleaseForm.budgetId, budgetReleaseForm.workingGroupId, visibleGroups]);

  useEffect(() => {
    if (!budgetReleaseForm.budgetId) {
      return;
    }

    const selectedGroup = visibleGroups.find((group) => group.id === budgetReleaseForm.workingGroupId) ?? visibleGroups[0];
    const selectedBudget = selectedGroup?.budgets.find((budget) => budget.id === budgetReleaseForm.budgetId);

    if (!selectedBudget) {
      return;
    }

    const nextReleasedAmount = selectedBudget.releasedAmount.toFixed(2);
    if (budgetReleaseForm.releasedAmount !== nextReleasedAmount) {
      setBudgetReleaseForm((current) => ({
        ...current,
        releasedAmount: nextReleasedAmount
      }));
    }
  }, [budgetReleaseForm.budgetId, budgetReleaseForm.workingGroupId, visibleGroups]);

  useEffect(() => {
    if (!message || message.type !== "success") {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setMessage((current) => (current?.type === "success" ? null : current));
    }, 10000);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [message]);

  useEffect(() => {
    const hasEditableGroup = editableExpenseGroups.some((group) => group.id === expenseForm.agId);

    if (!hasEditableGroup) {
      setExpenseForm((current) => ({
        ...current,
        agId: defaultEditableGroup?.id ?? "",
        budgetId: defaultEditableGroup?.budgets[0]?.id ?? ""
      }));
    }
  }, [defaultEditableGroup, editableExpenseGroups, expenseForm.agId]);

  useEffect(() => {
    const selectedGroup =
      editableExpenseGroups.find((group) => group.id === expenseForm.agId) ?? defaultEditableGroup;
    const hasBudget = selectedGroup?.budgets.some((budget) => budget.id === expenseForm.budgetId) ?? false;

    if (!hasBudget) {
      setExpenseForm((current) => ({
        ...current,
        budgetId: selectedGroup?.budgets[0]?.id ?? ""
      }));
    }
  }, [defaultEditableGroup, editableExpenseGroups, expenseForm.agId, expenseForm.budgetId]);

  useEffect(() => {
    const groupStillExists =
      userForm.workingGroupId === "" || visibleGroups.some((group) => group.id === userForm.workingGroupId);

    if (!groupStillExists) {
      setUserForm((current) => ({
        ...current,
        workingGroupId: ""
      }));
    }
  }, [userForm.workingGroupId, visibleGroups]);

  useEffect(() => {
    setApprovalThresholdDraft(approvalThreshold.toFixed(2));
  }, [approvalThreshold]);

  useEffect(() => {
    setOrgaSettingsDraft({
      requiredApprovalTypes: settings.requiredApprovalTypes,
      budgetReleaseNotifyTarget: settings.budgetReleaseNotifyTarget
    });
  }, [settings.budgetReleaseNotifyTarget, settings.requiredApprovalTypes]);

  useEffect(() => {
    setManagedUsersState(sortManagedUsersList(managedUsers));
  }, [managedUsers]);

  useEffect(() => {
    if (editingUserId && !managedUsersState.some((user) => user.id === editingUserId)) {
      setEditingUserId(null);
    }
  }, [editingUserId, managedUsersState]);
  useEffect(() => {
    const cutoffs = currentPeriod?.cutoffs ?? [];
    if (cutoffs.length > 0 && !cutoffs.some((cutoff) => cutoff.id === expenseForm.cutoffId)) {
      setExpenseForm((current) => ({
        ...current,
        cutoffId: cutoffs[0]?.id ?? ""
      }));
    }
  }, [currentPeriod, expenseForm.cutoffId]);
  const selectedExpenseGroup =
    editableExpenseGroups.find((group) => group.id === expenseForm.agId) ?? defaultEditableGroup;
  const selectedBudgetOptions = selectedExpenseGroup?.budgets ?? [];
  const selectedBudgetWorkingGroup =
    visibleGroups.find((group) => group.id === budgetForm.workingGroupId) ?? null;
  const selectedBudgetReleaseGroup =
    visibleGroups.find((group) => group.id === budgetReleaseForm.workingGroupId) ?? visibleGroups[0] ?? null;
  const selectedBudgetReleaseOptions = selectedBudgetReleaseGroup?.budgets ?? [];
  const selectedBudgetReleaseBudget =
    selectedBudgetReleaseOptions.find((budget) => budget.id === budgetReleaseForm.budgetId) ??
    selectedBudgetReleaseOptions[0] ??
    null;
  const selectedDonationGroup =
    visibleGroups.find((group) => group.id === donationForm.workingGroupId) ?? visibleGroups[0] ?? null;
  const selectedDonationGroupExpenses =
    selectedDonationGroup?.budgets.flatMap((budget) => budget.expenses) ?? [];
  const selectedBudgetReleasePaidAmount =
    selectedBudgetReleaseBudget?.expenses.reduce(
      (sum, expense) => sum + (expense.paidAt ? expense.netPeriodAmount : 0),
      0
    ) ?? 0;
  const selectedPeriodForManagement =
    accountingPeriods.find((period) => period.id === selectedCurrentPeriodId) ?? currentPeriod ?? null;
  const periodEditDirty =
    selectedPeriodForManagement !== null &&
    (periodEditForm.name.trim() !== selectedPeriodForManagement.name ||
      periodEditForm.startsAt !== toDateInputValue(selectedPeriodForManagement.startsAt) ||
      periodEditForm.endsAt !== toDateInputValue(selectedPeriodForManagement.endsAt));
  const managementCutoffs = selectedPeriodForManagement?.cutoffs ?? [];
  const currentCutoffs = currentPeriod?.cutoffs ?? [];
  const primaryCurrentCutoff = currentCutoffs[0] ?? null;
  const expenseCutoffOptions = useMemo(() => getCutoffSelectionOptions(currentCutoffs), [currentCutoffs]);
  const selectedExpenseCutoffValue = createCutoffSelectionValue(expenseForm.cutoffId, expenseForm.cutoffPhase);
  const selectedExpenseCutoffOption =
    expenseCutoffOptions.find((option) => option.value === selectedExpenseCutoffValue) ?? expenseCutoffOptions[0] ?? null;
  useEffect(() => {
    if (expenseCutoffOptions.length === 0) {
      return;
    }

    if (expenseCutoffOptions.some((option) => option.value === selectedExpenseCutoffValue)) {
      return;
    }

    const fallback = expenseCutoffOptions[0];
    setExpenseForm((current) => ({
      ...current,
      cutoffId: fallback.cutoffId,
      cutoffPhase: fallback.cutoffPhase
    }));
  }, [expenseCutoffOptions, selectedExpenseCutoffValue]);

  const allExpenses = useMemo(
    () => visibleGroups.flatMap((group) => group.budgets.flatMap((budget) => budget.expenses)),
    [visibleGroups]
  );

  function getManagedUserDraft(user: DashboardManagedUser): ManagedUserDraft {
    return userDrafts[user.id] ?? {
      role: user.role,
      workingGroupId: user.workingGroupId ?? ""
    };
  }

  function updateManagedUserDraft(user: DashboardManagedUser, patch: Partial<ManagedUserDraft>) {
    setUserDrafts((current) => ({
      ...current,
      [user.id]: {
        ...getManagedUserDraft(user),
        ...patch
      }
    }));
  }

  function resetManagedUserDraft(user: DashboardManagedUser) {
    setUserDrafts((current) => ({
      ...current,
      [user.id]: {
        role: user.role,
        workingGroupId: user.workingGroupId ?? ""
      }
    }));
  }

  function getCutoffDraft(cutoff: { id: string; name: string; date: string | null }): CutoffDraft {
    return cutoffDrafts[cutoff.id] ?? {
      name: cutoff.name,
      date: cutoff.date ? toDateInputValue(cutoff.date) : ""
    };
  }

  function updateCutoffDraft(cutoff: { id: string; name: string; date: string | null }, patch: Partial<CutoffDraft>) {
    setCutoffDrafts((current) => ({
      ...current,
      [cutoff.id]: {
        ...getCutoffDraft(cutoff),
        ...patch
      }
    }));
  }

  function getDonationDraft(donation: DashboardDonation): DonationDraft {
    return donationDrafts[donation.id] ?? {
      title: donation.title,
      description: donation.description ?? "",
      amount: donation.amount.toFixed(2),
      donatedAt: toDateInputValue(donation.donatedAt),
      target: donation.expenseId ? "EXPENSE" : "GENERAL",
      workingGroupId: donation.workingGroupId ?? visibleGroups[0]?.id ?? "",
      expenseId: donation.expenseId ?? ""
    };
  }

  function updateDonationDraft(donation: DashboardDonation, patch: Partial<DonationDraft>) {
    setDonationDrafts((current) => ({
      ...current,
      [donation.id]: {
        ...getDonationDraft(donation),
        ...patch
      }
    }));
  }
  const totals = useMemo(() => {
    return visibleGroups.reduce(
      (summary, group) => {
        const approved = group.budgets.reduce(
          (groupSum, budget) =>
            groupSum +
            budget.expenses.reduce(
              (sum, expense) => sum + (expense.approvalStatus === "APPROVED" ? expense.netPeriodAmount : 0),
              0
            ),
          0
        );
        const pending = group.budgets.reduce(
          (groupSum, budget) =>
            groupSum +
            budget.expenses.reduce(
              (sum, expense) => sum + (expense.approvalStatus === "PENDING" ? expense.netPeriodAmount : 0),
              0
            ),
          0
        );
        const subscriptions = group.budgets.reduce(
          (groupSum, budget) =>
            groupSum +
            budget.expenses.reduce(
              (sum, expense) => sum + (expense.recurrence === "MONTHLY" ? expense.amount : 0),
              0
            ),
          0
        );
        const subscriptionCount = group.budgets.reduce(
          (groupSum, budget) =>
            groupSum + budget.expenses.filter((expense) => expense.recurrence === "MONTHLY").length,
          0
        );

        summary.budget += group.totalBudget;
        summary.approved += approved;
        summary.pending += pending;
        summary.subscriptions += subscriptions;
        summary.subscriptionCount += subscriptionCount;

        return summary;
      },
      { budget: 0, approved: 0, pending: 0, subscriptions: 0, subscriptionCount: 0 }
    );
  }, [visibleGroups]);

  const generalDonationTotal = useMemo(
    () => donations.reduce((sum, donation) => sum + (donation.expenseId ? 0 : donation.amount), 0),
    [donations]
  );
  const assignedDonationTotal = useMemo(
    () => donations.reduce((sum, donation) => sum + (donation.expenseId ? donation.amount : 0), 0),
    [donations]
  );
  const plannedBubble = useMemo(() => {
    const pendingOpen = allExpenses.reduce(
      (sum, expense) =>
        sum + (expense.approvalStatus === "PENDING" && !expense.paidAt ? expense.netPeriodAmount : 0),
      0
    );
    const approvedOpen = allExpenses.reduce(
      (sum, expense) =>
        sum + (expense.approvalStatus === "APPROVED" && !expense.paidAt ? expense.netPeriodAmount : 0),
      0
    );

    return {
      pendingOpen,
      approvedOpen,
      amount: pendingOpen + approvedOpen
    };
  }, [allExpenses]);
  const plannedUntilCutoffs = useMemo(
    () => {
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      return currentCutoffs
        .filter((cutoff) => {
          if (!cutoff.date) {
            return false;
          }

          const cutoffDate = new Date(cutoff.date);
          cutoffDate.setHours(0, 0, 0, 0);

          return cutoffDate >= today;
        })
        .map((cutoff) => ({
          cutoff,
          amount: allExpenses.reduce(
            (sum, expense) =>
              sum +
              (expense.cutoffPhase === "PRE" && !expense.paidAt && expense.cutoffId === cutoff.id
                ? expense.netPeriodAmount
                : 0),
            0
          )
        }));
    },
    [allExpenses, currentCutoffs]
  );
  const paidTotal = useMemo(
    () => allExpenses.reduce((sum, expense) => sum + (expense.paidAt ? expense.netPeriodAmount : 0), 0),
    [allExpenses]
  );

  async function runAction<T>(
    task: () => Promise<T>,
    successMessage: string | ((result: T) => string)
  ) {
    setBusy(true);
    setMessage(null);

    try {
      const result = await task();
      setMessage({
        type: "success",
        text: typeof successMessage === "function" ? successMessage(result) : successMessage
      });
      startTransition(() => {
        router.refresh();
      });
    } catch (error) {
      const text = error instanceof Error ? error.message : "Unerwarteter Fehler.";
      setMessage({ type: "error", text });
    } finally {
      setBusy(false);
    }
  }

  async function handleCreateExpense(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!expenseForm.agId) {
      setMessage({ type: "error", text: "Bitte zuerst eine bearbeitbare AG ausw\u00e4hlen." });
      return;
    }

    if (!expenseForm.budgetId) {
      setMessage({ type: "error", text: "Bitte zuerst ein Budget für diese AG anlegen oder auswählen." });
      return;
    }

    if (expenseForm.recurrence === "MONTHLY" && !expenseForm.recurrenceStartAt) {
      setMessage({ type: "error", text: "Bitte ein Startdatum für das monatliche Abo angeben." });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch("/api/expenses", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            title: expenseForm.title,
            description: expenseForm.description,
            amount: expenseForm.amount,
            agId: expenseForm.agId,
            budgetId: expenseForm.budgetId,
            recurrence: expenseForm.recurrence,
            recurrenceStartAt: expenseForm.recurrence === "MONTHLY" ? expenseForm.recurrenceStartAt : "",
            cutoffId: expenseForm.cutoffId,
            cutoffPhase: expenseForm.cutoffPhase
          })
        })
      );

      const resetGroup = defaultEditableGroup?.id ?? "";
      const resetBudget = defaultEditableGroup?.budgets[0]?.id ?? "";

      setExpenseForm({
        title: "",
        description: "",
        amount: "",
        agId: resetGroup,
        budgetId: resetBudget,
        recurrence: "NONE",
        recurrenceStartAt: toDateInputValue(currentPeriod?.startsAt ?? new Date().toISOString()),
        cutoffId: currentPeriod?.cutoffs[0]?.id ?? "",
        cutoffPhase: "PRE"
      });
    }, "Ausgabe wurde gespeichert.");
  }

  async function handleUpsertBudget(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!budgetForm.workingGroupId) {
      setMessage({
        type: "error",
        text: "Bitte zuerst eine AG auswählen oder neu anlegen."
      });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch("/api/budgets", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            ...budgetForm,
            periodId: currentPeriodId
          })
        })
      );
    }, "Budget wurde gespeichert.");
  }

  async function handleCreateWorkingGroup(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    await runAction(
      async () => {
        const result = (await parseResponse(
          await fetch("/api/working-groups", {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify(workingGroupForm)
          })
        )) as { workingGroup?: { id: string; name: string } };

        setWorkingGroupForm({ name: "" });

        if (result.workingGroup?.id) {
          setBudgetForm((current) => ({
            ...current,
            workingGroupId: result.workingGroup?.id ?? current.workingGroupId
          }));
        }

        return result;
      },
      (result) => `AG ${result.workingGroup?.name ?? "wurde"} wurde angelegt.`
    );
  }

  async function handleApprove(expenseId: string, approvalType: "CHAIR_A" | "CHAIR_B" | "FINANCE") {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/expenses/${expenseId}/approve`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({ approvalType })
        })
      );
    }, `Freigabe ${approvalType} wurde erfasst.`);
  }

  async function handleMarkPaid(expenseId: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/expenses/${expenseId}/paid`, {
          method: "POST"
        })
      );
    }, "Ausgabe ist jetzt als bezahlt markiert.");
  }

  async function handleDocument(expenseId: string, proofUrl?: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/expenses/${expenseId}/documented`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({ proofUrl })
        })
      );
    }, "Ausgabe wurde dokumentiert.");
  }

  async function handleUploadProof(expenseId: string, file: File, invoiceDate: string) {
    setBusy(true);
    setMessage(null);

    try {
      const formData = new FormData();
      formData.set("file", file);
      formData.set("invoiceDate", invoiceDate);

      const result = (await parseResponse(
        await fetch(`/api/expenses/${expenseId}/proof`, {
          method: "POST",
          body: formData
        })
      )) as { document: { proofUrl: string } };

      setMessage({ type: "success", text: "Rechnung wurde abgegeben und die Ausgabe ist jetzt bezahlt." });
      startTransition(() => {
        router.refresh();
      });

      return result.document.proofUrl;
    } catch (error) {
      const text = error instanceof Error ? error.message : "Beleg konnte nicht hochgeladen werden.";
      setMessage({ type: "error", text });
      throw error;
    } finally {
      setBusy(false);
    }
  }

  async function handleSaveBudget(budgetId: string, name: string, totalBudget: string, colorCode: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/budgets/${budgetId}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            name,
            totalBudget,
            colorCode
          })
        })
      );
    }, "Budget wurde aktualisiert.");
  }

  async function handleSaveBudgetRelease(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!selectedBudgetReleaseBudget) {
      setMessage({ type: "error", text: "Bitte zuerst ein Budget ausw\u00e4hlen." });
      return;
    }

    const nextReleasedAmount = Number(budgetReleaseForm.releasedAmount.replace(",", "."));

    if (!Number.isFinite(nextReleasedAmount) || nextReleasedAmount < 0) {
      setMessage({ type: "error", text: "Bitte einen g\u00fcltigen zus\u00e4tzlichen \u00dcbergabebetrag eingeben." });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/budgets/${selectedBudgetReleaseBudget.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            name: selectedBudgetReleaseBudget.name,
            totalBudget: selectedBudgetReleaseBudget.totalBudget,
            releasedAmount: nextReleasedAmount,
            colorCode: selectedBudgetReleaseBudget.colorCode
          })
        })
      );

      setBudgetReleaseForm((current) => ({
        ...current,
        releasedAmount: nextReleasedAmount.toFixed(2)
      }));
    }, `Zus\u00e4tzliche Mittel\u00fcbergabe f\u00fcr ${selectedBudgetReleaseBudget.name} wurde gespeichert.`);
  }

  async function handleCreateDonation(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!currentPeriod) {
      setMessage({ type: "error", text: "Bitte zuerst einen aktuellen Zeitraum auswählen." });
      return;
    }

    if (donationForm.target === "EXPENSE" && !donationForm.expenseId) {
      setMessage({ type: "error", text: "Bitte die Ausgabe auswählen, der die Spende zugeordnet werden soll." });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch("/api/donations", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            title: donationForm.title,
            description: donationForm.description,
            amount: donationForm.amount,
            donatedAt: donationForm.donatedAt,
            periodId: currentPeriod.id,
            expenseId: donationForm.target === "EXPENSE" ? donationForm.expenseId : ""
          })
        })
      );

      setDonationForm({
        title: "",
        description: "",
        amount: "",
        donatedAt: toDateInputValue(new Date().toISOString()),
        target: "GENERAL",
        workingGroupId: visibleGroups[0]?.id ?? "",
        expenseId: ""
      });
    }, "Spende wurde erfasst.");
  }

  async function handleDeleteBudget(budgetId: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/budgets/${budgetId}`, {
          method: "DELETE"
        })
      );
    }, "Budget wurde gel\u00f6scht.");
  }

  async function handleDeleteExpense(expenseId: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/expenses/${expenseId}`, {
          method: "DELETE"
        })
      );
    }, "Ausgabe wurde gel\u00f6scht.");
  }

  async function handleUpdateExpense(expenseId: string, draft: ExpenseEditDraft) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/expenses/${expenseId}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(draft)
        })
      );
    }, "Ausgabe wurde bearbeitet.");
  }

  async function handleUpdateDonation(donationId: string, draft: DonationDraft) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/donations/${donationId}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            title: draft.title,
            description: draft.description,
            amount: draft.amount,
            donatedAt: draft.donatedAt,
            expenseId: draft.target === "EXPENSE" ? draft.expenseId : ""
          })
        })
      );
      setEditingDonationId(null);
    }, "Spende wurde bearbeitet.");
  }

  async function handleDeleteDonation(donationId: string, title: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/donations/${donationId}`, {
          method: "DELETE"
        })
      );
    }, `Spende ${title} wurde gelöscht.`);
  }

  async function handleCreateCutoff(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!selectedPeriodForManagement) {
      setMessage({ type: "error", text: "Bitte zuerst einen Zeitraum auswählen." });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/periods/${selectedPeriodForManagement.id}/cutoffs`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(cutoffForm)
        })
      );
      setCutoffForm({
        name: "Open Air",
        date: ""
      });
    }, "Stichtag wurde angelegt.");
  }

  async function handleUpdateCutoff(cutoffId: string, draft: CutoffDraft) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/period-cutoffs/${cutoffId}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(draft)
        })
      );
      setEditingCutoffId(null);
    }, "Stichtag wurde bearbeitet.");
  }

  async function handleDeleteCutoff(cutoffId: string, cutoffName: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/period-cutoffs/${cutoffId}`, {
          method: "DELETE"
        })
      );
    }, `Stichtag ${cutoffName} wurde gelöscht.`);
  }

  async function handleCreatePeriod(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    await runAction(async () => {
      await parseResponse(
        await fetch("/api/periods", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(periodForm)
        })
      );
    }, "Neuer Abrechnungszeitraum wurde angelegt.");
  }

  async function handleSavePeriod(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!selectedPeriodForManagement) {
      setMessage({ type: "error", text: "Bitte zuerst einen Zeitraum auswählen." });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/periods/${selectedPeriodForManagement.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            name: periodEditForm.name,
            startsAt: periodEditForm.startsAt,
            endsAt: periodEditForm.endsAt
          })
        })
      );
    }, `Zeitraum ${periodEditForm.name.trim() || selectedPeriodForManagement.name} wurde aktualisiert.`);
  }

  async function handleDeletePeriod(periodId: string, periodName: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/periods/${periodId}`, {
          method: "DELETE"
        })
      );
    }, `Zeitraum ${periodName} wurde gelöscht.`);
  }

  async function handleSetCurrentPeriod() {
    await runAction(async () => {
      await parseResponse(
        await fetch("/api/periods/current", {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            periodId: selectedCurrentPeriodId
          })
        })
      );
    }, "Aktuelle \u00dcbersicht wurde auf den gew\u00e4hlten Zeitraum umgestellt.");
  }

  async function handleSaveWorkingGroup(groupId: string, name: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/working-groups/${groupId}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({ name })
        })
      );
    }, "AG wurde aktualisiert.");
  }

  async function handleDeleteWorkingGroup(groupId: string, groupName: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/working-groups/${groupId}`, {
          method: "DELETE"
        })
      );

      const nextGroup = visibleGroups.find((group) => group.id !== groupId) ?? null;

      setBudgetForm((current) => ({
        ...current,
        workingGroupId: nextGroup?.id ?? ""
      }));

      setExpenseForm((current) => ({
        ...current,
        agId: current.agId === groupId ? nextGroup?.id ?? "" : current.agId,
        budgetId: current.agId === groupId ? nextGroup?.budgets[0]?.id ?? "" : current.budgetId
      }));
    }, `AG ${groupName} wurde gelöscht.`);
  }

  async function handleCreateUser(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    await runAction(
      async () => {
        const createdPassword = userForm.password;
        const createdUsername = userForm.username.trim().toLowerCase();

        const result = (await parseResponse(
          await fetch("/api/users", {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              username: createdUsername,
              password: userForm.password,
              role: userForm.role,
              workingGroupId: userForm.workingGroupId
            })
          })
        )) as { user?: DashboardManagedUser };

        if (result.user) {
          setManagedUsersState((current) =>
            sortManagedUsersList([...current.filter((user) => user.id !== result.user!.id), result.user!])
          );
        }

        setUserForm({
          username: "",
          password: "",
          role: "MEMBER",
          workingGroupId: ""
        });

        return {
          createdUsername,
          createdPassword
        };
      },
      ({ createdUsername, createdPassword }) =>
        `Nutzer wurde angelegt. Startpasswort für ${createdUsername}: ${createdPassword}`
    );
  }

  async function handleUpdateUser(user: DashboardManagedUser) {
    const draft = getManagedUserDraft(user);

    await runAction(async () => {
      const result = (await parseResponse(
        await fetch(`/api/users/${user.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            role: draft.role,
            workingGroupId: draft.workingGroupId
          })
        })
      )) as { user?: DashboardManagedUser };

      if (result.user) {
        setManagedUsersState((current) =>
          sortManagedUsersList([...current.filter((entry) => entry.id !== result.user!.id), result.user!])
        );
      }

      setEditingUserId(null);
    }, `Nutzer ${user.username} wurde aktualisiert.`);
  }

  async function handleSaveApprovalThreshold() {
    const nextThreshold = Number(approvalThresholdDraft.replace(",", "."));

    if (!Number.isFinite(nextThreshold) || nextThreshold < 0) {
      setMessage({
        type: "error",
        text: "Bitte eine gültige Freigabe-Schwelle eingeben."
      });
      return;
    }

    if (orgaSettingsDraft.requiredApprovalTypes.length === 0) {
      setMessage({ type: "error", text: "Bitte mindestens eine Freigaberolle auswählen." });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch("/api/settings", {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            approvalThreshold: nextThreshold,
            requiredApprovalTypes: orgaSettingsDraft.requiredApprovalTypes
          })
        })
      );
    }, `Freigabe-Schwelle wurde auf ${nextThreshold.toFixed(2)} EUR gesetzt.`);
  }

  async function handleSaveOrgaSettings() {
    if (orgaSettingsDraft.requiredApprovalTypes.length === 0) {
      setMessage({ type: "error", text: "Bitte mindestens eine Freigaberolle ausw\u00e4hlen." });
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch("/api/settings", {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(orgaSettingsDraft)
        })
      );

      setIsOrgaSettingsOpen(false);
    }, "Zust\u00e4ndigkeiten und Benachrichtigungen wurden gespeichert.");
  }

  async function handleRunDriveDiagnostics() {
    setBusy(true);
    setDriveDiagnosticResult(null);
    setMessage(null);

    try {
      const result = (await parseResponse(
        await fetch("/api/settings/drive-diagnostics", {
          method: "POST"
        })
      )) as DriveDiagnosticResult;

      setDriveDiagnosticResult(result);
      setMessage({ type: "success", text: "Drive-Verbindung erfolgreich getestet." });
    } catch (error) {
      const text = error instanceof Error ? error.message : "Drive-Verbindungstest fehlgeschlagen.";
      setDriveDiagnosticResult({ ok: false, error: text });
      setMessage({ type: "error", text });
    } finally {
      setBusy(false);
    }
  }

  async function handleEnablePushNotifications() {
    if (!("serviceWorker" in navigator) || !("PushManager" in window) || !("Notification" in window)) {
      setPushStatus("unsupported");
      setMessage({ type: "error", text: "Dieser Browser unterstützt Web Push nicht." });
      return;
    }

    const publicKey = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY;
    if (!publicKey) {
      setMessage({ type: "error", text: "VAPID Public Key ist nicht konfiguriert." });
      return;
    }

    const permission = await Notification.requestPermission();
    if (permission !== "granted") {
      setPushStatus("blocked");
      setMessage({ type: "error", text: "Benachrichtigungen wurden nicht erlaubt." });
      return;
    }

    await runAction(async () => {
      const registration = await navigator.serviceWorker.ready;
      const existingSubscription = await registration.pushManager.getSubscription();
      const subscription =
        existingSubscription ??
        (await registration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: urlBase64ToUint8Array(publicKey)
        }));

      await parseResponse(
        await fetch("/api/push-subscriptions", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(subscription.toJSON())
        })
      );

      setPushStatus("enabled");
    }, "Web Push ist für dieses Gerät aktiviert.");
  }

  async function handleDeleteUser(userId: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/users/${userId}`, {
          method: "DELETE"
        })
      );

      setManagedUsersState((current) => current.filter((user) => user.id !== userId));
      setUserDrafts((current) => {
        const next = { ...current };
        delete next[userId];
        return next;
      });
      setPasswordDrafts((current) => {
        const next = { ...current };
        delete next[userId];
        return next;
      });
    }, "Nutzer wurde gel\u00f6scht.");
  }

  async function handleResetPassword(userId: string, userName: string) {
    const nextPassword = passwordDrafts[userId]?.trim() ?? "";

    if (nextPassword.length < 8) {
      setMessage({
        type: "error",
        text: "Bitte ein neues Passwort mit mindestens 8 Zeichen eingeben."
      });
      return;
    }

    await runAction(
      async () => {
        await parseResponse(
          await fetch(`/api/users/${userId}/password`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              password: nextPassword
            })
          })
        );

        setEditingPasswordUserId(null);

        return {
          userName,
          nextPassword
        };
      },
      ({ userName: changedUserName, nextPassword: changedPassword }) =>
        `Neues Passwort f\u00fcr ${changedUserName}: ${changedPassword}`
    );
  }

  async function handleImportBackup() {
    if (!backupFile) {
      setMessage({
        type: "error",
        text: "Bitte zuerst eine CSV-Datei auswählen."
      });
      return;
    }

    await runAction(
      async () => {
        const formData = new FormData();
        formData.set("file", backupFile);

        const result = await parseResponse(
          await fetch("/api/import/csv", {
            method: "POST",
            body: formData
          })
        );

        setBackupFile(null);
        return result as { importedRows?: number };
      },
      (result) =>
        `Backup wurde eingespielt.${typeof result.importedRows === "number" ? ` Importierte Zeilen: ${result.importedRows}.` : ""}`
    );
  }

  async function handleRestoreAuditLog(entryId: string, summary: string) {
    if (!window.confirm(`Diesen Zustand wirklich zurücksetzen?\n\n${summary}`)) {
      return;
    }

    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/audit-logs/${entryId}/restore`, {
          method: "POST"
        })
      );
    }, "Änderung wurde zurückgesetzt.");
  }

  function openPasswordReset(userId: string) {
    setEditingPasswordUserId(userId);
    setPasswordDrafts((current) => ({
      ...current,
      [userId]: current[userId] && current[userId].length >= 8 ? current[userId] : generatePassword()
    }));
  }

  function openUserEditor(user: DashboardManagedUser) {
    resetManagedUserDraft(user);
    setEditingUserId(user.id);
  }

  function renderApprovalPermissionSelector(
    value: ApprovalPermissionValue[],
    onToggle: (approvalType: ApprovalPermissionValue) => void,
    helperText: string,
    availableApprovalTypes: readonly ApprovalPermissionValue[]
  ) {
    return (
      <Stack spacing={1}>
        <Typography variant="body2" sx={{ fontWeight: 700 }}>
          Freigaberollen
        </Typography>
        <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
          {availableApprovalTypes.length > 0 ? (
            availableApprovalTypes.map((approvalType) => {
              const selected = value.includes(approvalType);

              return (
                <Button
                  key={approvalType}
                  type="button"
                  size="small"
                  variant={selected ? "contained" : "outlined"}
                  onClick={() => onToggle(approvalType)}
                >
                  {approvalLabel(approvalType)}
                </Button>
              );
            })
          ) : (
            <Typography variant="body2" color="text.secondary">
              Keine Freigaberollen verfügbar
            </Typography>
          )}
        </Stack>
        <Typography variant="body2" color="text.secondary">
          {helperText}
        </Typography>
      </Stack>
    );
  }
  const islandCardSx = {
    borderRadius: { xs: "24px", md: "30px" },
    border: `1px solid ${alpha(theme.palette.text.primary, isDark ? 0.12 : 0.08)}`,
    backgroundColor: alpha(theme.palette.background.paper, isDark ? 0.94 : 0.98),
    backgroundImage: "none",
    overflow: "hidden",
    boxShadow: isDark ? `0 20px 48px ${alpha("#02040A", 0.34)}` : `0 18px 44px ${alpha("#B86E2B", 0.08)}`
  };

  const nestedPanelSx = {
    p: 2,
    borderRadius: "20px",
    border: `1px solid ${alpha(theme.palette.text.primary, isDark ? 0.12 : 0.08)}`,
    backgroundColor: alpha(theme.palette.background.paper, isDark ? 0.9 : 0.96),
    backgroundImage: "none",
    overflow: "hidden"
  };

  const mobilePrimarySelectSx = {
    width: "100%",
    "& .MuiOutlinedInput-root": {
      minHeight: 64,
      borderRadius: "28px",
      backgroundColor: alpha(theme.palette.background.paper, isDark ? 0.72 : 0.96),
      "& fieldset": {
        borderColor: alpha(theme.palette.primary.main, isDark ? 0.54 : 0.38)
      },
      "&:hover fieldset": {
        borderColor: alpha(theme.palette.primary.main, 0.72)
      },
      "&.Mui-focused fieldset": {
        borderWidth: 2,
        borderColor: theme.palette.primary.main
      }
    },
    "& .MuiInputLabel-root": {
      color: theme.palette.text.secondary
    },
    "& .MuiInputBase-input": {
      fontSize: "1.08rem",
      fontWeight: 600
    }
  } as const;

  const periodManagementPanel = canManagePeriods ? (
    <Stack spacing={2}>
      <Box>
        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
          Zeitraum wechseln
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {"Nur Vorstand allgemein, AG Orga und AG Finanzen können die aktuelle Übersicht global umstellen."}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            md: "minmax(0, 1.45fr) minmax(168px, 0.85fr) minmax(220px, 0.95fr)"
          },
          gap: 1.2,
          alignItems: "stretch"
        }}
      >
        <TextField
          select
          label={"Aktuelle Übersicht"}
          value={selectedCurrentPeriodId}
          onChange={(event) => setSelectedCurrentPeriodId(event.target.value)}
          fullWidth
          InputLabelProps={{ shrink: true }}
          sx={{ minWidth: 0 }}
        >
          {accountingPeriods.map((period) => (
            <MenuItem key={period.id} value={period.id}>
              {period.name}
            </MenuItem>
          ))}
        </TextField>
        <Button
          variant="contained"
          disabled={busy || selectedCurrentPeriodId === currentPeriodId}
          onClick={handleSetCurrentPeriod}
          sx={{ minWidth: 0, minHeight: 56, px: 2 }}
        >
          {"Übersicht setzen"}
        </Button>
        <Button
          type="button"
          color="error"
          variant="outlined"
          startIcon={<DeleteOutlineRoundedIcon />}
          disabled={busy || !selectedPeriodForManagement || selectedPeriodForManagement.isCurrent}
          onClick={async () => {
            if (!selectedPeriodForManagement) {
              return;
            }

            if (!window.confirm(`Zeitraum "${selectedPeriodForManagement.name}" wirklich löschen?`)) {
              return;
            }

            await handleDeletePeriod(selectedPeriodForManagement.id, selectedPeriodForManagement.name);
          }}
          sx={{
            minWidth: 0,
            minHeight: 56,
            px: 2.5,
            whiteSpace: "normal"
          }}
        >
          {"Zeitraum löschen"}
        </Button>
      </Box>
      <Typography variant="body2" color="text.secondary">
        {selectedPeriodForManagement?.isCurrent
          ? "Der aktuell aktive Zeitraum kann nicht gelöscht werden."
          : "Leere, nicht aktive Zeiträume lassen sich hier wieder entfernen."}
      </Typography>

      <Box component="form" onSubmit={handleSavePeriod} sx={nestedPanelSx}>
        <Stack spacing={1.4}>
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            Ausgewählten Zeitraum bearbeiten
          </Typography>
          <TextField
            label="Zeitraum-Name"
            value={periodEditForm.name}
            onChange={(event) => setPeriodEditForm((current) => ({ ...current, name: event.target.value }))}
            required
            fullWidth
            disabled={!selectedPeriodForManagement}
          />
          <Stack direction={{ xs: "column", sm: "row" }} gap={1.2}>
            <TextField
              label="Von"
              type="date"
              value={periodEditForm.startsAt}
              onChange={(event) => setPeriodEditForm((current) => ({ ...current, startsAt: event.target.value }))}
              InputLabelProps={{ shrink: true }}
              required
              fullWidth
              disabled={!selectedPeriodForManagement}
            />
            <TextField
              label="Bis"
              type="date"
              value={periodEditForm.endsAt}
              onChange={(event) => setPeriodEditForm((current) => ({ ...current, endsAt: event.target.value }))}
              InputLabelProps={{ shrink: true }}
              required
              fullWidth
              disabled={!selectedPeriodForManagement}
            />
          </Stack>
          <Typography variant="body2" color="text.secondary">
            {"Abo-Berechnungen nutzen danach direkt den neuen Zeitraum."}
          </Typography>
          <Button
            type="submit"
            variant="outlined"
            startIcon={<EditRoundedIcon />}
            disabled={busy || !selectedPeriodForManagement || !periodEditDirty}
          >
            Zeitraum speichern
          </Button>
        </Stack>
      </Box>

      <Box component="form" onSubmit={handleCreatePeriod} sx={nestedPanelSx}>
        <Stack spacing={1.4}>
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            Neuen Zeitraum anlegen
          </Typography>
          <TextField
            label="Zeitraum-Name"
            value={periodForm.name}
            onChange={(event) => setPeriodForm((current) => ({ ...current, name: event.target.value }))}
            required
            fullWidth
          />
          <Stack direction={{ xs: "column", sm: "row" }} gap={1.2}>
            <TextField
              label="Von"
              type="date"
              value={periodForm.startsAt}
              onChange={(event) => setPeriodForm((current) => ({ ...current, startsAt: event.target.value }))}
              InputLabelProps={{ shrink: true }}
              required
              fullWidth
            />
            <TextField
              label="Bis"
              type="date"
              value={periodForm.endsAt}
              onChange={(event) => setPeriodForm((current) => ({ ...current, endsAt: event.target.value }))}
              InputLabelProps={{ shrink: true }}
              required
              fullWidth
            />
          </Stack>
          <TextField
            select
            label={"Budgets übernehmen"}
            value={periodForm.copyBudgetsFromPeriodId}
            onChange={(event) =>
              setPeriodForm((current) => ({
                ...current,
                copyBudgetsFromPeriodId: event.target.value
              }))
            }
            fullWidth
            helperText={"Optional kopiert die vorhandenen Budgettöpfe direkt in den neuen Zeitraum."}
          >
            <MenuItem value="">Ohne Budgetübernahme</MenuItem>
            {accountingPeriods.map((period) => (
              <MenuItem key={period.id} value={period.id}>
                {period.name}
              </MenuItem>
            ))}
          </TextField>
          <Button type="submit" variant="outlined" disabled={busy}>
            Zeitraum anlegen
          </Button>
        </Stack>
      </Box>
    </Stack>
  ) : null;

  const cutoffManagementPanel = canManagePeriods ? (
    <Stack spacing={1.6}>
      <Stack spacing={0.6}>
        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
          Stichtage
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Stichtage für Pre/Post-Auswertungen anlegen, bearbeiten und löschen.
        </Typography>
      </Stack>

      <Stack spacing={1.2}>
        {managementCutoffs.length > 0 ? (
          managementCutoffs.map((cutoff) => {
            const draft = getCutoffDraft(cutoff);
            const isEditing = editingCutoffId === cutoff.id;

            return (
              <Box key={cutoff.id} sx={nestedPanelSx}>
                {isEditing ? (
                  <Stack spacing={1.2}>
                    <TextField
                      label="Stichtag-Name"
                      value={draft.name}
                      onChange={(event) => updateCutoffDraft(cutoff, { name: event.target.value })}
                      required
                      fullWidth
                    />
                    <TextField
                      label="Datum"
                      type="date"
                      value={draft.date}
                      onChange={(event) => updateCutoffDraft(cutoff, { date: event.target.value })}
                      InputLabelProps={{ shrink: true }}
                      fullWidth
                    />
                    <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                      <Button
                        type="button"
                        variant="contained"
                        size="small"
                        disabled={busy || draft.name.trim().length === 0}
                        onClick={() => handleUpdateCutoff(cutoff.id, draft)}
                      >
                        Speichern
                      </Button>
                      <Button
                        type="button"
                        variant="text"
                        size="small"
                        disabled={busy}
                        onClick={() => setEditingCutoffId(null)}
                      >
                        Abbrechen
                      </Button>
                    </Stack>
                  </Stack>
                ) : (
                  <Stack direction={{ xs: "column", sm: "row" }} justifyContent="space-between" gap={1.2}>
                    <Box>
                      <Typography sx={{ fontWeight: 700 }}>{cutoff.name}</Typography>
                      <Typography variant="body2" color="text.secondary">
                        {cutoff.date ? dateFormatter.format(new Date(cutoff.date)) : "Kein Datum gesetzt"}
                      </Typography>
                    </Box>
                    <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                      <Button
                        type="button"
                        variant="outlined"
                        size="small"
                        startIcon={<EditRoundedIcon />}
                        disabled={busy}
                        onClick={() => {
                          setEditingCutoffId(cutoff.id);
                          setCutoffDrafts((current) => ({
                            ...current,
                            [cutoff.id]: getCutoffDraft(cutoff)
                          }));
                        }}
                      >
                        Bearbeiten
                      </Button>
                      <Button
                        type="button"
                        variant="outlined"
                        color="error"
                        size="small"
                        startIcon={<DeleteOutlineRoundedIcon />}
                        disabled={busy || managementCutoffs.length <= 1}
                        onClick={() => {
                          if (!window.confirm(`Stichtag "${cutoff.name}" wirklich löschen?`)) {
                            return;
                          }
                          handleDeleteCutoff(cutoff.id, cutoff.name);
                        }}
                      >
                        Löschen
                      </Button>
                    </Stack>
                  </Stack>
                )}
              </Box>
            );
          })
        ) : (
          <Typography variant="body2" color="text.secondary">
            Für diesen Zeitraum gibt es noch keine Stichtage.
          </Typography>
        )}
      </Stack>

      <Box component="form" onSubmit={handleCreateCutoff} sx={nestedPanelSx}>
        <Stack spacing={1.2}>
          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
            Neuen Stichtag anlegen
          </Typography>
          <TextField
            label="Stichtag-Name"
            value={cutoffForm.name}
            onChange={(event) => setCutoffForm((current) => ({ ...current, name: event.target.value }))}
            required
            fullWidth
            disabled={!selectedPeriodForManagement}
          />
          <TextField
            label="Datum"
            type="date"
            value={cutoffForm.date}
            onChange={(event) => setCutoffForm((current) => ({ ...current, date: event.target.value }))}
            InputLabelProps={{ shrink: true }}
            fullWidth
            disabled={!selectedPeriodForManagement}
          />
          <Button type="submit" variant="outlined" disabled={busy || !selectedPeriodForManagement}>
            Stichtag anlegen
          </Button>
        </Stack>
      </Box>
    </Stack>
  ) : null;
  const actionCards = (
    <Stack
      spacing={!isCompactLayout && (desktopSection === "users" || desktopSection === "budgetGroups") ? 0 : 3}
      sx={{
        width: "100%",
        ...(!isCompactLayout && (desktopSection === "users" || desktopSection === "budgetGroups")
          ? {
              display: "grid",
              gridTemplateColumns: {
                xl:
                  desktopSection === "users"
                    ? "minmax(360px, 430px) minmax(0, 1fr)"
                    : "minmax(320px, 380px) minmax(0, 1fr)"
              },
              alignItems: "start",
              gap: 3
            }
          : null)
      }}
    >
      {isCompactLayout ? (
        <TextField
          select
          label="Aktion auswählen"
          value={selectedMobileAction}
          onChange={(event) => setSelectedMobileAction(event.target.value as MobileAction)}
          fullWidth
          sx={mobilePrimarySelectSx}
        >
          {mobileActions.map((action) => (
            <MenuItem key={action.value} value={action.value}>
              {action.label}
            </MenuItem>
          ))}
        </TextField>
      ) : null}

      {(isCompactLayout ? selectedMobileAction === "expense" : desktopSection === "overview") ? (
        <Card sx={islandCardSx}>
        <CardContent sx={{ p: 3 }}>
          <Stack spacing={2.5}>
            <Box>
              <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                Neue Ausgabe
              </Typography>
            </Box>

            {viewer.role === "MEMBER" && !viewer.workingGroupId ? (
              <Alert severity="info">
                Du bist noch keiner AG zugeordnet. Du kannst dich anmelden, aber Ausgaben erst erfassen, wenn dir eine AG zugewiesen wurde.
              </Alert>
            ) : null}

            <Box component="form" onSubmit={handleCreateExpense}>
              <Stack spacing={2}>
                <TextField
                  label="Titel"
                  value={expenseForm.title}
                  onChange={(event) => setExpenseForm((current) => ({ ...current, title: event.target.value }))}
                  required
                  fullWidth
                />
                <TextField
                  label="Beschreibung"
                  value={expenseForm.description}
                  onChange={(event) =>
                    setExpenseForm((current) => ({ ...current, description: event.target.value }))
                  }
                  fullWidth
                  multiline
                  minRows={3}
                />
                <TextField
                  label="Betrag in EUR"
                  type="number"
                  inputProps={{ min: 0.01, step: 0.01 }}
                  value={expenseForm.amount}
                  onChange={(event) => setExpenseForm((current) => ({ ...current, amount: event.target.value }))}
                  required
                  fullWidth
                />
                <TextField
                  select
                  label="Wiederholung"
                  value={expenseForm.recurrence}
                  onChange={(event) =>
                    setExpenseForm((current) => ({
                      ...current,
                      recurrence: event.target.value as ExpenseFormState["recurrence"]
                    }))
                  }
                  fullWidth
                  helperText={"Monatliche Abos werden im Zeitraum automatisch Monat für Monat fortgeschrieben."}
                >
                  <MenuItem value="NONE">Einmalig</MenuItem>
                  <MenuItem value="MONTHLY">Monatliches Abo</MenuItem>
                </TextField>
                {expenseForm.recurrence === "MONTHLY" ? (
                  <TextField
                    label="Abo-Startdatum"
                    type="date"
                    value={expenseForm.recurrenceStartAt}
                    onChange={(event) =>
                      setExpenseForm((current) => ({ ...current, recurrenceStartAt: event.target.value }))
                    }
                    InputLabelProps={{ shrink: true }}
                    fullWidth
                    helperText={"Ab diesem Datum werden Monatsraten innerhalb des aktuellen Zeitraums automatisch berechnet."}
                  />
                ) : null}
                <TextField
                  select
                  label="Stichtag-Zuordnung"
                  value={selectedExpenseCutoffOption?.value ?? ""}
                  onChange={(event) => {
                    const next = parseCutoffSelectionValue(event.target.value);
                    setExpenseForm((current) => ({
                      ...current,
                      cutoffId: next.cutoffId,
                      cutoffPhase: next.cutoffPhase
                    }));
                  }}
                  required
                  fullWidth
                  disabled={expenseCutoffOptions.length === 0 || expenseForm.recurrence === "MONTHLY"}
                  helperText={
                    expenseForm.recurrence === "MONTHLY"
                      ? "Monatliche Abos werden anhand ihrer Fälligkeit automatisch den Stichtagen zugeordnet."
                      : undefined
                  }
                >
                  {expenseCutoffOptions.map((option) => (
                    <MenuItem key={option.value} value={option.value}>
                      {option.label}
                    </MenuItem>
                  ))}
                </TextField>
                <TextField
                  select
                  label="Arbeitsgruppe"
                  value={expenseForm.agId}
                  onChange={(event) => setExpenseForm((current) => ({ ...current, agId: event.target.value }))}
                  required
                  fullWidth
                  disabled={viewer.role === "MEMBER" || editableExpenseGroups.length === 0}
                  helperText={
                    viewer.role === "MEMBER"
                      ? "Du kannst nur in deiner eigenen AG buchen."
                      : "W\u00e4hle die AG, in der die Ausgabe erfasst werden soll."
                  }
                >
                  {editableExpenseGroups.map((group) => (
                    <MenuItem key={group.id} value={group.id}>
                      {group.name}
                    </MenuItem>
                  ))}
                </TextField>
                <TextField
                  select
                  label="Budget"
                  value={expenseForm.budgetId}
                  onChange={(event) => setExpenseForm((current) => ({ ...current, budgetId: event.target.value }))}
                  required
                  fullWidth
                  disabled={selectedBudgetOptions.length === 0}
                  helperText={
                    selectedBudgetOptions.length === 0
                      ? "In dieser AG gibt es noch kein Budget."
                      : "Bitte den passenden Budgettopf w\u00e4hlen."
                  }
                >
                  {selectedBudgetOptions.map((budget) => (
                    <MenuItem key={budget.id} value={budget.id}>
                      {budget.name}
                    </MenuItem>
                  ))}
                </TextField>
                <Button
                  type="submit"
                  variant="contained"
                  startIcon={<AddRoundedIcon />}
                  disabled={busy || selectedBudgetOptions.length === 0}
                >
                  Ausgabe speichern
                </Button>
              </Stack>
            </Box>
          </Stack>
        </CardContent>
        </Card>
      ) : null}

      {canManagePeriods && (isCompactLayout ? selectedMobileAction === "budgetRelease" : desktopSection === "overview") ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>
            <Stack spacing={2.5}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                  {"Bereits an AG übergeben"}
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ fontSize: "0.9rem" }}>
                  {"Zusatzbetrag ohne Einzelposten. Bezahlt z\u00e4hlt mit."}
                </Typography>
              </Box>

              <Box component="form" onSubmit={handleSaveBudgetRelease}>
                <Stack spacing={2}>
                  <TextField
                    select
                    label="Arbeitsgruppe"
                    value={budgetReleaseForm.workingGroupId}
                    onChange={(event) =>
                      setBudgetReleaseForm((current) => ({
                        ...current,
                        workingGroupId: event.target.value,
                        budgetId: ""
                      }))
                    }
                    required
                    fullWidth
                    disabled={visibleGroups.length === 0}
                    helperText={visibleGroups.length === 0 ? "Lege zuerst eine AG an." : "Wähle die AG mit dem betroffenen Budget."}
                  >
                    {visibleGroups.map((group) => (
                      <MenuItem key={group.id} value={group.id}>
                        {group.name}
                      </MenuItem>
                    ))}
                  </TextField>
                  <TextField
                    select
                    label="Budget"
                    value={budgetReleaseForm.budgetId}
                    onChange={(event) =>
                      setBudgetReleaseForm((current) => ({
                        ...current,
                        budgetId: event.target.value
                      }))
                    }
                    required
                    fullWidth
                    disabled={selectedBudgetReleaseOptions.length === 0}
                    helperText={
                      selectedBudgetReleaseOptions.length === 0
                        ? "In dieser AG gibt es noch kein Budget."
                        : "Die gestrichelte Linie im Budget zeigt die gesamte Mittelübergabe inklusive bezahlter Posten."
                    }
                  >
                    {selectedBudgetReleaseOptions.map((budget) => (
                      <MenuItem key={budget.id} value={budget.id}>
                        {budget.name}
                      </MenuItem>
                    ))}
                  </TextField>
                  <TextField
                    label="Zusätzlich bereits übergeben in EUR"
                    type="number"
                    inputProps={{ min: 0, step: 0.01, max: selectedBudgetReleaseBudget?.totalBudget ?? undefined }}
                    value={budgetReleaseForm.releasedAmount}
                    onChange={(event) =>
                      setBudgetReleaseForm((current) => ({
                        ...current,
                        releasedAmount: event.target.value
                      }))
                    }
                    required
                    fullWidth
                    disabled={!selectedBudgetReleaseBudget}
                    helperText={
                      selectedBudgetReleaseBudget
                        ? `Automatisch \u00fcber Bezahlt: ${currencyFormatter.format(selectedBudgetReleasePaidAmount)} | Zus\u00e4tzlich erfasst: ${currencyFormatter.format(selectedBudgetReleaseBudget.releasedAmount)}`
                        : "Wähle zuerst ein Budget aus."
                    }
                  />
                  <Button type="submit" variant="outlined" disabled={busy || !selectedBudgetReleaseBudget}>
                    Betrag speichern
                  </Button>
                </Stack>
              </Box>
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      {canManagePeriods && (isCompactLayout ? selectedMobileAction === "donation" : desktopSection === "overview") ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>
            <Stack spacing={2.5}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                  Spende erfassen
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ fontSize: "0.9rem" }}>
                  Allgemeine Spenden zählen global, zugeordnete Spenden entlasten direkt eine Ausgabe.
                </Typography>
              </Box>
              <Box component="form" onSubmit={handleCreateDonation}>
                <Stack spacing={2}>
                  <TextField
                    label="Titel"
                    value={donationForm.title}
                    onChange={(event) => setDonationForm((current) => ({ ...current, title: event.target.value }))}
                    required
                    fullWidth
                  />
                  <TextField
                    label="Beschreibung"
                    value={donationForm.description}
                    onChange={(event) => setDonationForm((current) => ({ ...current, description: event.target.value }))}
                    fullWidth
                    multiline
                    minRows={2}
                  />
                  <TextField
                    label="Betrag in EUR"
                    type="number"
                    inputProps={{ min: 0.01, step: 0.01 }}
                    value={donationForm.amount}
                    onChange={(event) => setDonationForm((current) => ({ ...current, amount: event.target.value }))}
                    required
                    fullWidth
                  />
                  <TextField
                    label="Spendendatum"
                    type="date"
                    value={donationForm.donatedAt}
                    onChange={(event) => setDonationForm((current) => ({ ...current, donatedAt: event.target.value }))}
                    InputLabelProps={{ shrink: true }}
                    required
                    fullWidth
                  />
                  <TextField
                    select
                    label="Zuordnung"
                    value={donationForm.target}
                    onChange={(event) =>
                      setDonationForm((current) => ({
                        ...current,
                        target: event.target.value as DonationFormState["target"],
                        expenseId: ""
                      }))
                    }
                    fullWidth
                  >
                    <MenuItem value="GENERAL">Allgemein</MenuItem>
                    <MenuItem value="EXPENSE">Ausgabe zugeordnet</MenuItem>
                  </TextField>
                  {donationForm.target === "EXPENSE" ? (
                    <>
                      <TextField
                        select
                        label="AG"
                        value={donationForm.workingGroupId}
                        onChange={(event) =>
                          setDonationForm((current) => ({
                            ...current,
                            workingGroupId: event.target.value,
                            expenseId: ""
                          }))
                        }
                        required
                        fullWidth
                        disabled={visibleGroups.length === 0}
                      >
                        {visibleGroups.map((group) => (
                          <MenuItem key={group.id} value={group.id}>
                            {group.name}
                          </MenuItem>
                        ))}
                      </TextField>
                      <TextField
                        select
                        label="Ausgabe"
                        value={donationForm.expenseId}
                        onChange={(event) => setDonationForm((current) => ({ ...current, expenseId: event.target.value }))}
                        required
                        fullWidth
                        disabled={selectedDonationGroupExpenses.length === 0}
                      >
                        {selectedDonationGroupExpenses.map((expense) => (
                          <MenuItem key={expense.id} value={expense.id}>
                            {expense.title} · Rest: {currencyFormatter.format(expense.netPeriodAmount)}
                          </MenuItem>
                        ))}
                      </TextField>
                    </>
                  ) : null}
                  <Button type="submit" variant="outlined" disabled={busy}>
                    Spende speichern
                  </Button>
                </Stack>
              </Box>
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      {canManageBudgets(viewer.role) && (isCompactLayout ? selectedMobileAction === "workingGroup" : desktopSection === "budgetGroups") ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>
            <Stack spacing={2.5}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                  AG anlegen
                </Typography>
                <Typography color="text.secondary">
                  {"Lege Arbeitsgruppen separat an. Bearbeiten oder löschen geht danach direkt in der Übersicht per Stift."}
                </Typography>
              </Box>
              <Box component="form" onSubmit={handleCreateWorkingGroup}>
                <Stack spacing={2}>
                  <TextField
                    label="AG-Name"
                    value={workingGroupForm.name}
                    onChange={(event) =>
                      setWorkingGroupForm((current) => ({ ...current, name: event.target.value }))
                    }
                    required
                    fullWidth
                  />
                  <Button type="submit" variant="outlined" disabled={busy}>
                    AG speichern
                  </Button>
                </Stack>
              </Box>
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      {canManageBudgets(viewer.role) && (isCompactLayout ? selectedMobileAction === "budget" : desktopSection === "budgetGroups") ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>
            <Stack spacing={2.5}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                  Budget anlegen
                </Typography>
                <Typography color="text.secondary">
                  {"Neue Budgett\u00f6pfe werden immer f\u00fcr den aktuell ausgew\u00e4hlten Abrechnungszeitraum angelegt."}
                </Typography>
              </Box>
              {currentPeriod ? (
                <Chip
                  label={`Zeitraum: ${currentPeriod.name}`}
                  variant="outlined"
                  sx={{ width: "fit-content" }}
                />
              ) : null}
              <Box component="form" onSubmit={handleUpsertBudget}>
                <Stack spacing={2}>
                  <TextField
                    select
                    label="Arbeitsgruppe"
                    value={budgetForm.workingGroupId}
                    onChange={(event) =>
                      setBudgetForm((current) => ({ ...current, workingGroupId: event.target.value }))
                    }
                    required
                    fullWidth
                    disabled={visibleGroups.length === 0}
                    helperText={
                      visibleGroups.length === 0
                        ? "Lege zuerst eine AG an."
                        : "Das Budget wird in der ausgewaehlten AG angelegt."
                    }
                  >
                    {visibleGroups.map((group) => (
                      <MenuItem key={group.id} value={group.id}>
                        {group.name}
                      </MenuItem>
                    ))}
                  </TextField>
                  <Typography variant="body2" color="text.secondary">
                    {selectedBudgetWorkingGroup
                      ? `Neue Budgettöpfe landen in ${selectedBudgetWorkingGroup.name}.`
                      : "Wähle zuerst eine bestehende AG aus."}
                  </Typography>
                  <TextField
                    label="Budget-Name"
                    value={budgetForm.name}
                    onChange={(event) => setBudgetForm((current) => ({ ...current, name: event.target.value }))}
                    required
                  />
                  <TextField
                    label="Budgetbetrag"
                    type="number"
                    inputProps={{ min: 0, step: 0.01 }}
                    value={budgetForm.totalBudget}
                    onChange={(event) =>
                      setBudgetForm((current) => ({ ...current, totalBudget: event.target.value }))
                    }
                    required
                  />
                  <ColorPickerField
                    label="Budgetfarbe"
                    value={budgetForm.colorCode}
                    onChange={(value) => setBudgetForm((current) => ({ ...current, colorCode: value }))}
                  />
                  <Stack direction={{ xs: "column", sm: "row" }} gap={1} useFlexGap flexWrap="wrap">
                    <Button type="submit" variant="outlined" disabled={busy || visibleGroups.length === 0}>
                      Budget speichern
                    </Button>
                  </Stack>
                </Stack>
              </Box>
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      {canManagePeriods && isCompactLayout && selectedMobileAction === "periods" ? (
        <Stack spacing={3}>
          <Card sx={islandCardSx}>
            <CardContent sx={{ p: 3 }}>{periodManagementPanel}</CardContent>
          </Card>
          <Card sx={islandCardSx}>
            <CardContent sx={{ p: 3 }}>{cutoffManagementPanel}</CardContent>
          </Card>
        </Stack>
      ) : null}

      {canManageAccounts && (isCompactLayout ? selectedMobileAction === "backup" : desktopSection === "logs") ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>
            <Stack spacing={2}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                  CSV-Backup
                </Typography>
                <Typography color="text.secondary">
                  {"Exportiert Nutzer, AGs, Budgets, Ausgaben, Freigaben und den Änderungsverlauf in eine gemeinsame CSV-Datei."}
                </Typography>
              </Box>
              <Stack direction={{ xs: "column", sm: "row" }} gap={1.2} useFlexGap flexWrap="wrap">
                <Button
                  component="a"
                  href="/api/export/csv"
                  variant="outlined"
                  startIcon={<DownloadRoundedIcon />}
                >
                  CSV herunterladen
                </Button>
                <Button component="label" variant="outlined" disabled={busy}>
                  CSV auswählen
                  <input
                    hidden
                    type="file"
                    accept=".csv,text/csv"
                    onChange={(event) => setBackupFile(event.target.files?.[0] ?? null)}
                  />
                </Button>
                <Button
                  type="button"
                  variant="contained"
                  disabled={busy || !backupFile}
                  onClick={handleImportBackup}
                >
                  Backup einspielen
                </Button>
              </Stack>
              <Typography variant="body2" color="text.secondary">
                {backupFile
                  ? `Ausgewählt: ${backupFile.name}`
                  : "Der Import ersetzt den aktuellen Datenbestand vollständig durch den Stand aus der CSV."}
              </Typography>
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      {canManageAccounts &&
      (isCompactLayout
        ? selectedMobileAction === "userCreate" || selectedMobileAction === "approvalThreshold"
        : desktopSection === "users") ? (
        <Stack spacing={3}>
          {!isCompactLayout || selectedMobileAction === "userCreate" ? (
          <Card sx={islandCardSx}>
            <CardContent sx={{ p: 3 }}>
              <Stack spacing={2.5}>
                <Box>
                  <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                    Nutzer anlegen
                  </Typography>
                  <Typography color="text.secondary">
                    {"Konten werden direkt mit Login-Name und Passwort angelegt. Der Login-Name ist gleichzeitig der Anzeigename."}
                  </Typography>
                </Box>
                <Box component="form" onSubmit={handleCreateUser}>
                  <Stack spacing={2}>
                    <TextField
                      label="Login-Name"
                      helperText={"Damit melden sich Nutzer später an und so werden sie auch angezeigt."}
                      value={userForm.username}
                      onChange={(event) => setUserForm((current) => ({ ...current, username: event.target.value }))}
                      required
                    />
                    <Stack direction={{ xs: "column", sm: "row" }} gap={1}>
                      <TextField
                        label="Startpasswort"
                        value={userForm.password}
                        onChange={(event) =>
                          setUserForm((current) => ({ ...current, password: event.target.value }))
                        }
                        required
                        fullWidth
                        helperText={"Dieses Passwort wird nach dem Anlegen oben als Bestätigung angezeigt."}
                      />
                      <Button
                        type="button"
                        variant="outlined"
                        onClick={() =>
                          setUserForm((current) => ({
                            ...current,
                            password: generatePassword()
                          }))
                        }
                        sx={{ minWidth: { sm: 148 } }}
                      >
                        Generieren
                      </Button>
                    </Stack>
                    <TextField
                      select
                      label="Rolle"
                      value={userForm.role}
                      onChange={(event) => {
                        const nextRole = event.target.value as UserFormState["role"];
                        setUserForm((current) => ({
                          ...current,
                          role: nextRole
                        }));
                      }}
                      required
                    >
                      <MenuItem value="BOARD">Vorstand allgemein</MenuItem>
                      <MenuItem value="ORGA">AG Orga</MenuItem>
                      <MenuItem value="FINANCE">AG Finanzen</MenuItem>
                      <MenuItem value="MEMBER">Mitglied</MenuItem>
                    </TextField>
                    <TextField
                      select
                      label="AG-Zuordnung"
                      value={userForm.workingGroupId}
                      onChange={(event) =>
                        setUserForm((current) => ({ ...current, workingGroupId: event.target.value }))
                      }
                      fullWidth
                      disabled={visibleGroups.length === 0}
	                      helperText={
	                        visibleGroups.length === 0
	                          ? "Lege zuerst eine AG an."
	                          : userForm.role === "MEMBER"
	                            ? "Optional: Mitglieder ohne AG können sich einloggen, aber noch keine Ausgaben erfassen."
	                            : "Optional: Verwaltungsrollen können einer AG zugeordnet werden."
	                      }
	                    >
	                      <MenuItem value="">Ohne AG</MenuItem>
                      {visibleGroups.map((group) => (
                        <MenuItem key={group.id} value={group.id}>
                          {group.name}
                        </MenuItem>
                      ))}
                    </TextField>
                    <Typography variant="body2" color="text.secondary">
                      {getAvailableApprovalRoles(userForm.role).length > 0
                        ? `Freigabe automatisch: ${getAvailableApprovalRoles(userForm.role).map(approvalLabel).join(", ")}`
                        : "Diese Rolle kann keine Ausgaben freigeben."}
                    </Typography>
                    <Button type="submit" variant="outlined" disabled={busy}>
                      Nutzer speichern
                    </Button>
                  </Stack>
                </Box>
              </Stack>
            </CardContent>
          </Card>
          ) : null}

          {!isCompactLayout || selectedMobileAction === "approvalThreshold" ? (
          <Card sx={islandCardSx}>
            <CardContent sx={{ p: 3 }}>
              <Stack spacing={2}>
                <Box>
                  <Typography variant="h3" sx={{ fontSize: "1.2rem" }}>
                    Freigabe-Schwelle
                  </Typography>
                  <Typography color="text.secondary">
                    {"Ausgaben unter diesem Betrag werden automatisch freigegeben."}
                  </Typography>
                </Box>
                <TextField
                  label="Schwelle in EUR"
                  type="number"
                  inputProps={{ min: 0, step: 0.01 }}
                  value={approvalThresholdDraft}
                  onChange={(event) => setApprovalThresholdDraft(event.target.value)}
                  helperText={`Aktuell: ${approvalThreshold.toFixed(2)} EUR`}
                  fullWidth
                />
                {renderApprovalPermissionSelector(
                  orgaSettingsDraft.requiredApprovalTypes,
                  (approvalType) =>
                    setOrgaSettingsDraft((current) => ({
                      ...current,
                      requiredApprovalTypes: toggleApprovalPermission(current.requiredApprovalTypes, approvalType)
                    })),
                  "Diese Rollen müssen schwellenpflichtige Ausgaben bestätigen. Mitglieder können nicht freigeben.",
                  APPROVAL_FLOW
                )}
                <Button type="button" variant="outlined" disabled={busy} onClick={handleSaveApprovalThreshold}>
                  Schwelle und Freigaberollen speichern
                </Button>
              </Stack>
            </CardContent>
          </Card>
          ) : null}
        </Stack>
      ) : null}
      {canManageAccounts && (isCompactLayout ? selectedMobileAction === "users" : desktopSection === "users") ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>
            <Stack spacing={2}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                  Nutzer verwalten
                </Typography>
                <Typography color="text.secondary">
                  {"Bestehende Passwörter bleiben sicher gehasht. Hier kannst du Rolle, AG-Zuordnung und Passwörter pflegen."}
                </Typography>
              </Box>
              <Stack spacing={1.4}>
                {managedUsersState.map((user) => {
                  const canDelete = user.id !== viewer.id && user.createdExpensesCount === 0 && user.approvalsCount === 0;
                  const isResetOpen = editingPasswordUserId === user.id;
                  const isEditingUser = editingUserId === user.id;
                  const draft = getManagedUserDraft(user);

                  return (
                    <Box key={user.id} sx={nestedPanelSx}>
                      <Stack spacing={1.4}>
                        <Stack
                          direction={{ xs: "column", sm: "row" }}
                          justifyContent="space-between"
                          gap={1.5}
                          alignItems={{ xs: "stretch", sm: "flex-start" }}
                        >
                          <Box sx={{ minWidth: 0, flex: 1 }}>
                            <Typography sx={{ fontWeight: 700, overflowWrap: "anywhere" }}>{user.username}</Typography>
                            <Typography color="text.secondary" sx={{ overflowWrap: "anywhere" }}>
                              {roleLabel(user.role)}
                            </Typography>
                          </Box>
                          <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                            <Button
                              size="small"
                              variant={isEditingUser ? "contained" : "outlined"}
                              startIcon={<EditRoundedIcon />}
                              disabled={busy}
                              onClick={() => {
                                if (isEditingUser) {
                                  setEditingUserId(null);
                                  return;
                                }

                                openUserEditor(user);
                              }}
                            >
                              Bearbeiten
                            </Button>
                            <Button
                              size="small"
                              variant={isResetOpen ? "contained" : "outlined"}
                              startIcon={<KeyRoundedIcon />}
                              disabled={busy}
                              onClick={() => {
                                if (isResetOpen) {
                                  setEditingPasswordUserId(null);
                                  return;
                                }

                                openPasswordReset(user.id);
                              }}
                            >
                              Passwort setzen
                            </Button>
                            <Button
                              size="small"
                              color="error"
                              variant="outlined"
                              startIcon={<DeleteOutlineRoundedIcon />}
                              disabled={busy || !canDelete}
                              onClick={async () => {
                                if (!window.confirm(`Nutzer "${user.username}" wirklich löschen?`)) {
                                  return;
                                }

                                await handleDeleteUser(user.id);
                              }}
                            >
                              {"Löschen"}
                            </Button>
                          </Stack>
                        </Stack>
                        <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                          <Chip label={user.workingGroupName ?? "Ohne AG"} size="small" variant="outlined" />
                          <Chip label={`Ausgaben: ${user.createdExpensesCount}`} size="small" variant="outlined" />
                          <Chip label={`Freigaben: ${user.approvalsCount}`} size="small" variant="outlined" />
                          {user.approvalPermissions.length > 0 ? (
                            user.approvalPermissions.map((approvalType) => (
                              <Chip key={approvalType} label={approvalLabel(approvalType)} size="small" color="primary" variant="outlined" />
                            ))
                          ) : (
                            <Chip label="Keine Freigaberolle" size="small" variant="outlined" />
                          )}
                        </Stack>

                        {isEditingUser ? (
                          <Box
                            sx={{
                              ...nestedPanelSx,
                              p: 1.5,
                              borderColor: alpha(theme.palette.primary.main, 0.18),
                              background: alpha(theme.palette.primary.main, isDark ? 0.14 : 0.06),
                              backgroundImage: "none"
                            }}
                          >
                            <Stack spacing={1.4}>
                              <TextField
                                select
                                label="Rolle"
                                value={draft.role}
                                onChange={(event) => {
                                  const nextRole = event.target.value as ManagedUserDraft["role"];
                                  updateManagedUserDraft(user, {
                                    role: nextRole
                                  });
                                }}
                                fullWidth
                              >
                                <MenuItem value="BOARD">Vorstand allgemein</MenuItem>
                                <MenuItem value="ORGA">AG Orga</MenuItem>
                                <MenuItem value="FINANCE">AG Finanzen</MenuItem>
                                <MenuItem value="MEMBER">Mitglied</MenuItem>
                              </TextField>
                              <TextField
                                select
                                label="AG-Zuordnung"
                                value={draft.workingGroupId}
                                onChange={(event) => updateManagedUserDraft(user, { workingGroupId: event.target.value })}
                                fullWidth
                                disabled={visibleGroups.length === 0}
	                                helperText={
	                                  visibleGroups.length === 0
	                                    ? "Lege zuerst eine AG an."
	                                    : draft.role === "MEMBER"
	                                      ? "Optional: Mitglieder ohne AG können sich einloggen, aber noch keine Ausgaben erfassen."
	                                      : "Optional: Verwaltungsrollen können einer AG zugeordnet werden."
	                                }
	                              >
	                                <MenuItem value="">Ohne AG</MenuItem>
                                {visibleGroups.map((group) => (
                                  <MenuItem key={group.id} value={group.id}>
                                    {group.name}
                                  </MenuItem>
                                ))}
                              </TextField>
                              <Typography variant="body2" color="text.secondary">
                                {getAvailableApprovalRoles(draft.role).length > 0
                                  ? `Freigabe automatisch: ${getAvailableApprovalRoles(draft.role).map(approvalLabel).join(", ")}`
                                  : "Diese Rolle kann keine Ausgaben freigeben."}
                              </Typography>
                              <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                                <Button type="button" variant="contained" disabled={busy} onClick={() => handleUpdateUser(user)}>
                                  Nutzer speichern
                                </Button>
                                <Button
                                  type="button"
                                  variant="text"
                                  disabled={busy}
                                  onClick={() => {
                                    resetManagedUserDraft(user);
                                    setEditingUserId(null);
                                  }}
                                >
                                  Abbrechen
                                </Button>
                              </Stack>
                            </Stack>
                          </Box>
                        ) : null}

                        {isResetOpen ? (
                          <Box
                            sx={{
                              ...nestedPanelSx,
                              p: 1.5,
                              borderColor: alpha(theme.palette.primary.main, 0.18),
                              background: alpha(theme.palette.primary.main, isDark ? 0.14 : 0.06),
                              backgroundImage: "none"
                            }}
                          >
                            <Stack spacing={1.2}>
                              <TextField
                                label="Neues Passwort"
                                value={passwordDrafts[user.id] ?? ""}
                                onChange={(event) =>
                                  setPasswordDrafts((current) => ({
                                    ...current,
                                    [user.id]: event.target.value
                                  }))
                                }
                                fullWidth
                                helperText={
                                  "Nur neu gesetzte Passwörter sind sichtbar. Das alte Passwort bleibt absichtlich verborgen."
                                }
                              />
                              <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                                <Button
                                  type="button"
                                  variant="outlined"
                                  disabled={busy}
                                  onClick={() =>
                                    setPasswordDrafts((current) => ({
                                      ...current,
                                      [user.id]: generatePassword()
                                    }))
                                  }
                                >
                                  Generieren
                                </Button>
                                <Button
                                  type="button"
                                  variant="contained"
                                  disabled={busy}
                                  onClick={() => handleResetPassword(user.id, user.username)}
                                >
                                  Passwort speichern
                                </Button>
                                <Button
                                  type="button"
                                  variant="text"
                                  disabled={busy}
                                  onClick={() => setEditingPasswordUserId(null)}
                                >
                                  Abbrechen
                                </Button>
                              </Stack>
                            </Stack>
                          </Box>
                        ) : null}
                      </Stack>
                    </Box>
                  );
                })}
              </Stack>
            </Stack>
          </CardContent>
        </Card>
      ) : null}
      {canManageAccounts && (isCompactLayout ? selectedMobileAction === "logs" : desktopSection === "logs") ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>
            <Stack spacing={2}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                  {"\u00c4nderungsverlauf"}
                </Typography>
                <Typography color="text.secondary">
                  {"Zeigt die letzten \u00c4nderungen an Nutzern, Ausgaben, Budgets, AGs und Zeitr\u00e4umen."}
                </Typography>
              </Box>
              {auditLogs.length > 0 ? (
                <Stack spacing={1.2}>
                  {auditLogs.map((entry) => (
                    <Box key={entry.id} sx={nestedPanelSx}>
                      <Stack spacing={1}>
                        <Stack
                          direction={{ xs: "column", sm: "row" }}
                          justifyContent="space-between"
                          gap={1}
                          alignItems={{ xs: "flex-start", sm: "center" }}
                        >
                          <Typography sx={{ fontWeight: 700, overflowWrap: "anywhere" }}>{entry.summary}</Typography>
                          <Chip
                            label={dateTimeFormatter.format(new Date(entry.createdAt))}
                            size="small"
                            variant="outlined"
                          />
                        </Stack>
                        <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                          <Chip label={entry.entityType} size="small" variant="outlined" />
                          {entry.entityLabel ? <Chip label={entry.entityLabel} size="small" variant="outlined" /> : null}
                          <Chip label={entry.action} size="small" variant="outlined" />
                        </Stack>
                        <Typography variant="body2" color="text.secondary" sx={{ overflowWrap: "anywhere" }}>
                          {entry.actor
                            ? `${entry.actor.username} - ${roleLabel(entry.actor.role)}`
                            : "Systemeintrag"}
                        </Typography>
                        {entry.canRestore ? (
                          <Button
                            type="button"
                            variant="outlined"
                            size="small"
                            disabled={busy}
                            onClick={() => handleRestoreAuditLog(entry.id, entry.summary)}
                            sx={{ alignSelf: "flex-start" }}
                          >
                            Zustand zurücksetzen
                          </Button>
                        ) : null}
                      </Stack>
                    </Box>
                  ))}
                </Stack>
              ) : (
                <Typography color="text.secondary">{"Noch keine \u00c4nderungen protokolliert."}</Typography>
              )}
            </Stack>
          </CardContent>
        </Card>
      ) : null}
    </Stack>
  );

  const periodOverviewCard = isCompactLayout ? null : showDesktopSectionTabs ? (
    <Card sx={islandCardSx}>
      <CardContent sx={{ p: { xs: 1.25, md: 1.5 } }}>
        <Tabs
          value={desktopSection}
          onChange={(_, nextValue: DesktopSection) => setDesktopSection(nextValue)}
          variant="fullWidth"
          sx={{
            minHeight: 0,
            ".MuiTabs-indicator": {
              display: "none"
            },
            ".MuiTab-root": {
              minHeight: 48,
              px: 1.5,
              py: 1,
              m: 0.35,
              borderRadius: "16px",
              textTransform: "none",
              fontWeight: 700,
              border: `1px solid ${alpha(theme.palette.text.primary, isDark ? 0.12 : 0.1)}`,
              color: theme.palette.text.secondary,
              backgroundColor: alpha(theme.palette.background.paper, isDark ? 0.42 : 0.9)
            },
            ".Mui-selected": {
              color: theme.palette.primary.main,
              borderColor: alpha(theme.palette.primary.main, 0.35),
              backgroundColor: alpha(theme.palette.primary.main, isDark ? 0.22 : 0.12)
            }
          }}
        >
          {desktopSections.map((section) => (
            <Tab key={section.value} value={section.value} label={section.label} />
          ))}
        </Tabs>
      </CardContent>
    </Card>
  ) : null;

  const isMobileGeneralDonationsSelected = isCompactLayout && selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID;
  const selectedMobileGroup =
    isMobileGeneralDonationsSelected ? null : visibleGroups.find((group) => group.id === selectedMobileGroupId) ?? visibleGroups[0] ?? null;
  const overviewGroups = isCompactLayout ? (selectedMobileGroup ? [selectedMobileGroup] : []) : visibleGroups;
  const generalDonations = donations.filter((donation) => !donation.expenseId);

  function renderDonationEditor(donation: DashboardDonation) {
    const draft = getDonationDraft(donation);
    const draftGroup = visibleGroups.find((group) => group.id === draft.workingGroupId) ?? visibleGroups[0] ?? null;
    const draftExpenses = draftGroup?.budgets.flatMap((budget) => budget.expenses) ?? [];

    if (editingDonationId !== donation.id) {
      return (
        <Stack spacing={0.8}>
          <Stack direction="row" justifyContent="space-between" gap={1}>
            <Box sx={{ minWidth: 0 }}>
              <Typography variant="subtitle2" sx={{ fontWeight: 800, overflowWrap: "break-word" }}>
                {donation.title}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {currencyFormatter.format(donation.amount)}
                {donation.expenseTitle ? ` · ${donation.expenseTitle}` : ""}
              </Typography>
            </Box>
            <Stack direction="row" gap={0.5}>
              <IconButton size="small" disabled={busy} onClick={() => setEditingDonationId(donation.id)}>
                <EditRoundedIcon fontSize="small" />
              </IconButton>
              <IconButton
                size="small"
                color="error"
                disabled={busy}
                onClick={async () => {
                  if (!window.confirm(`Spende "${donation.title}" wirklich löschen?`)) {
                    return;
                  }

                  await handleDeleteDonation(donation.id, donation.title);
                }}
              >
                <DeleteOutlineRoundedIcon fontSize="small" />
              </IconButton>
            </Stack>
          </Stack>
        </Stack>
      );
    }

    return (
      <Stack spacing={1}>
        <TextField
          label="Titel"
          size="small"
          value={draft.title}
          onChange={(event) => updateDonationDraft(donation, { title: event.target.value })}
          fullWidth
        />
        <TextField
          label="Betrag in EUR"
          type="number"
          size="small"
          inputProps={{ min: 0.01, step: 0.01 }}
          value={draft.amount}
          onChange={(event) => updateDonationDraft(donation, { amount: event.target.value })}
          fullWidth
        />
        <TextField
          label="Spendendatum"
          type="date"
          size="small"
          value={draft.donatedAt}
          onChange={(event) => updateDonationDraft(donation, { donatedAt: event.target.value })}
          InputLabelProps={{ shrink: true }}
          fullWidth
        />
        <TextField
          select
          label="Zuordnung"
          size="small"
          value={draft.target}
          onChange={(event) =>
            updateDonationDraft(donation, {
              target: event.target.value as DonationDraft["target"],
              expenseId: ""
            })
          }
          fullWidth
        >
          <MenuItem value="GENERAL">Allgemein</MenuItem>
          <MenuItem value="EXPENSE">Ausgabe zugeordnet</MenuItem>
        </TextField>
        {draft.target === "EXPENSE" ? (
          <>
            <TextField
              select
              label="AG"
              size="small"
              value={draft.workingGroupId}
              onChange={(event) =>
                updateDonationDraft(donation, {
                  workingGroupId: event.target.value,
                  expenseId: ""
                })
              }
              fullWidth
            >
              {visibleGroups.map((group) => (
                <MenuItem key={group.id} value={group.id}>
                  {group.name}
                </MenuItem>
              ))}
            </TextField>
            <TextField
              select
              label="Ausgabe"
              size="small"
              value={draft.expenseId}
              onChange={(event) => updateDonationDraft(donation, { expenseId: event.target.value })}
              fullWidth
              disabled={draftExpenses.length === 0}
            >
              {draftExpenses.map((expense) => (
                <MenuItem key={expense.id} value={expense.id}>
                  {expense.title}
                </MenuItem>
              ))}
            </TextField>
          </>
        ) : null}
        <Stack direction="row" gap={1}>
          <Button size="small" variant="contained" disabled={busy} onClick={() => handleUpdateDonation(donation.id, draft)}>
            Speichern
          </Button>
          <Button size="small" variant="text" disabled={busy} onClick={() => setEditingDonationId(null)}>
            Abbrechen
          </Button>
        </Stack>
      </Stack>
    );
  }

  const generalDonationsColumn = (
    <Card sx={{ ...islandCardSx, width: { xs: "100%", lg: 286 }, flex: "0 0 auto" }}>
      <CardContent sx={{ p: 2.2 }}>
        <Stack spacing={1.4}>
          <Box>
            <Typography variant="h3" sx={{ fontSize: "1.2rem" }}>
              Spenden
            </Typography>
            <Typography color="text.secondary">
              Allgemein: {currencyFormatter.format(generalDonationTotal)}
            </Typography>
          </Box>
          {generalDonations.length === 0 ? (
            <Box sx={{ p: 1.5, borderRadius: "14px", bgcolor: alpha("#F6C343", 0.12) }}>
              <Typography variant="body2" color="text.secondary">
                Noch keine allgemeinen Spenden.
              </Typography>
            </Box>
          ) : (
            generalDonations.map((donation) => (
              <Box key={donation.id} sx={{ p: 1.4, borderRadius: "14px", bgcolor: alpha("#F6C343", 0.16) }}>
                {renderDonationEditor(donation)}
              </Box>
            ))
          )}
        </Stack>
      </CardContent>
    </Card>
  );

  const overviewContent = (
    <Stack spacing={2.5}>
      {isCompactLayout ? (
        <TextField
          select
          label="AG auswählen"
          value={isMobileGeneralDonationsSelected ? GENERAL_DONATIONS_MOBILE_ID : selectedMobileGroup?.id ?? ""}
          onChange={(event) => {
            setSelectedMobileGroupId(event.target.value);
            setFocusedBudgetId(null);
          }}
          fullWidth
          sx={mobilePrimarySelectSx}
        >
          {visibleGroups.map((group) => (
            <MenuItem key={group.id} value={group.id}>
              {group.name}
            </MenuItem>
          ))}
          <MenuItem value={GENERAL_DONATIONS_MOBILE_ID}>Spenden</MenuItem>
        </TextField>
      ) : null}
      {isCompactLayout ? (
        <Box
          sx={{
            width: "100%",
            minWidth: 0,
            maxWidth: "100%",
            overflowX: "auto",
            overflowY: "hidden",
            pb: 2,
            scrollbarGutter: "stable both-edges",
            overscrollBehaviorX: "contain",
            touchAction: "pan-x pan-y"
          }}
        >
          <Stack direction="row" gap={2} sx={{ width: "100%", minWidth: "100%", alignItems: "stretch" }}>
            {overviewGroups.map((group) => (
              <Box key={group.id} sx={{ width: "100%", flex: "0 0 auto", scrollSnapAlign: "start" }}>
                <BudgetColumn
                  group={group}
                  workingGroups={visibleGroups}
                  cutoffs={currentCutoffs}
                  viewer={viewer}
                  busy={busy}
                  approvalThreshold={approvalThreshold}
                  requiredApprovalTypes={settings.requiredApprovalTypes}
                  focusBudgetId={focusedBudgetId}
                  onApprove={handleApprove}
                  onMarkPaid={handleMarkPaid}
                  onDocument={handleDocument}
                  onUploadProof={handleUploadProof}
                  onSaveWorkingGroup={handleSaveWorkingGroup}
                  onDeleteWorkingGroup={handleDeleteWorkingGroup}
                  onSaveBudget={handleSaveBudget}
                  onDeleteBudget={handleDeleteBudget}
                  onDeleteExpense={handleDeleteExpense}
                  onUpdateExpense={handleUpdateExpense}
                  onUpdateDonation={handleUpdateDonation}
                  onDeleteDonation={handleDeleteDonation}
                />
              </Box>
            ))}
            {isMobileGeneralDonationsSelected ? generalDonationsColumn : null}
          </Stack>
        </Box>
      ) : (
        <Box
          sx={{
            width: "100%",
            minWidth: 0,
            maxWidth: "100%",
            overflowX: "auto",
	            overflowY: "hidden",
	            pb: 2,
	            scrollbarGutter: "stable both-edges",
	            overscrollBehaviorX: "contain",
	            touchAction: "pan-x pan-y"
	          }}
        >
          <Stack
            direction="row"
            gap={2}
            sx={{
              width: "max-content",
              minWidth: "100%",
              alignItems: "stretch",
              pr: 0.5
            }}
          >
            {overviewGroups.map((group) => (
              <Box key={group.id} sx={{ flex: "0 0 auto", scrollSnapAlign: "start" }}>
                <BudgetColumn
                  group={group}
                  workingGroups={visibleGroups}
                  cutoffs={currentCutoffs}
                  viewer={viewer}
	                  busy={busy}
	                  approvalThreshold={approvalThreshold}
	                  requiredApprovalTypes={settings.requiredApprovalTypes}
	                  focusBudgetId={focusedBudgetId}
	                  onApprove={handleApprove}
                  onMarkPaid={handleMarkPaid}
                  onDocument={handleDocument}
                  onUploadProof={handleUploadProof}
                  onSaveWorkingGroup={handleSaveWorkingGroup}
                  onDeleteWorkingGroup={handleDeleteWorkingGroup}
                  onSaveBudget={handleSaveBudget}
                  onDeleteBudget={handleDeleteBudget}
                  onDeleteExpense={handleDeleteExpense}
                  onUpdateExpense={handleUpdateExpense}
                  onUpdateDonation={handleUpdateDonation}
                  onDeleteDonation={handleDeleteDonation}
                />
              </Box>
            ))}
            {generalDonationsColumn}
          </Stack>
        </Box>
      )}
    </Stack>
  );

  const financeRows = (() => {
    if (financeViewMode === "monthly") {
      const rows = new Map<string, { label: string; planned: number; approved: number; paid: number; donations: number }>();
      for (const expense of allExpenses) {
        const date = getExpenseFinanceDate(expense);
        const key = getFinanceMonthKey(date);
        const row = rows.get(key) ?? {
          label: getFinanceMonthLabel(date),
          planned: 0,
          approved: 0,
          paid: 0,
          donations: 0
        };
        if (expense.approvalStatus === "PENDING") row.planned += expense.netPeriodAmount;
        if (expense.approvalStatus === "APPROVED") row.approved += expense.netPeriodAmount;
        if (expense.paidAt) row.paid += expense.netPeriodAmount;
        rows.set(key, row);
      }
      for (const donation of donations) {
        const date = new Date(donation.donatedAt);
        const key = getFinanceMonthKey(date);
        const row = rows.get(key) ?? {
          label: getFinanceMonthLabel(date),
          planned: 0,
          approved: 0,
          paid: 0,
          donations: 0
        };
        row.donations += donation.amount;
        rows.set(key, row);
      }
      return [...rows.entries()]
        .sort(([left], [right]) => left.localeCompare(right))
        .filter(([key]) => selectedFinanceMonth === "ALL" || key === selectedFinanceMonth)
        .map(([, row]) => row);
    }

    if (financeViewMode === "cutoff") {
      const expenseById = new Map(allExpenses.map((expense) => [expense.id, expense]));
      const rows = expenseCutoffOptions.map((option) => {
        const expenses = allExpenses.filter(
          (expense) =>
            expense.recurrence !== "MONTHLY" &&
            expense.cutoffId === option.cutoffId &&
            expense.cutoffPhase === option.cutoffPhase
        );
        const monthlyOccurrences = allExpenses.flatMap((expense) =>
          expense.recurrence === "MONTHLY"
            ? expense.occurrences
                .filter((occurrence) => getGeneralDonationCutoffSelectionValue(currentCutoffs, occurrence.dueAt) === option.value)
                .map((occurrence) => ({
                  amount: occurrence.amount,
                  approvalStatus: expense.approvalStatus,
                  paidAt: expense.paidAt
                }))
            : []
        );
        const donationsForSection = donations.filter((donation) => {
          if (donation.expenseId) {
            const expense = expenseById.get(donation.expenseId);
            if (expense?.recurrence === "MONTHLY") {
              return getGeneralDonationCutoffSelectionValue(currentCutoffs, donation.donatedAt) === option.value;
            }

            return (
              expense?.cutoffId === option.cutoffId &&
              expense.cutoffPhase === option.cutoffPhase
            );
          }

          return getGeneralDonationCutoffSelectionValue(currentCutoffs, donation.donatedAt) === option.value;
        });

        return {
          label: option.label,
          planned: expenses.reduce(
            (sum, expense) => sum + (expense.approvalStatus === "PENDING" ? expense.netPeriodAmount : 0),
            0
          ) + monthlyOccurrences.reduce(
            (sum, occurrence) => sum + (occurrence.approvalStatus === "PENDING" ? occurrence.amount : 0),
            0
          ),
          approved: expenses.reduce(
            (sum, expense) => sum + (expense.approvalStatus === "APPROVED" ? expense.netPeriodAmount : 0),
            0
          ) + monthlyOccurrences.reduce(
            (sum, occurrence) => sum + (occurrence.approvalStatus === "APPROVED" ? occurrence.amount : 0),
            0
          ),
          paid: expenses.reduce((sum, expense) => sum + (expense.paidAt ? expense.netPeriodAmount : 0), 0) +
            monthlyOccurrences.reduce((sum, occurrence) => sum + (occurrence.paidAt ? occurrence.amount : 0), 0),
          donations: donationsForSection.reduce((sum, donation) => sum + donation.amount, 0)
        };
      });

      return rows.length > 0 ? rows : [];
    }

    return [
      {
        label: currentPeriod?.name ?? "Jahresübersicht",
        planned: totals.pending,
        approved: totals.approved,
        paid: paidTotal,
        donations: generalDonationTotal + assignedDonationTotal
      }
    ];
  })();
  const financeMonthOptions = (() => {
    const rows = new Map<string, string>();
    for (const expense of allExpenses) {
      const date = getExpenseFinanceDate(expense);
      const key = getFinanceMonthKey(date);
      rows.set(key, getFinanceMonthLabel(date));
    }
    for (const donation of donations) {
      const date = new Date(donation.donatedAt);
      const key = getFinanceMonthKey(date);
      rows.set(key, getFinanceMonthLabel(date));
    }
    return [...rows.entries()].sort(([left], [right]) => left.localeCompare(right));
  })();

  const financeOverviewContent = (
    <Stack spacing={2.5}>
      <Card sx={islandCardSx}>
        <CardContent sx={{ p: 3 }}>
          <Stack spacing={2}>
            <Stack direction={{ xs: "column", md: "row" }} gap={1.2}>
              <TextField
                select
                label="Ansicht auswählen"
                value={financeViewMode}
                onChange={(event) => setFinanceViewMode(event.target.value as FinanceViewMode)}
                fullWidth
              >
                <MenuItem value="monthly">Monatsübersichten</MenuItem>
                <MenuItem value="yearly">Jahresübersicht</MenuItem>
                <MenuItem value="cutoff">Jahresübersicht Pre/Post</MenuItem>
              </TextField>
              <TextField
                select
                label="Darstellung"
                value={financePresentation}
                onChange={(event) => setFinancePresentation(event.target.value as FinancePresentation)}
                fullWidth
              >
                <MenuItem value="charts">Grafisch</MenuItem>
                <MenuItem value="table">Tabellarisch</MenuItem>
              </TextField>
              {financeViewMode === "monthly" ? (
                <TextField
                  select
                  label="Monat"
                  value={selectedFinanceMonth}
                  onChange={(event) => setSelectedFinanceMonth(event.target.value)}
                  fullWidth
                >
                  <MenuItem value="ALL">Alle Monate</MenuItem>
                  {financeMonthOptions.map(([monthKey, monthLabel]) => (
                    <MenuItem key={monthKey} value={monthKey}>
                      {monthLabel}
                    </MenuItem>
                  ))}
                </TextField>
              ) : null}
            </Stack>
            <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
              <Chip label={`Budget: ${currencyFormatter.format(totals.budget)}`} />
              <Chip label={`Bezahlt: ${currencyFormatter.format(paidTotal)}`} color="info" />
              <Chip label={`Spenden: ${currencyFormatter.format(generalDonationTotal + assignedDonationTotal)}`} color="success" />
              <Chip label={`Rest: ${currencyFormatter.format(totals.budget - totals.approved - totals.pending + generalDonationTotal)}`} />
            </Stack>
          </Stack>
        </CardContent>
      </Card>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", lg: financePresentation === "charts" ? "repeat(3, minmax(0, 1fr))" : "1fr" },
          gap: 2
        }}
      >
        {financeRows.map((row) => {
          const maxValue = Math.max(row.planned, row.approved, row.paid, row.donations, 1);
          return (
            <Card key={row.label} sx={islandCardSx}>
              <CardContent sx={{ p: 2.5 }}>
                <Stack spacing={1.4}>
                  <Typography variant="h3" sx={{ fontSize: "1.15rem" }}>
                    {row.label}
                  </Typography>
                  {(["planned", "approved", "paid", "donations"] as const).map((key) => {
                    const label =
                      key === "planned" ? "Geplant" : key === "approved" ? "Freigegeben" : key === "paid" ? "Bezahlt" : "Spenden";
                    const value = row[key];
                    return (
                      <Box key={key}>
                        <Stack direction="row" justifyContent="space-between" gap={1}>
                          <Typography variant="body2">{label}</Typography>
                          <Typography variant="body2" sx={{ fontWeight: 700 }}>
                            {currencyFormatter.format(value)}
                          </Typography>
                        </Stack>
                        {financePresentation === "charts" ? (
                          <Box sx={{ height: 8, borderRadius: 999, bgcolor: alpha(theme.palette.text.primary, 0.1), overflow: "hidden" }}>
                            <Box
                              sx={{
                                width: `${Math.min((value / maxValue) * 100, 100)}%`,
                                height: "100%",
                                bgcolor: key === "donations" ? theme.palette.success.main : key === "paid" ? theme.palette.info.main : theme.palette.primary.main
                              }}
                            />
                          </Box>
                        ) : null}
                      </Box>
                    );
                  })}
                </Stack>
              </CardContent>
            </Card>
          );
        })}
      </Box>
    </Stack>
  );

  const desktopSectionContent =
    desktopSection === "overview" ? (
      <Stack
        direction={{ xs: "column", xl: "row" }}
        gap={3}
        alignItems="flex-start"
        sx={{ width: "100%", minWidth: 0, overflowX: "hidden" }}
      >
        <Box sx={{ width: { xs: "100%", xl: 380 }, flexShrink: 0 }}>{actionCards}</Box>
        <Box sx={{ flex: "1 1 0%", minWidth: 0, maxWidth: "100%", overflowX: "hidden" }}>{overviewContent}</Box>
      </Stack>
    ) : desktopSection === "finance" ? (
      financeOverviewContent
    ) : desktopSection === "periods" ? (
      <Stack direction={{ xs: "column", xl: "row" }} gap={3} alignItems="flex-start">
        {canManagePeriods ? (
          <Card sx={{ ...islandCardSx, width: { xs: "100%", xl: 560 }, flexShrink: 0 }}>
            <CardContent sx={{ p: 3 }}>{periodManagementPanel}</CardContent>
          </Card>
        ) : null}
        {canManagePeriods ? (
          <Card sx={{ ...islandCardSx, width: { xs: "100%", xl: 420 }, flexShrink: 0 }}>
            <CardContent sx={{ p: 3 }}>{cutoffManagementPanel}</CardContent>
          </Card>
        ) : null}
      </Stack>
    ) : (
      <Box sx={{ width: "100%" }}>{actionCards}</Box>
    );

  return (
    <Box sx={{ pb: 8 }}>
      <Box sx={{ px: 2, py: { xs: 3, md: 5 } }}>
        <Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
          <Card
            sx={{
              background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, isDark ? 0.78 : 0.96)} 0%, ${alpha(isDark ? "#080D19" : "#17203A", 0.96)} 72%)`,
              color: "white",
              overflow: "hidden"
            }}
          >
            <CardContent sx={{ p: { xs: 3, md: 4 }, position: "relative" }}>
              {viewer.role === "ORGA" ? (
                <IconButton
                  aria-label="Zuständigkeiten und Benachrichtigungen"
                  sx={{
                    position: "absolute",
                    top: { xs: 18, md: 24 },
                    right: { xs: 18, md: 24 },
                    width: 44,
                    height: 44,
                    border: `1px solid ${alpha("#FFFFFF", 0.28)}`,
                    color: "white",
                    bgcolor: alpha("#FFFFFF", 0.08),
                    "&:hover": {
                      bgcolor: alpha("#FFFFFF", 0.16)
                    }
                  }}
                  onClick={() => setIsOrgaSettingsOpen(true)}
                >
                  <SettingsRoundedIcon />
                </IconButton>
              ) : null}
              <Stack spacing={3}>
                <Stack
                  direction={{ xs: "column", md: "row" }}
                  justifyContent="space-between"
                  alignItems={{ xs: "flex-start", md: "center" }}
                  gap={2}
                >
                  <Box sx={{ maxWidth: 760, pr: viewer.role === "ORGA" ? { xs: 6, md: 0 } : 0 }}>
                    <Typography variant="overline" sx={{ color: alpha("#FFFFFF", 0.72), letterSpacing: "0.18em" }}>
                      Rave for Peace
                    </Typography>
                    <Typography variant="h1" sx={{ color: "inherit", mb: 1.25 }}>
                      {"RFP Finanz\u00fcbersicht"}
                    </Typography>
                    <Typography
                      variant="body1"
                      sx={{ color: alpha("#FFFFFF", 0.82), maxWidth: 760, fontSize: { xs: "1rem", md: "1.08rem" } }}
                    >
                      {`Aktuelle \u00dcbersicht: ${currentPeriod?.name ?? "Zeitraum fehlt"}.`}
                    </Typography>
                  </Box>
                  <Stack direction={{ xs: "column", sm: "row" }} gap={1.2} alignItems={{ sm: "center" }}>
	                    {viewer.approvalPermissions.length > 0 ? (
	                      <Button
                        type="button"
                        size="small"
                        variant={pushStatus === "enabled" ? "contained" : "outlined"}
                        startIcon={<NotificationsActiveRoundedIcon />}
                        disabled={busy || pushStatus === "unsupported"}
                        sx={{ borderColor: alpha("#FFFFFF", 0.28), color: "white" }}
                        onClick={handleEnablePushNotifications}
                      >
                        {pushStatus === "enabled" ? "Web Push aktiv" : "Freigabe-Push"}
	                      </Button>
	                    ) : null}
	                    <Chip
                      label={`${viewer.username} - ${roleLabel(viewer.role)}`}
                      sx={{ bgcolor: alpha("#FFFFFF", 0.14), color: "white", fontWeight: 700, maxWidth: "100%" }}
                    />
                    <Button
                      variant="outlined"
                      startIcon={<LogoutRoundedIcon />}
                      sx={{ borderColor: alpha("#FFFFFF", 0.28), color: "white" }}
                      onClick={() => signOut({ callbackUrl: "/login" })}
                    >
                      Abmelden
                    </Button>
                  </Stack>
                </Stack>

                <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
                  <Chip
                    icon={<VerifiedRoundedIcon />}
                    label={`Freigegeben: ${currencyFormatter.format(totals.approved)}`}
                    sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                  />
                  <Tooltip
                    arrow
                    title={
                      <Stack spacing={0.4}>
                        <Typography variant="caption" sx={{ fontWeight: 700 }}>
                          Berechnung Geplant
                        </Typography>
                        <Typography variant="caption">
                          {`Geplant offen: ${currencyFormatter.format(plannedBubble.pendingOpen)}`}
                        </Typography>
                        <Typography variant="caption">
                          {`Freigegeben offen: ${currencyFormatter.format(plannedBubble.approvedOpen)}`}
                        </Typography>
                        <Typography variant="caption" sx={{ fontWeight: 700 }}>
                          {`Ergebnis: ${currencyFormatter.format(plannedBubble.amount)}`}
                        </Typography>
                      </Stack>
                    }
                  >
                    <Chip
                      icon={<WalletRoundedIcon />}
                      label={`Geplant: ${currencyFormatter.format(plannedBubble.amount)}`}
                      sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                    />
                  </Tooltip>
                  <Chip
                    icon={<SavingsRoundedIcon />}
                    label={`Budgets sichtbar: ${currencyFormatter.format(totals.budget)}`}
                    sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                  />
                  {plannedUntilCutoffs.map(({ cutoff, amount }) => (
                    <Chip
                      key={cutoff.id}
                      label={`Geplant bis ${cutoff.name}: ${currencyFormatter.format(amount)}`}
                      sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                    />
                  ))}
                  <Chip
                    label={`Abos monatlich: ${currencyFormatter.format(totals.subscriptions)}`}
                    sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                  />
                  {currentPeriod ? (
                    <Chip
                      label={currentPeriod.name}
                      sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                    />
                  ) : null}
                  {currentPeriod ? (
                    <Chip
                      label={formatPeriodRange(currentPeriod.startsAt, currentPeriod.endsAt)}
                      sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                    />
                  ) : null}
                </Stack>
              </Stack>
            </CardContent>
          </Card>
        </Container>
	      </Box>

	        <Dialog open={isOrgaSettingsOpen} onClose={() => setIsOrgaSettingsOpen(false)} fullWidth maxWidth="sm">
	          <DialogTitle>Zuständigkeiten & Benachrichtigungen</DialogTitle>
	          <DialogContent>
	            <Stack spacing={2.5} sx={{ pt: 1 }}>
	            <TextField
	              select
	              label="Budgetfreigabe-Push"
	              value={orgaSettingsDraft.budgetReleaseNotifyTarget}
	              onChange={(event) =>
	                setOrgaSettingsDraft((current) => ({
	                  ...current,
	                  budgetReleaseNotifyTarget: event.target.value as OrgaSettingsDraft["budgetReleaseNotifyTarget"]
	                }))
	              }
	              fullWidth
	              helperText="Wer informiert wird, wenn ein Budget an eine AG übergeben wird."
	            >
	              <MenuItem value="ALL_GROUP_USERS">Alle Nutzer der AG</MenuItem>
	              <MenuItem value="GROUP_MEMBERS_ONLY">Nur Mitglieder</MenuItem>
	            </TextField>
	            <Box>
	              <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
	                Google Drive
	              </Typography>
	              <Typography variant="body2" color="text.secondary">
	                Prüft Service Account, Zielordner und Upload-Rechte mit einer temporären Testdatei.
	              </Typography>
	              <Button
	                type="button"
	                variant="outlined"
	                disabled={busy}
	                onClick={handleRunDriveDiagnostics}
	                sx={{ mt: 1.2 }}
	              >
	                Drive-Verbindung testen
	              </Button>
	              {driveDiagnosticResult ? (
	                <Alert
	                  severity={driveDiagnosticResult.ok ? "success" : "error"}
	                  sx={{ mt: 1.2, whiteSpace: "pre-line" }}
	                >
	                  {driveDiagnosticResult.ok
	                    ? [
	                        "Drive-Test erfolgreich.",
	                        driveDiagnosticResult.serviceAccountEmail
	                          ? `Service Account: ${driveDiagnosticResult.serviceAccountEmail}`
	                          : null,
	                        driveDiagnosticResult.folderId ? `Zielordner: ${driveDiagnosticResult.folderId}` : null,
	                        ...(driveDiagnosticResult.details ?? [])
	                      ].filter(Boolean).join("\n")
	                    : driveDiagnosticResult.error ?? "Drive-Verbindungstest fehlgeschlagen."}
	                </Alert>
	              ) : null}
	            </Box>
	          </Stack>
	        </DialogContent>
	        <DialogActions>
	          <Button onClick={() => setIsOrgaSettingsOpen(false)}>Abbrechen</Button>
	          <Button variant="contained" disabled={busy} onClick={handleSaveOrgaSettings}>
	            Einstellungen speichern
	          </Button>
	        </DialogActions>
	      </Dialog>

	      <Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
        <Stack spacing={3} px={2}>
          {message ? <Alert severity={message.type} sx={{ whiteSpace: "pre-line" }}>{message.text}</Alert> : null}
          {periodOverviewCard}

          {isCompactLayout ? (
            <Stack spacing={3}>
              <Card>
                <Tabs
                  value={mobileSection}
                  onChange={(_, nextValue: MobileSection) => setMobileSection(nextValue)}
                  variant="fullWidth"
                >
                  <Tab value="overview" label={"AG-\u00dcbersicht"} />
                  <Tab value="finance" label={"Finanz\u00fcbersicht"} />
                  <Tab value="actions" label="Aktionen" />
                </Tabs>
              </Card>
              {mobileSection === "overview" ? overviewContent : mobileSection === "finance" ? financeOverviewContent : actionCards}
            </Stack>
          ) : (
            <Box sx={{ width: "100%" }}>{desktopSectionContent}</Box>
          )}
        </Stack>
      </Container>
    </Box>
  );
}