<?php
// views/header.php - Global navigation header for Team Mania Pro
require_once __DIR__ . '/../auth.php';

$user = current_user();
$pages_stmt = $pdo->query("SELECT slug, title FROM pages ORDER BY id ASC");
$nav_pages = $pages_stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($club_name ?? 'Team Mania PRO') ?></title>
    <link rel="stylesheet" href="assets/style.css">
    <!-- Quill Rich Text Editor (100% Free & Open Source) -->
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
    <style>
        :root {
            --primary: <?= $primary_color ?>;
            --secondary: <?= $secondary_color ?>;
            --bg-nav: <?= $primary_color ?>;
        }
        <?php
        $uploaded_fonts = json_decode(get_setting('uploaded_fonts', '[]'), true) ?: [];
        foreach ($uploaded_fonts as $fname => $fpath):
            $fext = pathinfo($fpath, PATHINFO_EXTENSION);
            $format = $fext;
            if ($fext === 'ttf') $format = 'truetype';
            elseif ($fext === 'otf') $format = 'opentype';
        ?>
        @font-face {
            font-family: '<?= htmlspecialchars($fname) ?>';
            src: url('<?= htmlspecialchars($fpath) ?>') format('<?= $format ?>');
            font-weight: normal;
            font-style: normal;
        }
        <?php endforeach; ?>
        .btn-primary:hover {
            filter: brightness(90%);
        }
        .btn-secondary:hover {
            filter: brightness(90%);
        }
        /* Notification badge style */
        .badge {
            background-color: var(--danger);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<script>
    (function() {
        const theme = localStorage.getItem('theme') || 'light';
        if (theme === 'dark') {
            document.body.classList.add('dark-theme');
        }
    })();
</script>

<header>
    <div class="nav-container">
        <a href="index.php?view=dashboard" class="branding">
            <?php if (!empty($logo_path) && file_exists(__DIR__ . '/../' . $logo_path)): ?>
                <img src="<?= htmlspecialchars($logo_path) ?>" alt="Vereinslogo">
            <?php endif; ?>
            <span><?= htmlspecialchars($club_name) ?></span>
        </a>

        <nav>
            <ul class="nav-links">
                <li><a href="index.php?view=dashboard" class="<?= $view === 'dashboard' ? 'active' : '' ?>">Dashboard</a></li>

                <?php if (is_menu_visible('chat')): ?>
                    <li>
                        <a href="index.php?view=chat" class="<?= $view === 'chat' ? 'active' : '' ?>">
                            Chat <span id="notification-badge" class="badge" style="display: none;">0</span>
                        </a>
                    </li>
                <?php endif; ?>

                <?php if (is_menu_visible('forum')): ?>
                    <li><a href="index.php?view=forum" class="<?= $view === 'forum' ? 'active' : '' ?>">Forum</a></li>
                <?php endif; ?>

                <?php if (is_menu_visible('trainer')): ?>
                    <li><a href="index.php?view=trainer" class="<?= $view === 'trainer' ? 'active' : '' ?>">Trainer-Zentrale</a></li>
                <?php endif; ?>

                <?php if (is_menu_visible('kassenwart')): ?>
                    <li><a href="index.php?view=kassenwart" class="<?= $view === 'kassenwart' ? 'active' : '' ?>">Kassenwart</a></li>
                <?php endif; ?>

                <?php if (is_menu_visible('vorstand')): ?>
                    <li><a href="index.php?view=vorstand" class="<?= $view === 'vorstand' ? 'active' : '' ?>">Vorstand</a></li>
                <?php endif; ?>

                <?php if (is_menu_visible('inventory')): ?>
                    <li><a href="index.php?view=inventory" class="<?= $view === 'inventory' ? 'active' : '' ?>">Inventar & Kleidung</a></li>
                <?php endif; ?>

                <?php if (has_role('admin')): ?>
                    <li><a href="index.php?view=admin" class="<?= $view === 'admin' ? 'active' : '' ?>">Admin</a></li>
                <?php endif; ?>
                <!-- Mobile Only User Info & Logout -->
                <li class="mobile-only-user" style="display: none; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 15px; margin-top: 10px; flex-direction: column; gap: 10px; align-items: center; width: 100%;">
                    <span style="font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85);">
                        Hallo, <?= htmlspecialchars($user['first_name']) ?>
                    </span>
                    <div style="display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%;">
                        <a href="index.php?view=profile" class="btn btn-secondary btn-sm" style="padding: 6px 12px; font-size: 12px;">Profil bearbeiten</a>
                        <a href="index.php?view=logout" class="btn btn-danger btn-sm" style="padding: 6px 12px; font-size: 12px;">Logout</a>
                    </div>
                </li>
            </ul>
        </nav>

        <!-- Persistent Action Buttons (Theme Toggle & Hamburger Menu Toggle) -->
        <div style="display: flex; align-items: center; gap: 10px;">
            <button id="theme-toggle" class="btn btn-secondary btn-sm" style="padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; cursor: pointer; border-radius: var(--radius);" title="Farbschema wechseln">
                <span id="theme-toggle-icon">☀️</span>
            </button>
            <button class="menu-toggle" id="menu-toggle" aria-label="Menü öffnen">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>

        <!-- Desktop User Menu -->
        <div class="user-menu">
            <span style="font-size: 14px; font-weight: 500; margin-right: 5px; color: rgba(255, 255, 255, 0.85);">
                Hallo, <?= htmlspecialchars($user['first_name']) ?>
            </span>
            <a href="index.php?view=profile" title="Profil bearbeiten">
                <?php if (!empty($user['photo_path']) && file_exists(__DIR__ . '/../' . $user['photo_path'])): ?>
                    <img src="<?= htmlspecialchars($user['photo_path']) ?>" class="user-avatar" alt="Avatar">
                <?php else: ?>
                    <div class="user-avatar" style="background-color: var(--primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px;">
                        <?= strtoupper(substr($user['first_name'], 0, 1) . substr($user['last_name'], 0, 1)) ?>
                    </div>
                <?php endif; ?>
            </a>
            <a href="index.php?view=logout" class="btn btn-secondary btn-sm" style="padding: 6px 10px; margin-left: 10px;">Logout</a>
        </div>
    </div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Theme Switcher Logic
    const toggleBtn = document.getElementById('theme-toggle');
    const toggleIcon = document.getElementById('theme-toggle-icon');
    if (toggleBtn && toggleIcon) {
        if (document.body.classList.contains('dark-theme')) {
            toggleIcon.textContent = '🌙';
        } else {
            toggleIcon.textContent = '☀️';
        }
        toggleBtn.addEventListener('click', function() {
            if (document.body.classList.contains('dark-theme')) {
                document.body.classList.remove('dark-theme');
                localStorage.setItem('theme', 'light');
                toggleIcon.textContent = '☀️';
            } else {
                document.body.classList.add('dark-theme');
                localStorage.setItem('theme', 'dark');
                toggleIcon.textContent = '🌙';
            }
        });
    }

    // Mobile Hamburger Menu Logic
    const menuToggle = document.getElementById('menu-toggle');
    const navLinks = document.querySelector('.nav-links');
    if (menuToggle && navLinks) {
        menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('open');
            menuToggle.classList.toggle('active');
        });
    }
});
</script>
</header>

<main>
<?php if (isset($_GET['error']) && $_GET['error'] === 'access_denied'): ?>
    <div class="alert alert-danger">Zugriff verweigert. Sie besitzen nicht die nötigen Rechte für diese Seite.</div>
<?php endif; ?>
