<?php
// FORCER LE NAVIGATEUR A IGNORER LE CACHE
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

$vid = isset($_GET['v']) ? htmlspecialchars($_GET['v']) : '';
$og_title = "Night-Tube PC";
$og_desc = "Découvrez Night-Tube, votre application vidéo sans limite sur ordinateur.";
$og_image = "https://night-tube.com/nt.png";
$og_url = "https://night-tube.com/pc.php";

if ($vid) {
    $og_title = "Regarde cette vidéo sur Night-Tube !";
    $og_desc = "Rejoins-moi sur Night-Tube pour regarder cette vidéo sans coupure.";
    $og_image = "https://img.youtube.com/vi/" . $vid . "/hqdefault.jpg";
    $og_url = "https://night-tube.com/pc.php?v=" . $vid;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Night Tube PC</title>
    
    <meta property="og:title" content="<?php echo $og_title; ?>" />
    <meta property="og:description" content="<?php echo $og_desc; ?>" />
    <meta property="og:image" content="<?php echo $og_image; ?>" />
    <meta property="og:url" content="<?php echo $og_url; ?>" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    
    <!-- LIENS ABSOLUS POUR WINDEV -->
    <link rel="icon" type="image/png" href="https://night-tube.com/nt.png">
    <link rel="apple-touch-icon" href="https://night-tube.com/nt.png">
    <link rel="manifest" href="https://night-tube.com/manifest.json?v=18">
    
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="https://www.paypal.com/sdk/js?client-id=AZPvRJgvi1uQ9Vz4J6VXlIFMaSpk6sY3K49n1XYjgOQdEVXMHMeJaBfglqZMvGi8XCBeTluei7K_uj8F&currency=EUR"></script>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    
    <link rel="stylesheet" href="https://night-tube.com/style.css?v=5.1">

    <style>
        /* 1. BODY & SCROLLBARS PC */
        body {
            display: flex;
            flex-direction: column;
            overflow: hidden !important;
            background-color: #0f0f0f;
        }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #717171; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

        /* 2. HEADER TOP BAR */
        .header {
            position: fixed !important;
            top: 0 !important; left: 0 !important;
            width: 100% !important; height: 60px !important;
            z-index: 2000 !important;
            background: #0f0f0f !important;
            display: flex !important; align-items: center !important;
            padding: 0 20px !important; box-sizing: border-box !important;
        }
        .header-top { display: flex; width: 100%; align-items: center; justify-content: space-between; }
        
        .search-container {
            position: absolute; left: 50%; transform: translateX(-50%);
            width: 50%; max-width: 650px; top: 10px; margin: 0 !important;
        }
        .search-box {
            display: flex; background: #121212; border: 1px solid #303030; border-radius: 40px; overflow: hidden;
        }
        .search-box input {
            flex: 1; background: transparent; border: none; color: #fff; padding: 10px 20px; font-size: 16px; outline: none;
        }
        .search-box .search-btn {
            background: #222; border: none; border-left: 1px solid #303030; padding: 0 20px; cursor: pointer;
        }

        /* 3. MENU LATÉRAL GAUCHE FIXE */
        .sidebar {
            position: fixed !important;
            top: 60px !important; left: 0 !important;
            width: 240px !important; height: calc(100vh - 60px) !important;
            background: #0f0f0f !important; transform: none !important;
            display: flex !important; flex-direction: column;
            overflow-y: auto; z-index: 1000 !important; padding-top: 15px;
        }
        .sidebar-header, .sidebar-backdrop, .lang-switch { display: none !important; }
        .sidebar-item { padding: 12px 20px !important; margin: 0 10px; border-radius: 10px; cursor: pointer; }
        .sidebar-item:hover { background: #272727 !important; }

        /* 4. NETTOYAGE DES ÉLÉMENTS MOBILES */
        .tabs { display: none !important; }
        button[onclick="ouvrirMenuSidebar()"] { display: none !important; }
        .swipe-actions { display: none !important; }
        .swipe-content { transform: none !important; pointer-events: auto !important; }

        /* 5. ZONES DE CONTENU (Grille) */
        .app-view {
            position: fixed !important;
            top: 60px !important; left: 240px !important;
            width: calc(100% - 240px) !important; height: calc(100vh - 60px) !important;
            overflow-y: auto !important; padding: 30px !important;
            background: #0f0f0f !important; box-sizing: border-box;
        }
        #home-feed, #res, #favorites-list, #liked-list, #playlists-list {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
            gap: 30px 15px !important; align-items: start;
        }
        
        .video-card { border: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; background: transparent !important; }
        .thumbnail-container { width: 100%; aspect-ratio: 16/9; height: auto !important; border-radius: 12px; overflow: hidden; }
        .thumbnail-container img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
        .thumbnail-container:hover img { transform: scale(1.05); }
        .details { padding: 12px 0 0 0 !important; align-items: flex-start !important; }
        .info .title { font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important; margin-bottom: 4px; }
        .info .channel, .info .meta-info { font-size: 14px !important; color: #aaa !important; }

        /* 6. PAGE DE LECTURE - PLEIN ÉCRAN PC */
        #watch-view[style*="display: block"]:not(.mini-mode) {
            display: grid !important; position: fixed !important;
            top: 60px !important; left: 240px !important;
            width: calc(100% - 240px) !important; height: calc(100vh - 60px) !important;
            background: #0f0f0f !important; overflow-y: auto !important;
            padding: 24px 24px 24px 40px !important; box-sizing: border-box;
            grid-template-columns: 1fr 400px;
            grid-template-rows: auto 1fr;
            grid-template-areas: "player suggestions" "details suggestions";
            gap: 0 24px;
            z-index: 1000 !important;
        }
        #watch-view:not(.mini-mode) .sticky-player-wrapper {
            grid-area: player; position: relative !important; width: 100% !important;
            height: auto !important; padding: 0 !important; background: transparent !important;
        }
        #watch-view:not(.mini-mode) .player-container {
            position: relative !important; width: 100% !important;
            padding-bottom: 56.25% !important;
            height: 0 !important; border-radius: 12px; overflow: hidden; background: #000;
        }
        #watch-view:not(.mini-mode) .player-container iframe, 
        #watch-view:not(.mini-mode) .player-container #yt-player-div {
            position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
        }
        #watch-view:not(.mini-mode) .watch-details { grid-area: details; padding: 20px 0 !important; }
        #watch-view:not(.mini-mode) .close-player-btn, 
        #watch-view:not(.mini-mode) .expand-player-btn { display: none !important; }

        /* 7. CORRECTION DES SUGGESTIONS PC */
        #watch-view:not(.mini-mode) .suggestions-section { grid-area: suggestions; padding: 0 !important; margin-top: 0 !important; }
        #watch-view:not(.mini-mode) #suggestions-list { display: flex; flex-direction: column; gap: 15px; }
        
        #watch-view:not(.mini-mode) #suggestions-list .video-card {
            display: flex !important; flex-direction: row !important; gap: 10px !important; margin-bottom: 0 !important; align-items: flex-start !important; cursor: pointer;
        }
        #watch-view:not(.mini-mode) #suggestions-list .swipe-content { display: flex !important; flex-direction: row !important; gap: 10px !important; width: 100% !important; }
        #watch-view:not(.mini-mode) #suggestions-list .thumbnail-container { width: 168px !important; min-width: 168px !important; height: 94px !important; margin: 0 !important; border-radius: 8px; }
        #watch-view:not(.mini-mode) #suggestions-list .details { display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; gap: 4px !important; }
        #watch-view:not(.mini-mode) #suggestions-list .info .title { font-size: 14px !important; line-height: 1.3 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        #watch-view:not(.mini-mode) #suggestions-list .avatar,
        #watch-view:not(.mini-mode) #suggestions-list .dots-btn { display: none !important; }

        /* 8. MODE MINI-PLAYER PC (EN BAS À DROITE) */
        #watch-view.mini-mode {
            display: block !important; position: fixed !important;
            bottom: 30px !important; right: 30px !important; top: auto !important; left: auto !important;
            width: 350px !important; height: 197px !important;
            background: #000 !important; padding: 0 !important;
            z-index: 9999 !important; border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.9); overflow: hidden !important;
        }
        #watch-view.mini-mode .watch-details, 
        #watch-view.mini-mode .suggestions-section { display: none !important; }
        #watch-view.mini-mode .sticky-player-wrapper { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; padding: 0 !important; }
        #watch-view.mini-mode .player-container { width: 100% !important; height: 100% !important; padding: 0 !important; border-radius: 0 !important; }
        #watch-view.mini-mode .player-container iframe, 
        #watch-view.mini-mode .player-container #yt-player-div { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
        #watch-view.mini-mode .mini-overlay { display: block !important; position: absolute; top:0; left:0; width:100%; height:100%; z-index: 10; cursor: pointer; }
        #watch-view.mini-mode .close-player-btn { display: flex !important; z-index: 20 !important; top: 5px !important; right: 5px !important; transform: scale(0.8); }
        #watch-view.mini-mode .expand-player-btn { display: flex !important; z-index: 20 !important; top: 5px !important; left: 5px !important; transform: scale(0.8); }

        /* ========================================================= */
        /* 9. NOUVEAUTÉ : CURSEUR SOURIS & GLISSER-DÉPOSER PLAYLISTS */
        /* ========================================================= */

        /* A. Assure que la souris devient une petite 'main' partout */
        .video-card, .video-card-compact, .thumbnail-container img, .logo-area, .sidebar-item { 
            cursor: pointer !important; 
        }

        /* B. Cache définitivement les vieux boutons flèches moches de app_beta.js */
        #playlists-list .video-card-compact > div[style*="flex-direction:column"],
        #suggestions-list .video-card-compact > div[style*="flex-direction:column"] {
            display: none !important;
        }

        /* C. Crée l'icône de la poignée de déplacement (6 points verticaux) */
        #playlists-list .video-card-compact::after,
        #suggestions-list .video-card-compact::after {
            content: '⋮⋮';
            font-size: 24px;
            color: #777;
            margin-left: auto;
            padding-right: 15px;
            padding-left: 15px;
            display: flex;
            align-items: center;
            cursor: grab;
            letter-spacing: -2px;
        }
        #playlists-list .video-card-compact:active::after,
        #suggestions-list .video-card-compact:active::after {
            cursor: grabbing;
        }
    </style>
