﻿"use client";

import AddRoundedIcon from "@mui/icons-material/AddRounded";
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
import KeyRoundedIcon from "@mui/icons-material/KeyRounded";
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import SavingsRoundedIcon from "@mui/icons-material/SavingsRounded";
import VerifiedRoundedIcon from "@mui/icons-material/VerifiedRounded";
import WalletRoundedIcon from "@mui/icons-material/WalletRounded";
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Container,
  MenuItem,
  Stack,
  Tab,
  Tabs,
  TextField,
  Typography,
  useMediaQuery
} from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
import { signOut } from "next-auth/react";
import { useRouter } from "next/navigation";
import type { FormEvent } from "react";
import { startTransition, useEffect, useMemo, useState } from "react";

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

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

type ExpenseFormState = {
  title: string;
  description: string;
  amount: string;
  agId: string;
  budgetId: string;
  recurrence: "NONE" | "MONTHLY";
  proofUrl: string;
};

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

type WorkingGroupFormState = {
  name: string;
};

type UserFormState = {
  username: string;
  password: string;
  role: "ADMIN" | "FINANCE" | "MEMBER";
  workingGroupId: string;
  approvalPreference: "" | "CHAIR_A" | "CHAIR_B";
};

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

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

type MobileSection = "overview" | "actions";
type DesktopSection = "overview" | "budgetGroups" | "periods" | "users" | "logs";

