@extends('layouts.app')

@section('title', __('account-security.hub.title'))

@section('content')

@php
    use App\Enums\TwoFactorStatus;

    $twoFactorState = match (true) {
        in_array($twoFactorStatus, [TwoFactorStatus::OptInActive, TwoFactorStatus::EnforcedActive], true) => 'active',
        $twoFactorStatus === TwoFactorStatus::EnforcedPending => 'pending',
        default => 'none',
    };

    $twoFactorDescription = match ($twoFactorState) {
        'active' => __('account-security.hub.card_2fa.description_active'),
        'pending' => __('account-security.hub.card_2fa.description_pending', ['partner' => $partner->name]),
        default => __('account-security.hub.card_2fa.description_none'),
    };

    $twoFactorCta = match ($twoFactorState) {
        'active' => __('account-security.hub.card_2fa.cta_manage'),
        'pending' => __('account-security.hub.card_2fa.cta_setup_now'),
        default => __('account-security.hub.card_2fa.cta_enable'),
    };

    $twoFactorIcon = $twoFactorState === 'pending' ? 'fa-triangle-exclamation' : 'fa-shield-halved';
@endphp

<style>
    .security-row { transition: background-color .15s ease; }
    .security-row:hover { background-color: #fafafa; }
    .security-icon {
        width: 48px; height: 48px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: #f3f4f6; color: #3d4047;
    }
    .security-header {
        background: #3d4047;
        color: #fff;
    }
    .security-header h1 { color: #fff; }
    .security-header p { color: rgba(255,255,255,.65); }
</style>

<div class="row py-3">
    <div class="col-md-12 col-lg-10 mx-auto">

        @include('components.alert_success')

        <div class="card border-0 shadow-sm overflow-hidden">

            <div class="security-header py-3 px-4">
                <h1 class="h4 mb-1">{{ __('account-security.hub.title') }}</h1>
                <p class="small mb-0">{{ __('account-security.hub.subtitle', ['partner' => $partner->name]) }}</p>
            </div>

            <div class="list-group list-group-flush">

                {{-- Row 1 — 2FA --}}
                <article class="list-group-item security-row p-4" data-testid="hub-card-2fa" aria-labelledby="hub-2fa-title">
                    <div class="d-flex flex-column flex-md-row gap-3 align-items-md-start">
                        <div class="flex-shrink-0">
                            <span class="security-icon" aria-hidden="true">
                                <i class="fas {{ $twoFactorIcon }} fa-lg"></i>
                            </span>
                        </div>

                        <div class="flex-grow-1" style="min-width:0;">
                            <h2 id="hub-2fa-title" class="h6 mb-1">{{ __('account-security.hub.card_2fa.title') }}</h2>
                            <p class="text-muted small mb-0">{{ $twoFactorDescription }}</p>
                        </div>

                        <div class="flex-shrink-0 d-flex flex-column align-items-md-end gap-2" style="min-width:200px;">
                            <x-two-factor.status-badge :status="$twoFactorStatus" />
                            <a href="{{ route('account.security.2fa.show', ['partnerSlug' => $partner->slug]) }}"
                               class="btn btn-primary btn-sm text-nowrap">
                                {{ $twoFactorCta }}
                            </a>
                        </div>
                    </div>
                </article>

                {{-- Row 2 — Trusted devices --}}
                <article class="list-group-item security-row p-4" data-testid="hub-card-devices" aria-labelledby="hub-devices-title">
                    <div class="d-flex flex-column flex-md-row gap-3 align-items-md-start">
                        <div class="flex-shrink-0">
                            <span class="security-icon" aria-hidden="true">
                                <i class="fas fa-laptop fa-lg"></i>
                            </span>
                        </div>

                        <div class="flex-grow-1" style="min-width:0;">
                            <h2 id="hub-devices-title" class="h6 mb-1">{{ __('account-security.hub.card_devices.title') }}</h2>
                            <p class="text-muted small mb-0">{{ __('account-security.hub.card_devices.description') }}</p>
                        </div>

                        <div class="flex-shrink-0 d-flex flex-column align-items-md-end gap-2" style="min-width:200px;">
                            <span class="small text-muted text-md-end">
                                {{ trans_choice('account-security.hub.card_devices.count', $activeDevicesCount, ['count' => $activeDevicesCount]) }}
                            </span>
                            <a href="{{ route('account.devices.index', ['partnerSlug' => $partner->slug]) }}"
                               class="btn btn-outline-secondary btn-sm text-nowrap">
                                {{ __('account-security.hub.card_devices.cta') }}
                            </a>
                        </div>
                    </div>
                </article>

                {{-- Row 3 — Active sessions --}}
                <article class="list-group-item security-row p-4" data-testid="hub-card-sessions" aria-labelledby="hub-sessions-title">
                    <div class="d-flex flex-column flex-md-row gap-3 align-items-md-start">
                        <div class="flex-shrink-0">
                            <span class="security-icon" aria-hidden="true">
                                <i class="fas fa-globe fa-lg"></i>
                            </span>
                        </div>

                        <div class="flex-grow-1" style="min-width:0;">
                            <h2 id="hub-sessions-title" class="h6 mb-1">{{ __('account-security.hub.card_sessions.title') }}</h2>
                            <p class="text-muted small mb-0">{{ __('account-security.hub.card_sessions.description') }}</p>
                        </div>

                        <div class="flex-shrink-0 d-flex flex-column align-items-md-end gap-2" style="min-width:200px;">
                            <span class="small text-muted text-md-end">
                                {{ trans_choice('account-security.hub.card_sessions.count', $activeSessionsCount, ['count' => $activeSessionsCount]) }}
                            </span>
                            <a href="{{ route('account.security.sessions.index', ['partnerSlug' => $partner->slug]) }}"
                               class="btn btn-outline-secondary btn-sm text-nowrap">
                                {{ __('account-security.hub.card_sessions.cta') }}
                            </a>
                        </div>
                    </div>
                </article>

            </div>
        </div>

    </div>
</div>

@endsection