<?php
$config = require_once 'config.php';
?>
<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GRID STABILIZER: BLACKOUT PROTOCOL</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Google Fonts for more "high-tech" look -->
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <script>
        // Inject PHP config to JS
        window.APP_CONFIG = <?php echo json_encode($config); ?>;
    </script>
</head>

<body>
    <div class="noise-overlay"></div>

    <!-- Start Overlay -->
    <div id="overlay" class="overlay">
        <h1 style="font-size: 3rem; margin-bottom: 20px; letter-spacing: 15px;">SYSTEM OFFLINE</h1>
        <p style="margin-bottom: 40px; color: rgba(0, 242, 255, 0.6);">GRID COLLAPSE IMMINENT. AUTHORIZATION REQUIRED.
        </p>
        <button id="init-btn" class="initialize-btn">INITIALIZE SYSTEM</button>
    </div>

    <div class="dashboard">
        <!-- Battery Side -->
        <div class="battery-section">
            <div class="battery-label">SYSTEM ENERGY</div>
            <div class="battery-container">
                <div id="battery-level" class="battery-level" style="height: 100%;"></div>
            </div>
            <div id="timer-display" style="margin-top: 20px; font-weight: bold; font-size: 1.2rem;">10:00</div>
        </div>

        <!-- Main Puzzle -->
        <main class="puzzle-section">
            <div id="warning-panel" class="warning-panel">
                <div class="warning-header">LOAD BALANCER STATUS</div>
                <div class="warning-body">GRID MONITORED - STABLE</div>
            </div>

            <div class="puzzle-header">Grid Load Balancer</div>

            <div class="sliders-container">
                <!-- Slider Phase A -->
                <div class="slider-group">
                    <div class="slider-label">
                        <span>PHASE A - REACTIVE LOAD</span>
                        <span id="val-a">200 KW</span>
                    </div>
                    <input type="range" id="slider-a" min="0" max="500" value="200">
                </div>

                <!-- Slider Phase B -->
                <div class="slider-group">
                    <div class="slider-label">
                        <span>PHASE B - CAPACITIVE LOAD</span>
                        <span id="val-b">200 KW</span>
                    </div>
                    <input type="range" id="slider-b" min="0" max="500" value="200">
                </div>

                <!-- Slider Phase C -->
                <div class="slider-group">
                    <div class="slider-label">
                        <span>PHASE C - INDUCTIVE LOAD</span>
                        <span id="val-c">200 KW</span>
                    </div>
                    <input type="range" id="slider-c" min="0" max="500" value="200">
                </div>
            </div>

            <div class="gauge-container">
                <div class="module-title">TOTAL GRID OUTPUT</div>
                <div class="power-display">
                    <span id="power-value">600</span>
                    <span class="power-unit">KW</span>
                </div>
                <div class="module-title" style="margin-top: 20px;">STABILIZATION PROGRESS</div>
                <div class="stability-bar-container">
                    <div id="stability-progress" class="stability-progress"></div>
                </div>
            </div>
        </main>

        <!-- Status Sidebar -->
        <aside class="status-sidebar">
            <h2 style="font-size: 1rem; margin-bottom: 20px; border-bottom: 1px solid var(--primary-neon);">SYSTEM
                STATUS</h2>

            <div class="status-module">
                <div class="module-title">PROTOCOL</div>
                <div>BLACKOUT_VOICE_v4.2</div>
            </div>

            <div class="status-module">
                <div class="module-title">ENCRYPTION</div>
                <div style="color: var(--success-neon);">ACTIVE</div>
            </div>

            <div class="status-module">
                <div class="module-title">GRID LOAD (REALTIME)</div>
                <div class="visual-chart">
                    <div class="chart-bar" style="height: 40%; animation-delay: 0.1s"></div>
                    <div class="chart-bar" style="height: 70%; animation-delay: 0.2s"></div>
                    <div class="chart-bar" style="height: 30%; animation-delay: 0.3s"></div>
                    <div class="chart-bar" style="height: 90%; animation-delay: 0.4s"></div>
                    <div class="chart-bar" style="height: 50%; animation-delay: 0.5s"></div>
                </div>
            </div>

            <div class="status-module">
                <div class="module-title">HA NODE</div>
                <div style="font-size: 0.7rem; word-break: break-all;">
                    <?php echo $config['HA_URL']; ?>
                </div>
            </div>

            <div class="status-module">
                <div class="module-title">SUBSYSTEM HEALTH</div>
                <div class="monitor-grid">
                    <div class="monitor-item" id="mon-core">CORE: 98%</div>
                    <div class="monitor-item" id="mon-heat">HEAT: 42C</div>
                    <div class="monitor-item" id="mon-volts">VOLT: 230V</div>
                    <div class="monitor-item" id="mon-flow">FLOW: NOMINAL</div>
                </div>
            </div>

            <div class="status-module">
                <div class="module-title">GRID TOPOLOGY</div>
                <div class="topology-view">
                    <div class="topo-node active"></div>
                    <div class="topo-line"></div>
                    <div class="topo-node pulse"></div>
                    <div class="topo-line"></div>
                    <div class="topo-node"></div>
                </div>
            </div>

            <div class="status-module">
                <div class="module-title">GRID FREQUENCY</div>
                <div class="frequency-meter">
                    <div id="freq-bar" class="freq-bar"></div>
                    <div class="freq-target"></div>
                </div>
                <div id="freq-val" style="font-size: 0.7rem; text-align: center; margin-top: 5px;">50.00 Hz</div>
            </div>

            <div class="status-module" style="height: 100px; overflow: hidden; position: relative;">
                <div class="module-title">ENCRYPTED DATA STREAM</div>
                <div id="data-stream" class="data-stream"></div>
            </div>

            <div style="flex-grow: 1;"></div>

            <div class="status-module" style="background: rgba(255, 0, 60, 0.1); border-color: var(--danger-neon);">
                <div class="module-title" style="color: var(--danger-neon);">SECURITY ALERT</div>
                <div class="glitch-text">UNAUTHORIZED ACCESS</div>
            </div>
        </aside>

        <!-- Terminal -->
        <footer id="terminal" class="terminal-footer">
            <div class="terminal-line">Waiting for system initialization...</div>
        </footer>
    </div>

    <script type="module" src="assets/js/main.js"></script>
</body>

</html>