veza/apps/web/src/components/settings/security/PasskeyModal.tsx

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { Fingerprint, X, Loader2, CheckCircle } from 'lucide-react';
import { useToast } from '../../../components/feedback/ToastProvider';

interface PasskeyModalProps {
  onClose: () => void;
  onSuccess: () => void;
}

export const PasskeyModal: React.FC<PasskeyModalProps> = ({
  onClose,
  onSuccess,
}) => {
  const { addToast } = useToast();
  const [passkeyName, setPasskeyName] = useState('');
  const [_loading, _setLoading] = useState(false);
  const [step, _setStep] = useState<'name' | 'registering' | 'success'>('name');

  const handleCreate = () => {
    if (!passkeyName) {
      addToast('Please name your passkey', 'error');
      return;
    }
    _setStep('registering');
    _setLoading(true);

    // Simulate WebAuthn API call
    setTimeout(() => {
      _setLoading(false);
      _setStep('success');
      addToast('Passkey created successfully', 'success');
    }, 2000);
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Fingerprint className="w-4 h-4 text-kodo-steel" /> Add Passkey
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
          </button>
        </div>

        <div className="p-6">
          {step === 'name' && (
            <div className="space-y-4">
              <div className="text-center mb-6">
                <div className="w-16 h-16 bg-kodo-steel/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Fingerprint className="w-8 h-8 text-kodo-steel" />
                </div>
                <p className="text-sm text-kodo-text-main">
                  Passkeys allow you to sign in safely using your fingerprint,
                  face, or device PIN.
                </p>
              </div>
              <Input
                label="Passkey Name"
                placeholder="e.g. MacBook Pro, iPhone 13"
                value={passkeyName}
                onChange={(e) => setPasskeyName(e.target.value)}
                autoFocus
              />
              <div className="pt-2">
                <Button
                  variant="primary"
                  className="w-full"
                  onClick={handleCreate}
                >
                  Create Passkey
                </Button>
              </div>
            </div>
          )}

          {step === 'registering' && (
            <div className="text-center py-8">
              <Loader2 className="w-12 h-12 text-kodo-steel animate-spin mx-auto mb-4" />
              <h4 className="text-lg font-bold text-white mb-2">
                Waiting for device...
              </h4>
              <p className="text-sm text-kodo-content-dim">
                Follow the instructions on your device/browser.
              </p>
            </div>
          )}

          {step === 'success' && (
            <div className="text-center py-4">
              <div className="w-16 h-16 bg-kodo-lime/20 rounded-full flex items-center justify-center mx-auto mb-4 text-kodo-lime">
                <CheckCircle className="w-8 h-8" />
              </div>
              <h4 className="text-xl font-bold text-white mb-2">
                Passkey Added!
              </h4>
              <p className="text-sm text-kodo-content-dim mb-6">
                You can now use this device to log in.
              </p>
              <Button
                variant="primary"
                className="w-full"
                onClick={() => {
                  onSuccess();
                  onClose();
                }}
              >
                Done
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};