Speisekarte/components/PasskeyManager.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";

interface PasskeyItem {
  id: string;
  friendly_name?: string;
  created_at: string;
  last_used_at?: string;
}

export default function PasskeyManager() {
  const supabase = useMemo(() => createClient(), []);
  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 { data, error } = await supabase.auth.passkey.list();
    if (error) setError(`Passkeys konnten nicht geladen werden: ${error.message}`);
    else setPasskeys((data ?? []) as PasskeyItem[]);
  }, [supabase]);

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

  async function register() {
    setError(null);
    setInfo(null);
    setBusy(true);
    try {
      const { error } = await supabase.auth.registerPasskey();
      if (error) {
        setError(`Registrierung fehlgeschlagen: ${error.message}`);
      } else {
        setInfo("Passkey wurde erfolgreich registriert.");
        await load();
      }
    } catch (err) {
      setError(
        /NotAllowedError|abort/i.test(String(err))
          ? "Die Passkey-Registrierung wurde abgebrochen."
          : `Registrierung fehlgeschlagen: ${err instanceof Error ? err.message : String(err)}`
      );
    }
    setBusy(false);
  }

  async function remove(pk: PasskeyItem) {
    if (!window.confirm("Diesen Passkey wirklich löschen?")) return;
    const { error } = await supabase.auth.passkey.delete({ passkeyId: pk.id });
    if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
    await load();
  }

  return (
    <section className="card">
      <h2 className="font-semibold mb-1">Passkeys</h2>
      <p className="text-sm text-gray-600 mb-3">
        Mit einem Passkey (Fingerabdruck, Gesichtserkennung oder
        Sicherheitsschlüssel) kannst du dich künftig ohne Passwort anmelden.
        Passkeys gelten pro Domain – für den Live-Betrieb muss die Domain in
        der Supabase-Konfiguration hinterlegt sein.
      </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}
      >
        Neuen Passkey registrieren
      </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.friendly_name || "Passkey"}
              </span>{" "}
              <span className="text-gray-500">
                – angelegt am{" "}
                {new Date(pk.created_at).toLocaleDateString("de-DE")}
              </span>
            </span>
            <button
              type="button"
              className="btn btn-del"
              onClick={() => remove(pk)}
            >
              Löschen
            </button>
          </li>
        ))}
        {passkeys.length === 0 && (
          <li className="py-2 text-gray-500 text-sm">
            Noch keine Passkeys registriert.
          </li>
        )}
      </ul>
    </section>
  );
}