<?php
/**
 * lib/header.php — Common panel header (NXS Panel).
 *
 * Included by admin pages after require_login().
 * Optional variable $pageTitle for <title> and header text.
 */

declare(strict_types=1);

require_once __DIR__ . '/helpers.php';
require_once __DIR__ . '/auth.php';
require_once __DIR__ . '/i18n.php';

$pageTitle = $pageTitle ?? 'Panel';
// Name of current script to highlight active menu item.
$current = basename($_SERVER['SCRIPT_NAME'] ?? '');

/**
 * Returns ' active' if the given page is currently active.
 */
function nav_active(string $page): string
{
    global $current;
    return $current === $page ? ' active' : '';
}

/**
 * Side menu items: [file, label, line-awesome icon].
 *
 * @return array<int,array{0:string,1:string,2:string}>
 */
function panel_nav_items(): array
{
    $items = [
        ['dashboard.php',    __('Dashboard', 'Gösterge Tablosu'),  'la-tachometer-alt'],
        ['devices.php',      __('Devices', 'Cihazlar'),          'la-tv'],
        ['activate.php',     __('Activate MAC', 'MAC Etkinleştir'),   'la-bolt'],
        ['dns.php',          __('DNS', 'DNS'),                   'la-server'],
        ['vpn.php',          __('VPN', 'VPN'),                   'la-shield-alt'],
        ['sports.php',       __('Sports', 'Spor'),               'la-trophy'],
        ['settings.php',     __('Settings', 'Ayarlar'),          'la-cog'],
    ];
    // Include optional pages only if they exist on disk.
    $optional = [
        ['tmdb.php',     'TMDB',       'la-film'],
        ['menu_ads.php', __('Ads', 'Reklamlar'), 'la-bullhorn'],
    ];
    foreach ($optional as $opt) {
        if (is_file(__DIR__ . '/../' . $opt[0])) {
            $items[] = $opt;
        }
    }
    return $items;
}