</head>
<body>

<div id="auth-view" style="display:none;">
    <div class="auth-box" id="login-box">
        <button class="auth-close" onclick="document.getElementById('auth-view').style.display='none';">&times;</button>
        <div class="auth-title" data-lang="login_title">Log In</div>
        <div id="login-error" class="auth-error"></div>
        <div id="g_id_onload" data-client_id="1084347352522-nnbj65poljef1tqhod0v7s5t5vplhsl6.apps.googleusercontent.com" data-callback="handleGoogleLogin" data-auto_prompt="false"></div>
        <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="filled_black" data-text="continue_with" data-size="large" data-logo_alignment="left" style="display: flex; justify-content: center; margin-bottom: 15px; width: 100%;"></div>
        <div class="divider-container" data-lang="or_email">or with your email</div>
        <input type="email" id="log-email" class="auth-input" data-lang-placeholder="email_placeholder" placeholder="Email address">
        <input type="password" id="log-mdp" class="auth-input" data-lang-placeholder="pwd_placeholder" placeholder="Password">
        <div class="checkbox-container"><input type="checkbox" id="log-remember" checked><label for="log-remember" data-lang="stay_connected">Stay connected</label></div>
        <button class="auth-btn" onclick="apiConnexion()" data-lang="btn_login">Log In</button>
        <div class="auth-switch" onclick="basculerAuth('register')" data-lang="no_account">No account? <span>Sign Up</span></div>
    </div>
    <div class="auth-box" id="register-box" style="display:none;">
        <button class="auth-close" onclick="document.getElementById('auth-view').style.display='none';">&times;</button>
        <div class="auth-title" data-lang="reg_title">Sign Up (14 Days Free)</div>
        <div id="reg-error" class="auth-error"></div>
        <input type="text" id="reg-nom" class="auth-input" data-lang-placeholder="lname_placeholder" placeholder="Last Name">
        <input type="text" id="reg-prenom" class="auth-input" data-lang-placeholder="fname_placeholder" placeholder="First Name">
        <input type="text" id="reg-pays" class="auth-input" data-lang-placeholder="country_placeholder" placeholder="Country (e.g., US, UK, FR)">
        <input type="email" id="reg-email" class="auth-input" data-lang-placeholder="email_placeholder" placeholder="Email address">
        <input type="password" id="reg-mdp" class="auth-input" data-lang-placeholder="pwd_placeholder" placeholder="Password">
        <button class="auth-btn" onclick="apiInscription()" data-lang="btn_start_trial">Start my free trial</button>
        <div class="auth-switch" onclick="basculerAuth('login')" data-lang="has_account">Already have an account? <span>Log In</span></div>
    </div>
