<?php
$roleLabel = ucfirst((string) ($primaryRole ?? 'guest'));
$segment   = service('uri')->getSegment(1);
$logoUrl   = base_url('images/logo-splash-academy_03.png');
$authRoles = is_array($authRoles ?? null) ? $authRoles : [];

$iconSvg = static function (string $icon): string {
    return match ($icon) {
        'dashboard' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12.75L12 4l9 8.75"/><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 10.5V20h13.5v-9.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M10 20v-5.25h4V20"/></svg>',
        'children' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.5v-1.125A3.375 3.375 0 0 0 11.625 15h-3.75A3.375 3.375 0 0 0 4.5 18.375V19.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 11.25A2.625 2.625 0 1 0 9.75 6a2.625 2.625 0 0 0 0 5.25Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 19.5v-1.125A3.375 3.375 0 0 0 16.125 15h-.75"/><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.375a2.625 2.625 0 0 1 0 4.875"/></svg>',
        'coaches' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M12 14.25a4.125 4.125 0 1 0 0-8.25 4.125 4.125 0 0 0 0 8.25Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 19.5a6.75 6.75 0 0 1 13.5 0"/><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 7.5h2.25m-1.125-1.125v2.25"/></svg>',
        'groups' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><rect x="3.75" y="5.25" width="6.5" height="6.5" rx="1.5"/><rect x="13.75" y="5.25" width="6.5" height="6.5" rx="1.5"/><rect x="8.75" y="14.25" width="6.5" height="6.5" rx="1.5"/></svg>',
        'evaluations' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 4.5h7.19a2.25 2.25 0 0 1 1.59.66l2.56 2.56a2.25 2.25 0 0 1 .66 1.59v9.19a2.25 2.25 0 0 1-2.25 2.25H7.5a2.25 2.25 0 0 1-2.25-2.25V6.75A2.25 2.25 0 0 1 7.5 4.5Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 10.5h6M9 14.25h6M9 18h4.5"/></svg>',
        'quick-check' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75 9 17.25 19.5 6.75"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12v6.75A2.25 2.25 0 0 1 17.25 21H6.75A2.25 2.25 0 0 1 4.5 18.75V8.25A2.25 2.25 0 0 1 6.75 6H12"/></svg>',
        'attendance' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3.75v3m7.5-3.0v3M4.5 9h15"/><rect x="4.5" y="5.25" width="15" height="14.25" rx="2.25"/><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 13.5h4.5"/></svg>',
        'journey' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 18.75V5.25"/><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 7.5h6.5l1.5 3h5.5l-1.5 3h-6.5l-1.5-3H5.25"/><circle cx="5.25" cy="18.75" r="1.5" fill="currentColor" stroke="none"/></svg>',
        'alerts' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 17.25h.008v.008H12v-.008Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.29 3.86 2.64 17.14A1.5 1.5 0 0 0 3.93 19.5h15.14a1.5 1.5 0 0 0 1.29-2.36L12.71 3.86a1.5 1.5 0 0 0-2.42 0Z"/></svg>',
        'reports' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 19.5h13.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 16.5V10.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5v-9"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 16.5v-4.5"/></svg>',
        'levels' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 16.5 12 4.5l7.5 12"/><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 16.5h10.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 19.5h7.5"/></svg>',
        'more' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-full w-full"><circle cx="5" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.5" fill="currentColor" stroke="none"/></svg>',
        'menu' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 6.75h15M4.5 12h15M4.5 17.25h15"/></svg>',
        'close' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="m6.75 6.75 10.5 10.5M17.25 6.75 6.75 17.25"/></svg>',
        'chevron-down' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6"/></svg>',
        'logout' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 8.25V6A2.25 2.25 0 0 0 13.5 3.75h-6A2.25 2.25 0 0 0 5.25 6v12A2.25 2.25 0 0 0 7.5 20.25h6A2.25 2.25 0 0 0 15.75 18v-2.25"/><path stroke-linecap="round" stroke-linejoin="round" d="M18 12H9.75"/><path stroke-linecap="round" stroke-linejoin="round" d="m14.25 8.25 3.75 3.75-3.75 3.75"/></svg>',
        default => '',
    };
};