// Open translation buffer (closed, translated and emitted by footer.php).
if (function_exists('i18n_begin')) {
    i18n_begin();
}
?>
<!doctype html>
<html lang="<?= function_exists('e') && function_exists('panel_lang') ? e(panel_lang()) : 'en' ?>" data-bs-theme="light">
<head>
    <script>
        // Sayfa yüklenmeden HEMEN ÖNCE kayıtlı temayı uygula (Beyaz flaşmayı/açıktan başlamayı önler)
        (function() {
            const saved = localStorage.getItem('nxs_theme');
            if (saved) {
                document.documentElement.setAttribute('data-bs-theme', saved);
            }
        })();
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= function_exists('e') ? e($pageTitle) : $pageTitle ?> · <?= defined('PANEL_NAME') ? PANEL_NAME : 'LEGENDS PANEL' ?></title>
    <link rel="icon" href="assets/vvveb/img/favicon.ico">
    
    <!-- LineAwesome & Google Font -->
    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/vvveb/css/admin.css">
    <link rel="stylesheet" href="assets/vvveb/custom.css?v=<?= @filemtime(__DIR__ . '/../assets/vvveb/custom.css') ?>">

    <!-- NXS Panel Dynamic Theme Styles (Light & Dark) -->
    <style>
        :root {
            --bs-body-bg: #f4f6f9;
            --bs-body-color: #333333;
            --sidebar-bg: #ffffff;
            --border-glass: #dee2e6;
            --card-bg: #ffffff;
            --header-bg: #ffffff;
            --text-main: #212529;
            --text-muted: #6c757d;
        }

        [data-bs-theme="dark"] {
            --bs-body-bg: #090714 !important;
            --bs-body-color: #f3f4f6 !important;
            --sidebar-bg: #141122 !important;
            --border-glass: rgba(255, 255, 255, 0.08) !important;
            --card-bg: #171426 !important;
            --header-bg: #141122 !important;
            --text-main: #f3f4f6 !important;
            --text-muted: #9ca3af !important;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            background-color: var(--bs-body-bg) !important;
            color: var(--bs-body-color) !important;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        #container {
            display: flex;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* Sidebar Styling & Toggle Animation */
        aside.sidebar {
            width: 260px;
            min-width: 260px;
            background: var(--sidebar-bg) !important;
            border-right: 1px solid var(--border-glass) !important;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.02);
            transition: transform 0.3s ease, margin-left 0.3s ease, background 0.3s ease;
            z-index: 1050;
        }

        /* Masaüstünde daraltma */
        @media (min-width: 992px) {
            #container.sidebar-collapsed aside.sidebar {
                margin-left: -260px;
            }
        }

        /* Mobilde akıllı off-canvas menü yapısı */
        @media (max-width: 991.98px) {
            aside.sidebar {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                transform: translateX(-100%);
            }
            #container.mobile-sidebar-open aside.sidebar {
                transform: translateX(0);
            }
            /* Mobil Arka Plan Karartması (Backdrop) */
            .sidebar-backdrop {
                display: none;
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(0,0,0,0.5);
                z-index: 1040;
                backdrop-filter: blur(2px);
            }
            #container.mobile-sidebar-open .sidebar-backdrop {
                display: block;
            }
        }

        .brand {
            padding: 20px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .brand-mark {
            background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
            color: #fff !important;
            font-weight: 700;
            padding: 8px 14px;
            border-radius: 8px !important;
            box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .brand-name strong {
            color: var(--text-main);
            font-size: 15px;
            display: block;
        }

        .brand-name small {
            color: var(--text-muted);
            display: block;
            font-size: 11px;
        }

        /* Navigation Links */
        .sidebar .navbar-nav {
            padding: 0 12px;
        }

        .sidebar .nav-link {
            color: var(--text-muted) !important;
            border-radius: 8px;
            margin: 4px 0;
            padding: 10px 14px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .sidebar .nav-link i {
            font-size: 20px;
            color: var(--text-muted);
            transition: color 0.2s;
        }

        .sidebar .nav-link:hover {
            color: #7c3aed !important;
            background: rgba(124, 58, 237, 0.08) !important;
        }

        .sidebar .nav-link.active {
            background: rgba(124, 58, 237, 0.15) !important;
            color: #7c3aed !important;
            font-weight: 600;
        }

        .sidebar .nav-link.active i {
            color: #7c3aed !important;
        }

        /* Main Content Area */
        .main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            background-color: var(--bs-body-bg) !important;
            min-width: 0;
        }

        /* Top Header */
        .top-header {
            background: var(--header-bg) !important;
            border-bottom: 1px solid var(--border-glass) !important;
            padding: 12px 24px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            transition: background 0.3s ease;
        }

        .top-header h1, .top-header .text-dark {
            color: var(--text-main) !important;
        }

        /* Sidebar Footer */
        .sidebar-foot {
            padding: 15px;
            border-top: 1px solid var(--border-glass);
            margin-top: auto;
        }
        
        .sidebar-foot .who {
            color: var(--text-muted);
            font-weight: 500;
            font-size: 13px;
        }
    </style>
</head>
<body class="home">
    <div id="container">
        <div class="sidebar-backdrop"></div>

        <aside class="sidebar" aria-label="Main Navigation">
            <a class="brand" href="dashboard.php">
                <span class="brand-mark">L</span>
                <span class="brand-name">
                    <strong><?= defined('PANEL_NAME') ? PANEL_NAME : 'LEGENDS PANEL' ?></strong>
                    <small>ULTIMATE Admin</small>
                </span>
            </a>

            <nav class="navbar navbar-expand-md p-0">
                <div class="navbar-collapse w-100">
                    <ul class="nav navbar-nav flex-column w-100">
                        <?php foreach (panel_nav_items() as [$file, $label, $icon]): ?>
                            <li class="nav-item">
                                <a class="nav-link<?= nav_active($file) ?>" href="<?= function_exists('e') ? e($file) : $file ?>">
                                    <i class="la e-icon <?= function_exists('e') ? e($icon) : $icon ?>"></i>
                                    <span class="title"><?= function_exists('e') ? e($label) : $label ?></span>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </nav>

            <div class="sidebar-foot">
                <span class="who d-block mb-2"><i class="la la-user-circle"></i> <?= function_exists('e') && function_exists('current_admin') ? e(current_admin()) : '' ?></span>
                <a class="btn btn-sm btn-outline-danger w-100" href="logout.php">
                    <i class="la la-sign-out-alt"></i> <?= __('Sign out', 'Çıkış Yap') ?>
                </a>
            </div>
        </aside>

        <main class="main">
            <div class="top-header d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    <button class="btn px-2 sidebar-toggle" type="button" title="Menu" aria-label="Menu">
                        <i class="la la-bars fs-4"></i>
                    </button>
                    <h1 class="h5 mb-0 ms-2 fw-bold text-dark"><?= function_exists('e') ? e($pageTitle) : $pageTitle ?></h1>
                </div>
                <div class="d-flex align-items-center">
                    <?= function_exists('lang_switcher_html') ? lang_switcher_html() : '' ?>
                    <button id="color-theme-switch" class="btn px-2 text-secondary" type="button" title="Tema Değiştir">
                        <i class="la la-moon fs-5"></i>
                    </button>
                    <a class="btn btn-sm btn-outline-secondary ms-2" href="logout.php">
                        <i class="la la-sign-out-alt"></i> <span class="d-none d-sm-inline"><?= __('Sign out', 'Çıkış') ?></span>
                    </a>
                </div>
            </div>

            <div class="container-fluid py-3 page">

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sidebar Toggle (Masaüstü ve Mobil Uyumu)
    const toggleBtn = document.querySelector('.sidebar-toggle');
    const container = document.getElementById('container');
    const backdrop = document.querySelector('.sidebar-backdrop');
    
    if (toggleBtn && container) {
        toggleBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (window.innerWidth < 992) {
                container.classList.toggle('mobile-sidebar-open');
            } else {
                container.classList.toggle('sidebar-collapsed');
            }
        });
    }

    if (backdrop && container) {
        backdrop.addEventListener('click', function() {
            container.classList.remove('mobile-sidebar-open');
        });
    }

    // Theme Switcher (Light / Dark)
    const themeSwitch = document.getElementById('color-theme-switch');
    const html = document.documentElement;

    // Load saved theme preference
    const savedTheme = localStorage.getItem('nxs_theme');
    if (savedTheme) {
        html.setAttribute('data-bs-theme', savedTheme);
        updateThemeIcon(savedTheme);
    }

    if (themeSwitch) {
        themeSwitch.addEventListener('click', function() {
            html.style.setProperty('transition', 'none', 'important');

            const currentTheme = html.getAttribute('data-bs-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-bs-theme', newTheme);
            localStorage.setItem('nxs_theme', newTheme);
            updateThemeIcon(newTheme);

            setTimeout(function() {
                html.style.removeProperty('transition');
            }, 50);
        });
    }

    function updateThemeIcon(theme) {
        if (!themeSwitch) return;
        const icon = themeSwitch.querySelector('i');
        if (icon) {
            if (theme === 'dark') {
                icon.className = 'la la-sun fs-5';
            } else {
                icon.className = 'la la-moon fs-5';
            }
        }
    }
});
</script>