'use client';

import { useEffect, useMemo, useRef, useState } from 'react';
import { FileSignature, BellRing, XCircle, Sparkles, CheckCircle2, AlertCircle, Info, Lightbulb } from 'lucide-react';
import Script from 'next/script';
import { usePageTitle } from '@/hooks/usePageTitle';
import { useQuery } from '@tanstack/react-query';
import { useDemoMode } from '@/hooks/useDemoMode';
import { createPortal } from 'react-dom';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { useStaffOrgSelection } from '@/hooks/useStaffOrgSelection';

type AirtableRecord = {
  id: string;
  fields: Record<string, any>;
};

type ContractsResponse = {
  records: AirtableRecord[];
};

type ContratWithSignatures = AirtableRecord & {
  fields: {
    Reference?: string;
    embed_src_employeur?: string;
    docuseal_template_id?: string;
    [key: string]: any;
  };
};

function classNames(...arr: Array<string | false | null | undefined>) {
  return arr.filter(Boolean).join(' ');
}

// Fonction pour calculer l'urgence basée sur la date de début
function getUrgencyIndicator(startDate: string | null): { color: string; show: boolean; label: string } {
  if (!startDate) return { color: '', show: false, label: '' };
  
  const start = new Date(startDate);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  start.setHours(0, 0, 0, 0);
  
  const diffTime = start.getTime() - today.getTime();
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  // Rouge si contrat démarre aujourd'hui ou dans le passé
  if (diffDays <= 0) {
    return { color: 'bg-red-600', show: true, label: 'Urgent - Début aujourd\'hui ou passé' };
  }
  // Bleu si dans 48 heures ou moins (1 ou 2 jours)
  if (diffDays <= 2) {
    return { color: 'bg-blue-500', show: true, label: 'Urgent - Début dans moins de 48h' };
  }
  // Pas de voyant si plus de 48 heures
  return { color: '', show: false, label: '' };
}

// Fonction pour trier les enregistrements par date de début (ordre croissant)
function sortByStartDate(records: AirtableRecord[]): AirtableRecord[] {
  return [...records].sort((a, b) => {
    const dateA = a.fields?.start_date || a.fields?.['Date de début'];
    const dateB = b.fields?.start_date || b.fields?.['Date de début'];
    
    if (!dateA && !dateB) return 0;
    if (!dateA) return 1;
    if (!dateB) return -1;
    
    return new Date(dateA).getTime() - new Date(dateB).getTime();
  });
}

// Composant pour un bouton désactivé avec tooltip
function DisabledButton({ label, className }: { label: string; className?: string }) {
  const btnRef = useRef<HTMLButtonElement | null>(null);
  const [tipOpen, setTipOpen] = useState(false);
  const [tipPos, setTipPos] = useState<{ top: number; left: number } | null>(null);

  function computePos() {
    const el = btnRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setTipPos({ 
      top: r.top + window.scrollY - 10, 
      left: r.left + window.scrollX + r.width / 2
    });
  }

  useEffect(() => {
    if (!tipOpen) return;
    const onScroll = () => computePos();
    const onResize = () => computePos();
    window.addEventListener('scroll', onScroll, true);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('scroll', onScroll, true);
      window.removeEventListener('resize', onResize);
    };
  }, [tipOpen]);

  return (
    <>
      <button
        ref={btnRef}
        onMouseEnter={() => { computePos(); setTipOpen(true); }}
        onMouseLeave={() => setTipOpen(false)}
        onFocus={() => { computePos(); setTipOpen(true); }}
        onBlur={() => setTipOpen(false)}
        disabled
        className={`px-4 py-1.5 rounded-lg bg-slate-200 text-slate-400 text-sm font-medium cursor-not-allowed ${className || ''}`}
      >
        {label}
      </button>
      {tipOpen && tipPos && createPortal(
        <div className="z-[1200] fixed" style={{ top: tipPos.top, left: tipPos.left, transform: 'translate(-50%, -100%)' }}>
          <div className="inline-block max-w-[280px] rounded-lg bg-gray-900 text-white text-sm px-3 py-2 shadow-xl">
            Désactivé en mode démo
          </div>
          <div className="mx-auto w-0 h-0" style={{ 
            borderLeft: '6px solid transparent', 
            borderRight: '6px solid transparent', 
            borderTop: '6px solid rgb(17, 24, 39)' 
          }} />
        </div>,
        document.body
      )}
    </>
  );
}

// Hook pour récupérer les infos utilisateur
function useUserInfo() {
  return useQuery({
    queryKey: ["user-info"],
    queryFn: async () => {
      try {
        const res = await fetch("/api/me", { 
          cache: "no-store", 
          headers: { Accept: "application/json" },
          credentials: "include"
        });
        if (!res.ok) return null;
        const me = await res.json();
        
        return {
          isStaff: Boolean(me.is_staff || me.isStaff),
          orgId: me.orgId || me.active_org_id || null,
          orgName: me.orgName || me.active_org_name || "Organisation",
        };
      } catch {
        return null;
      }
    },
    staleTime: 30_000,
  });
}

// Hook pour récupérer les organisations (staff uniquement)
function useOrganizations() {
  const { data: userInfo, isSuccess: userInfoLoaded } = useUserInfo();
  
  return useQuery({
    queryKey: ["organizations"],
    queryFn: async () => {
      try {
        const res = await fetch("/api/staff/organizations", { 
          cache: "no-store", 
          headers: { Accept: "application/json" },
          credentials: "include"
        });
        if (!res.ok) return [];
        const data = await res.json();
        return data.organizations || [];
      } catch {
        return [];
      }
    },
    enabled: userInfoLoaded && !!userInfo?.isStaff,
    staleTime: 60_000,
  });
}