const currencyFormatter = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR"
});

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

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

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 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) {
    throw new Error(payload?.error ?? "Die Anfrage konnte nicht verarbeitet werden.");
  }

  return payload;
}

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

  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 desktopSections = [
    { value: "overview" as const, label: "\u00dcbersicht" },
    ...(canManagePeriods ? [{ value: "budgetGroups" as const, label: "Budget / AGs" }] : []),
    ...(canManagePeriods ? [{ value: "periods" as const, label: "Zeitraum" }] : []),
    ...(canManageAccounts ? [{ value: "users" as const, label: "Nutzerverwaltung" }] : []),
    ...(canManageAccounts ? [{ value: "logs" as const, label: "Backup & Log" }] : [])
  ];
  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",
    proofUrl: ""
  });
  const [budgetForm, setBudgetForm] = useState<BudgetFormState>({
    workingGroupId: visibleGroups[0]?.id ?? "",
    name: "Hauptbudget",
    totalBudget: "1200",
    colorCode: "#FFB94A"
  });
  const [workingGroupForm, setWorkingGroupForm] = useState<WorkingGroupFormState>({
    name: ""
  });
  const [userForm, setUserForm] = useState<UserFormState>({
    username: "",
    password: "",
    role: "MEMBER",
    workingGroupId: visibleGroups[0]?.id ?? "",
    approvalPreference: ""
  });
  const [message, setMessage] = useState<DashboardMessage | null>(null);
  const [busy, setBusy] = useState(false);
  const [mobileSection, setMobileSection] = useState<MobileSection>("overview");
  const [desktopSection, setDesktopSection] = useState<DesktopSection>("overview");
  const [selectedCurrentPeriodId, setSelectedCurrentPeriodId] = useState(currentPeriodId);
  const [selectedMobileGroupId, setSelectedMobileGroupId] = useState(
    viewer.workingGroupId ?? visibleGroups[0]?.id ?? ""
  );
  const [backupFile, setBackupFile] = useState<File | null>(null);
  const [editingPasswordUserId, setEditingPasswordUserId] = useState<string | null>(null);
  const [passwordDrafts, setPasswordDrafts] = useState<Record<string, string>>({});
  const [periodForm, setPeriodForm] = useState<PeriodFormState>(getSuggestedPeriodDraft(currentPeriod));

  useEffect(() => {
    if (visibleGroups.length === 0) {
      setSelectedMobileGroupId("");
      return;
    }

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

  useEffect(() => {
    setSelectedCurrentPeriodId(currentPeriodId);
    setPeriodForm(getSuggestedPeriodDraft(currentPeriod));
  }, [currentPeriod, currentPeriodId]);

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

  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: visibleGroups[0]?.id ?? ""
      }));
    }
  }, [budgetForm.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(() => {
    if (userForm.role !== "MEMBER") {
      return;
    }

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

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

  const selectedExpenseGroup =
    editableExpenseGroups.find((group) => group.id === expenseForm.agId) ?? defaultEditableGroup;
  const selectedBudgetOptions = selectedExpenseGroup?.budgets ?? [];
  const mobileSelectedGroup = visibleGroups.find((group) => group.id === selectedMobileGroupId) ?? visibleGroups[0];
  const selectedBudgetWorkingGroup =
    visibleGroups.find((group) => group.id === budgetForm.workingGroupId) ?? null;
  const selectedPeriodForManagement =
    accountingPeriods.find((period) => period.id === selectedCurrentPeriodId) ?? currentPeriod ?? null;

  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.amount : 0),
              0
            ),
          0
        );
        const pending = group.budgets.reduce(
          (groupSum, budget) =>
            groupSum +
            budget.expenses.reduce(
              (sum, expense) => sum + (expense.approvalStatus === "PENDING" ? expense.amount : 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]);

  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\u00fcr diese AG anlegen oder ausw\u00e4hlen." });
      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,
            proofUrl: expenseForm.proofUrl
          })
        })
      );

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

      setExpenseForm({
        title: "",
        description: "",
        amount: "",
        agId: resetGroup,
        budgetId: resetBudget,
        recurrence: "NONE",
        proofUrl: ""
      });
    }, "Ausgabe wurde gespeichert.");
  }

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

    if (!budgetForm.workingGroupId) {
      setMessage({
        type: "error",
        text: "Bitte zuerst eine AG auswaehlen 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 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 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 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 handleDeletePeriod(periodId: string, periodName: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/periods/${periodId}`, {
          method: "DELETE"
        })
      );
    }, `Zeitraum ${periodName} wurde geloescht.`);
  }

  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 geloescht.`);
  }

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

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

        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.role === "MEMBER" ? userForm.workingGroupId : "",
              approvalPreference: userForm.role === "ADMIN" ? userForm.approvalPreference : ""
            })
          })
        );

        setUserForm({
          username: "",
          password: "",
          role: "MEMBER",
          workingGroupId: visibleGroups[0]?.id ?? "",
          approvalPreference: ""
        });

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

  async function handleDeleteUser(userId: string) {
    await runAction(async () => {
      await parseResponse(
        await fetch(`/api/users/${userId}`, {
          method: "DELETE"
        })
      );
    }, "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()
    }));
  }

  const islandCardSx = {
    borderRadius: { xs: "24px", md: "30px" },
    border: `1px solid ${alpha(theme.palette.text.primary, isDark ? 0.12 : 0.08)}`,
    background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, isDark ? 0.82 : 0.96)} 0%, ${alpha(theme.palette.text.primary, isDark ? 0.04 : 0.02)} 100%)`,
    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)}`,
    background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, isDark ? 0.78 : 0.9)} 0%, ${alpha(theme.palette.text.primary, isDark ? 0.05 : 0.02)} 100%)`,
    overflow: "hidden"
  };

  const periodManagementPanel = canManagePeriods ? (
    <Stack spacing={2}>
      <Box>
        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
          Zeitraum wechseln
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {"Nur Vorstand und Finanz-AG k\u00f6nnen die aktuelle \u00dcbersicht global umstellen."}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            sm: "minmax(0, 1fr) 148px 184px"
          },
          gap: 1.2,
          alignItems: "start"
        }}
      >
        <TextField
          select
          label={"Aktuelle \u00dcbersicht"}
          value={selectedCurrentPeriodId}
          onChange={(event) => setSelectedCurrentPeriodId(event.target.value)}
          fullWidth
          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,
            px: { sm: 1.75 }
          }}
        >
          {"\u00dcbersicht 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\u00f6schen?`)) {
              return;
            }

            await handleDeletePeriod(selectedPeriodForManagement.id, selectedPeriodForManagement.name);
          }}
          sx={{
            minWidth: 0,
            px: { sm: 2.25 },
            whiteSpace: "nowrap"
          }}
        >
          {"Zeitraum l\u00f6schen"}
        </Button>
      </Box>
      <Typography variant="body2" color="text.secondary">
        {selectedPeriodForManagement?.isCurrent
          ? "Der aktuell aktive Zeitraum kann nicht gel\u00f6scht werden."
          : "Leere, nicht aktive Zeitr\u00e4ume lassen sich hier wieder entfernen."}
      </Typography>

      <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 \u00fcbernehmen"}
            value={periodForm.copyBudgetsFromPeriodId}
            onChange={(event) =>
              setPeriodForm((current) => ({
                ...current,
                copyBudgetsFromPeriodId: event.target.value
              }))
            }
            fullWidth
                helperText={"Optional kopiert die vorhandenen Budgett\u00f6pfe direkt in den neuen Zeitraum."}
              >
                <MenuItem value="">{`Ohne Budget\u00fcbernahme`}</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 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 || desktopSection === "overview" ? (
        <Card sx={islandCardSx}>
        <CardContent sx={{ p: 3 }}>
          <Stack spacing={2.5}>
            <Box>
              <Typography variant="h3" sx={{ fontSize: "1.35rem" }}>
                Neue Ausgabe
              </Typography>
              <Typography color="text.secondary">
                {"Alle sehen alle AGs. AG-Mitglieder buchen aber nur in ihrer eigenen AG. Unter "}
                {AUTO_APPROVAL_THRESHOLD}
                {" EUR wird automatisch freigegeben."}
              </Typography>
            </Box>

            <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 erscheinen oben gesammelt im \u00dcberblick."}
                >
                  <MenuItem value="NONE">Einmalig</MenuItem>
                  <MenuItem value="MONTHLY">Monatliches Abo</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>
                <TextField
                  label="Beleg-URL (optional)"
                  value={expenseForm.proofUrl}
                  onChange={(event) => setExpenseForm((current) => ({ ...current, proofUrl: event.target.value }))}
                  fullWidth
                />
                <Button
                  type="submit"
                  variant="contained"
                  startIcon={<AddRoundedIcon />}
                  disabled={busy || selectedBudgetOptions.length === 0}
                >
                  Ausgabe speichern
                </Button>
              </Stack>
            </Box>
          </Stack>
        </CardContent>
        </Card>
      ) : null}

      {canManageBudgets(viewer.role) && (isCompactLayout || 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 loeschen geht danach direkt in der Uebersicht 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 || 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 Budgettoepfe landen in ${selectedBudgetWorkingGroup.name}.`
                      : "Waehle 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 ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>{periodManagementPanel}</CardContent>
        </Card>
      ) : null}

      {canManageAccounts && (isCompactLayout || 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 || desktopSection === "users") ? (
        <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\u00e4ter 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\u00e4tigung 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) =>
                      setUserForm((current) => ({
                        ...current,
                        role: event.target.value as UserFormState["role"],
                        approvalPreference: event.target.value === "ADMIN" ? current.approvalPreference : "",
                        workingGroupId: event.target.value === "MEMBER" ? current.workingGroupId : ""
                      }))
                    }
                    required
                  >
                    <MenuItem value="ADMIN">Vorstand</MenuItem>
                    <MenuItem value="FINANCE">Finanz-AG</MenuItem>
                    <MenuItem value="MEMBER">AG-Mitglied</MenuItem>
                  </TextField>

                  {userForm.role === "MEMBER" ? (
                    <TextField
                      select
                      label="Arbeitsgruppe"
                      value={userForm.workingGroupId}
                      onChange={(event) =>
                        setUserForm((current) => ({ ...current, workingGroupId: event.target.value }))
                      }
                      required
                    >
                      {visibleGroups.map((group) => (
                        <MenuItem key={group.id} value={group.id}>
                          {group.name}
                        </MenuItem>
                      ))}
                    </TextField>
                  ) : null}

                  {userForm.role === "ADMIN" ? (
                    <TextField
                      select
                      label={"Prim\u00e4re Freigaberolle"}
                      value={userForm.approvalPreference}
                      onChange={(event) =>
                        setUserForm((current) => ({
                          ...current,
                          approvalPreference: event.target.value as UserFormState["approvalPreference"]
                        }))
                      }
                    >
                      <MenuItem value="">Keine Voreinstellung</MenuItem>
                      <MenuItem value="CHAIR_A">Vorstand A</MenuItem>
                      <MenuItem value="CHAIR_B">Vorstand B</MenuItem>
                    </TextField>
                  ) : null}

                  <Button type="submit" variant="outlined" disabled={busy}>
                    Nutzer speichern
                  </Button>
                </Stack>
              </Box>
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      {canManageAccounts && (isCompactLayout || 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\u00f6rter bleiben sicher gehasht und sind nicht auslesbar. Hier kannst du neue setzen und direkt sehen."}
                </Typography>
              </Box>
              <Stack spacing={1.4}>
                {managedUsers.map((user) => {
                  const canDelete = user.id !== viewer.id && user.createdExpensesCount === 0 && user.approvalsCount === 0;
                  const isResetOpen = editingPasswordUserId === user.id;

                  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={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\u00f6schen?`)) {
                                  return;
                                }

                                await handleDeleteUser(user.id);
                              }}
                            >
                              {"L\u00f6schen"}
                            </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" />
                        </Stack>

                        {isResetOpen ? (
                          <Box
                            sx={{
                              ...nestedPanelSx,
                              p: 1.5,
                              borderColor: alpha(theme.palette.primary.main, 0.18),
                              backgroundColor: alpha(theme.palette.primary.main, isDark ? 0.14 : 0.06)
                            }}
                          >
                            <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\u00f6rter 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}

      {canManagePeriods && isCompactLayout ? (
        <Card sx={islandCardSx}>
          <CardContent sx={{ p: 3 }}>{periodManagementPanel}</CardContent>
        </Card>
      ) : null}

      {canManageAccounts && (isCompactLayout || 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 overviewContent = (
    <Stack spacing={2.5}>
      {isCompactLayout && visibleGroups.length > 1 ? (
        <Card>
          <CardContent sx={{ p: 2.5 }}>
            <Stack spacing={1.5}>
              <Box>
                <Typography variant="h3" sx={{ fontSize: "1.15rem" }}>
                  {"AG ausw\u00e4hlen"}
                </Typography>
                <Typography color="text.secondary">
                  {"Mobil zeigen wir jeweils eine AG auf einmal, damit die Budgetkarten sauber lesbar bleiben."}
                </Typography>
              </Box>
              <TextField
                select
                label="Sichtbare AG"
                value={selectedMobileGroupId}
                onChange={(event) => setSelectedMobileGroupId(event.target.value)}
                fullWidth
              >
                {visibleGroups.map((group) => (
                  <MenuItem key={group.id} value={group.id}>
                    {group.name}
                  </MenuItem>
                ))}
              </TextField>
            </Stack>
          </CardContent>
        </Card>
      ) : null}

      <Stack
        direction={isCompactLayout ? "column" : "row"}
        gap={2}
        sx={{
          overflowX: isCompactLayout ? "visible" : "auto",
          pb: isCompactLayout ? 0 : 2
        }}
      >
        {(isCompactLayout ? (mobileSelectedGroup ? [mobileSelectedGroup] : []) : visibleGroups).map((group) => (
          <BudgetColumn
            key={group.id}
            group={group}
            viewer={viewer}
            busy={busy}
            onApprove={handleApprove}
            onMarkPaid={handleMarkPaid}
            onDocument={handleDocument}
            onSaveWorkingGroup={handleSaveWorkingGroup}
            onDeleteWorkingGroup={handleDeleteWorkingGroup}
            onSaveBudget={handleSaveBudget}
            onDeleteBudget={handleDeleteBudget}
            onDeleteExpense={handleDeleteExpense}
          />
        ))}
      </Stack>
    </Stack>
  );

  const desktopSectionContent =
    desktopSection === "overview" ? (
      <Stack direction={{ xs: "column", xl: "row" }} gap={3} alignItems="flex-start">
        <Box sx={{ width: { xs: "100%", xl: 380 }, flexShrink: 0 }}>{actionCards}</Box>
        <Box sx={{ flex: 1, minWidth: 0 }}>{overviewContent}</Box>
      </Stack>
    ) : desktopSection === "periods" ? (
      <Stack direction={{ xs: "column", xl: "row" }} gap={3} alignItems="flex-start">
        {canManagePeriods ? (
          <Card sx={{ ...islandCardSx, width: { xs: "100%", xl: 430 }, flexShrink: 0 }}>
            <CardContent sx={{ p: 3 }}>{periodManagementPanel}</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={{ maxWidth: 1640 }}>
          <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 } }}>
              <Stack spacing={3}>
                <Stack
                  direction={{ xs: "column", md: "row" }}
                  justifyContent="space-between"
                  alignItems={{ xs: "flex-start", md: "center" }}
                  gap={2}
                >
                  <Box sx={{ maxWidth: 760 }}>
                    <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="h5" sx={{ color: alpha("#FFFFFF", 0.82), maxWidth: 760 }}>
                      {`Aktuelle \u00dcbersicht: ${currentPeriod?.name ?? "Zeitraum fehlt"}. Alle AGs sind sichtbar, Mitglieder bearbeiten nur ihre eigene AG.`}
                    </Typography>
                  </Box>
                  <Stack direction={{ xs: "column", sm: "row" }} gap={1.2} alignItems={{ sm: "center" }}>
                    <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" }}
                  />
                  <Chip
                    icon={<WalletRoundedIcon />}
                    label={`Geplant: ${currencyFormatter.format(totals.pending)}`}
                    sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                  />
                  <Chip
                    icon={<SavingsRoundedIcon />}
                    label={`Budgets sichtbar: ${currencyFormatter.format(totals.budget)}`}
                    sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                  />
                  <Chip
                    label={`Abos monatlich: ${currencyFormatter.format(totals.subscriptions)}`}
                    sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                  />
                  {isCompactLayout && currentPeriod ? (
                    <Chip
                      label={currentPeriod.name}
                      sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                    />
                  ) : null}
                  {isCompactLayout && currentPeriod ? (
                    <Chip
                      label={formatPeriodRange(currentPeriod.startsAt, currentPeriod.endsAt)}
                      sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
                    />
                  ) : null}
                </Stack>
              </Stack>
            </CardContent>
          </Card>
        </Container>
      </Box>

      <Container maxWidth={false} sx={{ maxWidth: 1640 }}>
        <Stack spacing={3} px={2}>
          {message ? <Alert severity={message.type}>{message.text}</Alert> : null}
          {periodOverviewCard}

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