</div>

<div id="welcome-popup">
    <div class="welcome-box">
        <div style="width:60px; height:60px; background:#007c91; border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 20px;">
            <svg viewBox="0 0 24 24" style="width:34px; height:34px; fill:#fff;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
        </div>
        <div class="welcome-title"><span data-lang="welcome_title">Welcome</span> <span id="welcome-name"></span></div>
        <div class="welcome-text" id="welcome-desc"></div>
        <button class="auth-btn" onclick="fermerWelcomePopup()" data-lang="btn_continue">Continue to app</button>
    </div>
</div>

<div id="payment-success-popup">
    <div class="welcome-box">
        <div style="width:60px; height:60px; background:#4caf50; border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 20px;">
            <svg viewBox="0 0 24 24" style="width:34px; height:34px; fill:#fff;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
        </div>
        <div class="welcome-title" data-lang="pay_success_title">Payment Successful!</div>
        <div class="welcome-text" id="payment-success-desc" data-lang="pay_success_desc">Subscription activated.</div>
        <button class="auth-btn" onclick="fermerPaymentSuccess()" data-lang="btn_got_it">Got it</button>
    </div>
</div>

<div id="renewal-popup">
    <svg style="width:72px;height:72px;fill:#ff9800;margin-bottom:20px;" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
    <div style="font-size:24px; font-weight:700; margin-bottom:15px; color:#fff;" data-lang="renew_req_title">Subscription Required</div>
    <div style="color:#aaa; font-size:16px; margin-bottom:30px; max-width:90%; line-height: 1.5;" data-lang="renew_req_desc">To enjoy this feature and ad-free viewing, please renew your subscription.</div>
    <div id="paypal-button-container-renewal" style="width: 100%; max-width: 300px; min-height: 150px; margin-bottom: 20px;"></div>
    <button id="renewal-close-btn" onclick="fermerPopupRenouvellement()" data-lang="btn_close">Close</button>