export default function SignaturesElectroniques() {
  usePageTitle("Signatures électroniques");
  // Supabase client authentifié côté client (cookies) pour Realtime + RLS
  const sb = useMemo(() => createClientComponentClient(), []);
  
  // 🎭 Détection du mode démo
  const { isDemoMode } = useDemoMode();
  
  // Helper pour valider les UUIDs
  const isValidUUID = (str: string | null): boolean => {
    if (!str) return false;
    return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(str);
  };
  
  // Zustand store pour la sélection d'organisation (staff)
  const { 
    selectedOrgId: globalSelectedOrgId, 
    setSelectedOrg: setGlobalSelectedOrg 
  } = useStaffOrgSelection();
  
  const [contrats, setContrats] = useState<ContratWithSignatures[]>([]);
  const [loading, setLoading] = useState(true);
  const [reloadingAfterSignatureChange, setReloadingAfterSignatureChange] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isOnline, setIsOnline] = useState(true);
  // Indicateur Realtime (visuel + logs)
  const [isRealtimeLive, setIsRealtimeLive] = useState(false);
  
  // États pour les contrats
  const [recordsEmployeur, setRecordsEmployeur] = useState<AirtableRecord[]>([]);
  const [recordsSalarie, setRecordsSalarie] = useState<AirtableRecord[]>([]);
  const recordsEmployeurRef = useRef<AirtableRecord[]>([]);
  const recordsSalarieRef = useRef<AirtableRecord[]>([]);
  
  // États pour les avenants
  const [avenantsEmployeur, setAvenantsEmployeur] = useState<AirtableRecord[]>([]);
  const [avenantsSalarie, setAvenantsSalarie] = useState<AirtableRecord[]>([]);
  const avenantsEmployeurRef = useRef<AirtableRecord[]>([]);
  const avenantsSalarieRef = useRef<AirtableRecord[]>([]);
  
  // États pour les modales
  const [modalTitle, setModalTitle] = useState('');
  const [embedSrc, setEmbedSrc] = useState<string | null>(null);
  const [pageEmbedSrc, setPageEmbedSrc] = useState<string | null>(null);
  const [pageEmbedTitle, setPageEmbedTitle] = useState('');
  const pageIframeRef = useRef<HTMLIFrameElement>(null);
  
  // État pour les relances
  const [loadingRelance, setLoadingRelance] = useState<Record<string, boolean>>({});
  
  // État pour le sélecteur d'organisation (staff uniquement)
  // Initialisé avec la valeur globale si elle est un UUID valide
  const [selectedOrgId, setSelectedOrgId] = useState<string>(
    (globalSelectedOrgId && isValidUUID(globalSelectedOrgId)) ? globalSelectedOrgId : ""
  );
  
  // Référence pour le conteneur DocuSeal
  const docusealContainerRef = useRef<HTMLDivElement>(null);
  
  // États pour la gestion de la signature
  const [showSignatureModal, setShowSignatureModal] = useState(false);
  const [currentSignature, setCurrentSignature] = useState<string | null>(null);
  const [uploadingSignature, setUploadingSignature] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [uploadMessage, setUploadMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [activeSignature, setActiveSignature] = useState<string | null>(null); // Signature pour DocuSeal (remplace sessionStorage)
  const fileInputRef = useRef<HTMLInputElement>(null);
  const isMountedRef = useRef(true);
  const signingContractIdRef = useRef<string | null>(null);

  useEffect(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  useEffect(() => {
    recordsEmployeurRef.current = recordsEmployeur;
  }, [recordsEmployeur]);

  useEffect(() => {
    recordsSalarieRef.current = recordsSalarie;
  }, [recordsSalarie]);
  
  // Charger les infos utilisateur et organisations
  const { data: userInfo } = useUserInfo();
  const { data: organizations } = useOrganizations();
  
  // Synchronisation bidirectionnelle : global → local
  useEffect(() => {
    if (userInfo?.isStaff && globalSelectedOrgId && isValidUUID(globalSelectedOrgId)) {
      setSelectedOrgId(globalSelectedOrgId);
    }
  }, [globalSelectedOrgId, userInfo?.isStaff]);
  
  // Suppression de pollActive et pollTimer car le polling a été retiré

  // Normaliser le format de la signature (ajouter le préfixe si nécessaire)
  function normalizeSignatureFormat(signature: string | null): string | null {
    if (!signature) return null;
    
    // Si déjà au bon format (data:image/...), retourner tel quel
    if (signature.startsWith('data:image/')) {
      return signature;
    }
    
    // Sinon, ajouter le préfixe PNG
    return `data:image/png;base64,${signature}`;
  }

  // Charger la signature de l'organisation
  async function loadSignature() {
    // Pour le staff, utiliser l'organisation sélectionnée, sinon l'organisation de l'utilisateur
    const orgIdToUse = (userInfo?.isStaff && selectedOrgId) ? selectedOrgId : userInfo?.orgId;
    
    console.log('🔍 [loadSignature] Debug:', {
      isStaff: userInfo?.isStaff,
      selectedOrgId,
      userOrgId: userInfo?.orgId,
      orgIdToUse
    });
    
    if (!orgIdToUse) {
      console.log('⚠️ Aucune organisation sélectionnée pour charger la signature');
      setCurrentSignature(null);
      return;
    }
    
    console.log('🔍 Chargement signature pour org_id:', orgIdToUse);
    
    try {
      const res = await fetch(`/api/organization/signature?org_id=${orgIdToUse}`, { cache: 'no-store' });
      console.log('📡 Response status:', res.status);
      
      if (res.ok) {
        const data = await res.json();
        console.log('📦 Response data:', data);
        
        // Vérifier le format de la signature
        if (data.signature_b64) {
          console.log('🖼️ Format signature:', {
            length: data.signature_b64.length,
            startsWithData: data.signature_b64.startsWith('data:'),
            first50chars: data.signature_b64.substring(0, 50)
          });
        }
        
        setCurrentSignature(data.signature_b64 || null);
        console.log('✅ Signature chargée:', data.signature_b64 ? `présente (${data.signature_b64.substring(0, 50)}...)` : 'absente');
      } else {
        console.error('❌ Erreur HTTP:', res.status, await res.text());
      }
    } catch (e) {
      console.error('❌ Erreur chargement signature:', e);
    }
  }

  // Convertir une image (PNG ou JPEG) en base64 PNG
  async function convertImageToBase64(file: File): Promise<string> {
    return new Promise((resolve, reject) => {
      // Créer une image temporaire
      const img = new Image();
      const reader = new FileReader();
      
      reader.onload = (e) => {
        img.src = e.target?.result as string;
      };
      
      img.onload = () => {
        try {
          // Créer un canvas pour convertir en PNG
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          
          const ctx = canvas.getContext('2d');
          if (!ctx) {
            reject(new Error('Impossible de créer le contexte canvas'));
            return;
          }
          
          // Dessiner l'image sur le canvas
          ctx.drawImage(img, 0, 0);
          
          // Convertir en PNG avec le préfixe data URL complet
          const pngDataUrl = canvas.toDataURL('image/png');
          
          console.log('✅ Image convertie en PNG:', {
            originalType: file.type,
            originalSize: file.size,
            dataUrlLength: pngDataUrl.length,
            dimensions: `${img.width}x${img.height}`,
            hasPrefix: pngDataUrl.startsWith('data:image/png;base64,')
          });
          
          // Retourner le data URL complet (data:image/png;base64,...)
          resolve(pngDataUrl);
        } catch (err) {
          reject(err);
        }
      };
      
      img.onerror = () => {
        reject(new Error('Impossible de charger l\'image'));
      };
      
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  }

  // Sauvegarder la signature
  async function saveSignature(base64: string) {
    // Pour le staff, utiliser l'organisation sélectionnée, sinon l'organisation de l'utilisateur
    const orgIdToUse = (userInfo?.isStaff && selectedOrgId) ? selectedOrgId : userInfo?.orgId;
    
    if (!orgIdToUse) {
      setUploadMessage({ type: 'error', text: 'Organisation non identifiée' });
      return;
    }

    console.log('💾 Sauvegarde signature pour org_id:', orgIdToUse);

    setUploadingSignature(true);
    setUploadMessage(null);
    
    try {
      const res = await fetch('/api/organization/signature', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          org_id: orgIdToUse,
          signature_b64: base64
        })
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || 'Erreur lors de la sauvegarde');
      }

      setCurrentSignature(base64);
      console.log('✅ Signature sauvegardée avec succès');
      setUploadMessage({ type: 'success', text: 'Signature enregistrée avec succès !' });
      
      // Fermer le modal après 2 secondes et recharger les contrats
      setTimeout(async () => {
        setShowSignatureModal(false);
        setUploadMessage(null);
        
        // Recharger les contrats pour mettre à jour les badges de signature
        console.log('🔄 Rechargement des contrats après sauvegarde signature...');
        setReloadingAfterSignatureChange(true);
        await load();
        setReloadingAfterSignatureChange(false);
      }, 2000);
    } catch (e: any) {
      console.error('Erreur sauvegarde signature:', e);
      setUploadMessage({ type: 'error', text: e.message || 'Impossible de sauvegarder la signature' });
    } finally {
      setUploadingSignature(false);
    }
  }

  // Supprimer la signature
  async function deleteSignature() {
    // Pour le staff, utiliser l'organisation sélectionnée, sinon l'organisation de l'utilisateur
    const orgIdToUse = (userInfo?.isStaff && selectedOrgId) ? selectedOrgId : userInfo?.orgId;
    
    if (!orgIdToUse) {
      setUploadMessage({ type: 'error', text: 'Organisation non identifiée' });
      return;
    }

    console.log('🗑️ Suppression signature pour org_id:', orgIdToUse);

    setUploadingSignature(true);
    setUploadMessage(null);
    setShowDeleteConfirm(false);
    
    try {
      const res = await fetch('/api/organization/signature', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          org_id: orgIdToUse
        })
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || 'Erreur lors de la suppression');
      }

      setCurrentSignature(null);
      console.log('✅ Signature supprimée avec succès');
      setUploadMessage({ type: 'success', text: 'Signature supprimée avec succès !' });
      
      // Fermer le modal après 2 secondes et recharger les contrats
      setTimeout(async () => {
        setShowSignatureModal(false);
        setUploadMessage(null);
        
        // Recharger les contrats pour mettre à jour les badges de signature
        console.log('🔄 Rechargement des contrats après suppression signature...');
        setReloadingAfterSignatureChange(true);
        await load();
        setReloadingAfterSignatureChange(false);
      }, 2000);
    } catch (e: any) {
      console.error('Erreur suppression signature:', e);
      setUploadMessage({ type: 'error', text: e.message || 'Impossible de supprimer la signature' });
    } finally {
      setUploadingSignature(false);
    }
  }

  // Gérer l'upload d'un fichier image
  async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;

    await processImageFile(file);
    
    // Réinitialiser l'input pour permettre de ré-uploader le même fichier
    if (fileInputRef.current) fileInputRef.current.value = '';
  }

  // Traiter un fichier image (validation + conversion + sauvegarde)
  async function processImageFile(file: File) {
    // Vérifier le type de fichier
    if (!file.type.match(/^image\/(png|jpeg|jpg)$/i)) {
      setUploadMessage({ type: 'error', text: 'Seuls les fichiers PNG et JPG sont acceptés' });
      return;
    }

    // Vérifier la taille (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      setUploadMessage({ type: 'error', text: 'Le fichier est trop volumineux (max 5MB)' });
      return;
    }

    try {
      setUploadingSignature(true);
      setUploadMessage(null);
      const base64 = await convertImageToBase64(file);
      await saveSignature(base64);
    } catch (e: any) {
      console.error('Erreur conversion image:', e);
      setUploadMessage({ type: 'error', text: 'Erreur lors de la conversion de l\'image' });
      setUploadingSignature(false);
    }
  }

  // Gérer le drag over
  function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  }

  // Gérer le drag leave
  function handleDragLeave(e: React.DragEvent<HTMLDivElement>) {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  }

  // Gérer le drop
  async function handleDrop(e: React.DragEvent<HTMLDivElement>) {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    const files = e.dataTransfer.files;
    if (files.length > 0) {
      await processImageFile(files[0]);
    }
  }

  // Load current contracts and amendments to sign (server-side API fetches Supabase)
  async function load() {
    if (!isMountedRef.current) return;
    try {
      setError(null);
      
      // Ajouter le paramètre org_id si sélectionné (staff uniquement)
      const orgParam = selectedOrgId ? `&org_id=${selectedOrgId}` : '';
      
      const [rEmp, rSal, rAveEmp, rAveSal] = await Promise.all([
        fetch(`/api/signatures-electroniques/contrats?scope=employeur${orgParam}`, { cache: 'no-store' }),
        fetch(`/api/signatures-electroniques/contrats?scope=salarie${orgParam}`, { cache: 'no-store' }),
        fetch(`/api/signatures-electroniques/avenants?scope=employeur${orgParam}`, { cache: 'no-store' }),
        fetch(`/api/signatures-electroniques/avenants?scope=salarie${orgParam}`, { cache: 'no-store' }),
      ]);
      if (!rEmp.ok) throw new Error(`HTTP contrats employeur ${rEmp.status}`);
      if (!rSal.ok) throw new Error(`HTTP contrats salarie ${rSal.status}`);
      if (!rAveEmp.ok) throw new Error(`HTTP avenants employeur ${rAveEmp.status}`);
      if (!rAveSal.ok) throw new Error(`HTTP avenants salarie ${rAveSal.status}`);
      
      const emp: ContractsResponse = await rEmp.json();
      const sal: ContractsResponse = await rSal.json();
      const aveEmp: ContractsResponse = await rAveEmp.json();
      const aveSal: ContractsResponse = await rAveSal.json();
      
      if (!isMountedRef.current) return;
      
      const empRecords = emp.records || [];
      const salarieRecords = sal.records || [];
      const aveEmpRecords = aveEmp.records || [];
      const aveSalRecords = aveSal.records || [];
      
      setRecordsEmployeur(empRecords);
      setRecordsSalarie(salarieRecords);
      setAvenantsEmployeur(aveEmpRecords);
      setAvenantsSalarie(aveSalRecords);
      
      recordsEmployeurRef.current = empRecords;
      recordsSalarieRef.current = salarieRecords;
      avenantsEmployeurRef.current = aveEmpRecords;
      avenantsSalarieRef.current = aveSalRecords;
    } catch (e: any) {
      console.error('Load contracts/amendments error', e);
      if (!isMountedRef.current) return;
      setError(e?.message || 'Erreur de chargement');
    } finally {
      if (!isMountedRef.current) return;
      setLoading(false);
    }
  }

  async function loadWithRetry(options?: { attempts?: number; delayMs?: number; targetContractId?: string | null }) {
    const attempts = options?.attempts ?? 4;
    const delayMs = options?.delayMs ?? 1200;
    const targetContractId = options?.targetContractId ?? null;

    for (let attempt = 0; attempt < attempts; attempt++) {
      if (!isMountedRef.current) break;
      await load();

      if (!targetContractId) break;

      const stillInEmployeur = recordsEmployeurRef.current.some((rec) => rec.id === targetContractId);
      if (!stillInEmployeur) break;

      await new Promise((resolve) => setTimeout(resolve, delayMs));
    }
  }

  useEffect(() => {
    console.log('🔄 [useEffect] Déclenchement avec:', { selectedOrgId, userOrgId: userInfo?.orgId });
    load();
    loadSignature(); // Charger la signature au démarrage et quand l'organisation change
  }, [selectedOrgId, userInfo?.orgId]); // Recharger quand l'organisation change (staff ou user)

  // Réinitialiser le message quand le modal s'ouvre
  useEffect(() => {
    if (showSignatureModal) {
      setUploadMessage(null);
    }
  }, [showSignatureModal]);

  // useEffect pour injecter le composant DocuSeal uniquement quand embedSrc change
  useEffect(() => {
    if (!embedSrc || !docusealContainerRef.current) return;

    const container = docusealContainerRef.current;
    
    // Utiliser la signature depuis l'état React au lieu de sessionStorage
    const signature = activeSignature;
    
    // Construire les attributs
    let dataSignatureAttr = '';
    if (signature) {
      console.log('✅ [SIGNATURES] Injection de la signature dans DocuSeal form');
      dataSignatureAttr = `data-signature="${signature}"`;
    } else {
      console.log('⚠️ [SIGNATURES] Pas de signature à injecter');
    }
    
    // Injecter le HTML une seule fois
    container.innerHTML = `<docuseal-form
      data-src="${embedSrc}"
      data-language="fr"
      data-with-title="false"
      data-background-color="#fff"
      data-allow-typed-signature="false"
      ${dataSignatureAttr}>
    </docuseal-form>`;

    // Écouter l'événement 'completed' émis par <docuseal-form>
    const formEl = container.querySelector('docuseal-form') as HTMLElement | null;
    if (formEl) {
      const onCompleted = async (_event: Event) => {
        console.log('✅ [SIGNATURES] Event completed reçu - déclenchement du rafraîchissement');

        if (!isMountedRef.current) return;

        // Remplacer le contenu du modal par le message de confirmation
        if (container) {
          container.innerHTML = `
            <div class="min-h-[500px] flex items-center justify-center p-6 animate-fadeIn">
              <div class="max-w-lg w-full">
                <!-- Header -->
                <div class="p-6 bg-emerald-50 border border-emerald-100 rounded-t-2xl">
                  <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </div>
                    <div>
                      <h2 class="text-xl font-semibold text-slate-900">Signature employeur prise en compte</h2>
                      <p class="text-sm text-slate-600 mt-1">Le processus se poursuit automatiquement côté salarié.</p>
                    </div>
                  </div>
                </div>

                <!-- Content -->
                <div class="p-6 bg-white border-x border-slate-200">
                  <div class="bg-slate-50 border border-slate-200 rounded-lg p-4">
                    <ul class="text-sm text-slate-700 space-y-2 list-disc pl-5">
                      <li>Le salarié va recevoir son propre exemplaire pour signature électronique.</li>
                      <li>Vous pourrez télécharger le contrat depuis la fiche contrat dès que la signature du salarié aura été reçue.</li>
                    </ul>
                  </div>
                </div>

                <!-- Footer -->
                <div class="px-6 py-4 bg-gray-50 border border-t-0 border-slate-200 rounded-b-2xl flex justify-end">
                  <button
                    id="btn-close-confirmation"
                    class="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>
          `;

          // Ajouter l'événement de fermeture
          const btnClose = container.querySelector('#btn-close-confirmation') as HTMLButtonElement | null;
          if (btnClose) {
            btnClose.onclick = () => {
              const dlg = document.getElementById('dlg-signature') as HTMLDialogElement | null;
              if (dlg) dlg.close();
            };
          }
        }

        setReloadingAfterSignatureChange(true);
        try {
          // Laisser le temps au webhook DocuSeal de mettre à jour Supabase puis recharger avec retries
          await new Promise((resolve) => setTimeout(resolve, 900));
          await loadWithRetry({
            attempts: 4,
            delayMs: 1200,
            targetContractId: signingContractIdRef.current,
          });
        } catch (err) {
          console.warn('DocuSeal fallback load() failed', err);
        } finally {
          if (isMountedRef.current) {
            setReloadingAfterSignatureChange(false);
          }
        }
      };
      formEl.addEventListener('completed', onCompleted as EventListener);
      return () => {
        try { formEl.removeEventListener('completed', onCompleted as EventListener); } catch {}
      };
    }
  }, [embedSrc, activeSignature]); // Re-render quand embedSrc ou activeSignature change

  // Ajouter des écouteurs pour recharger les données quand un modal se ferme
  useEffect(() => {
    const dlgSignature = document.getElementById('dlg-signature') as HTMLDialogElement | null;
    const dlgEmbed = document.getElementById('dlg-embed') as HTMLDialogElement | null;

    const handleSignatureClose = () => {
      console.log('🔄 Modal signature fermé, rechargement des données...');
      load();
      signingContractIdRef.current = null;
    };

    const handleEmbedClose = () => {
      console.log('🔄 Modal embed fermé, rechargement des données...');
      load();
    };

    if (dlgSignature) {
      dlgSignature.addEventListener('close', handleSignatureClose);
    }

    if (dlgEmbed) {
      dlgEmbed.addEventListener('close', handleEmbedClose);
    }

    return () => {
      if (dlgSignature) {
        dlgSignature.removeEventListener('close', handleSignatureClose);
      }
      if (dlgEmbed) {
        dlgEmbed.removeEventListener('close', handleEmbedClose);
      }
    };
  }, [selectedOrgId]);

  // Polling supprimé pour éviter l'interférence avec les signatures
  // Les données seront rechargées manuellement ou au refresh de la page

  const stats = useMemo(() => ({
    total: recordsEmployeur.length + recordsSalarie.length,
    ready: recordsEmployeur.length,
    salarieTodo: recordsSalarie.length,
  }), [recordsEmployeur, recordsSalarie]);

  // Org courante pour filtrer Realtime: staff -> org sélectionnée, sinon org de l'utilisateur
  const currentOrgId = useMemo(() => {
    if (userInfo?.isStaff) {
      return selectedOrgId || null;
    }
    return userInfo?.orgId || null;
  }, [userInfo?.isStaff, selectedOrgId, userInfo?.orgId]);

  // Realtime: écouter les changements sur cddu_contracts
  useEffect(() => {
    // Désactiver en mode démo (les APIs renvoient vide, inutile d'écouter)
    if (isDemoMode) return;

    let contractsChannel: any = null;
    let mounted = true;

    (async () => {
      try {
        // Contrats: écouter INSERT/UPDATE/DELETE, optionnellement filtré par org_id
  contractsChannel = sb.channel('public:cddu_contracts');
        const contractsFilter = currentOrgId ? `org_id=eq.${currentOrgId}` : undefined;
        contractsChannel.on(
          'postgres_changes',
          { event: '*', schema: 'public', table: 'cddu_contracts', ...(contractsFilter ? { filter: contractsFilter } : {}) },
          (_payload: any) => {
            // Recharger les listes dès qu'un changement pertinent survient
            try { load(); } catch (err) { console.warn('Realtime load() failed', err); }
            // Un changement reçu -> on considère la connexion active
            if (!isRealtimeLive) setIsRealtimeLive(true);
          }
        );
        const sub1 = await contractsChannel.subscribe();
        if (!mounted) return;
        if (sub1 && (sub1.status === 'timed_out' || sub1.status === 'closed' || (sub1 as any)?.error)) {
          console.warn('Realtime subscribe status (cddu_contracts):', sub1);
        } else {
          console.info('[Realtime] SUBSCRIBED -> public:cddu_contracts', { filter: contractsFilter || 'none' });
          setIsRealtimeLive(true);
        }
      } catch (err) {
        console.warn('Realtime subscription failed for public.cddu_contracts.', (err as any)?.message || err);
      }

      // Note: organization_details subscription désactivée car Realtime n'est pas activé pour cette table
      // La signature est rechargée au changement de l'org sélectionnée via le useEffect
    })();

    return () => {
      mounted = false;
      try {
        if (contractsChannel) {
          // @ts-ignore
          if (sb.removeChannel) sb.removeChannel(contractsChannel);
          else contractsChannel.unsubscribe && contractsChannel.unsubscribe();
          console.info('[Realtime] UNSUBSCRIBED <- public:cddu_contracts');
        }
      } catch (err) {
        console.warn('Error unsubscribing cddu_contracts channel', err);
      }
      // On repasse l'indicateur en hors ligne lorsque les canaux se ferment
      setIsRealtimeLive(false);
    };
  }, [currentOrgId, isDemoMode]);

  async function openSignature(rec: AirtableRecord) {
    const f = rec.fields || {};
    const isAvenant = f.is_avenant === true;
    let embed: string | null = null;
    const docRef = f.reference || f.Reference || rec.id;
    const title = `Signature (Employeur) · ${isAvenant ? 'Avenant' : 'Contrat'} ${docRef}`;
    setModalTitle(title);
    signingContractIdRef.current = rec.id;

    console.log('🔍 [SIGNATURES] Debug - record fields:', f);
    console.log('🔍 [SIGNATURES] Debug - is_avenant:', isAvenant);
    console.log('🔍 [SIGNATURES] Debug - embed_src_employeur:', f.embed_src_employeur);
    console.log('🔍 [SIGNATURES] Debug - docuseal_template_id:', f.docuseal_template_id);
    console.log('🔍 [SIGNATURES] Debug - docuseal_submission_id:', f.docuseal_submission_id);
    console.log('🔍 [SIGNATURES] Debug - signature_b64:', f.signature_b64 ? 'présente' : 'absente');

    // Gérer la signature pré-remplie
    // Pour les contrats: utiliser f.signature_b64
    // Pour les avenants: utiliser currentSignature (signature de l'organisation)
    let signatureToUse = null;
    
    if (isAvenant) {
      // Pour les avenants, utiliser la signature de l'organisation
      if (currentSignature) {
        console.log('✅ [SIGNATURES AVENANT] Utilisation de la signature de l\'organisation');
        signatureToUse = currentSignature;
      } else {
        console.log('⚠️ [SIGNATURES AVENANT] Pas de signature d\'organisation disponible');
      }
    } else {
      // Pour les contrats, utiliser la signature du contrat
      if (f.signature_b64) {
        console.log('✅ [SIGNATURES CONTRAT] Utilisation de la signature du contrat');
        signatureToUse = f.signature_b64;
      } else {
        console.log('⚠️ [SIGNATURES CONTRAT] Pas de signature dans les données du contrat');
      }
    }
    
    if (signatureToUse) {
      const normalizedSignature = normalizeSignatureFormat(signatureToUse);
      if (normalizedSignature) {
        setActiveSignature(normalizedSignature);
        console.log('✅ [SIGNATURES] Format normalisé:', normalizedSignature.substring(0, 50) + '...');
      }
    } else {
      console.log('⚠️ [SIGNATURES] Pas de signature à pré-remplir');
      setActiveSignature(null);
    }

    // Pour les avenants, utiliser directement le docuseal_submission_id
    if (isAvenant && f.docuseal_submission_id) {
      console.log('🔍 [SIGNATURES AVENANT] Utilisation du submission_id:', f.docuseal_submission_id);
      
      try {
        const detRes = await fetch(`/api/docuseal/submissions/${encodeURIComponent(f.docuseal_submission_id)}`, { cache: 'no-store' });
        const detData = await detRes.json();
        
        console.log('📋 [SIGNATURES AVENANT] Détails submission DocuSeal:', detData);
        
        const roles = detData?.submitters || detData?.roles || [];
        const employer = roles.find((r: any) => (r.role || r.name) === 'Employeur') || {};
        
        if (employer?.slug) {
          embed = `https://docuseal.eu/s/${employer.slug}`;
          console.log('🔗 [SIGNATURES AVENANT] URL embed depuis slug:', embed);
        }
      } catch (e) {
        console.warn('❌ [SIGNATURES AVENANT] Erreur récupération submission:', e);
      }
    }

    // 1) Si l'URL d'embed est déjà en base (signature_link) - pour les contrats
    if (!embed && typeof f.embed_src_employeur === 'string' && f.embed_src_employeur.trim()) {
      const signatureLink = f.embed_src_employeur.trim();
      console.log('🔗 [SIGNATURES] Signature link trouvé:', signatureLink);
      
      // Extraire le docuseal_id du lien de signature
      const signatureLinkMatch = signatureLink.match(/docuseal_id=([^&]+)/);
      if (signatureLinkMatch) {
        const docusealId = signatureLinkMatch[1];
        
        // URL propre sans paramètres
        embed = `https://docuseal.eu/s/${docusealId}`;
        console.log('🔗 [SIGNATURES] URL embed depuis signature_link:', embed);
      } else {
        // Si c'est déjà une URL DocuSeal directe
        if (signatureLink.includes('docuseal.eu/s/')) {
          embed = signatureLink;
          console.log('🔗 [SIGNATURES] URL embed directe DocuSeal:', embed);
        }
      }
    }

    // 2) Sinon, récupérer via le proxy DocuSeal à partir du template
    if (!embed && f.docuseal_template_id) {
      console.log('🔍 [SIGNATURES] Template ID trouvé, tentative récupération DocuSeal:', f.docuseal_template_id);
      
      try {
        const tId = String(f.docuseal_template_id);
        const subRes = await fetch(`/api/docuseal/templates/${encodeURIComponent(tId)}/submissions`, { cache: 'no-store' });
        const subData = await subRes.json();
        
        console.log('📋 [SIGNATURES] Submissions DocuSeal:', subData);
        
        const first = Array.isArray(subData?.data) ? subData.data[0] : (Array.isArray(subData) ? subData[0] : subData);
        const subId = first?.id;
        
        if (subId) {
          console.log('🔍 [SIGNATURES] Submission ID trouvé:', subId);
          
          const detRes = await fetch(`/api/docuseal/submissions/${encodeURIComponent(subId)}`, { cache: 'no-store' });
          const detData = await detRes.json();
          
          console.log('📋 [SIGNATURES] Détails submission DocuSeal:', detData);
          
          const roles = detData?.submitters || detData?.roles || [];
          const employer = roles.find((r: any) => (r.role || r.name) === 'Employeur') || {};
          
          if (employer?.slug) {
            // URL propre sans paramètres
            embed = `https://docuseal.eu/s/${employer.slug}`;
            console.log('🔗 [SIGNATURES] URL embed depuis DocuSeal API (slug):', embed);
          } else {
            embed = employer?.embed_src || employer?.sign_src || detData?.embed_src || null;
            console.log('🔗 [SIGNATURES] URL embed alternative:', embed);
          }
        } else {
          console.warn('❌ [SIGNATURES] Aucun submission ID trouvé');
        }
      } catch (e) {
        console.warn('❌ [SIGNATURES] DocuSeal fetch (template->submission) failed', e);
      }
    }

    console.log('🎯 [SIGNATURES] URL embed finale:', embed);

    if (embed) {
      setEmbedSrc(embed);
      // show modal
      const dlg = document.getElementById('dlg-signature') as HTMLDialogElement | null;
      if (dlg) {
        if (typeof dlg.showModal === 'function') dlg.showModal();
        else dlg.setAttribute('open', '');
      }
    } else {
      console.error('❌ [SIGNATURES] Aucune URL d\'embed disponible');
      alert("Lien d'embed indisponible pour ce contrat.");
    }
  }

  function openEmbed(url: string, title: string) {
    try {
      const u = new URL(url, location.origin);
      u.searchParams.set('embed', '1');
      setPageEmbedSrc(u.toString());
      setPageEmbedTitle(title);
      const dlg = document.getElementById('dlg-embed') as HTMLDialogElement | null;
      if (dlg) {
        if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open','');
      }
      // small delay then try to inject CSS once iframe loads
      setTimeout(() => {
        const iframe = pageIframeRef.current;
        if (!iframe) return;
        const inject = () => {
          try {
            const doc = iframe.contentDocument || iframe.ownerDocument;
            if (!doc) return;
            const style = doc.createElement('style');
            style.textContent = `
              aside, header { display:none !important }
              .grid { grid-template-columns: 1fr !important }
              main { padding: 0 !important }
              body { background:#fff !important }
            `;
            doc.head.appendChild(style);
          } catch {}
        };
        if (iframe.contentWindow) {
          iframe.addEventListener('load', inject, { once: true });
        }
      }, 50);
    } catch {}
  }

  async function relancerSalarie(rec: AirtableRecord) {
    const contractId = rec.id;
    const f = rec.fields || {};
    const ref = f.Reference || contractId;
    const nom = f['Nom salarié'] || f['Nom Salarié'] || f['Nom'] || f['Salarié'] || f['Nom complet'] || f['Prénom Nom'] || f['Prenom Nom'] || f['Nom et Prénom'] || 'Salarié';

    setLoadingRelance(prev => ({ ...prev, [contractId]: true }));

    try {
      const response = await fetch('/api/signatures-electroniques/relance', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ contractId }),
      });

      const result = await response.json();

      if (response.ok) {
        alert(`✅ Email de relance envoyé avec succès à ${nom} pour le contrat ${ref}`);
        // Optionnel: recharger la liste pour mettre à jour les données
        load();
      } else {
        alert(`❌ Erreur lors de l'envoi de la relance: ${result.error || result.message || 'Erreur inconnue'}`);
      }
    } catch (error: any) {
      console.error('Erreur relance salarié:', error);
      alert(`❌ Erreur lors de l'envoi de la relance: ${error.message || 'Erreur de réseau'}`);
    } finally {
      setLoadingRelance(prev => ({ ...prev, [contractId]: false }));
    }
  }

  return (
    <div className="mx-auto max-w-5xl px-4 py-6">
      {/* DocuSeal web component script */}
      <Script src="https://cdn.docuseal.com/js/form.js" strategy="lazyOnload" />

      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
        <div className="flex items-center gap-3">
          <h1 className="text-2xl font-semibold">Signatures électroniques</h1>
          {!isDemoMode && (
            <span
              title={isRealtimeLive ? 'Connexion Realtime active' : 'Realtime inactif'}
              className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs ${
                isRealtimeLive
                  ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
                  : 'border-slate-200 bg-slate-50 text-slate-600'
              }`}
            >
              <span className={`inline-block h-2 w-2 rounded-full ${isRealtimeLive ? 'bg-emerald-500' : 'bg-slate-400'}`} />
              {isRealtimeLive ? 'Live' : 'Hors ligne'}
            </span>
          )}
        </div>
        
        {/* Sélecteur d'organisation (visible uniquement par le staff) */}
        {userInfo?.isStaff && (
          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-slate-700">Organisation :</label>
            <select
              className="px-3 py-2 rounded-lg border bg-white text-sm min-w-[200px]"
              value={selectedOrgId}
              onChange={(e) => {
                const newOrgId = e.target.value;
                setSelectedOrgId(newOrgId);
                
                // Synchronisation bidirectionnelle : local → global
                if (newOrgId) {
                  const selectedOrg = organizations?.find((org: any) => org.id === newOrgId);
                  if (selectedOrg) {
                    setGlobalSelectedOrg(newOrgId, selectedOrg.name);
                  }
                } else {
                  setGlobalSelectedOrg(null, null);
                }
              }}
              disabled={!organizations || organizations.length === 0}
            >
              <option value="">
                {!organizations || organizations.length === 0 
                  ? "Chargement..." 
                  : "Toutes les organisations"}
              </option>
              {organizations && organizations.map((org: any) => (
                <option key={org.id} value={org.id}>{org.name}</option>
              ))}
            </select>
            {organizations && organizations.length > 0 && (
              <span className="text-xs text-slate-500">({organizations.length})</span>
            )}
          </div>
        )}
      </div>

      {/* 🎭 Message informatif en mode démo */}
      {isDemoMode && (
        <div className="mb-6 rounded-xl border-2 border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 p-4 shadow-sm">
          <div className="flex items-center gap-3">
            <div className="rounded-lg bg-amber-100 p-2">
              <Info className="h-5 w-5 text-amber-700" />
            </div>
            <h3 className="font-semibold text-amber-900">Mode démonstration</h3>
          </div>
        </div>
      )}

      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <div className="rounded-lg border p-3">
          <div className="text-xs text-slate-500">Contrats dans la liste</div>
          <div className="text-xl font-bold">{stats.total}</div>
        </div>
        <div className="rounded-lg border p-3">
          <div className="text-xs text-slate-500">À signer par l'employeur</div>
          <div className="text-xl font-bold">{stats.ready}</div>
        </div>
        <div className="rounded-lg border p-3">
          <div className="text-xs text-slate-500">À signer par les salariés</div>
          <div className="text-xl font-bold">{stats.salarieTodo}</div>
        </div>
      </div>

      {/* Card informative sur la signature pré-remplie - Visible uniquement si une organisation est identifiée */}
      {((userInfo?.isStaff && selectedOrgId) || (!userInfo?.isStaff && userInfo?.orgId)) && (
        <div className="mt-6 rounded-xl border-2 border-blue-100 bg-gradient-to-br from-blue-50/50 to-indigo-50/30 p-6 shadow-sm">
          <div className="flex items-start gap-4">
            {/* Icon */}
            <div className="flex-shrink-0 mt-1">
              <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                <Sparkles className="w-6 h-6 text-blue-600" />
              </div>
            </div>
            
            {/* Content */}
            <div className="flex-1 min-w-0">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h3 className="text-lg font-semibold text-slate-900 mb-2 flex items-center gap-2">
                    <span>Nouveau : Signature pré-remplie automatiquement</span>
                  </h3>
                  <p className="text-sm text-slate-600 leading-relaxed mb-3">
                    La signature du signataire des contrats de travail, qui était déjà utilisée pour les <strong>AEM</strong> et les <strong>bordereaux Congés Spectacles</strong>, est maintenant <strong>pré-remplie automatiquement</strong> sur les contrats de travail.
                  </p>
                  
                  {/* Statut de la signature */}
                  <div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-3">
                    {currentSignature ? (
                      <>
                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100 border border-emerald-200 w-fit">
                          <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                          <span className="text-sm font-medium text-emerald-700">Signature connue</span>
                        </div>
                        {isDemoMode ? (
                          <DisabledButton label="Voir / modifier la signature" className="w-full sm:w-auto" />
                        ) : (
                          <button
                            onClick={() => setShowSignatureModal(true)}
                            className="px-4 py-1.5 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors w-full sm:w-auto"
                          >
                            Voir / modifier la signature
                          </button>
                        )}
                      </>
                    ) : (
                      <>
                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-100 border border-amber-200 w-fit">
                          <AlertCircle className="w-4 h-4 text-amber-600" />
                          <span className="text-sm font-medium text-amber-700">Signature non connue</span>
                        </div>
                        {isDemoMode ? (
                          <DisabledButton label="Ajouter une signature" className="w-full sm:w-auto" />
                        ) : (
                          <button
                            onClick={() => setShowSignatureModal(true)}
                            className="px-4 py-1.5 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors w-full sm:w-auto"
                          >
                            Ajouter une signature
                          </button>
                        )}
                      </>
                    )}
                  </div>
                  
                  <div className="flex items-start gap-2 text-xs text-slate-500">
                    <Lightbulb className="w-4 h-4 text-slate-400 flex-shrink-0 mt-0.5" />
                    <span>Cette signature sera automatiquement proposée lors de la signature électronique des contrats, mais reste modifiable à chaque signature.</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="mt-6">
        {loading ? (
          <div className="text-slate-500">Chargement…</div>
        ) : error ? (
          <div className="text-red-600">Erreur: {error}</div>
        ) : (recordsEmployeur.length + recordsSalarie.length + avenantsEmployeur.length + avenantsSalarie.length) === 0 ? (
          <div className="text-slate-500">Aucun document à signer.</div>
        ) : (
          <>
            {/* Légende des voyants d'urgence */}
            <div className="mb-4 p-3 rounded-lg bg-slate-50 border border-slate-200">
              <div className="flex items-center gap-6 text-xs">
                <div className="flex items-center gap-2">
                  <span className="font-semibold text-slate-700">Légende :</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-3 h-3 rounded-full bg-red-600" />
                  <span className="text-slate-600">Début aujourd'hui ou passé</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-3 h-3 rounded-full bg-blue-500" />
                  <span className="text-slate-600">Début dans moins de 48h</span>
                </div>
              </div>
            </div>

            {/* Table 1: employeur pending (contrats + avenants) */}
            <div className="rounded-xl border overflow-hidden shadow-sm">
              <div className="flex items-center justify-between gap-3 px-3 py-2 border-b bg-white/60 backdrop-blur supports-[backdrop-filter]:bg-white/60[backdrop-filter]:bg-slate-900/60">
                <div className="text-sm font-medium text-slate-700">Documents en attente de signature employeur</div>
                <div className="text-xs text-slate-500">{recordsEmployeur.length + avenantsEmployeur.length} élément(s)</div>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm">
                  <thead>
                    <tr className="text-left text-slate-500 border-b bg-slate-50/60">
                      <th className="px-3 py-2 font-medium whitespace-nowrap w-8"></th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Type</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Référence</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Salarié</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Matricule</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Date de début</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Statut</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap text-right">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {sortByStartDate([...recordsEmployeur, ...avenantsEmployeur]).map((rec, idx) => {
                      const f = rec.fields || {};
                      const isAvenant = f.is_avenant === true;
                      const isSigned = String(f['Contrat signé par employeur'] || '').toLowerCase() === 'oui';
                      const mat = f.employee_matricule || f['Matricule API'] || f.Matricule || '—';
                      const ref = f.reference || f.Reference || '—';
                      const nom = f.employee_name || f['Nom salarié'] || f['Nom Salarié'] || f['Nom'] || f['Salarié'] || f['Nom complet'] || f['Prénom Nom'] || f['Prenom Nom'] || f['Nom et Prénom'] || '—';
                      const dateDebut = f.start_date || f['Date de début'] || null;
                      const dateDebutFormatted = dateDebut ? new Date(dateDebut).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '—';
                      const docType = isAvenant ? 'Avenant' : 'Contrat';
                      const urlPath = isAvenant ? `/staff/avenants/${rec.id}` : `/contrats/${rec.id}`;
                      const docLabel = isAvenant ? `Avenant · ${ref}` : `Contrat · ${ref}`;
                      const urgency = getUrgencyIndicator(dateDebut);
                      
                      return (
                        <tr key={rec.id} className={classNames(idx % 2 ? 'bg-white' : 'bg-slate-50/30', 'hover:bg-slate-50 transition-colors')}>
                        <td className="px-3 py-2 text-center">
                          {urgency.show && (
                            <span className={`inline-block w-3 h-3 rounded-full ${urgency.color}`} title={urgency.label} />
                          )}
                        </td>
                        <td className="px-3 py-2 text-slate-700 whitespace-nowrap">
                          <span className={classNames(
                            'inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border font-medium',
                            isAvenant ? 'border-purple-200 text-purple-700 bg-purple-50' : 'border-blue-200 text-blue-700 bg-blue-50'
                          )}>
                            {docType}
                          </span>
                        </td>
                        <td className="px-3 py-2 font-medium text-slate-900 whitespace-nowrap">
                          <a
                            href={urlPath}
                            onClick={(e)=>{ e.preventDefault(); openEmbed(urlPath, docLabel); }}
                            className="hover:underline"
                          >{ref}</a>
                        </td>
                        <td className="px-3 py-2 text-slate-700 max-w-[260px] truncate" title={nom}>
                          <a
                            href={mat ? `/salaries/${encodeURIComponent(mat)}` : '#'}
                            onClick={(e)=>{ if (!mat || mat === '—') return; e.preventDefault(); openEmbed(`/salaries/${mat}`, `Salarié · ${nom}`); }}
                            className={classNames('hover:underline', (!mat || mat === '—') && 'pointer-events-none opacity-60')}
                          >{nom}</a>
                        </td>
                        <td className="px-3 py-2 text-slate-700 whitespace-nowrap">{mat}</td>
                        <td className="px-3 py-2 text-slate-700 whitespace-nowrap">{dateDebutFormatted}</td>
                        <td className="px-3 py-2 whitespace-nowrap">
                          <span className={classNames(
                            'inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border',
                            isSigned ? 'border-emerald-200 text-emerald-700 bg-emerald-50' : 'border-amber-200 text-amber-700 bg-amber-50'
                          )}>
                            {isSigned ? 'Signé employeur' : 'En attente employeur'}
                          </span>
                        </td>
                          <td className="px-3 py-2 text-right whitespace-nowrap">
                            <button
                              className="inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs font-medium hover:bg-slate-50 disabled:opacity-60"
                              disabled={isSigned}
                              onClick={() => openSignature(rec)}
                              aria-label={`Signer ${isAvenant ? "l'avenant" : "le contrat"} ${ref}`}
                            >
                              <FileSignature className="w-3.5 h-3.5" aria-hidden="true" />
                              Signer
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Table 2: salarie pending (contrats + avenants) */}
            <div className="rounded-xl border overflow-hidden shadow-sm mt-8">
              <div className="flex items-center justify-between gap-3 px-3 py-2 border-b bg-white/60 backdrop-blur supports-[backdrop-filter]:bg-white/60[backdrop-filter]:bg-slate-900/60">
                <div className="text-sm font-medium text-slate-700">Documents en attente de signature salarié</div>
                <div className="text-xs text-slate-500">{recordsSalarie.length + avenantsSalarie.length} élément(s)</div>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm">
                  <thead>
                    <tr className="text-left text-slate-500 border-b bg-slate-50/60">
                      <th className="px-3 py-2 font-medium whitespace-nowrap w-8"></th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Type</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Référence</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Salarié</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Matricule</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Date de début</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap">Statut</th>
                      <th className="px-3 py-2 font-medium whitespace-nowrap text-right">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {sortByStartDate([...recordsSalarie, ...avenantsSalarie]).map((rec, idx) => {
                      const f = rec.fields || {};
                      const isAvenant = f.is_avenant === true;
                      const mat = f.employee_matricule || f['Matricule API'] || f.Matricule || '—';
                      const ref = f.reference || f.Reference || '—';
                      const nom = f.employee_name || f['Nom salarié'] || f['Nom Salarié'] || f['Nom'] || f['Salarié'] || f['Nom complet'] || f['Prénom Nom'] || f['Prenom Nom'] || f['Nom et Prénom'] || '—';
                      const dateDebut = f.start_date || f['Date de début'] || null;
                      const dateDebutFormatted = dateDebut ? new Date(dateDebut).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '—';
                      const docType = isAvenant ? 'Avenant' : 'Contrat';
                      const urlPath = isAvenant ? `/staff/avenants/${rec.id}` : `/contrats/${rec.id}`;
                      const docLabel = isAvenant ? `Avenant · ${ref}` : `Contrat · ${ref}`;
                      const urgency = getUrgencyIndicator(dateDebut);
                      
                      return (
                        <tr key={rec.id} className={classNames(idx % 2 ? 'bg-white' : 'bg-slate-50/30', 'hover:bg-slate-50 transition-colors')}>
                          <td className="px-3 py-2 text-center">
                            {urgency.show && (
                              <span className={`inline-block w-3 h-3 rounded-full ${urgency.color}`} title={urgency.label} />
                            )}
                          </td>
                          <td className="px-3 py-2 text-slate-700 whitespace-nowrap">
                            <span className={classNames(
                              'inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border font-medium',
                              isAvenant ? 'border-purple-200 text-purple-700 bg-purple-50' : 'border-blue-200 text-blue-700 bg-blue-50'
                            )}>
                              {docType}
                            </span>
                          </td>
                          <td className="px-3 py-2 font-medium text-slate-900 whitespace-nowrap">
                            <a
                              href={urlPath}
                              onClick={(e)=>{ e.preventDefault(); openEmbed(urlPath, docLabel); }}
                              className="hover:underline"
                            >{ref}</a>
                          </td>
                          <td className="px-3 py-2 text-slate-700 max-w-[260px] truncate" title={nom}>
                            <a
                              href={mat ? `/salaries/${encodeURIComponent(mat)}` : '#'}
                              onClick={(e)=>{ if (!mat || mat === '—') return; e.preventDefault(); openEmbed(`/salaries/${mat}`, `Salarié · ${nom}`); }}
                              className={classNames('hover:underline', (!mat || mat === '—') && 'pointer-events-none opacity-60')}
                            >{nom}</a>
                          </td>
                          <td className="px-3 py-2 text-slate-700 whitespace-nowrap">{mat}</td>
                          <td className="px-3 py-2 text-slate-700 whitespace-nowrap">{dateDebutFormatted}</td>
                          <td className="px-3 py-2 whitespace-nowrap">
                            <span className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border border-sky-200 text-sky-700 bg-sky-50">
                              En attente salarié
                            </span>
                          </td>
                          <td className="px-3 py-2 text-right whitespace-nowrap">
                            <button
                              className="inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs font-medium hover:bg-slate-50 disabled:opacity-60"
                              onClick={() => relancerSalarie(rec)}
                              disabled={loadingRelance[rec.id]}
                              aria-label={`Relancer le salarié pour ${ref}`}
                            >
                              <BellRing className="w-3.5 h-3.5" aria-hidden="true" />
                              {loadingRelance[rec.id] ? 'Envoi...' : 'Relancer salarié'}
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </>
        )}
      </div>

      {/* Modal signature with docuseal-form */}
      <dialog id="dlg-signature" className="fixed inset-0 z-50 rounded-lg border max-w-4xl w-[92vw] max-h-[90vh] overflow-hidden backdrop:bg-black/50 m-auto p-0">
        <div className="sticky top-0 z-10 flex items-center justify-between px-4 py-3 border-b bg-white">
          <strong className="text-slate-900">{modalTitle}</strong>
          <button
            onClick={() => {
              const dlg = document.getElementById('dlg-signature') as HTMLDialogElement | null;
              if (dlg) dlg.close();
            }}
            className="p-1.5 rounded hover:bg-slate-50"
            aria-label="Fermer"
            title="Fermer"
          >
            <XCircle className="w-4 h-4" aria-hidden="true" />
          </button>
        </div>
        <div className="overflow-auto" style={{ height: 'calc(90vh - 60px)', minHeight: 480 }}>
          {embedSrc ? (
            <div ref={docusealContainerRef} />
          ) : (
            <div className="p-4 text-slate-500">Préparation du formulaire…</div>
          )}
        </div>
      </dialog>

      {/* Modal embed page */}
      <dialog id="dlg-embed" className="fixed inset-0 z-50 rounded-lg border max-w-5xl w-[96vw] backdrop:bg-black/50 m-auto p-0">
        <div className="flex items-center justify-between px-4 py-3 border-b">
          <strong>{pageEmbedTitle || 'Aperçu'}</strong>
          <button
            onClick={() => {
              const dlg = document.getElementById('dlg-embed') as HTMLDialogElement | null;
              if (dlg) dlg.close();
            }}
            className="p-1.5 rounded hover:bg-slate-50"
            aria-label="Fermer"
            title="Fermer"
          >
            <XCircle className="w-4 h-4" aria-hidden="true" />
          </button>
        </div>
        <div className="p-0" style={{ height: '80vh', minHeight: 520 }}>
          {pageEmbedSrc ? (
            <iframe ref={pageIframeRef} src={pageEmbedSrc} className="w-full h-full border-0" />
          ) : (
            <div className="p-4 text-slate-500">Chargement…</div>
          )}
        </div>
      </dialog>

      {/* Modal de gestion de la signature */}
      {showSignatureModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
            {/* Header */}
            <div className="flex items-center justify-between px-6 py-4 border-b bg-gradient-to-r from-blue-50 to-indigo-50">
              <h2 className="text-xl font-semibold text-slate-900">
                {currentSignature ? 'Modifier la signature' : 'Ajouter une signature'}
              </h2>
              <button
                onClick={() => {
                  setShowSignatureModal(false);
                  setShowDeleteConfirm(false);
                }}
                className="p-2 rounded-lg hover:bg-white/60 transition-colors"
                aria-label="Fermer"
              >
                <XCircle className="w-5 h-5 text-slate-500" />
              </button>
            </div>

            {/* Body */}
            <div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
              {/* Message de succès/erreur */}
              {uploadMessage && (
                <div className={`mb-6 p-4 rounded-lg border-2 ${
                  uploadMessage.type === 'success' 
                    ? 'bg-emerald-50 border-emerald-200' 
                    : 'bg-red-50 border-red-200'
                }`}>
                  <div className="flex items-center gap-3">
                    {uploadMessage.type === 'success' ? (
                      <CheckCircle2 className="w-5 h-5 text-emerald-600 flex-shrink-0" />
                    ) : (
                      <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
                    )}
                    <p className={`text-sm font-medium ${
                      uploadMessage.type === 'success' ? 'text-emerald-800' : 'text-red-800'
                    }`}>
                      {uploadMessage.text}
                    </p>
                  </div>
                </div>
              )}

              {/* Affichage de la signature actuelle */}
              {currentSignature && (
                <div className="mb-6">
                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2 gap-2">
                    <label className="text-sm font-medium text-slate-700">
                      Signature actuelle :
                    </label>
                    {!showDeleteConfirm ? (
                      <button
                        onClick={() => setShowDeleteConfirm(true)}
                        disabled={uploadingSignature}
                        className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto"
                      >
                        <XCircle className="w-4 h-4" />
                        Supprimer
                      </button>
                    ) : (
                      <div className="flex flex-col sm:flex-row sm:items-center gap-2 w-full sm:w-auto">
                        <span className="text-xs text-slate-600 text-center sm:text-left">Confirmer ?</span>
                        <div className="flex items-center gap-2">
                          <button
                            onClick={deleteSignature}
                            disabled={uploadingSignature}
                            className="flex-1 sm:flex-none flex items-center justify-center gap-1 px-2 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded transition-colors disabled:opacity-50"
                          >
                            Oui, supprimer
                          </button>
                          <button
                            onClick={() => setShowDeleteConfirm(false)}
                            disabled={uploadingSignature}
                            className="flex-1 sm:flex-none px-2 py-1 text-xs font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded transition-colors disabled:opacity-50"
                          >
                            Annuler
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="rounded-lg border-2 border-slate-200 bg-slate-50 p-4 flex items-center justify-center">
                    <img
                      src={normalizeSignatureFormat(currentSignature) || ''}
                      alt="Signature actuelle"
                      className="max-h-32 max-w-full object-contain"
                    />
                  </div>
                </div>
              )}

              {/* Upload de nouvelle signature */}
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">
                  {currentSignature ? 'Remplacer par une nouvelle signature :' : 'Charger une signature :'}
                </label>
                <div 
                  className={`border-2 border-dashed rounded-lg p-8 text-center transition-all cursor-pointer ${
                    isDragging 
                      ? 'border-blue-500 bg-blue-100/50 scale-[1.02]' 
                      : 'border-slate-300 hover:border-blue-400 hover:bg-blue-50/30'
                  } ${uploadingSignature ? 'opacity-50 cursor-not-allowed' : ''}`}
                  onDragOver={handleDragOver}
                  onDragLeave={handleDragLeave}
                  onDrop={handleDrop}
                  onClick={() => !uploadingSignature && fileInputRef.current?.click()}
                >
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept="image/png,image/jpeg,image/jpg"
                    onChange={handleFileUpload}
                    disabled={uploadingSignature}
                    className="hidden"
                    id="signature-upload"
                  />
                  <FileSignature className={`w-12 h-12 mx-auto mb-3 transition-colors ${
                    isDragging ? 'text-blue-500' : 'text-slate-400'
                  }`} />
                  <p className="text-sm font-medium text-slate-700 mb-1">
                    {isDragging ? 'Déposez l\'image ici' : 'Cliquez ou glissez-déposez une image'}
                  </p>
                  <p className="text-xs text-slate-500">
                    PNG ou JPG • Max 5 MB
                  </p>
                </div>

                {uploadingSignature && (
                  <div className="mt-4 flex items-center justify-center gap-2 text-blue-600">
                    <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span className="text-sm font-medium">Traitement en cours...</span>
                  </div>
                )}
              </div>

              {/* Informations */}
              <div className="mt-6 p-4 rounded-lg bg-blue-50 border border-blue-100">
                <div className="flex gap-3">
                  <Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
                  <div className="text-sm text-blue-800">
                    <p className="font-medium mb-1">À propos de la signature</p>
                    <ul className="text-xs space-y-1 text-blue-700">
                      <li>• Elle sera automatiquement pré-remplie sur tous vos contrats</li>
                      <li>• Vous pouvez la modifier à tout moment</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="flex items-center justify-end gap-3 px-6 py-4 border-t bg-slate-50">
              <button
                onClick={() => {
                  setShowSignatureModal(false);
                  setShowDeleteConfirm(false);
                }}
                className="px-4 py-2 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-200 transition-colors"
                disabled={uploadingSignature}
              >
                Fermer
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Overlay de rechargement après modification de signature */}
      {reloadingAfterSignatureChange && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50">
          <div className="bg-white rounded-2xl shadow-2xl px-8 py-6 max-w-sm mx-4">
            <div className="flex flex-col items-center gap-4">
              <div className="relative">
                <div className="w-16 h-16 border-4 border-blue-200 rounded-full"></div>
                <div className="absolute top-0 left-0 w-16 h-16 border-4 border-blue-600 rounded-full border-t-transparent animate-spin"></div>
              </div>
              <div className="text-center">
                <h3 className="text-lg font-semibold text-slate-900 mb-1">
                  Mise à jour en cours...
                </h3>
                <p className="text-sm text-slate-600">
                  Actualisation des contrats avec la nouvelle signature
                </p>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
