Speisekarte/components/AccountManager.tsx

"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { formatMessage } from "@/lib/i18n/shared";
import PasskeyManager from "@/components/PasskeyManager";
import { useDict } from "@/components/i18n/LocaleProvider";

function errorMessage(
  dict: ReturnType<typeof useDict>,
  code: string,
  fallback: string
): string {
  if (code === "wrong_password") return dict.account.wrongCurrentPassword;
  if (code === "email_used") return dict.account.emailAlreadyUsed;
  if (code === "needs_passkey") return dict.account.passwordAuthNeedsPasskey;
  return fallback;
}

export default function AccountManager({
  role,
  initialFullName,
  initialEmail,
  initialPasswordAuthEnabled,
}: {
  role: string;
  initialFullName: string;
  initialEmail: string;
  initialPasswordAuthEnabled: boolean;
}) {
  const router = useRouter();
  const dict = useDict();
  const roleLabel = role === "admin" ? dict.common.roleAdmin : dict.common.roleStaff;

  // 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 [emailPassword, setEmailPassword] = useState("");
  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(() => {
    fetch("/api/auth/passkeys")
      .then((res) => (res.ok ? res.json() : []))
      .then((data) => setPasskeyCount(data.length));
  }, []);

  async function saveName(e: React.FormEvent) {
    e.preventDefault();
    setNameError(null);
    setNameInfo(null);
    const name = fullName.trim();
    if (!name) {
      setNameError(dict.account.nameRequired);
      return;
    }
    setNameBusy(true);
    const res = await fetch("/api/account", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ full_name: name }),
    });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setNameError(
        formatMessage(dict.account.saveError, {
          message: errorMessage(dict, data.error, data.error ?? String(res.status)),
        })
      );
    } else {
      setNameInfo(dict.account.nameSaved);
      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 res = await fetch("/api/account/email", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email: next, password: emailPassword }),
    });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setEmailError(
        formatMessage(dict.account.changeError, {
          message: errorMessage(dict, data.error, data.error ?? String(res.status)),
        })
      );
    } else {
      setEmailInfo(dict.account.emailChanged);
      setEmailPassword("");
      router.refresh();
    }
    setEmailBusy(false);
  }

  async function savePassword(e: React.FormEvent) {
    e.preventDefault();
    setPwError(null);
    setPwInfo(null);
    if (newPassword.length < 8) {
      setPwError(dict.account.passwordTooShort);
      return;
    }
    if (newPassword !== newPasswordRepeat) {
      setPwError(dict.account.passwordMismatch);
      return;
    }
    setPwBusy(true);

    const res = await fetch("/api/account/password", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ currentPassword, newPassword }),
    });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setPwError(
        formatMessage(dict.account.changeError, {
          message: errorMessage(dict, data.error, data.error ?? String(res.status)),
        })
      );
    } else {
      setPwInfo(dict.account.passwordChanged);
      setCurrentPassword("");
      setNewPassword("");
      setNewPasswordRepeat("");
    }
    setPwBusy(false);
  }

  async function togglePasswordAuth() {
    setAuthError(null);
    setAuthInfo(null);
    const next = !passwordAuthEnabled;
    if (!next && (passkeyCount ?? 0) === 0) {
      setAuthError(dict.account.passwordAuthNeedsPasskey);
      return;
    }
    if (!next && !window.confirm(dict.account.confirmDisablePasswordAuth)) return;

    setAuthBusy(true);
    const res = await fetch("/api/account", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ password_auth_enabled: next }),
    });
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      setAuthError(
        formatMessage(dict.account.saveError, {
          message: errorMessage(dict, data.error, data.error ?? String(res.status)),
        })
      );
    } else {
      setPasswordAuthEnabled(next);
      setAuthInfo(
        next ? dict.account.passwordAuthEnabled : dict.account.passwordAuthDisabled
      );
    }
    setAuthBusy(false);
  }

  return (
    <div className="max-w-3xl space-y-6">
      <div>
        <h1 className="text-xl font-bold text-[var(--c-primary)]">
          {dict.account.title}
        </h1>
        <p className="text-sm text-gray-500">
          {initialEmail} – {roleLabel}
        </p>
      </div>

      <section className="card">
        <h2 className="font-semibold mb-3">{dict.account.personalTitle}</h2>
        <form onSubmit={saveName} className="space-y-3">
          <div className="max-w-80">
            <label className="label" htmlFor="account-name">
              {dict.common.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}>
            {dict.account.saveName}
          </button>
        </form>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">{dict.account.emailTitle}</h2>
        <form onSubmit={saveEmail} className="space-y-3">
          <div className="max-w-80">
            <label className="label" htmlFor="account-email">
              {dict.common.email}
            </label>
            <input
              id="account-email"
              type="email"
              className="input"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="max-w-80">
            <label className="label" htmlFor="account-email-password">
              {dict.account.currentPassword}
            </label>
            <input
              id="account-email-password"
              type="password"
              className="input"
              value={emailPassword}
              onChange={(e) => setEmailPassword(e.target.value)}
              autoComplete="current-password"
              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}
          >
            {dict.account.changeEmail}
          </button>
        </form>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-3">{dict.account.passwordTitle}</h2>
        <form onSubmit={savePassword} className="space-y-3">
          <div className="max-w-80">
            <label className="label" htmlFor="account-current-password">
              {dict.account.currentPassword}
            </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">
              {dict.account.newPassword}
            </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">
              {dict.account.newPasswordRepeat}
            </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}>
            {dict.account.changePassword}
          </button>
        </form>
      </section>

      <section className="card">
        <h2 className="font-semibold mb-1">{dict.account.passwordAuthTitle}</h2>
        <p className="text-sm text-gray-600 mb-3">{dict.account.passwordAuthHint}</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}
          />
          {dict.account.passwordAuthCheckbox}
        </label>
      </section>

      <PasskeyManager />
    </div>
  );
}