<?php
session_start();
require_once 'api/db_connect.php';

// Strict Client Login Check
if (!isset($_SESSION['user_id'])) {
    header("Location: login.html");
    exit();
}

$user_id = $_SESSION['user_id'];
$username = $_SESSION['username'];
$role = $_SESSION['role'];

try {
    // Queries database columns matching the user's dashboard logic
    $sql = "SELECT e.*, 'You' AS owner_name 
            FROM EdgeNodes e 
            WHERE e.assigned_user_id = :user_id AND e.status = 'online' 
            ORDER BY e.node_name ASC";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([':user_id' => $user_id]);
    $nodes = $stmt->fetchAll();

} catch (PDOException $e) {
    $error = "System Error loading camera streams: " . $e->getMessage();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SentinelCloud | My Streams</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .sidebar { height: 100vh; position: sticky; top: 0; }
        .sidebar-scroll { flex-grow: 1; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; }
        .sidebar-scroll::-webkit-scrollbar { display: none; }
        .sidebar-category { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 1px; padding: 15px 20px 5px 20px; margin: 0; font-weight: 600; }
        .nav-links { flex-grow: 0; }
    </style>
</head>
<body class="dashboard-body">
    
    <nav class="sidebar">
        <div class="brand-header sidebar-brand">
            <div class="logo">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                </svg>
            </div>
            <h2>SentinelCloud</h2>
        </div>
        
        <div class="sidebar-scroll">
            <p class="sidebar-category">Overview</p>
            <ul class="nav-links">
                <li><a href="user_dashboard.php">Dashboard</a></li>
            </ul>

            <p class="sidebar-category">Surveillance</p>
            <ul class="nav-links">
                <li><a href="user_feeds.php" class="active">Live Feed</a></li>
                <li><a href="user_archives.php">Video Archive</a></li>
            </ul>

            <p class="sidebar-category">Account</p>
            <ul class="nav-links">
                <li><a href="user_settings.php">Settings</a></li>
            </ul>
        </div>

        <div class="sidebar-footer" style="margin-top: auto; padding-bottom: 25px;">
            <p>Client: <strong><?= htmlspecialchars($username) ?></strong></p>
            <a href="api/logout.php" class="btn-logout">Terminate Session</a>
        </div>
    </nav>

    <main class="main-content">
        <header class="top-bar">
            <h1>My Live Streams</h1>
            <div class="status-badge live">Encryption: AES-256 Enabled</div>
        </header>

        <?php if(isset($error)): ?>
            <div class="error-banner"><?= $error ?></div>
        <?php endif; ?>

        <div class="video-grid">
            <?php if (!empty($nodes)): ?>
                <?php foreach ($nodes as $node): ?>
                    <div class="video-card">
                        <div class="video-header">
                            <span class="node-name"><?= htmlspecialchars($node['node_name']) ?></span>
                            <span class="node-owner badge badge-action">Secure Link</span>
                        </div>
                       <div style="position: relative; width: 100%; background: #000; overflow: hidden; border-radius: 4px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                            
                            <div class="live-indicator" style="position: absolute; top: 10px; left: 10px; z-index: 10; background: rgba(220, 38, 38, 0.9); padding: 4px 8px; border-radius: 4px; color: white; font-size: 0.75rem; font-weight: bold;">● LIVE</div>
                            
                            <img id="cam_<?= $node['id'] ?>" 
                                 src="http://<?= htmlspecialchars($node['ip_address']) ?>:8080/video" 
                                 crossorigin="anonymous"
                                 alt="Live Feed" 
                                 style="width: 100%; height: auto; aspect-ratio: 16/9; display: block; object-fit: cover;"
                                 onerror="this.style.display='none'; this.previousElementSibling.style.display='none'; this.nextElementSibling.style.display='flex';">
                            
                            <div style="display: none; width: 100%; aspect-ratio: 16/9; align-items: center; justify-content: center; background: #111827; color: #4b5563; font-family: monospace; font-size: 1.2rem; letter-spacing: 2px; position: relative;">
                                <div style="position: absolute; top: 10px; left: 10px; z-index: 10; background: rgba(107, 114, 128, 0.9); padding: 4px 8px; border-radius: 4px; color: white; font-size: 0.75rem; font-weight: bold;">○ STANDBY</div>
                                NO SIGNAL
                            </div>

                            <div style="position: absolute; bottom: 10px; left: 10px; z-index: 10; background: rgba(0, 0, 0, 0.7); padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; color: white;">
                                <?= htmlspecialchars($node['location']) ?> (Secured Tunnel)
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="data-panel" style="grid-column: 1 / -1;">
                    <p class="text-center" style="color: #94a3b8; padding: 20px;">No active camera devices found assigned to your subscriber profile.</p>
                </div>
            <?php endif; ?>
        </div>
    </main>
</body>
</html>