</div>

<div id="sleep-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 999999;" ondblclick="desactiverModeNuit()"></div>

<div class="sidebar-backdrop" id="sidebar-backdrop" onclick="fermerMenuSidebar()"></div>
<div class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <div style="display:flex; align-items:center; gap:15px;">
            <div class="sidebar-header-icon" id="sb-initial">?</div>
            <div class="sidebar-header-title">
                <div id="sb-prenom" style="font-size: 16px;">Guest</div>
                <div id="sb-nom" style="font-size: 13px; color: #aaa; font-weight: 400;">Not connected</div>
            </div>
        </div>
        <div class="lang-switch"><span id="lang-en" onclick="setLang('en')">EN</span> | <span id="lang-fr" onclick="setLang('fr')">FR</span></div>
    </div>
    
    <div class="sidebar-item" onclick="clicOngletAccueil();"><svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg><span data-lang="menu_home">Home</span></div>
    <div class="sidebar-item" onclick="changerOnglet('account');"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg><span data-lang="menu_account">My Account</span></div>
    <div class="sidebar-divider"></div>
    <div class="sidebar-item" onclick="changerOnglet('playlists');"><svg viewBox="0 0 24 24"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9h-3v3h-2v-3H11V9h3V6h2v3h3v2z"/></svg><span data-lang="menu_playlists">My Playlists</span></div>
    <div class="sidebar-item" onclick="changerOnglet('favorites');"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><span data-lang="menu_fav">My Favorites</span></div>
    <div class="sidebar-item" onclick="changerOnglet('liked');"><svg viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg><span data-lang="menu_liked">Liked Videos</span></div>
    <div class="sidebar-item" onclick="changerOnglet('history');"><svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg><span data-lang="menu_history">History</span></div>
    <div class="sidebar-divider"></div>
    <div class="sidebar-item" onclick="changerOnglet('blocked');"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg><span data-lang="menu_blocked">Blocked Videos</span></div>
    <div class="sidebar-divider"></div>
    <div class="sidebar-item" onclick="toggleTheme();"><svg viewBox="0 0 24 24"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg><span id="theme-text" data-lang="theme_light">Mode Clair</span></div>
    <div class="sidebar-item" id="btn-logout-sidebar" onclick="apiDeconnexion()" style="color:#ff5252;"><svg viewBox="0 0 24 24" style="fill:#ff5252;"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg><span data-lang="menu_logout">Log Out</span></div>
</div>

