/**
 * CMMS Manufacturing Platform - Main JavaScript
 * Handles mock data, interactions, and basic functionality
 */

// Mock Data Structure
const mockData = {
    dashboard: {
        systemStatus: 'online',
        lastSync: '30 seconds ago',
        uptime: 94.2,
        efficiency: 87,
        activeAlerts: 3
    },
    kpis: {
        equipmentUptime: {
            value: 94.2,
            description: 'Overall equipment effectiveness',
            change: 2.1,
            performance: 'Excellent',
            performanceClass: 'excellent'
        },
        activeWorkOrders: {
            value: 23,
            description: 'Currently in progress',
            change: -5,
            performance: 'Good',
            performanceClass: 'good'
        },
        overdueTasks: {
            value: 7,
            description: 'Require immediate attention',
            change: 2,
            performance: 'Needs Attention',
            performanceClass: 'warning'
        },
        criticalAlerts: {
            value: 3,
            description: 'High priority issues',
            change: -1,
            performance: 'Critical',
            performanceClass: 'critical'
        }
    },
    equipment: [
        {
            id: 1,
            name: 'CNC Machine #1',
            status: 'operational',
            image: 'CNC Machine',
            uptime: 98.5
        },
        {
            id: 2,
            name: 'Hydraulic Press #2',
            status: 'maintenance',
            image: 'Hydraulic Press',
            uptime: 85.2
        },
        {
            id: 3,
            name: 'Conveyor System #1',
            status: 'operational',
            image: 'Conveyor System',
            uptime: 96.8
        },
        {
            id: 4,
            name: 'Welding Robot #3',
            status: 'operational',
            image: 'Welding Robot',
            uptime: 94.1
        },
        {
            id: 5,
            name: 'Assembly Line #1',
            status: 'offline',
            image: 'Assembly Line',
            uptime: 0
        },
        {
            id: 6,
            name: 'Packaging Machine #2',
            status: 'maintenance',
            image: 'Packaging Machine',
            uptime: 0
        }
    ],
    alerts: [
        {
            id: 1,
            type: 'pressure',
            title: 'Hydraulic Press #2 Pressure Drop',
            description: 'Pressure has dropped below safe operating levels',
            equipment: 'Hydraulic Press #2',
            status: 'active',
            timestamp: '2 minutes ago',
            icon: 'exclamation-circle'
        },
        {
            id: 2,
            type: 'maintenance',
            title: 'Scheduled Maintenance Due',
            description: 'CNC Machine #1 maintenance is due in 2 days',
            equipment: 'CNC Machine #1',
            status: 'active',
            timestamp: '15 minutes ago',
            icon: 'calendar-check'
        },
        {
            id: 3,
            type: 'update',
            title: 'Software Update Available',
            description: 'New firmware version available for Welding Robot #3',
            equipment: 'Welding Robot #3',
            status: 'active',
            timestamp: '1 hour ago',
            icon: 'download'
        }
    ]
};

// Initialize the dashboard when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initializeDashboard();
    setupEventListeners();
});

/**
 * Initialize Dashboard - Load mock data and render UI
 */
function initializeDashboard() {
    console.log('Initializing CMMS Dashboard...');
    
    // Update header information
    updateHeaderInfo();
    
    // Update KPI cards
    updateKPICards();
    
    // Update equipment status
    updateEquipmentStatus();
    
    // Update alerts
    updateAlerts();
    
    console.log('Dashboard initialized successfully');
}

/**
 * Update Header Information
 */
function updateHeaderInfo() {
    // Update system status
    const statusDot = document.querySelector('.status-dot');
    if (statusDot && mockData.dashboard.systemStatus === 'online') {
        statusDot.classList.add('online');
    }
    
    // Update sync info
    const syncInfo = document.querySelector('.sync-info span:last-child');
    if (syncInfo) {
        syncInfo.textContent = `Last sync: ${mockData.dashboard.lastSync}`;
    }
    
    // Update uptime badge
    const uptimeBadge = document.querySelector('.uptime-badge span:last-child');
    if (uptimeBadge) {
        uptimeBadge.textContent = `${mockData.dashboard.uptime}% Uptime`;
    }
}

