// sc-intro-component.js (Zusammengeführte Datei)
import { ScCloseButton } from './close-button.js';

class IntroUI {
    constructor() {
        this.overlayHTML = `
            <div id="intro-overlay" class="intro-overlay hidden">
                <div id="intro-close-wrapper"></div>
                <div class="intro-content">
                    <div id="intro-gallery"></div>
                </div>
            </div>
        `;

        this.overlayCSS = `
            .intro-overlay {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                background: transparent; 
                z-index: 20000;
                display: flex;
                flex-direction: column;
                animation: introFadeIn 0.2s ease-out;
            }
            @keyframes introFadeIn { from { opacity: 0; } to { opacity: 1; } }

            #intro-close-wrapper {
                position: fixed; 
                top: 25px;
                right: 25px; 
                z-index: 21000;
                filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
            }

            .intro-content {
                flex-grow: 1;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding: 40px 0;
            }

            #intro-gallery {
                width: calc(100% - 40px);
                max-width: 600px;
                margin: 0 auto;
                background: #000000; 
                border: 4px solid #FFFFFF; /* ⭐ Weißer Rahmen korrigiert */
                border-radius: 20px;
                padding: 20px;
                box-shadow: 0 20px 50px rgba(0,0,0,0.6);
                position: relative;
            }

            .intro-gallery-item {
                margin-bottom: 25px;
                background: #FFFFFF;
                border-radius: 12px;
                overflow: hidden;
            }
            .intro-gallery-item:last-child { margin-bottom: 0; }
            .intro-gallery-item img { width: 100%; height: auto; display: block; }
            .intro-caption {
                padding: 15px 20px;
                font-size: 1rem;
                line-height: 1.5;
                color: #222;
                background: #fff;
                white-space: pre-wrap;
            }
            .hidden { display: none !important; }
        `;

        this._inject();
        this.overlay = document.getElementById('intro-overlay');
        this.gallery = document.getElementById('intro-gallery');

        this.closeButton = new ScCloseButton('intro-close');
        document.getElementById('intro-close-wrapper').appendChild(this.closeButton.getElement());
        this.closeButton.onClick(() => this.hide());
    }

    _inject() {
        if (!document.getElementById('intro-overlay')) {
            const style = document.createElement('style');
            style.textContent = this.overlayCSS;
            document.head.appendChild(style);
            document.body.insertAdjacentHTML('beforeend', this.overlayHTML);
        }
    }

    show(items = []) {
        this.gallery.innerHTML = '';
        const bust = Date.now(); 
        items.forEach(item => {
            const container = document.createElement('div');
            container.className = 'intro-gallery-item';
            container.innerHTML = `
                ${item.caption ? `<div class="intro-caption">${item.caption}</div>` : ''}
                <img src="${item.src}?v=${bust}" loading="lazy" alt="Stolperstein Intro">
            `;
            this.gallery.appendChild(container);
        });
        this.overlay.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    hide() {
        this.overlay.classList.add('hidden');
        document.body.style.overflow = '';
    }
}

// Interne Instanz für den Button
const introUI = new IntroUI();

export class ScIntroButton {
    constructor(id = '', additionalClasses = []) {
        this.buttonElement = document.createElement('div');
        if (id) this.buttonElement.id = id;
        this.buttonElement.classList.add('sc-intro-btn-circle', ...additionalClasses);
        this.buttonElement.innerHTML = '<span class="sc-intro-letter">i</span>';
        this._injectCSS();
        this._setupInternalHandler();
    }

    static getPoiGalleryData() {
        const captions = {
            1: "Symbole und Farben:",
            2: "Zustandsbewertung - Beispiele:\n\nglänzend - auffällig und gut lesbar",
            3: "glänzend - beginnende Korrosion, aber erkennbar gepflegt",
            4: "stumpf - sauber, aber stark korrodiert und dunkel",
            5: "stumpf - Ränder stark verschmutzt und korrodiert",
            6: "stumpf - stark verwittert, fast unlesbar"
        };
        return Array.from({ length: 6 }, (_, i) => ({
            src: `./stolperstein_${i + 1}.jpg`, 
            caption: captions[i + 1]
        }));
    }

    _setupInternalHandler() {
        this.buttonElement.onclick = (e) => {
            e.stopPropagation();
            introUI.show(ScIntroButton.getPoiGalleryData());
        };
    }

    _injectCSS() {
        if (!document.getElementById('sc-intro-button-styles')) {
            const style = document.createElement('style');
            style.id = 'sc-intro-button-styles';
            style.textContent = `
                .sc-intro-btn-circle {
                    width: 42px; height: 42px; background-color: #007AFF;
                    border-radius: 50%; display: flex; justify-content: center;
                    align-items: center; cursor: pointer; flex-shrink: 0;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                    transition: background-color 0.2s ease, transform 0.1s ease;
                    -webkit-tap-highlight-color: transparent;
                }
                .sc-intro-btn-circle:hover { background-color: #0056b3; transform: scale(1.02); }
                .sc-intro-btn-circle:active { transform: scale(0.95); }
                .sc-intro-letter {
                    color: #FFFFFF; font-family: "Times New Roman", serif;
                    font-size: 24px; font-weight: bold; font-style: italic;
                    pointer-events: none; user-select: none; line-height: 1; margin-top: -2px;
                }
            `;
            document.head.appendChild(style);
        }
    }

    getElement() { return this.buttonElement; }
}