<?php
// Dans un projet réel, on récupérerait l'ID de la vidéo et on ferait une requête à l'API PeerTube
$videoId = isset($_GET['id']) ? intval($_GET['id']) : 1;

// Exemple de données vidéo
$videos = [
    1 => [
        'id' => 1,
        'title' => 'L\'indépendance de La Réunion : KA UBUNTU À BAKOU',
        'url' => 'https://peertube.example.com/embed/1',
        'description' => 'Une introduction complète au monde de la culture libre et des logiciels open source. Découvrez les principes fondamentaux, les licences, et comment contribuer à des projets open source.',
        'channel' => 'Tech Libre',
        'channelId' => 1,
        'views' => 15420,
        'likes' => 1245,
        'date' => '29 mars 2025',
        'tags' => ['#Bakou', '#LaRéunion', '#Indépendance']
    ],
    2 => [
        'id' => 2,
        'title' => '#1 Départementalisation de La Réunion (1946) : l\'heure du bilan ?',
        'url' => 'https://peertube.example.com/embed/2',
        'description' => 'Partez à la découverte des sentiers cachés de La Réunion. Cette vidéo vous guide à travers des paysages magnifiques et peu connus de l\'île.',
        'channel' => 'Île Aventure',
        'channelId' => 2,
        'views' => 8745,
        'likes' => 732,
        'date' => '29 mars 2025',
        'tags' => ['#LaRéunion', '#Histoire', '#Politique']
    ],
    // Autres vidéos...
];

// Récupération de la vidéo
$video = isset($videos[$videoId]) ? $videos[$videoId] : $videos[1];

// Vidéos suggérées (normalement récupérées par un algorithme de recommandation)
function getSuggestedVideos($videos, $currentId) {
    $suggested = [];
    foreach ($videos as $id => $video) {
        if ($id != $currentId) {
            $suggested[] = $video;
        }
    }
    return $suggested;
}

$suggestedVideos = getSuggestedVideos($videos, $videoId);

// Formatage des données
function formatViewCount($views) {
    if ($views >= 1000000) {
        return round($views / 1000000, 1) . 'M';
    } elseif ($views >= 1000) {
        return round($views / 1000, 1) . 'K';
    } else {
        return $views;
    }
}

