// Initialize Feather Icons
feather.replace();

// Dashboard functionality
class HBUAssetRecovery {
    constructor() {
        this.initializeEventListeners();
        this.initializeCharts();
        this.startRealTimeUpdates();
        this.loadDashboardData();
    }

    initializeEventListeners() {
        // Telegram modal
        const telegramBtn = document.getElementById('telegram-btn');
        const telegramModal = document.getElementById('telegram-modal');
        const closeTelegram = document.getElementById('close-telegram');
        const sendCommand = document.getElementById('send-command');
        const telegramInput = document.getElementById('telegram-input');

        if (telegramBtn && telegramModal) {
            telegramBtn.addEventListener('click', () => {
                telegramModal.classList.remove('hidden');
                telegramInput.focus();
            });
        }

        if (closeTelegram) {
            closeTelegram.addEventListener('click', () => {
                telegramModal.classList.add('hidden');
            });
        }

        if (sendCommand && telegramInput) {
            sendCommand.addEventListener('click', () => {
                this.handleTelegramCommand(telegramInput.value);
            });

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

        // Close modal on outside click
        telegramModal?.addEventListener('click', (e) => {
            if (e.target === telegramModal) {
                telegramModal.classList.add('hidden');
            }
        });
    }

    initializeCharts() {
        // Pipeline Chart
        const pipelineCtx = document.getElementById('pipelineChart');
        if (pipelineCtx) {
            new Chart(pipelineCtx.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['New', 'Enriched', 'Contacted', 'Negotiating', 'Claim Filed', 'Recovered'],
                    datasets: [{
                        label: 'Leads',
                        data: [342, 287, 198, 124, 89, 67],
                        backgroundColor: [
                            'rgba(249, 115, 22, 0.8)',
                            'rgba(59, 130, 246, 0.8)',
                            'rgba(251, 191, 36, 0.8)',
                            'rgba(168, 85, 247, 0.8)',
                            'rgba(34, 197, 94, 0.8)',
                            'rgba(16, 185, 129, 0.8)'
                        ],
                        borderColor: [
                            'rgba(249, 115, 22, 1)',
                            'rgba(59, 130, 246, 1)',
                            'rgba(251, 191, 36, 1)',
                            'rgba(168, 85, 247, 1)',
                            'rgba(34, 197, 94, 1)',
                            'rgba(16, 185, 129, 1)'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(148, 163, 184, 0.1)'
                            },
                            ticks: {
                                color: '#94a3b8'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#94a3b8'
                            }
                        }
                    }
                }
            });
        }