$navItems  = [
    ['label' => 'Dashboard', 'href' => url_to('dashboard'), 'active' => $segment === '' || $segment === 'dashboard', 'icon' => 'dashboard', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Copii', 'href' => url_to('children.index'), 'active' => $segment === 'children', 'icon' => 'children', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Traineri', 'href' => url_to('coaches.index'), 'active' => $segment === 'coaches', 'icon' => 'coaches', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Grupe', 'href' => url_to('groups.index'), 'active' => $segment === 'groups', 'icon' => 'groups', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Evaluari', 'href' => url_to('evaluations.index'), 'active' => $segment === 'evaluations', 'icon' => 'evaluations', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Quick Check', 'href' => url_to('quickChecks.index'), 'active' => $segment === 'quick-checks', 'icon' => 'quick-check', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Prezenta', 'href' => url_to('attendance.index'), 'active' => $segment === 'attendance', 'icon' => 'attendance', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Journey', 'href' => url_to('journey.index'), 'active' => $segment === 'journey', 'icon' => 'journey', 'roles' => ['admin', 'coach'], 'group' => 'main'],
    ['label' => 'Alerte', 'href' => url_to('alerts.index'), 'active' => $segment === 'alerts', 'icon' => 'alerts', 'roles' => ['admin', 'coach'], 'group' => 'more'],
    ['label' => 'Rapoarte', 'href' => url_to('reports.index'), 'active' => $segment === 'reports', 'icon' => 'reports', 'roles' => ['admin', 'coach'], 'group' => 'more'],
    ['label' => 'Nivele', 'href' => url_to('levels.index'), 'active' => $segment === 'levels', 'icon' => 'levels', 'roles' => ['admin', 'coach'], 'group' => 'more'],
];
$navItems = array_values(array_filter($navItems, static fn (array $item): bool => $authRoles === [] || array_intersect($item['roles'], $authRoles) !== []));
$primaryNavItems = array_values(array_filter($navItems, static fn (array $item): bool => ($item['group'] ?? 'main') === 'main'));
$moreNavItems = array_values(array_filter($navItems, static fn (array $item): bool => ($item['group'] ?? 'main') === 'more'));
$moreActive = array_values(array_filter($moreNavItems, static fn (array $item): bool => (bool) ($item['active'] ?? false))) !== [];
?>
<header class="relative z-50 border-b border-white/70 bg-white/90 backdrop-blur" x-data="{ navOpen: false, moreOpen: false, userOpen: false }">
    <div class="w-full px-4 py-4 sm:px-6 lg:px-8 xl:px-10 2xl:px-12">
        <div class="flex items-center gap-4 lg:gap-6" @keydown.escape.window="navOpen = false; moreOpen = false; userOpen = false;">
            <div class="flex min-w-0 shrink-0 items-center gap-3 sm:gap-4">
                <a href="<?= url_to('dashboard') ?>" class="shrink-0">
                    <img src="<?= esc($logoUrl) ?>" alt="Splash Academy" class="h-11 w-auto xl:h-12">
                </a>
                <div class="min-w-0 max-w-[180px] xl:max-w-[220px]">
                    <p class="truncate text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-400">Splash Academy</p>
                    <p class="mt-1 truncate text-sm font-medium text-slate-600 xl:text-[15px]">Swim Journey</p>
                    <?php if (! empty($pageTitle)) : ?>
                        <p class="mt-1 hidden truncate text-[11px] uppercase tracking-[0.18em] text-slate-400 2xl:block"><?= esc($pageTitle) ?></p>
                    <?php endif; ?>
                </div>
            </div>

            <nav id="primary-navigation" class="hidden min-w-0 flex-1 items-center justify-center gap-1 overflow-visible lg:flex xl:gap-1.5">
                <?php foreach ($primaryNavItems as $item) : ?>
                    <a href="<?= esc($item['href']) ?>" class="inline-flex min-w-0 items-center gap-1.5 rounded-2xl px-2 py-2 text-[12px] xl:text-[13px] font-semibold leading-none transition xl:px-3 <?= esc(nav_item_classes((bool) $item['active'])) ?>">
                        <span class="h-3.5 w-3.5 shrink-0"><?= $iconSvg($item['icon']) ?></span>
                        <span class="truncate"><?= esc($item['label']) ?></span>
                    </a>
                <?php endforeach; ?>

                <?php if ($moreNavItems !== []) : ?>
                    <div class="relative z-50">
                        <button type="button" class="inline-flex min-w-0 items-center gap-1.5 rounded-2xl px-2 py-2 text-[12px] xl:text-[13px] font-semibold leading-none transition xl:px-3 <?= esc(nav_item_classes($moreActive)) ?>" @click="moreOpen = !moreOpen" :aria-expanded="moreOpen.toString()">
                            <span class="h-3.5 w-3.5 shrink-0"><?= $iconSvg('more') ?></span>
                            <span class="truncate">More</span>
                            <span class="text-slate-400"><?= $iconSvg('chevron-down') ?></span>
                        </button>

                        <div x-cloak x-show="moreOpen" x-transition.origin.top.center @click.outside="moreOpen = false" class="absolute left-1/2 top-full z-[80] mt-3 w-60 -translate-x-1/2 rounded-2xl border border-slate-200 bg-white p-2 shadow-soft ring-1 ring-slate-200/70">
                            <?php foreach ($moreNavItems as $item) : ?>
                                <a href="<?= esc($item['href']) ?>" class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[12px] xl:text-[13px] font-medium transition <?= esc(nav_item_classes((bool) $item['active'])) ?>" @click="moreOpen = false">
                                    <span class="h-4 w-4 shrink-0"><?= $iconSvg($item['icon']) ?></span>
                                    <span><?= esc($item['label']) ?></span>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </nav>

            <div class="ml-auto flex shrink-0 items-center gap-2">
                <div class="relative">
                    <button type="button" class="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-2.5 py-2 text-slate-700 transition hover:bg-slate-100 sm:px-3" @click="userOpen = !userOpen" :aria-expanded="userOpen.toString()">
                        <span class="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-900 text-xs font-semibold text-white">
                            <?= esc(strtoupper(substr((string) ($authUser?->username ?? 'G'), 0, 1))) ?>
                        </span>
                        <span class="hidden text-left sm:block">
                            <span class="block text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-400"><?= esc($roleLabel) ?></span>
                            <span class="block max-w-[100px] truncate text-[12px] xl:text-[13px] font-semibold leading-none text-slate-900"><?= esc($authUser?->username ?? 'Guest') ?></span>
                        </span>
                        <span class="hidden text-slate-400 sm:inline-flex"><?= $iconSvg('chevron-down') ?></span>
                    </button>

                    <div x-cloak x-show="userOpen" x-transition.origin.top.right @click.outside="userOpen = false" class="absolute right-0 top-full z-[80] mt-3 w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-soft ring-1 ring-slate-200/70">
                        <p class="px-3 py-1 text-[13px] font-semibold text-slate-900"><?= esc($authUser?->username ?? 'Guest') ?></p>
                        <p class="px-3 py-1 text-xs uppercase tracking-[0.18em] text-slate-500"><?= esc($roleLabel) ?></p>
                        <p class="px-3 py-2 text-[12px] xl:text-[13px] text-slate-600"><?= esc($authUser?->email ?? '') ?></p>
                        <div class="mt-2 border-t border-slate-200"></div>
                        <a href="<?= url_to('logout') ?>" class="mt-3 flex items-center gap-3 rounded-xl px-3 py-2 text-[12px] xl:text-[13px] font-medium text-rose-600 transition hover:bg-rose-50">
                            <?= $iconSvg('logout') ?>
                            <span>Logout</span>
                        </a>
                    </div>
                </div>

                <button type="button" class="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700 transition hover:bg-slate-50 lg:hidden" @click="navOpen = !navOpen" :aria-expanded="navOpen.toString()" aria-controls="primary-navigation">
                    <span class="sr-only">Toggle navigation</span>
                    <span x-cloak x-show="!navOpen"><?= $iconSvg('menu') ?></span>
                    <span x-cloak x-show="navOpen"><?= $iconSvg('close') ?></span>
                </button>
            </div>
        </div>

        <div class="lg:hidden" x-cloak x-show="navOpen" x-transition.origin.top>
            <nav class="mt-4 space-y-4">
                <div class="grid gap-2 sm:grid-cols-2">
                <?php foreach ($primaryNavItems as $item) : ?>
                    <a href="<?= esc($item['href']) ?>" class="inline-flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-semibold transition <?= esc(nav_item_classes((bool) $item['active'])) ?>" @click="navOpen = false">
                        <span class="h-4 w-4 shrink-0"><?= $iconSvg($item['icon']) ?></span>
                        <span><?= esc($item['label']) ?></span>
                    </a>
                <?php endforeach; ?>
                </div>

                <?php if ($moreNavItems !== []) : ?>
                    <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                        <p class="px-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">More</p>
                        <div class="mt-3 grid gap-2 sm:grid-cols-2">
                            <?php foreach ($moreNavItems as $item) : ?>
                                <a href="<?= esc($item['href']) ?>" class="inline-flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-semibold transition <?= esc(nav_item_classes((bool) $item['active'])) ?>" @click="navOpen = false">
                                    <span class="h-4 w-4 shrink-0"><?= $iconSvg($item['icon']) ?></span>
                                    <span><?= esc($item['label']) ?></span>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </nav>
        </div>
    </div>
</header>
