gitfor/platform

import { useState } from "react";
import { beginPasskeyRegistration, deletePasskey, finishPasskeyRegistration } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { usePasskeyRegistration } from "~/hooks/use-passkey";
import { Button } from "~/components/ui/Button";
import { ErrorBanner, TextField } from "~/components/ui/Field";
import { EmptyState, Panel, RelativeTime } from "~/components/ui/Primitives";
import { RecoveryCodes } from "./RecoveryCodes";

type Passkey = {
  id: string;
  name: string;
  lastUsedAt: number | null;
  createdAt: number;
};

export function PasskeysPanel({ passkeys, hasPassword }: { passkeys: Passkey[]; hasPassword: boolean }) {
  const register = usePasskeyRegistration(beginPasskeyRegistration, finishPasskeyRegistration);
  const remove = useAction(deletePasskey);
  const [removing, setRemoving] = useState<string | null>(null);
  const [codes, setCodes] = useState<string[] | null>(null);

  return (
    <Panel title="Passkeys">
      <div className="space-y-4 p-4 text-sm">
        <p className="text-gray-400">
          Passkeys sign you in without a password and also count as a second factor. Adding one turns on two-factor
          checks for password sign-ins.
        </p>
        <ErrorBanner message={register.error ?? remove.error} />
        {codes && <RecoveryCodes codes={codes} />}
        {passkeys.length === 0 ? (
          <EmptyState title="No passkeys yet" />
        ) : (
          <ul className="divide-y divide-gray-800 rounded-md border border-gray-800">
            {passkeys.map((key) => (
              <li key={key.id} className="space-y-3 px-3 py-2.5">
                <div className="flex items-center gap-3">
                  <div className="min-w-0 flex-1">
                    <div className="font-medium text-gray-100">{key.name}</div>