app.min.js

class VideoApp {
    constructor() {
        this.currentVideoIndex = 0;
        this.videos = [];
        this.usernameSuffixes = [];
        this.baseUrl = window.location.origin;
        this.isUploading = false;
        this.currentUsername = null;
        this.likedVideos = new Set();
        this.viewedVideos = new Set();
        this.commentsLimit = 20;
		this.searchInput = document.getElementById('searchInput');
		this.searchButton = document.getElementById('searchButton');
		this.trendingSearches = document.querySelector('.trending-searches');
		this.trendingList = document.querySelector('.trending-list');
		this.searchTimeout = null;
		this.userSearches = new Map();
        this.repliesLimit = 3;
        this.isScrolling = false;
        this.lastScrollTime = 0;
        this.replyDepthLimit = 3; // Maximum depth for nested replies
        this.expandedReplies = new Set(); // Track which comments have expanded replies

        // DOM Elements
        this.reelsContainer = document.getElementById('reelsContainer');
        this.uploadModal = document.getElementById('uploadModal');
        this.uploadForm = document.getElementById('uploadForm');
        this.fileInput = document.getElementById('fileInput');
        this.dropArea = document.getElementById('dropArea');
        this.videoTemplate = document.getElementById('videoTemplate');
        this.progressBar = document.querySelector('.progress-fill');
        this.progressText = document.querySelector('.progress-text');
        this.commentModal = document.getElementById('commentModal');

        // Initialize the current user
        this.initializeUser();
		this.videoLikes = new Map();
		this.videoComments = new Map();
		this.setupSearch();
		this.loadSearchStats();

        // Ensure DOM elements exist before initialization
        if (this.reelsContainer && this.uploadModal && this.uploadForm) {
            this.init();
        } else {
            console.error('Required DOM elements not found');
        }
    }

    async initializeUser() {
    let username = localStorage.getItem('videoAppUsername');
    let userId = localStorage.getItem('videoAppUserId');

    if (!username || !userId) {
        username = this.generateUsername();
        userId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

        try {
            const response = await fetch('api.php?action=update_user', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    userId: userId,
                    username: username,
                    createdAt: new Date().toISOString()
                })
            });

            if (!response.ok) throw new Error('Failed to create user');

            const data = await response.json();
            if (data.success) {
                localStorage.setItem('videoAppUsername', username);
                localStorage.setItem('videoAppUserId', userId);
            }
        } catch (error) {
            console.error('Error creating user:', error);
        }
    }

    this.currentUsername = username;
    this.userId = userId;
}
	async init() {
        try {
            await this.loadVideos();
            this.setupUploadHandlers();
            this.setupIntersectionObserver();
            this.setupScrollHandlers();
            this.setupModalHandlers();
            this.setupCommentInteractions();
        } catch (error) {
            console.error('Initialization error:', error);
        }
    }
	
	setupSearch() {
    if (!this.searchInput || !this.searchButton) return;

    this.searchInput.addEventListener('focus', () => {
        this.trendingSearches.classList.add('active');
        this.loadSearchStats();
    });

    document.addEventListener('click', (e) => {
        if (!this.searchInput.contains(e.target) && 
            !this.trendingSearches.contains(e.target)) {
            this.trendingSearches.classList.remove('active');
        }
    });

    this.searchInput.addEventListener('input', (e) => {
        clearTimeout(this.searchTimeout);
        this.searchTimeout = setTimeout(() => {
            this.performSearch(e.target.value);
        }, 300);
    });

    this.searchButton.addEventListener('click', () => {
        this.performSearch(this.searchInput.value);
    });

    this.searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            this.performSearch(this.searchInput.value);
        }
    });
}

async loadSearchStats() {
    try {
        const response = await fetch(`api.php?action=search_stats&userId=${encodeURIComponent(this.userId)}`);
        const data = await response.json();

        if (data.success) {
            this.userSearches = new Map(Object.entries(data.userSearches));
            this.updateTrendingSearches(data.trending);
        }
    } catch (error) {
        console.error('Error loading search stats:', error);
    }
}

async performSearch(query) {
    try {
        if (!query.trim()) {
            await this.loadVideos();
            return;
        }

        const response = await fetch(`api.php?action=search&query=${encodeURIComponent(query)}&userId=${encodeURIComponent(this.userId)}`);
        const data = await response.json();

        if (data.success) {
            // Map the videos with additional data
            this.videos = data.results.map(video => ({
                ...video,
                username: video.username || this.generateUsername(),
                shareUrl: this.createShareUrl(video.title, video.id),
                likes: video.stats.likes || [],
                views: video.stats.views || 0,
                comments: []
            }));

            // Reload search stats to update trending
            await this.loadSearchStats();

            // Render the videos
            if (this.reelsContainer) {
                this.renderVideos();
            }

            // If no results found, show a message
            if (this.videos.length === 0) {
                this.showToast('No videos found', 'info');
            }
        }
    } catch (error) {
        console.error('Search error:', error);
        this.showToast('Search failed', 'error');
    }
}

