<?php
session_start();
require_once 'config.php';

$isLoggedIn = isset($_SESSION['user_id']);
$message = '';

// Handle comment submission
if ($_POST && isset($_POST['add_comment']) && $isLoggedIn && can_comment()) {
    $photo_id = intval($_POST['photo_id']);
    $comment_text = trim($_POST['comment_text']);
    
    if (!empty($comment_text) && $photo_id > 0) {
        $query = "INSERT INTO comments (photo_id, user_id, comment_text) VALUES (?, ?, ?)";
        $stmt = $conn->prepare($query);
        $stmt->bind_param("iis", $photo_id, $_SESSION['user_id'], $comment_text);
        if ($stmt->execute()) {
            $message = 'Comment added successfully!';
        }
    }
}

// Handle like toggle
if ($_POST && isset($_POST['toggle_like']) && $isLoggedIn && can_like_photos()) {
    $photo_id = intval($_POST['photo_id']);
    
    if ($photo_id > 0) {
        $check_query = "SELECT id FROM photo_reactions WHERE photo_id = ? AND user_id = ?";
        $check_stmt = $conn->prepare($check_query);
        $check_stmt->bind_param("ii", $photo_id, $_SESSION['user_id']);
        $check_stmt->execute();
        $check_result = $check_stmt->get_result();
        
        if ($check_result->num_rows > 0) {
            $delete_query = "DELETE FROM photo_reactions WHERE photo_id = ? AND user_id = ?";
            $delete_stmt = $conn->prepare($delete_query);
            $delete_stmt->bind_param("ii", $photo_id, $_SESSION['user_id']);
            $delete_stmt->execute();
        } else {
            $insert_query = "INSERT INTO photo_reactions (photo_id, user_id, reaction_type) VALUES (?, ?, 'like')";
            $insert_stmt = $conn->prepare($insert_query);
            $insert_stmt->bind_param("ii", $photo_id, $_SESSION['user_id']);
            $insert_stmt->execute();
        }
    }
}

// Get active banner images
$banners_query = "SELECT * FROM banner_images WHERE is_active = 1 ORDER BY sort_order ASC, id DESC";
$banners_result = $conn->query($banners_query);
$banner_slides = [];

if ($banners_result && $banners_result->num_rows > 0) {
    while ($row = $banners_result->fetch_assoc()) {
        $banner_slides[] = $row;
    }
}

// If no banners, use featured photos as fallback
if (empty($banner_slides)) {
    $featured_query = "SELECT * FROM photos WHERE is_featured = 1 AND is_private = 0 ORDER BY upload_date DESC LIMIT 5";
    $featured_result = $conn->query($featured_query);
    if ($featured_result && $featured_result->num_rows > 0) {
        while ($row = $featured_result->fetch_assoc()) {
            $banner_slides[] = [
                'title' => $row['title'],
                'subtitle' => $row['description'] ?: 'A moment captured in time',
                'image_path' => $row['file_path'],
                'is_photo' => true
            ];
        }
    }
}

// Get site statistics
$stats = [];
$countQuery = "SELECT COUNT(*) as count FROM photos WHERE file_type = 'image'";
$countResult = $conn->query($countQuery);
$stats['total_photos'] = $countResult->fetch_assoc()['count'];

$countQuery = "SELECT COUNT(*) as count FROM photos WHERE file_type = 'video'";
$countResult = $conn->query($countQuery);
$stats['total_videos'] = $countResult->fetch_assoc()['count'];

$viewQuery = "SELECT SUM(view_count) as total FROM photos";
$viewResult = $conn->query($viewQuery);
$stats['total_views'] = $viewResult->fetch_assoc()['total'] ?? 0;

// Fetch public media
$publicQuery = "SELECT p.*, c.name as category_name, c.color as category_color, c.icon as category_icon,
                       (SELECT COUNT(*) FROM photo_reactions pr WHERE pr.photo_id = p.id) as likes_count,
                       (SELECT COUNT(*) FROM photo_reactions pr WHERE pr.photo_id = p.id AND pr.user_id = ?) as user_liked,
                       (SELECT COUNT(*) FROM comments cm WHERE cm.photo_id = p.id) as comments_count
                FROM photos p 
                LEFT JOIN categories c ON p.category_id = c.id 
                WHERE p.is_private = 0 
                ORDER BY p.sort_order ASC, p.upload_date DESC LIMIT 20";
$stmt = $conn->prepare($publicQuery);
$user_id_param = $isLoggedIn ? $_SESSION['user_id'] : 0;
$stmt->bind_param("i", $user_id_param);
$stmt->execute();
$publicMedia = $stmt->get_result();

