espace-paie-odentas/app/signature-salarie/SignatureSalarieContent.tsx

"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { AlertTriangle } from "lucide-react";
import { usePageTitle } from "@/hooks/usePageTitle";
import Script from "next/script";

export default function SignatureSalarieContent() {
  const searchParams = useSearchParams();
  const docusealId = searchParams.get("docuseal_id");
  const [showError, setShowError] = useState(false);
  const [docusealLoaded, setDocusealLoaded] = useState(false);

  // Définir le titre de la page
  usePageTitle("Signature électronique");

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

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

  return (
    <>
      {/* Charger le script DocuSeal */}
      <Script
        src="https://cdn.docuseal.com/js/form.js"
        onLoad={() => setDocusealLoaded(true)}
        strategy="afterInteractive"
      />

      <div className="min-h-screen bg-white">
        {/* Header simple avec logo */}
        <div className="bg-white border-b border-gray-200 px-6 py-4">
          <div className="flex items-center justify-center">
            <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-8"
            />
          </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>

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