@php
    $brand = app(\App\Domain\Shared\Services\BrandingService::class)->forCurrentAcademy();
    // Direction follows the locale rather than being hardcoded: a document
    // marked dir="rtl" while announcing lang="en" tells a screen reader two
    // contradictory things about the same text.
    $locale = app()->getLocale();
    $dir = in_array($locale, ['ar', 'he', 'fa', 'ur'], true) ? 'rtl' : 'ltr';
    $portal = app(\App\Domain\Shared\Context\PortalContext::class);
    $profiles = $portal->switchableProfiles();
    $activeProfile = $portal->activeParticipant();
@endphp
<!DOCTYPE html>
<html dir="{{ $dir }}" lang="{{ $locale }}" class="h-full"
      data-theme-mode="{{ $brand->themeMode }}"
      data-theme="{{ $brand->themeMode === 'dark' ? 'dark' : 'light' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="{{ $brand->themeColor }}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="{{ $brand->appShortName }}">
    <title>{{ $title ?? __('حسابي') }} — {{ $brand->academyName }}</title>

    <link rel="manifest" href="{{ route('portal.manifest') }}">
    @if($brand->faviconUrl)
        <link rel="icon" href="{{ $brand->faviconUrl }}">
    @endif
    @if($brand->appIconUrl)
        <link rel="apple-touch-icon" href="{{ $brand->appIconUrl }}">
    @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={{ urlencode($brand->fontAr) }}:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    {{-- portal.css only. Two Tailwind entrypoints on one document means two
         preflights and a non-deterministic @layer order. --}}
    @vite(['resources/css/portal.css', 'resources/js/portal.js'])
    @livewireStyles

    <style>
        :root {
{!! $brand->cssVariableBlock() !!}
            --portal-bg: oklch(0.985 0.002 265);
            --portal-surface: #ffffff;
            --portal-border: oklch(0.92 0.004 265);
            --portal-ink: oklch(0.22 0.02 265);
            --portal-muted: oklch(0.55 0.015 265);
        }

        [data-theme='dark'] {
            --portal-bg: oklch(0.18 0.012 265);
            --portal-surface: oklch(0.23 0.014 265);
            --portal-border: oklch(0.31 0.016 265);
            --portal-ink: oklch(0.96 0.004 265);
            --portal-muted: oklch(0.70 0.012 265);
        }

        html, body {
            background: var(--portal-bg);
            color: var(--portal-ink);
        }

        [x-cloak] { display: none !important; }
    </style>

    {{-- Set before first paint so `auto` never flashes the wrong theme. --}}
    <script>
        (function () {
            var root = document.documentElement;
            if (root.dataset.themeMode !== 'auto') return;
            var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            root.setAttribute('data-theme', dark ? 'dark' : 'light');
        })();
    </script>
