<?php
// index.php — versión lista para copiar y pegar
// ----------------------------------------------
// API Key fija (puedes cambiarla aquí si la renuevas)
$tmdbkey = '567633d7349a08a5d3b3948495f746b8';
$tmdblanguage = 'es-ES';
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Autoplaying Backdrops - TMDb</title>
<style>
  body {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100vh;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  #backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    transition: opacity 1s ease;
  }
  .logo-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  }
  .logo {
    max-width: 350px;
    margin-bottom: 10px;
  }
  .movie-info {
    font-size: 14px;
    line-height: 1.4;
  }
</style>
</head>
<body>
  <img id="backdrop" alt="Backdrop">
  <div class="logo-container">
    <img id="logo" class="logo" alt="Logo">
    <div id="movie-info" class="movie-info"></div>
  </div>

<script>
const apiKey = "<?php echo $tmdbkey; ?>";
const language = "<?php echo $tmdblanguage; ?>";
let currentIndex = 0;
let movieIds = [];

async function fetchPopularMovies() {
  try {
    const response = await fetch(`https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&sort_by=popularity.desc&language=en`);
    const data = await response.json();
    movieIds = data.results.map(movie => movie.id);
  } catch (e) {
    console.error("Error cargando lista de películas:", e);
  }
}

async function fetchBackdrop(movieId) {
  try {
    const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}/images?api_key=${apiKey}`);
    const data = await response.json();
    if (data.backdrops && data.backdrops.length > 0) {
      return `https://image.tmdb.org/t/p/original${data.backdrops[0].file_path}`;
    }
  } catch (e) { console.error("Error en backdrop:", e); }
  return null;
}

async function fetchLogo(movieId) {
  try {
    const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}&append_to_response=images`);
    const data = await response.json();
    const logos = data.images && data.images.logos ? data.images.logos : [];
    const englishLogo = logos.find(l => l.iso_639_1 === "en") || logos[0];
    if (englishLogo) {
      return `https://image.tmdb.org/t/p/w500${englishLogo.file_path}`;
    }
  } catch (e) { console.error("Error en logo:", e); }
  return null;
}

async function fetchInfo(movieId) {
  try {
    const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}&language=${language}`);
    const data = await response.json();
    return {
      title: data.title,
      releaseDate: data.release_date,
      overview: data.overview
    };
  } catch (e) { console.error("Error info:", e); }
  return null;
}

async function updateMovie() {
  if (!movieIds.length) return;
  const id = movieIds[currentIndex];

  const [backdropUrl, logoUrl, info] = await Promise.all([
    fetchBackdrop(id),
    fetchLogo(id),
    fetchInfo(id)
  ]);

  const backdrop = document.getElementById("backdrop");
  const logo = document.getElementById("logo");
  const infoBox = document.getElementById("movie-info");

  if (backdropUrl) backdrop.src = backdropUrl;
  if (logoUrl) logo.src = logoUrl;
  if (info) {
    infoBox.innerHTML = `<strong>${info.title}</strong> (${info.releaseDate ? info.releaseDate.substring(0,4) : '----'})<br>${info.overview}`;
  }

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

(async () => {
  await fetchPopularMovies();
  await updateMovie();
  setInterval(updateMovie, 6000); // cada 6 segundos cambia película
})();
</script>
</body>
</html>
