"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { AlertTriangle, Mail, CheckCircle2, Info } from "lucide-react";
import { usePageTitle } from "@/hooks/usePageTitle";
import Script from "next/script";
import BirthdateVerificationModal from "./BirthdateVerificationModal";
import ContactModal from "./ContactModal";
import AlreadySignedCard from "./AlreadySignedCard";
import ToSignCard from "./ToSignCard";

export default function SignatureSalarieContent() {
  const searchParams = useSearchParams();
  const docusealId = searchParams.get("docuseal_id");
  const [showError, setShowError] = useState(false);
  const [docusealLoaded, setDocusealLoaded] = useState(false);
  const [isVerified, setIsVerified] = useState(false);
  const [showContactModal, setShowContactModal] = useState(false);
  const [checkingStatus, setCheckingStatus] = useState(true);
  const [alreadySigned, setAlreadySigned] = useState(false);
  const [signatureData, setSignatureData] = useState<{
    contract: any;
    signed_at: string | null;
    downloadUrl: string | null;
    documentType?: 'contrat' | 'avenant'; // Nouveau: type de document
  } | null>(null);
  const [showDocuSealForm, setShowDocuSealForm] = useState(false);
  const [skipBirthdateCheck, setSkipBirthdateCheck] = useState(false);
  const [showCompletedModal, setShowCompletedModal] = useState(false);

  // Définir le titre de la page dynamiquement
  const documentTypeLabel = signatureData?.documentType === 'avenant' ? 'Avenant' : 'Contrat';
  usePageTitle(`Signature électronique - ${documentTypeLabel}`);

  // Vérifier si le contrat est déjà signé
  const checkSignatureStatus = async () => {
    if (!docusealId) return;

    try {
      console.log('🔍 Vérification du statut de signature...');
      const response = await fetch(`/api/signature-salarie/check-status?docuseal_id=${docusealId}`);
      
      if (response.ok) {
        const data = await response.json();
        console.log('📊 Statut reçu:', data);
        
        if (data.isSigned) {
          console.log('✅ Document déjà signé');
          setAlreadySigned(true);
          setSignatureData({
            contract: data.contract,
            signed_at: data.signed_at,
            downloadUrl: data.downloadUrl,
            documentType: data.documentType || 'contrat' // Par défaut "contrat" si non spécifié
          });
        } else {
          console.log('📝 Document pas encore signé');
          setAlreadySigned(false);
          setSignatureData({
            contract: data.contract,
            signed_at: null,
            downloadUrl: null,
            documentType: data.documentType || 'contrat'
          });
        }
      } else {
        console.error('❌ Erreur lors de la vérification du statut:', response.status);
      }
    } catch (error) {
      console.error('❌ Erreur lors de la vérification:', error);
    } finally {
      setCheckingStatus(false);
    }
  };

  useEffect(() => {
    checkSignatureStatus();
  }, [docusealId]);

  // Fonction pour rafraîchir après signature
  const handleSignatureCompleted = async () => {
    setShowCompletedModal(true);
  };

  const handleCloseCompletedModal = async () => {
    setShowCompletedModal(false);
    setCheckingStatus(true);
    setSkipBirthdateCheck(true); // Ne plus demander la date de naissance
    await checkSignatureStatus();
  };

  // Détecter Safari iOS et ajouter une classe
  useEffect(() => {
    const isSafariIOS = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /iPhone|iPad|iPod/.test(navigator.userAgent);
    if (isSafariIOS) {
      document.documentElement.classList.add('safari_only');
    }
  }, []);

  // Intercepter les erreurs console pour détecter les problèmes DocuSeal
  useEffect(() => {
    const originalConsoleError = console.error;
    console.error = function(...args: any[]) {
      if (
        args.length > 0 &&
        typeof args[0] === 'string' &&
        args[0].includes("Unable to find form with slug")
      ) {
        setShowError(true);
      }
      originalConsoleError.apply(console, args);
    };

    return () => {
      console.error = originalConsoleError;
    };
  }, []);

  // Écouter l'événement de complétion DocuSeal
  useEffect(() => {
    if (!docusealLoaded || !showDocuSealForm) return;

    const formElement = document.getElementById('docusealFormInline');
    if (!formElement) {
      console.log('⚠️ docusealFormInline non trouvé');
      return;
    }

    // Chercher l'élément <docuseal-form> à l'intérieur
    const docusealForm = formElement.querySelector('docuseal-form') as HTMLElement | null;
    if (!docusealForm) {
      console.log('⚠️ Element <docuseal-form> non trouvé');
      return;
    }

    const handleCompleted = (e: any) => {
      console.log('✅ [SIGNATURE SALARIE] Event completed reçu:', e.detail);
      handleSignatureCompleted();
    };

    console.log('🎯 Ajout du listener "completed" sur docuseal-form');
    docusealForm.addEventListener('completed', handleCompleted);

    return () => {
      console.log('🧹 Retrait du listener "completed"');
      docusealForm.removeEventListener('completed', handleCompleted);
    };
  }, [docusealLoaded, showDocuSealForm]);

  // Chargement pendant la vérification du statut
  if (checkingStatus) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
          <div className="text-gray-600 font-medium">Vérification du statut...</div>
        </div>
      </div>
    );
  }

  // Afficher la card "déjà signé" si c'est le cas ET que l'utilisateur est vérifié
  if (alreadySigned && signatureData && signatureData.signed_at && isVerified) {
    return (
      <AlreadySignedCard
        contract={signatureData.contract}
        signed_at={signatureData.signed_at}
        downloadUrl={signatureData.downloadUrl}
        documentType={signatureData.documentType}
      />
    );
  }

  // Afficher la card "à signer" si pas encore signé ET que l'utilisateur est vérifié
  if (!alreadySigned && signatureData && isVerified) {
    return (
      <>
        {/* Charger le script DocuSeal */}
        <Script
          src="https://cdn.docuseal.com/js/form.js"
          onLoad={() => setDocusealLoaded(true)}
          strategy="afterInteractive"
        />

        {/* Header fixed en haut de l'écran - TOUJOURS VISIBLE */}
        <div className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4 shadow-lg">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <h2 className="text-xl font-semibold text-white">
                  Signature électronique du {signatureData.documentType === 'avenant' ? 'avenant' : 'contrat'}
                </h2>
                <p className="text-sm text-blue-100 mt-1 flex items-center gap-1.5">
                  <Info className="w-4 h-4 flex-shrink-0" />
                  Descendez tout en bas du document pour accéder au champ de signature.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Contenu principal avec padding-top pour compenser le header fixed */}
        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/20 pt-32 pb-8 px-4">
          <div className="max-w-4xl mx-auto">
            {/* Card principale */}
            <div className="bg-white rounded-2xl shadow-xl border border-slate-200">
              {/* Corps - Afficher soit la card ToSign soit le formulaire DocuSeal */}
              {!showDocuSealForm ? (
                // Card ToSign sans le header (qui est maintenant au-dessus)
                <div className="px-8 py-6 space-y-6">
                  {/* Alerte importante */}
                  <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
                    <div className="flex items-start gap-3">
                      <Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
                      <div>
                        <p className="text-sm font-medium text-blue-900">
                          {signatureData.documentType === 'avenant' ? 'Avenant' : 'Contrat'} en attente de signature
                        </p>
                        <p className="text-sm text-blue-700 mt-1">
                          Merci de bien vouloir prendre connaissance {signatureData.documentType === 'avenant' ? 'de l\'avenant' : 'du contrat'} et de le signer électroniquement.
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Détails du contrat */}
                  <div className="space-y-4">
                    <h2 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
                      <svg className="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                      Détails {signatureData.documentType === 'avenant' ? 'de l\'avenant' : 'du contrat'}
                    </h2>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      {/* Numéro de contrat */}
                      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                        <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1">
                          Numéro de contrat
                        </p>
                        <p className="text-sm font-semibold text-slate-900">
                          {signatureData.contract.contract_number}
                        </p>
                      </div>

                      {/* Régime */}
                      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                        <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1">
                          Type de contrat
                        </p>
                        <p className="text-sm font-semibold text-slate-900">
                          {signatureData.contract.regime === 'CDDU_MONO' ? 'CDDU Mono-mois' : 
                           signatureData.contract.regime === 'CDDU_MULTI' ? 'CDDU Multi-mois' : 
                           signatureData.contract.regime === 'RG' ? 'Régime Général' : 
                           signatureData.contract.regime}
                        </p>
                      </div>

                      {/* Dates */}
                      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                        <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1 flex items-center gap-1">
                          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                          </svg>
                          Période
                        </p>
                        <p className="text-sm font-semibold text-slate-900">
                          {signatureData.contract.start_date === signatureData.contract.end_date 
                            ? `Journée du ${new Date(signatureData.contract.start_date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}`
                            : `${new Date(signatureData.contract.start_date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })} - ${new Date(signatureData.contract.end_date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })}`
                          }
                        </p>
                      </div>

                      {/* Montant */}
                      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                        <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1">
                          Montant brut
                        </p>
                        <p className="text-sm font-semibold text-slate-900">
                          {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(signatureData.contract.gross_amount)}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Bouton de signature */}
                  <div className="pt-2">
                    <button
                      onClick={() => setShowDocuSealForm(true)}
                      className="w-full inline-flex items-center justify-center gap-3 px-6 py-4 text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                    >
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                      </svg>
                      Voir et signer votre {signatureData.documentType === 'avenant' ? 'avenant' : 'contrat'}
                    </button>
                  </div>
                </div>
              ) : (
                // Formulaire DocuSeal avec hauteur réduite
                <div className="p-6 bg-white">
                  <style>{`
                    #docusealFormInline iframe {
                      max-height: 70vh !important;
                      min-height: 500px !important;
                    }
                  `}</style>
                  <div 
                    id="docusealFormInline"
                    dangerouslySetInnerHTML={{
                      __html: `
                        <docuseal-form
                          data-src="https://docuseal.eu/s/${docusealId}"
                          data-language="fr"
                          data-with-send-copy-button="false"
                          data-allow-to-resubmit="false"
                          data-allow-typed-signature="false"
                          data-remember-signature="true"
                          data-with-title="false"
                          data-completed-message-body="Le document a été signé."
                        >
                        </docuseal-form>
                      `
                    }}
                  />
                </div>
              )}

              {/* Footer */}
              <div className="bg-slate-50 border-t border-slate-200 px-6 py-4">
                <div className="flex items-center justify-between text-sm">
                  <p className="text-slate-600">
                    Besoin d'aide ?{' '}
                    <a 
                      href="mailto:paie@odentas.fr" 
                      className="text-indigo-600 hover:text-indigo-700 font-medium hover:underline"
                    >
                      paie@odentas.fr
                    </a>
                  </p>
                  <img 
                    src="https://ci3.googleusercontent.com/meips/ADKq_NaYk41Pm5XLYFH2kxxXdCOkuRa2Ji2vLeI41LRtc9oBmfS7-NhGtPUzYhw7arh9LdEyrUS--rk3mW1WSrKTtKjsTtiUcZVwfYFyqvV8YSZ8ZFJtQzqG43CgPmcZsSdWmIrxmPATULmFaFEpIIO-IdbHkat3RBeqwDQ=s0-d-e1-ft#https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.png" 
                    alt="Odentas" 
                    className="h-6 opacity-60"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Modal de confirmation après signature */}
        {showCompletedModal && (
          <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 p-4">
            <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
              {/* Header */}
              <div className="p-6 bg-emerald-50 border-b border-emerald-100">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center">
                      <CheckCircle2 className="w-6 h-6 text-emerald-600" />
                    </div>
                    <div>
                      <h2 className="text-xl font-semibold text-slate-900">Signature reçue avec succès</h2>
                      <p className="text-sm text-slate-600 mt-1">Votre signature électronique a bien été enregistrée.</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Content */}
              <div className="p-6 space-y-4">
                <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
                  <ul className="text-sm text-slate-700 space-y-2 list-disc pl-5">
                    <li>Votre contrat est en cours de traitement.</li>
                    <li>Le contrat signé sera disponible au téléchargement dans quelques instants.</li>
                    <li>Vous recevrez également une copie par email.</li>
                  </ul>
                </div>
              </div>

              {/* Footer */}
              <div className="px-6 py-4 bg-gray-50 border-t flex justify-end">
                <button
                  onClick={handleCloseCompletedModal}
                  className="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-medium transition-colors"
                >
                  J'ai compris
                </button>
              </div>
            </div>
          </div>
        )}
      </>
    );
  }

  if (!docusealId) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="max-w-md mx-auto text-center p-6 bg-white rounded-lg shadow-lg">
          <div className="text-red-600 mb-4">
            <AlertTriangle className="w-12 h-12 mx-auto" />
          </div>
          <h1 className="text-xl font-semibold text-gray-900 mb-2">Lien invalide</h1>
          <p className="text-gray-600 mb-4">
            Le lien de signature est invalide ou incomplet. Veuillez vérifier le lien reçu par email.
          </p>
          <p className="text-sm text-gray-500">
            Besoin d'aide ? Contactez-nous à{' '}
            <a href="mailto:paie@odentas.fr" className="text-blue-600 hover:underline">
              paie@odentas.fr
            </a>
          </p>
        </div>
      </div>
    );
  }

  if (showError) {
    return (
      <div className="flex items-center justify-center min-h-screen p-4">
        <div className="max-w-md mx-auto text-center p-6 bg-white rounded-lg shadow-lg">
          <div className="text-amber-600 mb-4">
            <AlertTriangle className="w-12 h-12 mx-auto" />
          </div>
          <h1 className="text-xl font-semibold text-gray-900 mb-2">Document inexistant</h1>
          <p className="text-gray-600 mb-4">
            Ce document n'existe pas ou a été supprimé pour cause de modification. Dans ce cas, vous avez reçu un e-mail pour signer la nouvelle version.
          </p>
          <p className="text-sm text-gray-500">
            Contactez-nous à{' '}
            <a href="mailto:paie@odentas.fr" className="text-blue-600 hover:underline">
              paie@odentas.fr
            </a>
            {' '}si vous avez besoin d'assistance.
          </p>
        </div>
      </div>
    );
  }

  // Si le contrat est déjà signé ET vérifié, ne rien afficher d'autre (le return plus haut s'en charge)
  // Sinon, afficher le formulaire DocuSeal normal

  return (
    <>
      {/* Modal de vérification de la date de naissance - TOUJOURS affichée si pas vérifié et pas skip */}
      {!isVerified && !skipBirthdateCheck && docusealId && (
        <BirthdateVerificationModal
          docuseal_id={docusealId}
          onVerified={() => setIsVerified(true)}
        />
      )}

      {/* Charger le script DocuSeal seulement si pas déjà signé */}
      {!alreadySigned && (
        <Script
          src="https://cdn.docuseal.com/js/form.js"
          onLoad={() => setDocusealLoaded(true)}
          strategy="afterInteractive"
        />
      )}

      <div className="min-h-screen bg-white">
        {/* Header avec logo agrandi et bouton contact */}
        <div className="bg-white border-b border-gray-200 px-6 py-5">
          <div className="max-w-7xl mx-auto flex items-center justify-between">
            <div className="flex-1"></div>
            <div className="flex flex-col items-center justify-center flex-1 gap-2">
              <img 
                src="https://ci3.googleusercontent.com/meips/ADKq_NaYk41Pm5XLYFH2kxxXdCOkuRa2Ji2vLeI41LRtc9oBmfS7-NhGtPUzYhw7arh9LdEyrUS--rk3mW1WSrKTtKjsTtiUcZVwfYFyqvV8YSZ8ZFJtQzqG43CgPmcZsSdWmIrxmPATULmFaFEpIIO-IdbHkat3RBeqwDQ=s0-d-e1-ft#https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.png" 
                alt="Odentas" 
                className="h-12"
              />
              <h1 className="text-lg font-semibold text-gray-800">
                Signature Électronique
              </h1>
            </div>
            <div className="flex-1 flex justify-end">
              <button
                onClick={() => setShowContactModal(true)}
                className="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
              >
                <Mail className="w-4 h-4" />
                <span className="hidden sm:inline">Contactez l'équipe Odentas</span>
                <span className="sm:hidden">Contact</span>
              </button>
            </div>
          </div>
        </div>

        {/* Conteneur du formulaire DocuSeal */}
        <div id="docusealWrapper" className="max-w-4xl mx-auto p-4">
          <div 
            id="docusealForm"
            dangerouslySetInnerHTML={{
              __html: `
                <docuseal-form
                  data-src="https://docuseal.eu/s/${docusealId}"
                  data-language="fr"
                  data-with-send-copy-button="false"
                  data-allow-to-resubmit="false"
                  data-allow-typed-signature="false"
                  data-remember-signature="true"
                  data-with-title="false"
                  data-completed-message-body="Le document a été signé."
                >
                </docuseal-form>
              `
            }}
          />
        </div>
      </div>

      {/* Modal de contact */}
      <ContactModal 
        isOpen={showContactModal} 
        onClose={() => setShowContactModal(false)} 
      />

      <style jsx global>{`
        /* Styles spécifiques pour Safari iOS si nécessaire */
        .safari_only {
          /* Ajoutez des styles spécifiques pour Safari iOS ici si nécessaire */
        }
      `}</style>
    </>
  );
}
