{{-- Optimized Dashboard Component with Performance Improvements --}}
{{-- Uses lazy loading, virtual scrolling, and efficient rendering --}}

@props(['userId' => null, 'initialData' => []])

<div id="dashboard-container" class="min-h-screen bg-gray-100 dark:bg-dark-bg" data-user-id="{{ $userId }}">
    <!-- Loading Skeleton -->
    <div id="loading-skeleton" class="hidden">
        <div class="animate-pulse">
            <div class="h-8 bg-gray-300 rounded w-3/4 mb-4"></div>
            <div class="h-4 bg-gray-300 rounded w-1/2 mb-2"></div>
            <div class="h-4 bg-gray-300 rounded w-2/3"></div>
        </div>
    </div>

    <!-- Main Dashboard -->
    <div id="main-dashboard" class="container mx-auto px-4 py-8">
        <!-- Header with lazy loading -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Dashboard</h1>
            <p class="text-gray-600 dark:text-gray-400">Welcome back, <span id="user-name">Loading...</span></p>
        </header>

        <!-- Stats Cards with Intersection Observer -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8" id="stats-container">
            <!-- Cards will be dynamically loaded -->
        </div>

        <!-- Virtual Scrolling Tables -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- Recent Trades -->
            <div class="bg-white dark:bg-dark-surface rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Recent Trades</h2>
                <div id="trades-container" class="overflow-hidden">
                    <div id="trades-virtual-scroll" class="h-96 overflow-y-auto">
                        <!-- Trades will be loaded with virtual scrolling -->
                    </div>
                </div>
            </div>

            <!-- Active Challenges -->
            <div class="bg-white dark:bg-dark-surface rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Active Challenges</h2>
                <div id="challenges-container" class="h-96 overflow-y-auto">
                    <!-- Challenges will be loaded -->
                </div>
            </div>
        </div>

        <!-- Performance Charts -->
        <div class="bg-white dark:bg-dark-surface rounded-xl shadow-lg p-6 mb-8">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Performance Overview</h2>
            <div id="chart-container" class="h-64">
                <canvas id="performance-chart"></canvas>
            </div>
        </div>
    </div>
</div>

