<?php
// includes/header.php - painel TV Express profissional, roxo, responsivo
require_once __DIR__ . '/../auth.php';
require_login();

$user = current_user();
$username = $user['username'] ?? 'Usuário';
$user_id = $user['id'] ?? 0;

$branding = get_branding();
$logoUrl  = trim((string)($branding['logo_url'] ?? ''));
$bgUrl    = trim((string)($branding['background_url'] ?? ''));

$panelLogo = 'uploads/panel_tvexpress_logo.png';
$panelBackground = 'uploads/panel_tvexpress_bg.jpg';

$theme_config = get_user_theme($user_id);
$theme_mode = $theme_config['mode'] ?? 'purple';
$custom_css = $theme_config['custom_css'] ?? '';
$theme_css = get_theme_css($theme_mode, $custom_css);

$currentPage = basename($_SERVER['PHP_SELF'] ?? 'dashboard.php');
$pageNames = [
    'dashboard.php' => 'Dashboard',
    'theme.php' => 'Tema do painel',
    'devices.php' => 'Dispositivos',
    'background.php' => 'Background do app',
    'logo.php' => 'Logo do app',
    'note.php' => 'Avisos do app',
    'support.php' => 'QR Suporte',
    'dns.php' => 'Ativar Cliente',
    'list_dns.php' => 'Lista de Clientes',
    'user_create.php' => 'Usuários',
    'perfil.php' => 'Meu perfil',
];
$pageTitle = $pageNames[$currentPage] ?? 'Painel Administrativo';
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="theme-color" content="#2c075f">
    <title><?php echo htmlspecialchars($pageTitle); ?> - TV Express</title>
    <style>
        <?php echo $theme_css; ?>
        :root {
            --primary-bg: linear-gradient(135deg, #b85cff 0%, #8d2cff 48%, #5414bc 100%) !important;
            --primary-solid: #8d2cff;
            --primary-soft: rgba(160, 82, 255, .20);
            --green: #7CFF6B;
            --panel-bg: #140026;
            --panel-bg-2: #27004b;
            --card-bg: rgba(31, 8, 67, .78);
            --card-bg-strong: rgba(25, 5, 54, .92);
            --sidebar-bg: linear-gradient(180deg, rgba(32, 4, 70, .96) 0%, rgba(17, 0, 34, .98) 100%);
            --link-bg: rgba(255, 255, 255, .055);
            --link-hover: rgba(184, 92, 255, .22);
            --logout-bg: rgba(255, 77, 109, .18);
            --logout-hover: rgba(255, 77, 109, .30);
            --border-color: rgba(223, 205, 255, .16);
            --border-strong: rgba(223, 205, 255, .32);
            --text-primary: #ffffff;
            --text-secondary: #d7c7f6;
            --text-muted: #aa94d5;
            --shadow: 0 22px 65px rgba(0, 0, 0, .38);
            --radius-xl: 24px;
            --radius-lg: 18px;
            --radius-md: 14px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { min-height: 100%; scroll-behavior: smooth; }
        body {
            min-height: 100vh;
            background:
                radial-gradient(circle at 30% 18%, rgba(145, 64, 255, .45), transparent 35%),
                linear-gradient(135deg, rgba(16, 0, 33, .86), rgba(45, 0, 90, .68)),
                url('<?php echo htmlspecialchars($panelBackground, ENT_QUOTES, 'UTF-8'); ?>') center center / cover fixed no-repeat,
                #140026;
            color: var(--text-primary);
            font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            overflow-x: hidden;
        }
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(0,0,0,.38), transparent 38%, rgba(0,0,0,.22)),
                radial-gradient(circle at 92% 84%, rgba(124,255,107,.09), transparent 22%);
            z-index: -1;
        }
        a { color: inherit; }

        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(5, 0, 15, .72);
            backdrop-filter: blur(8px);
            z-index: 998;
            opacity: 0;
            transition: opacity .25s ease;
        }
        .sidebar-overlay.active { display: block; opacity: 1; }

        .sidebar-painel {
            position: fixed;
            top: 0;
            left: 0;
            width: 286px;
            height: 100vh;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border-color);
            box-shadow: 18px 0 60px rgba(0,0,0,.35);
            color: #fff;
            display: flex;
            flex-direction: column;
            padding: 18px 14px;
            z-index: 999;
            transition: transform .28s ease;
            overflow-y: auto;
        }
        .sidebar-painel::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 40% 0%, rgba(184, 92, 255, .30), transparent 34%);
            pointer-events: none;
        }
        .sidebar-logo, .sidebar-menu, .sidebar-user { position: relative; z-index: 1; }
        .sidebar-logo {
            min-height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 18px;
            padding: 18px 12px;
            border: 1px solid var(--border-color);
            border-radius: 22px;
            background: rgba(255,255,255,.055);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        }
        .sidebar-logo img {
            max-height: 86px;
            max-width: 190px;
            object-fit: contain;
            background: transparent;
            border-radius: 16px;
            padding: 0;
            filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
        }
        .sidebar-logo strong {
            font-size: 18px;
            color: #fff !important;
            letter-spacing: .02em;
        }
        .brand-subtitle {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--text-secondary);
            font-size: 12px;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .brand-subtitle::before { content: ""; width: 7px; height: 7px; background: var(--green); border-radius: 99px; box-shadow: 0 0 16px var(--green); }

        .sidebar-menu { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; flex: 1; }
        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 46px;
            padding: 12px 14px;
            border-radius: 15px;
            text-decoration: none;
            color: rgba(255,255,255,.92);
            background: var(--link-bg);
            border: 1px solid transparent;
            font-size: 14px;
            font-weight: 700;
            transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        .sidebar-menu a:hover {
            background: var(--link-hover);
            border-color: rgba(223,205,255,.20);
            transform: translateX(5px);
            box-shadow: 0 12px 28px rgba(0,0,0,.18);
        }
        .sidebar-menu a.active {
            background: var(--primary-bg);
            border-color: rgba(255,255,255,.32);
            box-shadow: 0 12px 30px rgba(141,44,255,.30);
            color: #fff;
        }
        .sidebar-user {
            padding: 16px;
            border: 1px solid var(--border-color);
            border-radius: 18px;
            background: rgba(0,0,0,.20);
            font-size: 13px;
        }
        .sidebar-user span { color: var(--text-muted); }
        .sidebar-user strong { display: block; margin: 5px 0 12px; color: #fff !important; font-size: 15px; }
        .sidebar-user a {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            width: 100%;
            text-align: center;
            padding: 11px 14px;
            border-radius: 14px;
            text-decoration: none;
            color: #fff;
            background: var(--logout-bg);
            border: 1px solid rgba(255, 77, 109, .22);
            font-weight: 800;
            transition: .18s ease;
        }
        .sidebar-user a:hover { background: var(--logout-hover); transform: translateY(-2px); }

        .hamburger-btn {
            display: none;
            position: fixed;
            top: 16px;
            left: 16px;
            z-index: 1000;
            background: var(--primary-bg);
            border: 1px solid rgba(255,255,255,.20);
            width: 48px;
            height: 48px;
            border-radius: 16px;
            cursor: pointer;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            box-shadow: 0 16px 35px rgba(0,0,0,.32);
        }
        .hamburger-btn span { display: block; width: 23px; height: 3px; background: #fff; border-radius: 8px; transition: .25s ease; }
        .hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
        .hamburger-btn.active span:nth-child(2) { opacity: 0; }
        .hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

        .main-content {
            margin-left: 286px;
            min-height: 100vh;
            padding: 24px 26px 34px;
            transition: margin-left .28s ease;
        }
        .topbar-panel {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 24px;
            padding: 16px 18px;
            border: 1px solid var(--border-color);
            border-radius: 22px;
            background: rgba(20, 0, 38, .62);
            box-shadow: var(--shadow);
            backdrop-filter: blur(16px);
        }
        .topbar-title h1 {
            font-size: 22px;
            color: #fff;
            line-height: 1.15;
            margin: 0;
        }
        .topbar-title p { color: var(--text-secondary); font-size: 13px; margin-top: 3px; }
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 13px;
            border-radius: 999px;
            background: rgba(124,255,107,.12);
            color: #d8ffd2;
            border: 1px solid rgba(124,255,107,.22);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }
        .status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--green); box-shadow: 0 0 14px var(--green); }

        .page-header, .dashboard-header {
            margin-bottom: 22px !important;
            padding: 22px 24px !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-xl) !important;
            background: rgba(20, 0, 38, .58) !important;
            box-shadow: var(--shadow) !important;
            backdrop-filter: blur(16px) !important;
        }
        .page-header h1, .dashboard-header h1,
        .info-section h2, .card h2, .support-card h2,
        h1, h2, h3, h4, h5, h6 {
            color: #fff !important;
            -webkit-text-fill-color: initial !important;
            background: none !important;
        }
        .page-header h1, .dashboard-header h1 { font-size: clamp(24px, 3vw, 34px) !important; margin-bottom: 7px !important; }
        .page-header p, .dashboard-header p, p, .muted, .text-muted { color: var(--text-secondary) !important; }

        .card, .form-container, .table-container, .info-section, .stat-card,
        .css-editor-container, .theme-card, .support-card, .table-card,
        .preview-section, .upload-section, .info-box {
            background: var(--card-bg) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-xl) !important;
            box-shadow: var(--shadow) !important;
            backdrop-filter: blur(16px) !important;
        }
        .stat-card, .card, .form-container, .table-container, .info-section, .support-card, .table-card {
            padding: 22px !important;
        }
        .stat-card:hover, .theme-card:hover, .action-btn:hover {
            transform: translateY(-4px) !important;
            border-color: rgba(184,92,255,.42) !important;
            box-shadow: 0 26px 70px rgba(0,0,0,.40) !important;
        }
        .stat-card .value, .value {
            background: linear-gradient(135deg, #ffffff 0%, #d7b8ff 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        label, strong, th { color: #fff !important; }
        span, div, td, li { border-color: rgba(255,255,255,.08); }
        .info-row, .form-group { border-color: rgba(255,255,255,.08) !important; }
        .info-row label { color: var(--text-muted) !important; }
        .info-row value, value { color: #fff !important; }

        input, select, textarea {
            width: 100%;
            background: rgba(0,0,0,.28) !important;
            border: 1px solid rgba(223,205,255,.22) !important;
            border-radius: 15px !important;
            color: #fff !important;
            outline: none !important;
            min-height: 46px;
            padding: 12px 14px !important;
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }
        input::placeholder, textarea::placeholder { color: rgba(215,199,246,.55) !important; }
        input:focus, select:focus, textarea:focus {
            border-color: rgba(184,92,255,.80) !important;
            box-shadow: 0 0 0 4px rgba(184,92,255,.16) !important;
            background: rgba(255,255,255,.055) !important;
        }
        textarea { min-height: 120px; }

        button, .submit-btn, .btn-save, .select-btn, .action-btn, .btn {
            border-radius: 15px !important;
            border: 1px solid rgba(255,255,255,.16) !important;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .submit-btn, .btn-save, button[type="submit"], .select-btn.active-btn {
            background: var(--primary-bg) !important;
            color: #fff !important;
            font-weight: 900 !important;
            box-shadow: 0 14px 35px rgba(141,44,255,.28) !important;
        }
        .submit-btn:hover, .btn-save:hover, button[type="submit"]:hover, .btn:hover { transform: translateY(-2px); }
        .action-btn {
            background: rgba(255,255,255,.07) !important;
            border: 1px solid rgba(255,255,255,.12) !important;
            color: #fff !important;
            text-decoration: none !important;
            font-weight: 800;
        }
        .action-btn:hover { background: var(--primary-bg) !important; }

        .alert, .error-message {
            border-radius: 16px !important;
            border: 1px solid rgba(255,255,255,.16) !important;
            background: rgba(255,255,255,.08) !important;
            color: #fff !important;
            backdrop-filter: blur(12px);
        }
        .alert-success, .alert.ok { background: rgba(46,204,113,.16) !important; border-color: rgba(46,204,113,.32) !important; color: #d8ffd2 !important; }
        .alert-danger, .alert.err { background: rgba(255,75,110,.16) !important; border-color: rgba(255,75,110,.32) !important; color: #ffd5de !important; }
        .alert-info { background: rgba(95,174,255,.14) !important; border-color: rgba(95,174,255,.28) !important; color: #d8ecff !important; }

        .table-responsive, .table-container { width: 100%; overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; color: #fff; min-width: 650px; }
        th, td { padding: 14px 13px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; color: #f7f2ff !important; }
        thead, .table-dark { background: rgba(141,44,255,.24) !important; }
        tr:hover { background: rgba(255,255,255,.045) !important; }
        .key-box { background: rgba(0,0,0,.28) !important; border-color: rgba(223,205,255,.18) !important; color: #e8dcff !important; }
        .badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: #fff !important; }
        .text-primary { color: #b982ff !important; }


        .container-fluid { width: 100%; }
        .row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
        .row > * { padding-left: 8px; padding-right: 8px; width: 100%; }
        .col-md-12 { flex: 0 0 100%; max-width: 100%; }
        .d-flex { display: flex !important; }
        .flex-column { flex-direction: column !important; }
        .align-middle { vertical-align: middle !important; }
        .text-end { text-align: right !important; }
        .text-center { text-align: center !important; }
        .fw-bold { font-weight: 800 !important; }
        .small { font-size: 12px !important; }
        .mt-3 { margin-top: 1rem !important; }
        .mt-4 { margin-top: 1.25rem !important; }
        .mb-1 { margin-bottom: .25rem !important; }
        .mb-3 { margin-bottom: 1rem !important; }
        .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
        .btn-danger { background: linear-gradient(135deg, #ff4d6d, #b5174b) !important; color: #fff !important; }
        .btn-sm { padding: 8px 11px !important; min-height: auto !important; font-size: 12px !important; }
        .btn-close { float: right; width: 20px; height: 20px; opacity: .8; border: 0 !important; background: transparent !important; color: #fff !important; box-shadow: none !important; }

        .qr-box { border-radius: 24px !important; padding: 16px !important; background: #fff !important; box-shadow: 0 20px 50px rgba(0,0,0,.30) !important; }
        .url-box { color: var(--text-secondary) !important; }

        .sidebar-painel::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .table-container::-webkit-scrollbar { width: 7px; height: 7px; }
        .sidebar-painel::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track, .table-container::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
        .sidebar-painel::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .table-container::-webkit-scrollbar-thumb { background: rgba(184,92,255,.45); border-radius: 99px; }

        @media (max-width: 920px) {
            .hamburger-btn { display: flex; }
            .sidebar-painel { transform: translateX(-105%); width: min(306px, 86vw); }
            .sidebar-painel.active { transform: translateX(0); }
            .main-content { margin-left: 0; padding: 78px 14px 28px; }
            .topbar-panel { padding: 14px; border-radius: 18px; align-items: flex-start; flex-direction: column; }
            .status-pill { width: 100%; justify-content: center; }
            .page-header, .dashboard-header, .stat-card, .card, .form-container, .table-container, .info-section, .support-card, .table-card { padding: 18px !important; border-radius: 18px !important; }
            table { min-width: 700px; }
        }
        @media (max-width: 520px) {
            .main-content { padding-left: 10px; padding-right: 10px; }
            .topbar-title h1 { font-size: 19px; }
            .sidebar-logo { min-height: 128px; }
            .sidebar-logo img { max-height: 72px; }
        }
    </style>
</head>
<body>
    <button class="hamburger-btn" id="hamburgerBtn" aria-label="Abrir menu" type="button">
        <span></span><span></span><span></span>
    </button>

    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <aside class="sidebar-painel" id="sidebar">
        <div class="sidebar-logo">
            <img src="<?php echo htmlspecialchars($panelLogo); ?>" alt="TV Express">
            <span class="brand-subtitle">Painel Premium</span>
        </div>

        <nav class="sidebar-menu">
            <a href="dashboard.php">📊 Dashboard</a>
            <a href="devices.php">📱 Conectados</a>
            <a href="dns.php">✅ Ativar Cliente</a>
            <a href="list_dns.php">📋 Lista de Clientes</a>
            <a href="logo.php">🏷️ LogoTipo</a>
            <a href="background.php">🖼️ Background</a>
            <a href="support.php">📲 QR Suporte</a>
            <a href="perfil.php">⚙️ Perfil</a>
        </nav>

        <div class="sidebar-user">
            <span>Logado como</span>
            <strong><?php echo htmlspecialchars($username); ?></strong>
            <a href="logout.php">🚪 Sair do painel</a>
        </div>
    </aside>

    <main class="main-content">
        <section class="topbar-panel">
            <div class="topbar-title">
                <h1>🚀 <?php echo htmlspecialchars($pageTitle); ?></h1>
                <p>Gerencie seu aplicativo com visual TV Express, rápido e responsivo.</p>
            </div>
            <div class="status-pill">Online e protegido</div>
        </section>

    <script>
        (function(){
            const hamburgerBtn = document.getElementById('hamburgerBtn');
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebarOverlay');
            function toggleMenu(forceClose) {
                const shouldClose = forceClose === true;
                hamburgerBtn.classList.toggle('active', shouldClose ? false : !hamburgerBtn.classList.contains('active'));
                sidebar.classList.toggle('active', shouldClose ? false : !sidebar.classList.contains('active'));
                overlay.classList.toggle('active', shouldClose ? false : !overlay.classList.contains('active'));
            }
            hamburgerBtn.addEventListener('click', function(){ toggleMenu(false); });
            overlay.addEventListener('click', function(){ toggleMenu(true); });
            document.addEventListener('keydown', function(e){ if (e.key === 'Escape') toggleMenu(true); });
            const currentPage = window.location.pathname.split('/').pop() || 'dashboard.php';
            document.querySelectorAll('.sidebar-menu a').forEach(function(link){
                if (link.getAttribute('href') === currentPage) link.classList.add('active');
                link.addEventListener('click', function(){ if (window.innerWidth <= 920) toggleMenu(true); });
            });
        })();
    </script>
