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

require "../Auth/db.php";

$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";
}

$movieId = $_GET["id"] ?? null;

if (!$movieId) {
    die("Missing movie ID.");
}

$stmt = $pdo->prepare("SELECT * FROM media_movies WHERE id = ?");
$stmt->execute([$movieId]);
$movie = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$movie) {
    die("Movie Not Found.");
}

function youtubeEmbedUrl($url) {
    if (!$url) return "";

    preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/', $url, $matches);

    if (empty($matches[1])) return "";

    $id = $matches[1];

    return "https://www.youtube.com/embed/" . $id .
        "?autoplay=1&mute=1&controls=0&loop=1&playlist=" . $id .
        "&modestbranding=1&showinfo=0";
}

$trailerEmbed = youtubeEmbedUrl($movie["youtube_trailer_url"] ?? "");
$logoPath = !empty($movie["logo"]) ? "../" . $movie["logo"] : "../Assets/Logo.png";

$isInWatchlist = false;

if (!empty($_SESSION["user"]["id"])) {
    $watchStmt = $pdo->prepare("
        SELECT id
        FROM user_watchlist
        WHERE user_id = ? AND movie_id = ? AND type = 'movie'
        LIMIT 1
    ");
    $watchStmt->execute([$_SESSION["user"]["id"], $movie["id"]]);
    $isInWatchlist = (bool)$watchStmt->fetch();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo htmlspecialchars($movie["title"]); ?> - Rewire</title>
<link rel="icon" type="image/png" href="../Assets/Logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/lucide@latest"></script>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:#050505;
    color:white;
    overflow-x:hidden;
}

/* HEADER */
.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:82px;
    z-index:50;
    background:linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
}

.header-inner{
    height:100%;
    padding:0 35px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img{
    height:58px;
}

.header-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.icon-btn{
    width:42px;
    height:42px;
    border-radius:12px;
    border:none;
    background:rgba(255,255,255,0.08);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.profile-avatar{
    width:44px;
    height:44px;
    border-radius:12px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.18);
}

/* HERO */
.movie-hero{
    position:relative;
    min-height:78vh;
    display:flex;
    align-items:flex-end;
    padding:150px 70px 90px;
    overflow:hidden;
}

.trailer-bg{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.trailer-bg iframe{
    position:absolute;
    top:50%;
    left:50%;
    width:120vw;
    height:67.5vw;
    min-width:177.77vh;
    min-height:100vh;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(to bottom, rgba(5,5,5,0.15), rgba(5,5,5,0.75) 78%, #050505 100%),
        linear-gradient(to right, rgba(5,5,5,0.92), rgba(5,5,5,0.45) 42%, rgba(5,5,5,0.1));
}

.movie-info{
    position:relative;
    z-index:2;
    width:100%;
    max-width:620px;
}

.title-logo{
    max-width:260px;
    max-height:130px;
    object-fit:contain;
    margin-bottom:22px;
}

.movie-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    color:#c8d0d8;
    font-size:0.95rem;
    margin-bottom:18px;
}

.movie-meta span{
    display:flex;
    align-items:center;
    line-height:1;
}

.movie-meta .star{
    color:#00c2ff;
    font-weight:900;
}

.description{
    color:#e0e0e0;
    line-height:1.7;
    font-size:1rem;
    margin-bottom:28px;
}

.hero-buttons{
    display:flex;
    align-items:center;
    gap:14px;
}

.play-btn,
.circle-btn,
.dark-btn{
    height:50px;
    border:none;
    border-radius:999px;
    font-weight:800;
    cursor:pointer;
    transition:0.25s ease;
}

.play-btn{
    padding:0 28px;
    background:white;
    color:black;
    display:flex;
    align-items:center;
    gap:10px;
}

.circle-btn{
    width:50px;
    background:rgba(255,255,255,0.1);
    color:white;
    border:1px solid rgba(255,255,255,0.18);
}

.dark-btn{
    padding:0 22px;
    background:rgba(255,255,255,0.1);
    color:white;
    border:1px solid rgba(255,255,255,0.18);
    display:flex;
    align-items:center;
    gap:9px;
}

.play-btn:hover,
.circle-btn:hover,
.dark-btn:hover{
    transform:translateY(-2px) scale(1.04);
}

/* SECTIONS */
.movie-section{
    max-width:1400px;
    margin:0 auto;
    padding:35px 70px 70px;
}

.section-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.45rem;
    margin-bottom:24px;
}

.section-title::before{
    content:"";
    width:4px;
    height:24px;
    background:#00c2ff;
}

/* CATEGORY CHIPS */
.category-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:45px;
}