<style>
    /* Performance optimizations */
    .container {
        container-type: inline-size;
    }
    
    /* GPU acceleration for animations */
    .animate-pulse {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Optimized scrolling */
    .overflow-y-auto {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f7fafc;
    }
    
    .dark .overflow-y-auto {
        scrollbar-color: #4a5568 #2d3748;
    }
    
    /* Will-change for performance */
    .performance-chart {
        will-change: transform;
    }
    
    /* Contain layout for better performance */
    .stats-container {
        contain: layout;
    }
    
    /* Optimized glass effect */
    .glass-effect {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        contain: layout style paint;
    }
    
    .dark .glass-effect {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
</style>

<script>
// Optimized Dashboard JavaScript with Performance Improvements
class OptimizedDashboard {
    constructor() {
        this.userId = @json($userId);
        this.initialData = @json($initialData);
        this.cache = new Map();
        this.observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };
        this.init();
    }

    init() {
        this.setupIntersectionObserver();
        this.setupVirtualScrolling();
        this.loadInitialData();
        this.setupPerformanceMonitoring();
    }

    setupIntersectionObserver() {
        // Lazy load components when they come into view
        this.intersectionObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.loadComponent(entry.target);
                    this.intersectionObserver.unobserve(entry.target);
                }
            });
        }, this.observerOptions);

        // Observe all lazy-load elements
        document.querySelectorAll('[data-lazy-load]').forEach(el => {
            this.intersectionObserver.observe(el);
        });
    }

    setupVirtualScrolling() {
        // Virtual scrolling for large datasets
        this.virtualScroll = new VirtualScroll({
            container: document.getElementById('trades-virtual-scroll'),
            itemHeight: 60,
            renderItem: this.renderTradeItem.bind(this),
            loadMore: this.loadMoreTrades.bind(this),
            threshold: 100
        });
    }

    async loadInitialData() {
        this.showLoadingSkeleton();
        
        try {
            const data = await this.getCachedData('dashboard_initial');
            this.renderDashboard(data);
        } catch (error) {
            console.error('Failed to load initial data:', error);
            this.showError('Failed to load dashboard data');
        } finally {
            this.hideLoadingSkeleton();
        }
    }

    async getCachedData(key) {
        // Check cache first
        if (this.cache.has(key)) {
            return this.cache.get(key);
        }

        // Fetch from API
        const response = await api.get(`/dashboard/data/${this.userId}`);
        const data = response.data;

        // Cache for 5 minutes
        this.cache.set(key, data, 300000);

        return data;
    }

    renderDashboard(data) {
        // Render user info
        const userName = document.getElementById('user-name');
        if (userName && data.user) {
            userName.textContent = data.user.name;
        }

        // Render stats cards
        this.renderStatsCards(data.stats);

        // Render trades
        this.renderTrades(data.recent_trades);

        // Render challenges
        this.renderChallenges(data.active_challenges);

        // Render performance chart
        this.renderPerformanceChart(data.performance);
    }

    renderStatsCards(stats) {
        const container = document.getElementById('stats-container');
        if (!container) return;

        const statsHTML = [
            { title: 'Total Balance', value: `$${stats.total_balance || 0}`, color: 'blue' },
            { title: 'Active Trades', value: stats.active_trades || 0, color: 'green' },
            { title: 'Win Rate', value: `${stats.win_rate || 0}%`, color: 'purple' },
            { title: 'Total P&L', value: `$${stats.total_pnl || 0}`, color: 'orange' }
        ].map(stat => `
            <div class="bg-white dark:bg-dark-surface rounded-xl shadow-lg p-6 transform transition-transform hover:scale-105" data-lazy-load>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">${stat.title}</p>
                        <p class="text-2xl font-bold text-${stat.color}-600">${stat.value}</p>
                    </div>
                    <div class="w-12 h-12 bg-${stat.color}-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-${stat.color}-600" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
                        </svg>
                    </div>
                </div>
            </div>
        `).join('');

        container.innerHTML = statsHTML;
    }

    renderTrades(trades) {
        if (!trades || trades.length === 0) {
            document.getElementById('trades-virtual-scroll').innerHTML = '<p class="text-center text-gray-500">No recent trades</p>';
            return;
        }

        this.virtualScroll.setItems(trades);
        this.virtualScroll.render();
    }

    renderTradeItem(trade, index) {
        const pnlColor = trade.pnl > 0 ? 'text-green-600' : 'text-red-600';
        const pnlSign = trade.pnl > 0 ? '+' : '';
        
        return `
            <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-dark-card transition-colors" data-trade-id="${trade.id}">
                <div class="flex-1">
                    <div class="font-semibold text-gray-900 dark:text-white">${trade.symbol}</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">${trade.type}</div>
                </div>
                <div class="text-right">
                    <div class="${pnlColor} font-semibold">${pnlSign}$${Math.abs(trade.pnl).toFixed(2)}</div>
                    <div class="text-xs text-gray-500">${new Date(trade.created_at).toLocaleString()}</div>
                </div>
            </div>
        `;
    }

    renderChallenges(challenges) {
        const container = document.getElementById('challenges-container');
        if (!container) return;

        if (!challenges || challenges.length === 0) {
            container.innerHTML = '<p class="text-center text-gray-500">No active challenges</p>';
            return;
        }

        container.innerHTML = challenges.map(challenge => `
            <div class="mb-4 p-4 bg-gray-50 dark:bg-dark-card rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="font-semibold text-gray-900 dark:text-white">${challenge.challenge_type?.name || 'Challenge'}</h3>
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">${challenge.status}</span>
                </div>
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    Progress: ${challenge.progress || 0}% | Target: $${challenge.challenge_type?.profit_target || 0}
                </div>
            </div>
        `).join('');
    }

    renderPerformanceChart(performance) {
        const canvas = document.getElementById('performance-chart');
        if (!canvas || !performance) return;

        // Use requestAnimationFrame for smooth rendering
        requestAnimationFrame(() => {
            this.drawPerformanceChart(canvas, performance);
        });
    }

    drawPerformanceChart(canvas, data) {
        const ctx = canvas.getContext('2d');
        const width = canvas.width = canvas.offsetWidth;
        const height = canvas.height = canvas.offsetHeight;

        // Clear canvas
        ctx.clearRect(0, 0, width, height);

        // Simple line chart implementation
        ctx.strokeStyle = '#3B82F6';
        ctx.lineWidth = 2;
        ctx.beginPath();

        const points = data.daily_pnl || [];
        const maxValue = Math.max(...points.map(p => Math.abs(p)), 1);
        const xStep = width / (points.length - 1);
        const yScale = (height - 40) / (maxValue * 2);

        points.forEach((point, index) => {
            const x = index * xStep;
            const y = height / 2 - (point * yScale);

            if (index === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        });

        ctx.stroke();

        // Draw zero line
        ctx.strokeStyle = '#6B7280';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0, height / 2);
        ctx.lineTo(width, height / 2);
        ctx.stroke();
    }

    async loadMoreTrades() {
        // Load more trades when scrolling
        try {
            const response = await api.get(`/trades/more/${this.userId}`);
            const newTrades = response.data.trades;
            
            // Append to virtual scroll
            this.virtualScroll.appendItems(newTrades);
        } catch (error) {
            console.error('Failed to load more trades:', error);
        }
    }

    loadComponent(element) {
        // Load component-specific data
        const componentType = element.dataset.lazyLoad;
        
        switch (componentType) {
            case 'stats':
                this.loadStats();
                break;
            case 'trades':
                this.loadTrades();
                break;
            case 'challenges':
                this.loadChallenges();
                break;
        }
    }

    showLoadingSkeleton() {
        document.getElementById('loading-skeleton').classList.remove('hidden');
        document.getElementById('main-dashboard').classList.add('hidden');
    }

    hideLoadingSkeleton() {
        document.getElementById('loading-skeleton').classList.add('hidden');
        document.getElementById('main-dashboard').classList.remove('hidden');
    }

    showError(message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'fixed top-4 right-4 p-4 bg-red-500 text-white rounded-lg z-50';
        errorDiv.textContent = message;
        document.body.appendChild(errorDiv);
        
        setTimeout(() => {
            errorDiv.remove();
        }, 3000);
    }

    setupPerformanceMonitoring() {
        // Monitor performance metrics
        if ('performance' in window) {
            window.addEventListener('load', () => {
                const perfData = performance.getEntriesByType('navigation')[0];
                console.log('Page load time:', perfData.loadEventEnd - perfData.fetchStart, 'ms');
            });
        }
    }
}