updateTrendingSearches(trending) {
    if (!this.trendingList) return;

    this.trendingList.innerHTML = '';
    
    // Create recent searches header
    const recentHeader = document.createElement('div');
    recentHeader.className = 'trending-section-header';
    recentHeader.textContent = 'Your Recent Searches';
    this.trendingList.appendChild(recentHeader);

    // Add user's recent searches
    const userSearches = Array.from(this.userSearches.values())
        .sort((a, b) => new Date(b.lastSearched) - new Date(a.lastSearched))
        .slice(0, 3);

    userSearches.forEach(item => {
        const searchItem = document.createElement('div');
        searchItem.className = 'trending-item recent-search';
        searchItem.innerHTML = `
            <i class="fas fa-history"></i>
            <span class="trend-query">${this.escapeHtml(item.query)}</span>
            <span class="trend-count">${this.formatNumber(item.count)}x</span>
        `;
        searchItem.addEventListener('click', () => {
            this.searchInput.value = item.query;
            this.performSearch(item.query);
        });
        this.trendingList.appendChild(searchItem);
    });

    // Create trending header
    const trendingHeader = document.createElement('div');
    trendingHeader.className = 'trending-section-header';
    trendingHeader.textContent = 'Trending Searches';
    this.trendingList.appendChild(trendingHeader);

    // Add trending searches
    trending.forEach((item, index) => {
        const trendingItem = document.createElement('div');
        trendingItem.className = 'trending-item';
        trendingItem.innerHTML = `
            <span class="trend-number">#${index + 1}</span>
            <span class="trend-query">${this.escapeHtml(item.query)}</span>
            <span class="trend-count">${this.formatNumber(item.count)} searches</span>
        `;

        trendingItem.addEventListener('click', () => {
            this.searchInput.value = item.query;
            this.performSearch(item.query);
        });

        this.trendingList.appendChild(trendingItem);
    });
}

    generateUsername() {
        const names = ['pixel', 'cosmic', 'neon', 'cyber', 'digital', 'nova', 'stellar', 'lunar', 'solar', 'echo'];
        const randomName = names[Math.floor(Math.random() * names.length)];
        let randomNum;
        
        do {
            randomNum = Math.floor(100000 + Math.random() * 900000);
        } while (this.usernameSuffixes.includes(randomNum));
        
        this.usernameSuffixes.push(randomNum);
        return `${randomName}${randomNum}`;
    }

    createShareUrl(title, videoId) {
        const sanitizedTitle = title
            .toLowerCase()
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/(^-|-$)/g, '');
        return `${this.baseUrl}/watch/${sanitizedTitle}-${videoId}`; // <-- change the subfolder if you have if its not a root domain before /watch/ //
    }

    setupScrollHandlers() {
        if (!this.reelsContainer) return;

        let startY;
        let currentY;
        let touchStartTime;
        let isMouseWheel = false;

        this.reelsContainer.addEventListener('wheel', (e) => {
            e.preventDefault();
            
            if (isMouseWheel) return;
            isMouseWheel = true;
            
            const now = Date.now();
            if (now - this.lastScrollTime < 500) {
                isMouseWheel = false;
                return;
            }
            
            this.lastScrollTime = now;
            const direction = e.deltaY > 0 ? 1 : -1;
            const currentIndex = Math.round(this.reelsContainer.scrollTop / window.innerHeight);
            const targetIndex = Math.max(0, Math.min(currentIndex + direction, this.videos.length - 1));
            
            this.smoothScrollToVideo(targetIndex);
            setTimeout(() => {
                isMouseWheel = false;
            }, 500);
        }, { passive: false });

        this.reelsContainer.addEventListener('touchstart', (e) => {
            startY = e.touches[0].clientY;
            touchStartTime = Date.now();
            this.isScrolling = true;
        }, { passive: false });

        this.reelsContainer.addEventListener('touchmove', (e) => {
            if (!this.isScrolling) return;
            currentY = e.touches[0].clientY;
            e.preventDefault();
        }, { passive: false });

        this.reelsContainer.addEventListener('touchend', () => {
            if (!this.isScrolling) return;
            
            const touchEndTime = Date.now();
            const touchDuration = touchEndTime - touchStartTime;
            const diff = startY - currentY;
            
            if (touchDuration < 300 && Math.abs(diff) > 50) {
                const currentIndex = Math.round(this.reelsContainer.scrollTop / window.innerHeight);
                const targetIndex = diff > 0 ? 
                    Math.min(currentIndex + 1, this.videos.length - 1) : 
                    Math.max(currentIndex - 1, 0);
                
                this.smoothScrollToVideo(targetIndex);
            }
            
            this.isScrolling = false;
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                e.preventDefault();
                
                const now = Date.now();
                if (now - this.lastScrollTime < 500) return;
                this.lastScrollTime = now;

                const currentIndex = Math.round(this.reelsContainer.scrollTop / window.innerHeight);
                const targetIndex = e.key === 'ArrowDown' ? 
                    Math.min(currentIndex + 1, this.videos.length - 1) : 
                    Math.max(currentIndex - 1, 0);
                
                this.smoothScrollToVideo(targetIndex);
            }
        });
    }

    smoothScrollToVideo(index) {
        const targetY = index * window.innerHeight;
        
        gsap.to(this.reelsContainer, {
            scrollTop: targetY,
            duration: 0.5,
            ease: "power2.out",
            onComplete: () => {
                document.querySelectorAll('.video-player').forEach((video, idx) => {
                    if (idx === index) {
                        video.play().catch(() => {});
                    } else {
                        video.pause();
                        video.currentTime = 0;
                    }
                });
            }
        });
    }

    setupModalHandlers() {
        const openModalBtn = document.getElementById('openUploadModal');
        const closeModalBtn = document.querySelector('.close-modal');
        const modalOverlay = document.querySelector('.modal-overlay');
        const commentModalClose = this.commentModal?.querySelector('.close-modal');

        if (openModalBtn) {
            openModalBtn.addEventListener('click', () => this.openModal());
        }

        if (closeModalBtn) {
            closeModalBtn.addEventListener('click', () => this.closeModal());
        }

        if (modalOverlay) {
            modalOverlay.addEventListener('click', (e) => {
                if (e.target === modalOverlay) this.closeModal();
            });
        }

        if (commentModalClose) {
            commentModalClose.addEventListener('click', () => this.closeCommentModal());
        }

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                if (this.uploadModal?.classList.contains('active')) {
                    this.closeModal();
                }
                if (this.commentModal?.classList.contains('active')) {
                    this.closeCommentModal();
                }
            }
        });
    }

    setupCommentInteractions() {
        if (!this.commentModal) return;

        const closeBtn = this.commentModal.querySelector('.close-modal');
        closeBtn?.addEventListener('click', () => this.closeCommentModal());

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.commentModal.classList.contains('active')) {
                this.closeCommentModal();
            }
        });

        const commentForm = this.commentModal.querySelector('.comment-form');
        commentForm?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const textarea = commentForm.querySelector('textarea');
            const comment = await this.handleComment(this.commentModal.dataset.videoId, textarea.value);
            if (comment) {
                textarea.value = '';
                this.updateCommentsUI(this.commentModal.dataset.videoId);
            }
        });
    }
	setupIntersectionObserver() {
        const options = {
            root: null,
            rootMargin: '0px',
            threshold: 0.8
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                const video = entry.target.querySelector('.video-player');
                if (!video) return;

                if (entry.isIntersecting) {
                    video.play().catch(err => console.log('Autoplay prevented'));
                    this.animateVideoEntry(entry.target);
                    this.handleVideoView(entry.target.dataset.videoId);
                } else {
                    video.pause();
                    video.currentTime = 0;
                }
            });
        }, options);

        document.querySelectorAll('.reel').forEach(reel => observer.observe(reel));
    }
	
	async handleVideoView(videoId) {
    if (this.viewedVideos.has(videoId)) return;

    try {
        const response = await fetch('api.php?action=update_views', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                videoId: videoId,
                username: this.currentUsername,
                userId: this.userId
            })
        });

        const data = await response.json();
        if (data.success) {
            this.viewedVideos.add(videoId);
            
            const video = this.videos.find(v => v.id === videoId);
            if (video) {
                video.views = data.stats.views;
                this.updateVideoStats(videoId);
            }
        }
    } catch (error) {
        console.error('Error updating view count:', error);
    }
}

    updateVideoStats(videoId) {
        const video = this.videos.find(v => v.id === videoId);
        const statsElement = document.querySelector(`[data-video-id="${videoId}"] .video-stats`);
        
        if (statsElement && video) {
            statsElement.textContent = `@${video.username} • ${this.formatNumber(video.views)} views`;
        }
    }
	
	closeCommentModal() {
        if (!this.commentModal) return;

        gsap.to(this.commentModal, {
            x: '100%',
            duration: 0.3,
            ease: "power2.in",
            onComplete: () => {
                this.commentModal.classList.remove('active');
                document.body.style.overflow = '';
            }
        });
    }

    findComment(commentId, comments) {
        if (!Array.isArray(comments)) return null;

        for (const comment of comments) {
            if (comment.id === commentId) return comment;
            
            // Search in replies
            if (comment.replies && comment.replies.length > 0) {
                const found = this.findComment(commentId, comment.replies);
                if (found) return found;
            }
        }
        return null;
    }

    countTotalComments(comments) {
        if (!Array.isArray(comments)) return 0;
        let total = 0;
        
        const countNestedComments = (comment) => {
            let count = 1; // Count the comment itself
            if (Array.isArray(comment.replies)) {
                comment.replies.forEach(reply => {
                    count += countNestedComments(reply); // Count each reply recursively
                });
            }
            return count;
        };

        comments.forEach(comment => {
            total += countNestedComments(comment);
        });

        return total;
    }

    animateVideoEntry(reel) {
        const videoInfo = reel.querySelector('.video-info');
        const videoActions = reel.querySelector('.video-actions');

        gsap.fromTo([videoInfo, videoActions],
            { opacity: 0, y: 20 },
            { 
                opacity: 1, 
                y: 0, 
                duration: 0.5, 
                stagger: 0.1,
                ease: "power2.out"
            }
        );
    }

