@extends('layouts.app')

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

@php
    $otherSessions = $sessions->where('id', '!=', $currentSessionId);
    $hasOtherSessions = $otherSessions->isNotEmpty();
@endphp

@section('content')

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

        <x-account-security.breadcrumbs :current="__('account-security.sessions.page.title')" />

        @include('components.alert_success')

        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
                <h1 class="h4 mb-0">{{ __('account-security.sessions.page.title') }}</h1>
                @if ($hasOtherSessions)
                    <button type="button" class="btn btn-sm btn-outline-danger"
                            data-bs-toggle="modal" data-bs-target="#revoke-all-sessions">
                        {{ __('account-security.sessions.actions.revoke_others') }}
                    </button>
                @endif
            </div>
            <div class="card-body">
                <p class="text-muted">{{ __('account-security.sessions.page.intro') }}</p>

                @if ($sessions->isEmpty())
                    <div class="alert alert-light text-center mb-0" role="status">
                        {{ __('account-security.sessions.page.empty') }}
                    </div>
                @else
                    {{-- Desktop table (>= md) --}}
                    <div class="table-responsive d-none d-md-block">
                        <table class="table table-hover table-align-middle table-light mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th scope="col">{{ __('account-security.sessions.page.title') }}</th>
                                    <th scope="col">IP</th>
                                    <th scope="col">{{ __('account-security.sessions.page.last_activity', ['date' => '']) }}</th>
                                    <th scope="col" class="text-end"><span class="visually-hidden">Actions</span></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($sessions as $session)
                                    @php
                                        $isCurrent = $session->id === $currentSessionId;
                                        $deviceLabel = $session->deviceLabel();
                                    @endphp
                                    <tr data-testid="session-row" data-session-id="{{ $session->id }}"
                                        class="{{ $isCurrent ? 'table-active' : '' }}">
                                        <td>
                                            <strong>{{ $deviceLabel }}</strong>
                                            @if ($isCurrent)
                                                <span data-testid="current-session-badge"
                                                      class="badge bg-success ms-2">
                                                    {{ __('account-security.sessions.page.this_device') }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="small text-muted">{{ $session->ip_address ?? '—' }}</td>
                                        <td class="small text-muted">
                                            {{ optional($session->last_activity_at)->diffForHumans() ?? '—' }}
                                        </td>
                                        <td class="text-end">
                                            @if (! $isCurrent)
                                                <button type="button" class="btn btn-sm btn-outline-danger"
                                                        aria-label="{{ __('account-security.sessions.actions.revoke') }} {{ $deviceLabel }}"
                                                        data-bs-toggle="modal" data-bs-target="#revoke-session-{{ $session->id }}">
                                                    {{ __('account-security.sessions.actions.revoke') }}
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- Mobile card stack (< md) --}}
                    <div class="d-md-none">
                        @foreach ($sessions as $session)
                            @php
                                $isCurrent = $session->id === $currentSessionId;
                                $deviceLabel = $session->deviceLabel();
                            @endphp
                            <div class="border rounded p-3 mb-2 {{ $isCurrent ? 'bg-light' : '' }}">
                                <div class="fw-bold mb-2 d-flex flex-wrap gap-2 align-items-center">
                                    <span>{{ $deviceLabel }}</span>
                                    @if ($isCurrent)
                                        <span class="badge bg-success">
                                            {{ __('account-security.sessions.page.this_device') }}
                                        </span>
                                    @endif
                                </div>
                                <div class="small text-muted mb-1">IP : {{ $session->ip_address ?? '—' }}</div>
                                <div class="small text-muted mb-2">
                                    {{ optional($session->last_activity_at)->diffForHumans() ?? '—' }}
                                </div>
                                @if (! $isCurrent)
                                    <button type="button" class="btn btn-sm btn-outline-danger w-100"
                                            aria-label="{{ __('account-security.sessions.actions.revoke') }} {{ $deviceLabel }}"
                                            data-bs-toggle="modal" data-bs-target="#revoke-session-{{ $session->id }}">
                                        {{ __('account-security.sessions.actions.revoke') }}
                                    </button>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

    </div>
</div>

@if ($hasOtherSessions)
    <x-account-security.confirm-modal
        id="revoke-all-sessions"
        :title="__('account-security.confirm.revoke_all_sessions.title')"
        :body="__('account-security.confirm.revoke_all_sessions.body')"
        :action="route('account.security.sessions.destroy-others', ['partnerSlug' => $partner->slug])"
        method="POST"
        :confirm-label="__('account-security.confirm.revoke_all_sessions.confirm')"
    />

    @foreach ($otherSessions as $session)
        <x-account-security.confirm-modal
            :id="'revoke-session-'.$session->id"
            :title="__('account-security.confirm.revoke_session.title')"
            :body="__('account-security.confirm.revoke_session.body', ['label' => $session->deviceLabel()])"
            :action="route('account.security.sessions.destroy', ['partnerSlug' => $partner->slug, 'session' => $session->id])"
            method="DELETE"
            :confirm-label="__('account-security.confirm.revoke_session.confirm')"
        />
    @endforeach
@endif

@endsection