<?php
require_once __DIR__ . "/MaintenanceCheck.php";
session_start();
require "Auth/db.php";

$isLoggedIn = isset($_SESSION["user"]);

if (!$isLoggedIn) {
    header("Location: Index.php");
    exit;
}

$userId = (int)$_SESSION["user"]["id"];

$username = $_SESSION["user"]["username"] ?? "Guest";

$avatar = "Assets/Logo.png";

if (!empty($_SESSION["user"]["avatar"]) && !empty($_SESSION["user"]["discord_id"])) {
    $avatar = "https://cdn.discordapp.com/avatars/" .
        $_SESSION["user"]["discord_id"] . "/" .
        $_SESSION["user"]["avatar"] . ".png";
}

$stmt = $pdo->prepare("
    SELECT m.id, m.title, m.banner, m.logo, m.rating, m.release_year, w.type, w.created_at
    FROM user_watchlist w
    INNER JOIN media_movies m ON w.movie_id = m.id
    WHERE w.user_id = ? AND w.type = 'movie'

    UNION ALL

    SELECT s.id, s.title, s.banner, s.logo, s.rating, s.release_year, w.type, w.created_at
    FROM user_watchlist w
    INNER JOIN media_series s ON w.movie_id = s.id
    WHERE w.user_id = ? AND w.type = 'series'

    ORDER BY created_at DESC
");
$stmt->execute([$userId, $userId]);
$movies = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<title>Watchlist - Rewire</title>
<link rel="icon" type="image/png" href="Assets/Logo.png">
<style>
* {
    box-sizing: border-box;
}

body {
    background:#050505;
    color:white;
    font-family:Arial,sans-serif;
    padding:40px;
}

h1 {
    margin-bottom:25px;
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:22px;
}

.card {
    text-decoration:none;
    color:white;
}

.thumb {
    width:220px;
    height:330px;
    background-size:cover;
    background-position:center;
    border-radius:12px;
    background-color:#111;
}

.title {
    margin-top:10px;
    font-weight:800;
}

.meta {
    color:#8f9aa5;
    font-size:0.8rem;
    margin-top:4px;
}

.empty {
    color:#8f9aa5;
}

.logo-img{
    height:70px;
}

.nav{
    display:flex;
    align-items:center;
    gap:25px;
}

.home-btn,
.browse-btn,
.search-icon-btn{
    background:none;
    border:none;
    color:#ccc;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:0.25s ease;
}

.home-btn:hover,
.browse-btn:hover,
.search-icon-btn:hover{
    color:#00c2ff;
    transform:scale(1.08);
}

.home-btn i,
.search-icon-btn i{
    width:22px;
    height:22px;
}

.browse-btn{
    gap:6px;
}

.browse-btn i{
    width:21px;
    height:21px;
}

.browse-arrow{
    width:16px !important;
    height:16px !important;
}

.browse-dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

.browse-menu{
    position:absolute;
    top:34px;
    left:50%;
    transform:translateX(-50%);
    display:none;
    gap:8px;
    background:rgba(8,10,13,0.97);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    padding:9px;
    box-shadow:0 12px 35px rgba(0,0,0,0.55);
    z-index:999;
}

.browse-menu.active{
    display:flex;
}

.browse-menu a{
    width:38px;
    height:38px;
    border-radius:10px;
    color:#c8d0d8;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.browse-menu a:hover{
    background:rgba(0,194,255,0.12);
    color:#00c2ff;
}

.browse-menu i{
    width:20px;
    height:20px;
}

.profile-menu.active{
    display:block;
}

.profile-menu-name{
    color:white;
    font-size:0.85rem;
    font-weight:bold;
    padding:8px 10px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    margin-bottom:8px;
}

.profile-menu a{
    display:block;
    padding:9px 10px;
    border-radius:8px;
    color:#00c2ff;
    text-decoration:none;
    font-size:0.9rem;
    font-weight:bold;
}

.profile-menu a:hover{
    background:rgba(0,194,255,0.12);
}

/* PAGE */

body{
    background:#050505;
    color:white;
    font-family:Arial,sans-serif;
    margin:0;
    padding-top:120px;
}

.watchlist-page{
    padding:0 40px 50px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    padding: 0 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}

.right {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-right: 20px;
}

.profile-dropdown {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.25);
    display: block;
}

.profile-menu {
    position: absolute;
    top: 48px;
    right: 0;
    width: 170px;
    background: rgba(8,10,13,0.96);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 10px;
    display: none;
    box-shadow: 0 12px 35px rgba(0,0,0,0.55);
}

.browse-menu {
    position: absolute;
    top: 42px;
    right: 0;
    width: 320px;
    background: rgba(8,10,13,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 18px 14px;
    display: none;
    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
    z-index: 999;
}

.browse-menu.active {
    display: block;
}

.browse-title {
    text-align: center;
    font-weight: 900;
    margin-bottom: 20px;
}

.browse-section-label {
    color: #8f9aa5;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 16px 0 10px;
}

.browse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.browse-personal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.browse-menu a {
    width: auto;
    height: 76px;
    padding: 0;
    border-radius: 12px;
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 800;
}

.browse-menu a i {
    color: #00c2ff;
    width: 24px;
    height: 24px;
}

.browse-menu a:hover {
    background: rgba(0,194,255,0.10);
}

.browse-menu a {
    width: auto;
    height: 76px;
    padding: 0;
    border-radius: 12px;
    color: #ccc;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 800;
    position: relative;
    transition: 0.3s;
}

.browse-menu a i {
    color: #00c2ff;
    width: 24px;
    height: 24px;
}

.browse-menu a::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    background: #00c2ff;
    transition: 0.3s;
    border-radius: 999px;
}

