@php
    $contaAngraUser = auth()->user();
    $contaAngraAvatar = $contaAngraUser?->photo ? asset($contaAngraUser->photo) : null;
    $contaAngraInitials = $contaAngraUser
        ? mb_strtoupper(
            mb_substr($contaAngraUser->firstName ?? '', 0, 1) .
            mb_substr($contaAngraUser->lastName ?? '', 0, 1)
        )
        : '';
@endphp

<section class="defaultBar" role="navigation" aria-label="{{ __('Barra de acessibilidade e atalhos') }}">
    <div class="container">
        <div class="defaultBar-row" role="toolbar" aria-label="{{ __('Atalhos de acessibilidade') }}">

            <div class="defaultBar-left">
                @auth
                    <div class="defaultBar-user">
                        <button
                            type="button"
                            class="defaultBar-user-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#contaAngraUserModal"
                            aria-label="{{ __('Abrir menu da Conta Angra do usuário autenticado') }}"
                        >
                            <span class="defaultBar-avatar" aria-hidden="true">
                                @if($contaAngraAvatar)
                                    <img src="{{ $contaAngraAvatar }}" alt="{{ $contaAngraUser->name }}" loading="lazy">
                                @else
                                    <span class="defaultBar-avatar-initials">{{ $contaAngraInitials ?: __('?') }}</span>
                                @endif
                            </span>
                            <span class="defaultBar-user-inline d-none d-md-inline">
                                {{ __('Olá,') }} {{ $contaAngraUser->firstName ?? $contaAngraUser->name }}
                            </span>
                            <i class="fa-solid fa-chevron-down defaultBar-user-caret" aria-hidden="true"></i>
                        </button>
                    </div>
                @endauth
                @guest
                    <a
                        class="px-2 defaultBar-link"
                        href="{{ route('admin.contaAngra.index') }}"
                        target="_blank"
                        rel="noopener"
                        aria-label="{{ __('Acessar Conta Angra (abre em nova aba)') }}"
                    >
                        <i class="fa-regular fa-user" aria-hidden="true"></i>
                        <span class="defaultBar-label-full">{{ __('Entrar na Conta Angra') }}</span>
                        <span class="defaultBar-label-short"></span>
                    </a>
                @endguest
            </div> 

            <div class="defaultBar-icons">
                @php
                    $horaAtualBoletim = \Carbon\Carbon::now()->subHours(3);
                    $horaBoletim = $horaAtualBoletim->format('H');

                    $meteoconsWidget = [
                        'Ensolarado' => 'pmar/assets/img/icons/weather/ensolarado.svg',
                        'Sol com poucas nuvens' => 'pmar/assets/img/icons/weather/sol-com-poucas-nuvens.svg',
                        'Sol com muitas nuvens' => 'pmar/assets/img/icons/weather/sol-com-muitas-nuvens.svg',
                        'Nublado' => 'pmar/assets/img/icons/weather/nublado.svg',
                        'Sol com possibilidade de chuva' => 'pmar/assets/img/icons/weather/sol-com-possibilidade-de-chuva.svg',
                        'Nublado com possibilidade de chuva' => 'pmar/assets/img/icons/weather/nublado-com-possibilidade-de-chuva.svg',
                        'Chuvoso' => 'pmar/assets/img/icons/weather/chuvoso.svg',
                        'Pancadas de chuva e trovoada' => 'pmar/assets/img/icons/weather/pancadas-de-chuva-e-trovoada.svg',
                        'Pancadas de chuva' => 'pmar/assets/img/icons/weather/pancadas-de-chuva.svg',
                        'Sem nuvens' => 'pmar/assets/img/icons/weather/sem-nuvens.svg',
                        'Poucas nuvens' => 'pmar/assets/img/icons/weather/poucas-nuvens.svg',
                        'Muitas nuvens' => 'pmar/assets/img/icons/weather/muitas-nuvens.svg',
                        'Muitas nuvens com possibilidade de chuva' => 'pmar/assets/img/icons/weather/muitas-nuvens-com-possibilidade-de-chuva.svg',
                    ];

                    $coresWidget = [
                        'VIGILÂNCIA' => 'green',
                        'OBSERVAÇÃO' => 'warning',
                        'ATENÇÃO' => 'danger',
                        'ALERTA' => 'red',
                        'ALERTA MÁXIMO' => 'indigo',
                    ];
                    $widgetBorderClass = '';
                    if (!empty($boletimHoje)) {
                        $corWidget = $coresWidget[$boletimHoje->nivel_de_acao] ?? 'secondary';
                        $widgetBorderClass = "border-start border-{$corWidget} border-1";
                    } else {
                        $widgetBorderClass = 'border-start border-secondary border-1';
                    }

                    $weatherAriaLabel = !empty($boletimHoje)
                        ? __('Ver boletim meteorológico') . ' — ' . $boletimHoje->temperatura_minima . '° / ' . $boletimHoje->temperatura_maxima . '°'
                        : __('Boletim meteorológico — sem boletim de hoje');
                @endphp

                <a
                    class="px-2 defaultBar-link defaultBar-weather {{ $widgetBorderClass }}"
                    href="{{ route('paginas.boletim-meteorologico.index') }}"
                    aria-label="{{ $weatherAriaLabel }}"
                    @if(empty($boletimHoje)) title="{{ __('Sem boletim de hoje') }}" @endif
                >
                    @if (!empty($boletimHoje))
                        @php
                            if ($horaBoletim >= 5 && $horaBoletim < 12) {
                                $condicaoWidget = $boletimHoje->estado_manha;
                            } elseif ($horaBoletim >= 12 && $horaBoletim < 18) {
                                $condicaoWidget = $boletimHoje->estado_tarde;
                            } else {
                                $condicaoWidget = $boletimHoje->estado_noite;
                            }

                            $iconeWidget = $meteoconsWidget[$condicaoWidget] ?? null;
                        @endphp

                        <span class="defaultBar-weather-icon" aria-hidden="true">
                            @if ($iconeWidget)
                                <img src="{{ asset($iconeWidget) }}" alt="{{ $condicaoWidget }}" loading="lazy">
                            @else
                                <i class="fa-solid fa-cloud-sun"></i>
                            @endif
                        </span>

                        <span class="defaultBar-weather-text d-none d-md-flex">
                            <span class="defaultBar-weather-meta">
                                <span class="defaultBar-weather-temp">
                                    <i class="fa-solid fa-arrow-down fa-xs me-1"></i>
                                    {{ $boletimHoje->temperatura_minima }}°
                                    /
                                    {{ $boletimHoje->temperatura_maxima }}°
                                    <i class="fa-solid fa-arrow-up fa-xs ms-1"></i>
                                </span>
                            </span>
                        </span>
                    @else
                        <span class="defaultBar-weather-icon" aria-hidden="true">
                            <i class="fa-solid fa-cloud"></i>
                        </span>
                        <span class="defaultBar-weather-text d-none d-md-flex">
                            <span class="defaultBar-weather-title">
                                {{ __('Boletim Meteorológico') }}
                            </span>
                            <span class="defaultBar-weather-meta">
                                {{ __('Sem boletim de hoje') }}
                            </span>
                        </span>
                    @endif
                </a>

                <a
                    class="px-2 defaultBar-link"
                    href="{{ route('transparencia.index') }}"
                    aria-label="{{ __('Ir para o Portal da Transparência') }}"
                    title="{{ __('Portal da Transparência') }}"
                >
                    <span class="d-md-none">{{ __('Transparência') }}</span>
                    <span class="d-none d-md-inline">{{ __('Portal da Transparência') }}</span>
                </a>

                <button
                    class="defaultBar-icon defaultBar-zoom-toggle"
                    data-bs-toggle="modal"
                    data-bs-target="#defaultBarZoomModal"
                    aria-label="{{ __('Abrir opções de acessibilidade de texto') }}"
                    title="{{ __('Acessibilidade de texto') }}"
                    type="button"
                >
                    <i class="fa-solid fa-magnifying-glass-plus" aria-hidden="true"></i>
                    <span class="visually-hidden">{{ __('Acessibilidade de texto') }}</span>
                </button>

                {{-- Botão de Modo Noturno (Acessibilidade) --}}
                <a
                    href="#"
                    id="darkModeToggle"
                    class="dark-mode-toggle defaultBar-icon"
                    title="{{ __('Alternar modo noturno') }}"
                    aria-label="{{ __('Alternar entre modo claro e escuro') }}"
                    aria-pressed="false"
                >
                    <i class="fa-solid fa-sun dark-mode-icon-sun" aria-hidden="true"></i>
                    <i class="fa-solid fa-moon dark-mode-icon-moon" aria-hidden="true"></i>
                    <span class="visually-hidden">{{ __('Alternar modo noturno') }}</span>
                </a>
            </div>
        </div>
    </div>
