Speisekarte/components/AccountManager.tsx

"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";
import PasskeyManager from "@/components/PasskeyManager";

const ROLE_LABELS: Record<string, string> = {
  admin: "Administrator",
  staff: "Kantinenmitarbeiter",
};

function germanAuthError(message: string): string {
  if (/invalid login credentials/i.test(message))
    return "Das aktuelle Passwort ist falsch.";
  if (/should be at least/i.test(message))
    return "Das neue Passwort ist zu kurz (mindestens 8 Zeichen).";
  if (/email.*already|already.*registered/i.test(message))
    return "Diese E-Mail-Adresse wird bereits verwendet.";
  return message;
}

export default function AccountManager({
  role,
  initialFullName,
  initialEmail,
  initialPasswordAuthEnabled,
}: {
  role: string;
  initialFullName: string;
  initialEmail: string;
  initialPasswordAuthEnabled: boolean;
}) {
  const supabase = useMemo(() => createClient(), []);
  const router = useRouter();

  // Persönliche Daten
  const [fullName, setFullName] = useState(initialFullName);
  const [nameError, setNameError] = useState<string | null>(null);
  const [nameInfo, setNameInfo] = useState<string | null>(null);
  const [nameBusy, setNameBusy] = useState(false);

  // E-Mail-Adresse
  const [email, setEmail] = useState(initialEmail);
  const [emailError, setEmailError] = useState<string | null>(null);
  const [emailInfo, setEmailInfo] = useState<string | null>(null);
  const [emailBusy, setEmailBusy] = useState(false);

  // Passwort
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [newPasswordRepeat, setNewPasswordRepeat] = useState("");
  const [pwError, setPwError] = useState<string | null>(null);
  const [pwInfo, setPwInfo] = useState<string | null>(null);
  const [pwBusy, setPwBusy] = useState(false);

  // Passwort-Anmeldung an/aus
  const [passwordAuthEnabled, setPasswordAuthEnabled] = useState(
    initialPasswordAuthEnabled
  );
  const [passkeyCount, setPasskeyCount] = useState<number | null>(null);
  const [authError, setAuthError] = useState<string | null>(null);
  const [authInfo, setAuthInfo] = useState<string | null>(null);
  const [authBusy, setAuthBusy] = useState(false);

  useEffect(() => {
    supabase.auth.passkey
      .list()
      .then(({ data }) => setPasskeyCount((data ?? []).length));
  }, [supabase]);

  async function saveName(e: React.FormEvent) {
    e.preventDefault();
    setNameError(null);
    setNameInfo(null);
    const name = fullName.trim();
    if (!name) {
      setNameError("Bitte einen Namen angeben.");
      return;
    }
    setNameBusy(true);
    const { error } = await supabase
      .from("profiles")
      .update({ full_name: name })
      .eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
    if (error) setNameError(`Speichern fehlgeschlagen: ${error.message}`);
    else {
      setNameInfo("Name gespeichert.");
      router.refresh();
    }
    setNameBusy(false);
  }

  async function saveEmail(e: React.FormEvent) {
    e.preventDefault();
    setEmailError(null);
    setEmailInfo(null);
    const next = email.trim();
    if (!next || next === initialEmail) return;
    setEmailBusy(true);
    const { error } = await supabase.auth.updateUser({ email: next });
    if (error) {
      setEmailError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
    } else {
      setEmailInfo(
        "Bestätigungs-E-Mails wurden verschickt. Die neue Adresse wird erst nach Bestätigung des Links aktiv."
      );
    }
    setEmailBusy(false);
  }

  async function savePassword(e: React.FormEvent) {
    e.preventDefault();
    setPwError(null);
    setPwInfo(null);
    if (newPassword.length < 8) {
      setPwError("Das neue Passwort muss mindestens 8 Zeichen lang sein.");
      return;
    }
    if (newPassword !== newPasswordRepeat) {
      setPwError("Die Passwörter stimmen nicht überein.");
      return;
    }
    setPwBusy(true);

    // Zur Verifizierung: aktuelles Passwort gegenprüfen, bevor geändert wird.
    const { error: verifyError } = await supabase.auth.signInWithPassword({
      email: initialEmail,
      password: currentPassword,
    });
    if (verifyError) {
      setPwError(germanAuthError(verifyError.message));
      setPwBusy(false);
      return;
    }

    const { error } = await supabase.auth.updateUser({ password: newPassword });
    if (error) {
      setPwError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
    } else {
      setPwInfo("Passwort geändert.");
      setCurrentPassword("");
      setNewPassword("");
      setNewPasswordRepeat("");
    }
    setPwBusy(false);
  }

  async function togglePasswordAuth() {
    setAuthError(null);
    setAuthInfo(null);
    const next = !passwordAuthEnabled;
    if (!next && (passkeyCount ?? 0) === 0) {
      setAuthError(
        "Ohne registrierten Passkey kannst du die Passwort-Anmeldung nicht deaktivieren – sonst wärst du ausgesperrt. Registriere zuerst einen Passkey weiter unten."
      );
      return;
    }
    if (
      !next &&
      !window.confirm(
        "Anmeldung mit E-Mail und Passwort wirklich deaktivieren? Du kannst dich danach nur noch per Passkey anmelden."
      )
    )
      return;

    setAuthBusy(true);
    const { error } = await supabase
      .from("profiles")
      .update({ password_auth_enabled: next })
      .eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
    if (error) {
      setAuthError(`Speichern fehlgeschlagen: ${error.message}`);
    } else {
      setPasswordAuthEnabled(next);
      setAuthInfo(
        next ? "Passwort-Anmeldung aktiviert." : "Passwort-Anmeldung deaktiviert."
      );
    }
    setAuthBusy(false);
  }

  return (
    <div className="max-w-3xl space-y-6">
      <div>
        <h1 className="text-xl font-bold text-[var(--c-primary)]">Mein Konto</h1>
        <p className="text-sm text-gray-500">
          {initialEmail} – {ROLE_LABELS[role] ?? role}
        </p>
      </div>

      <section className="card">
        <h2 className="font-semibold mb-3">Persönliche Daten</h2>
        <form onSubmit={saveName} className="space-y-3">
          <div className="max-w-80">
            <label className="label" htmlFor="account-name">
              Name
            </label>
            <input
              id="account-name"
              className="input"
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
              required
            />
          </div>
          {nameError && (
            <p className="text-sm text-[var(--c-del)]" role="alert">
              {nameError}
            </p>
          )}
          {nameInfo && <p className="text-sm text-green-700">{nameInfo}</p>}
          <button type="submit" className="btn btn-add" disabled={nameBusy}>
            Name speichern
          </button>
        </form>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">E-Mail-Adresse</h2>
        <form onSubmit={saveEmail} className="space-y-3">
          <div className="max-w-80">
            <label className="label" htmlFor="account-email">
              E-Mail-Adresse
            </label>
            <input
              id="account-email"
              type="email"
              className="input"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          {emailError && (
            <p className="text-sm text-[var(--c-del)]" role="alert">
              {emailError}
            </p>
          )}
          {emailInfo && <p className="text-sm text-green-700">{emailInfo}</p>}
          <button
            type="submit"
            className="btn btn-add"
            disabled={emailBusy || email.trim() === initialEmail}
          >
            E-Mail-Adresse ändern
          </button>
        </form>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">Passwort ändern</h2>
        <form onSubmit={savePassword} className="space-y-3">
          <div className="max-w-80">
            <label className="label" htmlFor="account-current-password">
              Aktuelles Passwort (zur Verifizierung)
            </label>
            <input
              id="account-current-password"
              type="password"
              className="input"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              autoComplete="current-password"
              required
            />
          </div>
          <div className="max-w-80">
            <label className="label" htmlFor="account-new-password">
              Neues Passwort
            </label>
            <input
              id="account-new-password"
              type="password"
              className="input"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              autoComplete="new-password"
              minLength={8}
              required
            />
          </div>
          <div className="max-w-80">
            <label className="label" htmlFor="account-new-password-repeat">
              Neues Passwort wiederholen
            </label>
            <input
              id="account-new-password-repeat"
              type="password"
              className="input"
              value={newPasswordRepeat}
              onChange={(e) => setNewPasswordRepeat(e.target.value)}
              autoComplete="new-password"
              minLength={8}
              required
            />
          </div>
          {pwError && (
            <p className="text-sm text-[var(--c-del)]" role="alert">
              {pwError}
            </p>
          )}
          {pwInfo && <p className="text-sm text-green-700">{pwInfo}</p>}
          <button type="submit" className="btn btn-add" disabled={pwBusy}>
            Passwort ändern
          </button>
        </form>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-1">Anmeldung mit Passwort</h2>
        <p className="text-sm text-gray-600 mb-3">
          Du kannst die Anmeldung mit E-Mail und Passwort für dein Konto
          deaktivieren und dich künftig ausschließlich per Passkey anmelden.
          Dafür muss mindestens ein Passkey registriert sein.
        </p>
        {authError && (
          <p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
            {authError}
          </p>
        )}
        {authInfo && <p className="mb-2 text-sm text-green-700">{authInfo}</p>}
        <label className="flex items-center gap-2 cursor-pointer text-sm w-fit">
          <input
            type="checkbox"
            checked={passwordAuthEnabled}
            onChange={togglePasswordAuth}
            disabled={authBusy || passkeyCount === null}
          />
          Anmeldung mit E-Mail und Passwort erlaubt
        </label>
      </section>

      <PasskeyManager />
    </div>
  );
}