document.addEventListener('DOMContentLoaded', () => {
    const videoListEl = document.getElementById('video-list');
    const loadingSpinner = document.getElementById('loading-spinner');
    const refreshBtn = document.getElementById('refresh-btn');
    const codecSelect = document.getElementById('codec-select');
    const playerOverlay = document.getElementById('player-overlay');
    const transcodingOverlay = document.getElementById('transcoding-overlay');
    const videoPlayer = document.getElementById('video-player');
    const nowPlaying = document.getElementById('now-playing');
    const currentVideoTitle = document.getElementById('current-video-title');

    let currentPollInterval = null;

    // Fetch list of videos from the backend
    const fetchVideos = async () => {
        videoListEl.classList.add('hidden');
        loadingSpinner.classList.remove('hidden');
        videoListEl.innerHTML = '';

        try {
            const res = await fetch('/api/videos');
            if (!res.ok) throw new Error('Failed to fetch videos. Check S3 Config.');

            const data = await res.json();

            loadingSpinner.classList.add('hidden');
            videoListEl.classList.remove('hidden');

            if (data.videos.length === 0) {
                videoListEl.innerHTML = '<p style="color: var(--text-secondary); text-align: center; padding: 2rem;">No videos found.</p>';
                return;
            }

            // Build a tree structure from S3 keys, preserving original object storage directories
            const tree = {};
            data.videos.forEach(key => {
                const parts = key.split('/');
                let current = tree;
                parts.forEach((part, index) => {
                    if (!current[part]) {
                        current[part] = {};
                    }

                    if (index === parts.length - 1) {
                        current[part].__file = key;
                    }

                    current = current[part];
                });
            });

            const createFileItem = (name, key) => {
                const li = document.createElement('li');
                li.className = 'video-item file-item';
                const ext = name.split('.').pop().toUpperCase();
                li.innerHTML = `
                    <div class="video-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
                    </div>
                    <div class="video-info">
                        <div class="video-title" title="${key}">${name}</div>
                        <div class="video-meta">Video / ${ext}</div>
                    </div>
                `;
                li.addEventListener('click', (e) => {
                    e.stopPropagation();
                    selectVideo(key, li);
                });
                return li;
            };

            // Recursive function to render the tree
            const renderTree = (node, container) => {
                for (const [name, value] of Object.entries(node)) {
                    if (name === '__file') continue;

                    const childKeys = Object.keys(value).filter(key => key !== '__file');
                    const hasChildren = childKeys.length > 0;
                    const isFile = typeof value.__file === 'string';

                    if (hasChildren) {
                        const li = document.createElement('li');
                        li.className = 'folder-item';

                        const folderHeader = document.createElement('div');
                        folderHeader.className = 'folder-header';
                        folderHeader.innerHTML = `
                            <div class="folder-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                            </div>
                            <div class="folder-title" title="${name}">${name}</div>
                            <div class="folder-toggle">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron"><path d="m9 18 6-6-6-6"/></svg>
                            </div>
                        `;

                        const subListContainer = document.createElement('ul');
                        subListContainer.className = 'sub-list hidden';

                        folderHeader.addEventListener('click', (e) => {
                            e.stopPropagation();
                            li.classList.toggle('open');
                            subListContainer.classList.toggle('hidden');
                        });

                        li.appendChild(folderHeader);
                        if (isFile) {
                            subListContainer.appendChild(createFileItem(name, value.__file));
                        }
                        renderTree(value, subListContainer);
                        li.appendChild(subListContainer);
                        container.appendChild(li);
                    } else if (isFile) {
                        container.appendChild(createFileItem(name, value.__file));
                    }
                }
            };

            renderTree(tree, videoListEl);
        } catch (err) {
            console.error(err);
            loadingSpinner.innerHTML = `<p style="color: #ef4444;">Error: ${err.message}</p>`;
        }
    };

    // Handle video selection and trigger transcode
    const selectVideo = async (key, listItemNode) => {
        // Update UI
        document.querySelectorAll('.video-item').forEach(n => n.classList.remove('active'));
        listItemNode.classList.add('active');

        // Reset player UI
        stopPolling();
        playerOverlay.classList.add('hidden');
        videoPlayer.classList.add('hidden');
        videoPlayer.pause();

        nowPlaying.classList.remove('hidden');
        currentVideoTitle.textContent = key.split('/').pop();

        transcodingOverlay.classList.remove('hidden');

        try {
            const codec = codecSelect?.value || 'h264';
            const res = await fetch('/api/transcode', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ key, codec })
            });
            const data = await res.json();

            if (data.error) throw new Error(data.error);

            // Wait/Poll for HLS playlist to be ready
            pollForHlsReady(key, data.hlsUrl);
        } catch (err) {
            console.error(err);
            transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Transcode Failed: ${err.message}</p>`;
        }
    };

    // Poll the backend to check if the generated m3u8 file is accessible
    const pollForHlsReady = (key, hlsUrl) => {
        let attempts = 0;
        const maxAttempts = 60; // 60 seconds max wait for first segment

        currentPollInterval = setInterval(async () => {
            attempts++;
            try {
                const res = await fetch(`/api/status?key=${encodeURIComponent(key)}`);
                const data = await res.json();

                if (data.ready) {
                    stopPolling();
                    playHlsStream(data.hlsUrl);
                } else if (attempts >= maxAttempts) {
                    stopPolling();
                    transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Timeout waiting for HLS segments.</p>`;
                }
            } catch (err) {
                console.error("Poll Error:", err);
            }
        }, 1000);
    };

    const stopPolling = () => {
        if (currentPollInterval) {
            clearInterval(currentPollInterval);
            currentPollInterval = null;
        }
    };

    // Initialize HLS Player
    const playHlsStream = (url) => {
        transcodingOverlay.classList.add('hidden');
        videoPlayer.classList.remove('hidden');

        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(videoPlayer);
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                videoPlayer.play().catch(e => console.log('Auto-play blocked'));
            });
        } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
            // Safari uses native HLS
            videoPlayer.src = url;
            videoPlayer.addEventListener('loadedmetadata', () => {
                videoPlayer.play().catch(e => console.log('Auto-play blocked'));
            });
        }
    };

    // Bind events
    refreshBtn.addEventListener('click', fetchVideos);

    // Initial load
    fetchVideos();
});