<?php

declare(strict_types=1);

require_once __DIR__ . '/library.php';

function library_active_nav(string $current, string $expected): string
{
    return $current === $expected ? 'active' : '';
}

function library_render_header(string $pageTitle, string $pageDescription, string $activeNav = 'catalog'): void
{
    $project = library_project_meta();
    $metaDescription = $pageDescription !== '' ? $pageDescription : $project['description'];
    $projectImageUrl = $project['image'];
    $fullTitle = $pageTitle . ' · ' . $project['name'];
    $flashes = library_get_flashes();
    
    // Language Logic
    $lang = library_get_language();
    $isRtl = $lang === 'ar';
    $targetLang = $isRtl ? 'en' : 'ar';
    $switchLabel = library_trans('switch_lang', $lang);
    
    // Build Switch URL
    $params = $_GET;
    $params['lang'] = $targetLang;
    $switchUrl = '?' . http_build_query($params);

    ?>
<!doctype html>
<html lang="<?= h($lang) ?>" dir="<?= $isRtl ? 'rtl' : 'ltr' ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= h($fullTitle) ?></title>
    <meta name="description" content="<?= h($metaDescription) ?>">
    <meta property="og:title" content="<?= h($fullTitle) ?>">
    <meta property="og:description" content="<?= h($metaDescription) ?>">
    <meta property="twitter:title" content="<?= h($fullTitle) ?>">
    <meta property="twitter:description" content="<?= h($metaDescription) ?>">
<?php if ($projectImageUrl): ?>
    <meta property="og:image" content="<?= h($projectImageUrl) ?>">
    <meta property="twitter:image" content="<?= h($projectImageUrl) ?>">
<?php endif; ?>
    
    <?php if ($isRtl): ?>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">
    <?php else: ?>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <?php endif; ?>

    <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=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/custom.css?v=<?= time() ?>">
</head>
<body>
<div class="app-shell">
    <nav class="navbar navbar-expand-lg border-bottom border-subtle bg-white sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="/index.php">
                <span class="brand-mark">NL</span>
                <span>
                    <span class="d-block brand-title"><?= library_trans('nabd_library') ?></span>
                    <small class="text-secondary"><?= library_trans('tagline') ?></small>
                </span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#libraryNav" aria-controls="libraryNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="libraryNav">
                <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
                    <li class="nav-item"><a class="nav-link <?= library_active_nav($activeNav, 'catalog') ?>" href="/index.php"><?= library_trans('catalog') ?></a></li>
                    <li class="nav-item"><a class="nav-link <?= library_active_nav($activeNav, 'admin') ?>" href="/admin.php"><?= library_trans('admin_studio') ?></a></li>
                    
                    <li class="nav-item border-start border-secondary mx-2 d-none d-lg-block" style="opacity: 0.3; height: 24px;"></li>
                    
                    <li class="nav-item">
                        <a class="btn btn-sm btn-outline-dark topbar-lang-switch" href="<?= h($switchUrl) ?>" lang="<?= h($targetLang) ?>" dir="<?= $targetLang === 'ar' ? 'rtl' : 'ltr' ?>">
                            <?= h($switchLabel) ?>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="pb-5">
        <div class="container py-4 py-lg-5">
<?php if ($flashes): ?>
            <div class="toast-stack position-fixed top-0 end-0 p-3">
<?php foreach ($flashes as $flash): ?>
                <div class="toast border-0 shadow-sm" role="status" aria-live="polite" aria-atomic="true" data-bs-delay="4500">
                    <div class="toast-header text-bg-<?= h($flash['type'] === 'danger' ? 'danger' : ($flash['type'] === 'warning' ? 'warning' : 'dark')) ?> border-0">
                        <strong class="me-auto">Library update</strong>
                        <button type="button" class="btn-close btn-close-white ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body bg-white"><?= h($flash['message']) ?></div>
                </div>
<?php endforeach; ?>
            </div>
<?php endif; ?>
    <?php
}

function library_render_footer(): void
{
    ?>
        </div>
    </main>

    <footer class="border-top border-subtle bg-white">
        <div class="container py-4 d-flex flex-column flex-lg-row justify-content-between gap-3 small text-secondary">
            <div>
                <div class="fw-semibold text-dark mb-1"><?= library_trans('mvp_label') ?></div>
                <div><?= library_trans('upload_docs') ?></div>
            </div>
            <div class="text-lg-end">
                <div><a class="text-decoration-none" href="/admin.php"><?= library_trans('open_admin') ?></a></div>
                <div><a class="text-decoration-none" href="/index.php"><?= library_trans('browse_public') ?></a></div>
            </div>
        </div>
    </footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="/assets/js/main.js?v=<?= time() ?>"></script>
</body>
</html>
    <?php
}