</section>

@auth
    <div
        class="modal fade defaultBar-user-modal"
        id="contaAngraUserModal"
        tabindex="-1"
        aria-labelledby="contaAngraUserModalLabel"
        aria-hidden="true"
        data-bs-backdrop="false"
        data-bs-keyboard="true"
    >
        <div class="modal-dialog modal-sm defaultBar-user-popup">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="defaultBar-modal-header defaultBar-modal-header-user flex-grow-1">
                        <div class="defaultBar-avatar defaultBar-avatar-xl" aria-hidden="true">
                            @if($contaAngraAvatar)
                                <img src="{{ $contaAngraAvatar }}" alt="{{ $contaAngraUser->name }}" loading="lazy">
                            @else
                                <span class="defaultBar-avatar-initials">{{ $contaAngraInitials ?: __('?') }}</span>
                            @endif
                        </div>
                        <div class="defaultBar-modal-user text-center">
                            <p id="contaAngraUserModalLabel" class="defaultBar-modal-greeting">{{ __('Olá,') }}</p>
                            <h2 class="defaultBar-modal-name">{{ $contaAngraUser->name }}</h2>
                        </div>
                        </div>
                        <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="{{ __('Fechar') }}"></button>
                    </div>

                    <div class="defaultBar-modal-actions" role="list">
                        <a href="{{ route('admin.contaAngra.index') }}" class="defaultBar-modal-link" role="listitem">
                            <i class="fa-solid fa-house" aria-hidden="true"></i>
                            <span>{{ __('Minha Conta Angra') }}</span>
                            <i class="fa-solid fa-arrow-up-right-from-square defaultBar-modal-link-icon" aria-hidden="true"></i>
                        </a>

                        <div class="defaultBar-modal-divider" role="separator" aria-hidden="true"></div>

                        <a href="{{ route('admin.profile') }}" class="defaultBar-modal-link" role="listitem">
                            <i class="fa-solid fa-id-card" aria-hidden="true"></i>
                            <span>{{ __('Dados Pessoais') }}</span>
                            <i class="fa-solid fa-chevron-right defaultBar-modal-link-icon" aria-hidden="true"></i>
                        </a>

                        <a href="{{ route('admin.password') }}" class="defaultBar-modal-link" role="listitem">
                            <i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
                            <span>{{ __('Segurança da Conta') }}</span>
                            <i class="fa-solid fa-chevron-right defaultBar-modal-link-icon" aria-hidden="true"></i>
                        </a>

                        <a href="{{ route('admin.logout') }}" class="defaultBar-modal-link defaultBar-modal-link-danger" role="listitem">
                            <i class="fa-solid fa-arrow-right-from-bracket" aria-hidden="true"></i>
                            <span>{{ __('Sair') }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endauth

<div
    class="modal fade defaultBar-zoom-modal"
    id="defaultBarZoomModal"
    tabindex="-1"
    aria-labelledby="defaultBarZoomModalLabel"
    aria-hidden="true"
    data-bs-backdrop="false"
    data-bs-keyboard="true"
>
    <div class="modal-dialog modal-sm defaultBar-zoom-popup">
        <div class="modal-content">
            <div class="modal-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="defaultBar-modal-header defaultBar-modal-header-user flex-grow-1">
                        <div class="defaultBar-avatar defaultBar-avatar-xl" aria-hidden="true">
                            <i class="fa-solid fa-magnifying-glass-plus"></i>
                        </div>
                        <div class="defaultBar-modal-user text-center">
                            <p id="defaultBarZoomModalLabel" class="defaultBar-modal-greeting">{{ __('Acessibilidade de texto') }}</p>
                            <h2 class="defaultBar-modal-name">{{ __('Tamanho da fonte') }}</h2>
                        </div>
                    </div>
                    <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="{{ __('Fechar') }}"></button>
                </div>
                <div class="defaultBar-modal-actions" role="list">
                    <a class="defaultBar-modal-link zoom" href="#" data-value="0.25" role="listitem">
                        <i class="fa-solid fa-magnifying-glass-plus" aria-hidden="true"></i>
                        <span>{{ __('Aumentar fonte') }}</span>
                    </a>
                    <a class="defaultBar-modal-link zoom" href="#" data-value="-0.25" role="listitem">
                        <i class="fa-solid fa-magnifying-glass-minus" aria-hidden="true"></i>
                        <span>{{ __('Reduzir fonte') }}</span>
                    </a>
                    <a class="defaultBar-modal-link zoom" href="#" data-value="1" role="listitem">
                        <i class="fa-solid fa-font" aria-hidden="true"></i>
                        <span>{{ __('Fonte padrão') }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>