.category-chip{
    padding:11px 18px;
    border-radius:999px;
    background:#071014;
    border:1px solid rgba(0,194,255,0.18);
    color:#c8d0d8;
    font-weight:800;
}

@media(max-width:900px){
    .movie-hero{
        padding:130px 25px 70px;
    }

    .movie-section{
        padding:30px 25px 50px;
    }

    .actors-grid{
        grid-template-columns:1fr;
    }
}

.play-btn{
    text-decoration:none;
}

.circle-btn,
.plus-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plus-btn i {
    width: 24px;
    height: 24px;
}

.circle-btn,
.watchlist-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watchlist-btn i {
    width: 24px;
    height: 24px;
    transition: 0.25s ease;
}

.watchlist-btn.added {
    background: rgba(255,59,59,0.16);
    border-color: rgba(255,59,59,0.45);
    color: #ff6b6b;
}

.watchlist-btn:hover i {
    transform: rotate(90deg) scale(1.1);
}
</style>
</head>

<body>
<?php include "../Preloader.php"; ?>

<header class="header">
    <div class="header-inner">
        <a href="../Index.php" class="logo">
            <img src="../Assets/Logo.png">
        </a>
    </div>
</header>

<section class="movie-hero">

    <div class="trailer-bg">
        <iframe
            src="<?php echo htmlspecialchars($trailerEmbed); ?>"
            frameborder="0"
            allow="autoplay; encrypted-media"
            allowfullscreen>
        </iframe>
    </div>

    <div class="hero-overlay"></div>

    <div class="movie-info">

        <img src="<?php echo htmlspecialchars($logoPath); ?>" class="title-logo">

        <div class="movie-meta">
            <span class="star">★&nbsp;<?php echo htmlspecialchars($movie["rating"] ?? "N/A"); ?></span>
            <span><?php echo htmlspecialchars($movie["release_year"] ?? "Unknown"); ?></span>
            <span>Duration - <?php echo htmlspecialchars($movie["duration"] ?? "Unknown"); ?></span>
        </div>

        <div class="description">
            <?php echo nl2br(htmlspecialchars($movie["description"] ?? "")); ?>
        </div>
        <div class="hero-buttons">
        
            <a href="Player.php?id=<?php echo $movie["id"]; ?>" class="play-btn">
                <i data-lucide="play"></i>
                Play
            </a>
        
            <a
                class="circle-btn watchlist-btn <?php echo $isInWatchlist ? 'added' : ''; ?>"
                href="../WatchlistToggle.php?id=<?php echo $movie["id"]; ?>&type=movie"
                title="<?php echo $isInWatchlist ? 'Remove from Watchlist' : 'Add To Watchlist'; ?>"
            >
                <i data-lucide="<?php echo $isInWatchlist ? 'x' : 'plus'; ?>"></i>
            </a>
        </div>
    </div>
</section>

<section class="movie-section">

    <h2 class="section-title">Categories</h2>

    <div class="category-grid">
        <div class="category-chip">
            <?php echo htmlspecialchars($movie["category"] ?? "Uncategorized"); ?>
        </div>
    </div>
</section>

<script>
lucide.createIcons();
</script>
<script src="../Security.js"></script>
</body>
</html>