<?php
// ===== DIRECT API KEY CONFIGURATION =====
$api_key = "f2661b262c01a38ec813daaefb2d6337";  // <-- YOUR API KEY HERE

if (empty($api_key)) {
    die("⚠️ TMDB API KEY is empty. Set it in the PHP code.");
}

// TMDB API Configuration
$base_url = 'https://api.themoviedb.org/3';
$language = 'en-US'; // Changed to English

// Get popular movies
$movie_url = $base_url . '/movie/popular?api_key=' . $api_key . '&language=' . $language;
$movie_response = @file_get_contents($movie_url);

if ($movie_response === FALSE) {
    die('Error connecting to the TMDB API or invalid key.');
}

$movies = json_decode($movie_response, true)['results'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TMDB Dynamic Ads</title>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #000;
    color: white;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.background {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
    z-index: -1;
}
.main-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 90%;
    max-width: 1000px;
    transform: translateY(-40px);
}
.cast-side {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
}
.cast-member {
    text-align: center;
}
.cast-member img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}
.cast-member span {
    display: block;
    margin-top: 5px;
    font-size: 0.75em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.container {
    width: 55%; /* <-- Un poco más largo hacia los lados */
    background-color: rgba(0,0,0,0.6);
    padding: 10px 20px; /* <-- 10px arriba y abajo (más delgado), 20px a los lados */
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
    text-align: center;
}
h1 {
    font-size: 1.6em;
    margin-bottom: 5px; /* <-- Reducido para ahorrar espacio vertical */
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rating {
    margin-bottom: 5px;
}
.rating span {
    font-size: 1.2em;
    color: gold;
}
p {
    font-size: 0.9em;
    line-height: 1.3; /* <-- Las líneas de texto ahora están un poco más juntas */
    margin-bottom: 5px;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 767px) {
    .main-layout {
        flex-direction: row;
        gap: 10px;
    }
    .container {
        width: 65%;
        padding: 10px;
    }
    .cast-member img {
        width: 55px;
        height: 55px;
    }
    h1 { font-size: 1.2em; }
    p { font-size: 0.8em; -webkit-line-clamp: 2; }
}
</style>
</head>
<body>
<div id="background" class="background"></div>

<div class="main-layout">
    <div class="cast-side" id="cast-left"></div>

    <div class="container">
        <h1 id="title">Loading...</h1>
        <div id="rating" class="rating"></div>
        <p id="overview">Please wait while we load the ad.</p>
    </div>

    <div class="cast-side" id="cast-right"></div>
</div>

<script>
const movies = <?php echo json_encode($movies); ?>;
const apiKey = "<?php echo $api_key; ?>";
const baseUrl = "https://api.themoviedb.org/3";
let currentIndex = 0;

async function fetchCast(movieId) {
    const res = await fetch(`${baseUrl}/movie/${movieId}/credits?api_key=${apiKey}`);
    const data = await res.json();
    return data.cast.slice(0, 4);
}

async function updateAd() {
    const movie = movies[currentIndex];
    const background = document.getElementById('background');
    const title = document.getElementById('title');
    const overview = document.getElementById('overview');
    const rating = document.getElementById('rating');
    const castLeft = document.getElementById('cast-left');
    const castRight = document.getElementById('cast-right');

    const bgImageUrl = `https://image.tmdb.org/t/p/original${movie.backdrop_path}`;
    background.style.backgroundImage = `url('${bgImageUrl}')`;

    title.textContent = movie.title;
    overview.textContent = movie.overview;

    const starRating = Math.round(movie.vote_average / 2);
    rating.innerHTML = '<span>' + '★'.repeat(starRating) + '☆'.repeat(5 - starRating) + '</span>';

    const castData = await fetchCast(movie.id);
    castLeft.innerHTML = '';
    castRight.innerHTML = '';

    castData.forEach((member, i) => {
        const imgUrl = member.profile_path
            ? `https://image.tmdb.org/t/p/w500${member.profile_path}`
            : 'https://via.placeholder.com/70';
        const div = document.createElement('div');
        div.classList.add('cast-member');
        div.innerHTML = `<img src="${imgUrl}" alt="${member.name}"><span>${member.name}</span>`;
        if (i < 2) castLeft.appendChild(div);
        else castRight.appendChild(div);
    });

    currentIndex = (currentIndex + 1) % movies.length;
}

setInterval(updateAd, 10000);
updateAd();
</script>
</body>
</html>