import React, { useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { Button } from '@/components/ui/Button';

interface MfaFormProps {
  isFirstSetup: boolean;
  qrUrl: string;
  isLoading: boolean;
  onVerify: (code: string) => void;
  onCancel: () => void;
}

export const MfaForm: React.FC<MfaFormProps> = ({ isFirstSetup, qrUrl, isLoading, onVerify, onCancel }) => {
  const [code, setCode] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onVerify(code);
  };

  return (
    <form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleSubmit}>
      {isFirstSetup ? (
        <div className="text-center mb-6">
          <p className="text-sm font-medium text-slate-900">Configuration de la sécurité</p>
          <p className="text-xs text-slate-500 mt-2 mb-4">Scannez ce QR Code avec Google Authenticator ou Authy.</p>
          <div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
            <QRCodeSVG value={qrUrl} size={150} />
          </div>
        </div>
      ) : (
        <div className="text-center mb-6">
          <p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
          <p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
        </div>
      )}
      
      <div>
        <input 
          type="text" required maxLength={6} placeholder="000000"
          value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))} // Force les chiffres
          className="block w-full rounded-md border border-slate-300 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 font-mono shadow-sm focus:border-blue-900 focus:ring-blue-900" 
        />
      </div>
      
      <div className="flex space-x-3">
        <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading} className="w-1/3">
          Annuler
        </Button>
        <Button type="submit" isLoading={isLoading} disabled={code.length !== 6} className="w-2/3 bg-emerald-600 hover:bg-emerald-700">
          Déverrouiller
        </Button>
      </div>
    </form>
  );
};