<?php
session_start();

define('TMDB_API_KEY', '48c34bf50882a9a871760dbb0434a9da');
define('TMDB_API_URL', 'https://api.themoviedb.org/3');
define('TMDB_IMG_URL', 'https://image.tmdb.org/t/p/');

$genre_list = [
    28 => 'Ação', 12 => 'Aventura', 16 => 'Animação', 35 => 'Comédia', 80 => 'Crime', 99 => 'Documentário', 18 => 'Drama', 10751 => 'Família', 14 => 'Fantasia', 36 => 'História', 27 => 'Terror', 10402 => 'Música', 9648 => 'Mistério', 10749 => 'Romance', 878 => 'Ficção Científica', 10770 => 'Cinema TV', 53 => 'Suspense', 10752 => 'Guerra', 37 => 'Faroeste'
];

function tmdbRequest($endpoint, $params = []) {
    $params['api_key'] = TMDB_API_KEY;
    $params['language'] = 'pt-BR';
    $url = TMDB_API_URL . $endpoint . '?' . http_build_query($params);
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_TIMEOUT, 5);
    $response = curl_exec($ch);
    curl_close($ch);
    
    return json_decode($response, true);
}

$trendingMovies = tmdbRequest('/trending/movie/week');
$movies = [];

if (isset($trendingMovies['results'])) {
    foreach ($trendingMovies['results'] as $movie) {
        if (!empty($movie['backdrop_path']) && !empty($movie['poster_path'])) {
            $item_genres = [];
            if(isset($movie['genre_ids'])){
                foreach(array_slice($movie['genre_ids'], 0, 3) as $id){
                    if(isset($genre_list[$id])) $item_genres[] = $genre_list[$id];
                }
            }

            $movies[] = [
                'title' => $movie['title'] ?? $movie['original_title'],
                'overview' => $movie['overview'] ?? 'Sinopse não disponível.',
                'original_title' => $movie['original_title'],
                'year' => substr($movie['release_date'] ?? '', 0, 4),
                'backdrop_path' => TMDB_IMG_URL . 'w1280' . $movie['backdrop_path'],
                'poster_path' => TMDB_IMG_URL . 'w342' . $movie['poster_path'],
                'rating' => $movie['vote_average'],
                'genres' => $item_genres
            ];
        }
    }
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; padding: 0; background: #000; overflow: hidden; font-family: sans-serif; }
        #loading-screen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #000; display: flex; flex-direction: column;
            justify-content: center; align-items: center; z-index: 9999;
        }
        .pulse-circle {
            width: 60px; height: 60px; border: 4px solid #222;
            border-top-color: #ffaa00; border-radius: 50%;
            animation: spin 1s linear infinite; margin-bottom: 20px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
    </style>
</head>
<body>

    <div id="loading-screen">
        <div class="pulse-circle"></div>
        <div style="color: #888; letter-spacing: 2px; font-size: 0.8rem; text-transform: uppercase;">Aguarde Carregando...</div>
    </div>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <style>
        .cinema-container { position: fixed; width: 100vw; height: 100vh; background: #000; }
        .slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; }
        .slide.active { opacity: 1; z-index: 10; }
        .backdrop { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; }
        
        .content-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.95) 100%);
            display: flex; 
            align-items: center; /* Centraliza verticalmente o conteúdo principal */
            justify-content: center;
        }
        
        .movie-content { 
            width: 100%; 
            max-width: 1100px; 
            padding: 0 3rem; 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-start; /* Alinha o topo do texto com o topo da capa */
            gap: 2.5rem;
        }
        
        .movie-info { flex: 1; }
        .movie-title { font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 0.3rem; }
        .original-title { font-size: 0.8rem; color: #999; margin-bottom: 0.8rem; }
        .movie-stats { display: flex; gap: 1rem; margin-bottom: 0.8rem; font-size: 0.85rem; color: #ccc; }
        .rating { color: #ffd700; font-weight: bold; }
        .genre-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
        .genre-tag { padding: 0.2rem 0.7rem; border-radius: 4px; background: rgba(255,255,255,0.15); font-size: 0.65rem; color: #fff; text-transform: uppercase; }
        .movie-overview { font-size: 0.8rem; line-height: 1.4; color: #bbb; max-width: 550px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        
        .poster-container { 
            width: 140px; 
            flex-shrink: 0;
        }
        .poster { width: 100%; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.1); }
    </style>

    <div class="cinema-container">
        <?php foreach ($movies as $index => $movie): ?>
        <div class="slide <?php echo $index === 0 ? 'active' : ''; ?>">
            <div class="backdrop" style="background-image: url('<?php echo $movie['backdrop_path']; ?>')"></div>
            <div class="content-overlay">
                <div class="movie-content">
                    <div class="movie-info">
                        <h1 class="movie-title"><?php echo $movie['title']; ?></h1>
                        <div class="original-title"><?php echo $movie['original_title']; ?></div>
                        <div class="movie-stats">
                            <span><?php echo $movie['year']; ?></span>
                            <span class="rating">★ <?php echo number_format($movie['rating'], 1); ?></span>
                        </div>
                        <div class="genre-tags">
                            <?php foreach ($movie['genres'] as $genre): ?>
                                <span class="genre-tag"><?php echo $genre; ?></span>
                            <?php endforeach; ?>
                        </div>
                        <div class="movie-overview"><?php echo $movie['overview']; ?></div>
                    </div>
                    <div class="poster-container">
                        <img src="<?php echo $movie['poster_path']; ?>" class="poster" alt="Poster">
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>

    <script>
    window.onload = () => {
        const loader = document.getElementById('loading-screen');
        setTimeout(() => {
            loader.style.opacity = '0';
            setTimeout(() => { loader.style.display = 'none'; }, 600);
        }, 500);
    };

    const slides = document.querySelectorAll('.slide');
    let currentSlide = 0;
    setInterval(() => {
        if (slides.length > 1) {
            slides[currentSlide].classList.remove('active');
            currentSlide = (currentSlide + 1) % slides.length;
            slides[currentSlide].classList.add('active');
        }
    }, 9000);
    </script>
</body>
</html>
