// Yoto Up Covers Web App
class YotoCoversApp {
    constructor() {
        this.images = [];
        this.selectedImageIndex = -1;
        this.zoomLevel = 1.0;
        this.currentTemplate = 'classic';
        this.currentTitleStyle = 'folded';
        this.printLayout = {
            cardsPerRow: 2,
            cardsPerColumn: 5,
            pageMargin: 10,
            cardSpacing: 5
        };
        this.templateSettings = {
            title: '',
            footer: '',
            accentColor: '#f1c40f',
            titleColor: '#111111',
            fullBleed: true,
            titleShadow: false,
            titleFontSize: null,
            footerFontSize: null
        };

        this.cardVariations = [];
        this.init();
    }

    init() {
        this.bindEvents();
        this.updateUI();
        this.updateCardVariations();
    }

    bindEvents() {
        // Print layout settings
        document.getElementById('cards-per-row').addEventListener('change', (e) => {
            this.printLayout.cardsPerRow = parseInt(e.target.value);
            this.generatePreview();
        });

        document.getElementById('cards-per-column').addEventListener('change', (e) => {
            this.printLayout.cardsPerColumn = parseInt(e.target.value);
            this.generatePreview();
        });

        document.getElementById('page-margin').addEventListener('input', (e) => {
            this.printLayout.pageMargin = parseInt(e.target.value);
            this.generatePreview();
        });

        document.getElementById('card-spacing').addEventListener('input', (e) => {
            this.printLayout.cardSpacing = parseInt(e.target.value);
            this.generatePreview();
        });

        // Template settings
        document.getElementById('template-select').addEventListener('change', (e) => {
            this.currentTemplate = e.target.value;
            this.generatePreview();
        });

        document.getElementById('title-input').addEventListener('input', (e) => {
            this.templateSettings.title = e.target.value;
            this.generatePreview();
        });

        document.getElementById('footer-input').addEventListener('input', (e) => {
            this.templateSettings.footer = e.target.value;
            this.generatePreview();
        });

        // Title style selection
        document.querySelectorAll('.title-style-option').forEach(option => {
            option.addEventListener('click', () => {
                document.querySelectorAll('.title-style-option').forEach(opt => opt.classList.remove('selected'));
                option.classList.add('selected');
                this.currentTitleStyle = option.dataset.style;
                this.generatePreview();
            });
        });

        // Color pickers
        document.getElementById('accent-color').addEventListener('input', (e) => {
            this.templateSettings.accentColor = e.target.value;
            document.getElementById('accent-color-text').value = e.target.value;
            this.generatePreview();
        });

        document.getElementById('title-color').addEventListener('input', (e) => {
            this.templateSettings.titleColor = e.target.value;
            document.getElementById('title-color-text').value = e.target.value;
            this.generatePreview();
        });

        // Checkboxes
        document.getElementById('full-bleed').addEventListener('change', (e) => {
            this.templateSettings.fullBleed = e.target.checked;
            this.generatePreview();
        });

        document.getElementById('title-shadow').addEventListener('change', (e) => {
            this.templateSettings.titleShadow = e.target.checked;
            this.generatePreview();
        });

        // Image upload
        const imageUpload = document.getElementById('image-upload');
        const fileInputLabel = document.querySelector('.file-input-label');

        imageUpload.addEventListener('change', (e) => this.handleImageUpload(e.target.files));
        imageUpload.addEventListener('dragover', (e) => {
            e.preventDefault();
            fileInputLabel.classList.add('dragover');
        });
        imageUpload.addEventListener('dragleave', (e) => {
            e.preventDefault();
            fileInputLabel.classList.remove('dragover');
        });
        imageUpload.addEventListener('drop', (e) => {
            e.preventDefault();
            fileInputLabel.classList.remove('dragover');
            this.handleImageUpload(e.dataTransfer.files);
        });

        // Image management
        document.getElementById('clear-images').addEventListener('click', () => this.clearAllImages());

        // Actions
        document.getElementById('generate-preview').addEventListener('click', () => this.generatePreview());
        document.getElementById('download-html').addEventListener('click', () => this.downloadHTML());
        document.getElementById('open-preview').addEventListener('click', () => this.openPreviewInNewTab());
        document.getElementById('print-preview').addEventListener('click', () => this.printPreview());

        // Zoom controls
        document.getElementById('zoom-in').addEventListener('click', () => this.zoomIn());
        document.getElementById('zoom-out').addEventListener('click', () => this.zoomOut());
        document.getElementById('zoom-reset').addEventListener('click', () => this.resetZoom());

        // Image editor
        document.getElementById('fit-mode').addEventListener('change', (e) => {
            if (this.selectedImageIndex >= 0) {
                this.images[this.selectedImageIndex].fitMode = e.target.value;
                this.generatePreview();
            }
        });

        document.getElementById('crop-position').addEventListener('change', (e) => {
            if (this.selectedImageIndex >= 0) {
                this.images[this.selectedImageIndex].cropPosition = e.target.value;
                this.generatePreview();
            }
        });

        document.getElementById('crop-offset-x').addEventListener('input', (e) => {
            if (this.selectedImageIndex >= 0) {
                this.images[this.selectedImageIndex].cropOffsetX = parseFloat(e.target.value);
                document.getElementById('crop-offset-x-value').textContent = e.target.value;
                this.generatePreview();
            }
        });

        document.getElementById('crop-offset-y').addEventListener('input', (e) => {
            if (this.selectedImageIndex >= 0) {
                this.images[this.selectedImageIndex].cropOffsetY = parseFloat(e.target.value);
                document.getElementById('crop-offset-y-value').textContent = e.target.value;
                this.generatePreview();
            }
        });

        document.getElementById('add-text-overlay').addEventListener('click', () => this.addTextOverlay());

        document.getElementById('add-card-variation').addEventListener('click', () => this.addCardVariation());

        // Mobile toggles
        document.getElementById('toggle-settings').addEventListener('click', () => {
            const panel = document.querySelector('.settings-panel');
            panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
        });

        document.getElementById('toggle-editor').addEventListener('click', () => {
            const panel = document.querySelector('.edit-panel');
            panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
        });
    }