        // Revenue Chart (if exists)
        const revenueCtx = document.getElementById('revenueChart');
        if (revenueCtx) {
            new Chart(revenueCtx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                    datasets: [{
                        label: 'Revenue',
                        data: [380000, 410000, 395000, 425000, 440000, 416667],
                        borderColor: 'rgba(249, 115, 22, 1)',
                        backgroundColor: 'rgba(249, 115, 22, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: 'rgba(148, 163, 184, 0.1)'
                            },
                            ticks: {
                                color: '#94a3b8',
                                callback: function(value) {
                                    return '$' + (value / 1000) + 'K';
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#94a3b8'
                            }
                        }
                    }
                }
            });
        }
    }

    async handleTelegramCommand(command) {
        const responseDiv = document.getElementById('telegram-response');
        const input = document.getElementById('telegram-input');

        if (!command.trim()) return;

        // Show loading state
        responseDiv.innerHTML = '<div class="flex items-center"><div class="loading-spinner mr-3"></div>Processing command...</div>';
        responseDiv.classList.remove('hidden');

        try {
            // Simulate API call to AI command center
            const response = await fetch('/api/command/ai-route', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ command })
            });

            const result = await response.json();
            
            if (response.ok) {
                responseDiv.innerHTML = `
                    <div class="flex items-start">
                        <i data-feather="check-circle" class="text-green-400 mr-2 mt-1 h-4 w-4"></i>
                        <div>
                            <p class="text-green-400 font-medium">Command processed successfully</p>
                            <p class="mt-1">${result.response}</p>
                        </div>
                    </div>
                `;
                input.value = '';
                this.showToast('Command executed successfully', 'success');
            } else {
                throw new Error(result.error || 'Command failed');
            }
        } catch (error) {
            responseDiv.innerHTML = `
                <div class="flex items-start">
                    <i data-feather="alert-circle" class="text-red-400 mr-2 mt-1 h-4 w-4"></i>
                    <div>
                        <p class="text-red-400 font-medium">Error processing command</p>
                        <p class="mt-1">${error.message}</p>
                    </div>
                </div>
            `;
            this.showToast('Command failed: ' + error.message, 'error');
        }

        // Re-initialize feather icons
        feather.replace();
    }

    async loadDashboardData() {
        try {
            // Simulate loading dashboard data
            const dashboardData = await this.fetchDashboardMetrics();
            this.updateDashboardUI(dashboardData);
        } catch (error) {
            console.error('Failed to load dashboard data:', error);
        }
    }

    async fetchDashboardMetrics() {
        // Mock data - in real implementation, this would call your API
        return {
            monthlyRevenue: 416667,
            activeLeads: 2847,
            successRate: 98.2,
            aruStatus: 'Active',
            recentActivity: [
                { type: 'success', message: 'Claim Approved - $45,000', details: 'John Doe - Oklahoma County', time: '2 min ago' },
                { type: 'warning', message: 'New High-Value Lead', details: 'ARV $350K - Equity 78%', time: '15 min ago' },
                { type: 'info', message: 'ARU Swarm Completed', details: '1,247 leads processed - FL', time: '1 hour ago' },
                { type: 'info', message: 'AI Call Campaign Sent', details: '234 contacts - 67% answer rate', time: '2 hours ago' }
            ]
        };
    }

    updateDashboardUI(data) {
        // Update metrics
        const elements = {
            monthlyRevenue: document.querySelector('[data-metric="revenue"]'),
            activeLeads: document.querySelector('[data-metric="leads"]'),
            successRate: document.querySelector('[data-metric="success"]'),
            aruStatus: document.querySelector('[data-metric="aru-status"]')
        };

        if (elements.monthlyRevenue) {
            elements.monthlyRevenue.textContent = this.formatCurrency(data.monthlyRevenue);
        }
        if (elements.activeLeads) {
            elements.activeLeads.textContent = data.activeLeads.toLocaleString();
        }
        if (elements.successRate) {
            elements.successRate.textContent = data.successRate + '%';
        }
    }

    formatCurrency(amount) {
        return new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 0
        }).format(amount);
    }

    startRealTimeUpdates() {
        // Simulate real-time updates
        setInterval(() => {
            this.updateRealTimeMetrics();
        }, 30000); // Update every 30 seconds
    }

    updateRealTimeMetrics() {
        // Simulate small changes in metrics
        const revenueElement = document.querySelector('[data-metric="revenue"]');
        if (revenueElement) {
            const currentRevenue = parseInt(revenueElement.textContent.replace(/[$,]/g, ''));
            const newRevenue = currentRevenue + Math.floor(Math.random() * 1000);
            revenueElement.textContent = this.formatCurrency(newRevenue);
        }
    }

    showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.innerHTML = `
            <div class="flex items-center">
                <i data-feather="${this.getToastIcon(type)}" class="mr-2 h-5 w-5"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(toast);
        
        // Trigger animation
        setTimeout(() => toast.classList.add('show'), 100);
        
        // Remove after 3 seconds
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
        
        feather.replace();
    }

    getToastIcon(type) {
        switch(type) {
            case 'success': return 'check-circle';
            case 'error': return 'x-circle';
            case 'warning': return 'alert-triangle';
            default: return 'info';
        }
    }
}

// Utility functions
const hbu = new HBUAssetRecovery();

// Export for use in other scripts
window.HBU = hbu;
window.showToast = (message, type) => hbu.showToast(message, type);

// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
    // Ctrl/Cmd + K for quick search/commands
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        document.getElementById('telegram-btn')?.click();
    }
    
    // Escape to close modals
    if (e.key === 'Escape') {
        document.getElementById('telegram-modal')?.classList.add('hidden');
    }
});

// Page visibility change handling
document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
        hbu.loadDashboardData(); // Refresh data when page becomes visible
    }
});