Speisekarte/components/PasskeyManager.tsx

"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";
import { formatMessage } from "@/lib/i18n/shared";
import { useDict } from "@/components/i18n/LocaleProvider";

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

export default function PasskeyManager() {
  const supabase = useMemo(() => createClient(), []);
  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 { data, error } = await supabase.auth.passkey.list();
    if (error)
      setError(formatMessage(dict.passkeys.loadError, { message: error.message }));
    else setPasskeys((data ?? []) as PasskeyItem[]);
  }, [supabase, dict]);

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

  async function register() {
    setError(null);
    setInfo(null);
    setBusy(true);
    try {
      const { error } = await supabase.auth.registerPasskey();
      if (error) {
        setError(formatMessage(dict.passkeys.registerError, { message: error.message }));
      } else {
        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 { error } = await supabase.auth.passkey.delete({ passkeyId: pk.id });
    if (error)
      setError(formatMessage(dict.passkeys.deleteError, { message: error.message }));
    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.friendly_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>
  );
}