</head>
<body class="min-h-full antialiased">
<div class="mx-auto flex min-h-dvh max-w-2xl flex-col">

    <header class="pt-safe sticky top-0 z-40 border-b"
            style="background: var(--portal-surface); border-color: var(--portal-border);">
        <div class="flex items-center gap-2 px-4 py-2.5">
            @if($brand->logoUrl)
                <img src="{{ $brand->logoUrl }}" alt="" class="h-8 w-8 rounded-lg object-contain">
            @else
                <span class="grid h-8 w-8 place-items-center rounded-lg text-sm font-bold"
                      style="background: var(--brand-500); color: var(--brand-fg);">
                    {{ mb_substr($brand->academyName, 0, 1) }}
                </span>
            @endif

            <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-bold leading-tight">{{ $title ?? $brand->academyName }}</p>
                @if($activeProfile)
                    <p class="truncate text-xs leading-tight" style="color: var(--portal-muted);">
                        {{ $activeProfile->person?->name_ar ?? $activeProfile->person?->name }}
                    </p>
                @endif
            </div>

            @if($portal->speaksForAnyone())
                {{-- The pass is per active profile: a guardian with three
                     children needs three, so it is an affordance in the header
                     rather than a tab of its own. --}}
                <a href="{{ route('portal.pass') }}"
                   class="tap-target rounded-xl"
                   style="color: var(--portal-muted);"
                   aria-label="{{ __('بطاقة الدخول') }}">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5zM13.5 14.25h2.25v2.25H13.5zM18 18.75h2.25V21H18zM13.5 18.75h2.25V21H13.5zM18 14.25h2.25v2.25H18z"/>
                    </svg>
                </a>
            @endif

            <a href="{{ route('portal.notifications') }}"
               class="tap-target relative rounded-xl"
               style="color: var(--portal-muted);"
               aria-label="{{ __('الإشعارات') }}">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>
                </svg>
                @if(($unreadNotifications ?? 0) > 0)
                    <span class="absolute end-1.5 top-1.5 grid h-4 min-w-4 place-items-center rounded-full px-1 text-[10px] font-bold text-white"
                          style="background: var(--brand-danger);">
                        {{ $unreadNotifications > 9 ? '9+' : $unreadNotifications }}
                    </span>
                @endif
            </a>
        </div>

        @if($profiles->count() > 1)
            <livewire:portal.profile-switcher />
        @endif
    </header>

    <main class="flex-1 px-4 pb-28 pt-4">
        @if(session('success'))
            {{-- A message that appears after an action has to be announced, or
                 a screen-reader user submits a form and hears nothing. --}}
            <div role="status" aria-live="polite" class="portal-card mb-4 p-3 text-sm"
                 style="background: color-mix(in oklab, var(--brand-success) 12%, var(--portal-surface));
                        border-color: color-mix(in oklab, var(--brand-success) 35%, var(--portal-surface));">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div role="alert" class="portal-card mb-4 p-3 text-sm"
                 style="background: color-mix(in oklab, var(--brand-danger) 12%, var(--portal-surface));
                        border-color: color-mix(in oklab, var(--brand-danger) 35%, var(--portal-surface));">
                {{ session('error') }}
            </div>
        @endif

        {{ $slot }}
    </main>

    {{-- Five tabs, capped. Each is a real URL so a deep link and the native
         shell's back button both behave. --}}
    <nav class="pb-safe fixed inset-x-0 bottom-0 z-40 mx-auto max-w-2xl border-t"
         style="background: var(--portal-surface); border-color: var(--portal-border);"
         aria-label="{{ __('التنقل الرئيسي') }}">
        <ul class="flex items-stretch justify-around gap-1 px-2 pt-1.5">
            @foreach([
                ['portal.home', 'الرئيسية', 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75'],
                ['portal.training', 'التدريب', 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'],
                ['portal.payments', 'المدفوعات', 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9v3'],
                ['portal.academy', 'الأكاديمية', 'M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z'],
                ['portal.account', 'حسابي', 'M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z'],
            ] as [$route, $label, $path])
                @php $isActive = request()->routeIs($route . '*'); @endphp
                <li class="flex-1">
                    <a href="{{ route($route) }}" wire:navigate
                       @class(['flex flex-col items-center gap-1 rounded-xl px-1 py-1.5 transition-colors'])
                       style="color: {{ $isActive ? 'var(--brand-600)' : 'var(--portal-muted)' }};"
                       @if($isActive) aria-current="page" @endif>
                        <span class="tap-target !min-h-9">
                            <svg class="h-6 w-6" fill="none" stroke="currentColor"
                                 stroke-width="{{ $isActive ? '2.1' : '1.6' }}" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $path }}"/>
                            </svg>
                        </span>
                        <span class="text-[10px] {{ $isActive ? 'font-bold' : 'font-medium' }}">{{ __($label) }}</span>
                    </a>
                </li>
            @endforeach
        </ul>
    </nav>
</div>
@livewireScripts
</body>
</html>
