"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { AlertTriangle, Mail } 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";
import DocuSealSignatureModal from "./DocuSealSignatureModal";

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 [showSignatureModal, setShowSignatureModal] = useState(false);
  const [skipBirthdateCheck, setSkipBirthdateCheck] = 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 () => {
    setShowSignatureModal(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
  useEffect(() => {
    if (!docusealLoaded) return;

    const form = document.getElementById('docusealForm');
    if (!form) return;

    const handleCompleted = (e: any) => {
      console.log('Formulaire DocuSeal complété:', e.detail);
    };

    form.addEventListener('completed', handleCompleted);

    return () => {
      form.removeEventListener('completed', handleCompleted);
    };
  }, [docusealLoaded]);

  // 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 (
      <>
        <ToSignCard
          contract={signatureData.contract}
          onSignClick={() => setShowSignatureModal(true)}
          documentType={signatureData.documentType}
        />
        
        <DocuSealSignatureModal
          isOpen={showSignatureModal}
          docusealId={docusealId!}
          onClose={() => setShowSignatureModal(false)}
          onSignatureCompleted={handleSignatureCompleted}
        />
      </>
    );
  }

  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>
    </>
  );
}
