// Main Dashboard Controller

class Dashboard {
    constructor() {
        this.currentPage = 'overview';
        this.pages = {};
        this.init();
    }

    init() {
        // Initialize only if authenticated
        if (!window.authManager || !window.authManager.isAuthenticated) {
            return;
        }

        this.setupNavigation();
        this.setupSidebar();
        this.setupRefresh();
        this.updateTime();
        this.loadPage(this.currentPage);
        
        // Start time updates
        setInterval(() => this.updateTime(), 1000);
    }

    setupNavigation() {
        // Handle menu item clicks
        const menuItems = document.querySelectorAll('.menu-item');
        menuItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                
                // Get page from data attribute or href
                const page = item.getAttribute('data-page') || 
                            item.getAttribute('href').substring(1);
                
                // Update active state
                menuItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
                
                // Load page
                this.loadPage(page);
            });
        });

        // Handle hash changes (browser back/forward)
        window.addEventListener('hashchange', () => {
            const page = window.location.hash.substring(1) || 'overview';
            this.loadPage(page);
        });
    }

    setupSidebar() {
        const toggleBtn = document.getElementById('sidebar-toggle');
        const sidebar = document.querySelector('.sidebar');
        
        if (toggleBtn && sidebar) {
            toggleBtn.addEventListener('click', () => {
                sidebar.classList.toggle('collapsed');
                
                // Save preference
                const isCollapsed = sidebar.classList.contains('collapsed');
                localStorage.setItem('sidebar_collapsed', isCollapsed);
            });
            
            // Load saved preference
            const savedState = localStorage.getItem('sidebar_collapsed');
            if (savedState === 'true') {
                sidebar.classList.add('collapsed');
            }
        }
    }

    setupRefresh() {
        const refreshBtn = document.getElementById('refresh-btn');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', () => {
                this.refreshCurrentPage();
            });
        }
    }

    updateTime() {
        const timeElement = document.getElementById('current-time');
        if (!timeElement) return;
        
        const now = luxon.DateTime.now();
        timeElement.textContent = now.toFormat('HH:mm:ss');
    }

    async loadPage(page) {
        // Update current page
        this.currentPage = page;
        
        // Update URL hash
        window.location.hash = page;
        
        // Update page title
        this.updatePageTitle(page);
        
        // Show loading state
        this.showLoading();
        
        try {
            // Load page content
            await this.loadPageContent(page);
            
            // Initialize page-specific functionality
            await this.initializePage(page);
            
        } catch (error) {
            console.error(`Error loading page ${page}:`, error);
            this.showError(`Failed to load ${page} page`);
        } finally {
            // Hide loading state
            this.hideLoading();
        }
    }

    updatePageTitle(page) {
        const titleElement = document.getElementById('page-title');
        if (!titleElement) return;
        
        const titles = {
            'overview': 'Dashboard Overview',
            'analytics': 'Usage Analytics',
            'costs': 'Cost Management',
            'clients': 'Client Management',
            'providers': 'Provider Configuration',
            'monitoring': 'Real-time Monitoring',
            'settings': 'System Settings',
            'logs': 'System Logs'
        };
        
        titleElement.textContent = titles[page] || 'Dashboard';
    }

    showLoading() {
        const content = document.getElementById('page-content');
        if (!content) return;
        
        content.classList.add('loading');
    }

    hideLoading() {
        const content = document.getElementById('page-content');
        if (!content) return;
        
        content.classList.remove('loading');
    }

    async loadPageContent(page) {
        const content = document.getElementById('page-content');
        if (!content) return;
        
        // For now, we'll generate content dynamically
        // In a real app, you might fetch HTML templates or use a framework
        
        let html = '';
        
        switch (page) {
            case 'overview':
                html = await this.getOverviewContent();
                break;
            case 'analytics':
                html = await this.getAnalyticsContent();
                break;
            case 'costs':
                html = await this.getCostsContent();
                break;
            case 'clients':
                html = await this.getClientsContent();
                break;
            case 'providers':
                html = await this.getProvidersContent();
                break;
            case 'monitoring':
                html = await this.getMonitoringContent();
                break;
            case 'settings':
                html = await this.getSettingsContent();
                break;
            case 'logs':
                html = await this.getLogsContent();
                break;
            default:
                html = '<div class="empty-state"><h3>Page not found</h3></div>';
        }
        
        content.innerHTML = html;
    }

    async initializePage(page) {
        // Initialize page-specific JavaScript
        switch (page) {
            case 'overview':
                if (typeof window.initOverview === 'function') {
                    await window.initOverview();
                }
                break;
            case 'analytics':
                if (typeof window.initAnalytics === 'function') {
                    await window.initAnalytics();
                }
                break;
            case 'costs':
                if (typeof window.initCosts === 'function') {
                    await window.initCosts();
                }
                break;
            case 'clients':
                if (typeof window.initClients === 'function') {
                    await window.initClients();
                }
                break;
            case 'providers':
                if (typeof window.initProviders === 'function') {
                    await window.initProviders();
                }
                break;
            case 'monitoring':
                if (typeof window.initMonitoring === 'function') {
                    await window.initMonitoring();
                }
                break;
            case 'settings':
                if (typeof window.initSettings === 'function') {
                    await window.initSettings();
                }
                break;
            case 'logs':
                if (typeof window.initLogs === 'function') {
                    await window.initLogs();
                }
                break;
        }
    }

    refreshCurrentPage() {
        this.loadPage(this.currentPage);
        
        // Show refresh animation
        const refreshBtn = document.getElementById('refresh-btn');
        if (refreshBtn) {
            refreshBtn.classList.add('fa-spin');
            setTimeout(() => {
                refreshBtn.classList.remove('fa-spin');
            }, 1000);
        }
        
        // Show toast notification
        if (window.authManager) {
            window.authManager.showToast('Page refreshed', 'success');
        }
    }

    showError(message) {
        const content = document.getElementById('page-content');
        if (!content) return;
        
        content.innerHTML = `
            <div class="empty-state">
                <i class="fas fa-exclamation-triangle"></i>
                <h3>Error</h3>
                <p>${message}</p>
                <button class="btn btn-primary" onclick="window.dashboard.refreshCurrentPage()">
                    <i class="fas fa-redo"></i> Try Again
                </button>
            </div>
        `;
    }

    // Page content generators
    async getOverviewContent() {
        return `
            <div class="stats-grid" id="overview-stats">
                <!-- Stats will be loaded dynamically -->
            </div>
            
            <div class="chart-container">
                <div class="chart-header">
                    <h3 class="chart-title">Request Volume (Last 24 Hours)</h3>
                    <div class="chart-controls">
                        <button class="chart-control-btn active" data-period="24h">24H</button>
                        <button class="chart-control-btn" data-period="7d">7D</button>
                        <button class="chart-control-btn" data-period="30d">30D</button>
                    </div>
                </div>
                <canvas id="requests-chart" height="300"></canvas>
            </div>
            
            <div class="grid-2">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">Provider Distribution</h3>
                    </div>
                    <canvas id="providers-chart" height="250"></canvas>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">System Health</h3>
                    </div>
                    <div id="system-health">
                        <!-- Health indicators will be loaded dynamically -->
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <div>
                        <h3 class="card-title">Recent Requests</h3>
                        <p class="card-subtitle">Last 50 requests</p>
                    </div>
                    <div class="card-actions">
                        <button class="card-action-btn" title="Refresh">
                            <i class="fas fa-redo"></i>
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table" id="recent-requests">
                        <thead>
                            <tr>
                                <th>Time</th>
                                <th>Client</th>
                                <th>Provider</th>
                                <th>Model</th>
                                <th>Tokens</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Requests will be loaded dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    }

    async getAnalyticsContent() {
        return `
            <div class="card">
                <div class="card-header">
                    <div>
                        <h3 class="card-title">Usage Analytics</h3>
                        <p class="card-subtitle">Filter and analyze usage data</p>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-download"></i> Export
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-control">
                            <label>Date Range</label>
                            <select id="date-range">
                                <option value="24h">Last 24 Hours</option>
                                <option value="7d" selected>Last 7 Days</option>
                                <option value="30d">Last 30 Days</option>
                                <option value="custom">Custom Range</option>
                            </select>
                        </div>
                        <div class="form-control">
                            <label>Client</label>
                            <select id="client-filter">
                                <option value="all">All Clients</option>
                                <!-- Client options will be loaded dynamically -->
                            </select>
                        </div>
                        <div class="form-control">
                            <label>Provider</label>
                            <select id="provider-filter">
                                <option value="all">All Providers</option>
                                <option value="openai">OpenAI</option>
                                <option value="gemini">Gemini</option>
                                <option value="deepseek">DeepSeek</option>
                                <option value="grok">Grok</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="chart-container">
                <div class="chart-header">
                    <h3 class="chart-title">Request Trends</h3>
                    <div class="chart-controls">
                        <button class="chart-control-btn active" data-metric="requests">Requests</button>
                        <button class="chart-control-btn" data-metric="tokens">Tokens</button>
                        <button class="chart-control-btn" data-metric="cost">Cost</button>
                    </div>
                </div>
                <canvas id="analytics-chart" height="350"></canvas>
            </div>
            
            <div class="grid-2">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">Top Clients</h3>
                    </div>
                    <canvas id="clients-chart" height="300"></canvas>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">Top Models</h3>
                    </div>
                    <canvas id="models-chart" height="300"></canvas>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Detailed Usage Data</h3>
                </div>
                <div class="table-container">
                    <table class="table" id="usage-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Client</th>
                                <th>Provider</th>
                                <th>Model</th>
                                <th>Requests</th>
                                <th>Tokens</th>
                                <th>Cost</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Usage data will be loaded dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    }

    async getCostsContent() {
        return `
            <div class="stats-grid" id="cost-stats">
                <!-- Cost stats will be loaded dynamically -->
            </div>
            
            <div class="chart-container">
                <div class="chart-header">
                    <h3 class="chart-title">Cost Breakdown</h3>
                    <div class="chart-controls">
                        <button class="chart-control-btn active" data-breakdown="provider">By Provider</button>
                        <button class="chart-control-btn" data-breakdown="client">By Client</button>
                        <button class="chart-control-btn" data-breakdown="model">By Model</button>
                    </div>
                </div>
                <canvas id="costs-chart" height="300"></canvas>
            </div>
            
            <div class="grid-2">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Budget Tracking</h3>
                    </div>
                    <div class="card-body">
                        <div id="budget-progress">
                            <!-- Budget progress bars will be loaded dynamically -->
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Cost Projections</h3>
                    </div>
                    <div class="card-body">
                        <div id="cost-projections">
                            <!-- Projections will be loaded dynamically -->
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <div>
                        <h3 class="card-title">Pricing Configuration</h3>
                        <p class="card-subtitle">Current provider pricing</p>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-primary" id="edit-pricing">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table" id="pricing-table">
                        <thead>
                            <tr>
                                <th>Provider</th>
                                <th>Model</th>
                                <th>Input Price</th>
                                <th>Output Price</th>
                                <th>Last Updated</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Pricing data will be loaded dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    }

    async getClientsContent() {
        return `
            <div class="card">
                <div class="card-header">
                    <div>
                        <h3 class="card-title">Client Management</h3>
                        <p class="card-subtitle">Manage API clients and tokens</p>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-primary" id="add-client">
                            <i class="fas fa-plus"></i> Add Client
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table class="table" id="clients-table">
                            <thead>
                                <tr>
                                    <th>Client ID</th>
                                    <th>Name</th>
                                    <th>Token</th>
                                    <th>Created</th>
                                    <th>Last Used</th>
                                    <th>Requests</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Clients will be loaded dynamically -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="grid-2">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Client Usage Summary</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="client-usage-chart" height="250"></canvas>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Rate Limit Status</h3>
                    </div>
                    <div class="card-body">
                        <div id="rate-limit-status">
                            <!-- Rate limit status will be loaded dynamically -->
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    async getProvidersContent() {
        return `
            <div class="stats-grid" id="provider-stats">
                <!-- Provider stats will be loaded dynamically -->
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Provider Configuration</h3>
                </div>
                <div class="card-body">
                    <div id="providers-list">
                        <!-- Providers will be loaded dynamically -->
                    </div>
                </div>
            </div>
            
            <div class="grid-2">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Model Availability</h3>
                    </div>
                    <div class="card-body">
                        <div id="models-list">
                            <!-- Models will be loaded dynamically -->
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Connection Tests</h3>
                    </div>
                    <div class="card-body">
                        <div id="connection-tests">
                            <!-- Test results will be loaded dynamically -->
                        </div>
                        <div class="form-actions">
                            <button class="btn btn-primary" id="test-all-providers">
                                <i class="fas fa-play"></i> Test All Providers
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    async getMonitoringContent() {
        return `
            <div class="card">
                <div class="card-header">
                    <div>
                        <h3 class="card-title">Real-time Monitoring</h3>
                        <p class="card-subtitle">Live request stream and system metrics</p>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-secondary" id="pause-monitoring">
                            <i class="fas fa-pause"></i> Pause
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="grid-2">
                        <div>
                            <h4>Live Request Stream</h4>
                            <div id="request-stream" class="monitoring-stream">
                                <!-- Live requests will appear here -->
                            </div>
                        </div>
                        <div>
                            <h4>System Metrics</h4>
                            <div id="system-metrics">
                                <!-- System metrics will be loaded dynamically -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid-3">
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">Response Time (ms)</h3>
                    </div>
                    <canvas id="response-time-chart" height="200"></canvas>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">Error Rate (%)</h3>
                    </div>
                    <canvas id="error-rate-chart" height="200"></canvas>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <h3 class="chart-title">Rate Limit Usage</h3>
                    </div>
                    <canvas id="rate-limit-chart" height="200"></canvas>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">System Logs (Live)</h3>
                </div>
                <div class="card-body">
                    <div id="system-logs" class="log-stream">
                        <!-- System logs will appear here -->
                    </div>
                </div>
            </div>
        `;
    }

    async getSettingsContent() {
        return `
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">System Settings</h3>
                </div>
                <div class="card-body">
                    <form id="settings-form">
                        <div class="form-section">
                            <h4>General Configuration</h4>
                            <div class="form-row">
                                <div class="form-control">
                                    <label>Server Port</label>
                                    <input type="number" id="server-port" value="8080" min="1024" max="65535">
                                </div>
                                <div class="form-control">
                                    <label>Log Level</label>
                                    <select id="log-level">
                                        <option value="error">Error</option>
                                        <option value="warn">Warning</option>
                                        <option value="info" selected>Info</option>
                                        <option value="debug">Debug</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <h4>Database Settings</h4>
                            <div class="form-row">
                                <div class="form-control">
                                    <label>Database Path</label>
                                    <input type="text" id="db-path" value="./data/llm-proxy.db">
                                </div>
                                <div class="form-control">
                                    <label>Backup Interval (hours)</label>
                                    <input type="number" id="backup-interval" value="24" min="1" max="168">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <h4>Security Settings</h4>
                            <div class="form-row">
                                <div class="form-control">
                                    <label>Dashboard Password</label>
                                    <input type="password" id="dashboard-password" placeholder="Leave empty to keep current">
                                </div>
                                <div class="form-control">
                                    <label>Session Timeout (minutes)</label>
                                    <input type="number" id="session-timeout" value="30" min="5" max="1440">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-actions">
                            <button type="button" class="btn btn-secondary" id="reset-settings">
                                <i class="fas fa-undo"></i> Reset
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Save Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="grid-2">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Database Management</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-actions">
                            <button class="btn btn-secondary" id="backup-db">
                                <i class="fas fa-download"></i> Backup Database
                            </button>
                            <button class="btn btn-warning" id="optimize-db">
                                <i class="fas fa-magic"></i> Optimize Database
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">System Information</h3>
                    </div>
                    <div class="card-body">
                        <div id="system-info">
                            <!-- System info will be loaded dynamically -->
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    async getLogsContent() {
        return `
            <div class="card">
                <div class="card-header">
                    <div>
                        <h3 class="card-title">System Logs</h3>
                        <p class="card-subtitle">View and filter system logs</p>
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-secondary" id="download-logs">
                            <i class="fas fa-download"></i> Download
                        </button>
                        <button class="btn btn-danger" id="clear-logs">
                            <i class="fas fa-trash"></i> Clear
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-control">
                            <label>Log Level</label>
                            <select id="log-filter">
                                <option value="all">All Levels</option>
                                <option value="error">Error</option>
                                <option value="warn">Warning</option>
                                <option value="info">Info</option>
                                <option value="debug">Debug</option>
                            </select>
                        </div>
                        <div class="form-control">
                            <label>Time Range</label>
                            <select id="log-time-range">
                                <option value="1h">Last Hour</option>
                                <option value="24h" selected>Last 24 Hours</option>
                                <option value="7d">Last 7 Days</option>
                                <option value="30d">Last 30 Days</option>
                            </select>
                        </div>
                        <div class="form-control">
                            <label>Search</label>
                            <input type="text" id="log-search" placeholder="Search logs...">
                        </div>
                    </div>
                    
                    <div class="table-container">
                        <table class="table" id="logs-table">
                            <thead>
                                <tr>
                                    <th>Timestamp</th>
                                    <th>Level</th>
                                    <th>Source</th>
                                    <th>Message</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Logs will be loaded dynamically -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    }
}

// Initialize dashboard when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.initDashboard = () => {
        window.dashboard = new Dashboard();
    };
    
    // If already authenticated, initialize immediately
    if (window.authManager && window.authManager.isAuthenticated) {
        window.initDashboard();
    }
});

// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
    module.exports = Dashboard;
}