<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>{{ video.username }} - Video</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #111;
            color: #eee;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        video {
            margin-top: 20px;
            width: 80%;
            max-width: 1000px;
            border: 2px solid #444;
            border-radius: 8px;
            background: #000;
        }

        .meta {
            margin: 20px auto;
            text-align: left;
            max-width: 800px;
            background: #222;
            padding: 15px;
            border-radius: 6px;
        }

        .meta p {
            margin: 8px 0;
        }

        a {
            color: #0af;
            text-decoration: none;
        }

        .fav-btn {
            font-size: 1.1rem;
            line-height: 1;
            border: none;
            background: transparent;
            cursor: pointer;
            padding: .2rem .35rem;
        }

        .fav-btn[aria-pressed="true"] {
            color: gold;
        }

        .fav-btn:hover {
            transform: scale(1.05);
        }
    </style>

    <script>
        function openFolder(filePath) {
            fetch('/open-folder', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_path: filePath })
            }).then(res => res.json()).then(data => {
                if (data.success) {
                    console.log("Opened folder successfully");
                } else {
                    alert("Failed to open folder");
                }
            });
        }
    </script>

    <script>
        function deleteFile(filePath, videoId) {
            if (!confirm("Are you sure you want to permanently delete this file?")) return;

            fetch('/delete-file', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_path: filePath, video_id: videoId })
            })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        alert("File deleted successfully");
                        // redirect back to the user page
                        window.location.href = "/user/{{ video.username }}";
                    } else {
                        alert("Failed to delete: " + (data.error || 'Unknown error'));
                    }
                })
                .catch(err => alert("Error: " + err));
        }
    </script>


    <script>
        // existing openFolder(...) here

        document.addEventListener('click', async (e) => {
            const btn = e.target.closest('#favBtn');
            if (!btn) return;

            const vid = btn.dataset.videoId;
            try {
                const res = await fetch(`/api/fav/toggle/${encodeURIComponent(vid)}`, { method: 'POST' });
                const data = await res.json();
                if (!res.ok || !data.ok) throw new Error(data.error || 'Failed');

                const isFav = data.is_favorite;
                btn.textContent = isFav ? '★' : '☆';
                btn.setAttribute('aria-pressed', isFav ? 'true' : 'false');
                btn.title = isFav ? 'Unfavorite' : 'Favorite';
            } catch (err) {
                alert('Could not toggle favorite. ' + (err?.message || ''));
            }
        });
    </script>


</head>

<body>
    <h1>{{ video.username }} - {{ video.site }}</h1>
    <div>
        <a href="/user/{{ video.username }}">⬅ Back to {{ video.username }}'s Videos</a>
    </div>
    <video controls muted>
        <source src="/video/stream/{{ video.video_id }}" type="video/mp4" poster="{{ video.thumbnail }}">
        Your browser does not support the video tag.
    </video>

    <div class="meta">
        <button onclick="openFolder('{{ video.filepath }}')">Open Folder</button>
        <button onclick="deleteFile('{{ video.filepath }}','{{ video.video_id }}')" style="margin-left:8px">Delete
            File</button>

        <!-- Favorite star -->
        <button id="favBtn" class="fav-btn" data-video-id="{{ video.video_id }}"
            aria-pressed="{{ 'true' if video.is_favorite else 'false' }}"
            title="{{ 'Unfavorite' if video.is_favorite else 'Favorite' }}" style="margin-left:8px">
            {{ '★' if video.is_favorite else '☆' }}
        </button>
    </div>

    <div class="meta">
        <a href="{{ url_for('user_page', username=video.username) }}" class="username-link">
            {{ video.username }}
        </a>
        <p><strong>Size:</strong> {{ "%.2f"|format(video.size/1024) }} GB</p>
        <p><strong>Duration:</strong> {{ video.duration if video.duration else "Unknown" }}</p>
        <p><strong>Path:</strong> {{ video.filepath }}</p>
        <p><strong>Date:</strong> {{ video.created_at }}</p>
    </div>
</body>

</html>