// xend-app.js - Add this to your HTML file inside the <script> tags at the bottom
// Backend URL
const backendUrl = 'https://api.xend.com/v1';

// Current user state
let currentUser = null;
const isAdmin = (email) => email === 'prokodgamer@gmail.com'; // Check if user is the head admin

// Video feed type
let currentFeedType = 'shorts';

// Sample video data for demonstration
const demoShortVideos = [
    {
        id: 's1',
        creator: 'danceninja',
        caption: 'Check out this new move! 🔥 #dance #viral',
        likes: 2451,
        comments: 183,
        shares: 421
    },
    {
        id: 's2',
        creator: 'techreview',
        caption: 'Is this the future of smartphones? #tech #review',
        likes: 1837,
        comments: 256,
        shares: 129
    }
];

const demoLongVideos = [
    {
        id: 'l1',
        title: 'How to Build a Website in 2025',
        creator: 'techreview',
        views: '142K',
        age: '3 days ago'
    },
    {
        id: 'l2',
        title: 'Ultimate Gaming Setup Tour',
        creator: 'gamemaster445',
        views: '89K',
        age: '1 week ago'
    },
    {
        id: 'l3',
        title: 'I Tried Living Without Social Media for 30 Days',
        creator: 'lifestyleblogger',
        views: '217K',
        age: '2 weeks ago'
    },
    {
        id: 'l4',
        title: 'The Truth About AI in 2025',
        creator: 'futurethinker',
        views: '308K',
        age: '5 days ago'
    }
];

// UI state management
const showSection = (sectionId) => {
    // Hide all sections
    const sections = ['homePage', 'adminPanel', 'loginForm', 'signupForm', 'forgotPasswordForm', 'uploadVideo'];
    sections.forEach(section => {
        document.getElementById(section).classList.add('hidden');
    });
    
    // Show requested section
    document.getElementById(sectionId).classList.remove('hidden');
};

// Toggle sidebar expanded state
document.getElementById('menuToggle').addEventListener('click', () => {
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.getElementById('mainContent');
    sidebar.classList.toggle('expanded');
    mainContent.classList.toggle('shifted');
});

// Switch between short and long form feeds
function switchFeed(feedType) {
    currentFeedType = feedType;
    const shortsFeed = document.getElementById('shortsFeed');
    const longFormFeed = document.getElementById('longFormFeed');
    const feedButtons = document.querySelectorAll('.feed-button');
    
    // Update active button
    feedButtons.forEach(button => {
        button.classList.remove('active');
    });
    
    if (feedType === 'shorts') {
        shortsFeed.classList.remove('hidden');
        longFormFeed.classList.add('hidden');
        feedButtons[0].classList.add('active');
    } else {
        shortsFeed.classList.add('hidden');
        longFormFeed.classList.remove('hidden');
        feedButtons[1].classList.add('active');
    }
    
    // Load appropriate content
    loadVideos();
}

// Load videos based on current feed type
function loadVideos() {
    if (currentFeedType === 'shorts') {
        loadShortVideos();
    } else {
        loadLongVideos();
    }
}

