<?php
// ===== SISTEMA INTELIGENTE DE LOCALIZAÇÃO DO BANCO =====
$caminhos = [
    __DIR__ . '/api/db/db_ads.db',
    __DIR__ . '/db/db_ads.db',
    './api/db/db_ads.db'
];

$db_path = '';
foreach ($caminhos as $path) {
    if (file_exists($path)) {
        $db_path = $path;
        break;
    }
}

$ads = [];

if ($db_path) {
    try {
        $pdo = new PDO("sqlite:" . $db_path);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $pdo->query("SELECT url FROM ads2 ORDER BY RANDOM()");
        $ads = $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch(PDOException $e) {
        // Erro silencioso
    }
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Slideshow Ads 2 - Movimento Perfeito</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { 
            background-color: #000; 
            overflow: hidden; 
            width: 100%; 
            height: 100%; 
            position: fixed; 
        }
        
        #slideshow-container {
            width: 100%;
            height: 100%;
            position: relative;
            background: #000;
        }

        .slide {
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%;
            opacity: 0; 
            z-index: 1;
            /* Transição de opacidade linear para evitar sensação de engasgo */
            transition: opacity 1.2s linear; 
            display: flex; 
            justify-content: center; 
            align-items: center;
            overflow: hidden;
            background: #000;
        }
        
        /* O slide ativo sempre fica no topo */
        .slide.active { 
            opacity: 1; 
            z-index: 2; 
        }

        /* O slide anterior fica logo abaixo para não mostrar fundo preto */
        .slide.exiting {
            opacity: 0;
            z-index: 1;
        }
        
        .media { 
            width: 125%; /* Margem maior para o movimento fluir */
            height: 125%; 
            object-fit: cover; 
            position: absolute;
            /* Força renderização pela GPU */
            transform: translate3d(0, 0, 0);
            will-change: transform;
        }

        /* ANIMAÇÃO KEN BURNS: LENTA E MULTIDIRECIONAL */
        .slide.active .media-img {
            animation: kenBurns 20s ease-in-out infinite alternate;
        }

        @keyframes kenBurns {
            0%   { transform: scale(1.0) translate(0, 0); }
            25%  { transform: scale(1.1) translate(3%, -3%); } /* Sobe/Direita */
            50%  { transform: scale(1.05) translate(-3%, 3%); } /* Desce/Esquerda */
            75%  { transform: scale(1.1) translate(3%, 3%); } /* Desce/Direita */
            100% { transform: scale(1.0) translate(-3%, -3%); } /* Sobe/Esquerda */
        }

        .no-banner {
            color: #555; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh;
            font-family: sans-serif;
        }
    </style>
</head>
<body>

<div id="slideshow-container">
    <?php if (empty($ads)): ?>
        <div class="no-banner">
            <p>Aguardando Banners...</p>
        </div>
    <?php else: ?>
        <?php foreach ($ads as $index => $ad): ?>
            <div class="slide <?= $index === 0 ? 'active' : '' ?>">
                <?php 
                $url = $ad['url'];
                $ext = strtolower(pathinfo(parse_url($url, PHP_URL_PATH), PATHINFO_EXTENSION));
                $is_video = in_array($ext, ['mp4', 'webm', 'ogg']);
                
                if ($is_video): ?>
                    <video class="media" autoplay muted loop playsinline preload="auto">
                        <source src="<?= htmlspecialchars($url) ?>" type="video/<?= $ext ?>">
                    </video>
                <?php else: ?>
                    <img class="media media-img" src="<?= htmlspecialchars($url) ?>" loading="eager">
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

<script>
    const slides = document.querySelectorAll('.slide');
    let current = 0;

    function nextSlide() {
        if (slides.length <= 1) return;
        
        const oldSlide = slides[current];
        current = (current + 1) % slides.length;
        const newSlide = slides[current];

        // Marca o slide que está saindo
        oldSlide.classList.remove('active');
        oldSlide.classList.add('exiting');

        // Ativa o novo slide
        newSlide.classList.add('active');

        // Quando a transição de saída terminar, limpa a classe 'exiting'
        oldSlide.addEventListener('transitionend', function handler() {
            oldSlide.classList.remove('exiting');
            oldSlide.removeEventListener('transitionend', handler);
        });

        // Reinicia vídeos se houver
        const video = newSlide.querySelector('video');
        if (video) {
            video.currentTime = 0;
            video.play().catch(() => {});
        }
    }

    if (slides.length > 1) {
        // Intervalo de 8 segundos: tempo suficiente para a animação CSS brilhar
        setInterval(nextSlide, 8000); 
    }
</script>

</body>
</html>
