// ============================================
// Gallery — Image Browser & Manager with Sample Images
// ============================================

const Gallery = {
    images: [],
    selectedImages: new Set(),
    filters: { search: '', category: '', camera: '' },
    viewMode: 'grid', // 'grid' or 'preview'
    currentIndex: null,

    init() {
        this.images = Helpers.deepClone(MockData.images);
        this.renderFilters();
        this.renderGrid();
        this.bindEvents();
        this.updateViewToggle();
    },

    renderFilters() {
        const categorySelect = Helpers.$('#gallery-filter-category');
        const cameraSelect = Helpers.$('#gallery-filter-camera');

        if (categorySelect) {
            categorySelect.innerHTML = '<option value="">All Categories</option>' +
                MockData.categories.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
        }

        if (cameraSelect) {
            const cameras = [...new Set(this.images.map(i => i.camera))];
            cameraSelect.innerHTML = '<option value="">All Cameras</option>' +
                cameras.map(c => `<option value="${c}">${c}</option>`).join('');
        }
    },

    bindEvents() {
        // Search
        Helpers.$('#gallery-search').addEventListener('input', Helpers.debounce((e) => {
            this.filters.search = e.target.value;
            this.renderGrid();
        }));

        // Filters
        Helpers.$('#gallery-filter-category').addEventListener('change', (e) => {
            this.filters.category = e.target.value;
            this.renderGrid();
        });

        Helpers.$('#gallery-filter-camera').addEventListener('change', (e) => {
            this.filters.camera = e.target.value;
            this.renderGrid();
        });

        // View toggle buttons
        Helpers.$('#btn-view-grid')?.addEventListener('click', () => {
            this.viewMode = 'grid';
            this.currentIndex = null;
            this.updateViewToggle();
            this.renderGrid();
        });

        Helpers.$('#btn-view-preview')?.addEventListener('click', () => {
            this.viewMode = 'preview';
            this.currentIndex = 0;
            this.updateViewToggle();
            this.renderGrid();
        });

        // Select all / clear
        Helpers.$('#btn-select-all-gallery')?.addEventListener('click', () => this.selectAll());
        Helpers.$('#btn-clear-gallery')?.addEventListener('click', () => this.clearSelection());

        // Annotate button
        Helpers.$('#btn-annotate-selected')?.addEventListener('click', () => {
            if (this.selectedImages.size === 0) {
                Toast.show('Select images to annotate', 'warning');
                return;
            }
            Toast.show(`Annotating ${this.selectedImages.size} image(s)...`, 'info');
        });

        // Grid click delegation
        Helpers.$('#gallery-grid')?.addEventListener('click', (e) => {
            // Preview mode navigation handled in renderPreviewView
            if (e.target.closest('.gallery-preview__nav')) return;

            const item = e.target.closest('.gallery-item');
            if (item) {
                const id = item.dataset.imageId;
                // Single click opens detail panel, Ctrl+Click for multi-select
                if (e.ctrlKey || e.metaKey) {
                    this.toggleImage(id, true);
                } else {
                    this.viewImage(id);
                }
            }
        });

        // Keyboard navigation in preview mode
        document.addEventListener('keydown', (e) => {
            if (this.viewMode !== 'preview') return;
            if (e.key === 'ArrowLeft') this.navigatePreview(-1);
            if (e.key === 'ArrowRight') this.navigatePreview(1);
            if (e.key === 'Escape') {
                this.viewMode = 'grid';
                this.currentIndex = null;
                this.updateViewToggle();
                this.renderGrid();
            }
        });
    },

    updateViewToggle() {
        const gridBtn = Helpers.$('#btn-view-grid');
        const previewBtn = Helpers.$('#btn-view-preview');
        if (gridBtn) gridBtn.classList.toggle('active', this.viewMode === 'grid');
        if (previewBtn) previewBtn.classList.toggle('active', this.viewMode === 'preview');
    },

    getFilteredImages() {
        return this.images.filter(img => {
            if (this.filters.search) {
                const term = this.filters.search.toLowerCase();
                if (!img.filename.toLowerCase().includes(term)) return false;
            }
            if (this.filters.category && img.category !== this.filters.category) return false;
            if (this.filters.camera && img.camera !== this.filters.camera) return false;
            return true;
        });
    },

    renderGrid() {
        const container = Helpers.$('#gallery-grid');
        const countEl = Helpers.$('#gallery-count');
        if (!container) return;

        const filtered = this.getFilteredImages();
        if (countEl) countEl.textContent = `${filtered.length} images`;

        if (this.viewMode === 'grid') {
            this.renderGridView(filtered, container);
        } else {
            this.renderPreviewView(filtered, container);
        }
    },

    renderGridView(filtered, container) {
        container.innerHTML = filtered.map(img => {
            const isSelected = this.selectedImages.has(img.id);
            const imgPreview = Helpers.getImagePreviewUrl(img.id);
            const fallbackSvg = Helpers.generatePlaceholderSVG(img, false);
            const categoryColor = Helpers.getCategoryColor(img.category);
            const categoryIcon = Helpers.getCategoryIcon(img.category);
            const shortName = img.filename.replace('.tif', '').replace('.tiff', '').substring(0, 18);

            return `
                <div class="gallery-item ${isSelected ? 'gallery-item--selected' : ''}" data-image-id="${img.id}">
                    <img src="${imgPreview || fallbackSvg}" alt="${img.filename}" 
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="gallery-item__placeholder" style="display:none;">
                        <i class="fa-solid ${categoryIcon}"></i>
                    </div>
                    <div class="gallery-item__check">
                        <i class="fa-solid fa-check"></i>
                    </div>
                    <div class="gallery-item__label" style="border-left: 3px solid ${categoryColor}">
                        ${shortName}...
                    </div>
                </div>
            `;
        }).join('');
    },

    renderPreviewView(filtered, container) {
        if (this.currentIndex === null || this.currentIndex >= filtered.length) {
            this.currentIndex = filtered.length > 0 ? 0 : null;
        }

        if (this.currentIndex === null) {
            container.innerHTML = `
                <div class="gallery-preview-empty">
                    <i class="fa-solid fa-image"></i>
                    <p>No images match your filters</p>
                </div>
            `;
            return;
        }

        const img = filtered[this.currentIndex];
        const categoryColor = Helpers.getCategoryColor(img.category);
        const imgPath = Helpers.getImagePreviewUrl(img.id) || 
            `assets/images-preview/${img.category === 'good' ? 'Good' : img.category.toUpperCase()}/${img.filename.replace(/\.(tif|tiff)$/i, '.png')}`;
        const categoryLabel = Helpers.getCategoryLabel(img.category);
        const total = filtered.length;

        // Build detailed info panel content
        const imgWidth = 2560;
        const imgHeight = 2056;
        const resolution = `${imgWidth} × ${imgHeight} px`;

        container.innerHTML = `
            <div class="gallery-preview">
                <div class="gallery-preview__content">
                    <div class="gallery-preview__image-panel">
                        <button class="gallery-preview__nav gallery-preview__nav--prev" ${this.currentIndex === 0 ? 'disabled' : ''} data-nav="prev">
                            <i class="fa-solid fa-chevron-left"></i>
                        </button>
                        <div class="gallery-preview__image-wrapper">
                            <img src="${imgPath}" alt="${img.filename}" 
                                 class="gallery-preview__image"
                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            <div class="gallery-preview__fallback">
                                <i class="fa-solid fa-image"></i>
                            </div>
                        </div>
                        <div class="gallery-preview__image-actions">
                            <button class="btn btn--sm btn--outline" onclick="Gallery.viewImage('${img.id}')">
                                <i class="fa-solid fa-expand"></i> Full Details
                            </button>
                            <button class="btn btn--sm btn--primary" onclick="Gallery.openAnnotation('${img.id}')">
                                <i class="fa-solid fa-pen-nib"></i> Annotate
                            </button>
                        </div>
                        <button class="gallery-preview__nav gallery-preview__nav--next" ${this.currentIndex === total - 1 ? 'disabled' : ''} data-nav="next">
                            <i class="fa-solid fa-chevron-right"></i>
                        </button>
                    </div>
                    <div class="gallery-preview__info-panel">
                        <div class="gallery-preview__info-header">
                            <h3 class="gallery-preview__filename">${img.filename}</h3>
                            <span class="gallery-preview__badge" style="background: ${categoryColor}20; color: ${categoryColor};">${categoryLabel}</span>
                        </div>
                        
                        <div class="gallery-preview__section">
                            <h4 class="gallery-preview__section-title">
                                <i class="fa-solid fa-image"></i> Image Information
                            </h4>
                            <div class="gallery-preview__meta-grid">
                                <div class="gallery-preview__meta-item">
                                    <span class="gallery-preview__meta-label">Camera</span>
                                    <span class="gallery-preview__meta-value">${img.camera}</span>
                                </div>
                                <div class="gallery-preview__meta-item">
                                    <span class="gallery-preview__meta-label">Category</span>
                                    <span class="gallery-preview__meta-value">${categoryLabel}</span>
                                </div>
                                <div class="gallery-preview__meta-item">
                                    <span class="gallery-preview__meta-label">Size</span>
                                    <span class="gallery-preview__meta-value">${img.size}</span>
                                </div>
                                <div class="gallery-preview__meta-item">
                                    <span class="gallery-preview__meta-label">Resolution</span>
                                    <span class="gallery-preview__meta-value">${resolution}</span>
                                </div>
                                <div class="gallery-preview__meta-item">
                                    <span class="gallery-preview__meta-label">Date</span>
                                    <span class="gallery-preview__meta-value">${Helpers.formatDate(img.date)}</span>
                                </div>
                                <div class="gallery-preview__meta-item">
                                    <span class="gallery-preview__meta-label">Status</span>
                                    <span class="gallery-preview__meta-value gallery-preview__meta-value--status">
                                        ${img.hasMask 
                                            ? '<i class="fa-solid fa-check-circle" style="color: var(--color-success);"></i> Analyzed'
                                            : '<i class="fa-solid fa-clock" style="color: var(--color-warning);"></i> Pending'}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="gallery-preview__section">
                            <h4 class="gallery-preview__section-title">
                                <i class="fa-solid fa-list-check"></i> Classifications
                            </h4>
                            <div class="gallery-preview__classifications">
                                <div class="gallery-preview__classification ${img.category === 'good' ? 'gallery-preview__classification--pass' : ''}">
                                    <i class="fa-solid ${img.category === 'good' ? 'fa-check' : 'fa-xmark'}"></i>
                                    <span>Good</span>
                                </div>
                                <div class="gallery-preview__classification ${img.category === 'd02' ? 'gallery-preview__classification--fail' : ''}">
                                    <i class="fa-solid ${img.category === 'd02' ? 'fa-check' : 'fa-xmark'}"></i>
                                    <span>D02 — Fibres > 0.5mm</span>
                                </div>
                                <div class="gallery-preview__classification ${img.category === 'd07' ? 'gallery-preview__classification--fail' : ''}">
                                    <i class="fa-solid ${img.category === 'd07' ? 'fa-check' : 'fa-xmark'}"></i>
                                    <span>D07 — Critical Deformation</span>
                                </div>
                                <div class="gallery-preview__classification ${img.category === 'd08' ? 'gallery-preview__classification--fail' : ''}">
                                    <i class="fa-solid ${img.category === 'd08' ? 'fa-check' : 'fa-xmark'}"></i>
                                    <span>D08 — Critical Trimming</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="gallery-preview__section">
                            <h4 class="gallery-preview__section-title">
                                <i class="fa-solid fa-pen-nib"></i> Annotations
                            </h4>
                            <div class="gallery-preview__annotations">
                                <div class="gallery-preview__annotation-status ${img.annotations && img.annotations.length > 0 ? 'gallery-preview__annotation-status--active' : ''}">
                                    <i class="fa-solid ${img.annotations && img.annotations.length > 0 ? 'fa-pencil' : 'fa-pencil'}"></i>
                                    <span>${img.annotations && img.annotations.length > 0 ? img.annotations.length + ' annotation(s)' : 'No annotations'}</span>
                                </div>
                                ${img.hasMask ? '<div class="gallery-preview__annotation-status gallery-preview__annotation-status--active"><i class="fa-solid fa-mask"></i> <span>Segmentation mask available</span></div>' : ''}
                            </div>
                        </div>
                        
                        <div class="gallery-preview__quick-actions">
                            <button class="btn btn--sm btn--primary btn--full" onclick="Gallery.openAnnotation('${img.id}')">
                                <i class="fa-solid fa-pen-nib"></i> Annotate Image
                            </button>
                            <div class="gallery-preview__quick-actions-row">
                                <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'good')">
                                    <i class="fa-solid fa-check"></i> Mark Good
                                </button>
                                <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'd02')">
                                    <i class="fa-solid fa-exclamation"></i> D02
                                </button>
                            </div>
                            <div class="gallery-preview__quick-actions-row">
                                <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'd07')">
                                    <i class="fa-solid fa-exclamation"></i> D07
                                </button>
                                <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'd08')">
                                    <i class="fa-solid fa-exclamation"></i> D08
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gallery-preview__footer">
                    <span class="gallery-preview__counter">${this.currentIndex + 1} of ${total} images</span>
                    <div class="gallery-preview__thumbnails">
                        ${this.renderPreviewThumbnails(filtered)}
                    </div>
                </div>
            </div>
        `;

        // Bind navigation
        container.querySelector('[data-nav="prev"]')?.addEventListener('click', () => this.navigatePreview(-1));
        container.querySelector('[data-nav="next"]')?.addEventListener('click', () => this.navigatePreview(1));

        // Bind thumbnail navigation
        container.querySelectorAll('.gallery-preview__thumb').forEach(thumb => {
            thumb.addEventListener('click', () => {
                const index = parseInt(thumb.dataset.index);
                this.currentIndex = index;
                this.renderGrid();
            });
        });
    },

    renderPreviewThumbnails(filtered) {
        const maxThumbnails = 10;
        const start = Math.max(0, this.currentIndex - 4);
        const end = Math.min(filtered.length, start + maxThumbnails);
        
        return filtered.slice(start, end).map((img, idx) => {
            const actualIndex = start + idx;
            const isActive = actualIndex === this.currentIndex;
            const imgPath = Helpers.getImagePreviewUrl(img.id) || '';
            const categoryIcon = Helpers.getCategoryIcon(img.category);
            
            return `
                <div class="gallery-preview__thumb ${isActive ? 'gallery-preview__thumb--active' : ''}" data-index="${actualIndex}">
                    <img src="${imgPath}" alt="${img.filename}" 
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="gallery-preview__thumb-placeholder">
                        <i class="fa-solid ${categoryIcon}"></i>
                    </div>
                </div>
            `;
        }).join('');
    },

    openAnnotation(id) {
        const img = this.images.find(i => i.id === id);
        if (!img) return;
        
        const imgPath = Helpers.getImagePreviewUrl(img.id);
        if (imgPath) {
            AnnotationTool.open(imgPath);
        } else {
            Toast.show('Image not available for annotation', 'error');
        }
    },

    navigatePreview(direction) {
        const filtered = this.getFilteredImages();
        const newIndex = this.currentIndex + direction;
        if (newIndex >= 0 && newIndex < filtered.length) {
            this.currentIndex = newIndex;
            this.renderGrid();
        }
    },

    toggleImage(id, multi = false) {
        if (multi) {
            if (this.selectedImages.has(id)) this.selectedImages.delete(id);
            else this.selectedImages.add(id);
        } else {
            if (this.selectedImages.size === 1 && this.selectedImages.has(id)) {
                this.selectedImages.clear();
            } else {
                this.selectedImages.clear();
                this.selectedImages.add(id);
            }
        }
        this.renderGrid();
    },

    selectAll() {
        const filtered = this.getFilteredImages();
        filtered.forEach(img => this.selectedImages.add(img.id));
        this.renderGrid();
        Toast.show(`${this.selectedImages.size} images selected`, 'info');
    },

    clearSelection() {
        this.selectedImages.clear();
        this.renderGrid();
    },

    viewImage(id) {
        const img = this.images.find(i => i.id === id);
        if (!img) return;

        const imgPreview = Helpers.getImagePreviewUrl(img.id);
        const bodyHtml = `
            <div class="detail-section">
                <div class="detail-image" style="background-image: url('${imgPreview}'); background-size: cover; background-position: center; aspect-ratio: auto; height: 250px;"></div>
            </div>
            <div class="detail-section">
                <div class="detail-section__title">Image Details</div>
                <div class="detail-row">
                    <span class="detail-row__label">Filename</span>
                    <span class="detail-row__value" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${img.filename}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-row__label">Camera</span>
                    <span class="detail-row__value">${img.camera}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-row__label">Category</span>
                    <span class="detail-row__value">${Helpers.getCategoryBadge(img.category)}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-row__label">Size</span>
                    <span class="detail-row__value">${img.size}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-row__label">Date</span>
                    <span class="detail-row__value">${Helpers.formatDate(img.date)}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-row__label">Has Mask</span>
                    <span class="detail-row__value">${img.hasMask ? '<i class="fa-solid fa-check" style="color: var(--color-success)"></i>' : '<i class="fa-solid fa-minus" style="color: var(--color-text-light)"></i>'}</span>
                </div>
            </div>
            <div class="detail-section">
                <div class="detail-section__title">Actions</div>
                <div style="display: flex; gap: var(--space-2); flex-wrap: wrap;">
                    <button class="btn btn--sm btn--primary" onclick="Toast.show('Opening annotation tool...', 'info')">
                        <i class="fa-solid fa-pen-nib"></i> Annotate
                    </button>
                    <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'good')">
                        <i class="fa-solid fa-check"></i> Mark Good
                    </button>
                    <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'd02')">D02</button>
                    <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'd07')">D07</button>
                    <button class="btn btn--sm btn--outline" onclick="Gallery.changeCategory('${img.id}', 'd08')">D08</button>
                </div>
            </div>
        `;

        App.openDetailPanel('Image Details', bodyHtml);
    },

    changeCategory(id, newCategory) {
        const img = this.images.find(i => i.id === id);
        if (img) {
            img.category = newCategory;
            this.renderGrid();
            Toast.show(`Category changed to ${Helpers.getCategoryLabel(newCategory)}`, 'success');
        }
    }
};

window.Gallery = Gallery;