.browse-menu a:hover {
    color: white;
    background: rgba(0,194,255,0.10);
}

.browse-menu a:hover::after {
    width: 55%;
}
</style>
<body>
<?php include "Preloader.php"; ?>
<div class="header">
    <div class="left">
        <img src="Assets/Logo.png" class="logo-img">
    </div>

    <div class="right">
        <div class="nav">
            <a href="Index.php" class="home-btn">
                <i data-lucide="house"></i>
            </a>
        
            <div class="browse-dropdown">
                <button type="button" class="browse-btn" onclick="toggleBrowseMenu(event)">
                    <i data-lucide="grid-2x2"></i>
                    <i data-lucide="chevron-down" class="browse-arrow"></i>
                </button>
            
                <div class="browse-menu" id="browseMenu">
                    <div class="browse-title">Browse</div>
                
                    <div class="browse-section-label">CONTENT</div>
                    <div class="browse-grid">
                        <a href="Movies/Movies.php">
                            <i data-lucide="clapperboard"></i>
                            Movies
                        </a>
                
                        <a href="Series/Series.php">
                            <i data-lucide="tv"></i>
                            TV Shows
                        </a>
                
                        <a href="PPV/PPV.php">
                            <i data-lucide="ticket"></i>
                            PPV
                        </a>
                    </div>
                
                    <div class="browse-section-label">PERSONAL</div>
                    <div class="browse-personal">
                        <a href="History.php">
                            <i data-lucide="history"></i>
                            History
                        </a>
                
                        <a href="Watchlist.php">
                            <i data-lucide="heart"></i>
                            Watchlist
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <?php if ($isLoggedIn): ?>
            <?php
                $avatar = !empty($_SESSION["user"]["avatar"])
                    ? "https://cdn.discordapp.com/avatars/" . $_SESSION["user"]["discord_id"] . "/" . $_SESSION["user"]["avatar"] . ".png"
                    : "Assets/Logo.png";
            ?>
        
            <div class="profile-dropdown" onclick="toggleProfileMenu()">
                <img src="<?php echo htmlspecialchars($avatar); ?>" class="profile-avatar">
        
                <div class="profile-menu" id="profileMenu">
                    <div class="profile-menu-name">
                        <?php echo htmlspecialchars($_SESSION["user"]["username"]); ?>
                    </div>
                
                    <?php if (!empty($_SESSION["user"]["is_admin"])): ?>
                        <a href="Admin/Dashboard.php">Admin Interface</a>
                    <?php endif; ?>
                
                    <a href="Auth/logout.php">Logout</a>
                </div>
            </div>
        <?php else: ?>
            <i data-lucide="user" class="icon" onclick="openProfile()"></i>
        <?php endif; ?>
    </div>
</div>

<div class="watchlist-page">
    <h1>Your Watchlist</h1>

    <div class="grid">
    <?php foreach ($movies as $movie): ?>
        <?php
            $link = $movie["type"] === "series"
                ? "Series/Preset.php?id=" . $movie["id"]
                : "Movies/Preset.php?id=" . $movie["id"];
    
            $thumb = !empty($movie["banner"])
                ? $movie["banner"]
                : (!empty($movie["logo"]) ? $movie["logo"] : "Assets/Logo.png");
        ?>
    
        <a class="card" href="<?php echo htmlspecialchars($link); ?>">
            <div class="thumb" style="background-image:url('<?php echo htmlspecialchars($thumb); ?>')"></div>
    
            <div class="title">
                <?php echo htmlspecialchars($movie["title"]); ?>
            </div>
    
            <div class="meta">
                ⭐ <?php echo htmlspecialchars($movie["rating"] ?? "N/A"); ?>
                · <?php echo htmlspecialchars($movie["release_year"] ?? "Unknown"); ?>
                · <?php echo $movie["type"] === "series" ? "TV Show" : "Movie"; ?>
            </div>
        </a>
    <?php endforeach; ?>

    <?php if (empty($movies)): ?>
        <div class="empty">Your Watchlist Is Empty.</div>
    <?php endif; ?>
    </div>
</div>

<script src="https://unpkg.com/lucide@latest"></script>

<script>
function renderIcons() {
    lucide.createIcons();
}

renderIcons();

function toggleProfileMenu() {
    document.getElementById("profileMenu").classList.toggle("active");
}

function toggleBrowseMenu(event) {
    event.stopPropagation();

    const menu = document.getElementById("browseMenu");

    menu.classList.toggle("active");

    renderIcons();
}

document.addEventListener("click", function(e) {

    const browseDropdown = document.querySelector(".browse-dropdown");
    const browseMenu = document.getElementById("browseMenu");

    if (browseDropdown && !browseDropdown.contains(e.target)) {
        browseMenu.classList.remove("active");
    }

    const profileDropdown = document.querySelector(".profile-dropdown");
    const profileMenu = document.getElementById("profileMenu");

    if (profileDropdown && !profileDropdown.contains(e.target)) {
        profileMenu.classList.remove("active");
    }
});
</script>
<script src="Security.js"></script>
</body>
</html>