// Load short videos
function loadShortVideos() {
    const shortsFeed = document.getElementById('shortsFeed');
    shortsFeed.innerHTML = '';
    
    demoShortVideos.forEach(video => {
        const videoElement = document.createElement('div');
        videoElement.className = 'short-video';
        videoElement.innerHTML = `
            <div class="short-video-content"></div>
            <div class="video-overlay">
                <div class="video-info-overlay">
                    <div class="video-creator">
                        <div class="creator-name">@${video.creator}</div>
                        <div class="video-caption">${video.caption}</div>
                    </div>
                    <div class="video-actions">
                        <div class="action-button">
                            <div>❤️</div>
                            <div class="action-count">${video.likes}</div>
                        </div>
                        <div class="action-button">
                            <div>💬</div>
                            <div class="action-count">${video.comments}</div>
                        </div>
                        <div class="action-button">
                            <div>↪️</div>
                            <div class="action-count">${video.shares}</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        shortsFeed.appendChild(videoElement);
    });
}

// Load long videos
function loadLongVideos() {
    const longFormFeed = document.getElementById('longFormFeed');
    longFormFeed.innerHTML = '';
    
    demoLongVideos.forEach(video => {
        const videoElement = document.createElement('div');
        videoElement.className = 'video-item';
        videoElement.innerHTML = `
            <div class="video-thumbnail"></div>
            <div class="video-info">
                <div class="creator-avatar">${video.creator.charAt(0).toUpperCase()}</div>
                <div class="video-details">
                    <div class="video-title">${video.title}</div>
                    <div class="channel-name">@${video.creator}</div>
                    <div class="video-stats">${video.views} views • ${video.age}</div>
                </div>
            </div>
        `;
        longFormFeed.appendChild(videoElement);
    });
}

// Toggle video upload type
function toggleVideoType(type) {
    const shortFormBtn = document.getElementById('shortFormBtn');
    const longFormBtn = document.getElementById('longFormBtn');
    const longFormOptions = document.getElementById('longFormOptions');
    
    if (type === 'short') {
        shortFormBtn.classList.add('active');
        longFormBtn.classList.remove('active');
        longFormOptions.classList.add('hidden');
    } else {
        shortFormBtn.classList.remove('active');
        longFormBtn.classList.add('active');
        longFormOptions.classList.remove('hidden');
    }
}

// Show different sections
function showHomePage() {
    showSection('homePage');
    loadVideos();
}

function showAdminPanel() {
    showSection('adminPanel');
    initAdminInterface();
}

function showLoginForm() {
    showSection('loginForm');
}

function showSignupForm() {
    showSection('signupForm');
}

function showForgotPasswordForm() {
    showSection('forgotPasswordForm');
}

function showUploadVideo() {
    if (currentUser) {
        showSection('uploadVideo');
    } else {
        showLoginForm();
        alert('Please sign in to upload videos');
    }
}

// File input handler
document.getElementById('videoFileInput').addEventListener('change', function(e) {
    const fileName = e.target.files[0] ? e.target.files[0].name : 'No file selected';
    document.getElementById('selectedFileName').textContent = fileName;
});

// Toggle auth options
function toggleAuthOptions() {
    if (currentUser) {
        // Show user menu
        if (confirm('Sign out?')) {
            signOut();
        }
    } else {
        showLoginForm();
    }
}

// Authentication Methods
function loginUser() {
    const email = document.getElementById('loginEmail').value;
    const password = document.getElementById('loginPassword').value;
    
    if (!email || !password) {
        alert('Please enter both email and password');
        return;
    }
    
    // For demo purposes, simulate successful login
    setCurrentUser(email);
    showHomePage();
    alert('Welcome to Xend!');
    
    // Initialize admin interface if user is admin
    if (isAdmin(email)) {
        initAdminInterface();
    }
}

function signupUser() {
    const email = document.getElementById('signupEmail').value;
    const username = document.getElementById('signupUsername').value;
    const password = document.getElementById('signupPassword').value;
    const passwordConfirm = document.getElementById('signupPasswordConfirm').value;
    
    if (!email || !username || !password) {
        alert('Please fill in all fields');
        return;
    }
    
    if (password !== passwordConfirm) {
        alert('Passwords do not match');
        return;
    }
    
    // For demo purposes, simulate successful signup
    setCurrentUser(email);
    showHomePage();
    alert('Welcome to Xend!');
}

function resetPassword() {
    const email = document.getElementById('forgotEmail').value;
    
    if (!email) {
        alert('Please enter your email address');
        return;
    }
    
    // For demo purposes
    showLoginForm();
    alert('Password reset link sent to your email!');
}

function signOut() {
    currentUser = null;
    updateUserInterface();
    showHomePage();
}

// User state management
function setCurrentUser(email) {
    currentUser = {
        email: email,
        username: email.split('@')[0],
        isAdmin: isAdmin(email)
    };
    updateUserInterface();
}

function updateUserInterface() {
    const adminSection = document.getElementById('adminSection');
    const userAvatar = document.getElementById('userAvatar');
    
    if (currentUser) {
        // Update user avatar with first letter of username
        userAvatar.textContent = currentUser.username.charAt(0).toUpperCase();
        
        // Show admin section if user is admin
        if (currentUser.isAdmin) {
            adminSection.classList.remove('hidden');
        } else {
            adminSection.classList.add('hidden');
        }
    } else {
        // Reset to default state
        userAvatar.textContent = '?';
        adminSection.classList.add('hidden');
    }
}

// Initialize admin interface
function initAdminInterface() {
    // Update admin stats
    document.getElementById('totalUsers').textContent = '45.2K';
    document.getElementById('totalVideos').textContent = '128.6K';
    document.getElementById('totalViews').textContent = '8.7M';
    
    // Add some recent activity
    document.getElementById('recentActivity').innerHTML = `
        <p>• User @danceninja uploaded a new video - 2 minutes ago</p>
        <p>• New user registration: @gamemaster445 - 15 minutes ago</p>
        <p>• User @techreview reported a video for inappropriate content - 47 minutes ago</p>
        <p>• Trending video reached 100K views in 1 hour - 1 hour ago</p>
    `;
}

// Video Upload
function uploadVideoFile() {
    const fileInput = document.getElementById('videoFileInput');
    const caption = document.getElementById('videoCaption').value;
    const tags = document.getElementById('videoTags').value;
    const privacy = document.getElementById('videoPrivacy').value;
    
    if (!fileInput.files[0]) {
        alert('Please select a video file to upload');
        return;
    }
    
    if (!caption) {
        alert('Please add a caption to your video');
        return;
    }
    
    // For demo purposes, simulate successful upload
    alert('Video uploaded successfully!');
    showHomePage();
}

// Initialize the app
function initApp() {
    // Load initial videos
    loadVideos();
    
    // Add event listeners
    document.getElementById('videoFileInput').addEventListener('change', function(e) {
        const fileName = e.target.files[0] ? e.target.files[0].name : 'No file selected';
        document.getElementById('selectedFileName').textContent = fileName;
    });
}

// Run initialization when DOM is fully loaded
document.addEventListener('DOMContentLoaded', initApp);