declare global {
    interface Window {
        toggleUserList: typeof toggleUserList;
        switchUser: typeof switchUser;
        closeProcessDetails: typeof closeProcessDetails;
        loadMemberChat: typeof loadMemberChat;
        closeRoleDocuments: typeof closeRoleDocuments;
        newRequest: typeof newRequest;
        submitRequest: typeof submitRequest;
        closeNewRequest: typeof closeNewRequest;
        removeMember: typeof removeMember;
        closeModal: typeof closeModal;
        submitDocumentRequest: typeof submitDocumentRequest;
        submitNewDocument: typeof submitNewDocument;
    }
}

import { groupsMock } from '../../mocks/mock-signature/groupsMock';
import { messagesMock as initialMessagesMock } from '../../mocks/mock-signature/messagesMock';
import { membersMock } from '../../mocks/mock-signature/membersMocks';
import { 
    Group, 
    Message, 
    MemberMessages, 
    DocumentSignature, 
    RequestParams, 
    Notification as ImportedNotification 
} from '../../models/signature.models';
import { messageStore } from '../../utils/messageMock';
import { showAlert } from '../account/account';
let currentUser = membersMock[0]; 

// Fonction pour gérer la liste des utilisateurs
function toggleUserList() {
    const userList = document.getElementById('userList');
    if (!userList) return;
    
    if (!userList.classList.contains('show')) {
        // Remplir la liste des utilisateurs
        userList.innerHTML = membersMock.map(member => `
            <div class="user-list-item" onclick="switchUser('${member.id}')">
                <span class="user-avatar">${member.avatar}</span>
                <div>
                    <span class="user-name">${member.name}</span>
                    <span class="user-email">${member.email}</span>
                </div>
            </div>
        `).join('');
    }
    userList?.classList.toggle('show');
}

// Fonction pour changer d'utilisateur
function switchUser(userId: string) {
    const user = membersMock.find(member => member.id === userId);
    if (!user) return;
    currentUser = user;
    updateCurrentUserDisplay();
    // Recharger la vue si nécessaire
    const userList = document.getElementById('userList');
    userList?.classList.remove('show');
}

// Fonction pour mettre à jour l'affichage de l'utilisateur
function updateCurrentUserDisplay() {
    const userDisplay = document.getElementById('current-user');
    if (userDisplay) {
        userDisplay.innerHTML = `
            <div class="current-user-info">
                <span class="user-avatar">${currentUser.avatar}</span>
                <span class="user-name">${currentUser.name}</span>
            </div>
        `;
    }
}

// Ajouter les fonctions au scope global
window.toggleUserList = toggleUserList;
window.switchUser = switchUser;

// Initialiser l'affichage de l'utilisateur courant au chargement
document.addEventListener('DOMContentLoaded', () => {
    updateCurrentUserDisplay();
    
    // Fermer la liste si on clique ailleurs
    document.addEventListener('click', (event) => {
        const userList = document.getElementById('userList');
        const userSwitchBtn = document.getElementById('userSwitchBtn');
        if (userSwitchBtn && userList && !userSwitchBtn.contains(event.target as Node) && !userList.contains(event.target as Node)) {
            userList.classList.remove('show');
        }
    });

    // Initialiser les groupes en localStorage s'ils n'existent pas
    if (!localStorage.getItem('groups')) {
        localStorage.setItem('groups', JSON.stringify(groupsMock));
    }
});

let messagesMock = messageStore.getMessages();
if (messagesMock.length === 0) {
    messageStore.setMessages(initialMessagesMock);
    messagesMock = messageStore.getMessages();
}


let selectedMemberId: string | null = null;

// Load the list of groups
function loadGroupList() {
    const groupList = document.getElementById('group-list');
    if (!groupList) return;
    
    groupsMock.forEach(group => {
        const li = document.createElement('li');
        li.className = 'group-list-item';
        
        // Créer un conteneur flex pour le nom et l'icône
        const container = document.createElement('div');
        container.className = 'group-item-container';
        
        // Span pour le nom du processus
        const nameSpan = document.createElement('span');
        nameSpan.textContent = group.name;
        nameSpan.className = 'process-name';
        nameSpan.onclick = (event) => {
            event.stopPropagation();
            toggleRoles(group, li);
        };
        
        // Ajouter l'icône ⚙️ avec un ID unique
        const settingsIcon = document.createElement('span');
        settingsIcon.textContent = '⚙️';
        settingsIcon.className = 'settings-icon';
        settingsIcon.id = `settings-${group.id}`; // ID unique basé sur l'ID du groupe
        
        // Créer une div pour la vue détaillée avec un ID unique correspondant
        const detailsArea = document.createElement('div');
        detailsArea.id = `process-details-${group.id}`;
        detailsArea.className = 'process-details';
        detailsArea.style.display = 'none';
        
        settingsIcon.onclick = (event) => {
            event.stopPropagation();
            showProcessDetails(group, group.id);
        };
        
        // Assembler les éléments
        container.appendChild(nameSpan);
        container.appendChild(settingsIcon);
        li.appendChild(container);
        groupList.appendChild(li);
    });
}

