Speisekarte/components/PasskeyManager.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { startRegistration } from "@simplewebauthn/browser";
import { formatMessage } from "@/lib/i18n/shared";
import { useDict } from "@/components/i18n/LocaleProvider";

interface PasskeyItem {
  id: string;
  name: string | null;
  created_at: string;
  last_used_at: string | null;
}

export default function PasskeyManager() {
  const dict = useDict();
  const [passkeys, setPasskeys] = useState<PasskeyItem[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [info, setInfo] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    const res = await fetch("/api/auth/passkeys");
    if (!res.ok) {
      setError(formatMessage(dict.passkeys.loadError, { message: String(res.status) }));
      return;
    }
    setPasskeys(await res.json());
  }, [dict]);

  useEffect(() => {
    load();
  }, [load]);

  async function register() {
    setError(null);
    setInfo(null);
    setBusy(true);
    try {
      const optionsRes = await fetch("/api/auth/passkeys/register-options", { method: "POST" });
      if (!optionsRes.ok) throw new Error(String(optionsRes.status));
      const options = await optionsRes.json();
      const response = await startRegistration({ optionsJSON: options });

      const verifyRes = await fetch("/api/auth/passkeys/register-verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ response }),
      });
      if (!verifyRes.ok) {
        const data = await verifyRes.json().catch(() => ({}));
        throw new Error(data.error ?? String(verifyRes.status));
      }
      setInfo(dict.passkeys.registered);
      await load();
    } catch (err) {
      setError(
        /NotAllowedError|abort/i.test(String(err))
          ? dict.passkeys.registerCancelled
          : formatMessage(dict.passkeys.registerError, {
              message: err instanceof Error ? err.message : String(err),
            })
      );
    }
    setBusy(false);
  }

  async function remove(pk: PasskeyItem) {
    if (!window.confirm(dict.passkeys.confirmDelete)) return;
    const res = await fetch(`/api/auth/passkeys/${pk.id}`, { method: "DELETE" });
    if (!res.ok)
      setError(formatMessage(dict.passkeys.deleteError, { message: String(res.status) }));
    await load();
  }

  return (
    <section className="card">
      <h2 className="font-semibold mb-1">{dict.passkeys.title}</h2>
      <p className="text-sm text-gray-600 mb-3">{dict.passkeys.hint}</p>

      {error && (
        <p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
          {error}
        </p>
      )}
      {info && <p className="mb-2 text-sm text-green-700">{info}</p>}

      <button
        type="button"
        className="btn btn-add mb-3"
        onClick={register}
        disabled={busy}
      >
        {dict.passkeys.register}
      </button>

      <ul className="divide-y divide-gray-100">
        {passkeys.map((pk) => (
          <li key={pk.id} className="flex items-center gap-3 py-1.5 text-sm">
            <span className="mr-auto">
              <span className="font-semibold">{pk.name || "Passkey"}</span>{" "}
              <span className="text-gray-500">
                {formatMessage(dict.passkeys.createdOn, {
                  date: new Date(pk.created_at).toLocaleDateString(dict.dateLocale),
                })}
              </span>
            </span>
            <button
              type="button"
              className="btn btn-del"
              onClick={() => remove(pk)}
            >
              {dict.common.delete}
            </button>
          </li>
        ))}
        {passkeys.length === 0 && (
          <li className="py-2 text-gray-500 text-sm">{dict.passkeys.empty}</li>
        )}
      </ul>
    </section>
  );
}