<header class="hero">
    <div id="hero-slider" class="hero-slider"></div>
    <div class="hero-overlay">
        <span class="badge">Neu im Kino</span>
        <h1 id="hero-title">Jetzt im Kino</h1>
        <p id="hero-text">Erlebe die neuesten Highlights auf der großen Leinwand.</p>
        <button class="btn-primary" id="hero-booking-btn">Jetzt Tickets kaufen</button>
        <div id="hero-dots" class="hero-dots"></div>
    </div>
</header>

<script>
    import { movieCatalog } from "../scripts/bigConstants";

    const ui = {
        heroSlider: document.getElementById("hero-slider"),
        heroDots: document.getElementById("hero-dots"),
        heroTitle: document.getElementById("hero-title"),
        heroText: document.getElementById("hero-text"),
        heroBookingBtn: document.getElementById("hero-booking-btn"),
    };

    let heroItems = movieCatalog.slice(0, 5);
    let heroIndex = 0;
    let heroTimer: any = null;

    const escapeHtml = (value: string) => String(value || "")
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#39;");

    const setHeroSlide = (index: number) => {
        if (!heroItems.length || !ui.heroSlider) return;
        heroIndex = (index + heroItems.length) % heroItems.length;

        ui.heroSlider.querySelectorAll(".hero-slide").forEach((slide, slideIndex) => {
            slide.classList.toggle("active", slideIndex === heroIndex);
        });

        ui.heroDots?.querySelectorAll(".hero-dot").forEach((dot, dotIndex) => {
            dot.classList.toggle("active", dotIndex === heroIndex);
        });

        const activeMovie = heroItems[heroIndex];
        if (ui.heroTitle) ui.heroTitle.textContent = activeMovie.title;
        if (ui.heroText) ui.heroText.textContent = `${activeMovie.genre} • ${activeMovie.duration} Min. • Heute erste Vorstellung um 13:00 Uhr.`;
    };

    const renderHero = () => {
        if (!ui.heroSlider || !heroItems.length) return;

        ui.heroSlider.innerHTML = heroItems.map((movie: any, index: number) => `
            <div class="hero-slide ${index === 0 ? "active" : ""}" style="background-image: linear-gradient(118deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)), url('${escapeHtml(movie.backdrop || movie.poster)}');"></div>
        `).join("");

        if (ui.heroDots) {
            ui.heroDots.innerHTML = heroItems.map((_: any, index: number) => `
                <button type="button" class="hero-dot ${index === 0 ? "active" : ""}" data-hero-index="${index}"></button>
            `).join("");

            ui.heroDots.addEventListener("click", (event: any) => {
                const dot = (event.target as HTMLElement).closest(".hero-dot") as HTMLElement;
                if (!dot) return;
                setHeroSlide(Number(dot.dataset.heroIndex || 0));
                if (heroTimer) {
                    clearInterval(heroTimer);
                    heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500);
                }
            });
        }

        setHeroSlide(0);
        if (heroTimer) clearInterval(heroTimer);
        heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500);
    };

    ui.heroBookingBtn?.addEventListener("click", () => {
        window.location.href = "/movies";
    });

    renderHero();
</script>
