/**
 * Template Gallery Module
 * Displays prompt templates from prompts.json as selectable cards
 */

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

export function createTemplateGallery({ container, onSelectTemplate }) {
    const STORAGE_KEY = 'gemini-app-template-filters';
    
    // Load saved filters
    let savedFilters = {};
    try {
        const saved = localStorage.getItem(STORAGE_KEY);
        if (saved) savedFilters = JSON.parse(saved);
    } catch (e) {
        console.warn('Failed to load template filters', e);
    }

    let allTemplates = [];
    let currentCategory = savedFilters.category || 'all';
    let currentMode = savedFilters.mode || 'all';
    let searchQuery = '';
    let favoriteTemplateKeys = new Set();
    let favoriteFilterActive = savedFilters.favorites || false;
    let userTemplateFilterActive = savedFilters.userTemplates || false;

    function persistFilters() {
        try {
            const filters = {
                category: currentCategory,
                mode: currentMode,
                favorites: favoriteFilterActive,
                userTemplates: userTemplateFilterActive
            };
            localStorage.setItem(STORAGE_KEY, JSON.stringify(filters));
        } catch (e) {
            console.warn('Failed to save template filters', e);
        }
    }

    function setFavoriteKeys(keys) {
        if (Array.isArray(keys)) {
            favoriteTemplateKeys = new Set(keys.filter(Boolean));
        } else {
            favoriteTemplateKeys = new Set();
        }
    }

    function getTemplateKey(template) {
        if (!template) return '';
        if (template.userTemplateIndex !== undefined && template.userTemplateIndex !== null) {
            return `user-${template.userTemplateIndex}`;
        }

        const title = i18n.getText(template.title);
        const promptText = i18n.getText(template.prompt);
        const categoryText = i18n.getText(template.category);
        const modeText = template.mode || 'generate';

        return `builtin-${title}||${promptText}||${categoryText}||${modeText}`;
    }

    function isFavoriteKey(key) {
        return Boolean(key) && favoriteTemplateKeys.has(key);
    }

    async function updateFavoriteState(key, favorite) {
        if (!key || typeof favorite !== 'boolean') return;

        try {
            const response = await fetch('/template_favorite', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ key, favorite }),
            });
            const data = await response.json();
            if (!response.ok) {
                throw new Error(data.error || 'Failed to update favorite');
            }
            setFavoriteKeys(data.favorites);
        } catch (error) {
            throw error;
        }
    }

    function resolveTagText(tag) {
        if (!tag) return '';
        return i18n.getText(tag);
    }

    function getTemplateTags(template) {
        if (!template) return [];
        const rawTags = template.tags;
        if (!rawTags) return [];

        let normalized = [];
        if (Array.isArray(rawTags)) {
            normalized = rawTags;
        } else if (typeof rawTags === 'string') {
            normalized = rawTags.split(',');
        } else {
            return [];
        }

        return normalized
            .map(tag => resolveTagText(tag).trim())
            .filter(Boolean);
    }

    function filterTemplates() {
        let filtered = allTemplates;

        if (currentCategory !== 'all') {
            filtered = filtered.filter(t => {
                const categoryText = i18n.getText(t.category);
                return categoryText === currentCategory;
            });
        }

        if (currentMode !== 'all') {
            filtered = filtered.filter(t => {
                return (t.mode || 'generate') === currentMode;
            });
        }

        if (favoriteFilterActive) {
            filtered = filtered.filter(t => {
                const key = getTemplateKey(t);
                return isFavoriteKey(key);
            });
        }

        if (userTemplateFilterActive) {
            filtered = filtered.filter(t => Boolean(t.isUserTemplate));
        }

        if (searchQuery) {
            const query = searchQuery.toLowerCase();
            filtered = filtered.filter(t => {
                const title = i18n.getText(t.title).toLowerCase();
                const prompt = i18n.getText(t.prompt).toLowerCase();
                const category = i18n.getText(t.category).toLowerCase();
                const tagText = getTemplateTags(t).join(' ').toLowerCase();
                return title.includes(query) ||
                    prompt.includes(query) ||
                    category.includes(query) ||
                    tagText.includes(query);
            });
        }

        return filtered;
    }

    function getCategories() {
        const categories = new Set();
        allTemplates.forEach(t => {
            if (t.category) {
                const categoryText = i18n.getText(t.category);
                if (categoryText) categories.add(categoryText);
            }
        });
        return Array.from(categories).sort();
    }

    function createTemplateCard(template) {
        const card = document.createElement('div');
        card.className = 'template-card';
        card.setAttribute('data-category', i18n.getText(template.category) || '');
        card.setAttribute('data-mode', template.mode || 'generate');

        const preview = document.createElement('div');
        preview.className = 'template-card-preview';
        if (template.preview) {
            const img = document.createElement('img');
            img.src = template.preview;
            img.alt = i18n.getText(template.title) || 'Template preview';
            img.loading = 'lazy';
            img.onerror = function () {
                this.onerror = null;
                this.src = '/static/eror.png';
            };
            preview.appendChild(img);
        }

        const previewActions = document.createElement('div');
        previewActions.className = 'template-card-preview-actions';

        const templateKey = getTemplateKey(template);
        const isFavorite = isFavoriteKey(templateKey);

        const favoriteBtn = document.createElement('button');
        favoriteBtn.type = 'button';
        favoriteBtn.className = `template-card-favorite-btn${isFavorite ? ' active' : ''}`;
        favoriteBtn.setAttribute('aria-pressed', isFavorite ? 'true' : 'false');
        favoriteBtn.title = isFavorite ? 'Remove from favorites' : 'Mark as favorite';
        favoriteBtn.innerHTML = `
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.5 4.5 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.5 3 22 5.5 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>`;
        favoriteBtn.addEventListener('click', async (event) => {
            event.stopPropagation();
            favoriteBtn.disabled = true;
            try {
                await updateFavoriteState(templateKey, !isFavorite);
                render();
            } catch (error) {
                console.error('Failed to update favorite:', error);
                favoriteBtn.disabled = false;
            }
        });
        previewActions.appendChild(favoriteBtn);

        if (template.isUserTemplate || template.builtinTemplateIndex !== undefined) {
            const editBtn = document.createElement('button');
            editBtn.className = 'template-edit-btn';
            editBtn.innerHTML = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M18.5 2.50001C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.50001C21.8978 2.89784 22.1213 3.43741 22.1213 4.00001C22.1213 4.56262 21.8978 5.10219 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            `;
            editBtn.title = 'Edit Template';
            editBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                if (window.openEditTemplateModal) {
                    window.openEditTemplateModal(template);
                }
            });
            previewActions.appendChild(editBtn);
            
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'template-edit-btn'; // Reuse same style
            deleteBtn.innerHTML = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M8 6V4C8 3.46957 8.21071 3 8.58579 2.62513C8.96086 2.25026 9.46957 2.03967 10 2.03967H14C14.5304 2.03967 15.0391 2.25026 15.4142 2.62513C15.7893 3 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            `;
            deleteBtn.title = 'Delete Template';
            deleteBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                
                const deleteModal = document.getElementById('delete-confirm-modal');
                const confirmBtn = document.getElementById('confirm-delete-btn');
                const cancelBtn = document.getElementById('cancel-delete-btn');
                const closeBtn = document.getElementById('close-delete-modal');
                
                if (!deleteModal || !confirmBtn) {
                    console.error('Delete modal elements not found');
                    return;
                }
                
                const closeModal = () => {
                    deleteModal.classList.add('hidden');
                    confirmBtn.replaceWith(confirmBtn.cloneNode(true)); // Remove listeners
                    cancelBtn?.replaceWith(cancelBtn.cloneNode(true));
                    closeBtn?.replaceWith(closeBtn.cloneNode(true));
                };
                
                deleteModal.classList.remove('hidden');
                
                // Setup new listeners
                const newConfirmBtn = document.getElementById('confirm-delete-btn');
                const newCancelBtn = document.getElementById('cancel-delete-btn');
                const newCloseBtn = document.getElementById('close-delete-modal');
                
                newConfirmBtn.addEventListener('click', async () => {
                    try {
                        const formData = new FormData();
                        formData.append('template_index', template.userTemplateIndex);
                        
                        const response = await fetch('/delete_template', {
                            method: 'POST',
                            body: formData
                        });
                        
                        const data = await response.json();
                        if (data.success) {
                            closeModal();
                            load();
                        } else {
                            alert('Failed to delete: ' + (data.error || 'Unknown error'));
                        }
                    } catch (error) {
                        console.error('Error deleting template:', error);
                        alert('Error deleting template');
                    }
                });
                
                newCancelBtn?.addEventListener('click', closeModal);
                newCloseBtn?.addEventListener('click', closeModal);
                
                // Close on click outside
                deleteModal.onclick = (event) => {
                    if (event.target === deleteModal) {
                        closeModal();
                    }
                };
            });
            previewActions.appendChild(deleteBtn);
        }

        preview.appendChild(previewActions);
        card.appendChild(preview);

        const content = document.createElement('div');
        content.className = 'template-card-content';

        const title = document.createElement('h4');
        title.className = 'template-card-title';
        title.textContent = i18n.getText(template.title) || 'Untitled Template';
        content.appendChild(title);

        card.appendChild(content);

        card.addEventListener('click', () => {
            onSelectTemplate?.(template);
        });

        return card;
    }

    async function load() {
        try {
            const response = await fetch('/prompts');
            const data = await response.json();

            if (data.prompts) {
                allTemplates = data.prompts;
                setFavoriteKeys(data.favorites);
                render();
                return true;
            }
            return false;
        } catch (error) {
            console.error('Failed to load templates:', error);
            return false;
        }
    }

    function render() {
        if (!container) return;

        const filtered = filterTemplates();
        const categories = getCategories();

        container.innerHTML = '';

        const header = document.createElement('div');
        header.className = 'template-gallery-header';

        const title = document.createElement('h2');
        title.className = 'template-gallery-title';
        title.textContent = i18n.t('promptTemplates');
        header.appendChild(title);

        const controls = document.createElement('div');
        controls.className = 'template-gallery-controls';

        const searchRow = document.createElement('div');
        searchRow.className = 'template-gallery-search-row';

        const searchContainer = document.createElement('div');
        searchContainer.className = 'template-search-container';
        const searchInput = document.createElement('input');
        searchInput.type = 'text';
        searchInput.className = 'template-search-input';
        searchInput.placeholder = i18n.t('searchPlaceholder');
        searchInput.value = searchQuery;

        searchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                searchQuery = e.target.value;
                render();
            }
        });

        searchInput.addEventListener('blur', (e) => {
            if (searchQuery !== e.target.value) {
                searchQuery = e.target.value;
                render();
            }
        });

        searchContainer.appendChild(searchInput);
        searchRow.appendChild(searchContainer);
        controls.appendChild(searchRow);

        const modeSelect = document.createElement('select');
        modeSelect.className = 'template-mode-select';
        const modes = [
            { value: 'all', label: 'All Modes' },
            { value: 'edit', label: 'Edit' },
            { value: 'generate', label: 'Generate' }
        ];
        modes.forEach(mode => {
            const option = document.createElement('option');
            option.value = mode.value;
            option.textContent = mode.label;
            modeSelect.appendChild(option);
        });
        modeSelect.value = currentMode;
        modeSelect.addEventListener('change', (e) => {
            currentMode = e.target.value;
            persistFilters();
            render();
        });

        const categorySelect = document.createElement('select');
        categorySelect.className = 'template-category-select';
        const allOption = document.createElement('option');
        allOption.value = 'all';
        allOption.textContent = i18n.t('allCategories');
        categorySelect.appendChild(allOption);
        categories.forEach(cat => {
            const option = document.createElement('option');
            option.value = cat;
            option.textContent = cat;
            categorySelect.appendChild(option);
        });
        categorySelect.value = currentCategory;
        categorySelect.addEventListener('change', (e) => {
            currentCategory = e.target.value;
            persistFilters();
            render();
        });

        const favoritesToggle = document.createElement('button');
        favoritesToggle.type = 'button';
        favoritesToggle.className = `template-favorites-toggle${favoriteFilterActive ? ' active' : ''}`;
        favoritesToggle.setAttribute('aria-pressed', favoriteFilterActive ? 'true' : 'false');
        favoritesToggle.setAttribute('aria-label', favoriteFilterActive ? 'Show all templates' : 'Show favorites only');
        favoritesToggle.title = favoriteFilterActive ? 'Show all templates' : 'Show favorites only';
        favoritesToggle.innerHTML = `
            <span class="template-favorites-toggle-icon" aria-hidden="true">
                <svg viewBox="0 0 24 20" width="16" height="16" fill="currentColor">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.5 4.5 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.5 3 22 5.5 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
            </span>
        `;
        favoritesToggle.addEventListener('click', () => {
            favoriteFilterActive = !favoriteFilterActive;
            persistFilters();
            render();
        });
        const filterRow = document.createElement('div');
        filterRow.className = 'template-gallery-filter-row';

        filterRow.appendChild(modeSelect);
        filterRow.appendChild(categorySelect);
        filterRow.appendChild(favoritesToggle);

        const userToggle = document.createElement('button');
        userToggle.type = 'button';
        userToggle.className = `template-user-toggle${userTemplateFilterActive ? ' active' : ''}`;
        userToggle.setAttribute('aria-pressed', userTemplateFilterActive ? 'true' : 'false');
        userToggle.setAttribute('aria-label', userTemplateFilterActive ? 'Show all templates' : 'Show my templates');
        userToggle.title = userTemplateFilterActive ? 'Show all templates' : 'Show my templates';
        userToggle.innerHTML = `
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
        `;
        userToggle.addEventListener('click', () => {
            userTemplateFilterActive = !userTemplateFilterActive;
            persistFilters();
            render();
        });
        filterRow.appendChild(userToggle);

        const createTemplateBtn = document.createElement('button');
        createTemplateBtn.className = 'template-create-btn';
        createTemplateBtn.innerHTML = `
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 14H12M12 14H14M12 14V16M12 14V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <path
                    d="M22 11.7979C22 9.16554 22 7.84935 21.2305 6.99383C21.1598 6.91514 21.0849 6.84024 21.0062 6.76946C20.1506 6 18.8345 6 16.2021 6H15.8284C14.6747 6 14.0979 6 13.5604 5.84678C13.2651 5.7626 12.9804 5.64471 12.7121 5.49543C12.2237 5.22367 11.8158 4.81578 11 4L10.4497 3.44975C10.1763 3.17633 10.0396 3.03961 9.89594 2.92051C9.27652 2.40704 8.51665 2.09229 7.71557 2.01738C7.52976 2 7.33642 2 6.94975 2C6.06722 2 5.62595 2 5.25839 2.06935C3.64031 2.37464 2.37464 3.64031 2.06935 5.25839C2 5.62595 2 6.06722 2 6.94975M21.9913 16C21.9554 18.4796 21.7715 19.8853 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V11"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            </svg>
        `;
        createTemplateBtn.addEventListener('click', () => {
            if (window.openCreateTemplateModal) {
                window.openCreateTemplateModal();
            }
        });
        filterRow.appendChild(createTemplateBtn);

        controls.appendChild(filterRow);

        header.appendChild(controls);
        container.appendChild(header);

        const count = document.createElement('div');
        count.className = 'template-results-count';
        count.textContent = i18n.t('resultsCount', filtered.length);
        container.appendChild(count);

        const grid = document.createElement('div');
        grid.className = 'template-card-grid';
        if (filtered.length === 0) {
            const empty = document.createElement('div');
            empty.className = 'template-empty-state';
            empty.textContent = i18n.t('noResults');
            grid.appendChild(empty);
        } else {
            filtered.forEach(template => {
                grid.appendChild(createTemplateCard(template));
            });
        }

        container.appendChild(grid);
    }

    return {
        load,
        render,
        show() {
            if (container) {
                container.classList.remove('hidden');
            }
        },
        hide() {
            if (container) {
                container.classList.add('hidden');
            }
        }
    };
}