/* V7 Gallery Module */
import { state } from './state.js';

const STORAGE_KEY = 'star_patterns_gallery';

export function savePattern(name, thumbDataUrl) {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    const pattern = {
        id: Date.now(),
        name: name || 'Untitled Pattern',
        date: new Date().toLocaleDateString(),
        thumbnail: thumbDataUrl,
        state: { ...state } // Clone state
    };
    saved.unshift(pattern); // Add to top
    localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
    renderGallery();
}

export function loadPattern(id) {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    const pattern = saved.find(p => p.id === id);
    if (pattern) {
        // Restore State
        Object.keys(pattern.state).forEach(k => {
            state[k] = pattern.state[k];
        });
        return true;
    }
    return false;
}

export function deletePattern(id) {
    let saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    saved = saved.filter(p => p.id !== id);
    localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
    renderGallery();
}

export function renderGallery() {
    const container = document.getElementById('galleryContainer');
    if (!container) return; // Should exist in HTML

    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');

    if (saved.length === 0) {
        container.innerHTML = '<p style="color:var(--text-secondary); text-align:center;">No saved patterns</p>';
        return;
    }

    container.innerHTML = '';
    saved.forEach(p => {
        const item = document.createElement('div');
        item.className = 'gallery-item';
        item.innerHTML = `
            <img src="${p.thumbnail}" alt="${p.name}">
            <div class="info">
                <span>${p.name}</span>
                <button class="btn-sm delete-btn" data-id="${p.id}">&times;</button>
            </div>
        `;

        // Load click
        item.querySelector('img').addEventListener('click', () => {
            const event = new CustomEvent('loadPattern', { detail: p.id });
            window.dispatchEvent(event);
        });

        // Delete click
        item.querySelector('.delete-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            if (confirm('Delete this pattern?')) deletePattern(p.id);
        });

        container.appendChild(item);
    });
}