function formatDate($dateString) {
    $date = new DateTime($dateString);
    return $date->format('d/m/Y');
}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $video['title']; ?> - Kaubuntu.re</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/video-page.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
    <!-- Sidebar de navigation -->
    <div class="sidebar">
        <a href="index.php" class="logo">
            <img src="img/logo.png" alt="Kaubuntu.re">
        </a>
        
        <nav class="sidebar-nav">
            <a href="index.php" class="nav-item">
                <i class="fas fa-home"></i> Accueil
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-broadcast-tower"></i> Direct
            </a>
            
            <div class="nav-divider"></div>
            
            <a href="#" class="nav-item">
                <i class="fas fa-compass"></i> Explorer
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-globe"></i> Actualité
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-music"></i> Musique
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-monument"></i> Histoire
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-running"></i> Sport
            </a>
            
            <div class="nav-divider"></div>
            
            <div class="category-title">
                <i class="fas fa-hashtag"></i> Hashtags
            </div>
            
            <a href="#" class="tag-item">
                <div class="tag-dot"></div> Interview
            </a>
            <a href="#" class="tag-item">
                <div class="tag-dot"></div> Conférence
            </a>
            <a href="#" class="tag-item">
                <div class="tag-dot"></div> Colonialisme
            </a>
            <a href="#" class="tag-item">
                <div class="tag-dot"></div> La Réunion
            </a>
            <a href="#" class="tag-item">
                <div class="tag-dot"></div> Afrique
            </a>
        </nav>
    </div>
    
    <!-- Contenu principal -->
    <div class="main-content">
        <!-- Header avec barre de recherche et icônes -->
        <div class="header">
            <div class="search-container">
                <form action="search.php" method="get">
                    <input type="text" name="q" placeholder="Recherche">
                    <button type="submit"><i class="fas fa-search"></i></button>
                </form>
            </div>
            
            <div class="social-icons">
                <a href="#" class="icon-button"><i class="fab fa-facebook"></i></a>
                <a href="#" class="icon-button"><i class="fab fa-youtube"></i></a>
                <a href="#" class="icon-button"><i class="fab fa-instagram"></i></a>
                <a href="#" class="icon-button"><i class="fas fa-ellipsis-h"></i></a>
            </div>
            
            <div class="action-icons">
                <a href="#" class="icon-button"><i class="fas fa-film"></i></a>
                <button class="dark-mode-toggle"><i class="fas fa-moon"></i></button>
            </div>
        </div>
        
        <!-- Section vidéo -->
        <div class="video-container">
            <div class="video-player">
                <iframe src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>
            </div>
            
            <div class="video-details">
                <h1 class="video-title"><?php echo $video['title']; ?></h1>
                
                <div class="video-info">
                    <div class="video-metadata">
                        <span class="video-views"><?php echo number_format($video['views']); ?> vues</span>
                        <span class="video-date"><?php echo $video['date']; ?></span>
                    </div>
                    
                    <div class="video-actions">
                        <button class="action-button">
                            <i class="fas fa-thumbs-up"></i>
                            <span><?php echo number_format($video['likes']); ?></span>
                        </button>
                        <button class="action-button">
                            <i class="fas fa-share"></i>
                            <span>Partager</span>
                        </button>
                        <button class="action-button">
                            <i class="fas fa-download"></i>
                            <span>Télécharger</span>
                        </button>
                    </div>
                </div>
                
                <div class="channel-info">
                    <div class="channel-avatar">
                        <img src="img/channels/<?php echo $video['channelId']; ?>.jpg" alt="<?php echo $video['channel']; ?>">
                    </div>
                    <div class="channel-details">
                        <h3 class="channel-name"><?php echo $video['channel']; ?></h3>
                    </div>
                </div>
                
                <div class="video-description">
                    <?php echo $video['description']; ?>
                </div>
                
                <div class="video-tags">
                    <?php foreach ($video['tags'] as $tag): ?>
                        <a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag"><?php echo $tag; ?></a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        
        <!-- Section commentaires -->
        <div class="comments-section">
            <h2 class="section-title">Commentaires</h2>
            
            <div class="comment-form">
                <div class="comment-avatar">
                    <img src="img/avatars/user.jpg" alt="Avatar">
                </div>
                <div class="comment-input">
                    <textarea placeholder="Ajouter un commentaire public..."></textarea>
                    <div class="comment-buttons">
                        <button class="comment-cancel">Annuler</button>
                        <button class="comment-submit">Commenter</button>
                    </div>
                </div>
            </div>
            
            <div class="comments-list">
                <div class="comment">
                    <div class="comment-avatar">
                        <img src="img/avatars/user1.jpg" alt="Avatar">
                    </div>
                    <div class="comment-content">
                        <div class="comment-author">Marie Dupont</div>
                        <div class="comment-date">Il y a 2 jours</div>
                        <div class="comment-text">
                            Excellente vidéo ! J'ai beaucoup appris sur l'histoire de La Réunion. Merci pour ce contenu de qualité.
                        </div>
                        <div class="comment-actions">
                            <button><i class="fas fa-thumbs-up"></i> 15</button>
                            <button><i class="fas fa-thumbs-down"></i></button>
                            <button>Répondre</button>
                        </div>
                    </div>
                </div>
                
                <div class="comment">
                    <div class="comment-avatar">
                        <img src="img/avatars/user2.jpg" alt="Avatar">
                    </div>
                    <div class="comment-content">
                        <div class="comment-author">Jean Martin</div>
                        <div class="comment-date">Il y a 5 jours</div>
                        <div class="comment-text">
                            Pourriez-vous faire une vidéo plus détaillée sur certains aspects abordés ici ? J'aimerais approfondir ce sujet.
                        </div>
                        <div class="comment-actions">
                            <button><i class="fas fa-thumbs-up"></i> 7</button>
                            <button><i class="fas fa-thumbs-down"></i></button>
                            <button>Répondre</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Section vidéos suggérées -->
        <div class="suggested-videos">
            <h2 class="section-title">Vidéos suggérées</h2>
            
            <div class="video-grid">
                <?php foreach ($suggestedVideos as $suggestedVideo): ?>
                <div class="video-card" data-video-id="<?php echo $suggestedVideo['id']; ?>">
                    <div class="video-thumbnail">
                        <img src="img/video-thumbnails/recent-<?php echo $suggestedVideo['id']; ?>.jpg" alt="<?php echo $suggestedVideo['title']; ?>">
                        <div class="video-play-icon">
                            <i class="fas fa-play-circle"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3 class="video-title"><?php echo $suggestedVideo['title']; ?></h3>
                        <div class="video-metadata">
                            <span class="video-tag"><?php echo $suggestedVideo['tags'][0]; ?></span>
                            <div>
                                <span class="video-date"><?php echo $suggestedVideo['date']; ?></span>
                                <span class="video-views"><?php echo number_format($suggestedVideo['views']); ?> vues</span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="footer">
            <div class="footer-logo">
                <img src="img/logo.png" alt="Kaubuntu.re">
            </div>
            
            <div class="footer-social">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-tiktok"></i></a>
            </div>
            
            <div class="footer-contact">CONTACT</div>
            <div class="footer-email">zinfos@kaubuntu.com</div>
        </div>
    </div>
    
    <!-- Menu mobile (masqué par défaut) -->
    <button class="mobile-menu-toggle">
        <i class="fas fa-bars"></i>
    </button>
    
    <div class="mobile-menu">
        <button class="mobile-menu-close">
            <i class="fas fa-times"></i>
        </button>
        
        <div class="search-container">
            <form action="search.php" method="get">
                <input type="text" name="q" placeholder="Recherche">
                <button type="submit"><i class="fas fa-search"></i></button>
            </form>
        </div>
        
        <a href="index.php" class="nav-item">
            <i class="fas fa-home"></i> Accueil
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-broadcast-tower"></i> Direct
        </a>
        
        <div class="nav-divider"></div>
        
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i> Explorer
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-globe"></i> Actualité
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-music"></i> Musique
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-monument"></i> Histoire
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-running"></i> Sport
        </a>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html> 