<?php
require_once "config/session.php";

if (!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true) {
    header("location: index.php");
    exit;
}

include('navbar.php');
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>ANJUMA Control Dashboard</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

    <style>
        body {
            background: #f8f9fa;
        }

        .card {
            border-radius: 12px;
        }

        .scene-btn {
            padding: 10px;
            border-radius: 10px;
            border: 1px solid #ddd;
            cursor: pointer;
            transition: 0.2s;
            background: white;
            text-align: center;
        }

        .scene-btn.active {
            background: #0d6efd;
            color: white;
            border-color: #0d6efd;
        }

        .scene-btn:hover {
            transform: scale(1.02);
        }

        #chart {
            width: 100%;
            height: 220px;
        }

        .small-text {
            font-size: 13px;
            color: #666;
        }

        .preview-box {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
        }

        .preview-box iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: none;
        }

        .offline {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background: #111;
            font-weight: bold;
        }
    </style>
</head>

<body>

<div class="container py-3">

    <div class="row g-3">

        <!-- ================= LEFT CONTROL PANEL ================= -->
        <div class="col-12 col-lg-4">
            <div class="card p-3">

                <h5>🎛 OBS Control</h5>

                <div class="mb-2 small-text">
                    Scene: <b id="scene">-</b>
                </div>

                <div class="mb-2 small-text">
                    Live1: <span id="live1">0</span><br>
                    Live2: <span id="live2">0</span>
                </div>

                <!-- STREAM CONTROL -->
                <div class="d-flex gap-2 mt-3">
                    <button class="btn btn-success btn-sm" onclick="startStream()">Start</button>
                    <button class="btn btn-danger btn-sm" onclick="stopStream()">Stop</button>

                    <button id="fixBtn" class="btn btn-warning btn-sm" onclick="fixStream()">
                        FIX STREAM
                    </button>
                </div>

                <!-- SYSTEM CONTROL -->
                <div class="d-flex gap-2 mt-3 align-items-center">

                    <button id="obsStartBtn" class="btn btn-dark btn-sm" onclick="startOBS()">
                        OBS Starten
                    </button>

                    <span id="obsStatus" class="small-text ms-2">
                        🔴 Disconnected
                    </span>

                </div>

            </div>
        </div>

        <!-- ================= SCENES ================= -->
        <div class="col-12 col-lg-8">
            <div class="card p-3">

                <h5>🎬 Scenes</h5>

                <div class="row g-2">

                    <div class="col-6 col-md-3"><div id="scene-Starting" class="scene-btn" onclick="setScene('Starting')">Starting</div></div>
                    <div class="col-6 col-md-3"><div id="scene-Live1" class="scene-btn" onclick="setScene('Live1')">Live1</div></div>
                    <div class="col-6 col-md-3"><div id="scene-Live2" class="scene-btn" onclick="setScene('Live2')">Live2</div></div>
                    <div class="col-6 col-md-3"><div id="scene-Low" class="scene-btn" onclick="setScene('Low')">Low</div></div>
                    <div class="col-6 col-md-3"><div id="scene-Offline" class="scene-btn" onclick="setScene('Offline')">Offline</div></div>

                </div>

            </div>
        </div>

        <!-- ================= CHART ================= -->
        <div class="col-12">
            <div class="card p-3">
                <h5>📊 Bitrate Live</h5>
                <canvas id="chart"></canvas>
            </div>
        </div>

        <!-- ================= PREVIEWS ================= -->
        <div class="col-12 col-lg-6">
            <div class="card p-3">
                <h5>📺 Live 1 Preview</h5>
                <div class="preview-box">
                    <div id="offline-live1" class="offline">OFFLINE</div>
                    <iframe id="preview-live1"></iframe>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-6">
            <div class="card p-3">
                <h5>📺 Live 2 Preview</h5>
                <div class="preview-box">
                    <div id="offline-live2" class="offline">OFFLINE</div>
                    <iframe id="preview-live2"></iframe>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- ================= SCRIPTS ================= -->
<script src="/dashboard.js"></script>
<script src="/health.js"></script>

</body>
</html>