static/js/ui/modals.js

// static/js/ui/modals.js

import { dom } from './dom.js';

let currentGalleryImages = [];
let currentGalleryIndex = 0;

const createMenuItem = (options) => {
    const { action, format = '', text, icon, isDanger = false, type = 'button' } = options;
    const element = document.createElement(type);
    element.className = `menu-item ${isDanger ? 'danger' : ''}`;
    element.dataset.action = action;
    if (format) element.dataset.format = format;
    element.innerHTML = `${icon}<span>${text}</span><div class="hidden w-4 h-4 border-2 border-slate-300 border-t-blue-500 rounded-full animate-spin ml-auto"></div>`;
    return element;
};

const getConversionMenuItems = (action) => `
    ${createMenuItem({ action, format: 'pdf', text: 'تبدیل به PDF', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>` }).outerHTML}
    ${createMenuItem({ action, format: 'docx', text: 'تبدیل به Word', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H15M2.25 3h1.5M2.25 6h1.5M2.25 9h1.5M2.25 12h1.5M2.25 15h1.5M2.25 18h1.5M4.5 21h15a2.25 2.25 0 002.25-2.25V5.25A2.25 2.25 0 0019.5 3h-15A2.25 2.25 0 002.25 5.25v13.5A2.25 2.25 0 004.5 21z" /></svg>` }).outerHTML}
    ${createMenuItem({ action, format: 'txt', text: 'تبدیل به Text', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /></svg>` }).outerHTML}
    ${createMenuItem({ action, format: 'html', text: 'تبدیل به HTML', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>` }).outerHTML}
`;

function showImageInGallery(index) {
    if (index < 0 || index >= currentGalleryImages.length) return;
    currentGalleryIndex = index;
    const newImageUrl = currentGalleryImages[index];

    dom.galleryMainImage.style.opacity = '0';
    setTimeout(() => {
        dom.galleryMainImage.src = newImageUrl;
        dom.galleryMainImage.style.opacity = '1';
    }, 150);

    const thumbnails = dom.galleryThumbnails.querySelectorAll('.gallery-thumb');
    thumbnails.forEach((thumb, i) => {
        thumb.classList.toggle('active', i === index);
        if (i === index) {
            thumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
        }
    });
}

const handleGalleryKeyDown = (e) => {
    if (e.key === 'ArrowRight') showImageInGallery((currentGalleryIndex + 1) % currentGalleryImages.length);
    else if (e.key === 'ArrowLeft') showImageInGallery((currentGalleryIndex - 1 + currentGalleryImages.length) % currentGalleryImages.length);
    else if (e.key === 'Escape') closeImageGallery();
};

export function openImageGallery(imageUrlsString, startIndex) {
    try {
        currentGalleryImages = JSON.parse(imageUrlsString);
    } catch (e) {
        console.error("Failed to parse image URLs for gallery:", e);
        return;
    }

    if (!currentGalleryImages || currentGalleryImages.length === 0) return;
    
    dom.galleryThumbnails.innerHTML = '';
    currentGalleryImages.forEach((url, index) => {
        const thumb = document.createElement('img');
        thumb.src = url;
        thumb.className = 'gallery-thumb';
        thumb.onclick = () => showImageInGallery(index);
        dom.galleryThumbnails.appendChild(thumb);
    });

    showImageInGallery(startIndex);
    
    dom.imageGalleryModal.classList.remove('hidden');
    requestAnimationFrame(() => {
        dom.imageGalleryModal.classList.add('visible');
    });

    dom.galleryCloseBtn.onclick = closeImageGallery;
    dom.imageGalleryModal.onclick = (e) => { if (e.target === dom.imageGalleryModal) closeImageGallery(); };
    dom.galleryNextBtn.onclick = () => showImageInGallery((currentGalleryIndex + 1) % currentGalleryImages.length);
    dom.galleryPrevBtn.onclick = () => showImageInGallery((currentGalleryIndex - 1 + currentGalleryImages.length) % currentGalleryImages.length);
    window.addEventListener('keydown', handleGalleryKeyDown);
}

function closeImageGallery() {
    dom.imageGalleryModal.classList.remove('visible');
    setTimeout(() => {
        dom.imageGalleryModal.classList.add('hidden');
        dom.galleryMainImage.src = '';
    }, 300);
    window.removeEventListener('keydown', handleGalleryKeyDown);
}

export function toggleSidebar(show) {
    if (show) {
        dom.sidebarOverlay.classList.remove('hidden');
        requestAnimationFrame(() => {
            dom.sidebarOverlay.style.opacity = '1';
            dom.historySidebar.style.transform = 'translateX(0)';
        });
    } else {
        dom.sidebarOverlay.style.opacity = '0';
        dom.historySidebar.style.transform = 'translateX(100%)';
        setTimeout(() => dom.sidebarOverlay.classList.add('hidden'), 300);
    }
}

export function toggleEditModal(show) {
    if (show) {
        dom.editModal.classList.remove('hidden');
        requestAnimationFrame(() => {
            dom.editModalOverlay.style.opacity = '1';
            dom.editModalContent.style.opacity = '1';
            dom.editModalContent.style.transform = 'scale(1)';
            dom.editInput.focus();
        });
    } else {
        dom.editModalOverlay.style.opacity = '0';
        dom.editModalContent.style.opacity = '0';
        dom.editModalContent.style.transform = 'scale(0.95)';
        setTimeout(() => dom.editModal.classList.add('hidden'), 300);
    }
}

export function toggleHtmlPreviewModal(show, htmlContent = '') {
    if (show) {
        dom.htmlPreviewIframe.srcdoc = htmlContent;
        dom.htmlPreviewModal.classList.remove('hidden');
        requestAnimationFrame(() => {
            dom.htmlPreviewOverlay.style.opacity = '1';
            dom.htmlPreviewContent.style.opacity = '1';
            dom.htmlPreviewContent.style.transform = 'scale(1)';
        });
    } else {
        dom.htmlPreviewOverlay.style.opacity = '0';
        dom.htmlPreviewContent.style.opacity = '0';
        dom.htmlPreviewContent.style.transform = 'scale(0.95)';
        setTimeout(() => {
            dom.htmlPreviewModal.classList.add('hidden');
            dom.htmlPreviewIframe.srcdoc = ''; 
        }, 300);
    }
}

export function showHistoryMenu(event, sessionId) {
    event.stopPropagation();
    const menu = dom.historyItemMenu;

    menu.innerHTML = `
        ${createMenuItem({ action: 'rename', text: 'تغییر نام گفتگو', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125" /></svg>` }).outerHTML}
        <div class="menu-divider"></div>
        ${getConversionMenuItems('convert-chat')}
        <div class="menu-divider"></div>
        ${createMenuItem({ action: 'delete', text: 'حذف گفتگو', icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`, isDanger: true }).outerHTML}
    `;

    menu.dataset.sessionId = sessionId;

    const buttonRect = event.currentTarget.getBoundingClientRect();
    const menuHeight = 220;
    const margin = 8;
    
    let top = buttonRect.bottom + margin;
    let right = window.innerWidth - buttonRect.right;
    
    if (top + menuHeight > window.innerHeight) {
        top = buttonRect.top - menuHeight - margin;
    }
    
    menu.style.top = `${top}px`;
    menu.style.right = `${right}px`;
    menu.style.left = 'auto';
    menu.style.transformOrigin = (top > buttonRect.top) ? 'bottom right' : 'top right';

    menu.classList.add('visible');
    const closeMenu = () => {
        menu.classList.remove('visible');
        window.removeEventListener('click', closeMenu);
    };
    window.addEventListener('click', closeMenu, { once: true });
}

export function showMessageMenu(event, messageIndex, activeChat, escapeHTML) {
    event.stopPropagation();
    const menu = dom.messageItemMenu;
    const menuContent = dom.messageItemMenuContent;
    const message = activeChat.messages[messageIndex];
    if (!message) return;

    const textPart = message.parts.find(p => p.text);
    const textContent = textPart ? textPart.text : '[محتوای غیر متنی]';

    let menuItemsHtml = '';
    if (message.role === 'assistant' && textPart) {
        menuItemsHtml += getConversionMenuItems('convert-message');
        menuItemsHtml += '<div class="menu-divider"></div>';
    }
    
    menuItemsHtml += createMenuItem({ 
        action: 'delete-message', 
        text: 'حذف پیام', 
        icon: `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`, 
        isDanger: true 
    }).outerHTML;
    
    const escapedContent = escapeHTML(textContent);

    menuContent.innerHTML = `
        <div class="message-preview-container">
            <p class="message-preview-text">${escapedContent}</p>
        </div>
        ${menuItemsHtml}
    `;

    menu.dataset.messageIndex = messageIndex;

    menu.classList.remove('hidden');
    requestAnimationFrame(() => {
        menu.classList.add('visible');
    });
}


export function showConfirmModal(message, onConfirm) {
    dom.confirmModalMessage.textContent = message;
    dom.confirmModal.classList.remove('hidden');
    requestAnimationFrame(() => {
        dom.confirmModalOverlay.style.opacity = '1';
        dom.confirmModalContent.style.opacity = '1';
        dom.confirmModalContent.style.transform = 'scale(1)';
    });
    const hide = () => {
        dom.confirmModalOverlay.style.opacity = '0';
        dom.confirmModalContent.style.opacity = '0';
        dom.confirmModalContent.style.transform = 'scale(0.95)';
        setTimeout(() => dom.confirmModal.classList.add('hidden'), 300);
    };
    dom.confirmModalConfirmBtn.onclick = () => { onConfirm(); hide(); };
    dom.confirmModalCancelBtn.onclick = hide;
    dom.confirmModalOverlay.onclick = hide;
}

export function showRenameModal(currentTitle, onConfirm) {
    dom.renameInput.value = currentTitle;
    dom.renameModal.classList.remove('hidden');
    requestAnimationFrame(() => {
        dom.renameModalOverlay.style.opacity = '1';
        dom.renameModalContent.style.opacity = '1';
        dom.renameModalContent.style.transform = 'scale(1)';
        dom.renameInput.focus();
        dom.renameInput.select();
    });
    const hide = () => {
        dom.renameModalOverlay.style.opacity = '0';
        dom.renameModalContent.style.opacity = '0';
        dom.renameModalContent.style.transform = 'scale(0.95)';
        setTimeout(() => dom.renameModal.classList.add('hidden'), 300);
    };
    dom.renameModalContent.onsubmit = (e) => {
        e.preventDefault();
        const newTitle = dom.renameInput.value.trim();
        if (newTitle) { onConfirm(newTitle); }
        hide();
    };
    dom.renameModalCancelBtn.onclick = hide;
    dom.renameModalOverlay.onclick = hide;
}

export function showEditModal(currentText, onConfirm) {
    dom.editInput.value = currentText;
    toggleEditModal(true); 
    dom.editModalContent.onsubmit = (e) => {
        e.preventDefault();
        const newText = dom.editInput.value.trim();
        if (newText === '') { 
             showConfirmModal('متن پیام شما خالی است. آیا مایل به حذف پیام هستید؟', () => { onConfirm(''); });
        } else if (newText !== currentText) {
            onConfirm(newText);
        }
        toggleEditModal(false);
    };
    dom.editModalCancelBtn.onclick = () => toggleEditModal(false);
    dom.editModalOverlay.onclick = () => toggleEditModal(false);
}

export function toggleSettingsModal(show) {
    const modal = dom.settingsModal;
    const content = dom.settingsModalContent;
    if (show) {
        modal.classList.remove('hidden');
        requestAnimationFrame(() => {
            modal.style.opacity = '1';
            content.style.opacity = '1';
            content.style.transform = 'scale(1)';
        });
    } else {
        modal.style.opacity = '0';
        content.style.opacity = '0';
        content.style.transform = 'scale(0.95)';
        setTimeout(() => modal.classList.add('hidden'), 200);
    }
}

export function updateSettingsUI(isPremium) {
    if (!dom.settingsUserTier) return;
    
    let content = '';
    if (isPremium) {
        const premiumIcon = `<svg class="settings-tier-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="premium-gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#818cf8"/><stop offset="100%" stop-color="#c084fc"/></linearGradient></defs><path fill="url(#premium-gradient)" d="M50,5 C74.85,5 95,25.15 95,50 C95,74.85 74.85,95 50,95 C25.15,95 5,74.85 5,50 C5,25.15 25.15,5 50,5 Z M50,15 C30.67,15 15,30.67 15,50 C15,69.33 30.67,85 50,85 C69.33,85 85,69.33 85,50 C85,30.67 69.33,15 50,15 Z" /><text x="50" y="62" font-family="Arial" font-size="30" fill="white" text-anchor="middle" font-weight="bold">∞</text></svg>`;
        content = `
            <div class="settings-tier-container">
                ${premiumIcon}
                <div class="settings-tier-text text-slate-800 dark:text-slate-200">
                    نسخه: <span class="tier-name-premium">نامحدود</span>
                </div>
            </div>`;
    } else {
        const freeIcon = `<svg class="settings-tier-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17" stroke="#64748b" stroke-width="2" stroke-linecap="round"/><path d="M19 9L12 16L9.5 13.5" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
        content = `
             <div class="settings-tier-container">
                ${freeIcon}
                <div class="settings-tier-text">
                    نسخه: <span class="tier-name-free">رایگان</span>
                </div>
            </div>`;
    }
    dom.settingsUserTier.innerHTML = content;
}

export function togglePremiumFeatureModal(show) {
    if (show) {
        const icon = `<svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="icon-gradient" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stop-color="#818cf8" />
                    <stop offset="100%" stop-color="#c084fc" />
                </linearGradient>
            </defs>
            <path d="M12 2.5C12.41 2.5 12.75 2.84 12.75 3.25V4.44C15.96 4.97 18.5 7.79 18.5 11.06V17L20 18.5V19.5H4V18.5L5.5 17V11.06C5.5 7.79 8.04 4.97 11.25 4.44V3.25C11.25 2.84 11.59 2.5 12 2.5ZM12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22Z" fill="url(#icon-gradient)"/>
        </svg>`;
        dom.premiumModalIconContainer.innerHTML = icon;
        dom.premiumFeatureModal.classList.remove('hidden');
        requestAnimationFrame(() => {
            dom.premiumFeatureModal.classList.add('visible');
        });
    } else {
        dom.premiumFeatureModal.classList.remove('visible');
        setTimeout(() => {
            dom.premiumFeatureModal.classList.add('hidden');
        }, 300);
    }
}

export function togglePlusRequiredModal(show) {
    const modal = dom.plusRequiredModal;
    if (!modal) return;
    
    if (show) {
        const icon = `<svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="plus-icon-gradient" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stop-color="#3b82f6" />
                    <stop offset="100%" stop-color="#14b8a6" />
                </linearGradient>
            </defs>
            <path d="M11 11V3H13V11H21V13H13V21H11V13H3V11H11Z" fill="url(#plus-icon-gradient)"/>
            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="url(#plus-icon-gradient)" fill-opacity="0.6"/>
        </svg>`;
        dom.plusModalIconContainer.innerHTML = icon;
        modal.classList.remove('hidden');
        requestAnimationFrame(() => {
            modal.classList.add('visible');
        });
    } else {
        modal.classList.remove('visible');
        setTimeout(() => {
            modal.classList.add('hidden');
        }, 300);
    }
}