hellth-hub/apps/admin/app/(authed)/einstellungen/page.tsx

"use client";

import {
  BeakerIcon,
  BellIcon,
  ChevronRightIcon,
  ClockIcon,
  EyeIcon,
  EyeSlashIcon,
  FireIcon,
  MoonIcon,
  ScaleIcon,
  SunIcon,
} from "@heroicons/react/24/outline";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { DataPageLayout } from "@/app/_components/data-page-layout";
import { useTheme } from "@/app/_components/theme-provider";
import { authClient } from "@/lib/auth-client";
import { HellthGoals, loadHellthData } from "@/lib/hellth-data";
import { trpc } from "@/lib/trpc";

const PASSWORD_CHARS =
  "ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%&*";

const dietPreferenceOptions = [
  { id: "vegan", label: "Vegan" },
  { id: "vegetarian", label: "Vegetarisch" },
  { id: "meat", label: "Fleisch" },
  { id: "fish", label: "Fisch" },
] as const;

type DietPreference = (typeof dietPreferenceOptions)[number]["id"];

function todayKey() {
  return new Date().toISOString().slice(0, 10);
}

function generatePassword(length = 16) {
  const bytes = crypto.getRandomValues(new Uint8Array(length));
  return Array.from(bytes, (byte) => PASSWORD_CHARS[byte % PASSWORD_CHARS.length]!).join(
    "",
  );
}

async function toOptimizedAvatarDataUrl(file: File) {
  const bitmap = await createImageBitmap(file);
  const maxEdge = 320;
  const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
  const width = Math.max(1, Math.round(bitmap.width * scale));
  const height = Math.max(1, Math.round(bitmap.height * scale));

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("Canvas nicht verfügbar");

  ctx.drawImage(bitmap, 0, 0, width, height);
  bitmap.close();

  const dataUrl = canvas.toDataURL("image/webp", 0.82);
  if (!dataUrl.startsWith("data:image/")) {
    throw new Error("Profilbild konnte nicht verarbeitet werden.");
  }
  if (dataUrl.length > 120_000) {
    throw new Error("Profilbild ist nach Komprimierung noch zu groß.");
  }
  return dataUrl;
}