<div class="header">
    <div class="header-top">
        <div class="logo-area" onclick="clicOngletAccueil()" style="cursor:pointer;">
            <img src="https://night-tube.com/nt.png" alt="Night Tube">
            <span>Night Tube</span>
        </div>
        
        <div style="display: flex; align-items: center; gap: 12px;">
            <button onclick="changerOnglet('account')" style="background: none; border: none; padding: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                <div id="header-avatar" style="width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;">
                    <svg viewBox="0 0 24 24" style="width: 30px; height: 30px; fill: #ffffff;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                </div>
            </button>
        </div>
    </div>
    
    <div class="search-container">
        <div class="search-box">
            <input type="text" id="q" data-lang-placeholder="search_placeholder" placeholder="Search YouTube" autocomplete="off">
            <button type="button" class="clear-btn" id="clear-search-btn" onclick="viderRecherche()">✕</button>
            <button type="button" class="search-btn" onclick="chercher();"><svg class="search-icon" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></button>
        </div>
        <div id="autocomplete-list" class="autocomplete-items"></div>
    </div>
</div>

<div id="home-view" class="app-view active">
    <div id="home-feed"><div class="loader-container"><div class="spinner"></div><div style="color:#888; font-size:14px;" data-lang="gen_rec">Loading...</div></div></div>
</div>

<div id="search-view" class="app-view">
    <div id="res">
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 65vh; text-align: center; padding: 20px;">
            <svg viewBox="0 0 24 24" style="width: 120px; height: 120px; fill: #333; margin-bottom: 20px;">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
            <div data-lang="search_start_title" style="font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 10px;">Search to get started</div>
            <div data-lang="search_start_desc" style="font-size: 14px; color: #aaa; max-width: 80%; margin: 0 auto;">Find your favorite videos, channels, and playlists.</div>
        </div>
    </div>
</div>

<div id="account-view" class="app-view" style="position: relative;">
    <div class="history-section">
        <div class="account-panel">
            <div class="account-panel-title" data-lang="acc_info_title">My Information</div>
            <div id="acc-msg" style="color:#007c91; font-size:13px; margin-bottom:10px; display:none;" data-lang="acc_saved">Profile updated!</div>
            <input type="text" id="acc-prenom" class="auth-input" data-lang-placeholder="fname_placeholder" placeholder="First Name">
            <input type="text" id="acc-nom" class="auth-input" data-lang-placeholder="lname_placeholder" placeholder="Last Name">
            <input type="text" id="acc-pays" class="auth-input" data-lang-placeholder="country_placeholder" placeholder="Country">
            <button class="auth-btn" style="padding: 10px; font-size: 14px;" onclick="modifierProfil(event)" data-lang="btn_save">Save changes</button>
        </div>
        
        <div class="account-panel">
            <div class="account-panel-title" data-lang="interests_title">Mes Centres d'intérêt</div>
            <div id="interests-container" style="display:flex; flex-wrap:wrap; gap:8px;"></div>
            <button class="auth-btn" style="padding: 10px; font-size: 14px; margin-top:15px;" onclick="sauvegarderInterets()" data-lang="btn_save_interests">Enregistrer les thèmes</button>
        </div>
        
        <div class="account-panel">
            <div class="account-panel-title" data-lang="acc_sub_title">My Subscription</div>
            <div style="font-size:14px; color:#aaa; margin-bottom:5px;"><span data-lang="status">Status : </span><span id="acc-status" style="font-weight:bold;"></span></div>
            <div style="font-size:14px; color:#aaa; margin-bottom:15px;"><span data-lang="expiration">Expiration : </span><span id="acc-expiration" style="font-weight:bold; color:#007c91;">...</span></div>
            <button id="btn-show-pay" class="auth-btn" style="padding: 10px; font-size: 14px; background:transparent; border: 1px solid #007c91; color:#007c91;" onclick="afficherPaiement()" data-lang="btn_renew">Renew my subscription</button>
            <div id="payment-section" style="display:none; margin-top:15px; border-top: 1px solid #ddd; padding-top:15px;">
                <div id="paypal-button-container" style="min-height: 150px;"></div>
            </div>
        </div>
    </div>
</div>