async loadVideos() {
    try {
        // First ensure the maps are initialized
        this.videoLikes = this.videoLikes || new Map();
        this.videoComments = this.videoComments || new Map();

        // Load videos
        const response = await fetch('api.php?action=get_videos');
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        
        const data = await response.json();
        if (!data.success) throw new Error('Failed to load videos');

        // Load likes and comments
        await this.loadLikesAndComments();
        
        // Map the videos with additional data
        this.videos = (data.videos || []).map(video => ({
            ...video,
            username: video.username || this.generateUsername(),
            shareUrl: this.createShareUrl(video.title, video.id),
            likes: Array.from(this.videoLikes.get(video.id) || []),
            comments: Array.from(this.videoComments.get(video.id) || []),
            views: 0
        }));

        if (this.reelsContainer) {
            this.renderVideos();
        }
    } catch (error) {
        console.error('Error loading videos:', error);
        this.videos = [];
        this.showToast('Failed to load videos', 'error');
    }
}

async loadLikesAndComments() {
    try {
        // Initialize Maps
        this.videoLikes = new Map();
        this.videoComments = new Map();

        const [likesResponse, commentsResponse] = await Promise.all([
            fetch('api.php?action=get_stats').then(res => res.json()).catch(() => ({ success: true, stats: {} })),
            fetch('api.php?action=get_comments').then(res => res.json()).catch(() => ({ success: true, comments: {} }))
        ]);

        // Handle stats/likes
        if (likesResponse.stats) {
            Object.entries(likesResponse.stats).forEach(([videoId, stats]) => {
                if (stats && Array.isArray(stats.likes)) {
                    this.videoLikes.set(videoId, stats.likes);
                } else {
                    this.videoLikes.set(videoId, []);
                }
            });
        }

        // Handle comments
        if (commentsResponse.comments) {
            Object.entries(commentsResponse.comments).forEach(([videoId, comments]) => {
                this.videoComments.set(videoId, Array.isArray(comments) ? comments : []);
            });
        }
    } catch (error) {
        console.error('Error loading likes and comments:', error);
        // Ensure Maps are initialized even if loading fails
        this.videoLikes = new Map();
        this.videoComments = new Map();
    }
}


    processComments(comments) {
        if (!Array.isArray(comments)) return [];
        
        const commentMap = new Map();
        const topLevelComments = [];
        
        comments.forEach(comment => {
            comment.replies = comment.replies || [];
            commentMap.set(comment.id, comment);
            
            if (!comment.parentCommentId) {
                topLevelComments.push(comment);
            } else {
                const parentComment = commentMap.get(comment.parentCommentId);
                if (parentComment) {
                    parentComment.replies.push(comment);
                }
            }
        });
        
        return topLevelComments;
    }

    countTotalReplies(comment) {
        let total = comment.replies.length;
        comment.replies.forEach(reply => {
            total += this.countTotalReplies(reply);
        });
        return total;
    }

    renderVideos() {
        if (!this.reelsContainer) return;

        gsap.to(this.reelsContainer, {
            opacity: 0,
            duration: 0.2,
            onComplete: () => {
                this.reelsContainer.innerHTML = '';
                this.videos.forEach((video, index) => {
                    const reel = this.createVideoReel(video, index);
                    this.reelsContainer.appendChild(reel);
                });
                
                gsap.to(this.reelsContainer, {
                    opacity: 1,
                    duration: 0.2,
                    onComplete: () => {
                        this.setupIntersectionObserver();
                    }
                });
            }
        });
    }

    createVideoReel(video, index) {
    const reel = this.videoTemplate.content.cloneNode(true).querySelector('.reel');
    const videoElement = reel.querySelector('.video-player');
    const videoInfo = reel.querySelector('.video-info');
    const title = videoInfo.querySelector('.video-title');
    const stats = videoInfo.querySelector('.video-stats');
    
    // Set video source
    videoElement.src = video.url;
    videoElement.loop = true;
    videoElement.muted = true;
    videoElement.setAttribute('playsinline', '');
    
    // Set video info
    if (title) title.textContent = video.title || 'Untitled';
    if (stats) {
        stats.textContent = `@${video.username || 'anonymous'} • ${this.formatNumber(video.views || 0)} views`;
    }
    
    // Set video ID for interactions
    reel.setAttribute('data-video-id', video.id);
    
    // Setup interactions
    this.setupVideoInteractions(reel, video);

    return reel;
}
	setupVideoInteractions(reel, video) {
        if (!reel || !video) return;

        const videoElement = reel.querySelector('.video-player');
        const likeBtn = reel.querySelector('.like-btn');
        const shareBtn = reel.querySelector('.share-btn');
        const commentBtn = reel.querySelector('.comment-btn');
        const likeCount = likeBtn?.querySelector('.count');
        const commentCount = commentBtn?.querySelector('.count');

        // Set initial like count
        if (likeCount) {
            likeCount.textContent = this.formatNumber(video.likes.length);
            if (video.likes.includes(this.currentUsername)) {
                likeBtn.classList.add('liked');
            }
        }

        // Set initial comment count (including all replies)
        if (commentCount) {
            const totalComments = video.comments.reduce((total, comment) => {
                return total + 1 + this.countTotalReplies(comment);
            }, 0);
            commentCount.textContent = this.formatNumber(totalComments);
        }

        // Double tap to like
        let lastTap = 0;
        reel.addEventListener('touchstart', (e) => {
            const currentTime = new Date().getTime();
            const tapLength = currentTime - lastTap;
            if (tapLength < 300 && tapLength > 0) {
                this.handleLike(video.id);
                this.showLikeAnimation(e.touches[0].clientX, e.touches[0].clientY);
            }
            lastTap = currentTime;
        });

        videoElement?.addEventListener('click', () => {
            if (videoElement.paused) {
                videoElement.play().catch(err => console.log('Playback prevented'));
            } else {
                videoElement.pause();
            }
        });

        likeBtn?.addEventListener('click', (e) => {
            e.stopPropagation();
            this.handleLike(video.id);
        });

        shareBtn?.addEventListener('click', (e) => {
            e.stopPropagation();
            this.handleShare(video);
        });

        commentBtn?.addEventListener('click', (e) => {
            e.stopPropagation();
            this.openCommentModal(video.id);
        });
    }

    async handleLike(videoId) {
    if (!this.currentUsername) return;

    const video = this.videos.find(v => v.id === videoId);
    if (!video) return;

    try {
        const isLiked = video.likes.includes(this.currentUsername);
        const response = await fetch('api.php?action=update_likes', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                videoId: videoId,
                username: this.currentUsername,
                userId: this.userId,
                action: isLiked ? 'unlike' : 'like'
            })
        });

        const data = await response.json();
        if (data.success) {
            if (isLiked) {
                video.likes = video.likes.filter(username => username !== this.currentUsername);
            } else {
                video.likes.push(this.currentUsername);
            }
            this.updateLikeUI(videoId);
        }
    } catch (error) {
        console.error('Error updating like:', error);
        this.showToast('Failed to update like', 'error');
    }
}

    updateLikeUI(videoId) {
        const likeBtn = document.querySelector(`[data-video-id="${videoId}"] .like-btn`);
        const likeCount = likeBtn?.querySelector('.count');
        const video = this.videos.find(v => v.id === videoId);
        
        if (likeBtn && video) {
            const isLiked = video.likes.includes(this.currentUsername);
            likeBtn.classList.toggle('liked', isLiked);
            if (likeCount) {
                likeCount.textContent = this.formatNumber(video.likes.length);
                gsap.from(likeCount, {
                    scale: 1.2,
                    duration: 0.3,
                    ease: "back.out(1.7)"
                });
            }
        }
    }

    showLikeAnimation(x, y) {
        const heart = document.createElement('div');
        heart.className = 'heart-animation';
        heart.innerHTML = '❤️';
        heart.style.left = `${x - 25}px`;
        heart.style.top = `${y - 25}px`;
        document.body.appendChild(heart);

        gsap.to(heart, {
            y: -100,
            opacity: 0,
            scale: 2,
            duration: 1,
            ease: "power2.out",
            onComplete: () => heart.remove()
        });
    }

