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 '../../../context/ToastContext';

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-cyan" /> Add Passkey
          </h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 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-cyan/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Fingerprint className="w-8 h-8 text-kodo-cyan" />
                </div>
                <p className="text-sm text-gray-300">
                  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-cyan 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-gray-400">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-gray-400 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>
  );
};