export default function EinstellungenPage() {
  const { isDark, toggleDark } = useTheme();
  const utils = trpc.useUtils();
  const profileQuery = trpc.users.myProfile.useQuery();
  const securityQuery = trpc.security.status.useQuery();
  const healthOverviewQuery = trpc.health.overview.useQuery({ date: todayKey() });
  const passkeysQuery = authClient.useListPasskeys();
  const userKey = profileQuery.data?.id ?? profileQuery.data?.email ?? null;

  const [statusMessage, setStatusMessage] = useState<string | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [healthGoals, setHealthGoals] = useState<HellthGoals | null>(null);
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [phone, setPhone] = useState("");
  const [mobile, setMobile] = useState("");
  const [street, setStreet] = useState("");
  const [postalCode, setPostalCode] = useState("");
  const [city, setCity] = useState("");
  const [image, setImage] = useState<string | null>(null);
  const [dietPreferences, setDietPreferences] = useState<DietPreference[]>(["vegan", "vegetarian", "meat", "fish"]);
  const [mealsPerDay, setMealsPerDay] = useState("3");
  const [cooksPerDay, setCooksPerDay] = useState("1");
  const [preferredMealPrepDays, setPreferredMealPrepDays] = useState("0");
  const [meatFishFrequency, setMeatFishFrequency] = useState<"none" | "once_per_day" | "flexible">("flexible");

  const isPlatformAdmin = profileQuery.data?.role === "admin";
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmNewPassword, setConfirmNewPassword] = useState("");
  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [newPasskeyName, setNewPasskeyName] = useState("");

  useEffect(() => {
    if (profileQuery.data) {
      setFirstName(profileQuery.data.firstName ?? profileQuery.data.name ?? "");
      setLastName(profileQuery.data.lastName ?? profileQuery.data.name ?? "");
      setPhone(profileQuery.data.phone ?? "");
      setMobile(profileQuery.data.mobile ?? "");
      setStreet(profileQuery.data.street ?? "");
      setPostalCode(profileQuery.data.postalCode ?? "");
      setCity(profileQuery.data.city ?? "");
      setImage(profileQuery.data.image ?? null);
    }
  }, [profileQuery.data]);

  useEffect(() => {
    if (!userKey) return;
    setHealthGoals(loadHellthData(userKey).goals);
  }, [userKey]);

  const updateMyProfile = trpc.users.updateMyProfile.useMutation({
    onSuccess: async () => {
      await Promise.all([utils.users.myProfile.invalidate(), utils.security.status.invalidate()]);
      setStatusMessage("Profil gespeichert.");
      setErrorMessage(null);
    },
    onError: (error) => {
      setErrorMessage(error.message);
      setStatusMessage(null);
    },
  });

  const changeMyPassword = trpc.users.changeMyPassword.useMutation({
    onSuccess: () => {
      setCurrentPassword("");
      setNewPassword("");
      setConfirmNewPassword("");
      setStatusMessage("Passwort erfolgreich aktualisiert.");
      setErrorMessage(null);
    },
    onError: (error) => {
      setErrorMessage(error.message);
      setStatusMessage(null);
    },
  });

  const updateHealthProfile = trpc.health.upsertProfile.useMutation({
    onSuccess: async () => {
      await healthOverviewQuery.refetch();
      await utils.health.recipeRecommendations.invalidate();
      setStatusMessage("Essenspräferenzen gespeichert.");
      setErrorMessage(null);
    },
    onError: (error) => {
      setErrorMessage(error.message);
      setStatusMessage(null);
    },
  });

  useEffect(() => {
    const profile = healthOverviewQuery.data?.profile;
    if (!profile) return;
    setDietPreferences((profile.dietPreferences?.length ? profile.dietPreferences : ["vegan", "vegetarian", "meat", "fish"]) as DietPreference[]);
    setMealsPerDay(String(profile.mealsPerDay ?? 3));
    setCooksPerDay(String(profile.cooksPerDay ?? 1));
    setPreferredMealPrepDays(String(profile.preferredMealPrepDays ?? 0));
    setMeatFishFrequency((profile.meatFishFrequency as "none" | "once_per_day" | "flexible") ?? "flexible");
  }, [healthOverviewQuery.data?.profile]);

  function toggleDietPreference(preference: DietPreference) {
    setDietPreferences((current) => {
      const next = current.includes(preference) ? current.filter((item) => item !== preference) : [...current, preference];
      return next.length ? next : current;
    });
  }

  function saveEatingPreferences() {
    const profile = healthOverviewQuery.data?.profile;
    updateHealthProfile.mutate({
      goal: profile?.goal ?? "healthier",
      age: profile?.age ?? null,
      heightCm: profile?.heightCm == null ? null : Number(profile.heightCm),
      currentWeightKg: profile?.currentWeightKg == null ? null : Number(profile.currentWeightKg),
      targetWeightKg: profile?.targetWeightKg == null ? null : Number(profile.targetWeightKg),
      activityLevel: profile?.activityLevel ?? "moderate",
      dietStyle: profile?.dietStyle ?? "flexible",
      dietPreferences,
      mealsPerDay: Number(mealsPerDay) || 3,
      cooksPerDay: Number(cooksPerDay) || 1,
      preferredMealPrepDays: Number(preferredMealPrepDays) || 0,
      meatFishFrequency,
      cookingTime: (profile?.cookingTime as "low" | "medium" | "high" | undefined) ?? "medium",
      budgetFocus: profile?.budgetFocus ?? false,
      excludedFoods: profile?.excludedFoods ?? null,
      biggestChallenge: profile?.biggestChallenge ?? null,
      medicalNote: profile?.medicalNote ?? false,
      completed: Boolean(profile?.completedAt),
    });
  }

  const isBusy = updateMyProfile.isPending || changeMyPassword.isPending;
  const passwordMismatch =
    confirmNewPassword.length > 0 && newPassword !== confirmNewPassword;
  const canSaveProfile = useMemo(
    () =>
      !!firstName.trim() &&
      firstName.trim().length >= 2 &&
      (firstName.trim() !== (profileQuery.data?.firstName ?? profileQuery.data?.name ?? "") ||
        (lastName.trim() || null) !== (profileQuery.data?.lastName ?? null) ||
        (phone.trim() || null) !== (profileQuery.data?.phone ?? null) ||
        (mobile.trim() || null) !== (profileQuery.data?.mobile ?? null) ||
        (street.trim() || null) !== (profileQuery.data?.street ?? null) ||
        (postalCode.trim() || null) !== (profileQuery.data?.postalCode ?? null) ||
        (city.trim() || null) !== (profileQuery.data?.city ?? null) ||
        (image ?? null) !== (profileQuery.data?.image ?? null)),
    [
      firstName,
      lastName,
      phone,
      mobile,
      street,
      postalCode,
      city,
      image,
      profileQuery.data?.firstName,
      profileQuery.data?.name,
      profileQuery.data?.lastName,
      profileQuery.data?.phone,
      profileQuery.data?.mobile,
      profileQuery.data?.street,
      profileQuery.data?.postalCode,
      profileQuery.data?.city,
      profileQuery.data?.image,
    ],
  );

  async function handleAddPasskey() {
    setErrorMessage(null);
    setStatusMessage(null);
    const result = await authClient.passkey.addPasskey({
      name: newPasskeyName.trim() || undefined,
    });
    if (result.error) {
      setErrorMessage(result.error.message ?? "Passkey konnte nicht hinzugefügt werden.");
      return;
    }
    setStatusMessage("Passkey erfolgreich hinzugefügt.");
    setNewPasskeyName("");
    await passkeysQuery.refetch();
  }

  async function handleImageUpload(file: File) {
    if (!file.type.startsWith("image/")) {
      setErrorMessage("Bitte eine Bilddatei auswählen.");
      return;
    }
    if (file.size > 5 * 1024 * 1024) {
      setErrorMessage("Profilbild ist zu groß. Maximal 5 MB.");
      return;
    }

    try {
      const dataUrl = await toOptimizedAvatarDataUrl(file);
      setImage(dataUrl);
      setErrorMessage(null);
    } catch (error) {
      setErrorMessage(
        error instanceof Error
          ? error.message
          : "Profilbild konnte nicht verarbeitet werden.",
      );
    }
  }

  return (
    <DataPageLayout title="Einstellungen" description="Persönliches Profil und Sicherheit">
      <div className="mb-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
        <section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
          <h2 className="text-xl font-black text-gray-400">Ziele</h2>
          <div className="mt-5 divide-y divide-gray-100">
            {[
              { icon: FireIcon, label: "Kalorien", value: `${healthGoals?.calories ?? 2000} kcal`, color: "text-orange-500" },
              { icon: ScaleIcon, label: "Makros", value: `${healthGoals?.carbs ?? 200}/${healthGoals?.fat ?? 67}/${healthGoals?.protein ?? 150} g`, color: "text-blue-500" },
              { icon: ClockIcon, label: "Fasten", value: `${healthGoals?.fastingHours ?? 12} h`, color: "text-rose-500" },
              { icon: BeakerIcon, label: "Wasser", value: `${healthGoals?.drinkMl ?? 2500} ml`, color: "text-blue-500" },
              { icon: ScaleIcon, label: "Gewicht", value: `${healthGoals?.weightKg ?? 120} kg`, color: "text-orange-500" },
            ].map((item) => (
              <Link key={item.label} href="/ziele" className="flex w-full items-center gap-4 py-4 text-left">
                <item.icon className={`h-7 w-7 ${item.color}`} />
                <span className="flex-1 text-lg font-black text-gray-950">{item.label}</span>
                <span className="text-lg font-black text-gray-400">{item.value}</span>
                <ChevronRightIcon className="h-5 w-5 text-gray-300" />
              </Link>
            ))}
          </div>
        </section>

        <section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
          <h2 className="text-xl font-black text-gray-400">Rezept-Präferenzen</h2>
          <div className="mt-5 space-y-4">
            <div>
              <p className="text-sm font-black uppercase text-gray-400">Ernährung</p>
              <div className="mt-2 grid grid-cols-2 gap-2">
                {dietPreferenceOptions.map((option) => (
                  <button
                    key={option.id}
                    type="button"
                    onClick={() => toggleDietPreference(option.id)}
                    className={`rounded-full px-3 py-2 text-sm font-black ${
                      dietPreferences.includes(option.id) ? "bg-[#0F766E] text-white" : "bg-gray-100 text-gray-500"
                    }`}
                  >
                    {option.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-3 gap-2">
              <label className="space-y-1">
                <span className="text-xs font-black uppercase text-gray-400">Mahlzeiten</span>
                <input value={mealsPerDay} onChange={(event) => setMealsPerDay(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
              </label>
              <label className="space-y-1">
                <span className="text-xs font-black uppercase text-gray-400">Kochen/Tag</span>
                <input value={cooksPerDay} onChange={(event) => setCooksPerDay(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
              </label>
              <label className="space-y-1">
                <span className="text-xs font-black uppercase text-gray-400">Mealprep</span>
                <input value={preferredMealPrepDays} onChange={(event) => setPreferredMealPrepDays(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
              </label>
            </div>
            <label className="block space-y-1">
              <span className="text-xs font-black uppercase text-gray-400">Fleisch/Fisch</span>
              <select
                value={meatFishFrequency}
                onChange={(event) => setMeatFishFrequency(event.target.value as "none" | "once_per_day" | "flexible")}
                className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold"
              >
                <option value="none">nie</option>
                <option value="once_per_day">maximal 1x am Tag</option>
                <option value="flexible">flexibel</option>
              </select>
            </label>
            <button
              type="button"
              onClick={saveEatingPreferences}
              disabled={updateHealthProfile.isPending}
              className="w-full rounded-full bg-gray-950 px-4 py-3 text-sm font-black text-white disabled:opacity-50"
            >
              Präferenzen speichern
            </button>
          </div>
        </section>

        <section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
          <h2 className="text-xl font-black text-gray-400">Anwendung</h2>
          <div className="mt-5 space-y-4">
            <div className="flex items-center gap-4">
              <BellIcon className="h-7 w-7 text-green-500" />
              <div className="flex-1">
                <p className="text-lg font-black text-gray-950">Tägliche Erinnerung</p>
                <p className="text-sm font-bold text-gray-400">Tracking und Planung</p>
              </div>
              <span className="relative inline-flex h-8 w-14 rounded-full bg-green-500">
                <span className="absolute right-1 top-1 h-6 w-6 rounded-full bg-white" />
              </span>
            </div>
            <div className="flex items-center gap-4">
              {isDark ? <MoonIcon className="h-7 w-7 text-indigo-400" /> : <SunIcon className="h-7 w-7 text-amber-500" />}
              <div className="flex-1">
                <p className="text-lg font-black text-gray-950">Dunkles Design</p>
                <p className="text-sm font-bold text-gray-400">{isDark ? "aktiv" : "inaktiv"}</p>
              </div>
              <button
                type="button"
                onClick={toggleDark}
                className={`relative inline-flex h-8 w-14 rounded-full ${isDark ? "bg-[#0F766E]" : "bg-gray-200"}`}
                aria-label="Dunkles Design umschalten"
              >
                <span className={`absolute top-1 h-6 w-6 rounded-full bg-white transition ${isDark ? "right-1" : "left-1"}`} />
              </button>
            </div>
          </div>
        </section>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <section className="lg:col-span-2 bg-white border border-gray-200 rounded-xl p-6 space-y-5">
          <div>
            <h2 className="text-lg font-semibold text-[#333333]">Mein Profil</h2>
            <p className="text-sm text-gray-500 mt-1">
              Du kannst dein eigenes Profil bearbeiten. Höhere Admins können dich zusätzlich in
              der Benutzerverwaltung bearbeiten.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Name</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
                value={firstName}
                onChange={(event) => setFirstName(event.target.value)}
                placeholder="Vorname"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Nachname</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
                value={lastName}
                onChange={(event) => setLastName(event.target.value)}
                placeholder="Nachname"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Profilbild</label>
              <div className="flex items-center gap-3">
                <div className="w-16 h-16 rounded-full bg-gray-100 border border-gray-200 overflow-hidden shrink-0">
                  {image ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={image} alt="Profilbild" className="w-full h-full object-cover" />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-sm text-gray-400">
                      -
                    </div>
                  )}
                </div>
                <div className="space-y-2">
                  <label className="inline-flex px-3 py-2 rounded-lg bg-gray-100 text-gray-700 text-sm cursor-pointer">
                    Bild hochladen
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(event) => {
                        const file = event.target.files?.[0];
                        if (file) {
                          void handleImageUpload(file);
                        }
                        event.currentTarget.value = "";
                      }}
                    />
                  </label>
                  <p className="text-xs text-gray-500">Bild wird automatisch skaliert und komprimiert.</p>
                  <button
                    type="button"
                    onClick={() => setImage(null)}
                    className="block text-xs text-red-600 hover:text-red-700"
                  >
                    Bild entfernen
                  </button>
                </div>
              </div>
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1.5">E-Mail</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-gray-50 text-gray-500"
                value={profileQuery.data?.email ?? ""}
                disabled
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Telefon</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
                value={phone}
                onChange={(event) => setPhone(event.target.value)}
                placeholder="Telefon"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Mobil</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
                value={mobile}
                onChange={(event) => setMobile(event.target.value)}
                placeholder="Mobil"
              />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Straße</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
                value={street}
                onChange={(event) => setStreet(event.target.value)}
                placeholder="Straße und Hausnummer"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">PLZ</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
                value={postalCode}
                onChange={(event) => setPostalCode(event.target.value)}
                placeholder="PLZ"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Ort</label>
              <input
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
                value={city}
                onChange={(event) => setCity(event.target.value)}
                placeholder="Ort"
              />
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={() => {
                setStatusMessage(null);
                setErrorMessage(null);
                updateMyProfile.mutate({
                  firstName: firstName.trim(),
                  lastName: lastName.trim() || null,
                  phone: phone.trim() || null,
                  mobile: mobile.trim() || null,
                  street: street.trim() || null,
                  postalCode: postalCode.trim() || null,
                  city: city.trim() || null,
                  image,
                });
              }}
              disabled={isBusy || !canSaveProfile}
              className="px-4 py-2 rounded-lg bg-[#0F766E] text-white text-sm font-medium disabled:opacity-50"
            >
              Profil speichern
            </button>
          </div>
        </section>

        <section className="bg-white border border-gray-200 rounded-xl p-6 space-y-4">
          <h2 className="text-lg font-semibold text-[#333333]">Sicherheit</h2>
          <p className="text-sm text-gray-600">
            2FA Status:{" "}
            <strong>{securityQuery.data?.twoFactorEnabled ? "aktiv" : "nicht aktiv"}</strong>
          </p>
          {securityQuery.data?.twoFactorRecoveryRequired && (
            <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-3 py-2">
              2FA Recovery aktiv: Bitte OTP neu einrichten.
            </p>
          )}

          <div className="flex flex-wrap gap-2">
            <Link
              href="/sicherheit/2fa-setup"
              className="inline-flex px-4 py-2 rounded-lg bg-gray-900 text-white text-sm"
            >
              2FA verwalten
            </Link>
          </div>

          <div className="border-t border-gray-100 pt-4 space-y-2">
            <h3 className="text-sm font-semibold text-gray-800">Passkeys</h3>
            <p className="text-sm text-gray-600">
              Passkeys erlauben die Anmeldung per Gerät (z. B. Windows Hello, Touch ID oder
              Passwortmanager).
            </p>
            <div className="flex flex-col sm:flex-row gap-2">
              <input
                type="text"
                value={newPasskeyName}
                onChange={(event) => setNewPasskeyName(event.target.value)}
                placeholder="Name (optional), z. B. Laptop"
                className="flex-1 border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
              />
              <button
                type="button"
                onClick={() => void handleAddPasskey()}
                disabled={isBusy}
                className="px-4 py-2 rounded-lg bg-gray-900 text-white text-sm disabled:opacity-50"
              >
                Passkey hinzufügen
              </button>
            </div>
            <div className="space-y-2">
              {passkeysQuery.isPending && (
                <p className="text-xs text-gray-500">Passkeys werden geladen...</p>
              )}
              {passkeysQuery.error && (
                <p className="text-xs text-red-600">
                  {passkeysQuery.error.message ?? "Passkeys konnten nicht geladen werden."}
                </p>
              )}
              {!passkeysQuery.isPending &&
                !passkeysQuery.error &&
                (passkeysQuery.data?.length ?? 0) === 0 && (
                  <p className="text-xs text-gray-500">Noch keine Passkeys hinterlegt.</p>
                )}
              {(passkeysQuery.data ?? []).map((item) => (
                <div
                  key={item.id}
                  className="rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-700"
                >
                  <p className="font-medium text-gray-800">{item.name || "Unbenannter Passkey"}</p>
                  <p className="text-gray-500">Erstellt: {new Date(item.createdAt).toLocaleString("de-DE")}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="border-t border-gray-100 pt-4 space-y-3">
            <h3 className="text-sm font-semibold text-gray-800">Passwort zurücksetzen</h3>
            <div className="relative">
              <input
                type={showCurrentPassword ? "text" : "password"}
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 pr-11 text-sm"
                placeholder="Aktuelles Passwort"
                value={currentPassword}
                onChange={(event) => setCurrentPassword(event.target.value)}
              />
              <button
                type="button"
                onClick={() => setShowCurrentPassword((value) => !value)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                aria-label={showCurrentPassword ? "Passwort verbergen" : "Passwort anzeigen"}
              >
                {showCurrentPassword ? (
                  <EyeSlashIcon className="w-4 h-4" />
                ) : (
                  <EyeIcon className="w-4 h-4" />
                )}
              </button>
            </div>
            <div className="relative">
              <input
                type={showNewPassword ? "text" : "password"}
                className="w-full border border-gray-200 rounded-lg px-3 py-2.5 pr-11 text-sm"
                placeholder="Neues Passwort (mind. 16 Zeichen)"
                value={newPassword}
                onChange={(event) => setNewPassword(event.target.value)}
              />
              <button
                type="button"
                onClick={() => setShowNewPassword((value) => !value)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                aria-label={showNewPassword ? "Passwort verbergen" : "Passwort anzeigen"}
              >
                {showNewPassword ? (
                  <EyeSlashIcon className="w-4 h-4" />
                ) : (
                  <EyeIcon className="w-4 h-4" />
                )}
              </button>
            </div>
            <div className="relative">
              <input
                type={showConfirmPassword ? "text" : "password"}
                className={`w-full border rounded-lg px-3 py-2.5 pr-11 text-sm ${
                  passwordMismatch ? "border-red-300" : "border-gray-200"
                }`}
                placeholder="Neues Passwort bestätigen"
                value={confirmNewPassword}
                onChange={(event) => setConfirmNewPassword(event.target.value)}
              />
              <button
                type="button"
                onClick={() => setShowConfirmPassword((value) => !value)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                aria-label={showConfirmPassword ? "Passwort verbergen" : "Passwort anzeigen"}
              >
                {showConfirmPassword ? (
                  <EyeSlashIcon className="w-4 h-4" />
                ) : (
                  <EyeIcon className="w-4 h-4" />
                )}
              </button>
            </div>
            {passwordMismatch && (
              <p className="text-xs text-red-600">Die neuen Passwörter stimmen nicht überein.</p>
            )}
            <button
              type="button"
              onClick={() => {
                const generated = generatePassword(16);
                setNewPassword(generated);
                setConfirmNewPassword(generated);
                setShowNewPassword(true);
                setShowConfirmPassword(true);
              }}
              className="px-3 py-2 rounded-lg bg-gray-100 text-gray-700 text-sm w-fit"
            >
              Passwort generieren (16)
            </button>
            <button
              onClick={() => {
                setStatusMessage(null);
                setErrorMessage(null);
                changeMyPassword.mutate({
                  currentPassword,
                  newPassword,
                });
              }}
              disabled={
                isBusy ||
                !currentPassword ||
                newPassword.length < 16 ||
                confirmNewPassword.length < 16 ||
                passwordMismatch
              }
              className="w-full px-4 py-2 rounded-lg bg-[#0F766E] text-white text-sm font-medium disabled:opacity-50"
            >
              Passwort aktualisieren
            </button>
          </div>
        </section>

        <section className="lg:col-span-3 bg-white border border-gray-200 rounded-xl p-6 space-y-4">
          <div>
            <h2 className="text-lg font-semibold text-[#333333]">Darstellung</h2>
            <p className="text-sm text-gray-500 mt-1">Erscheinungsbild der Anwendung anpassen.</p>
          </div>
          <div className="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 px-4 py-3">
            <div className="flex items-center gap-3">
              {isDark ? (
                <MoonIcon className="h-5 w-5 text-indigo-400" />
              ) : (
                <SunIcon className="h-5 w-5 text-amber-500" />
              )}
              <div>
                <p className="text-sm font-medium text-gray-900">Dunkles Design</p>
                <p className="text-xs text-gray-500">
                  {isDark ? "Dunkles Design ist aktiv" : "Helles Design ist aktiv"}
                </p>
              </div>
            </div>
            <button
              type="button"
              onClick={toggleDark}
              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none ${
                isDark ? "bg-[#0F766E]" : "bg-gray-200"
              }`}
              role="switch"
              aria-checked={isDark}
              aria-label="Dunkles Design umschalten"
            >
              <span
                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ${
                  isDark ? "translate-x-5" : "translate-x-0"
                }`}
              />
            </button>
          </div>
        </section>
      </div>

      {profileQuery.isLoading && (
        <div className="mt-6 text-sm rounded-lg border border-gray-200 bg-white px-4 py-3 text-gray-500">
          Profil wird geladen...
        </div>
      )}

      {(profileQuery.error || securityQuery.error) && (
        <div className="mt-6 text-sm rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-700">
          {profileQuery.error?.message ?? securityQuery.error?.message}
        </div>
      )}

      {statusMessage && (
        <div className="mt-6 text-sm rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-green-700">
          {statusMessage}
        </div>
      )}

      {errorMessage && (
        <div className="mt-6 text-sm rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-700">
          {errorMessage}
        </div>
      )}
    </DataPageLayout>
  );
}