createTimelineComment(comment, depth = 0) {
    const el = document.createElement('div');
    el.className = 'comment-timeline-item';
    el.dataset.commentId = comment.id;
    el.dataset.depth = depth;

    // Calculate total replies recursively
    const totalReplies = this.calculateTotalReplies(comment);
    const hasReplies = totalReplies > 0;
    
    el.innerHTML = `
        <div class="timeline-item">
            <div class="comment-content">
                ${depth > 0 ? `<div class="reply-thread-line" style="background: ${this.generateThreadColor(depth)}"></div>` : ''}
                <div class="comment-header">
                    <div class="user-info">
                        <div class="user-avatar" style="background: ${this.generateAvatarColor(comment.username)}">
                            ${comment.username.charAt(0).toUpperCase()}
                        </div>
                        <div class="user-details">
                            <span class="comment-username">@${comment.username}</span>
                            <span class="comment-time">${this.formatTime(comment.timestamp)}</span>
                            ${depth > 0 ? '<span class="reply-indicator">Reply</span>' : ''}
                        </div>
                    </div>
                </div>
                <div class="comment-text">${this.escapeHtml(comment.text || comment.comment)}</div>
                <div class="comment-actions">
                    <button class="reply-btn">
                        <i class="fas fa-reply"></i>
                        ${hasReplies ? `Reply (${this.formatNumber(totalReplies)})` : 'Reply'}
                    </button>
                </div>
            </div>
        </div>
        <div class="comment-replies"></div>
    `;

    // Add replies if they exist
    const repliesContainer = el.querySelector('.comment-replies');
    if (hasReplies && comment.replies) {
        comment.replies.forEach(reply => {
            repliesContainer.appendChild(this.createTimelineComment(reply, depth + 1));
        });
    }

    // Setup reply button interaction
    const replyBtn = el.querySelector('.reply-btn');
    replyBtn.addEventListener('click', () => this.showReplyForm(comment.id, depth));

    return el;
}

