Kino-Website-Framework/src/components/MovieListView.astro

---
import {
    timePatterns,
    hallRotation,
    weekdayShort,
    type MovieInterface,
    type ITMDBResponse,
} from "../scripts/bigConstants";

async function getTopMovies(): Promise<MovieInterface[]> {
    const API_KEY = import.meta.env.TMDB_API_KEY;
    console.log("Fetching with Key:", API_KEY ? "Key found" : "KEY MISSING!");

    const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";

    // 1. Corrected "discover" spelling
    const response = await fetch(
        `https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}&language=de-DE&sort_by=popularity.desc`,
    );
    console.log("Response Status:", response.status);

    const data: ITMDBResponse = await response.json();
    console.log("Results found:", data.results?.length);

    if (!data.results) return [];

    return data.results?.map((movie) => ({
        id: movie.id,
        title: movie.title || "Unknown Title",
        poster: movie.poster_path
            ? `${IMAGE_BASE_URL}${movie.poster_path}`
            : "/placeholder.jpg",
        rating: movie.vote_average || 0,
        // Add optional chaining (?.) and a fallback
        year: movie.release_date?.split("-")[0] || "N/A",
        genre: "Movie", // Discover doesn't provide the name, only an ID
        duration: 120, // Discover doesn't provide duration
        fsk: "12",
        description: movie.overview || "No description available.",
        backdrop: movie.backdrop_path,
    }));
}

const formatDateShort = (dateObj: Date) => {
    const day = String(dateObj.getDate()).padStart(2, "0");
    const month = String(dateObj.getMonth() + 1).padStart(2, "0");
    return `${day}.${month}.`;
};

const buildDayMeta = (offset: number) => {
    const date = new Date();
    date.setHours(0, 0, 0, 0);
    date.setDate(date.getDate() + offset);

    const weekday = weekdayShort[date.getDay()];
    const formattedDate = formatDateShort(date);

    if (offset === 0)
        return {
            offset,
            date,
            short: "Heute",
            long: `Heute, ${formattedDate}`,
        };
    if (offset === 1)
        return {
            offset,
            date,
            short: "Morgen",
            long: `Morgen, ${formattedDate}`,
        };
    return {
        offset,
        date,
        short: weekday,
        long: `${weekday}, ${formattedDate}`,
    };
};

const buildScheduleForMovie = (movieIndex: number) => {
    return Array.from({ length: 7 }, (_, dayOffset) => {
        const dayMeta = buildDayMeta(dayOffset);
        const pattern =
            timePatterns[(movieIndex + dayOffset) % timePatterns.length];
        const desiredCount = 4 + ((movieIndex + dayOffset) % 2);
        const showCount = Math.min(pattern.length, desiredCount);

        const showings = pattern
            .slice(0, showCount)
            .map((time: string, slotIndex: number) => {
                const hall =
                    hallRotation[
                        (movieIndex + dayOffset + slotIndex) %
                            hallRotation.length
                    ];
                return { time, hall };
            });

        return { ...dayMeta, showings };
    });
};

let movieCatalog = await getTopMovies();
const movieProgram = movieCatalog?.map((movie, movieIndex) => ({
    ...movie,
    schedule: buildScheduleForMovie(movieIndex),
}));
---

<section id="movie-list-view">
    <div class="container movie-list-shell">
        <h1 class="list-title">Aktuelle Filme & Spielzeiten</h1>
        <p class="list-subtitle">
            Alle Filme mit 7 Tagen Spielplan. Erste Vorstellung täglich ab 13:00
            Uhr.
        </p>

        <div id="movie-program-list" class="movie-program-list">
            {
                movieProgram?.map((movie, programIndex) => (
                    <article
                        class="detailed-card program-card"
                        data-program-index={programIndex}
                        data-schedule={JSON.stringify(movie.schedule)}
                    >
                        <div class="card-left">
                            <img src={movie.poster} alt={movie.title} />
                            <span class={`fsk fsk-${movie.fsk}`}>
                                {movie.fsk}
                            </span>
                        </div>
                        <div class="card-right">
                            <div class="card-header">
                                <h2>{movie.title}</h2>
                                <span class="duration">
                                    {movie.duration} Min. | {movie.genre} | FSK:{" "}
                                    {movie.fsk}
                                </span>
                            </div>
                            <p class="description">{movie.description}</p>

                            <div class="program-day-tabs">
                                {movie.schedule.map((day, dayIndex) => (
                                    <button
                                        type="button"
                                        class={`program-day-tab ${dayIndex === 0 ? "active" : ""}`}
                                        data-program-index={programIndex}
                                        data-day-index={dayIndex}
                                    >
                                        <span>{day.short}</span>
                                        <small>
                                            {formatDateShort(day.date)}
                                        </small>
                                    </button>
                                ))}
                            </div>

                            <div class="schedule-container program-schedule-shell">
                                <div class="schedule-header">
                                        <span>Tag</span>
                                        <span>Kinosaal</span>
                                        <span>Uhrzeit</span>
                                </div>
                                <div
                                    id={`schedule-body-${programIndex}`}
                                    class="program-schedule-body"
                                >
                                    {movie.schedule[0].showings.map(
                                        (showing) => (
                                            <button
                                                class="schedule-row time-chip program-time-row"
                                                data-movie={movie.title}
                                                data-hall={showing.hall}
                                                data-time={showing.time}
                                            >
                                                <span>
                                                    {movie.schedule[0].long}
                                                </span>
                                                <span class="hall-pill">
                                                    {showing.hall}
                                                </span>
                                                <span class="time-btn">
                                                    {showing.time}
                                                </span>
                                            </button>
                                        ),
                                    )}
                                </div>
                            </div>
                        </div>
                    </article>
                ))
            }
        </div>
    </div>
</section>

<script>
    const movieProgramList = document.getElementById("movie-program-list");

    movieProgramList?.addEventListener("click", (event: any) => {
        const dayButton = event.target.closest(".program-day-tab");
        if (dayButton) {
            const programIndex = dayButton.getAttribute("data-program-index");
            const dayIndex = parseInt(dayButton.getAttribute("data-day-index"));
            const card = dayButton.closest(".detailed-card");
            const scheduleData = JSON.parse(card.getAttribute("data-schedule"));
            const selectedDay = scheduleData[dayIndex];

            // Update the schedule body HTML
            const body:any = document.getElementById(
                `schedule-body-${programIndex}`,
            );
            body.innerHTML = selectedDay.showings
                .map(
                    (showing:any) => `
            <button class="schedule-row time-chip" data-movie="${card.querySelector("h2").innerText}" data-hall="${showing.hall}" data-time="${showing.time}">
                <span>${selectedDay.long}</span>
                <span class="hall-pill">${showing.hall}</span>
                <span class="time-btn">${showing.time}</span>
            </button>
        `,
                )
                .join("");
        }
    });

    // Handle deep links
    const params = new URLSearchParams(window.location.search);
    const focusIndex = params.get("focus");
    if (focusIndex !== null) {
        const target = document.querySelector(
            `[data-program-index="${focusIndex}"]`,
        );
        if (target) {
            target.scrollIntoView({ behavior: "smooth", block: "start" });
            target.classList.add("flash-focus");
            setTimeout(() => target.classList.remove("flash-focus"), 1200);
        }
    }
</script>