/**
 * Update KPI Cards with Mock Data
 */
function updateKPICards() {
    const kpiCards = document.querySelectorAll('.kpi-card');
    
    kpiCards.forEach((card, index) => {
        const kpiKey = Object.keys(mockData.kpis)[index];
        const kpiData = mockData.kpis[kpiKey];
        
        if (kpiData) {
            // Update value
            const valueElement = card.querySelector('.kpi-value');
            if (valueElement) {
                valueElement.textContent = kpiData.value;
            }
            
            // Update description
            const descElement = card.querySelector('.kpi-description');
            if (descElement) {
                descElement.textContent = kpiData.description;
            }
            
            // Update comparison
            const changeElement = card.querySelector('.change');
            if (changeElement) {
                changeElement.textContent = (kpiData.change >= 0 ? '+' : '') + kpiData.change + '%';
                changeElement.classList.add(kpiData.change >= 0 ? 'positive' : 'negative');
            }
            
            // Update performance status
            const statusElement = card.querySelector('.performance-status');
            if (statusElement) {
                statusElement.textContent = kpiData.performance;
                statusElement.className = `performance-status ${kpiData.performanceClass}`;
            }
        }
    });
}

/**
 * Update Equipment Status Section
 */
function updateEquipmentStatus() {
    // Count equipment by status
    const statusCounts = {
        total: mockData.equipment.length,
        operational: mockData.equipment.filter(e => e.status === 'operational').length,
        maintenance: mockData.equipment.filter(e => e.status === 'maintenance').length,
        offline: mockData.equipment.filter(e => e.status === 'offline').length
    };
    
    // Update status boxes
    const statusBoxes = document.querySelectorAll('.status-box');
    const statusLabels = ['Total', 'Operational', 'Maintenance', 'Offline'];
    const statusKeys = ['total', 'operational', 'maintenance', 'offline'];
    
    statusBoxes.forEach((box, index) => {
        const number = box.querySelector('.status-number');
        if (number) {
            number.textContent = statusCounts[statusKeys[index]];
        }
    });
    
    // Update equipment cards (show only first 3)
    const equipmentCardsContainer = document.querySelector('.equipment-cards');
    if (equipmentCardsContainer) {
        // Clear existing cards (except the first 3 which are in HTML)
        const existingCards = equipmentCardsContainer.querySelectorAll('.equipment-card');
        existingCards.forEach((card, index) => {
            if (index < 3 && mockData.equipment[index]) {
                updateEquipmentCard(card, mockData.equipment[index]);
            }
        });
    }
}

/**
 * Update Individual Equipment Card
 */
function updateEquipmentCard(cardElement, equipmentData) {
    // Update status badge
    const badge = cardElement.querySelector('.equipment-status-badge');
    if (badge) {
        const statusText = equipmentData.status.charAt(0).toUpperCase() + equipmentData.status.slice(1);
        badge.textContent = statusText;
        badge.className = `equipment-status-badge ${equipmentData.status === 'maintenance' ? 'maintenance' : ''}`;
    }
    
    // Update equipment name
    const nameElement = cardElement.querySelector('.equipment-info h3');
    if (nameElement) {
        nameElement.textContent = equipmentData.name;
    }
}

/**
 * Update System Alerts
 */
function updateAlerts() {
    const alertsList = document.querySelector('.alerts-list');
    if (!alertsList) return;
    
    // Clear existing alerts
    alertsList.innerHTML = '';
    
    // Add alerts from mock data
    mockData.alerts.forEach(alert => {
        const alertElement = createAlertElement(alert);
        alertsList.appendChild(alertElement);
    });
}

/**
 * Create Alert Element
 */
