<?php
require_once __DIR__ . '/../auth/check.php';
require_once __DIR__ . '/../auth/access-control.php';
$auth_current_user = $_SESSION['auth_user'] ?? 'guest';
// require_once __DIR__ . '/../tracking/track.php';
require_once __DIR__ . '/../settings/api/load-settings.php';
date_default_timezone_set('Australia/Sydney');

// Generate CSRF token if not present
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// Configuration
$totalMasterUnits = 100;
$pingThreshold = get_system_setting('offline_thresholds', 'vpn_ping_s', 90);
$cacheBuster = rand(0, 1000000);

// Collect camera status data
$workshops = [];
$onlineStagingUnits = [];
$recentlyOnlineUnits = [];
$offlineStagingUnits = [];
$onlineCount = 0;
$offlineCount = 0;

$uploadThreshold = 600; // 10 minutes — if image timestamp is this fresh, camera is uploading
$recentThreshold = 86400; // 24 hours — recently online if pinged/uploaded within this

function formatAge($seconds) {
    if ($seconds < 60) return 'just now';
    if ($seconds < 3600) return floor($seconds / 60) . 'm ago';
    if ($seconds < 86400) return floor($seconds / 3600) . 'h ago';
    return floor($seconds / 86400) . 'd ago';
}

for ($i = 1; $i <= $totalMasterUnits; $i++) {
    $vpnFile = "/home/subdomains/livetimelapse/public_html/monitoring/logs/tlc_master{$i}/VPNIP.txt";
    $vpnIP = file_exists($vpnFile) ? trim(file_get_contents($vpnFile)) : '';
    $vpnAge = $vpnIP !== '' ? (time() - filemtime($vpnFile)) : PHP_INT_MAX;

    $isPinging = ($vpnAge < $pingThreshold);

    // Read image timestamp
    $imageTimestamp = null;
    $imageAge = null;
    $imageTimeFormatted = null;
    $tsFile = "/home/subdomains/livetimelapse/public_html/webcams/tlc_master{$i}/timestamp.txt";
    if (file_exists($tsFile)) {
        $ts = (int) file_get_contents($tsFile);
        if ($ts > 0) {
            $imageTimestamp = $ts;
            $imageAge = time() - $ts;
            $imageTimeFormatted = date('g:ia', $ts);
        }
    }

    // Check timestamp file age (how recently the image file was written to disk)
    $tsFileAge = null;
    if (file_exists($tsFile)) {
        $tsFileAge = time() - filemtime($tsFile);
    }

    // Check if camera is uploading images despite not pinging
    $isUploading = false;
    if (!$isPinging && $tsFileAge !== null) {
        $isUploading = ($tsFileAge < $uploadThreshold);
    }

    // Check ping.txt age for recently online detection
    $pingFileAge = null;
    $pingFile = "/home/subdomains/livetimelapse/public_html/monitoring/logs/tlc_master{$i}/ping.txt";
    if (file_exists($pingFile)) {
        $pingFileAge = time() - filemtime($pingFile);
    }

    if ($isPinging || $isUploading) {
        $onlineCount++;
    } else {
        $offlineCount++;
    }

    // Determine status class and label
    if ($isPinging) {
        $statusClass = 'status-online';
        $pingStatus = 'PINGING';
        $overlayClass = 'pinging';
    } elseif ($isUploading) {
        $statusClass = 'status-uploading';
        $pingStatus = 'UPLOADING';
        $overlayClass = 'uploading';
    } else {
        $statusClass = 'status-offline';
        $pingStatus = 'NOT PINGING';
        $overlayClass = 'not-pinging';
    }

    // Get shortened VPN IP (remove 192.168. prefix)
    $vpnIPShort = $vpnIP ? str_replace("192.168.", "", trim($vpnIP)) : 'N/A';

    // Determine label
    $label = '';
    if ($i == 1) $label = 'Brisbane Workshop';
    if ($i == 2) $label = 'Sydney Workshop';

    // Determine if recently online (pinged or uploaded within 24h but not currently online)
    $isRecentlyOnline = false;
    if (!$isPinging && !$isUploading) {
        if (($pingFileAge !== null && $pingFileAge < $recentThreshold) ||
            ($tsFileAge !== null && $tsFileAge < $recentThreshold)) {
            $isRecentlyOnline = true;
        }
    }

    $camera = [
        'id' => $i,
        'vpnIP' => trim($vpnIP),
        'vpnIPShort' => $vpnIPShort,
        'isPinging' => $isPinging,
        'isUploading' => $isUploading,
        'isRecentlyOnline' => $isRecentlyOnline,
        'pingStatus' => $pingStatus,
        'statusClass' => $statusClass,
        'overlayClass' => $overlayClass,
        'vpnAge' => $vpnAge,
        'imageAge' => $imageAge,
        'imageTimeFormatted' => $imageTimeFormatted,
        'label' => $label,
        'imageUrl' => "https://livetimelapse.com.au/webcams/tlc_master{$i}/980x655.jpg?nocache={$cacheBuster}",
        'detailUrl' => "camera-detail.html?id={$i}",
        'resetUrl' => "reset-master.php?cameraNumber={$i}"
    ];

    // Separate into 4 groups
    if ($i <= 2) {
        $workshops[] = $camera;
    } elseif ($isPinging || $isUploading) {
        $onlineStagingUnits[] = $camera;
    } elseif ($isRecentlyOnline) {
        $recentlyOnlineUnits[] = $camera;
    } else {
        $offlineStagingUnits[] = $camera;
    }
}
$userTheme = load_user_theme($_SESSION['auth_user'] ?? '');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?= htmlspecialchars($_SESSION['csrf_token'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
    <title>Staging Wall</title>
    <script type="8ff202077cc8fdb8db986a83-text/javascript">(function(){var t='<?php echo htmlspecialchars($userTheme,ENT_QUOTES,"UTF-8");?>';if(t==='dark')document.documentElement.setAttribute('data-theme','dark');})();</script>
    <link rel="shortcut icon" href="https://www.livetimelapse.com.au/php/tlc.include.ico">
    <link rel="stylesheet" href="css/staging.css?v=<?php echo time(); ?>">
    <link rel="stylesheet" href="css/lightbox.css?v=<?php echo time(); ?>">
</head>
<body>
    <!-- Navigation Bar -->
    <?php $navPageTitle = 'Staging Wall'; require __DIR__ . '/../includes/nav.php'; ?>

    <!-- Navigation Bar -->
    <nav class="nav-bar">
        <div class="nav-content">
            <div class="nav-left">
                <span class="location">Time Lapse Pty Ltd — Staging Wall</span>
            </div>
            <div class="nav-center">
                <div class="status-summary">
                    <span class="status-item online">
                        <span class="status-dot online"></span>
                        <span class="status-count"><?php echo $onlineCount; ?></span> Online
                    </span>
                    <span class="status-item offline">
                        <span class="status-dot offline"></span>
                        <span class="status-count"><?php echo $offlineCount; ?></span> Offline
                    </span>
                </div>
            </div>
            <div class="nav-right">
                <div class="nav-controls">
                    <input type="text" id="filterInput" class="filter-input" placeholder="Filter by #..." aria-label="Filter cameras by number">
                    <button id="refreshBtn" class="nav-btn" title="Refresh" aria-label="Refresh page">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M23 4v6h-6M1 20v-6h6"/>
                            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                        </svg>
                    </button>
                    <label class="auto-refresh">
                        <input type="checkbox" id="autoRefresh" checked>
                        <span>Auto (5m)</span>
                    </label>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <?php
    function renderCameraCard($camera) {
        $altPrefix = $camera['label'] ? 'Workshop' : 'Staging';
        ?>
        <article class="camera-card <?php echo $camera['statusClass']; ?>"
                 data-id="<?php echo $camera['id']; ?>"
                 data-vpn-ip="<?php echo htmlspecialchars($camera['vpnIP']); ?>"
                 data-vpn-ip-short="<?php echo htmlspecialchars($camera['vpnIPShort']); ?>"
                 data-status="<?php echo $camera['pingStatus']; ?>"
                 data-label="<?php echo htmlspecialchars($camera['label']); ?>"
                 data-image-url="<?php echo htmlspecialchars($camera['imageUrl']); ?>"
                 data-reset-url="<?php echo htmlspecialchars($camera['resetUrl']); ?>"
                 data-history-url="<?php echo htmlspecialchars($camera['detailUrl']); ?>">
            <div class="card-header">
                <span class="camera-number">#<?php echo $camera['id']; ?></span>
                <span class="vpn-ip">VPN ID <?php echo htmlspecialchars($camera['vpnIPShort']); ?></span>
                <?php if ($camera['vpnIP']): ?>
                <button class="copy-ip-btn" data-ip="<?php echo htmlspecialchars($camera['vpnIP']); ?>" title="Copy full IP to clipboard">Copy</button>
                <?php endif; ?>
                <div class="card-header-actions">
                    <?php if ($camera['vpnIP']): ?>
                    <a href="ssh://<?php echo htmlspecialchars($camera['vpnIP']); ?>" class="ssh-link" title="SSH to Camera">SSH</a>
                    <?php endif; ?>
                    <button class="reset-link" data-camera-id="<?php echo $camera['id']; ?>" title="Reset Camera">Reset</button>
                </div>
            </div>
            <div class="card-image" data-clickable="true">
                <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="8ff202077cc8fdb8db986a83-|49"></script><img src="<?php echo htmlspecialchars($camera['imageUrl']); ?>"
                     alt="<?php echo $altPrefix . ' ' . $camera['id']; ?>"
                     loading="lazy"
                     onerror="this.onerror=null;this.src='images/coming-soon.jpg'">
                <div class="image-overlay">
                    <span class="overlay-number">#<?php echo $camera['id']; ?></span>
                    <span class="overlay-status <?php echo $camera['overlayClass']; ?>">
                        <?php echo $camera['pingStatus']; ?>
                    </span>
                </div>
                <?php if ($camera['imageAge'] !== null && ($camera['isPinging'] || $camera['isUploading'] || $camera['isRecentlyOnline'])): ?>
                <div class="image-time-overlay">
                    <span class="image-time-value"><?php echo $camera['imageTimeFormatted']; ?></span>
                    <span class="image-time-age"><?php echo formatAge($camera['imageAge']); ?></span>
                </div>
                <?php endif; ?>
            </div>
            <?php if ($camera['label']): ?>
            <div class="card-footer">
                <span class="camera-label"><?php echo htmlspecialchars($camera['label']); ?></span>
            </div>
            <?php endif; ?>
        </article>
        <?php
    }
    ?>
    <main class="main-content">
        <!-- Workshop Computers Section -->
        <section class="camera-section">
            <h2 class="section-title">Workshop Computers</h2>
            <div class="camera-grid" id="workshopGrid">
                <?php foreach ($workshops as $camera) renderCameraCard($camera); ?>
            </div>
        </section>

        <!-- Online Staging Units Section -->
        <section class="camera-section">
            <h2 class="section-title">Online Staging Units <span class="section-count">(<?php echo count($onlineStagingUnits); ?>)</span></h2>
            <div class="camera-grid" id="onlineGrid">
                <?php foreach ($onlineStagingUnits as $camera) renderCameraCard($camera); ?>
                <?php if (empty($onlineStagingUnits)): ?>
                <p class="section-empty">No staging units currently online</p>
                <?php endif; ?>
            </div>
        </section>

        <!-- Recently Online Staging Units Section -->
        <?php if (!empty($recentlyOnlineUnits)): ?>
        <section class="camera-section">
            <h2 class="section-title">Recently Online <span class="section-count">(<?php echo count($recentlyOnlineUnits); ?>)</span> <span class="section-subtitle">— pinged or uploaded in the last 24 hours</span></h2>
            <div class="camera-grid" id="recentGrid">
                <?php foreach ($recentlyOnlineUnits as $camera) renderCameraCard($camera); ?>
            </div>
        </section>
        <?php endif; ?>

        <!-- Offline Staging Units Section -->
        <section class="camera-section">
            <h2 class="section-title">Offline Staging Units <span class="section-count">(<?php echo count($offlineStagingUnits); ?>)</span></h2>
            <div class="camera-grid" id="offlineGrid">
                <?php foreach ($offlineStagingUnits as $camera) renderCameraCard($camera); ?>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <span><?php echo count($onlineStagingUnits) + count($recentlyOnlineUnits) + count($offlineStagingUnits); ?> Staging Units + <?php echo count($workshops); ?> Workshops</span>
            <span class="separator">|</span>
            <span><?php echo $onlineCount; ?> Online (<?php echo round(($onlineCount / $totalMasterUnits) * 100); ?>%)</span>
            <span class="separator">|</span>
            <span><?php echo $offlineCount; ?> Offline (<?php echo round(($offlineCount / $totalMasterUnits) * 100); ?>%)</span>
            <span class="separator">|</span>
            <a href="/auth/logout.php" class="logout-link">Logout (<?php echo htmlspecialchars(ucfirst($auth_current_user)); ?>)</a>
        </div>
    </footer>

    <!-- Modal for confirmations -->
    <div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true" aria-label="Confirmation">
        <div class="modal-content">
            <h3 id="modalTitle">Confirm Action</h3>
            <p id="modalMessage">Are you sure?</p>
            <div class="modal-buttons">
                <button class="btn-cancel" id="modalCancel">Cancel</button>
                <button class="btn-confirm" id="modalConfirm">Confirm</button>
            </div>
        </div>
    </div>

    <!-- Staging Lightbox -->
    <div class="stg-lightbox-overlay" id="stgLightboxOverlay" role="dialog" aria-modal="true" aria-label="Camera details">
        <div class="stg-lightbox-container">
            <div class="stg-lightbox-header">
                <button class="stg-nav-btn" id="stgNavPrev" title="Previous camera">&#8249;</button>
                <div class="stg-lightbox-title-section">
                    <h2 class="stg-lightbox-title" id="stgLightboxTitle">Camera #1</h2>
                    <div class="stg-lightbox-subtitle">
                        <span class="stg-lightbox-status-badge" id="stgLightboxStatus">...</span>
                        <span class="stg-lightbox-vpn-ip" id="stgLightboxVpnIp"></span>
                    </div>
                </div>
                <button class="stg-nav-btn" id="stgNavNext" title="Next camera">&#8250;</button>
                <button class="stg-lightbox-close" id="stgLightboxClose" title="Close (Esc)">&times;</button>
            </div>
            <div class="stg-lightbox-body">
                <!-- Quick Actions (above image/info grid) -->
                <div class="stg-quick-actions">
                    <a class="stg-action-btn stg-action-btn-ssh" id="stgBtnSSH" href="#" title="SSH to camera">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
                        SSH
                    </a>
                    <button class="stg-action-btn stg-action-btn-control" id="stgBtnControl" title="Camera Control">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                        Control
                    </button>
                    <button class="stg-action-btn stg-action-btn-copy" id="stgBtnCopy" title="Copy camera name">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                        Copy Name
                    </button>
                    <button class="stg-action-btn stg-action-btn-move" id="stgBtnMove" title="Move to Monitoring" disabled>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4"/><path d="M8 12h8"/></svg>
                        Move to Monitoring
                    </button>
                    <button class="stg-action-btn stg-action-btn-reset" id="stgBtnReset" title="Reset camera">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
                        Reset
                    </button>
                </div>
                <div class="stg-lightbox-main">
                    <!-- Image Section -->
                    <div class="stg-image-section">
                        <div class="stg-image-spinner" id="stgImageSpinner">
                            <div class="stg-spinner-ring"></div>
                        </div>
                        <img class="stg-lightbox-image" id="stgLightboxImage" alt="Camera Preview" src="">
                        <div class="stg-image-controls">
                            <button class="stg-refresh-btn" id="stgRefreshBtn" title="Refresh image">&#8635;</button>
                            <span class="stg-countdown-text" id="stgCountdown"></span>
                            <span class="stg-image-age" id="stgImageAge"></span>
                        </div>
                    </div>
                    <!-- Info Section -->
                    <div class="stg-info-section" id="stgInfoSection">
                        <!-- Status Panel -->
                        <div class="stg-panel" id="stgPanelStatus">
                            <h3 class="stg-panel-title">Status</h3>
                            <div class="stg-panel-body">
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator gray" id="stgIndVPN"></div>
                                    <span class="stg-stat-label">VPN</span>
                                    <span class="stg-stat-value" id="stgValVPN">--</span>
                                </div>
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator gray" id="stgIndSystem"></div>
                                    <span class="stg-stat-label">System</span>
                                    <span class="stg-stat-value" id="stgValSystem">--</span>
                                </div>
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator gray" id="stgIndUSB"></div>
                                    <span class="stg-stat-label">USB</span>
                                    <span class="stg-stat-value" id="stgValUSB">--</span>
                                </div>
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator gray" id="stgIndPublicIP"></div>
                                    <span class="stg-stat-label">Public IP</span>
                                    <span class="stg-stat-value" id="stgValPublicIP">--</span>
                                </div>
                            </div>
                        </div>
                        <!-- Camera Panel (hidden if no data) -->
                        <div class="stg-panel" id="stgPanelCamera" style="display:none">
                            <h3 class="stg-panel-title">Camera</h3>
                            <div class="stg-panel-body">
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator blue"></div>
                                    <span class="stg-stat-label">Model</span>
                                    <span class="stg-stat-value" id="stgValModel">--</span>
                                </div>
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator blue"></div>
                                    <span class="stg-stat-label">Shutter</span>
                                    <span class="stg-stat-value" id="stgValShutter">--</span>
                                </div>
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator blue"></div>
                                    <span class="stg-stat-label">Lens</span>
                                    <span class="stg-stat-value" id="stgValLens">--</span>
                                </div>
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator blue"></div>
                                    <span class="stg-stat-label">Focus</span>
                                    <span class="stg-stat-value" id="stgValFocus">--</span>
                                </div>
                            </div>
                        </div>
                        <!-- Hardware Panel (hidden if no data) -->
                        <div class="stg-panel" id="stgPanelHardware" style="display:none">
                            <h3 class="stg-panel-title">Hardware</h3>
                            <div class="stg-panel-body">
                                <div class="stg-stat-row">
                                    <div class="stg-stat-indicator blue"></div>
                                    <span class="stg-stat-label">Pi Model</span>
                                    <span class="stg-stat-value" id="stgValPiModel">--</span>
                                </div>
                            </div>
                        </div>
                        <!-- Camera Control Panel (hidden until clicked) -->
                        <div class="stg-camera-control" id="stgCameraControl">
                            <div class="stg-cc-header">
                                <button class="stg-cc-back" id="stgCcBack">&#8592; Back</button>
                                <span class="stg-cc-connected" id="stgCcConnected"></span>
                            </div>
                            <div class="stg-cc-buttons">
                                <button class="stg-cc-cmd-btn" id="stgCcBtnCamera">
                                    <span class="stg-cc-btn-label">Camera Status</span>
                                    <span class="stg-cc-btn-status">Waiting...</span>
                                    <span class="stg-cc-btn-age"></span>
                                </button>
                                <button class="stg-cc-cmd-btn" id="stgCcBtnStorage">
                                    <span class="stg-cc-btn-label">Storage Status</span>
                                    <span class="stg-cc-btn-status">Waiting...</span>
                                    <span class="stg-cc-btn-age"></span>
                                </button>
                                <button class="stg-cc-cmd-btn stg-cc-relay-btn" id="stgCcBtnRelay">
                                    <span class="stg-cc-btn-label">Test Relay</span>
                                    <span class="stg-cc-btn-status">Ready</span>
                                    <span class="stg-cc-btn-age"></span>
                                </button>
                                <button class="stg-cc-cmd-btn stg-cc-update-btn" id="stgCcBtnUpdate">
                                    <span class="stg-cc-btn-label">Update Software</span>
                                    <span class="stg-cc-btn-status">Ready</span>
                                    <span class="stg-cc-btn-age"></span>
                                </button>
                            </div>
                            <div class="stg-cc-raw" id="stgCcRaw">
                                <details class="stg-cc-raw-details">
                                    <summary>Raw output of last command</summary>
                                    <pre id="stgCcRawOutput"></pre>
                                </details>
                            </div>
                            <div class="stg-cc-history" id="stgCcHistory">
                                <h4 class="stg-cc-history-title">Command History</h4>
                                <div id="stgCcHistoryLog"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Move to Monitoring Dialog -->
    <div class="stg-move-overlay" id="stgMoveOverlay" role="dialog" aria-modal="true" aria-label="Move to monitoring">
        <div class="stg-move-dialog" id="stgMoveDialog">
            <div class="stg-move-header">
                <h3 class="stg-move-title" id="stgMoveTitle">Move Camera to Monitoring</h3>
                <button class="stg-move-close" id="stgMoveClose">&times;</button>
            </div>
            <div class="stg-move-body" id="stgMoveBody">
                <div class="stg-move-info">
                    <div class="stg-move-current">
                        <span class="stg-move-label">Current name:</span>
                        <span class="stg-move-value" id="stgMoveCurrentName">tlc_master21</span>
                    </div>
                </div>
                <div class="stg-move-input-group">
                    <label class="stg-move-input-label" for="stgMoveNewName">New production camera name:</label>
                    <div class="stg-move-autocomplete-wrapper">
                        <input type="text" class="stg-move-input" id="stgMoveNewName" placeholder="Start typing camera name..." autocomplete="off">
                        <div class="stg-move-autocomplete" id="stgMoveAutocomplete"></div>
                    </div>
                    <div class="stg-move-camera-info" id="stgMoveCameraInfo"></div>
                    <div class="stg-move-error" id="stgMoveError"></div>
                </div>
                <div class="stg-move-buttons">
                    <button class="stg-move-btn stg-move-btn-cancel" id="stgMoveBtnCancel">Cancel</button>
                    <button class="stg-move-btn stg-move-btn-move" id="stgMoveBtnMove" disabled>Move to Monitoring</button>
                </div>
            </div>
            <div class="stg-move-progress" id="stgMoveProgress" style="display:none">
                <div class="stg-move-steps" id="stgMoveSteps">
                    <div class="stg-move-step" data-step="1">
                        <div class="stg-move-step-icon"></div>
                        <span>Connecting to camera...</span>
                    </div>
                    <div class="stg-move-step" data-step="2">
                        <div class="stg-move-step-icon"></div>
                        <span>Authenticating...</span>
                    </div>
                    <div class="stg-move-step" data-step="3">
                        <div class="stg-move-step-icon"></div>
                        <span>Updating configuration...</span>
                    </div>
                    <div class="stg-move-step" data-step="4">
                        <div class="stg-move-step-icon"></div>
                        <span>Verifying changes...</span>
                    </div>
                    <div class="stg-move-step" data-step="5">
                        <div class="stg-move-step-icon"></div>
                        <span>Complete!</span>
                    </div>
                </div>
                <div class="stg-move-progress-error" id="stgMoveProgressError" style="display:none">
                    <span class="stg-move-progress-error-text" id="stgMoveProgressErrorText"></span>
                    <button class="stg-move-btn-retry" id="stgMoveBtnRetry">Retry</button>
                </div>
                <div class="stg-move-redirect" id="stgMoveRedirect" style="display:none">
                    <span>Redirecting to client page in <strong id="stgMoveCountdown">3</strong>s...</span>
                    <a class="stg-move-redirect-link" id="stgMoveRedirectLink" href="#">Open now</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Container -->
    <div class="stg-toast-container" id="stgToastContainer"></div>

    <!-- Scripts -->
    <script src="js/error-logger.js" type="8ff202077cc8fdb8db986a83-text/javascript"></script>
    <script type="8ff202077cc8fdb8db986a83-text/javascript">window.SYSTEM_SETTINGS = <?php echo json_encode([
        'staging_image_refresh_ms' => get_system_setting('refresh_intervals', 'staging_image_refresh_ms', 15000),
        'staging_control_refresh_ms' => get_system_setting('refresh_intervals', 'staging_control_refresh_ms', 60000),
    ]); ?>;</script>
    <script src="/shared/js/camera-control.js?v=<?php echo time(); ?>" type="8ff202077cc8fdb8db986a83-text/javascript"></script>
    <script src="js/lightbox.js?v=<?php echo time(); ?>" type="8ff202077cc8fdb8db986a83-text/javascript"></script>
    <script src="js/staging.js?v=<?php echo time(); ?>" type="8ff202077cc8fdb8db986a83-text/javascript"></script>
    <?php if (defined('TRACKING_ENTRY_ID')): ?>
    <script type="8ff202077cc8fdb8db986a83-text/javascript">window.TRACKING_ENTRY_ID = '<?php echo TRACKING_ENTRY_ID; ?>';</script>
    <script src="/tracking/activity-tracker.js" type="8ff202077cc8fdb8db986a83-text/javascript"></script>
    <?php endif; ?>
<foreignObject><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="8ff202077cc8fdb8db986a83-|49" defer></script></foreignObject></body>
</html>