// Fetch private media if authorized
$privateMedia = null;
if ($isLoggedIn && can_view_private_photos()) {
    $privateQuery = "SELECT p.*, c.name as category_name, c.color as category_color, c.icon as category_icon,
                            (SELECT COUNT(*) FROM photo_reactions pr WHERE pr.photo_id = p.id) as likes_count,
                            (SELECT COUNT(*) FROM photo_reactions pr WHERE pr.photo_id = p.id AND pr.user_id = ?) as user_liked,
                            (SELECT COUNT(*) FROM comments cm WHERE cm.photo_id = p.id) as comments_count
                     FROM photos p 
                     LEFT JOIN categories c ON p.category_id = c.id 
                     WHERE p.is_private = 1 
                     ORDER BY p.sort_order ASC, p.upload_date DESC LIMIT 12";
    $private_stmt = $conn->prepare($privateQuery);
    $private_stmt->bind_param("i", $_SESSION['user_id']);
    $private_stmt->execute();
    $privateMedia = $private_stmt->get_result();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bikram Thapa - Photo Gallery</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ff6b6b 0%, #f59e0b 100%);
            min-height: 100vh;
            color: #333;
        }

        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: #ff6b6b;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #ff6b6b;
        }

        .login-btn {
            background: linear-gradient(45deg, #ff6b6b, #f59e0b);
            color: white !important;
            padding: 0.5rem 1.5rem;
            border-radius: 25px;
            transition: transform 0.3s;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            color: white !important;
        }

        /* Hero Slider */
        .hero-slider {
            margin-top: 80px;
            height: 70vh;
            position: relative;
            overflow: hidden;
            background: #000;
            border-radius: 0 0 30px 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }

        .slider-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .slides-wrapper {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%;
        }

        .hero-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-slide::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            z-index: 2;
            pointer-events: none;
        }

        .slide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.7) 100%);
            z-index: 1;
        }

        .slide-content {
            position: relative;
            z-index: 3;
            text-align: center;
            color: white;
            max-width: 800px;
            padding: 2rem;
        }

        .slide-title {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
            font-weight: bold;
        }

        .slide-subtitle {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            opacity: 0.9;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-top: 2rem;
        }

        .stat {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 1rem 2rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            display: block;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .slider-nav {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s;
        }

        .slider-dot.active {
            background: #ff6b6b;
            transform: scale(1.3);
        }

        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            transition: all 0.3s;
            z-index: 10;
        }

        .slider-btn:hover {
            background: rgba(0, 0, 0, 0.7);
            transform: translateY(-50%) scale(1.1);
        }

        .slider-prev {
            left: 20px;
        }

        .slider-next {
            right: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .media-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .media-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .media-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .media-thumbnail {
            position: relative;
            width: 100%;
            height: 250px;
            overflow: hidden;
            cursor: pointer;
        }

        .media-thumbnail img,
        .media-thumbnail video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .media-card:hover .media-thumbnail img,
        .media-card:hover .media-thumbnail video {
            transform: scale(1.05);
        }

        .video-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            color: white;
            text-shadow: 0 0 20px rgba(0,0,0,0.8);
            pointer-events: none;
            z-index: 2;
        }

        .media-info {
            padding: 1.5rem;
        }

        .media-category {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: white;
        }

        .media-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .media-description {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            line-height: 1.4;
        }

        .media-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .media-date {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .media-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .media-views,
        .media-likes,
        .media-comments {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .like-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 50%;
            transition: all 0.3s;
            font-size: 1rem;
        }

        .like-btn:hover {
            color: #ff6b6b;
            background: rgba(255, 107, 107, 0.1);
        }

        .like-btn.liked {
            color: #ff6b6b;
        }

        .comment-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 50%;
            transition: all 0.3s;
            font-size: 1rem;
        }

        .comment-btn:hover {
            color: #f59e0b;
            background: rgba(245, 158, 11, 0.1);
        }

        .media-interactions {
            border-top: 1px solid #e1e5e9;
            padding-top: 1rem;
            margin-top: 1rem;
        }

        .comment-form {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .comment-input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid #e1e5e9;
            border-radius: 20px;
            outline: none;
            font-size: 0.9rem;
        }

        .comment-submit {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .comments-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .comment {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            font-size: 0.85rem;
        }

        .comment-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #ff6b6b;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.75rem;
        }

        .comment-content {
            flex: 1;
        }

        .comment-author {
            font-weight: bold;
            margin-bottom: 0.25rem;
        }

        .comment-text {
            line-height: 1.3;
            color: #555;
        }

        .comment-date {
            font-size: 0.75rem;
            color: #999;
            margin-top: 0.25rem;
        }

        .private-section {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            padding: 3rem;
            margin-top: 4rem;
        }

        .private-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .private-icon {
            font-size: 3rem;
            color: #fbbf24;
            margin-bottom: 1rem;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            overflow: auto;
        }

        .modal-content {
            position: relative;
            margin: 2% auto;
            max-width: 95%;
            max-height: 95vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .modal-media-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 90%;
            max-height: 70vh;
        }

        .modal-image {
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            cursor: zoom-in;
        }

        .modal-image.zoomed {
            cursor: zoom-out;
            transform: scale(1.5);
        }

        .modal-video {
            max-width: 100%;
            max-height: 70vh;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .modal-info {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 15px;
            margin-top: 1rem;
            width: 100%;
            max-width: 800px;
            max-height: 300px;
            overflow-y: auto;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #333;
        }

        .modal-meta {
            display: flex;
            gap: 2rem;
            margin-bottom: 1rem;
            color: #666;
            flex-wrap: wrap;
        }

        .modal-description {
            color: #555;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .modal-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            font-size: 24px;
            padding: 15px 20px;
            cursor: pointer;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 2001;
        }

        .modal-nav-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: translateY(-50%) scale(1.1);
        }

        .modal-prev {
            left: 20px;
        }

        .modal-next {
            right: 20px;
        }

        .modal-counter {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            z-index: 2001;
        }

        .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            z-index: 2002;
        }

        .close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }

        .footer {
            background: rgba(0, 0, 0, 0.2);
            color: white;
            text-align: center;
            padding: 2rem;
            margin-top: 4rem;
        }

        .message-alert {
            position: fixed;
            top: 100px;
            right: 20px;
            background: #10b981;
            color: white;
            padding: 1rem;
            border-radius: 8px;
            z-index: 1001;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        .no-media {
            text-align: center;
            padding: 4rem 2rem;
            color: white;
        }

        .no-media i {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        @media (max-width: 768px) {
            .slide-title {
                font-size: 2rem;
            }
            
            .hero-slider {
                height: 50vh;
            }
            
            .hero-stats {
                flex-direction: column;
                gap: 1rem;
            }
            
            .stat {
                padding: 0.5rem 1rem;
            }
            
            .nav-links {
                display: none;
            }
            
            .media-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 1rem;
            }

            .modal-nav-btn {
                font-size: 18px;
                padding: 10px 15px;
            }
            
            .modal-prev {
                left: 10px;
            }
            
            .modal-next {
                right: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Message Alert -->
    <?php if ($message): ?>
        <div class="message-alert" id="messageAlert">
            <i class="fas fa-check-circle"></i> <?php echo $message; ?>
        </div>
    <?php endif; ?>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.php" class="logo">
                <i class="fas fa-camera"></i> Bikram
            </a>
            <ul class="nav-links">
                <li><a href="#public-gallery">Gallery</a></li>
                <?php if ($isLoggedIn): ?>
                    <?php if (can_view_private_photos()): ?>
                        <li><a href="#private-gallery">Private</a></li>
                    <?php endif; ?>
                    <?php if ($_SESSION['role'] === 'admin'): ?>
                        <li><a href="admin.php">Admin</a></li>
                    <?php endif; ?>
                    <li><a href="logout.php">Logout</a></li>
                <?php else: ?>
                    <li><a href="login.php" class="login-btn">Login</a></li>
                <?php endif; ?>
            </ul>
        </div>
    </nav>

    <!-- Hero Slider -->
    <section class="hero-slider">
        <div class="slider-container">
            <div class="slides-wrapper" id="slidesWrapper">
                <?php if (!empty($banner_slides)): ?>
                    <?php foreach ($banner_slides as $index => $slide): ?>
                        <div class="hero-slide" style="background-image: url('<?php echo htmlspecialchars($slide['image_path']); ?>')">
                            <div class="slide-overlay"></div>
                            <div class="slide-content">
                                <h1 class="slide-title"><?php echo htmlspecialchars($slide['title']); ?></h1>
                                <p class="slide-subtitle"><?php echo htmlspecialchars($slide['subtitle'] ?: 'Capturing life\'s beautiful moments'); ?></p>
                                
                                <?php if ($index === 0): ?>
                                    <div class="hero-stats">
                                        <div class="stat">
                                            <span class="stat-number"><?php echo number_format($stats['total_photos']); ?></span>
                                            <span class="stat-label">Stunning Photos</span>
                                        </div>
                                        <div class="stat">
                                            <span class="stat-number"><?php echo number_format($stats['total_videos']); ?></span>
                                            <span class="stat-label">Amazing Videos</span>
                                        </div>
                                        <div class="stat">
                                            <span class="stat-number"><?php echo number_format($stats['total_views']); ?></span>
                                            <span class="stat-label">Total Views</span>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <!-- Default slide -->
                    <div class="hero-slide" style="background: linear-gradient(135deg, #ff6b6b 0%, #f59e0b 100%)">
                        <div class="slide-content">
                            <h1 class="slide-title">Welcome to Bikram's Gallery</h1>
                            <p class="slide-subtitle">Where memories come alive</p>
                            <div class="hero-stats">
                                <div class="stat">
                                    <span class="stat-number">📸</span>
                                    <span class="stat-label">Ready for Photos</span>
                                </div>
                                <div class="stat">
                                    <span class="stat-number">🎬</span>
                                    <span class="stat-label">Video Stories</span>
                                </div>
                                <div class="stat">
                                    <span class="stat-number">✨</span>
                                    <span class="stat-label">Memories to Share</span>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- Navigation -->
            <?php if (count($banner_slides) > 1): ?>
                <button class="slider-btn slider-prev" onclick="changeSlide(-1)">‹</button>
                <button class="slider-btn slider-next" onclick="changeSlide(1)">›</button>
                <div class="slider-nav">
                    <?php foreach ($banner_slides as $index => $slide): ?>
                        <span class="slider-dot <?php echo $index === 0 ? 'active' : ''; ?>" onclick="goToSlide(<?php echo $index; ?>)"></span>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- Public Gallery -->
    <section id="public-gallery" class="container">
        <h2 class="section-title">Photo & Video Gallery</h2>
        <?php if ($publicMedia && $publicMedia->num_rows > 0): ?>
            <div class="media-grid">
                <?php 
                $media_index = 0;
                $allMedia = [];
                while ($media = $publicMedia->fetch_assoc()): 
                    $allMedia[] = $media;
                ?>
                    <div class="media-card" onclick="showMedia(<?php echo $media_index; ?>, false)">
                        <div class="media-thumbnail">
                            <?php if ($media['file_type'] === 'video'): ?>
                                <video src="<?php echo $media['file_path']; ?>" muted preload="metadata"></video>
                                <div class="video-overlay">
                                    <i class="fas fa-play-circle"></i>
                                </div>
                            <?php else: ?>
                                <img src="<?php echo $media['thumbnail_path'] ?: $media['file_path']; ?>" 
                                     alt="<?php echo htmlspecialchars($media['title']); ?>" 
                                     loading="lazy">
                            <?php endif; ?>
                        </div>
                        
                        <div class="media-info">
                            <?php if ($media['category_name']): ?>
                                <div class="media-category" style="background-color: <?php echo $media['category_color'] ?: '#ff6b6b'; ?>">
                                    <i class="<?php echo $media['category_icon'] ?: 'fas fa-folder'; ?>"></i>
                                    <?php echo htmlspecialchars($media['category_name']); ?>
                                </div>
                            <?php endif; ?>
                            
                            <div class="media-title"><?php echo htmlspecialchars($media['title']); ?></div>
                            
                            <?php if ($media['description']): ?>
                                <div class="media-description"><?php echo htmlspecialchars(substr($media['description'], 0, 100)) . (strlen($media['description']) > 100 ? '...' : ''); ?></div>
                            <?php endif; ?>
                            
                            <div class="media-meta">
                                <div class="media-date">
                                    <i class="fas fa-calendar"></i>
                                    <?php echo time_ago($media['upload_date']); ?>
                                </div>
                                <div class="media-actions">
                                    <div class="media-views">
                                        <i class="fas fa-eye"></i> <?php echo $media['view_count']; ?>
                                    </div>
                                    <div class="media-likes">
                                        <?php if ($isLoggedIn && can_like_photos()): ?>
                                            <form method="POST" style="display: inline;" onclick="event.stopPropagation();">
                                                <input type="hidden" name="photo_id" value="<?php echo $media['id']; ?>">
                                                <button type="submit" name="toggle_like" class="like-btn <?php echo $media['user_liked'] ? 'liked' : ''; ?>">
                                                    <i class="fas fa-heart"></i>
                                                </button>
                                            </form>
                                        <?php else: ?>
                                            <i class="fas fa-heart" style="color: #ccc;"></i>
                                        <?php endif; ?>
                                        <span><?php echo $media['likes_count']; ?></span>
                                    </div>
                                    <div class="media-comments">
                                        <button class="comment-btn" onclick="event.stopPropagation(); toggleComments(<?php echo $media['id']; ?>)">
                                            <i class="fas fa-comment"></i>
                                        </button>
                                        <span><?php echo $media['comments_count']; ?></span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Comments Section -->
                            <div id="comments-<?php echo $media['id']; ?>" class="media-interactions" style="display: none;">
                                <?php if ($isLoggedIn && can_comment()): ?>
                                    <form method="POST" class="comment-form" onclick="event.stopPropagation();">
                                        <input type="hidden" name="photo_id" value="<?php echo $media['id']; ?>">
                                        <input type="text" name="comment_text" class="comment-input" placeholder="Add a comment..." required>
                                        <button type="submit" name="add_comment" class="comment-submit">Post</button>
                                    </form>
                                <?php elseif ($isLoggedIn): ?>
                                    <p style="text-align: center; color: #666; font-style: italic;">
                                        Your account type cannot comment on photos.
                                    </p>
                                <?php else: ?>
                                    <p style="text-align: center; color: #666; font-style: italic;">
                                        <a href="login.php" style="color: #ff6b6b;">Login</a> to like and comment
                                    </p>
                                <?php endif; ?>
                                
                                <!-- Display Comments -->
                                <div class="comments-list">
                                    <?php
                                    $comments_query = "SELECT c.*, u.username FROM comments c 
                                                      LEFT JOIN users u ON c.user_id = u.id 
                                                      WHERE c.photo_id = ? 
                                                      ORDER BY c.created_at DESC LIMIT 5";
                                    $comments_stmt = $conn->prepare($comments_query);
                                    $comments_stmt->bind_param("i", $media['id']);
                                    $comments_stmt->execute();
                                    $comments_result = $comments_stmt->get_result();
                                    
                                    while ($comment = $comments_result->fetch_assoc()):
                                    ?>
                                        <div class="comment">
                                            <div class="comment-avatar">
                                                <?php echo strtoupper(substr($comment['username'] ?: 'A', 0, 1)); ?>
                                            </div>
                                            <div class="comment-content">
                                                <div class="comment-author"><?php echo htmlspecialchars($comment['username'] ?: 'Anonymous'); ?></div>
                                                <div class="comment-text"><?php echo htmlspecialchars($comment['comment_text']); ?></div>
                                                <div class="comment-date"><?php echo time_ago($comment['created_at']); ?></div>
                                            </div>
                                        </div>
                                    <?php endwhile; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php 
                $media_index++;
                endwhile; 
                ?>
            </div>
        <?php else: ?>
            <div class="no-media">
                <i class="fas fa-camera"></i>
                <h3>No Media Yet</h3>
                <p>Beautiful moments are waiting to be captured and shared!</p>
            </div>
        <?php endif; ?>
    </section>

    <!-- Private Gallery -->
    <?php if ($isLoggedIn && can_view_private_photos() && $privateMedia && $privateMedia->num_rows > 0): ?>
    <section id="private-gallery" class="container">
        <div class="private-section">
            <div class="private-header">
                <div class="private-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <h2 class="section-title">Private Collection</h2>
                <p style="color: white; opacity: 0.9;">Personal memories for close ones</p>
            </div>
            
            <div class="media-grid">
                <?php 
                $private_index = 0;
                $privateMediaArray = [];
                while ($media = $privateMedia->fetch_assoc()): 
                    $privateMediaArray[] = $media;
                ?>
                    <div class="media-card" onclick="showMedia(<?php echo $private_index; ?>, true)">
                        <div class="media-thumbnail">
                            <?php if ($media['file_type'] === 'video'): ?>
                                <video src="<?php echo $media['file_path']; ?>" muted preload="metadata"></video>
                                <div class="video-overlay">
                                    <i class="fas fa-play-circle"></i>
                                </div>
                            <?php else: ?>
                                <img src="<?php echo $media['thumbnail_path'] ?: $media['file_path']; ?>" 
                                     alt="<?php echo htmlspecialchars($media['title']); ?>" 
                                     loading="lazy">
                            <?php endif; ?>
                        </div>
                        
                        <div class="media-info">
                            <?php if ($media['category_name']): ?>
                                <div class="media-category" style="background-color: <?php echo $media['category_color'] ?: '#ff6b6b'; ?>">
                                    <i class="<?php echo $media['category_icon'] ?: 'fas fa-folder'; ?>"></i>
                                    <?php echo htmlspecialchars($media['category_name']); ?>
                                </div>
                            <?php endif; ?>
                            
                            <div class="media-title"><?php echo htmlspecialchars($media['title']); ?></div>
                            
                            <?php if ($media['description']): ?>
                                <div class="media-description"><?php echo htmlspecialchars(substr($media['description'], 0, 100)) . (strlen($media['description']) > 100 ? '...' : ''); ?></div>
                            <?php endif; ?>
                            
                            <div class="media-meta">
                                <div class="media-date">
                                    <i class="fas fa-calendar"></i>
                                    <?php echo time_ago($media['upload_date']); ?>
                                </div>
                                <div class="media-actions">
                                    <div class="media-views">
                                        <i class="fas fa-eye"></i> <?php echo $media['view_count']; ?>
                                    </div>
                                    <div class="media-likes">
                                        <?php if (can_like_photos()): ?>
                                            <form method="POST" style="display: inline;" onclick="event.stopPropagation();">
                                                <input type="hidden" name="photo_id" value="<?php echo $media['id']; ?>">
                                                <button type="submit" name="toggle_like" class="like-btn <?php echo $media['user_liked'] ? 'liked' : ''; ?>">
                                                    <i class="fas fa-heart"></i>
                                                </button>
                                            </form>
                                        <?php else: ?>
                                            <i class="fas fa-heart" style="color: #ccc;"></i>
                                        <?php endif; ?>
                                        <span><?php echo $media['likes_count']; ?></span>
                                    </div>
                                    <div class="media-comments">
                                        <button class="comment-btn" onclick="event.stopPropagation(); toggleComments(<?php echo $media['id']; ?>)">
                                            <i class="fas fa-comment"></i>
                                        </button>
                                        <span><?php echo $media['comments_count']; ?></span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Comments Section -->
                            <div id="comments-<?php echo $media['id']; ?>" class="media-interactions" style="display: none;">
                                <?php if (can_comment()): ?>
                                    <form method="POST" class="comment-form" onclick="event.stopPropagation();">
                                        <input type="hidden" name="photo_id" value="<?php echo $media['id']; ?>">
                                        <input type="text" name="comment_text" class="comment-input" placeholder="Add a comment..." required>
                                        <button type="submit" name="add_comment" class="comment-submit">Post</button>
                                    </form>
                                <?php endif; ?>
                                
                                <!-- Display Comments -->
                                <div class="comments-list">
                                    <?php
                                    $comments_query = "SELECT c.*, u.username FROM comments c 
                                                      LEFT JOIN users u ON c.user_id = u.id 
                                                      WHERE c.photo_id = ? 
                                                      ORDER BY c.created_at DESC LIMIT 5";
                                    $comments_stmt = $conn->prepare($comments_query);
                                    $comments_stmt->bind_param("i", $media['id']);
                                    $comments_stmt->execute();
                                    $comments_result = $comments_stmt->get_result();
                                    
                                    while ($comment = $comments_result->fetch_assoc()):
                                    ?>
                                        <div class="comment">
                                            <div class="comment-avatar">
                                                <?php echo strtoupper(substr($comment['username'] ?: 'A', 0, 1)); ?>
                                            </div>
                                            <div class="comment-content">
                                                <div class="comment-author"><?php echo htmlspecialchars($comment['username'] ?: 'Anonymous'); ?></div>
                                                <div class="comment-text"><?php echo htmlspecialchars($comment['comment_text']); ?></div>
                                                <div class="comment-date"><?php echo time_ago($comment['created_at']); ?></div>
                                            </div>
                                        </div>
                                    <?php endwhile; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php 
                $private_index++;
                endwhile; 
                ?>
            </div>
        </div>
    </section>
    <?php elseif (!$isLoggedIn): ?>
    <section id="private-gallery" class="container">
        <div class="private-section">
            <div class="private-header">
                <div class="private-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <h2 class="section-title">Private Collection</h2>
                <p style="color: white; opacity: 0.9;">Personal memories - <a href="login.php" style="color: #fbbf24;">Login to View</a></p>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- Media Modal -->
    <div id="mediaModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            
            <!-- Navigation Buttons -->
            <button id="modalPrevBtn" class="modal-nav-btn modal-prev" onclick="prevMedia()">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button id="modalNextBtn" class="modal-nav-btn modal-next" onclick="nextMedia()">
                <i class="fas fa-chevron-right"></i>
            </button>
            
            <!-- Counter -->
            <div class="modal-counter" id="modalCounter">1 / 1</div>
            
            <div class="modal-media-container">
                <img id="modalImg" class="modal-image" src="" alt="" onclick="toggleZoom(this)" style="display: none;">
                <video id="modalVideo" class="modal-video" controls style="display: none;"></video>
            </div>
            
            <div class="modal-info">
                <div id="modalTitle" class="modal-title"></div>
                <div class="modal-meta">
                    <div><i class="fas fa-calendar"></i> <span id="modalDate"></span></div>
                    <div><i class="fas fa-eye"></i> <span id="modalViews"></span> views</div>
                    <div><i class="fas fa-heart"></i> <span id="modalLikes"></span> likes</div>
                    <div><i class="fas fa-comment"></i> <span id="modalComments"></span> comments</div>
                </div>
                <div id="modalDescription" class="modal-description"></div>
                
                <!-- Modal Comments Section -->
                <div class="media-interactions">
                    <?php if ($isLoggedIn && can_comment()): ?>
                        <form method="POST" class="comment-form" id="modalCommentForm">
                            <input type="hidden" name="photo_id" id="modalPhotoId" value="">
                            <input type="text" name="comment_text" class="comment-input" placeholder="Add a comment..." required>
                            <button type="submit" name="add_comment" class="comment-submit">Post</button>
                        </form>
                    <?php elseif ($isLoggedIn): ?>
                        <p style="text-align: center; color: #666; font-style: italic; padding: 1rem;">
                            Your account type cannot comment on photos.
                        </p>
                    <?php endif; ?>
                    
                    <div id="modalCommentsList" class="comments-list">
                        <!-- Comments will be loaded dynamically -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <p>&copy; <?php echo date('Y'); ?> Bikram Thapa. All rights reserved.</p>
        <p style="margin-top: 0.5rem; opacity: 0.8;">
            <?php if ($isLoggedIn): ?>
                Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>! | 
                <?php if ($_SESSION['role'] === 'admin'): ?>
                    <a href="admin.php" style="color: white; text-decoration: none;">Admin Panel</a> | 
                <?php endif; ?>
                <a href="logout.php" style="color: white; text-decoration: none;">Logout</a>
            <?php else: ?>
                <a href="login.php" style="color: white; text-decoration: none;">Login</a>
            <?php endif; ?>
        </p>
    </footer>

    <script>
        // Media data arrays
        let allMedia = <?php echo json_encode($allMedia ?? []); ?>;
        let privateMedia = <?php echo json_encode($privateMediaArray ?? []); ?>;
        let currentMediaIndex = 0;
        let isPrivateGallery = false;
        let currentMediaArray = [];

        // Simple slider implementation
        let currentSlide = 0;
        const totalSlides = <?php echo count($banner_slides); ?>;

        function changeSlide(direction) {
            currentSlide += direction;
            if (currentSlide < 0) currentSlide = totalSlides - 1;
            if (currentSlide >= totalSlides) currentSlide = 0;
            updateSlider();
        }

        function goToSlide(index) {
            currentSlide = index;
            updateSlider();
        }

        function updateSlider() {
            const wrapper = document.getElementById('slidesWrapper');
            wrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
            
            // Update dots
            document.querySelectorAll('.slider-dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === currentSlide);
            });
        }

        // Auto-play slider
        if (totalSlides > 1) {
            setInterval(() => changeSlide(1), 5000);
        }

        // Media modal functions
        function showMedia(index, isPrivate = false) {
            currentMediaIndex = index;
            isPrivateGallery = isPrivate;
            currentMediaArray = isPrivate ? privateMedia : allMedia;
            
            const media = currentMediaArray[index];
            if (!media) return;
            
            // Update view count
            updateViewCount(media.id);
            
            // Display media
            displayMediaInModal(media);
            
            // Show modal
            document.getElementById('mediaModal').style.display = 'block';
            document.body.style.overflow = 'hidden';
            
            updateNavigationButtons();
        }

        function updateViewCount(mediaId) {
            fetch(`api.php?action=get_photo_details&id=${mediaId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update the view count in modal
                        document.getElementById('modalViews').textContent = data.photo.view_count;
                    }
                })
                .catch(error => console.error('Error updating view count:', error));
        }

        function displayMediaInModal(media) {
            const modalImg = document.getElementById('modalImg');
            const modalVideo = document.getElementById('modalVideo');
            
            // Check if it's a video
            const isVideo = media.file_type === 'video' || /\.(mp4|webm|ogg|mov|avi)$/i.test(media.file_path);
            
            if (isVideo) {
                modalImg.style.display = 'none';
                modalVideo.style.display = 'block';
                modalVideo.src = media.file_path;
                modalVideo.load();
                modalVideo.play().catch(e => console.log('Click to play'));
            } else {
                modalVideo.style.display = 'none';
                modalVideo.pause();
                modalVideo.src = '';
                modalImg.style.display = 'block';
                modalImg.src = media.file_path;
                modalImg.classList.remove('zoomed');
            }
            
            // Update info
            document.getElementById('modalTitle').textContent = media.title;
            document.getElementById('modalDate').textContent = media.upload_date ? timeAgo(media.upload_date) : '';
            document.getElementById('modalViews').textContent = media.view_count;
            document.getElementById('modalLikes').textContent = media.likes_count;
            document.getElementById('modalComments').textContent = media.comments_count;
            document.getElementById('modalDescription').textContent = media.description || 'No description available.';
            
            const modalPhotoId = document.getElementById('modalPhotoId');
            if (modalPhotoId) {
                modalPhotoId.value = media.id;
            }
            
            loadModalComments(media.id);
        }

        function updateNavigationButtons() {
            const prevBtn = document.getElementById('modalPrevBtn');
            const nextBtn = document.getElementById('modalNextBtn');
            const counter = document.getElementById('modalCounter');
            
            prevBtn.style.display = currentMediaIndex > 0 ? 'block' : 'none';
            nextBtn.style.display = currentMediaIndex < currentMediaArray.length - 1 ? 'block' : 'none';
            counter.textContent = `${currentMediaIndex + 1} / ${currentMediaArray.length}`;
        }

        function nextMedia() {
            if (currentMediaIndex < currentMediaArray.length - 1) {
                showMedia(currentMediaIndex + 1, isPrivateGallery);
            }
        }

        function prevMedia() {
            if (currentMediaIndex > 0) {
                showMedia(currentMediaIndex - 1, isPrivateGallery);
            }
        }

        function toggleZoom(img) {
            img.classList.toggle('zoomed');
        }

        function closeModal() {
            const modalVideo = document.getElementById('modalVideo');
            modalVideo.pause();
            modalVideo.src = '';
            document.getElementById('mediaModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Time ago function
        function timeAgo(dateString) {
            const date = new Date(dateString);
            const now = new Date();
            const seconds = Math.floor((now - date) / 1000);
            
            const intervals = [
                { label: 'year', seconds: 31536000 },
                { label: 'month', seconds: 2592000 },
                { label: 'week', seconds: 604800 },
                { label: 'day', seconds: 86400 },
                { label: 'hour', seconds: 3600 },
                { label: 'minute', seconds: 60 },
                { label: 'second', seconds: 1 }
            ];
            
            for (const interval of intervals) {
                const count = Math.floor(seconds / interval.seconds);
                if (count > 0) {
                    return count === 1 ? `${count} ${interval.label} ago` : `${count} ${interval.label}s ago`;
                }
            }
            return 'just now';
        }

        function loadModalComments(mediaId) {
            fetch(`api.php?action=get_comments&photo_id=${mediaId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const commentsContainer = document.getElementById('modalCommentsList');
                        commentsContainer.innerHTML = '';
                        
                        if (data.comments.length === 0) {
                            commentsContainer.innerHTML = '<p style="text-align: center; color: #999;">No comments yet. Be the first to comment!</p>';
                        } else {
                            data.comments.forEach(comment => {
                                const commentDiv = document.createElement('div');
                                commentDiv.className = 'comment';
                                commentDiv.innerHTML = `
                                    <div class="comment-avatar">${comment.username.charAt(0).toUpperCase()}</div>
                                    <div class="comment-content">
                                        <div class="comment-author">${comment.username}</div>
                                        <div class="comment-text">${comment.comment_text}</div>
                                        <div class="comment-date">${comment.time_ago}</div>
                                    </div>
                                `;
                                commentsContainer.appendChild(commentDiv);
                            });
                        }
                    }
                })
                .catch(error => console.error('Error loading comments:', error));
        }

        // Toggle comments section
        function toggleComments(mediaId) {
            const commentsDiv = document.getElementById('comments-' + mediaId);
            if (commentsDiv.style.display === 'none' || commentsDiv.style.display === '') {
                commentsDiv.style.display = 'block';
            } else {
                commentsDiv.style.display = 'none';
            }
        }

        // Keyboard navigation
        document.addEventListener('keydown', function(event) {
            const modal = document.getElementById('mediaModal');
            if (modal.style.display === 'block') {
                switch(event.key) {
                    case 'Escape':
                        closeModal();
                        break;
                    case 'ArrowLeft':
                        prevMedia();
                        break;
                    case 'ArrowRight':
                        nextMedia();
                        break;
                }
            }
        });

        // Close modal when clicking outside
        window.onclick = function(event) {
            const modal = document.getElementById('mediaModal');
            if (event.target === modal) {
                closeModal();
            }
        }

        // Auto-hide message alert
        const messageAlert = document.getElementById('messageAlert');
        if (messageAlert) {
            setTimeout(() => {
                messageAlert.style.animation = 'slideOut 0.3s ease';
                setTimeout(() => messageAlert.remove(), 300);
            }, 3000);
        }

        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        console.log('Gallery initialized successfully!');
    </script>
</body>
</html>