document.addEventListener('DOMContentLoaded', function() {
    // Set last update time
    const now = new Date();
    document.getElementById('last-update').textContent = now.toLocaleString();
    
    // Mock data for commodity matrix
    const commodities = [
        { input: "Fab construction", proxy: "Copper", symbol: "HG", risk: "High", sensitivity: "0.78" },
        { input: "Advanced packaging", proxy: "Silver", symbol: "SI", risk: "Medium", sensitivity: "0.65" },
        { input: "Power consumption", proxy: "Natural Gas", symbol: "NG", risk: "Critical", sensitivity: "0.92" },
        { input: "Cleanroom materials", proxy: "Aluminum", symbol: "AL", risk: "Low", sensitivity: "0.45" },
        { input: "Export controls", proxy: "Industrial Metals", symbol: "INDU", risk: "High", sensitivity: "0.81" },
        { input: "Wafer production", proxy: "Silicon Metal", symbol: "SI-F", risk: "Medium", sensitivity: "0.58" },
        { input: "Chip testing", proxy: "Gold", symbol: "GC", risk: "Low", sensitivity: "0.32" }
    ];

    // Populate commodity matrix
    const matrixTable = document.getElementById('commodity-matrix');
    commodities.forEach(commodity => {
        const row = document.createElement('tr');
        row.className = 'border-b border-gray-700 hover:bg-gray-700';
        row.innerHTML = `
            <td class="py-3">${commodity.input}</td>
            <td class="py-3 font-medium">${commodity.proxy}</td>
            <td class="py-3">${commodity.symbol}</td>
            <td class="py-3">
                <span class="px-2 py-1 rounded-full text-xs ${
                    commodity.risk === 'Critical' ? 'bg-red-900 text-red-100' : 
                    commodity.risk === 'High' ? 'bg-orange-900 text-orange-100' :
                    commodity.risk === 'Medium' ? 'bg-yellow-900 text-yellow-100' : 'bg-green-900 text-green-100'
                }">${commodity.risk}</span>
            </td>
            <td class="py-3 text-right">
                <button class="text-primary-500 hover:text-primary-400">
                    <i data-feather="chevron-down"></i>
                </button>
            </td>
        `;
        matrixTable.appendChild(row);
    });

    // Mock trade signals
    const signals = [
        { 
            commodity: "Copper (HG)", 
            direction: "Bullish", 
            confidence: "High", 
            rationale: "Capex acceleration + flat price structure", 
            date: "2 hours ago" 
        },
        { 
            commodity: "Natural Gas (NG)", 
            direction: "Volatility", 
            confidence: "Medium", 
            rationale: "Rising energy stress + Taiwan power issues", 
            date: "1 day ago" 
        },
        { 
            commodity: "Silver (SI)", 
            direction: "Bearish", 
            confidence: "Low", 
            rationale: "Advanced packaging demand slowing", 
            date: "3 days ago" 
        }
    ];

    // Populate trade signals
    const signalsContainer = document.getElementById('trade-signals');
    signals.forEach(signal => {
        const signalEl = document.createElement('div');
        signalEl.className = 'bg-gray-700 p-4 rounded-lg';
        signalEl.innerHTML = `
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="font-bold ${signal.direction === 'Bullish' ? 'text-green-400' : signal.direction === 'Bearish' ? 'text-red-400' : 'text-yellow-400'}">
                        ${signal.commodity} - ${signal.direction}
                    </h3>
                    <p class="text-sm text-gray-400 mt-1">${signal.rationale}</p>
                </div>
                <div class="text-right">
                    <span class="text-xs px-2 py-1 rounded-full ${
                        signal.confidence === 'High' ? 'bg-green-900 text-green-100' :
                        signal.confidence === 'Medium' ? 'bg-yellow-900 text-yellow-100' : 'bg-red-900 text-red-100'
                    }">${signal.confidence} confidence</span>
                    <p class="text-xs text-gray-500 mt-1">${signal.date}</p>
                </div>
            </div>
        `;
        signalsContainer.appendChild(signalEl);
    });

    // Update active signals count
    document.getElementById('active-signals').textContent = signals.length;
    
    // Update critical alerts count
    const criticalAlerts = commodities.filter(c => c.risk === 'Critical').length;
    document.getElementById('critical-alerts').textContent = criticalAlerts;
    
    // Set market state
    document.getElementById('market-state').textContent = 
        criticalAlerts > 2 ? 'Elevated' : criticalAlerts > 0 ? 'Watch' : 'Neutral';
    
    if (criticalAlerts > 2) {
        document.getElementById('market-state').classList.add('text-red-500');
    } else if (criticalAlerts > 0) {
        document.getElementById('market-state').classList.add('text-yellow-500');
    } else {
        document.getElementById('market-state').classList.add('text-green-500');
    }
});