<?php
if (!defined('_ISVALID')) define('_ISVALID', true);
include_once 'f_core/config.core.php';

// Get videos from database
$sql = "SELECT vf.*, au.usr_user as username 
        FROM db_videofiles vf 
        LEFT JOIN db_accountuser au ON vf.usr_id = au.usr_id 
        WHERE vf.privacy = 'public' AND vf.approved = 1 
        ORDER BY vf.upload_date DESC 
        LIMIT 20";

$videos = $class_database->execute($sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Browse Videos - EasyStream</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 20px; background: #f8f9fa; }
        .container { max-width: 1200px; margin: 0 auto; }
        .header { text-align: center; margin-bottom: 40px; }
        .logo img { max-height: 50px; }
        .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
        .video-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .video-thumb { width: 100%; height: 180px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; }
        .video-info { padding: 15px; }
        .video-title { margin: 0 0 8px 0; font-size: 16px; font-weight: 500; }
        .video-meta { color: #666; font-size: 14px; }
        .nav-links { text-align: center; margin-bottom: 30px; }
        .nav-links a { margin: 0 15px; color: #007bff; text-decoration: none; padding: 8px 16px; border-radius: 20px; }
        .nav-links a:hover { background: #e7f3ff; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="/f_scripts/fe/img/logo-header-blue.svg" alt="EasyStream">
            <h1>Browse Videos</h1>
        </div>
        
        <div class="nav-links">
            <a href="/">🏠 Home</a>
            <a href="upload.php">📤 Upload</a>
            <a href="search.php">🔍 Search</a>
        </div>
        
        <div class="video-grid">
            <?php if ($videos && count($videos) > 0): ?>
                <?php foreach ($videos as $video): ?>
                    <div class="video-card">
                        <div class="video-thumb">
                            📹
                        </div>
                        <div class="video-info">
                            <h3 class="video-title"><?php echo htmlspecialchars($video['file_title']); ?></h3>
                            <div class="video-meta">
                                👤 <?php echo htmlspecialchars($video['username'] ?: 'Unknown'); ?><br>
                                👁️ <?php echo number_format($video['file_views'] ?: 0); ?> views<br>
                                ⏱️ <?php echo gmdate("H:i:s", $video['file_duration'] ?: 0); ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div style="grid-column: 1 / -1; text-align: center; padding: 60px; background: white; border-radius: 12px;">
                    <h3>🎬 No videos yet</h3>
                    <p>Be the first to share your content!</p>
                    <a href="upload.php" style="display: inline-block; padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 6px; margin-top: 10px;">Upload First Video</a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</body>
</html>