<div id="history-view" class="app-view">
    <div class="history-subtabs" style="display: flex; border-bottom: 1px solid #333; margin-bottom: 15px;">
        <div id="subtab-watch" onclick="changerSousOngletHistorique('watch')" style="flex: 1; text-align: center; padding: 15px; color: #007c91; font-weight: bold; border-bottom: 2px solid #007c91; cursor: pointer;" data-lang="hist_watched">Vidéos regardées</div>
        <div id="subtab-search" onclick="changerSousOngletHistorique('search')" style="flex: 1; text-align: center; padding: 15px; color: #aaa; cursor: pointer;" data-lang="hist_recent">Recherches récentes</div>
    </div>
    <div id="history-watch-content"><div id="watch-history-list"></div></div>
    <div id="history-search-content" style="display: none; padding: 0 10px;"><div id="search-history-list" style="display: flex; flex-wrap: wrap; gap: 8px;"></div></div>
</div>

<div id="favorites-view" class="app-view"><div class="history-section"><div class="history-title" data-lang="fav_title">My Favorites</div><div id="favorites-list"></div></div></div>
<div id="liked-view" class="app-view"><div class="history-section"><div class="history-title" data-lang="liked_title">Liked Videos</div><div id="liked-list"></div></div></div>
<div id="playlists-view" class="app-view">
    <div class="history-section"><div class="history-title"><span data-lang="pl_title">My Playlists</span><button class="auth-btn" style="width: auto; padding: 6px 12px; font-size: 12px;" onclick="ouvrirModalPlaylist(null)" data-lang="btn_new_pl">+ New</button></div><div id="playlists-list"></div></div>
</div>
<div id="blocked-view" class="app-view"><div class="history-section" style="padding-top: 10px;"><div id="blocked-list"></div></div></div>

<div id="watch-view">
    <div class="sticky-player-wrapper">
        <div class="player-container">
            <button class="close-player-btn" onclick="fermerVideo(event)">✕</button>
            <button class="expand-player-btn" onclick="restaurerVideo(event)">⛶</button>
            <div class="mini-overlay" onclick="restaurerVideo(event)"></div>
            <div id="iframe-wrapper"></div>
        </div>
    </div>
    
    <div class="watch-details">
        <div class="watch-title" id="w-title" style="font-size:20px !important;"></div>
        <div class="watch-meta" id="w-meta"></div>
        <div class="channel-row">
            <div id="w-channel-logo"></div>
            <div class="channel-name" id="w-channel"></div>
            <button class="fav-btn-player" onclick="partagerVideo()"><svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg><span id="w-share-text" data-lang="share_btn">Share</span></button>
            <button class="fav-btn-player" id="w-like-btn" onclick="toggleLikeLecteur()"><svg viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg><span id="w-like-text">Like</span></button>
            <button class="fav-btn-player" id="w-fav-btn" onclick="toggleFavoriLecteur()"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><span id="w-fav-text">Favorite</span></button>
        </div>
        
        <div id="comments-sheet" style="display:block !important; position:static !important; transform:none !important; background:transparent; width:100%; box-shadow:none; padding:30px 0 0 0; height:auto;">
            <div class="sheet-header" style="padding:0; border:none; background:transparent; margin-bottom:20px; display: flex; justify-content: flex-start; gap: 15px; align-items: baseline;">
                <span style="font-weight: bold; font-size: 20px;" data-lang="comments_title">Commentaires</span>
                <span id="sheet-comments-count" style="color: #aaa; font-size: 16px;">0</span>
            </div>
            <div class="comments-input-area" style="background:transparent; padding:0; border:none; margin-bottom:30px;">
                <div id="comments-input-avatar" class="avatar-small" style="background:#007c91;"></div>
                <input type="text" id="new-comment-input" placeholder="Ajouter un commentaire..." style="background:transparent; border-bottom:1px solid #444; border-radius:0; color:#fff; padding-bottom:5px;">
                <button id="send-comment-btn" onclick="envoyerCommentaire()" style="background:none;">
                    <svg viewBox="0 0 24 24" style="width: 24px; height: 24px; fill: #007c91;"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                </button>
            </div>
            <div id="comments-list" class="comments-list" style="max-height:none; overflow:visible; padding:0;">
                <div class="loader-container" id="comments-loader" style="display: none;"><div class="spinner"></div></div>
            </div>
        </div>
    </div>
    
    <div class="suggestions-section">
        <div class="suggestions-header" id="sug-header" data-lang="sug_title" style="margin-bottom:15px;">Suggested videos</div>
        <div id="suggestions-list"></div>
    </div>
</div>

