declare global {
    interface Window {
        initAccount: () => void;
        showContractPopup: (contractId: string) => void;
        showPairing: () => void;
        showWallet: () => void;
        showData: () => void;
        addWalletRow: () => void;
        confirmWalletRow: () => void;
        cancelWalletRow: () => void;
        openAvatarPopup: () => void;
        closeAvatarPopup: () => void;
        editDeviceName: (cell: HTMLTableCellElement) => void;
        showNotifications: (processName: string) => void;
        closeNotificationPopup: (event: Event) => void;
        markAsRead: (processName: string, messageId: number, element: HTMLElement) => void;
        exportRecovery: () => void;
        confirmDeleteAccount: () => void;
        deleteAccount: () => void;
        updateNavbarBanner: (bannerUrl: string) => void;
        saveBannerToLocalStorage: (bannerUrl: string) => void;
        loadSavedBanner: () => void;
        cancelAddRow: () => void;
        saveName: (cell: HTMLElement, input: HTMLInputElement) => void;
        showProcessNotifications: (processName: string) => void;
        handleLogout: () => void;
        initializeEventListeners: () => void;
        showProcess: () => void;
        updateNavbarName: (name: string) => void;
        updateNavbarLastName: (lastName: string) => void;
        showAlert: (title: string, text?: string, icon?: string) => void;
        addRow: () => void;
        confirmRow: () => void;
        cancelRow: () => void;
        deleteRow: (button: HTMLButtonElement) => void;
        generateRecoveryWords: () => string[];
        exportUserData: () => void;
        updateActionButtons: () => void;
    }
}

import Swal from 'sweetalert2';
import { STORAGE_KEYS, defaultRows, mockProcessRows, mockNotifications, notificationMessages, mockDataRows, mockContracts, ALLOWED_ROLES } from '../../mocks/mock-account/constAccountMock';
import { Row, WalletRow, DataRow, Notification, Contract, NotificationMessage } from '../../mocks/mock-account/interfacesAccountMock';
import { addressToEmoji } from '../../utils/sp-address.utils';
import { getCorrectDOM } from '../../utils/document.utils';
import accountStyle from '../../../public/style/account.css?inline';

let isAddingRow = false;
let currentRow: HTMLTableRowElement | null = null;
let currentMode: keyof typeof STORAGE_KEYS = 'pairing';


class AccountElement extends HTMLElement {
    private dom: Node;

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.dom = getCorrectDOM('account-element');

        // Ajouter Font Awesome
        const fontAwesome = document.createElement('link');
        fontAwesome.rel = 'stylesheet';
        fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
        this.shadowRoot!.appendChild(fontAwesome);

        const style = document.createElement('style');
        style.textContent = accountStyle;
        this.shadowRoot!.appendChild(style);

        this.shadowRoot!.innerHTML = `

        <style>
            ${accountStyle}
        </style>
        <!-- Profile Popup -->
    <div id="avatar-popup" class="popup">
        <div class="popup-content">
            <span class="close-popup">&times;</span>
            <h2>Profile</h2>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container">
        <!-- Parameter List -->
        <div class="parameter-list">
            <ul class="parameter-list-ul profile">
                <!-- Profile Preview (visible par défaut) -->
                <div class="profile-preview" onclick="window.openAvatarPopup()">
                    <div class="preview-banner">
                        <img src="https://via.placeholder.com/800x200" alt="Banner" class="preview-banner-img">
                    </div>
                    <div class="preview-info">
                        <img src="https://via.placeholder.com/150" alt="Avatar" class="preview-avatar">
                        <div class="preview-text user-info">
                            <span class="preview-name" id="popup-name">Profile</span>
                            <span class="preview-lastname" id="popup-lastname"></span>
                        </div>
                    </div>
                </div>

                <!-- Profile Content (masqué par défaut) -->
                <div class="profile-content" style="display: none;">
                    <!-- Banner Preview Section -->
                    <div class="banner-preview">
                        <div class="banner-image-container">
                            <img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img">
                            <div class="banner-content">
                                <div class="avatar-container">
                                    <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img">
                                </div>
                                <div class="user-info">
                                    <span class="editable" id="popup-name"></span>
                                    <span class="editable" id="popup-lastname"></span>
                                </div>
                            </div>
                        </div>
                        <div class="banner-controls">
                            <label for="banner-upload" class="banner-upload-label button-style">
                                Change Banner Image
                                <input type="file" id="banner-upload" accept="image/*" style="display: none;">
                            </label>
                        </div>
                    </div>

                    <!-- Avatar Upload Section -->
                    <div class="popup-avatar">
                        <label for="avatar-upload" class="avatar-upload-label">
                            <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img">
                            <div class="avatar-overlay">
                                <span>Change Avatar</span>
                            </div>
                        </label>
                        <input type="file" id="avatar-upload" accept="image/*" style="display: none;">
                    </div>

                    <!-- User Info Section -->
                    <div class="popup-info">
                        <p><strong>Name:</strong> <span class="editable" id="popup-name"></span></p>
                        <p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p>
                        <p><strong>Address:</strong> 🏠 🌍 🗽🎊😩-🎊😑🎄😩</p>
                    </div>

                    <!-- Buttons Container -->
                    <div class="popup-buttons">
                        <button class="delete-account-btn" onclick="window.confirmDeleteAccount()">Delete Account</button>
                    </div>
                </div>


            </ul>
            <ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</ul>
            <ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul>
            <ul class="parameter-list-ul" onclick="window.showProcess()">Process ⚙️</ul>
            <ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul>
        </div>

        <!-- Parameter Area -->
        <div class="parameter-area">
            <div class="content-container">
                <div id="pairing-content"></div>
                <div id="wallet-content"></div>
                <div id="process-content"></div>
                <div id="data-content"></div>
            </div>
        </div>
    </div>
        `;

        
        window.showPairing = () => this.showPairing();
        window.showWallet = () => this.showWallet();
        window.showProcess = () => this.showProcess();
        window.showData = () => this.showData();
        window.addWalletRow = () => this.addWalletRow();
        window.confirmWalletRow = () => this.confirmWalletRow();
        window.cancelWalletRow = () => this.cancelWalletRow();
        window.editDeviceName = (cell: HTMLTableCellElement) => this.editDeviceName(cell);
        window.showProcessNotifications = (processName: string) => this.showProcessNotifications(processName);
        window.handleLogout = () => this.handleLogout();
        window.confirmDeleteAccount = () => this.confirmDeleteAccount();
        window.showContractPopup = (contractId: string) => this.showContractPopup(contractId);
        window.addRow = () => this.addRow();
        window.deleteRow = (button: HTMLButtonElement) => this.deleteRow(button);
        window.confirmRow = () => this.confirmRow();
        window.cancelRow = () => this.cancelRow();
        window.updateNavbarBanner = (bannerUrl: string) => this.updateNavbarBanner(bannerUrl);
        window.saveBannerToLocalStorage = (bannerUrl: string) => this.saveBannerToLocalStorage(bannerUrl);
        window.loadSavedBanner = () => this.loadSavedBanner();
        window.closeNotificationPopup = (event: Event) => this.closeNotificationPopup(event);
        window.markAsRead = (processName: string, messageId: number, element: HTMLElement) => this.markAsRead(processName, messageId, element);
        window.exportRecovery = () => this.exportRecovery();
        window.generateRecoveryWords = () => this.generateRecoveryWords();
        window.exportUserData = () => this.exportUserData();
        window.updateActionButtons = () => this.updateActionButtons();
        window.openAvatarPopup = () => this.openAvatarPopup();
        window.closeAvatarPopup = () => this.closeAvatarPopup();