// Virtual Scrolling Implementation
class VirtualScroll {
    constructor(options) {
        this.container = options.container;
        this.itemHeight = options.itemHeight;
        this.renderItem = options.renderItem;
        this.loadMore = options.loadMore;
        this.threshold = options.threshold || 100;
        
        this.items = [];
        this.visibleStart = 0;
        this.visibleEnd = 0;
        this.scrollTop = 0;
        this.containerHeight = 0;
        
        this.init();
    }

    init() {
        this.containerHeight = this.container.clientHeight;
        this.visibleEnd = Math.ceil(this.containerHeight / this.itemHeight);
        
        this.container.addEventListener('scroll', this.handleScroll.bind(this));
    }

    setItems(items) {
        this.items = items;
        this.render();
    }

    appendItems(items) {
        this.items.push(...items);
        this.render();
    }

    render() {
        const fragment = document.createDocumentFragment();
        
        for (let i = this.visibleStart; i < this.visibleEnd && i < this.items.length; i++) {
            const item = this.renderItem(this.items[i], i);
            const element = document.createElement('div');
            element.style.height = `${this.itemHeight}px`;
            element.innerHTML = item;
            fragment.appendChild(element);
        }
        
        this.container.innerHTML = '';
        this.container.appendChild(fragment);
    }

    handleScroll() {
        const scrollTop = this.container.scrollTop;
        const newStart = Math.floor(scrollTop / this.itemHeight);
        const newEnd = Math.ceil((scrollTop + this.containerHeight) / this.itemHeight);
        
        if (newStart !== this.visibleStart || newEnd !== this.visibleEnd) {
            this.visibleStart = newStart;
            this.visibleEnd = newEnd;
            this.render();
        }
        
        // Load more items when approaching end
        if (this.visibleEnd >= this.items.length - this.threshold && this.loadMore) {
            this.loadMore();
        }
    }
}

// Initialize dashboard when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    new OptimizedDashboard();
});
</script>