<?php
// Test AI Control Panel Auto-Opening
require_once '../includes/header.php';
?>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-vial me-2"></i>AI Control Panel Test</h2>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-brain me-2"></i>Test Results</h5>
                </div>
                <div class="card-body">
                    <div id="testResults">
                        <div class="text-center py-5">
                            <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                            <p class="mt-3">Running AI control panel tests...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Information</h5>
                </div>
                <div class="card-body">
                    <p>This test verifies that the AI control panel:</p>
                    <ul>
                        <li>Loads automatically when the page opens</li>
                        <li>Displays correct system status</li>
                        <li>Shows appropriate quick actions</li>
                        <li>Provides real-time metrics visualization</li>
                    </ul>
                    <hr>
                    <p><strong>Expected Behavior:</strong></p>
                    <ul>
                        <li>Control panel modal opens automatically after 2 seconds</li>
                        <li>Status indicators show current system state</li>
                        <li>Chart displays AI metrics if data exists</li>
                        <li>Quick action buttons are functional</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Test the AI control panel functionality
async function runTests() {
    const resultsDiv = document.getElementById('testResults');
    let results = [];
    
    try {
        // Test 1: Check if control panel status endpoint works
        results.push('<h5>Test 1: Control Panel Status Endpoint</h5>');
        const statusResponse = await fetch('ajax/get_control_panel_status.php');
        const statusData = await statusResponse.json();
        
        if (statusData.success) {
            results.push('<div class="alert alert-success">✓ Status endpoint working correctly</div>');
            results.push(`<div class="alert alert-info">System Ready: ${statusData.system_ready ? 'Yes' : 'No'}</div>`);
            
            // Display status details
            const status = statusData.status;
            results.push(`
                <div class="card mb-3">
                    <div class="card-body">
                        <h6>System Status Details:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-${status.tables_exist ? 'check text-success' : 'times text-danger'}"></i> Tables Exist: ${status.tables_exist ? 'Yes' : 'No'}</li>
                            <li><i class="fas fa-${status.data_available ? 'check text-success' : 'exclamation text-warning'}"></i> Data Available: ${status.data_available ? 'Yes' : 'No'}</li>
                            <li><i class="fas fa-info-circle text-info"></i> Predictions Count: ${status.predictions_count}</li>
                            <li><i class="fas fa-lightbulb text-warning"></i> Pending Recommendations: ${status.recommendations_count}</li>
                        </ul>
                    </div>
                </div>
            `);
        } else {
            results.push('<div class="alert alert-danger">✗ Status endpoint failed: ' + statusData.message + '</div>');
        }
        
        // Test 2: Check if required files exist
        results.push('<h5 class="mt-4">Test 2: Required Files</h5>');
        const requiredFiles = [
            'ajax/get_control_panel_status.php',
            'ajax/ai_controller.php',
            'includes/notification_system.php'
        ];
        
        for (const file of requiredFiles) {
            try {
                const response = await fetch(file, { method: 'HEAD' });
                if (response.ok) {
                    results.push(`<div class="alert alert-success">✓ ${file}</div>`);
                } else {
                    results.push(`<div class="alert alert-danger">✗ ${file} (Not found)</div>`);
                }
            } catch (error) {
                results.push(`<div class="alert alert-danger">✗ ${file} (${error.message})</div>`);
            }
        }
        
        // Test 3: Simulate control panel opening
        results.push('<h5 class="mt-4">Test 3: Control Panel Simulation</h5>');
        results.push(`
            <div class="alert alert-info">
                <h6>Manual Test Instructions:</h6>
                <ol>
                    <li>Navigate to <a href="index.php" target="_blank">AI Dashboard</a></li>
                    <li>Observe if the control panel opens automatically after 2 seconds</li>
                    <li>Check that system status is displayed correctly</li>
                    <li>Verify that quick action buttons work</li>
                    <li>Confirm that the chart displays properly</li>
                </ol>
            </div>
        `);
        
        // Test 4: Check Chart.js availability
        results.push('<h5 class="mt-4">Test 4: Chart Library</h5>');
        if (typeof Chart !== 'undefined') {
            results.push('<div class="alert alert-success">✓ Chart.js library loaded</div>');
        } else {
            results.push('<div class="alert alert-danger">✗ Chart.js library not found</div>');
        }
        
    } catch (error) {
        results.push(`<div class="alert alert-danger">Test failed with error: ${error.message}</div>`);
    }
    
    resultsDiv.innerHTML = results.join('');
}

// Run tests when page loads
document.addEventListener('DOMContentLoaded', runTests);
</script>

<?php include '../includes/footer.php'; ?>