        if (!localStorage.getItem('rows')) {
            localStorage.setItem('rows', JSON.stringify(defaultRows));
        }
    }

    connectedCallback() {
        this.initializeEventListeners();
        this.loadSavedBanner();
        this.loadUserInfo();
        
        const savedAvatar = localStorage.getItem('userAvatar');
        const savedBanner = localStorage.getItem('userBanner');
        const savedName = localStorage.getItem('userName');
        const savedLastName = localStorage.getItem('userLastName');
        
        if (savedAvatar) {
            const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
            if (navAvatar) navAvatar.src = savedAvatar;
        }
        
        if (savedBanner) {
            const navBanner = this.shadowRoot?.querySelector('.banner-image') as HTMLImageElement;
            if (navBanner) navBanner.src = savedBanner;
        }
        
        if (savedName) {
            this.updateNavbarName(savedName);
        }
        if (savedLastName) {
            this.updateNavbarLastName(savedLastName);
        }
    }

    private showAlert(message: string): void {
        // Créer la popup si elle n'existe pas
        let alertPopup = this.shadowRoot?.querySelector('.alert-popup');
        if (!alertPopup) {
            alertPopup = document.createElement('div');
            alertPopup.className = 'alert-popup';
            this.shadowRoot?.appendChild(alertPopup);
        }
    
        // Définir le message et afficher la popup
        alertPopup.textContent = message;
        (alertPopup as HTMLElement).style.display = 'block';
    
        // Cacher la popup après 3 secondes
        setTimeout(() => {
            (alertPopup as HTMLElement).style.display = 'none';
        }, 3000);
    }
    

    // Fonctions de gestion des comptes et de l'interface utilisateur
    private confirmDeleteAccount(): void {
        const modal = document.createElement('div');
        modal.className = 'confirm-delete-modal';
        modal.innerHTML = `
        <h3>Delete Account</h3>
        <p>Are you sure you want to delete your account? This action cannot be undone.</p>
        <div class="confirm-delete-buttons">
            <button class="cancel-btn">Cancel</button>
            <button class="confirm-btn">Delete</button>
        </div>
    `;

    this.shadowRoot?.appendChild(modal);
    modal.style.display = 'block';

    const cancelBtn = modal.querySelector('.cancel-btn');
    const confirmBtn = modal.querySelector('.confirm-btn');

    cancelBtn?.addEventListener('click', () => {
        modal.remove();
    });

        confirmBtn?.addEventListener('click', () => {
            this.deleteAccount();
            modal.remove();
        });
}

private deleteAccount(): void {
    localStorage.clear();
    window.location.href = '/login.html';
}

private updateNavbarBanner(imageUrl: string): void {
    const navbarSection = this.shadowRoot?.querySelector('.nav-wrapper .avatar-section');
    if (!navbarSection) return;

    let bannerImg = navbarSection.querySelector<HTMLImageElement>('.banner-image');
    
    if (!bannerImg) {
        bannerImg = document.createElement('img');
        bannerImg.className = 'banner-image';
        navbarSection.insertBefore(bannerImg, navbarSection.firstChild);
    }
    
    bannerImg.src = imageUrl;
}

