<?php
session_start();
require_once __DIR__ . '/api_client.php';

function requireAdminLogin(): void {
    if (empty($_SESSION['admin_token'])) {
        header('Location: ../login.php');
        exit;
    }
}

function renderLayout(string $pageTitle, string $activePage, string $content): void {
    $adminName = $_SESSION['admin_name'] ?? 'Admin';
    $nav = [
        ['id' => 'dashboard',  'label' => 'Dashboard',        'icon' => '📊', 'href' => 'index.php'],
        ['id' => 'movies',     'label' => 'Movies',           'icon' => '🎬', 'href' => 'movies.php'],
        ['id' => 'upload',     'label' => 'Upload Movie',     'icon' => '⬆️', 'href' => 'upload.php'],
        ['id' => 'users',      'label' => 'Users',            'icon' => '👥', 'href' => 'users.php'],
        ['id' => 'payments',   'label' => 'Payments',         'icon' => '💳', 'href' => 'payments.php'],
        ['id' => 'categories', 'label' => 'Categories',       'icon' => '📁', 'href' => 'categories.php'],
    ];
    ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($pageTitle) ?> — Mastreams Admin</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg: #0f0f0f; --surface: #1a1a1a; --card: #222222; --border: #2a2a2a;
    --orange: #e87722; --green: #22a861; --red: #e74c3c;
    --text: #ffffff; --text-sec: #aaaaaa; --text-muted: #666666;
    --sidebar-width: 220px;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-width); background: var(--surface); border-right: 1px solid var(--border); position: fixed; top: 0; left: 0; height: 100vh; display: flex; flex-direction: column; z-index: 100; }
.sidebar-logo { padding: 20px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.logo-m { background: var(--orange); color: #fff; font-weight: 900; font-size: 16px; width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.logo-text { font-size: 15px; font-weight: 800; letter-spacing: 0.5px; }
.logo-text span { color: var(--orange); }
.sidebar-nav { flex: 1; padding: 14px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: var(--text-sec); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: all 0.15s; border-left: 3px solid transparent; }
.nav-item:hover { background: var(--card); color: var(--text); }
.nav-item.active { background: rgba(232,119,34,0.12); color: var(--orange); border-left-color: var(--orange); font-weight: 700; }
.nav-icon { font-size: 15px; width: 20px; text-align: center; }
.sidebar-footer { padding: 16px 18px; border-top: 1px solid var(--border); }
.admin-info { display: flex; align-items: center; gap: 10px; }
.admin-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.page-title { font-size: 18px; font-weight: 700; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: opacity 0.15s; }
.btn:hover { opacity: 0.85; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-surface { background: var(--card); color: var(--text); }
.btn-green { background: var(--green); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.content { padding: 24px; flex: 1; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 15px; font-weight: 700; }
.card-body { padding: 20px; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stat-value { font-size: 26px; font-weight: 800; line-height: 1; }
.stat-sub { font-size: 12px; color: var(--text-sec); margin-top: 6px; }
.stat-up { color: var(--green); } .stat-down { color: var(--red); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }
.badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.badge-orange { background: rgba(232,119,34,0.15); color: var(--orange); }
.badge-green { background: rgba(34,168,97,0.15); color: var(--green); }
.badge-red { background: rgba(231,76,60,0.15); color: var(--red); }
.badge-gray { background: var(--surface); color: var(--text-sec); }
.form-group { margin-bottom: 18px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sec); margin-bottom: 6px; }
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); font-size: 14px; outline: none; transition: border-color 0.15s; }
input:focus,select:focus,textarea:focus { border-color: var(--orange); }
textarea { resize: vertical; min-height: 90px; }
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.upload-area { border: 2px dashed var(--border); border-radius: 10px; padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color 0.15s; }
.upload-area:hover { border-color: var(--orange); }
.progress { background: var(--border); border-radius: 4px; height: 6px; }
.progress-bar { background: var(--orange); border-radius: 4px; height: 6px; transition: width 0.3s; }
.api-tag { font-size: 10px; background: rgba(232,119,34,0.1); color: var(--orange); border: 1px solid rgba(232,119,34,0.2); border-radius: 4px; padding: 1px 6px; font-family: monospace; margin-left: 6px; }
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}
</style>
</head>
<body>
<aside class="sidebar">
    <div class="sidebar-logo">
        <span class="logo-m">M</span>
        <span class="logo-text">MAS<span>TREAMS</span></span>
    </div>
    <nav class="sidebar-nav">
        <?php foreach ($nav as $item): ?>
        <a href="<?= $item['href'] ?>" class="nav-item <?= $activePage === $item['id'] ? 'active' : '' ?>">
            <span class="nav-icon"><?= $item['icon'] ?></span>
            <?= $item['label'] ?>
        </a>
        <?php endforeach; ?>
    </nav>
    <div class="sidebar-footer">
        <div class="admin-info">
            <div class="admin-avatar"><?= strtoupper(substr($adminName, 0, 2)) ?></div>
            <div>
                <div style="font-size:13px;font-weight:600;"><?= htmlspecialchars($adminName) ?></div>
                <div style="font-size:11px;color:var(--text-muted);">Administrator</div>
            </div>
        </div>
    </div>
</aside>
<div class="main">
    <header class="topbar">
        <span class="page-title">
            <?= htmlspecialchars($pageTitle) ?>
            <span class="api-tag">Node.js API</span>
        </span>
        <div style="display:flex;align-items:center;gap:14px;">
            <span style="color:var(--text-muted);font-size:12px;"><?= date('D, d M Y') ?></span>
            <a href="../login.php?logout=1" class="btn btn-surface" onclick="<?php
                // Inline logout: destroy session on click
            ?>">Sign Out</a>
        </div>
    </header>
    <main class="content"><?= $content ?></main>
</div>
</body>
</html>
<?php
}

// Handle logout
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: ../login.php');
    exit;
}
