<?php
session_start();

// Initialize timer if not set
if (!isset($_SESSION['start_time'])) {
    $_SESSION['start_time'] = time();
}

$time_limit = 300; // 5 minutes in seconds
$elapsed = time() - $_SESSION['start_time'];
$remaining = max(0, $time_limit - $elapsed);

$initial_code = file_get_contents('grid_logic.php');
?>
<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PowerGrid OS - System Control</title>
    <link rel="stylesheet" href="style.css">
    <!-- Monaco Editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>
</head>

<body>
    <div id="boot-screen">
        <div class="boot-content">
            <h1>POWERGRID OS [VERSION 2.4.0]</h1>
            <p>CORE_TEMPERATURE: STABLE</p>
            <p>NETWORK_STATUS: CONNECTED</p>
            <p>SECURITY_PROTOCOL: ACTIVE</p>
            <br>
            <button id="boot-btn">> BOOT SYSTEM</button>
        </div>
    </div>

    <div id="success-screen">
        <div class="success-content">
            <h1>SYSTEM STABILIZED</h1>
            <p>POWER GRID RESTORED. PARTY SECURED.</p>
            <p>CONGRATULATIONS, ENGINEERS.</p>
            <br>
            <button onclick="location.reload()">REBOOT SYSTEM</button>
        </div>
    </div>
    <div class="crt-overlay"></div>

    <header>
        <div class="system-title">POWERGRID OS v.2.4.0 [SECURED]</div>
        <div class="countdown" id="timer">10:00</div>
    </header>

    <main>
        <div class="editor-container">
            <div class="editor-header">
                <span>[EDIT] grid_logic.php</span>
                <span id="save-status">AUTO-SAVING DISABLED</span>
            </div>
            <div id="monaco-editor"></div>
            <div class="editor-footer" style="padding: 1rem; border-top: 1px solid var(--terminal-green);">
                <button id="run-tests-btn">RUN DIAGNOSTICS [F5]</button>
            </div>
        </div>

        <div class="sidebar">
            <div class="panel">
                <h2>UNIT TEST DASHBOARD</h2>
                <ul class="test-list" id="test-dashboard">
                    <li class="test-item pending" data-test="0">
                        <span class="test-status"></span> Empty Array Resilience
                    </li>
                    <li class="test-item pending" data-test="1">
                        <span class="test-status"></span> Nested Metadata Extraction
                    </li>
                    <li class="test-item pending" data-test="2">
                        <span class="test-status"></span> Float Precision (50.0000Hz)
                    </li>
                    <li class="test-item pending" data-test="3">
                        <span class="test-status"></span> System Stability
                    </li>
                    <li class="test-item pending" data-test="4">
                        <span class="test-status"></span> Global State Purity
                    </li>
                </ul>
            </div>

            <div class="panel" style="flex: 1;">
                <h2>SYSTEM LOGS</h2>
                <div id="system-log">
                    [00:00:00] INITIALIZING PARTY GRID OS...<br>
                    [00:00:01] WARNING: POWER FAILURE DETECTED IN MAIN STAGE MODULE.<br>
                    [00:00:02] INCIDENT RESPONSE REQUIRED: BEST IN CLASS PROGRAMMERS NEEDED.<br>
                    [00:00:03] TOTAL SHUTDOWN INITIATED. SAVE THE PARTY: 05:00...
                </div>
            </div>

            <div class="alert-box">
                <strong>[ALERT]</strong> TOTAL SHUTDOWN IN PROGRESS. REPAIR PHP LOGIC TO ABORT.
            </div>
        </div>
    </main>

    <script>
        const INITIAL_TIME_REMAINING = <?php echo $remaining; ?>;
        const INITIAL_CODE = <?php echo json_encode($initial_code); ?>;
    </script>
    <script src="script.js"></script>
</body>

</html>