private saveBannerToLocalStorage(dataUrl: string): void {
    localStorage.setItem('userBanner', dataUrl);
}

private loadSavedBanner(): void {
    const savedBanner = localStorage.getItem('userBanner');
    if (savedBanner) {
        const bannerImg = this.shadowRoot?.getElementById('popup-banner-img') as HTMLImageElement;
        if (bannerImg) {
            bannerImg.src = savedBanner;
        }
        this.updateNavbarBanner(savedBanner);
    }
}


private closeNotificationPopup(event: Event): void {
    const target = event.target as HTMLElement;
    const isOverlay = target.classList.contains('notification-popup-overlay');
    const isCloseButton = target.classList.contains('close-popup');
    if (!isOverlay && !isCloseButton) return;

    const popup = this.shadowRoot?.querySelector('.notification-popup-overlay');
    if (popup) popup.remove();
}

private markAsRead(processName: string, messageId: number, element: HTMLElement): void {
    const process = mockProcessRows.find(p => p.process === processName);
    if (!process) return;

    const message = process.notification.messages.find(m => m.id === messageId);
    if (!message || message.read) return;

    message.read = true;

    element.classList.remove('unread');
    element.classList.add('read');
    
    const statusIcon = element.querySelector('.notification-status');
    if (statusIcon) {
        statusIcon.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="green">
                <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
            </svg>`;
    }

    const notifCount = this.calculateNotifications(process.notification.messages);
    const countElement = this.shadowRoot?.querySelector(`.notification-count[data-process="${processName}"]`);
    if (countElement) {
        countElement.textContent = `${notifCount.unread}/${notifCount.total}`;
        
        const bellContainer = countElement.closest('.notification-container');
        const bell = bellContainer?.querySelector('svg');  // Changé de .fa-bell à svg
        if (bell && bellContainer && notifCount.unread === 0) {
            bellContainer.classList.remove('has-unread');
            (bell as SVGElement).style.fill = '#666';  // Utiliser fill au lieu de color pour SVG
        }
    }
}

// Fonctions de gestion des données et de l'interface
private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } {
    const total = messages.length;
    const unread = messages.filter(msg => !msg.read).length;
    return { unread, total };
}

// Fonctions de récupération
private exportRecovery(): void {
    Swal.fire({
        title: 'Recovery Words Export',
        text: '4 words will be displayed. We strongly recommend writing them down on paper before exporting the account. Do you want to continue?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        confirmButtonColor: '#C89666',
        cancelButtonColor: '#6c757d',
        // Ajouter des styles personnalisés
        customClass: {
            container: 'recovery-popup-container',
            popup: 'recovery-popup'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const recoveryWords = this.generateRecoveryWords();
            localStorage.setItem('recoveryWords', JSON.stringify(recoveryWords));
            
            Swal.fire({
                title: 'Your Recovery Words',
                html: `
                    <div class="recovery-words-container">
                        ${recoveryWords.map((word, index) => `
                            <div class="recovery-word">
                                <span class="word-number">${index + 1}.</span>
                                <span class="word">${word}</span>
                            </div>
                        `).join('')}
                    </div>
                    <div class="recovery-warning">
                        Please write these words down carefully. They will be needed to recover your account.
                    </div>
                `,
                showCancelButton: false,
                confirmButtonText: 'I confirm the export',
                confirmButtonColor: '#C89666',
                allowOutsideClick: false,
                allowEscapeKey: false,
                customClass: {
                    container: 'recovery-popup-container',
                    popup: 'recovery-popup'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Stocker l'état du bouton dans le localStorage
                    localStorage.setItem('recoveryExported', 'true');
                    
                    const exportRecoveryBtn = this.shadowRoot?.querySelector('.recovery-btn') as HTMLButtonElement;
                    if (exportRecoveryBtn) {
                        exportRecoveryBtn.disabled = true;
                        exportRecoveryBtn.style.opacity = '0.5';
                        exportRecoveryBtn.style.cursor = 'not-allowed';
                    }
                }
            });
        }
    });
}

private generateRecoveryWords(): string[] {
    const wordsList = [
        'apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum',
        'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'
    ];
    const recoveryWords: string[] = [];
    while (recoveryWords.length < 4) {
        const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)];
        if (!recoveryWords.includes(randomWord)) {
            recoveryWords.push(randomWord);
        }
    }
    return recoveryWords;
}

private exportUserData(): void {
    const data: { [key: string]: string | null } = {};
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key) {
            const value = localStorage.getItem(key);
            data[key] = value;
        }
    }

    const jsonData = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonData], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'user_data.json';
    this.shadowRoot?.appendChild(a);
    a.click();
    this.shadowRoot?.removeChild(a);
    URL.revokeObjectURL(url);
}

private updateActionButtons(): void {
    const buttonContainer = this.shadowRoot?.querySelector('.button-container');
    if (!buttonContainer) return;

    buttonContainer.innerHTML = `
        <div class="action-buttons-wrapper">
            <button onclick="${this.getConfirmFunction()}" class="action-button confirm-button">✓</button>
            <button onclick="${this.getCancelFunction()}" class="action-button cancel-button">✗</button>
        </div>
    `;
}

private getConfirmFunction(): string {
    switch (currentMode) {
        case 'wallet':
            return 'window.confirmWalletRow()';
        case 'process':
            return 'window.confirmProcessRow()';
        default:
            return 'window.confirmRow()';
    }
}

private getCancelFunction(): string {
    switch (currentMode) {
        case 'wallet':
            return 'window.cancelWalletRow()';
        case 'process':
            return 'window.cancelProcessRow()';
        default:
            return 'window.cancelRow()';
    }
}

// Fonctions de gestion des tableaux
private addRow(): void {
    if (isAddingRow) return;

    isAddingRow = true;
    const table = this.shadowRoot?.querySelector<HTMLTableElement>('#pairing-table tbody');
    if (!table) return;

    currentRow = table.insertRow();
    const cells = ['SP Address', 'Device Name', 'SP Emojis'];
    
    cells.forEach((_, index) => {
        const cell = currentRow!.insertCell();
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'edit-input';
        
        // Ajouter un événement pour mettre à jour automatiquement les emojis
        if (index === 0) { 
            input.addEventListener('input', async (e) => {
                const addressInput = e.target as HTMLInputElement;
                const emojiCell = currentRow!.cells[2]; 
                const emojis = await addressToEmoji(addressInput.value); 
                if (emojiCell.querySelector('input')) {
                    (emojiCell.querySelector('input') as HTMLInputElement).value = emojis;
                }
            });
        }
        
        if (index === 2) { 
            input.readOnly = true;
        }
        
        cell.appendChild(input);
    });

    const deleteCell = currentRow.insertCell();
    deleteCell.style.width = '40px';

    this.updateActionButtons();
}

// Fonctions de mise à jour de l'interface
private updateTableContent(rows: Row[]): void {
    const tbody = this.shadowRoot?.querySelector('#pairing-table tbody');
    if (!tbody) return;

    tbody.innerHTML = rows.map(row => `
        <tr>
            <td>${row.column1}</td>
            <td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
            <td>${row.column3}</td>
            <td>
                <button class="delete-button" onclick="window.deleteRow(this)">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="red">
                        <path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/>
                    </svg>
                </button>
            </td>
        </tr>
    `).join('');
}



private confirmRow(): void {
    if (!currentRow) return;

    const inputs = currentRow.getElementsByTagName('input');
    const values: string[] = Array.from(inputs).map(input => input.value.trim());

    // Vérification des champs vides
    if (values.some(value => value === '')) {
        this.showAlert('Please fill in all fields');
        return;
    }

    // Vérification de la longueur de l'adresse SP
    if (values[0].length !== 118) {
        this.showAlert('SP Address must be exactly 118 characters long');
        return;
    }

    const newRow: Row = {
        column1: values[0],
        column2: values[1],
        column3: values[2]
    };

    const storageKey = STORAGE_KEYS[currentMode];
    const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]');
    rows.push(newRow);
    localStorage.setItem(storageKey, JSON.stringify(rows));

    isAddingRow = false;
    currentRow = null;
    
    this.resetButtonContainer();
    this.updateTableContent(rows);
}

private cancelRow(): void {
    if (!currentRow) return;
    
    currentRow.remove();
    isAddingRow = false;
    currentRow = null;
    
    this.resetButtonContainer();
}

private resetButtonContainer(): void {
    const buttonContainer = this.shadowRoot?.querySelector('.button-container');
    if (!buttonContainer) return;

    buttonContainer.innerHTML = `
        <button class="add-row-button button-style" onclick="window.addRow()">Add a line</button>
    `;
}

private deleteRow(button: HTMLButtonElement): void {
    const row = button.closest('tr');
    if (!row) return;

    const table = row.closest('tbody');
    if (!table) return;

    // Vérifier le nombre de lignes restantes
    const remainingRows = table.getElementsByTagName('tr').length;
    if (remainingRows <= 2) {
        this.showAlert('You must keep at least 2 devices paired');
        return;
    }

    // Animation de suppression
    row.style.transition = 'opacity 0.3s';
    row.style.opacity = '0';

    setTimeout(() => {
        // Obtenir l'index avant la suppression
        const index = Array.from(table.children).indexOf(row);
        
        // Supprimer la ligne du DOM
        row.remove();

        // Mettre à jour le localStorage
        const storageKey = STORAGE_KEYS[currentMode];
        const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
        rows.splice(index, 1);
        localStorage.setItem(storageKey, JSON.stringify(rows));
    }, 300);
}

private editDeviceName(cell: HTMLTableCellElement): void {
    if (cell.classList.contains('editing')) return;

    const currentValue = cell.textContent || '';
    const input = document.createElement('input');
    input.type = 'text';
    input.value = currentValue;
    input.className = 'edit-input';
    
    input.addEventListener('blur', () => this.finishEditing(cell, input));
    input.addEventListener('keypress', (e: KeyboardEvent) => {
        if (e.key === 'Enter') {
            this.finishEditing(cell, input);
        }
    });

    cell.textContent = '';
    cell.appendChild(input);
    cell.classList.add('editing');
    input.focus();
}

private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void {
    const newValue = input.value.trim();
    if (newValue === '') {
        cell.textContent = cell.getAttribute('data-original-value') || '';
        cell.classList.remove('editing');
        return;
    }

    const row = cell.closest('tr');
    if (!row) return;

    const table = row.closest('tbody');
    if (!table) return;

    const index = Array.from(table.children).indexOf(row);
    const storageKey = STORAGE_KEYS[currentMode];
    const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]');
    
    if (rows[index]) {
        rows[index].column2 = newValue;
        localStorage.setItem(storageKey, JSON.stringify(rows));
    }

    cell.textContent = newValue;
    cell.classList.remove('editing');
}
// Fonction pour gérer le téléchargement de l'avatar
private handleAvatarUpload(event: Event): void {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    
    if (file) {
        const reader = new FileReader();
        reader.onload = (e: ProgressEvent<FileReader>) => {
            const result = e.target?.result as string;
            const popupAvatar = this.shadowRoot?.getElementById('popup-avatar-img') as HTMLImageElement;
            const navAvatar = this.shadowRoot?.querySelector('.nav-wrapper .avatar') as HTMLImageElement;
            
            if (popupAvatar) popupAvatar.src = result;
            if (navAvatar) navAvatar.src = result;
            
            localStorage.setItem('userAvatar', result);
        };
        reader.readAsDataURL(file);
    }
}


private showProcess(): void {
    //console.log("showProcess called");
    currentMode = 'process';
    this.hideAllContent();
    
    const headerTitle = this.shadowRoot?.getElementById('header-title');
    if (headerTitle) headerTitle.textContent = 'Process';
    
    const processContent = this.shadowRoot?.getElementById('process-content');
    if (processContent) {
        processContent.style.display = 'block';
        processContent.innerHTML = `
            <div class="parameter-header" id="parameter-header">Process</div>
            <div class="table-container">
                <table class="parameter-table" id="process-table">
                    <thead>
                        <tr>
                            <th>Process Name</th>
                            <th>Role</th>
                            <th>Notifications</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        `;
        
        
        this.updateProcessTableContent(mockProcessRows);
    }
}

// Fonction utilitaire pour mettre à jour le contenu du tableau Process
private updateProcessTableContent(rows: any[]): void {
    const tbody = this.shadowRoot?.querySelector('#process-table tbody');
    if (!tbody) return;

    tbody.innerHTML = rows.map(row => `
        <tr>
            <td>${row.process}</td>
            <td>${row.role}</td>
            <td>
                <div class="notification-container" onclick="window.showProcessNotifications('${row.process}')">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
                        <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
                    </svg>
                    <span class="notification-count" data-process="${row.process}">
                        ${row.notification?.messages?.filter((m: any) => !m.read).length || 0}/${row.notification?.messages?.length || 0}
                    </span>
                </div>
            </td>
        </tr>
    `).join('');
}



private showProcessNotifications(processName: string): void {
    const process = mockProcessRows.find(p => p.process === processName);
    if (!process) return;

    const modal = document.createElement('div');
    modal.className = 'notifications-modal';
    
    let notificationsList = process.notification.messages.map(msg => `
        <div class="notification-item ${msg.read ? 'read' : 'unread'}" 
             onclick="window.markAsRead('${processName}', ${msg.id}, this)">
            <div class="notification-status">
                ${msg.read ? 
                    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="green">
                        <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
                    </svg>` : 
                    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" fill="black">
                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
                    </svg>`
                }
            </div>
            <div class="notification-content">
                <span>${msg.message}</span>
                <small>${msg.date}</small>
            </div>
        </div>
    `).join('');

    if (process.notification.messages.length === 0) {
        notificationsList = '<p>No notifications</p>';
    }

    modal.innerHTML = `
        <div class="notifications-content">
            <h3>${processName} Notifications</h3>
            <div class="notifications-list">
                ${notificationsList}
            </div>
            <button class="close-notifications">x</button>
        </div>
    `;

    this.shadowRoot?.appendChild(modal);

    // Mettre à jour le compteur de notifications
    const countElement = this.shadowRoot?.querySelector(`.notification-count[data-process="${processName}"]`);
    if (countElement) {
        const notifCount = this.calculateNotifications(process.notification.messages);
        countElement.textContent = `${notifCount.unread}/${notifCount.total}`;
    }

    const closeButton = modal.querySelector('.close-notifications');
    closeButton?.addEventListener('click', () => {
        modal.remove();
        this.showProcess(); // Rafraîchir l'affichage pour mettre à jour les compteurs
    });
}


private handleLogout(): void {
    localStorage.clear();
    window.location.href = '../login/login.html';
}


// Fonctions de gestion des contrats
private showContractPopup(contractId: string) {
    // Empêcher la navigation par défaut
    event?.preventDefault();
    // Check if the contract exists in mockContracts
    const contract = mockContracts[contractId as keyof typeof mockContracts];
    if (!contract) {
        console.error('Contract not found:', contractId);
        return;
    }

    // Créer la popup
    const popup = document.createElement('div');
    popup.className = 'contract-popup-overlay';
    popup.innerHTML = `
        <div class="contract-popup-content">
            <button class="close-contract-popup">&times;</button>
            <h2>${contract.title}</h2>
            <div>
                <p><strong>Date:</strong> ${contract.date}</p>
                <p><strong>Parties:</strong> ${contract.parties.join(', ')}</p>
                <p><strong>Terms:</strong></p>
                <ul>
                    ${contract.terms.map(term => `<li>${term}</li>`).join('')}
                </ul>
                <p><strong>Content:</strong> ${contract.content}</p>
            </div>
        </div>
    `;

    // Ajouter la popup au body
    this.shadowRoot?.appendChild(popup);

    // Gérer la fermeture
    const closeBtn = popup.querySelector('.close-contract-popup');
    const closePopup = () => popup.remove();
    
    closeBtn?.addEventListener('click', closePopup);
    popup.addEventListener('click', (e) => {
        if (e.target === popup) closePopup();
    });
}

// Ajouter à l'objet window


// Fonction utilitaire pour cacher tous les contenus
private hideAllContent(): void {
    const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
    contents.forEach(id => {
        const element = this.shadowRoot?.getElementById(id);
        if (element) {
            element.style.display = 'none';
        }
    });
}

// Fonctions d'affichage des sections
private showPairing(): void {

    isAddingRow = false;
    currentRow = null;

    currentMode = 'pairing';
    // Cacher tous les contenus
    this.hideAllContent();
    
    // Mettre à jour le titre
    const headerElement = this.shadowRoot?.getElementById('parameter-header');
    if (headerElement) {
        headerElement.textContent = 'Pairing';
    }

    
    // Afficher le contenu de pairing
    const pairingContent = this.shadowRoot?.getElementById('pairing-content');

    if (pairingContent) {
        pairingContent.style.display = 'block';
        pairingContent.innerHTML = `
        <div class="parameter-header" id="parameter-header">Pairing</div>
            <div class="table-container">
                <table class="parameter-table" id="pairing-table">
                    <thead>
                        <tr>
                            <th>SP Address</th>
                            <th>Device Name</th>
                            <th>SP Emojis</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div class="button-container">
                    <button class="add-row-button button-style" onclick="window.addRow()">Add a line</button>
                </div>
            </div>
        `;
        
        // Mettre à jour le contenu du tableau
        const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
        this.updateTableContent(rows);
    }
}

private showWallet(): void {
    isAddingRow = false;
    currentRow = null;

    currentMode = 'wallet';
    this.hideAllContent();
    
    // Mettre à jour le titre
    const headerTitle = this.shadowRoot?.getElementById('header-title');
    if (headerTitle) headerTitle.textContent = 'Wallet';
   
    const walletContent = this.shadowRoot?.getElementById('wallet-content');
    if (!walletContent) return;
    walletContent.style.display = 'block';
    walletContent.innerHTML = `
     <div class="parameter-header" id="parameter-header">Wallet</div>
        <div class="table-container">
            <table class="parameter-table" id="wallet-table">
                <thead>
                    <tr>
                        <th>Label</th>
                        <th>Wallet</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div class="button-container">
                <button class="add-row-button button-style" onclick="addWalletRow()">Add a line</button>
            </div>
        </div>
    `;
    
    const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
    this.updateWalletTableContent(rows);
}


private updateWalletTableContent(rows: WalletRow[]): void {
    const tbody = this.shadowRoot?.querySelector('#wallet-table tbody');
    if (!tbody) return;

    tbody.innerHTML = rows.map(row => `
        <tr>
            <td>${row.column1}</td>
            <td>${row.column2}</td>
            <td class="device-name" onclick="editDeviceName(this)">${row.column3}</td>
        </tr>
    `).join('');
}

private showData(): void {
    //console.log("showData called");
    currentMode = 'data';
    this.hideAllContent();
    
    const headerTitle = this.shadowRoot?.getElementById('header-title');
    if (headerTitle) headerTitle.textContent = 'Data';
    
    const dataContent = this.shadowRoot?.getElementById('data-content');
    if (dataContent) {
        dataContent.style.display = 'block';
        dataContent.innerHTML = `
            <div class="parameter-header" id="parameter-header">Data</div>
            <div class="table-container">
                <table class="parameter-table" id="data-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Visibility</th>
                            <th>Role</th>
                            <th>Duration</th>
                            <th>Legal</th>
                            <th>Contract</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        `;
        
        const rows = mockDataRows || JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]');
        this.updateDataTableContent(rows);
    }
}

// Fonctions de gestion du wallet
private addWalletRow(): void {
    if (isAddingRow) return;
    isAddingRow = true;

    const table = this.shadowRoot?.getElementById('wallet-table')?.getElementsByTagName('tbody')[0];
    if (!table) return;

    currentRow = table.insertRow();
    const placeholders = ['Label', 'Wallet', 'Type'];

    placeholders.forEach(placeholder => {
        const cell = currentRow!.insertCell();
        const input = document.createElement('input');
        input.type = 'text';
        input.placeholder = placeholder;
        input.className = 'edit-input';
        cell.appendChild(input);
    });

    // Remplacer le bouton "Add a line" par les boutons de confirmation/annulation
    const buttonContainer = this.shadowRoot?.querySelector('#wallet-content .button-container');
    if (!buttonContainer) return;
    
    buttonContainer.innerHTML = `
        <div class="action-buttons-wrapper">
            <button onclick="confirmWalletRow()" class="action-button confirm-button">✓</button>
            <button onclick="cancelWalletRow()" class="action-button cancel-button">✗</button>
        </div>
    `;

    this.updateActionButtons();
}

private confirmWalletRow(): void {
    if (!currentRow) return;

    const inputs = Array.from(currentRow.getElementsByTagName('input'));
    const allFieldsFilled = inputs.every(input => input.value.trim() !== '');

    if (allFieldsFilled) {
        const newRow: WalletRow = {
            column1: inputs[0].value.trim(),
            column2: inputs[1].value.trim(),
            column3: inputs[2].value.trim()
        };

        const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
        rows.push(newRow);
        localStorage.setItem(STORAGE_KEYS.wallet, JSON.stringify(rows));

        isAddingRow = false;
        currentRow = null;
        this.showWallet();
    } else {
        this.showAlert('Please complete all fields before confirming.');
    }
}

private cancelWalletRow(): void {
    if (!currentRow) return;
    
    currentRow.remove();
    isAddingRow = false;
    currentRow = null;
    
    // Réinitialiser le conteneur de boutons avec le bouton "Add a line"
    const buttonContainer = this.shadowRoot?.querySelector('#wallet-content .button-container');
    if (!buttonContainer) return;
    
    buttonContainer.innerHTML = `
        <button class="add-row-button button-style" onclick="window.addWalletRow()">Add a line</button>
    `;

    
}

private updateDataTableContent(rows: DataRow[]): void {
    const tbody = this.shadowRoot?.querySelector('#data-table tbody');
    if (!tbody) return;

    tbody.innerHTML = rows.map(row => `
        <tr>
            <td>${row.column1}</td>
            <td>${row.column2}</td>
            <td>${row.column3}</td>
            <td>${row.column4}</td>
            <td>${row.column5}</td>
            <td>
                <a href="javascript:void(0)" onclick="window.showContractPopup('${row.column6}'); return false;">${row.column6}</a>
            </td>
        </tr>
    `).join('');
}

// Fonctions de gestion de l'avatar et de la bannière
private openAvatarPopup(): void {
    const popup = this.shadowRoot?.getElementById('avatar-popup');
    if (!popup) return;

    // Récuprer les valeurs stockées
    const savedName = localStorage.getItem('userName');
    const savedLastName = localStorage.getItem('userLastName');
    const savedAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150';
    const savedBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200';
    const savedAddress = localStorage.getItem('userAddress') || '🏠 🌍 🗽🎊😩-🎊😑😩';

    popup.innerHTML = `
        <div class="popup-content">
            <h1>Profile</h1>
            <span class="close-popup">&times;</span>

            <div class="banner-container">
                <div class="banner-wrapper">
                    <img src="${savedBanner}" alt="Banner" id="popup-banner-img" class="banner-image clickable">
                    <input type="file" id="banner-upload" accept="image/*" style="display: none;">
                </div>
            </div>

            <div class="popup-avatar">
                <label for="avatar-upload" class="avatar-upload-label">
                    <img src="${savedAvatar}" alt="Avatar" id="popup-avatar-img">
                    <input type="file" id="avatar-upload" accept="image/*" style="display: none;">
                    <div class="avatar-overlay">
                        <span>Change Avatar</span>
                    </div>
                </label>
            </div>

            <div class="popup-info">
                <div class="info-row">
                    <strong>Name:</strong>
                    <input type="text" id="userName" value="${savedName}" class="editable">
                </div>
                <div class="info-row">
                    <strong>Last Name:</strong>
                    <input type="text" id="userLastName" value="${savedLastName}" class="editable">
                </div>
                <div class="info-row">
                    <strong>Address:</strong>
                    <span>${savedAddress}</span>
                </div>
            </div>
            
            <div class="popup-button-container">
            <div class="action-buttons-row">
                <button class="export-btn" onclick="window.exportUserData()">Export User Data</button>
                <button class="export-btn recovery-btn" onclick="window.exportRecovery()">Export Recovery</button>
                <button class="delete-account-btn" onclick="window.confirmDeleteAccount()">Delete Account</button>
            </div>
            <button class="logout-btn" onclick="window.handleLogout()">Log out</button>
            </div>
        </div>
    `;

    popup.style.display = 'block';
    this.setupEventListeners(popup);

    // Ajouter le gestionnaire d'événements pour la bannière
    const bannerImg = popup.querySelector('#popup-banner-img');
    const bannerInput = popup.querySelector('#banner-upload') as HTMLInputElement;
    
    if (bannerImg && bannerInput) {
        bannerImg.addEventListener('click', () => {
            bannerInput.click();
        });
    }

    const recoveryExported = localStorage.getItem('recoveryExported') === 'true';
    if (recoveryExported) {
        const exportRecoveryBtn = popup.querySelector('.recovery-btn') as HTMLButtonElement;
        if (exportRecoveryBtn) {
            exportRecoveryBtn.disabled = true;
            exportRecoveryBtn.style.opacity = '0.5';
            exportRecoveryBtn.style.cursor = 'not-allowed';
        }
    }
}

private setupEventListeners(popup: HTMLElement): void {
    // Gestionnaire pour la fermeture
    const closeBtn = popup.querySelector('.close-popup');
    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            popup.style.display = 'none';
        });
    }

    // Gestionnaire pour l'upload d'avatar
    const avatarUpload = popup.querySelector('#avatar-upload') as HTMLInputElement;
    if (avatarUpload) {
        avatarUpload.addEventListener('change', (e: Event) => {
            const file = (e.target as HTMLInputElement).files?.[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e: ProgressEvent<FileReader>) => {
                    const result = e.target?.result as string;
                    // Mise à jour de l'avatar dans la preview et le popup
                    const popupAvatar = this.shadowRoot?.getElementById('popup-avatar-img') as HTMLImageElement;
                    const previewAvatar = this.shadowRoot?.querySelector('.preview-avatar') as HTMLImageElement;
                    
                    if (popupAvatar) popupAvatar.src = result;
                    if (previewAvatar) previewAvatar.src = result;
                    
                    localStorage.setItem('userAvatar', result);
                };
                reader.readAsDataURL(file);
            }
        });
    }

    // Gestionnaire pour l'upload de bannière
    const bannerUpload = popup.querySelector('#banner-upload') as HTMLInputElement;
    if (bannerUpload) {
        bannerUpload.addEventListener('change', (e: Event) => {
            const file = (e.target as HTMLInputElement).files?.[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e: ProgressEvent<FileReader>) => {
                    const result = e.target?.result as string;
                    // Mise à jour de la bannière dans la preview et le popup
                    const popupBanner = this.shadowRoot?.getElementById('popup-banner-img') as HTMLImageElement;
                    const previewBanner = this.shadowRoot?.querySelector('.preview-banner-img') as HTMLImageElement;
                    
                    if (popupBanner) popupBanner.src = result;
                    if (previewBanner) previewBanner.src = result;
                    
                    localStorage.setItem('userBanner', result);
                };
                reader.readAsDataURL(file);
            }
        });
    }

    // Gestionnaires pour les champs de texte
    const nameInput = popup.querySelector('#userName') as HTMLInputElement;
    const lastNameInput = popup.querySelector('#userLastName') as HTMLInputElement;

    if (nameInput) {
        nameInput.addEventListener('input', () => {
            const newName = nameInput.value;
            localStorage.setItem('userName', newName);
            // Mise à jour du nom dans la preview
            const previewName = this.shadowRoot?.querySelector('.preview-name');
            if (previewName) previewName.textContent = newName;
        });
    }

    if (lastNameInput) {
        lastNameInput.addEventListener('input', () => {
            const newLastName = lastNameInput.value;
            localStorage.setItem('userLastName', newLastName);
            // Mise à jour du nom de famille dans la preview
            const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
            if (previewLastName) previewLastName.textContent = newLastName;
        });
    }
}

private closeAvatarPopup(): void {
    const popup = this.shadowRoot?.querySelector('.avatar-popup');
    if (popup) popup.remove();
}

private loadAvatar(): void {
    const savedAvatar = localStorage.getItem('userAvatar');
    if (savedAvatar) {
        const avatarImg = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
        if (avatarImg) {
            avatarImg.src = savedAvatar;
        }
    }
}

private loadUserInfo(): void {
    const savedName = localStorage.getItem('userName');
    const savedLastName = localStorage.getItem('userLastName');
    const savedAvatar = localStorage.getItem('userAvatar');
    const savedBanner = localStorage.getItem('userBanner');
    
    // Mise à jour du nom dans la preview
    if (savedName) {
        const previewName = this.shadowRoot?.querySelector('.preview-name');
        if (previewName) {
            previewName.textContent = savedName;
        }
    }

    // Mise à jour du nom de famille dans la preview
    if (savedLastName) {
        const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
        if (previewLastName) {
            previewLastName.textContent = savedLastName;
        }
    }
    
    // Mise à jour de l'avatar dans la preview
    if (savedAvatar) {
        const previewAvatar = this.shadowRoot?.querySelector('.preview-avatar') as HTMLImageElement;
        if (previewAvatar) {
            previewAvatar.src = savedAvatar;
        }
    }
    
    // Mise à jour de la bannière dans la preview
    if (savedBanner) {
        const previewBanner = this.shadowRoot?.querySelector('.preview-banner-img') as HTMLImageElement;
        if (previewBanner) {
            previewBanner.src = savedBanner;
        }
    }
}

private updateNavbarName(name: string): void {
    const nameElement = this.shadowRoot?.querySelector('.nav-wrapper .user-name');
    if (nameElement) {
        nameElement.textContent = name;
    }
}

private updateNavbarLastName(lastName: string): void {
    const lastNameElement = this.shadowRoot?.querySelector('.nav-wrapper .user-lastname');
    if (lastNameElement) {
        lastNameElement.textContent = lastName;
    }
}

private updateProfilePreview(data: { 
    avatar?: string, 
    banner?: string, 
    name?: string, 
    lastName?: string 
}): void {
    if (data.avatar) {
        const previewAvatar = this.shadowRoot?.querySelector('.preview-avatar') as HTMLImageElement;
        if (previewAvatar) previewAvatar.src = data.avatar;
    }

    if (data.banner) {
        const previewBanner = this.shadowRoot?.querySelector('.preview-banner-img') as HTMLImageElement;
        if (previewBanner) previewBanner.src = data.banner;
    }

    if (data.name) {
        const previewName = this.shadowRoot?.querySelector('.preview-name');
        if (previewName) previewName.textContent = data.name;
    }

    if (data.lastName) {
        const previewLastName = this.shadowRoot?.querySelector('.preview-lastname');
        if (previewLastName) previewLastName.textContent = data.lastName;
    }
}

private initializeEventListeners() {
    this.shadowRoot?.addEventListener('DOMContentLoaded', () => {
        this.showPairing();
    });

    const editableFields = this.shadowRoot?.querySelectorAll<HTMLElement>('.editable');
    if (editableFields) {
        editableFields.forEach(field => {
            field.addEventListener('click', () => {
                if (!field.classList.contains('editing')) {
                    const currentValue = field.textContent || '';
                    const input = document.createElement('input');
                    input.type = 'text';
                    input.value = currentValue;
                    input.className = 'edit-input';
                    
                    field.textContent = '';
                    field.appendChild(input);
                    field.classList.add('editing');
                    input.focus();
                }
            });
        });
    }

    const avatarInput = this.shadowRoot?.getElementById('avatar-upload') as HTMLInputElement;
    if (avatarInput) {
        avatarInput.addEventListener('change', this.handleAvatarUpload.bind(this));
    }
}
}

customElements.define('account-element', AccountElement);
export { AccountElement };