@props([
    'battery' => null,
    'reasonUnavailable' => null,
    'participantSession' => null,
    'assistedPreview' => false,
])

<div class="qhub">
    @if($reasonUnavailable === 'profile')
        <div class="qhub-empty">
            <p class="text-gray-700">
                Para aceder ao questionário, o seu perfil precisa de <strong>setor (área)</strong> e <strong>grupo</strong> definidos.
            </p>
            <p class="mt-2 text-sm text-gray-500">
                Peça ao administrador para completar estes dados no seu utilizador ou atualize-os em <strong>Meu perfil</strong>, se disponível.
            </p>
        </div>
    @elseif($reasonUnavailable === 'no_battery')
        <div class="qhub-empty">
            <p class="text-gray-700">
                Não existe neste momento uma <strong>bateria de perguntas publicada</strong> para o seu setor e grupo.
            </p>
            <p class="mt-2 text-sm text-gray-500">
                Quando a equipa publicar a bateria correspondente, poderá iniciar o questionário aqui.
            </p>
        </div>
    @elseif($battery !== null)
        <article class="qhub-card">
            <div class="qhub-card__glow" aria-hidden="true"></div>
            <div class="qhub-card__inner">
                <span class="qhub-card__badge">
                    <i class="fa-solid fa-gamepad" aria-hidden="true"></i>
                    Experiência imersiva
                </span>
                <h2 class="qhub-card__title">{{ $battery->title }}</h2>

                <dl class="qhub-meta">
                    @if($battery->sector)
                        <div class="qhub-meta__row">
                            <dt>Setor</dt>
                            <dd>{{ $battery->sector->name }}</dd>
                        </div>
                    @endif
                    @if($battery->trainingGroup)
                        <div class="qhub-meta__row">
                            <dt>Grupo</dt>
                            <dd>{{ $battery->trainingGroup->name }}</dd>
                        </div>
                    @endif
                    <div class="qhub-meta__row">
                        <dt>Perguntas</dt>
                        <dd>{{ $battery->batteryQuestions->count() }}</dd>
                    </div>
                    @if($battery->starts_at || $battery->ends_at)
                        <div class="qhub-meta__row qhub-meta__dates">
                            <dt class="sr-only">Disponibilidade</dt>
                            <dd>
                                @if($battery->starts_at)
                                    Disponível a partir de {{ $battery->starts_at->timezone(config('app.timezone'))->format('d/m/Y H:i') }}
                                @endif
                                @if($battery->ends_at)
                                    <span @class(['ml-0' => ! $battery->starts_at, 'ml-1' => $battery->starts_at])>
                                        Até {{ $battery->ends_at->timezone(config('app.timezone'))->format('d/m/Y H:i') }}
                                    </span>
                                @endif
                            </dd>
                        </div>
                    @endif
                </dl>

                @if($assistedPreview)
                    <p class="qhub-notice qhub-notice--warn mt-4">
                        Modo assistido: ações de jogo estão desativadas. O participante veria os botões abaixo.
                    </p>
                    <div class="qhub-actions opacity-60 pointer-events-none" aria-hidden="true">
                        <div class="qhub-actions__btn-wrap">
                            <x-portal.game-button href="#" label="Abrir" />
                        </div>
                    </div>
                @else
                    <div class="qhub-actions">
                        @if($participantSession?->isCompleted())
                            <p class="qhub-notice qhub-notice--ok">
                                Já concluiu esta bateria de perguntas. Pode rever o resultado em ecrã inteiro.
                            </p>
                            <a
                                href="{{ route('portal.questionnaire.experience.result') }}"
                                class="qhub-btn qhub-btn--ghost"
                            >
                                Ver resultado
                            </a>
                        @elseif($participantSession !== null)
                            <p class="qhub-notice qhub-notice--warn">
                                Tem um questionário em progresso. Continue de onde parou.
                            </p>
                            <div class="qhub-actions__btn-wrap">
                                <x-portal.game-button
                                    :href="route('portal.questionnaire.experience')"
                                    label="Continuar"
                                />
                            </div>
                        @else
                            <div class="qhub-actions__btn-wrap">
                                <x-portal.game-button
                                    :href="route('portal.questionnaire.experience')"
                                    label="Abrir"
                                />
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </article>
    @endif
</div>