function createAlertElement(alertData) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert-item ${alertData.status}`;
    
    const iconClass = alertData.icon || 'exclamation-circle';
    
    alertDiv.innerHTML = `
        <div class="alert-icon">
            <i class="fas fa-${iconClass}"></i>
        </div>
        <div class="alert-content">
            <h4>${alertData.title}</h4>
            <p>${alertData.description}</p>
            <span class="equipment-ref">${alertData.equipment}</span>
        </div>
        <div class="alert-status">
            <span class="status-badge ${alertData.status}">Active</span>
            <span class="alert-time">${alertData.timestamp}</span>
        </div>
    `;
    
    return alertDiv;
}

/**
 * Setup Event Listeners
 */
function setupEventListeners() {
    // Navigation menu items
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            // Remove active class from all items
            navItems.forEach(i => i.classList.remove('active'));
            // Add active class to clicked item
            this.classList.add('active');
        });
    });
    
    // Action buttons
    const actionButtons = document.querySelectorAll('.action-buttons .btn');
    actionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const buttonText = this.textContent.trim();
            console.log(`Button clicked: ${buttonText}`);
            // Add your action handling here
            showNotification(`${buttonText} action triggered`);
        });
    });
    
    // Filter button
    const filterButton = document.querySelector('.filter-button');
    if (filterButton) {
        filterButton.addEventListener('click', function() {
            console.log('Filter clicked');
            showNotification('Filter panel would open here');
        });
    }
    
    // Search functionality
    const searchBox = document.querySelector('.search-box input');
    if (searchBox) {
        searchBox.addEventListener('input', function(e) {
            console.log('Search query:', e.target.value);
        });
    }
    
    // Equipment search
    const equipmentSearch = document.querySelector('.search-filter input');
    if (equipmentSearch) {
        equipmentSearch.addEventListener('input', function(e) {
            console.log('Equipment search:', e.target.value);
        });
    }
    
    // User profile dropdown
    const userProfile = document.querySelector('.user-profile');
    if (userProfile) {
        userProfile.addEventListener('click', function() {
            console.log('User profile clicked');
            showNotification('User menu would open here');
        });
    }
    
    // Sidebar user
    const sidebarUser = document.querySelector('.sidebar-user');
    if (sidebarUser) {
        sidebarUser.addEventListener('click', function() {
            console.log('Sidebar user clicked');
            showNotification('User settings would open here');
        });
    }
    
    // Settings icon
    const settingsIcon = document.querySelector('.settings');
    if (settingsIcon) {
        settingsIcon.addEventListener('click', function() {
            console.log('Settings clicked');
            showNotification('Settings panel would open here');
        });
    }
    
    // Notifications icon
    const notificationsIcon = document.querySelector('.notifications');
    if (notificationsIcon) {
        notificationsIcon.addEventListener('click', function() {
            console.log('Notifications clicked');
            showNotification('Notifications panel would open here');
        });
    }
}

/**
 * Show Notification (Simple notification system)
 */
function showNotification(message) {
    // Create notification element
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #2563eb;
        color: white;
        padding: 16px 24px;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        font-size: 14px;
        z-index: 1000;
        animation: slideIn 0.3s ease-out;
    `;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    // Remove notification after 3 seconds
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => {
            notification.remove();
        }, 300);
    }, 3000);
}

// Add animations for notifications
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(400px);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

// Simulate real-time updates (for demo purposes)
function simulateRealtimeUpdates() {
    setInterval(() => {
        // Update last sync time
        const syncInfo = document.querySelector('.sync-info span:last-child');
        if (syncInfo) {
            syncInfo.textContent = 'Last sync: just now';
        }
        
        // Simulate occasional data changes
        if (Math.random() > 0.8) {
            console.log('Simulating data update...');
        }
    }, 30000); // Update every 30 seconds
}

// Start real-time simulation
simulateRealtimeUpdates();

console.log('CMMS Dashboard JavaScript loaded successfully');