<div class="action-sheet-backdrop" id="menu-backdrop" onclick="fermerMenuCarte()"></div>
<div class="action-sheet" id="menu-sheet">
    <div class="action-header" id="menu-title">...</div>
    <div class="action-item" onclick="actionOuvrirModalPlaylist()"><svg viewBox="0 0 24 24"><path d="M14 10H2v2h10v-2zm0-4H2v2h10V6zm-10 8h6v-2H4v2zm16-8v6h-3v2h3v6h2v-6h3v-2h-3V6h-2z"/></svg><span data-lang="sheet_add_pl">Add to a playlist</span></div>
    <div class="action-item" onclick="actionToggleFavori()"><svg id="menu-fav-icon" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><span id="menu-fav-text" data-lang="sheet_add_fav">Add to favorites</span></div>
    <div class="action-item block-item" id="menu-block-item" onclick="actionBloquerVideo()"><svg id="menu-block-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg><span id="menu-block-text" data-lang="sheet_block_opt">Block options</span></div>
</div>

<div id="playlist-modal-backdrop" onclick="fermerModalPlaylist()"></div>
<div class="playlist-modal" id="playlist-modal">
    <div class="playlist-modal-title" data-lang="pl_save_in">Save in...</div>
    <div id="playlist-options-container"></div>
    <div class="new-pl-input-container">
        <input type="text" id="new-playlist-name" class="auth-input" data-lang-placeholder="pl_new_placeholder" placeholder="New playlist name..." style="margin-bottom:10px;">
        <button class="auth-btn" onclick="creerEtAjouterPlaylist()" data-lang="btn_create_add">Create and add</button>
    </div>
</div>

<div id="block-modal-backdrop" onclick="fermerModalBlocage()"></div>
<div class="playlist-modal" id="block-modal">
    <div class="playlist-modal-title" data-lang="block_opt_title">Block option</div>
    <div class="playlist-option" onclick="confirmerBlocage('video')"><span data-lang="block_vid">🚫 Stop suggesting this video</span></div>
    <div class="playlist-option" onclick="confirmerBlocage('chaine')"><span data-lang="block_chan">⛔ Block the entire channel</span></div>
    <div class="playlist-option" style="text-align:center; color:#aaa; justify-content:center; margin-top:10px; border: 1px solid #333;" onclick="fermerModalBlocage()" data-lang="btn_cancel">Cancel</div>
</div>

<div id="otp-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999999; align-items: center; justify-content: center; backdrop-filter: blur(5px);">
    <div style="background: #1a1a1a; padding: 30px; border-radius: 12px; border: 1px solid #333; text-align: center; width: 90%; max-width: 350px; box-shadow: 0 15px 40px rgba(0,0,0,0.9);">
        <h3 style="color: #fff; margin-top: 0; font-family: sans-serif;">Vérification de l'email</h3>
        <p style="color: #aaa; font-size: 14px; margin-bottom: 20px; font-family: sans-serif;">Un code à 4 chiffres vous a été envoyé. Saisissez-le pour activer votre essai gratuit.</p>
        <input type="number" id="otp-input" placeholder="----" style="width: 150px; padding: 15px; font-size: 24px; text-align: center; letter-spacing: 10px; border-radius: 8px; border: 1px solid #007c91; background: #222; color: #fff; outline: none; margin-bottom: 20px;" maxlength="4" oninput="if(this.value.length > 4) this.value = this.value.slice(0, 4);">
        <button onclick="verifierOTP()" style="width: 100%; padding: 15px; background: #007c91; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; margin-bottom: 10px;">Activer mon compte</button>
        <button onclick="fermerOTP()" style="width: 100%; padding: 15px; background: transparent; color: #aaa; border: 1px solid #444; border-radius: 8px; font-size: 14px; cursor: pointer;">Annuler</button>
        <div id="otp-error" style="color: #ff5252; margin-top: 15px; font-size: 13px; font-weight: bold; display: none;">Code incorrect.</div>
    </div>
</div>

