'use client';

import { useState, useRef, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Mail, Shield, Clock, AlertCircle, Loader2, ArrowRight } from 'lucide-react';

interface OTPVerificationProps {
  signerId: string;
  signerName: string;
  signerEmail: string;
  documentTitle: string;
  onVerified: (token: string, signer: any, request: any) => void;
}

export default function OTPVerification({
  signerId,
  signerName,
  signerEmail,
  documentTitle,
  onVerified,
}: OTPVerificationProps) {
  const [otpSent, setOtpSent] = useState(false);
  const [otpCode, setOtpCode] = useState(['', '', '', '', '', '']);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [remainingTime, setRemainingTime] = useState(900); // 15 minutes
  const [attemptsLeft, setAttemptsLeft] = useState(3);

  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

  // Countdown timer
  useEffect(() => {
    if (!otpSent) return;

    const interval = setInterval(() => {
      setRemainingTime((prev) => {
        if (prev <= 0) {
          clearInterval(interval);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [otpSent]);

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  async function sendOTP() {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch(`/api/odentas-sign/signers/${signerId}/send-otp`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || 'Erreur lors de l\'envoi du code');
      }

      setOtpSent(true);
      setRemainingTime(900);
      setAttemptsLeft(3);
      
      // Auto-focus premier input
      setTimeout(() => {
        inputRefs.current[0]?.focus();
      }, 100);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Erreur inconnue');
    } finally {
      setIsLoading(false);
    }
  }

  function handleOTPChange(index: number, value: string) {
    if (!/^\d*$/.test(value)) return;

    const newOtp = [...otpCode];
    newOtp[index] = value.slice(-1);
    setOtpCode(newOtp);

    // Auto-focus next input
    if (value && index < 5) {
      inputRefs.current[index + 1]?.focus();
    }

    // Auto-submit when complete
    if (newOtp.every(digit => digit !== '') && index === 5) {
      verifyOTP(newOtp.join(''));
    }
  }

  function handleKeyDown(index: number, e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === 'Backspace' && !otpCode[index] && index > 0) {
      inputRefs.current[index - 1]?.focus();
    }
  }

  function handlePaste(e: React.ClipboardEvent) {
    e.preventDefault();
    const pastedData = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
    const newOtp = pastedData.split('').concat(Array(6).fill('')).slice(0, 6);
    setOtpCode(newOtp);

    if (pastedData.length === 6) {
      verifyOTP(pastedData);
    }
  }

  async function verifyOTP(code: string) {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch(`/api/odentas-sign/signers/${signerId}/verify-otp`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ otp: code }),
      });

      const data = await response.json();

      if (!response.ok) {
        if (data.remainingAttempts !== undefined) {
          setAttemptsLeft(data.remainingAttempts);
        }
        throw new Error(data.error || 'Code invalide');
      }

      // Success! Pass data to parent
      onVerified(data.sessionToken, data.signer, data.request);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Erreur de vérification');
      setOtpCode(['', '', '', '', '', '']);
      inputRefs.current[0]?.focus();
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
    >
      {/* Carte principale épurée */}
      <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
        {/* Header sobre */}
        <div className="border-b border-slate-200 px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center">
              <Shield className="w-5 h-5 text-indigo-600" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-slate-900">Vérification d'identité</h2>
              <p className="text-sm text-slate-600">Document : {documentTitle}</p>
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="p-6">
          {!otpSent ? (
            // État initial - envoi du code
            <div className="space-y-6">
              {/* Info signataire */}
              <div className="flex items-start gap-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
                <Mail className="w-5 h-5 text-slate-400 flex-shrink-0 mt-0.5" />
                <div className="flex-1">
                  <p className="text-sm font-medium text-slate-900 mb-1">
                    {signerName}
                  </p>
                  <p className="text-sm text-slate-600">{signerEmail}</p>
                </div>
              </div>

              {/* Explication */}
              <div className="space-y-2">
                <p className="text-sm text-slate-700">
                  Pour garantir votre identité, nous allons vous envoyer un code de vérification à 6 chiffres par email.
                </p>
                <div className="flex items-center gap-2 text-xs text-slate-500">
                  <Clock className="w-4 h-4" />
                  <span>Le code sera valable pendant 15 minutes</span>
                </div>
              </div>

              {/* Bouton d'envoi */}
              <button
                onClick={sendOTP}
                disabled={isLoading}
                className="w-full px-4 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors inline-flex items-center justify-center gap-2"
              >
                {isLoading ? (
                  <>
                    <Loader2 className="w-5 h-5 animate-spin" />
                    Envoi en cours...
                  </>
                ) : (
                  <>
                    Recevoir le code
                    <ArrowRight className="w-5 h-5" />
                  </>
                )}
              </button>

              {/* Erreur */}
              {error && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2"
                >
                  <AlertCircle className="w-4 h-4 text-red-600 flex-shrink-0 mt-0.5" />
                  <p className="text-sm text-red-700">{error}</p>
                </motion.div>
              )}
            </div>
          ) : (
            // État saisie du code
            <div className="space-y-6">
              {/* Instructions */}
              <div className="text-center space-y-2">
                <p className="text-sm text-slate-700">
                  Entrez le code reçu à l'adresse <strong className="text-slate-900">{signerEmail}</strong>
                </p>
                <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
                  <Clock className="w-4 h-4" />
                  <span>Expire dans {formatTime(remainingTime)}</span>
                </div>
              </div>

              {/* Champ OTP minimaliste */}
              <div className="flex justify-center gap-2" onPaste={handlePaste}>
                {otpCode.map((digit, index) => (
                  <input
                    key={index}
                    ref={(el) => {
                      inputRefs.current[index] = el;
                    }}
                    type="text"
                    inputMode="numeric"
                    maxLength={1}
                    value={digit}
                    onChange={(e) => handleOTPChange(index, e.target.value)}
                    onKeyDown={(e) => handleKeyDown(index, e)}
                    disabled={isLoading}
                    className="w-12 h-14 text-center text-xl font-semibold border border-slate-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-100 outline-none transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-slate-50"
                  />
                ))}
              </div>

              {/* Erreur */}
              {error && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="p-3 bg-red-50 border border-red-200 rounded-lg"
                >
                  <div className="flex items-start gap-2">
                    <AlertCircle className="w-4 h-4 text-red-600 flex-shrink-0 mt-0.5" />
                    <div className="flex-1">
                      <p className="text-sm text-red-700 font-medium">{error}</p>
                      {attemptsLeft > 0 && (
                        <p className="text-xs text-red-600 mt-1">
                          {attemptsLeft} tentative{attemptsLeft > 1 ? 's' : ''} restante{attemptsLeft > 1 ? 's' : ''}
                        </p>
                      )}
                    </div>
                  </div>
                </motion.div>
              )}

              {/* Indicateur de chargement */}
              {isLoading && (
                <div className="flex justify-center">
                  <Loader2 className="w-5 h-5 text-indigo-600 animate-spin" />
                </div>
              )}

              {/* Renvoyer le code */}
              <div className="text-center pt-4 border-t border-slate-200">
                <button
                  onClick={sendOTP}
                  disabled={isLoading || remainingTime > 840}
                  className="text-sm text-indigo-600 hover:text-indigo-700 font-medium disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                >
                  Vous n'avez pas reçu le code ? Renvoyer
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Footer sécurité */}
        <div className="border-t border-slate-200 bg-slate-50 px-6 py-4">
          <div className="flex items-start gap-3 text-sm">
            <Shield className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
            <div className="flex-1">
              <p className="font-medium text-slate-900 text-xs mb-0.5">Authentification sécurisée</p>
              <p className="text-xs text-slate-600">
                Le code est valable 15 minutes et ne peut être utilisé qu'une seule fois.
              </p>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
}
