<!-- templates/account.html -->
{% extends 'base.html' %}
{% block title %}Account - BlickBox{% endblock %}
{% block content %}
<div class="content-box">
    <div class="account-container">
        <div class="profile-section">
            <div class="avatar"></div>
            <div class="profile-info">
                <h2 id="username">Loading...</h2>
                <p>Movie lover</p>
            </div>
        </div>
        <div class="tabs">
            <div class="tab active" onclick="showTab('continue-watching')">Continue Watching</div>
            <div class="tab" onclick="showTab('downloads')">Downloads</div>
        </div>
        <div id="continue-watching" class="tab-content">
            <button id="clear-continue-watching" style="display: none;">Clear Continue Watching</button>
            <div id="continue-watching-grid" class="grid"></div>
        </div>
        <div id="downloads" class="tab-content" style="display: none;">
            <div id="downloads-grid" class="grid"></div>
        </div>
        <p class="error" id="error-message" style="display: none;"></p>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
    function showTab(tab) {
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(t => t.style.display = 'none');
        document.querySelector(`[onclick="showTab('${tab}')"]`).classList.add('active');
        document.getElementById(tab).style.display = 'block';
    }

    function renderContinueWatching() {
        const grid = document.getElementById('continue-watching-grid');
        const items = JSON.parse(localStorage.getItem('continue_watching') || '[]');
        grid.innerHTML = items.length ? '' : '<p>Your list is empty.</p>';
        document.getElementById('clear-continue-watching').style.display = items.length ? 'block' : 'none';

        items.forEach(item => {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = `
                <img src="${item.poster}" alt="${item.title}">
                <div class="card-overlay"><span>▶</span></div>
                <div class="card-content"><h3>${item.title}</h3></div>
            `;
            card.addEventListener('click', () => {
                const videoWindow = window.open('', '_blank');
                videoWindow.document.write(`
                    <html>
                        <head><title>${item.title}</title></head>
                        <body style="margin:0;background:#000;">
                            <video controls autoplay style="width:100%;height:100vh;">
                                <source src="${item.video_file}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </body>
                    </html>
                `);
            });
            grid.appendChild(card);
        });
    }

    function renderDownloads() {
        const grid = document.getElementById('downloads-grid');
        const items = JSON.parse(localStorage.getItem('downloads') || '[]');
        grid.innerHTML = items.length ? '' : '<p>No Downloads</p>';

        items.forEach(item => {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = `
                <img src="${item.poster}" alt="${item.title}">
                <div class="card-overlay"><span>▶</span></div>
                <button class="delete-button">🗑</button>
                <div class="card-content"><h3>${item.title}</h3></div>
            `;
            card.querySelector('.card-overlay').addEventListener('click', () => {
                const videoWindow = window.open('', '_blank');
                videoWindow.document.write(`
                    <html>
                        <head><title>${item.title}</title></head>
                        <body style="margin:0;background:#000;">
                            <video controls autoplay style="width:100%;height:100vh;">
                                <source src="${item.path}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </body>
                    </html>
                `);
            });
            card.querySelector('.delete-button').addEventListener('click', () => {
                const downloads = JSON.parse(localStorage.getItem('downloads') || '[]');
                const updatedDownloads = downloads.filter(d => d.path !== item.path);
                localStorage.setItem('downloads', JSON.stringify(updatedDownloads));
                renderDownloads();
            });
            grid.appendChild(card);
        });
    }

    document.addEventListener('DOMContentLoaded', async () => {
        const errorMessage = document.getElementById('error-message');
        try {
            const username = localStorage.getItem('username') || 'Guest';
            document.getElementById('username').textContent = username;
            renderContinueWatching();
            renderDownloads();

            document.getElementById('clear-continue-watching').addEventListener('click', () => {
                localStorage.removeItem('continue_watching');
                renderContinueWatching();
                alert('Continue Watching cleared');
            });
        } catch (err) {
            errorMessage.textContent = err.message;
            errorMessage.style.display = 'block';
        }
    });
</script>
{% endblock %}