<div id="country-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999999; align-items: center; justify-content: center; backdrop-filter: blur(5px);">
    <div style="background: #1a1a1a; padding: 25px; border-radius: 12px; border: 1px solid #333; text-align: center; width: 90%; max-width: 350px; box-shadow: 0 15px 40px rgba(0,0,0,0.9); max-height: 80vh; overflow-y: auto;">
        <h3 style="color: #fff; margin-top: 0; font-family: sans-serif;">D'où venez-vous ? 🌍</h3>
        <p style="color: #aaa; font-size: 14px; margin-bottom: 20px; font-family: sans-serif;">Veuillez indiquer votre pays pour personnaliser vos recommandations.</p>
        <select id="popup-pays-input" style="width: 100%; padding: 15px; font-size: 16px; border-radius: 8px; border: 1px solid #007c91; background: #222; color: #fff; outline: none; margin-bottom: 20px; box-sizing: border-box; cursor: pointer;">
            <option value="" disabled selected>Sélectionnez votre pays...</option>
            <option value="France">France</option>
            <option value="Belgique">Belgique</option>
            <option value="Suisse">Suisse</option>
            <option value="Canada">Canada</option>
        </select>
        <button onclick="sauvegarderPaysPopup()" style="width: 100%; padding: 15px; background: #007c91; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer;">Valider</button>
    </div>
</div>

<script>
/* SCRIPT POUR LE COMPORTEMENT PC (Réduction lecteur + Drag & Drop Playlists) */
document.addEventListener('DOMContentLoaded', () => {
    
    // 1. Réduire le lecteur lors du clic sur le menu
    document.querySelectorAll('.sidebar-item, .logo-area').forEach(item => {
        item.addEventListener('click', () => {
            let watchView = document.getElementById('watch-view');
            if (watchView && watchView.style.display !== 'none' && !watchView.classList.contains('mini-mode')) {
                watchView.classList.add('mini-mode');
            }
        });
    });

    // 2. LOGIQUE DE GLISSER-DÉPOSER (Drag and Drop)
    let draggedEl = null;

    document.addEventListener('mouseover', (e) => {
        let card = e.target.closest('.video-card');
        if (card && card.querySelector('[data-context="playlist"], [data-context="queue"]')) {
            if (!card.hasAttribute('draggable')) { card.setAttribute('draggable', 'true'); }
        }
    });

    document.addEventListener('dragstart', (e) => {
        let card = e.target.closest('.video-card');
        if (card && card.querySelector('[data-context="playlist"], [data-context="queue"]')) {
            draggedEl = card;
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/plain', ''); // Fix pour Firefox
            setTimeout(() => { card.style.opacity = '0.4'; }, 0);
        }
    });

    document.addEventListener('dragover', (e) => {
        e.preventDefault();
        if (!draggedEl) return;
        let targetCard = e.target.closest('.video-card');
        // Ne réorganise que si on reste dans le même conteneur de playlist
        if (targetCard && targetCard !== draggedEl && targetCard.parentNode === draggedEl.parentNode) {
            let rect = targetCard.getBoundingClientRect();
            let next = (e.clientY - rect.top) / (rect.bottom - rect.top) > 0.5;
            targetCard.parentNode.insertBefore(draggedEl, next && targetCard.nextSibling || targetCard);
        }
    });

    document.addEventListener('dragend', (e) => {
        if (!draggedEl) return;
        draggedEl.style.opacity = '1';
        
        let swipeContent = draggedEl.querySelector('.swipe-content');
        if (swipeContent) {
            let context = swipeContent.getAttribute('data-context');
            
            // Mise à jour de la mémoire du navigateur après le glissé
            if (context === 'playlist') {
                let plId = swipeContent.getAttribute('data-plid');
                let pl = window.mesPlaylists.find(p => p.id === plId);
                if (pl) {
                    let newVideos = [];
                    draggedEl.parentNode.querySelectorAll('.swipe-content').forEach(el => {
                        let vidId = el.getAttribute('data-id');
                        let v = pl.videos.find(vid => (vid.id || vid.videoId) === vidId);
                        if (v) newVideos.push(v);
                    });
                    if (newVideos.length === pl.videos.length) {
                        pl.videos = newVideos;
                        if (typeof window.sauvegarderHistoriqueServeur === 'function') window.sauvegarderHistoriqueServeur();
                    }
                }
            } else if (context === 'queue') {
                let newQueue = [];
                draggedEl.parentNode.querySelectorAll('.swipe-content').forEach(el => {
                    let vidId = el.getAttribute('data-id');
                    let v = window.currentPlaylistQueue.find(vid => (vid.id || vid.videoId) === vidId);
                    if (v) newQueue.push(v);
                });
                if (newQueue.length === window.currentPlaylistQueue.length) {
                    window.currentPlaylistQueue = newQueue;
                }
            }
        }
        draggedEl = null;
    });
});
</script>
    
<script src="https://night-tube.com/app_beta.js?v=91.1"></script>
</body>
</html>