// Add this method to generate thread colors
generateThreadColor(depth) {
    const colors = [
        '#2196F3',  // Material Blue
        '#FF5252',  // Coral Red
        '#4CAF50',  // Material Green
        '#FF9800',  // Material Orange
        '#9C27B0',  // Material Purple
        '#00BCD4',  // Cyan
        '#F44336',  // Material Red
        '#8BC34A',  // Light Green
        '#673AB7',  // Deep Purple
        '#FF4081',  // Pink
        '#009688',  // Teal
        '#FFC107',  // Amber
        '#3F51B5',  // Indigo
        '#CDDC39',  // Lime
        '#795548'   // Brown
    ];
    return colors[depth % colors.length];
}
	
	// Modify updateCommentsUI
updateCommentsUI(videoId) {
    if (!this.commentModal) return;
    
    const commentsList = this.commentModal.querySelector('.comments-list');
    const video = this.videos.find(v => v.id === videoId);
    
    if (!commentsList || !video) return;
    
    commentsList.innerHTML = '';
    
    if (video.comments) {
        video.comments.forEach(comment => {
            commentsList.appendChild(this.createTimelineComment(comment, 0));
        });
    }
}
	
	calculateTotalReplies(comment) {
        let total = 0;
        if (comment.replies && Array.isArray(comment.replies)) {
            total = comment.replies.length;
            comment.replies.forEach(reply => {
                total += this.calculateTotalReplies(reply);
            });
        }
        return total;
    }

    generateAvatarColor(username) {
        const colors = [
            'linear-gradient(45deg, #FF6B6B, #FF8E8E)',
            'linear-gradient(45deg, #4ECDC4, #6EE7DE)',
            'linear-gradient(45deg, #45B7D1, #6AD5EE)',
            'linear-gradient(45deg, #96C93D, #B5E555)',
            'linear-gradient(45deg, #9B59B6, #B07CC6)',
            'linear-gradient(45deg, #3498DB, #5DADE2)',
            'linear-gradient(45deg, #FC913A, #FFB067)',
            'linear-gradient(45deg, #2ECC71, #55D98D)'
        ];
        
        // Generate a consistent index based on username
        const index = username.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
        return colors[index % colors.length];
    }
	
	createTimelineReply(reply) {
        const el = document.createElement('div');
        el.className = 'timeline-reply';
        el.dataset.replyId = reply.id;

        el.innerHTML = `
            <div class="reply-content">
                <div class="reply-header">
                    <div class="user-info">
                        <div class="user-avatar">${reply.username.charAt(0).toUpperCase()}</div>
                        <span class="reply-username">@${reply.username}</span>
                    </div>
                    <span class="reply-time">${this.formatTime(reply.timestamp)}</span>
                </div>
                <div class="reply-text">${this.escapeHtml(reply.text || reply.comment)}</div>
                <div class="reply-actions">
                    <button class="reply-btn">
                        <i class="fas fa-reply"></i>
                        Reply
                    </button>
                </div>
            </div>
        `;

        const replyBtn = el.querySelector('.reply-btn');
        replyBtn.addEventListener('click', () => {
            this.showReplyForm(reply.id);
        });

        return el;
    }

    openCommentModal(videoId) {
        if (!this.commentModal) return;

        const video = this.videos.find(v => v.id === videoId);
        if (!video) return;

        this.commentModal.dataset.videoId = videoId;
        const commentsList = this.commentModal.querySelector('.comments-list');
        const commentForm = this.commentModal.querySelector('.comment-form');
        
        commentsList.innerHTML = '';
        
        // Display initial comments with timeline layout
        const initialComments = video.comments.slice(0, this.commentsLimit);
        initialComments.forEach(comment => {
            commentsList.appendChild(this.createTimelineComment(comment));
        });

        // Add "Show more comments" button if needed
        if (video.comments.length > this.commentsLimit) {
            const showMoreBtn = document.createElement('button');
            showMoreBtn.className = 'show-more-comments';
            showMoreBtn.innerHTML = `Show more comments (${video.comments.length - this.commentsLimit} more)`;
            showMoreBtn.onclick = () => this.loadMoreComments(videoId);
            commentsList.appendChild(showMoreBtn);
        }

        // Setup comment form
        commentForm.onsubmit = async (e) => {
            e.preventDefault();
            const textarea = commentForm.querySelector('textarea');
            const submitBtn = commentForm.querySelector('button[type="submit"]');
            
            if (!textarea.value.trim()) return;
            
            submitBtn.disabled = true;
            const comment = await this.handleComment(videoId, textarea.value.trim());
            
            if (comment) {
                textarea.value = '';
                const commentElement = this.createTimelineComment(comment);
                
                if (commentsList.firstChild) {
                    commentsList.insertBefore(commentElement, commentsList.firstChild);
                } else {
                    commentsList.appendChild(commentElement);
                }
                
                gsap.from(commentElement, {
                    height: 0,
                    opacity: 0,
                    duration: 0.3,
                    ease: "power2.out"
                });

                // Update comment counter
                const commentBtn = document.querySelector(`[data-video-id="${videoId}"] .comment-btn .count`);
                if (commentBtn) {
                    const totalComments = this.countTotalComments(video.comments);
                    commentBtn.textContent = this.formatNumber(totalComments);
                    gsap.from(commentBtn, {
                        scale: 1.2,
                        duration: 0.3,
                        ease: "back.out(1.7)"
                    });
                }
            }
            
            submitBtn.disabled = false;
        };

        this.commentModal.classList.add('active');
        document.body.style.overflow = 'hidden';
        
        gsap.to(this.commentModal, {
            x: '0%',
            duration: 0.3,
            ease: "power2.out"
        });
    }

    async loadMoreComments(videoId) {
        const video = this.videos.find(v => v.id === videoId);
        if (!video) return;

        const commentsList = this.commentModal.querySelector('.comments-list');
        const showMoreBtn = commentsList.querySelector('.show-more-comments');
        
        if (showMoreBtn) {
            showMoreBtn.innerHTML = '<div class="loading-spinner"></div>';
            showMoreBtn.disabled = true;
        }

        await new Promise(resolve => setTimeout(resolve, 300));

        const currentCommentsCount = commentsList.querySelectorAll('.comment-timeline-item').length;
        const nextComments = video.comments.slice(
            currentCommentsCount, 
            currentCommentsCount + this.commentsLimit
        );

        nextComments.forEach(comment => {
            const commentEl = this.createTimelineComment(comment);
            gsap.set(commentEl, { opacity: 0, y: 20 });
            showMoreBtn ? 
                commentsList.insertBefore(commentEl, showMoreBtn) : 
                commentsList.appendChild(commentEl);
            
            gsap.to(commentEl, {
                opacity: 1,
                y: 0,
                duration: 0.3,
                ease: "power2.out"
            });
        });

        const remainingComments = video.comments.length - (currentCommentsCount + nextComments.length);
        if (remainingComments > 0) {
            showMoreBtn.innerHTML = `Show more comments (${remainingComments} more)`;
            showMoreBtn.disabled = false;
        } else {
            showMoreBtn.remove();
        }
    }

   async loadMoreReplies(commentId, currentlyDisplayed) {
        const comment = this.findComment(commentId, this.videos.find(v => v.id === this.commentModal.dataset.videoId).comments);
        if (!comment) return;

        const commentEl = document.querySelector(`[data-comment-id="${commentId}"]`);
        if (!commentEl) return;

        const repliesContainer = commentEl.querySelector('.comment-replies');
        const loadMoreBtn = commentEl.querySelector('.load-more-replies');
        
        if (loadMoreBtn) {
            loadMoreBtn.innerHTML = '<div class="loading-spinner"></div>';
            loadMoreBtn.disabled = true;
        }

        // Simulate loading delay
        await new Promise(resolve => setTimeout(resolve, 300));

        const nextReplies = comment.replies.slice(currentlyDisplayed);
        const depth = parseInt(commentEl.dataset.depth || '0');

        nextReplies.forEach(reply => {
            const replyEl = this.createTimelineComment(reply, depth + 1);
            gsap.set(replyEl, { opacity: 0, x: -20 });
            repliesContainer.appendChild(replyEl);
            
            gsap.to(replyEl, {
                opacity: 1,
                x: 0,
                duration: 0.3,
                ease: "power2.out"
            });
        });

        if (loadMoreBtn) {
            loadMoreBtn.remove();
        }
    }
	showReplyForm(commentId) {
        document.querySelectorAll('.reply-form').forEach(form => form.remove());

        const commentEl = document.querySelector(`[data-comment-id="${commentId}"]`);
        if (!commentEl) return;

        const form = document.createElement('form');
        form.className = 'reply-form';
        form.innerHTML = `
            <div class="reply-form-content">
                <div class="reply-input-wrapper">
                    <textarea placeholder="Write a reply..." required></textarea>
                </div>
                <div class="reply-form-actions">
                    <button type="button" class="cancel-reply">Cancel</button>
                    <button type="submit" class="submit-reply">
                        <i class="fas fa-paper-plane"></i>
                        Reply
                    </button>
                </div>
            </div>
        `;

        const textarea = form.querySelector('textarea');
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        });

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const submitBtn = form.querySelector('.submit-reply');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<div class="loading-spinner"></div>';

            try {
                const reply = await this.handleComment(
                    this.commentModal.dataset.videoId,
                    textarea.value.trim(),
                    commentId
                );

                if (reply) {
                    const repliesContainer = commentEl.querySelector('.timeline-replies') || 
                        this.createTimelineReplies(commentEl);
                    
                    const replyElement = this.createTimelineReply(reply);
                    repliesContainer.insertBefore(replyElement, repliesContainer.firstChild);

                    gsap.from(replyElement, {
                        height: 0,
                        opacity: 0,
                        duration: 0.3,
                        ease: "power2.out"
                    });

                    form.remove();
                    
                    // Update reply count in the comment's reply button
                    const replyBtn = commentEl.querySelector('.reply-btn');
                    if (replyBtn) {
                        const totalReplies = this.countTotalReplies(this.findComment(commentId, this.videos.find(v => v.id === this.commentModal.dataset.videoId).comments));
                        replyBtn.innerHTML = `
                            <i class="fas fa-reply"></i>
                            Reply (${this.formatNumber(totalReplies)})
                        `;
                    }

                    // Update total comment count
                    this.updateCommentCount(this.commentModal.dataset.videoId);
                    this.showToast('Reply posted successfully', 'success');
                }
            } catch (error) {
                console.error('Error posting reply:', error);
                this.showToast('Failed to post reply', 'error');
            } finally {
                if (!form.isConnected) return;
                submitBtn.disabled = false;
                submitBtn.innerHTML = `
                    <i class="fas fa-paper-plane"></i>
                    Reply
                `;
            }
        });

        form.querySelector('.cancel-reply').addEventListener('click', () => form.remove());

        const insertAfter = commentEl.querySelector('.comment-content');
        if (insertAfter) {
            insertAfter.after(form);
        } else {
            commentEl.appendChild(form);
        }

        gsap.from(form, {
            height: 0,
            opacity: 0,
            duration: 0.3,
            ease: "power2.out",
            onComplete: () => textarea.focus()
        });
    }
	
	async handleComment(videoId, commentText, parentCommentId = null) {
    if (!this.currentUsername || !commentText.trim()) return;

    try {
        const response = await fetch('api.php?action=update_comments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                videoId: videoId,
                username: this.currentUsername,
                userId: this.userId,
                comment: commentText.trim(),
                parentCommentId: parentCommentId
            })
        });

        const data = await response.json();
        if (!data.success) throw new Error(data.error);

        const video = this.videos.find(v => v.id === videoId);
        if (!video) throw new Error('Video not found');

        if (parentCommentId) {
            const parentComment = this.findComment(parentCommentId, video.comments);
            if (parentComment) {
                if (!parentComment.replies) parentComment.replies = [];
                parentComment.replies.unshift(data.comment);
            }
        } else {
            if (!video.comments) video.comments = [];
            video.comments.unshift(data.comment);
        }

        // Update comment count UI
        const commentBtn = document.querySelector(`[data-video-id="${videoId}"] .comment-btn .count`);
        if (commentBtn) {
            const totalComments = this.countTotalComments(video.comments);
            commentBtn.textContent = this.formatNumber(totalComments);
            gsap.from(commentBtn, {
                scale: 1.2,
                duration: 0.3,
                ease: "back.out(1.7)"
            });
        }

        return data.comment;

    } catch (error) {
        console.error('Error posting comment:', error);
        this.showToast('Failed to post comment', 'error');
        return null;
    }
}

    createTimelineReplies(commentEl) {
        const container = document.createElement('div');
        container.className = 'timeline-replies';
        commentEl.appendChild(container);
        return container;
    }

    handleShare(video) {
        if (navigator.share) {
            navigator.share({
                title: video.title,
                text: `Check out this video: ${video.title}`,
                url: video.shareUrl
            }).catch(err => console.log('Share failed:', err));
        } else {
            this.showShareDialog(video);
        }
    }

    showShareDialog(video) {
        const dialog = document.createElement('div');
        dialog.className = 'share-dialog';
        dialog.innerHTML = `
            <div class="share-dialog-content">
                <h3>Share Video</h3>
                <div class="share-buttons">
                    <button onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(video.shareUrl)}')">
                        <i class="fab fa-facebook"></i>
                        Facebook
                    </button>
                    <button onclick="window.open('https://wa.me/?text=${encodeURIComponent(video.title + ' ' + video.shareUrl)}')">
                        <i class="fab fa-whatsapp"></i>
                        WhatsApp
                    </button>
                    <button onclick="window.open('https://t.me/share/url?url=${encodeURIComponent(video.shareUrl)}&text=${encodeURIComponent(video.title)}')">
                        <i class="fab fa-telegram"></i>
                        Telegram
                    </button>
                    <button onclick="navigator.clipboard.writeText('${video.shareUrl}').then(() => window.videoApp.showToast('Link copied!'))">
                        <i class="fas fa-link"></i>
                        Copy Link
                    </button>
                </div>
                <button class="close-dialog">Close</button>
            </div>
        `;

        document.body.appendChild(dialog);
        
        gsap.fromTo(dialog.querySelector('.share-dialog-content'),
            { y: 20, opacity: 0 },
            { y: 0, opacity: 1, duration: 0.3 }
        );

        dialog.querySelector('.close-dialog').addEventListener('click', () => {
            gsap.to(dialog, {
                opacity: 0,
                duration: 0.3,
                onComplete: () => dialog.remove()
            });
        });
    }
	setupUploadHandlers() {
        if (!this.dropArea || !this.fileInput || !this.uploadForm) return;

        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            this.dropArea.addEventListener(eventName, (e) => {
                e.preventDefault();
                e.stopPropagation();
            });
        });

        this.dropArea.addEventListener('dragenter', () => this.dropArea.classList.add('dragover'));
        this.dropArea.addEventListener('dragleave', () => this.dropArea.classList.remove('dragover'));

        this.dropArea.addEventListener('drop', (e) => {
            this.dropArea.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            if (file?.type.startsWith('video/')) {
                this.handleFileSelect(file);
            } else {
                this.showToast('Please upload a video file', 'error');
            }
        });

        this.dropArea.addEventListener('click', () => {
            if (!this.isUploading) {
                this.fileInput.click();
            }
        });

        this.fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file?.type.startsWith('video/')) {
                this.handleFileSelect(file);
            }
        });

        this.uploadForm.addEventListener('submit', (e) => this.handleUpload(e));
    }

    handleFileSelect(file) {
        if (!this.dropArea || this.isUploading) return;

        const preview = document.createElement('video');
        preview.src = URL.createObjectURL(file);
        preview.controls = true;
        preview.style.maxWidth = '200px';
        preview.style.borderRadius = '8px';
        
        const previewContainer = document.createElement('div');
        previewContainer.className = 'preview-container';
        previewContainer.appendChild(preview);

        this.dropArea.innerHTML = '';
        this.dropArea.appendChild(previewContainer);

        gsap.from(preview, {
            scale: 0.8,
            opacity: 0,
            duration: 0.3,
            ease: "back.out(1.7)"
        });

        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        this.fileInput.files = dataTransfer.files;
    }

    async handleUpload(e) {
    e.preventDefault();
    if (this.isUploading) return;

    const form = e.target;
    const formData = new FormData(form);
    const titleInput = form.querySelector('#title');
    const descriptionInput = form.querySelector('#description');
    const tagsInput = form.querySelector('#tags');

    // Check for video file
    if (!this.fileInput.files[0]) {
        this.showToast('Please select a video to upload', 'error');
        return;
    }

    // Validate title explicitly
    const title = titleInput?.value?.trim();
    if (!title) {
        this.showToast('Please enter a title', 'error');
        titleInput?.focus();
        return;
    }

    // Build FormData with explicit values
    const uploadData = new FormData();
    uploadData.append('video', this.fileInput.files[0]);
    uploadData.append('title', title);
    uploadData.append('description', descriptionInput?.value?.trim() || '');
    uploadData.append('tags', tagsInput?.value?.trim() || '');
    uploadData.append('userId', this.userId);
    uploadData.append('username', this.currentUsername);

    this.isUploading = true;
    this.progressBar.parentElement.hidden = false;
    this.updateUploadProgress(0);

    try {
        const response = await fetch('api.php?action=upload', {
            method: 'POST',
            body: uploadData
        });

        if (!response.ok) {
            throw new Error(`Upload failed: ${response.statusText}`);
        }

        const data = await response.json();
        if (data.success) {
            this.showToast('Video uploaded successfully!', 'success');
            this.closeModal();
            await this.loadVideos();
        } else {
            throw new Error(data.message || 'Upload failed');
        }
    } catch (error) {
        console.error('Upload error:', error);
        this.showToast(error.message || 'Upload failed', 'error');
    } finally {
        this.isUploading = false;
        this.progressBar.parentElement.hidden = true;
    }
}

    updateUploadProgress(progress) {
        const percentage = Math.min(Math.round(progress), 100);
        this.progressBar.style.width = `${percentage}%`;
        this.progressText.textContent = `Uploading: ${percentage}%`;
    }

    openModal() {
        if (!this.uploadModal) return;

        this.uploadModal.classList.add('active');
        document.body.style.overflow = 'hidden';
        
        gsap.fromTo(this.uploadModal,
            { opacity: 0, y: 20 },
            { opacity: 1, y: 0, duration: 0.3, ease: "back.out(1.7)" }
        );
    }

    closeModal() {
        if (!this.uploadModal) return;

        gsap.to(this.uploadModal, {
            opacity: 0,
            y: 20,
            duration: 0.3,
            ease: "power2.in",
            onComplete: () => {
                this.uploadModal.classList.remove('active');
                document.body.style.overflow = '';
                this.resetUploadForm();
            }
        });
    }

    resetUploadForm() {
        if (!this.uploadForm || !this.dropArea) return;

        this.uploadForm.reset();
        this.fileInput.value = '';
        if (this.progressBar) {
            this.progressBar.style.width = '0%';
            this.progressBar.parentElement.hidden = true;
        }
        if (this.progressText) {
            this.progressText.textContent = 'Uploading: 0%';
        }
        this.dropArea.innerHTML = `
            <div class="file-message">
                <div class="upload-icon">📁</div>
                <p>Drag & drop your video or click to browse</p>
            </div>
        `;
        this.isUploading = false;
    }

    showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;
        document.body.appendChild(toast);

        gsap.fromTo(toast,
            { y: 50, opacity: 0 },
            { 
                y: 0, 
                opacity: 1, 
                duration: 0.3,
                ease: "power2.out",
                onComplete: () => {
                    setTimeout(() => {
                        gsap.to(toast, {
                            y: -50,
                            opacity: 0,
                            duration: 0.3,
                            ease: "power2.in",
                            onComplete: () => toast.remove()
                        });
                    }, 3000);
                }
            }
        );
    }

    formatNumber(num) {
        if (!num) return '0';
        if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
        if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
        return num.toString();
    }

    formatTime(timestamp) {
        const date = new Date(timestamp);
        const now = new Date();
        const diff = now - date;

        const seconds = Math.floor(diff / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        const days = Math.floor(hours / 24);

        if (days > 7) return date.toLocaleDateString();
        if (days > 0) return `${days}d ago`;
        if (hours > 0) return `${hours}h ago`;
        if (minutes > 0) return `${minutes}m ago`;
        return 'Just now';
    }

    escapeHtml(text) {
        if (!text) return '';
        return text
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
}

// Initialize the app when the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    window.videoApp = new VideoApp();
});