    async handleImageUpload(files) {
        for (const file of files) {
            if (file.type.startsWith('image/')) {
                try {
                    const imageData = await this.readFileAsDataURL(file);
                    const coverImage = new CoverImage(file.name, imageData);
                    this.images.push(coverImage);
                } catch (error) {
                    this.showStatusMessage(`Error loading ${file.name}: ${error.message}`, 'error');
                }
            }
        }
        this.updateImageList();
        this.updateCardVariations();
        this.generatePreview();
    }

    readFileAsDataURL(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.onerror = () => reject(new Error('Failed to read file'));
            reader.readAsDataURL(file);
        });
    }

    updateImageList() {
        const imageList = document.getElementById('image-list');
        imageList.innerHTML = '';

        this.images.forEach((image, index) => {
            const item = document.createElement('div');
            item.className = 'image-item';
            item.innerHTML = `
                <div class="image-info">
                    <div class="image-name">${image.name}</div>
                    <div class="image-meta">${image.width || 0} × ${image.height || 0}px</div>
                </div>
                <div class="image-actions">
                    <button class="btn btn-secondary" onclick="app.selectImage(${index})">Edit</button>
                    <button class="btn btn-danger" onclick="app.removeImage(${index})">×</button>
                </div>
            `;
            imageList.appendChild(item);
        });
    }

    selectImage(index) {
        this.selectedImageIndex = index;
        this.updateImageEditor();
    }

    removeImage(index) {
        this.images.splice(index, 1);
        if (this.selectedImageIndex === index) {
            this.selectedImageIndex = -1;
        } else if (this.selectedImageIndex > index) {
            this.selectedImageIndex--;
        }
        this.updateImageList();
        this.updateImageEditor();
        this.generatePreview();
    }

    clearAllImages() {
        this.images = [];
        this.selectedImageIndex = -1;
        this.updateImageList();
        this.updateImageEditor();
        this.updateCardVariations();
        this.generatePreview();
    }

    updateImageEditor() {
        const editor = document.getElementById('image-editor');
        const noSelection = document.getElementById('no-image-selected');

        if (this.selectedImageIndex >= 0) {
            const image = this.images[this.selectedImageIndex];
            editor.style.display = 'block';
            noSelection.style.display = 'none';

            document.getElementById('fit-mode').value = image.fitMode;
            document.getElementById('crop-position').value = image.cropPosition;
            document.getElementById('crop-offset-x').value = image.cropOffsetX;
            document.getElementById('crop-offset-x-value').textContent = image.cropOffsetX;
            document.getElementById('crop-offset-y').value = image.cropOffsetY;
            document.getElementById('crop-offset-y-value').textContent = image.cropOffsetY;

            this.updateTextOverlays();
        } else {
            editor.style.display = 'none';
            noSelection.style.display = 'block';
        }
    }

    updateTextOverlays() {
        const container = document.getElementById('text-overlays');
        container.innerHTML = '';

        if (this.selectedImageIndex >= 0) {
            const image = this.images[this.selectedImageIndex];
            image.textOverlays.forEach((overlay, index) => {
                const item = document.createElement('div');
                item.className = 'text-overlay-item';
                item.innerHTML = `
                    <input type="text" class="text-overlay-input" value="${overlay.text}" placeholder="Text overlay" oninput="app.updateTextOverlay(${index}, 'text', this.value)">
                    <div class="text-overlay-controls">
                        <input type="color" value="${overlay.color}" onchange="app.updateTextOverlay(${index}, 'color', this.value)">
                        <input type="number" value="${overlay.fontSize}" min="8" max="72" onchange="app.updateTextOverlay(${index}, 'fontSize', this.value)">
                        <button class="btn btn-danger" onclick="app.removeTextOverlay(${index})">×</button>
                    </div>
                `;
                container.appendChild(item);
            });
        }
    }

    addTextOverlay() {
        if (this.selectedImageIndex >= 0) {
            const image = this.images[this.selectedImageIndex];
            image.textOverlays.push({
                text: 'New Text',
                color: '#ffffff',
                fontSize: 24,
                x: 50,
                y: 50
            });
            this.updateTextOverlays();
            this.generatePreview();
        }
    }

    updateTextOverlay(index, property, value) {
        if (this.selectedImageIndex >= 0) {
            const image = this.images[this.selectedImageIndex];
            if (property === 'fontSize') {
                value = parseInt(value);
            }
            image.textOverlays[index][property] = value;
            this.generatePreview();
        }
    }

    removeTextOverlay(index) {
        if (this.selectedImageIndex >= 0) {
            const image = this.images[this.selectedImageIndex];
            image.textOverlays.splice(index, 1);
            this.updateTextOverlays();
            this.generatePreview();
        }
    }

    addCardVariation() {
        const variation = {
            title: '',
            footer: '',
            imageIndex: -1
        };
        this.cardVariations.push(variation);
        this.updateCardVariations();
        this.generatePreview();
    }

    updateCardVariation(index, field, value) {
        this.cardVariations[index][field] = value;
        this.generatePreview();
    }

    removeCardVariation(index) {
        this.cardVariations.splice(index, 1);
        this.updateCardVariations();
        this.generatePreview();
    }

    updateCardVariations() {
        const container = document.getElementById('card-variations');
        container.innerHTML = '';

        this.cardVariations.forEach((variation, index) => {
            const item = document.createElement('div');
            item.className = 'card-variation-item';
            item.innerHTML = `
                <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                    <strong>Card ${index + 1}:</strong>
                    <button class="btn btn-danger" onclick="app.removeCardVariation(${index})" style="font-size: 12px; padding: 4px 8px;">×</button>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                    <div class="form-group" style="margin: 0;">
                        <label>Title</label>
                        <input type="text" value="${variation.title}" placeholder="Custom title" oninput="app.updateCardVariation(${index}, 'title', this.value)">
                    </div>
                    <div class="form-group" style="margin: 0;">
                        <label>Footer</label>
                        <input type="text" value="${variation.footer}" placeholder="Custom footer" oninput="app.updateCardVariation(${index}, 'footer', this.value)">
                    </div>
                </div>
                <div class="form-group" style="margin: 0; grid-column: span 2;">
                    <label>Image</label>
                    <select onchange="app.updateCardVariation(${index}, 'imageIndex', parseInt(this.value))">
                        <option value="-1">Use default image</option>
                        ${this.images.map((img, imgIndex) => `<option value="${imgIndex}" ${variation.imageIndex === imgIndex ? 'selected' : ''}>${img.name}</option>`).join('')}
                    </select>
                </div>
            `;
            container.appendChild(item);
        });
    }

    async generatePreview() {
        const placeholder = document.getElementById('preview-placeholder');
        const iframe = document.getElementById('preview-iframe');

        if (this.images.length === 0 && !this.templateSettings.title) {
            placeholder.textContent = 'Add an image or enter a title to generate preview';
            placeholder.style.display = 'flex';
            iframe.style.display = 'none';
            return;
        }

        placeholder.innerHTML = '<div class="loading"></div> Generating preview...';
        placeholder.style.display = 'flex';
        iframe.style.display = 'none';

        try {
            const html = await this.generateHTML();
            const blob = new Blob([html], { type: 'text/html' });
            const url = URL.createObjectURL(blob);

            iframe.src = url;
            iframe.style.display = 'block';
            placeholder.style.display = 'none';

            // Apply zoom after iframe loads
            iframe.onload = () => {
                this.applyZoomToPreview();
            };

            // Clean up the previous blob URL
            if (iframe.dataset.previousUrl) {
                URL.revokeObjectURL(iframe.dataset.previousUrl);
            }
            iframe.dataset.previousUrl = url;

        } catch (error) {
            placeholder.textContent = `Error generating preview: ${error.message}`;
            this.showStatusMessage(`Preview generation failed: ${error.message}`, 'error');
        }
    }

    async generateHTML() {
        // Determine number of cards to generate
        let totalCards;
        if (this.cardVariations.length > 0) {
            totalCards = this.cardVariations.length;
        } else {
            totalCards = 1; // Single card if no variations
        }

        // For print sheet, arrange cards in grid, but don't exceed available space
        const cardsPerPage = this.printLayout.cardsPerRow * this.printLayout.cardsPerColumn;
        const pagesNeeded = Math.ceil(totalCards / cardsPerPage);
        const totalCardsToGenerate = pagesNeeded * cardsPerPage; // Fill pages completely, but we'll hide empty slots

        const cards = [];

        // Generate cards
        for (let i = 0; i < totalCardsToGenerate; i++) {
            if (i < totalCards) {
                // Use variation or default
                const variation = this.cardVariations[i];
                const imageIndex = variation && variation.imageIndex >= 0 ? variation.imageIndex : 0;
                const imageUrl = this.images.length > 0 ? this.images[imageIndex].dataUrl : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';

                cards.push({
                    imageUrl,
                    title: (variation && variation.title) || this.templateSettings.title || `Card ${i + 1}`,
                    footer: (variation && variation.footer) || this.templateSettings.footer,
                    isVisible: true
                });
            } else {
                // Empty card for filling the grid
                cards.push({
                    imageUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
                    title: '',
                    footer: '',
                    isVisible: false
                });
            }
        }

        // Fixed card dimensions: 54mm x 85.6mm
        const cardWidthMm = 54;
        const cardHeightMm = 85.6;

        // Generate HTML for print sheet
        const html = `
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Yoto Covers Print Sheet</title>
<style>
    @font-face { font-family: 'DejaVuSans'; src: local('DejaVu Sans'); }
    @media screen {
        html, body { margin: 0; padding: 20px; background: #f5f5f5; }
        .print-page { border: 2px dashed #ccc; margin: 20px auto; background: white; page-break-after: always; }
        .print-page:last-child { page-break-after: auto; }
    }
    @media print {
        html, body { margin: 0; padding: 0; background: white; }
        .print-page { border: none; margin: 0; page-break-after: always; }
        .print-page:last-child { page-break-after: auto; }
        @page { margin: 0; size: A4; }
    }
    .card {
        box-sizing: border-box;
        position: relative;
    }
    .empty-card {
        background: #f9f9f9;
    }
    .title {
        position: absolute;
        top: 6%;
        left: 6%;
        right: 6%;
        text-align: center;
        font-size: calc(108px + 0.5rem);
        color: ${this.templateSettings.titleColor};
        font-weight: 900;
        text-transform: uppercase;
        ${this.templateSettings.titleShadow ? 'text-shadow: 1px 4px 6px rgba(0,0,0,0.3);' : ''}
    }
    .title.folded {
        position: absolute;
        left: 6%;
        right: 6%;
        top: 6%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Source Code Pro', monospace;
        font-weight: 900;
        white-space: nowrap;
        color: lch(76 39.21 9.23 / 0.5);
        text-transform: uppercase;
        transform: skew(10deg) rotate(-10deg);
        text-shadow: 1px 4px 6px lch(90 2.22 62.5), 0 0 0 lch(28 26.21 12.27), 1px 4px 6px lch(90 2.22 62.5);
    }
    .title.folded::before {
        content: attr(data-heading);
        position: absolute;
        left: 0;
        top: -4.8%;
        overflow: hidden;
        height: 50%;
        color: lch(97 2.19 62.49);
        transform: translate(0.15em, 0) skew(-13deg) scale(1, 1.2);
        text-shadow: 2px -1px 6px rgba(0,0,0,0.2);
    }
    .title.folded::after {
        content: attr(data-heading);
        position: absolute;
        left: 0;
        color: lch(83 2.26 62.51);
        transform: translate(0, 0) skew(13deg) scale(1, 0.8);
        clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
        text-shadow: 2px -1px 6px lch(0 0 0 / 0.3);
    }
    .hero {
        position: absolute;
        top: 18%;
        left: 6%;
        right: 6%;
        bottom: 18%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    .overlay {
        position: absolute;
        top: 18%;
        left: 6%;
        right: 6%;
        bottom: 18%;
        border-radius: 8px;
        pointer-events: none;
        background: rgba(0,0,0,0);
    }
    .footer {
        position: absolute;
        bottom: 4%;
        left: 6%;
        right: 6%;
        height: 10%;
        background: ${this.templateSettings.accentColor};
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #000;
        border-radius: 6px;
    }
</style>
</head>
<body>
    <div class="print-sheet">
        ${cards.map((card, index) => `
            <div class="card">
                <div class="title ${this.currentTitleStyle === 'folded' ? 'folded' : ''}" data-heading="${this.escapeHtml(card.title)}">${this.escapeHtml(card.title)}</div>
                ${!this.templateSettings.fullBleed ? `<div class="hero"><img src="${card.imageUrl}" alt="cover"/></div>` : ''}
                <div class="overlay"></div>
                <div class="footer">${this.escapeHtml(card.footer)}</div>
            </div>
        `).join('')}
    </div>
</body>
</html>`;

        return html;
    }

    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    zoomIn() {
        this.zoomLevel = Math.min(this.zoomLevel * 1.2, 3.0);
        this.updateZoomDisplay();
        this.applyZoomToPreview();
    }

    zoomOut() {
        this.zoomLevel = Math.max(this.zoomLevel / 1.2, 0.3);
        this.updateZoomDisplay();
        this.applyZoomToPreview();
    }

    resetZoom() {
        this.zoomLevel = 1.0;
        this.updateZoomDisplay();
        this.applyZoomToPreview();
    }

    updateZoomDisplay() {
        const zoomPercent = Math.round(this.zoomLevel * 100);
        document.getElementById('zoom-level').textContent = zoomPercent === 100 ? 'Fit' : zoomPercent + '%';
    }

    applyZoomToPreview() {
        const iframe = document.getElementById('preview-iframe');
        if (iframe.contentDocument && iframe.contentDocument.body) {
            const printSheet = iframe.contentDocument.querySelector('.print-sheet');
            if (printSheet) {
                printSheet.style.transform = `scale(${this.zoomLevel})`;
                printSheet.style.transformOrigin = 'top center';
            }
        }
    }

    openPreviewInNewTab() {
        const iframe = document.getElementById('preview-iframe');
        if (iframe.src) {
            window.open(iframe.src, '_blank');
        } else {
            this.showStatusMessage('No preview available. Generate a preview first.', 'error');
        }
    }

    printPreview() {
        const iframe = document.getElementById('preview-iframe');
        if (iframe.contentWindow) {
            iframe.contentWindow.print();
        } else {
            this.showStatusMessage('No preview available to print.', 'error');
        }
    }

    downloadHTML() {
        if (!this.templateSettings.title && this.images.length === 0) {
            this.showStatusMessage('Add content before downloading.', 'error');
            return;
        }

        this.generateHTML().then(html => {
            const blob = new Blob([html], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `yoto-cover-${Date.now()}.html`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            this.showStatusMessage('HTML file downloaded successfully!', 'success');
        }).catch(error => {
            this.showStatusMessage(`Download failed: ${error.message}`, 'error');
        });
    }

    showStatusMessage(message, type = 'info') {
        const statusDiv = document.getElementById('status-message');
        statusDiv.textContent = message;
        statusDiv.className = `status-message status-${type}`;
        statusDiv.style.display = 'block';

        setTimeout(() => {
            statusDiv.style.display = 'none';
        }, 5000);
    }

    updateUI() {
        this.updateZoomDisplay();
        // Initialize print layout controls
        document.getElementById('cards-per-row').value = this.printLayout.cardsPerRow;
        document.getElementById('cards-per-column').value = this.printLayout.cardsPerColumn;
        document.getElementById('page-margin').value = this.printLayout.pageMargin;
        document.getElementById('card-spacing').value = this.printLayout.cardSpacing;
    }
}

class CoverImage {
    constructor(name, dataUrl) {
        this.name = name;
        this.dataUrl = dataUrl;
        this.fitMode = 'scale';
        this.cropPosition = 'center';
        this.cropOffsetX = 0;
        this.cropOffsetY = 0;
        this.textOverlays = [];
        this.width = 0;
        this.height = 0;

        // Get image dimensions
        this.getImageDimensions();
    }

    async getImageDimensions() {
        return new Promise((resolve) => {
            const img = new Image();
            img.onload = () => {
                this.width = img.naturalWidth;
                this.height = img.naturalHeight;
                resolve();
            };
            img.src = this.dataUrl;
        });
    }
}

// Initialize the app
const app = new YotoCoversApp();