// Toggle the list of Roles
function toggleRoles(group: Group, groupElement: HTMLElement) {
    let roleList = groupElement.querySelector('.role-list');
    if (roleList) {
        (roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
        return;
    }

    roleList = document.createElement('ul');
    roleList.className = 'role-list';

    group.roles.forEach(role => {
        const roleItem = document.createElement('li');
        
        // Créer un conteneur flex pour le nom et l'icône
        const container = document.createElement('div');
        container.className = 'role-item-container';
        container.style.display = 'flex';
        container.style.justifyContent = 'space-between';
        container.style.alignItems = 'center';
        
        // Span pour le nom du rôle
        const nameSpan = document.createElement('span');
        nameSpan.textContent = role.name;
        
        // Bouton dossier
        const folderButton = document.createElement('span');
        folderButton.textContent = '📁';
        folderButton.className = 'folder-icon';
        folderButton.onclick = (event) => {
            event.stopPropagation();
            showRoleDocuments(role, group);
        };

        // Assembler les éléments
        container.appendChild(nameSpan);
        container.appendChild(folderButton);
        roleItem.appendChild(container);

        roleItem.onclick = (event) => {
            event.stopPropagation();
            toggleMembers(role, roleItem);
        };

        roleList.appendChild(roleItem);
    });

    groupElement.appendChild(roleList);
}

// Toggle the list of membres
function toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) {
    let memberList = roleElement.querySelector('.member-list');
    if (memberList) {
        (memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
        return;
    }

    memberList = document.createElement('ul');
    memberList.className = 'member-list';

    role.members.forEach(member => {
        const memberItem = document.createElement('li');
        memberItem.textContent = member.name;

        memberItem.onclick = (event) => {
            event.stopPropagation();
            loadMemberChat(member.id.toString());
        };

        memberList.appendChild(memberItem);
    });

    roleElement.appendChild(memberList);
}

// Load the list of members
function loadMemberChat(memberId: string | number) {
    selectedMemberId = String(memberId);
    const memberMessages = messagesMock.find(m => String(m.memberId) === String(memberId));

    // Trouver le processus et le rôle du membre
    let memberInfo = { processName: '', roleName: '', memberName: '' };
    groupsMock.forEach(process => {
        process.roles.forEach(role => {
            const member = role.members.find(m => String(m.id) === String(memberId));
            if (member) {
                memberInfo = {
                    processName: process.name,
                    roleName: role.name,
                    memberName: member.name
                };
            }
        });
    });

    const chatHeader = document.getElementById('chat-header');
    const messagesContainer = document.getElementById('messages');

    if (!chatHeader || !messagesContainer) return;
    
    chatHeader.textContent = `Chat with ${memberInfo.roleName} ${memberInfo.memberName} from ${memberInfo.processName}`;
    messagesContainer.innerHTML = '';

    if (memberMessages) {
        memberMessages.messages.forEach((message: Message) => {
            const messageElement = document.createElement('div');
            messageElement.className = 'message-container';

            const messageContent = document.createElement('div');
            messageContent.className = 'message';
            if (message.type === 'file') {
                messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`;
                messageContent.classList.add('user');
            } else {
                messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
                if (message.sender === "4NK") {
                    messageContent.classList.add('user');
                }
            }

            messageElement.appendChild(messageContent);
            messagesContainer.appendChild(messageElement);
        });
    }


    scrollToBottom(messagesContainer);
}

// Scroll down the conversation after loading messages
function scrollToBottom(container: HTMLElement) {
    container.scrollTop = container.scrollHeight;
}

// Generate an automatic response
function generateAutoReply(senderName: string): Message {
    return {
        id: Date.now(),
        sender: senderName,
        text: "OK...",
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
        type: 'text' as const
    };
}

// Send a messsage
function sendMessage() {
    const messageInput = document.getElementById('message-input') as HTMLInputElement;
    if (!messageInput) return;
    const messageText = messageInput.value.trim();

    if (messageText === '' || selectedMemberId === null) {
        return;
    }

    const newMessage: Message = {
        id: Date.now(),
        sender: "4NK",
        text: messageText,
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
        type: 'text' as const
    };

    // Ajouter et afficher le message immédiatement
    messageStore.addMessage(selectedMemberId, newMessage);
    messagesMock = messageStore.getMessages();
    loadMemberChat(selectedMemberId);

    // Réinitialiser l'input
    messageInput.value = '';

    // Réponse automatique après 2 secondes
    setTimeout(() => {
        if (selectedMemberId) {
            const autoReply = generateAutoReply(`Member ${selectedMemberId}`);
            messageStore.addMessage(selectedMemberId, autoReply);
            messagesMock = messageStore.getMessages();
            loadMemberChat(selectedMemberId);
            addNotification(selectedMemberId, autoReply);
        }
    }, 2000);
}

// Add an event for the submit button
const sendBtn = document.getElementById('send-button');
if (sendBtn) sendBtn.onclick = sendMessage;

const messageInput = document.getElementById('message-input');
if (messageInput) {
    messageInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            sendMessage();
        }
    });
}

// Send a file
function sendFile(file: File) {
    const reader = new FileReader();
    reader.onloadend = function () {
        const fileData = reader.result;
        const fileName = file.name;

        const newFileMessage = {
            id: Date.now(),
            sender: "4NK",
            fileName: fileName,
            fileData: fileData,
            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
            type: 'file'
        };

        if (selectedMemberId) {
            messageStore.addMessage(selectedMemberId, newFileMessage);
        }

        messagesMock = messageStore.getMessages();

        if (selectedMemberId) {
            loadMemberChat(selectedMemberId);
        }
    };

    reader.readAsDataURL(file);
}

// Managing the sent file
document.getElementById('file-input')?.addEventListener('change', function (event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
        sendFile(file);
    }
});


///////////////////// Notification module /////////////////////
const notificationBadge = document.querySelector('.notification-badge');
const notificationBoard = document.getElementById('notification-board');
const notificationBell = document.getElementById('notification-bell');


interface LocalNotification {
    memberId: string;
    text: string;
    time: string;
}

let notifications: LocalNotification[] = [];
let unreadCount = 0;
// Update notification badge
function updateNotificationBadge() {
    if (!notificationBadge) return;
    const count = notifications.length;
    notificationBadge.textContent = count > 99 ? '+99' : count.toString();
    (notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
}

// Add notification
function addNotification(memberId: string, message: Message) {
    // Creating a new notification
    const notification = {
        memberId,
        text: `New message from Member ${memberId}: ${message.text}`,
        time: message.time
    };

    // Added notification to list and interface
    notifications.push(notification);
    renderNotifications();
    updateNotificationBadge();
}

// Show notifications
function renderNotifications() {
    if (!notificationBoard) return;

    // Reset the interface
    notificationBoard.innerHTML = '';

    // Displays "No notifications available" if there are no notifications
    if (notifications.length === 0) {
        notificationBoard.innerHTML = '<div class="no-notification">No notifications available</div>';
        return;
    }

    // Add each notification to the list
    notifications.forEach((notif, index) => {
        const notifElement = document.createElement('div');
        notifElement.className = 'notification-item';
        notifElement.textContent = `${notif.text} at ${notif.time}`;
        notifElement.onclick = () => {
            loadMemberChat(notif.memberId);
            removeNotification(index);
        };
        notificationBoard.appendChild(notifElement);
    });
}

// Delete a notification
function removeNotification(index: number) {
    notifications.splice(index, 1);
    renderNotifications();
    updateNotificationBadge();
}

// Adds an event for deploying the notification list
if (notificationBell && notificationBoard) {
    notificationBell.onclick = () => {
        notificationBoard.style.display = notificationBoard.style.display === 'block' ? 'none' : 'block';
    };
}

// Close the notification board when clicking outside of it
document.addEventListener('click', (event) => {
    if (notificationBoard && notificationBoard.style.display === 'block' &&
        !notificationBoard.contains(event.target as Node) &&
        notificationBell && !notificationBell.contains(event.target as Node)) {
        notificationBoard.style.display = 'none';
    }
});

// ------------------ PROCESS DETAILS ------------------   
// Fonction pour afficher les détails du processus
function showProcessDetails(group: Group, groupId: number) {
    console.log('Showing details for group:', groupId);
    
    // Fermer toutes les vues de processus existantes
    const allDetailsAreas = document.querySelectorAll('.process-details');
    allDetailsAreas.forEach(area => {
        (area as HTMLElement).style.display = 'none';
    });
    
    const container = document.querySelector('.container');
    if (!container) {
        console.error('Container not found');
        return;
    }

    let detailsArea = document.getElementById(`process-details-${groupId}`);
    if (!detailsArea) {
        detailsArea = document.createElement('div');
        detailsArea.id = `process-details-${groupId}`;
        detailsArea.className = 'process-details';
        container.appendChild(detailsArea);
    }

    if (detailsArea) {
        detailsArea.style.display = 'block';
        detailsArea.innerHTML = `
            <div class="process-details-header">
                <h2>${group.name}</h2>
                <div class="header-buttons">
                </div>
            </div>
            <div class="process-details-content">
                <div class="details-section">
                    <h3>Description</h3>
                    <p>${group.description || 'No description available'}</p>
                </div>
                <div class="details-section">
                    <h3>Roles and Documents</h3>
                    ${group.roles.map(role => `
                        <div class="role-section">
                            <h4>${role.name}</h4>
                            <div class="documents-grid">
                                ${(role.documents || []).length > 0 ? 
                                    (role.documents || []).map(document => {
                                        const totalSignatures = document.signatures.length;
                                        const signedCount = document.signatures.filter((sig: DocumentSignature) => sig.signed).length;
                                        const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;

                                        // Détection d'un document vierge
                                        const isVierge = !document.createdAt || 
                                                        !document.deadline || 
                                                        document.signatures.length === 0;

                                        return `
                                            <div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
                                                <div class="document-header">
                                                    <h4>${isVierge ? `⚠️ ${document.name}` : document.name}</h4>
                                                    <span class="document-visibility">${document.visibility}</span>
                                                </div>
                                                <div class="document-info">
                                                    ${!isVierge ? `
                                                        <p class="document-date">Created on: ${document.createdAt ? new Date(document.createdAt).toLocaleDateString() : 'N/A'}</p>
                                                        <p class="document-deadline">Deadline: ${document.deadline ? new Date(document.deadline).toLocaleDateString() : 'N/A'}</p>
                                                        <p class="document-duration">Duration: ${calculateDuration(document.createdAt || '', document.deadline || '')} days</p>
                                                    ` : '<p>Document vierge - En attente de création</p>'}
                                                </div>
                                                ${!isVierge ? `
                                                    <div class="document-signatures">
                                                        <h5>Signatures:</h5>
                                                        <div class="signatures-list">
                                                            ${document.signatures.map((sig: DocumentSignature) => `
                                                                <div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
                                                                    <span class="signer-name">${sig.member.name}</span>
                                                                    <span class="signature-status">
                                                                        ${sig.signed ? 
                                                                            `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'Unknown date'}` : 
                                                                            ' Pending'}
                                                                    </span>
                                                                </div>
                                                            `).join('')}
                                                        </div>
                                                        <div class="progress-bar">
                                                            <div class="progress" style="width: ${percentage}%;"></div>
                                                        </div>
                                                        <p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
                                                    </div>
                                                ` : ''}
                                            </div>
                                        `;
                                    }).join('') 
                                    : '<p class="no-documents">No documents available for this role</p>'}
                            </div>
                        </div>
                    `).join('')}
                </div>
                <div class="details-section">
                    <h3>Members by Role</h3>
                    <div class="roles-grid">
                        ${group.roles.map(role => `
                            <div class="role-block">
                                <h4>${role.name}</h4>
                                <ul class="members-list">
                                    ${role.members.map(member => `
                                        <li onclick="loadMemberChat(${member.id})">${member.name}</li>
                                    `).join('')}
                                </ul>
                            </div>
                        `).join('')}
                    </div>
                </div>
            </div>
        `;

        /**const newRequestBtn = document.createElement('button');
        newRequestBtn.className = 'new-request-btn';
        newRequestBtn.textContent = 'New request';
        newRequestBtn.onclick = () => newRequest(group);**/

        const newCloseProcessButton = document.createElement('button');
        newCloseProcessButton.className = 'close-btn';
        newCloseProcessButton.textContent = 'x';
        newCloseProcessButton.addEventListener('click', () => closeProcessDetails(groupId));
        
        const headerButtons = detailsArea.querySelector('.header-buttons');
        if (headerButtons) {
            /**headerButtons.appendChild(newRequestBtn);**/
            headerButtons.appendChild(newCloseProcessButton);
        }
    }
}

// Fonction pour fermer les détails et revenir au chat
function closeProcessDetails(groupId: number) {
    const detailsArea = document.getElementById(`process-details-${groupId}`);
    const chatArea = document.getElementById('chat-area');
    
    if (detailsArea) {
        detailsArea.style.display = 'none';
    }
    
    if (chatArea) {
        chatArea.style.display = 'block';
    }
}

window.closeProcessDetails = closeProcessDetails;
window.loadMemberChat = loadMemberChat;

// Nouvelle fonction pour afficher les documents d'un rôle
function showRoleDocuments(role: {
    name: string;
    documents?: Array<{
        name: string;
        visibility: string;
        createdAt: string | null | undefined;
        deadline: string | null | undefined;
        signatures: DocumentSignature[];
        id: number;
        description?: string;
        status?: string;
    }>;
    id?: number;
}, group: Group) {
    console.log('Showing documents for role:', role.name, 'in group:', group.name);
    // Fermer d'abord toutes les vues de documents existantes
    const allDetailsAreas = document.querySelectorAll('.process-details');
    allDetailsAreas.forEach(area => {
        area.remove();
    });

    const container = document.querySelector('.container');
    if (!container) {
        console.error('Container not found');
        return;
    }

    // Créer une nouvelle zone de détails
    const detailsArea = document.createElement('div');
    detailsArea.id = `role-documents-${role.name}`;
    detailsArea.className = 'process-details';
    
    detailsArea.innerHTML = `
        <div class="process-details-header">
            <h2>${role.name} Documents</h2>
            <div class="header-buttons">
                <button class="close-btn" onclick="closeRoleDocuments('${role.name}')">✕</button>
            </div>
        </div>
        <div class="process-details-content">
            <div class="details-section">
                <h3>Documents</h3>
                <div class="documents-grid">
                    ${(role.documents || []).length > 0 ? 
                        (role.documents || []).map(document => {
                            const totalSignatures = document.signatures.length;
                            const signedCount = document.signatures.filter((sig: DocumentSignature) => sig.signed).length;
                            const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
                            const isVierge = !document.createdAt || 
                                           !document.deadline || 
                                           document.signatures.length === 0;

                            return `
                                <div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
                                    <div class="document-header">
                                        <h4>${isVierge ? `⚠️ ${document.name}` : document.name}</h4>
                                        <span class="document-visibility">${document.visibility}</span>
                                    </div>
                                    <div class="document-info">
                                        ${!isVierge ? `
                                            <p class="document-date">Created on: ${document.createdAt ? new Date(document.createdAt).toLocaleDateString() : 'N/A'}</p>
                                            <p class="document-deadline">Deadline: ${document.deadline ? new Date(document.deadline).toLocaleDateString() : 'N/A'}</p>
                                            <p class="document-duration">Duration: ${calculateDuration(document.createdAt, document.deadline)} days</p>
                                            <div class="document-signatures">
                                                <h5>Signatures:</h5>
                                                <div class="signatures-list">
                                                    ${document.signatures.map((sig: DocumentSignature) => `
                                                        <div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
                                                            <span class="signer-name">${sig.member.name}</span>
                                                            <span class="signature-status">
                                                                ${sig.signed ? 
                                                                    `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'Unknown date'}` : 
                                                                    '⌛ Pending'}
                                                            </span>
                                                        </div>
                                                    `).join('')}
                                                </div>
                                                <div class="progress-bar">
                                                    <div class="progress" style="width: ${percentage}%;"></div>
                                                </div>
                                                <p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
                                            </div>
                                        ` : `
                                            <p>Document vierge - En attente de création</p>
                                            <button class="new-request-btn" onclick="newRequest({
                                                processId: ${group.id},
                                                processName: '${group.name}',
                                                roleId: ${role.id},
                                                roleName: '${role.name}',
                                                documentId: ${document.id},
                                                documentName: '${document.name}'
                                            })">New request</button>
                                        `}
                                    </div>
                                </div>
                            `;
                        }).join('') 
                        : '<p class="no-documents">No documents available for this role</p>'
                    }
                </div>
            </div>
        </div>
    `;

    container.appendChild(detailsArea);
}

// Fonction pour fermer la vue des documents d'un rôle
function closeRoleDocuments(roleName: string) {
    const detailsArea = document.getElementById(`role-documents-${roleName}`);
    if (detailsArea) {
      
        detailsArea.remove();
    }
}

window.closeRoleDocuments = closeRoleDocuments;


window.switchUser = switchUser;

// Fonction pour calculer la durée entre deux dates
function calculateDuration(startDate: string | null | undefined, endDate: string | null | undefined): number {
    const start = new Date(startDate || '');
    const end = new Date(endDate || '');
    const duration = end.getTime() - start.getTime(); 
    return Math.floor(duration / (1000 * 60 * 60 * 24));
}


window.newRequest = newRequest;
window.submitRequest = submitRequest;
window.closeNewRequest = closeNewRequest;

// Définir la fonction removeMember pour supprimer un membre par son ID
function removeMember(memberId: string | number) {
    const memberElement = document.querySelector(`.selected-member[data-member-id="${memberId}"]`);
    if (memberElement) {
        memberElement.remove();
    }
}

window.removeMember = removeMember;


// Fonction pour gérer la nouvelle demande
function newRequest(params: RequestParams) {
    const modal = document.createElement('div');
    modal.className = 'modal-overlay';
    
    // Modifier cette partie pour chercher par name au lieu de id
    const process = groupsMock.find(g => g.id === params.processId);
    const role = process?.roles.find(r => r.name === params.roleName);
    
    // Récupérer les membres du rôle
    const roleMembers = role?.members ? role.members.map(member => member.id) : [];

    modal.innerHTML = `
        <div class="modal-document">
            <div class="modal-content-document">
                <div class="details-header">
                    <h2>New Document Request</h2>
                    <span class="document-context">
                        Process: ${params.processName} | Role: ${params.roleName} | Document: ${params.documentName}
                    </span>
                </div>
                
                <form id="newDocumentForm" class="document-form">
                    <input type="hidden" id="processId" value="${params.processId}">
                    <input type="hidden" id="roleId" value="${params.roleId}">
                    <input type="hidden" id="documentId" value="${params.documentId}">
                    
                    <div class="form-left">
                        <div class="form-row">
                            <div class="form-group half">
                                <label for="documentName">Document Name*:</label>
                                <input type="text" id="documentName" required value="${params.documentName}">
                            </div>
                            
                            <div class="form-group half">
                                <label for="createdAt">Created At:</label>
                                <input type="text" id="createdAt" value="${new Date().toLocaleDateString()}" readonly>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="description">Description:</label>
                            <textarea id="description"></textarea>
                        </div>

                        <div class="form-row">
                            <div class="form-group half">
                                <label for="visibility">Visibility*:</label>
                                <select id="visibility" required>
                                    <option value="public">Public</option>
                                    <option value="confidential">Confidential</option>
                                    <option value="private">Private</option>
                                </select>
                            </div>

                            <div class="form-group half">
                                <label for="deadline">Deadline:</label>
                                <input type="date" 
                                       id="deadline" 
                                       min="${new Date().toISOString().split('T')[0]}" 
                                       required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>Import Files</label>
                            <div class="file-upload-container" id="dropZone">
                                <input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx,.txt">
                                <p>Drop files here or click to select files</p>
                            </div>
                            <div id="fileList" class="file-list"></div>
                        </div>

                        <div class="form-group">
                            <label>Required Signatories:</label>
                            <div class="required-signatories">
                                ${roleMembers.map(member => `
                                    <div class="signatory-item locked">
                                        <span class="member-name">${member}</span>
                                        <span class="role-info">${params.roleName} - ${params.processName}</span>
                                        <span class="lock-icon">🔒</span>
                                    </div>
                                `).join('')}
                            </div>
                        </div>

                        
                    </div>
                </form>
                
                <div class="modal-footer">
                    <button class="cancel-btn" onclick="closeModal(this)">Cancel</button>
                    <button class="confirm-btn" onclick="submitNewDocument(event)">Request</button>
                </div>
            </div>
        </div>
    `;

    document.body.appendChild(modal);

    const dropZone = modal.querySelector('#dropZone') as HTMLDivElement;
    const fileInput = modal.querySelector('#fileInput') as HTMLInputElement;
    const fileList = modal.querySelector('#fileList') as HTMLDivElement;

    // Rendre la zone cliquable
    dropZone.addEventListener('click', () => {
        fileInput.click();
    });

    // Gérer la sélection de fichiers
    fileInput.addEventListener('change', (e: Event) => {
        const target = e.target as HTMLInputElement;
        if (target.files && target.files.length > 0) {
            handleFiles(target.files);
        }
    });

    // Gérer le drag & drop
    dropZone.addEventListener('dragover', (e: DragEvent) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e: DragEvent) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        if (e.dataTransfer?.files) {
            handleFiles(e.dataTransfer.files);
        }
    });

    function handleFiles(files: FileList) {
        Array.from(files).forEach(file => {
            // Vérifier si le fichier n'est pas déjà dans la liste
            const existingFiles = fileList.querySelectorAll('.file-name');
            const isDuplicate = Array.from(existingFiles).some(
                existingFile => existingFile.textContent === file.name
            );

            if (!isDuplicate) {
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                fileItem.innerHTML = `
                    <div class="file-info">
                        <span class="file-name">${file.name}</span>
                        <span class="file-size">(${(file.size / 1024).toFixed(1)} KB)</span>
                    </div>
                    <button type="button" class="remove-file">×</button>
                `;

                // Ajouter l'événement de suppression
                const removeBtn = fileItem.querySelector('.remove-file');
                if (removeBtn) {
                    removeBtn.addEventListener('click', () => fileItem.remove());
                }

                fileList.appendChild(fileItem);
            }
        });
    }
}

function closeModal(button: HTMLElement) {
    const modalOverlay = button.closest('.modal-overlay');
    if (modalOverlay) {
        modalOverlay.remove();
    }
}

window.closeModal = closeModal;

let selectedSignatories: DocumentSignature[] = [];

function submitNewDocument(event: Event) {
    event.preventDefault();
    
    const form = document.getElementById('newDocumentForm') as HTMLFormElement;
    if (!form) {
        showAlert('Form not found');
        return;
    }
    
    // Get form values
    const processId = Number((form.querySelector('#processId') as HTMLInputElement)?.value);
    const documentId = Number((form.querySelector('#documentId') as HTMLInputElement)?.value);
    const documentName = (form.querySelector('#documentName') as HTMLInputElement)?.value?.trim();
    const description = (form.querySelector('#description') as HTMLTextAreaElement)?.value?.trim();
    const deadline = (form.querySelector('#deadline') as HTMLInputElement)?.value;
    const visibility = (form.querySelector('#visibility') as HTMLSelectElement)?.value;
    
    // Validation
    if (!documentName || !description || !deadline) {
        showAlert('Please fill in all required fields');
        return;
    }

    // Mettre à jour à la fois le mock local et le localStorage
    let groups = JSON.parse(localStorage.getItem('groups') || JSON.stringify(groupsMock));
    const group = groups.find((g: Group) => g.id === processId);
    
    if (!group) {
        showAlert('Process not found');
        return;
    }

    // Trouver le rôle qui contient le document
    const role = group.roles.find((r: any) => {
        return r.documents?.some((d: any) => d.id === documentId);
    });

    if (!role) {
        showAlert('Role not found');
        return;
    }

    const documentIndex = role.documents.findIndex((d: any) => d.id === documentId);
    
    const updatedDocument = {
        id: documentId,
        name: documentName,
        description: description,
        createdAt: new Date().toISOString(),
        deadline: deadline,
        visibility: visibility,
        status: "pending",
        signatures: role.members.map((member: { id: string | number; name: string }) => ({
            member: member,
            signed: false,
            signedAt: null
        }))
    };

    // Mettre à jour le document dans le rôle
    if (documentIndex !== -1) {
        role.documents[documentIndex] = updatedDocument;
    }

    // Mettre à jour le localStorage et le mock global
    localStorage.setItem('groups', JSON.stringify(groups));
    Object.assign(groupsMock, groups);

    // Fermer le modal
    if (event.target instanceof HTMLElement) {
        closeModal(event.target);
    }

    // Recharger la vue des documents
    showRoleDocuments(role, group);
    
    showAlert('Document updated successfully!');
}

window.submitNewDocument = submitNewDocument;


function submitRequest() {
    
    showAlert("Request submitted!"); 
}

function closeNewRequest() {
    const newRequestView = document.getElementById('new-request-view');
    if (newRequestView) {
        newRequestView.style.display = 'none';
        // Optionnel : supprimer la vue du DOM
        newRequestView.remove();
    }
}

// N'oubliez pas d'exposer la fonction globalement
window.closeNewRequest = closeNewRequest;

document.addEventListener('DOMContentLoaded', function() {
    const newRequestBtn = document.getElementById('newRequestBtn');
    if (newRequestBtn) {
        newRequestBtn.addEventListener('click', () => {
            // Provide default/empty RequestParams when clicked
            newRequest({
                processId: 0,
                processName: '',
                roleId: 0,
                roleName: '',
                documentId: 0,
                documentName: ''
            });
        });
    }
});

function submitDocumentRequest(documentId: number) {
    const createdAt = (document.getElementById('createdAt') as HTMLInputElement)?.value || '';
    const deadline = (document.getElementById('deadline') as HTMLInputElement)?.value || '';
    const visibility = (document.getElementById('visibility') as HTMLSelectElement)?.value || '';
    const description = (document.getElementById('description') as HTMLTextAreaElement)?.value || '';
    
    const selectedMembers = Array.from(
        document.querySelectorAll('input[name="selected-members"]:checked')
    ).map(checkbox => (checkbox as HTMLInputElement).value);

    if (!createdAt || !deadline || selectedMembers.length === 0) {
        showAlert('Please fill in all required fields and select at least one member.');
        return;
    }

    console.log('Document submission:', {
        documentId,
        createdAt,
        deadline,
        visibility,
        description,
        selectedMembers
    });

    showAlert('Document request submitted successfully!');
    closeNewRequest();
}

window.submitDocumentRequest = submitDocumentRequest;

// Define allMembers using membersMock
const allMembers = membersMock.map(member => ({
    id: member.id,
    name: member.name,
    roleName: 'Default Role' // Add role information if available in your membersMock
}));

const addMembersBtn = document.getElementById('addMembersBtn');
if (addMembersBtn) {
    addMembersBtn.addEventListener('click', function() {
        const selectedMembers: string[] = []; // Assuming member IDs are strings

        // Logic to display a list of members to select
        const membersToSelect = allMembers.map(member => `
            <div class="member-checkbox">
                <input type="checkbox" id="member-${member.id}" value="${member.id}">
                <label for="member-${member.id}">${member.name} (${member.roleName})</label>
            </div>
        `).join('');

        // Create a modal for member selection
        const modalContent = `
            <div class="modal">
                <h4>Select Members</h4>
                <div>${membersToSelect}</div>
                <button id="confirmSelectionBtn">Confirm</button>
            </div>
        `;

        // Append the modal to the body
        document.body.insertAdjacentHTML('beforeend', modalContent);

        // Add event for the confirmation button
        const confirmBtn = document.getElementById('confirmSelectionBtn');
        if (confirmBtn) {
            confirmBtn.addEventListener('click', function() {
                // Retrieve selected members
                const selectedCheckboxes = document.querySelectorAll('.modal input[type="checkbox"]:checked');
                selectedCheckboxes.forEach((checkbox: Element) => {
                    selectedMembers.push((checkbox as HTMLInputElement).value);
                });

                // Add selected members to the list
                const membersList = document.getElementById('members-list');
                if (membersList) {
                    selectedMembers.forEach(memberId => {
                        const member = allMembers.find(m => m.id === memberId);
                        if (member) {
                            membersList.insertAdjacentHTML('beforeend', `<div>${member.name} (${member.roleName})</div>`);
                        }
                    });
                }

                // Close the modal
                document.querySelector('.modal')?.remove();
            });
        }
    });
}

// Fonction d'initialisation pour le router
export function initSignature() {
    // Réinitialiser l'affichage
    const groupList = document.getElementById('group-list');
    if (groupList) {
        groupList.innerHTML = ''; // Nettoyer la liste existante
    }

    // Recharger les messages depuis le store
    messagesMock = messageStore.getMessages();
    if (messagesMock.length === 0) {
        messageStore.setMessages(initialMessagesMock);
        messagesMock = messageStore.getMessages();
    }

    // Réinitialiser l'interface
    updateCurrentUserDisplay();
    loadGroupList();
    
    // Si un membre était sélectionné, recharger son chat
    if (selectedMemberId) {
        loadMemberChat(selectedMemberId);
    }

    // Event listeners
    document.addEventListener('click', (event) => {
        const userList = document.getElementById('userList');
        const userSwitchBtn = document.getElementById('userSwitchBtn');
        if (userSwitchBtn && userList && !userSwitchBtn.contains(event.target as Node) && !userList.contains(event.target as Node)) {
            userList.classList.remove('show');
        }
    });

    // Réattacher les event listeners pour les messages
    const sendBtn = document.getElementById('send-button');
    if (sendBtn) sendBtn.onclick = sendMessage;

    const messageInput = document.getElementById('message-input');
    if (messageInput) {
        messageInput.addEventListener('keydown', function (event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                sendMessage();
            }
        });
    }
}