import React, { useState } from 'react';
import { pb } from '../../config/pocketbase';
import * as OTPAuth from 'otpauth';
import { QRCodeSVG } from 'qrcode.react';

interface LoginProps {
  onLoginSuccess: () => void;
}

export default function Login({ onLoginSuccess }: LoginProps) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [mfaCode, setMfaCode] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [step, setStep] = useState<1 | 2>(1);

  // États pour la cryptographie TOTP (Flux Local)
  const [userId, setUserId] = useState('');
  const [totpSecret, setTotpSecret] = useState('');
  const [qrUrl, setQrUrl] = useState('');
  const [isFirstSetup, setIsFirstSetup] = useState(false);

  // --------------------------------------------------------
  // 1 Connexion Zitadel (SSO)
  // --------------------------------------------------------
  const handleZitadelLogin = async () => {
    setError('');
    setIsLoading(true);
    try {
      // PocketBase gère automatiquement la popup vers Zitadel et le retour du token
      const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
      console.log("Données d'authentification SSO :", authData);
      
      if (authData) {
        // Zitadel a déjà géré la sécurité et le MFA de son côté.
        // On ouvre directement le coffre-fort.
        onLoginSuccess();
      }
    } catch (err: any) {
      console.error("Erreur d'authentification SSO :", err);
      setError("Échec de la connexion sécurisée via GISE Identity.");
      pb.authStore.clear();
    } finally {
      setIsLoading(false);
    }
  };

  // --------------------------------------------------------
  // 2 Connexion Email - Mot de passe
  // --------------------------------------------------------
  const handleLocalLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      const authData = await pb.collection('aegis_users').authWithPassword(email, password);

      if (authData.record.mfa_enabled) {
        setUserId(authData.record.id);

        if (!authData.record.totp_secret) {
          const totp = new OTPAuth.TOTP({
            issuer: 'AEGIS by GISE',
            label: email,
            algorithm: 'SHA1',
            digits: 6,
            period: 30,
            secret: new OTPAuth.Secret({ size: 20 })
          });

          setTotpSecret(totp.secret.base32);
          setQrUrl(totp.toString());
          setIsFirstSetup(true);
        } else {
          setTotpSecret(authData.record.totp_secret);
          setIsFirstSetup(false);
        }
        setStep(2); // On passe à l'étape MFA locale
      } else {
        onLoginSuccess();
      }
    } catch (err: any) {
      setError("Identifiants institutionnels incorrects ou accès révoqué.");
      pb.authStore.clear();
    } finally {
      setIsLoading(false);
    }
  };

  const handleFinalStep = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      const totp = new OTPAuth.TOTP({
        issuer: 'AEGIS by GISE',
        label: email,
        algorithm: 'SHA1',
        digits: 6,
        period: 30,
        secret: OTPAuth.Secret.fromBase32(totpSecret)
      });

      const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;

      if (isValid) {
        if (isFirstSetup) {
          await pb.collection('aegis_users').update(userId, { totp_secret: totpSecret });
        }
        onLoginSuccess();
      } else {
        setError("Code de sécurité invalide ou expiré.");
        setMfaCode('');
      }
    } catch (err) {
      setError("Une erreur critique est survenue lors de la vérification.");
    } finally {
      setIsLoading(false);
    }
  };

  const handleCancelMFA = () => {
    pb.authStore.clear();
    setStep(1);
    setPassword('');
    setMfaCode('');
    setError('');
    setIsFirstSetup(false);
  };

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
      
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <div className="flex justify-center">
          <div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
        </div>
        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
          AEGIS <span className="font-light text-slate-500">by GISE</span>
        </h2>
        <p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
          Accès restreint
        </p>
      </div>

      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-white py-8 px-4 shadow-sm border border-slate-200 rounded-xl sm:px-10">
          
          {step === 1 ? (
            <div className="space-y-6">
              {error && (
                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
                  {error}
                </div>
              )}

              {/* BOUTON SSO ZITADEL */}
              <div>
                <button
                  type="button"
                  onClick={handleZitadelLogin}
                  disabled={isLoading}
                  className="flex w-full justify-center items-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none transition-colors disabled:opacity-70"
                >
                  <svg className="w-5 h-5 mr-2 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                  </svg>
                  {isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
                </button>
              </div>

              {/* SÉPARATEUR VISUEL */}
              <div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t border-slate-200" />
                </div>
                <div className="relative flex justify-center text-sm">
                  <span className="bg-white px-2 text-slate-400">Ou via vos identifiants locaux</span>
                </div>
              </div>

              {/* FORMULAIRE CLASSIQUE */}
              <form className="space-y-6" onSubmit={handleLocalLogin}>
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
                  <div className="mt-1">
                    <input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="direction@client.com" />
                  </div>
                </div>

                <div>
                  <label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
                  <div className="mt-1">
                    <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="••••••••••••" />
                  </div>
                </div>

                <div>
                  <button type="submit" disabled={isLoading} className="flex w-full justify-center rounded-md border border-transparent bg-blue-900 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none transition-colors disabled:opacity-70">
                    {isLoading ? 'Chiffrement en cours...' : 'Authentification classique'}
                  </button>
                </div>
              </form>
            </div>
          ) : (
             <form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleFinalStep}>
               {error && (
                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
                  {error}
                </div>
               )}
               
               {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 pour lier votre appareil.</p>
                   <div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg inline-block 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" 
                   value={mfaCode}
                   onChange={(e) => setMfaCode(e.target.value)}
                   required 
                   maxLength={6} 
                   className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 placeholder-slate-300 shadow-sm focus:border-blue-900 focus:outline-none font-mono" 
                   placeholder="000000" 
                 />
               </div>
               
               <div className="flex space-x-3">
                 <button type="button" onClick={handleCancelMFA} disabled={isLoading} className="flex w-1/3 justify-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors disabled:opacity-70">
                   Annuler
                 </button>
                 <button type="submit" disabled={isLoading || mfaCode.length !== 6} className="flex w-2/3 justify-center rounded-md border border-transparent bg-emerald-600 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 transition-colors disabled:opacity-70">
                   {isLoading ? 'Vérification...' : 'Déverrouiller'}
                 </button>
               </div>
             </form>
          )}
        </div>
      </div>
    </div>
  );
}