@extends('admin.template_LFv2')

@section('content')
<style>
    #admin-sesiones-show .btn-sesion {
        min-height: 38px;
        padding: 0.375rem 0.875rem;
        font-size: 0.9375rem;
        line-height: 1.4;
        border-radius: 0.375rem;
    }

    #admin-sesiones-show .btn-outline-danger.btn-sesion:hover:not(:disabled),
    #admin-sesiones-show .btn-outline-danger.btn-sesion:focus-visible:not(:disabled) {
        background-color: rgba(220, 53, 69, 0.08);
        color: #dc3545;
        border-color: #dc3545;
    }

    #admin-sesiones-show .btn-outline-danger.btn-sesion:focus-visible {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    #admin-sesiones-show a.volver-listado {
        color: #0d6efd;
        text-decoration: none;
        font-weight: 500;
    }

    #admin-sesiones-show a.volver-listado:hover,
    #admin-sesiones-show a.volver-listado:focus-visible {
        text-decoration: underline;
    }

    #admin-sesiones-show .bloque-seguridad {
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #dee2e6;
    }
</style>

<div id="admin-sesiones-show">
    <script type="application/json" id="admin-sesiones-show-config">@json($pageConfig)</script>

    <p class="destacado-descripcion mb-4">
        Gestione las sesiones web activas de este usuario. El motivo del cierre es obligatorio.
    </p>

    <div data-role="sesiones-alerts">
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <div class="row mb-4">
        <div class="col-md-4">
            <p class="descripcion mb-1">Usuario</p>
            <p class="destacado-descripcion mb-0">{{ $usuario->displayName() }}</p>
        </div>
        <div class="col-md-4">
            <p class="descripcion mb-1">Documento</p>
            <p class="destacado-descripcion mb-0">{{ $usuario->pasaporte }}</p>
        </div>
        <div class="col-md-4">
            <p class="descripcion mb-1">Total de sesiones activas</p>
            <p class="destacado-descripcion mb-0">{{ $total }}</p>
        </div>
    </div>

    <div class="row">
        <hr class="line" />
    </div>

    <div class="table_movil">
        <table class="table table-striped mt-4 mb-0">
            <thead class="table-dark">
                <tr>
                    <th scope="col">ID sesión</th>
                    <th scope="col">IP</th>
                    <th scope="col">Navegador / dispositivo</th>
                    <th scope="col">Última actividad</th>
                    <th scope="col" class="text-center">Estado</th>
                    <th scope="col" class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($sessions as $row)
                    <tr data-session-id="{{ $row->id }}">
                        <td class="small text-break">{{ \Illuminate\Support\Str::limit($row->id, 24) }}</td>
                        <td>{{ $row->ip_address ?: '—' }}</td>
                        <td title="{{ $row->user_agent }}">{{ $row->ua_label }}</td>
                        <td>{{ $row->last_activity_label }}</td>
                        <td class="text-center">
                            @if ($row->is_current)
                                <span class="badge bg-secondary">Sesión actual</span>
                            @else
                                <span class="badge bg-success">Activa</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if ($row->is_current)
                                <span class="text-muted" aria-hidden="true">—</span>
                                <span class="visually-hidden">Sin acciones</span>
                            @else
                                <button
                                    type="button"
                                    class="btn btn-outline-danger btn-sesion"
                                    data-role="cerrar-sesion-admin"
                                    data-mode="one"
                                    data-url="{{ route('admin.tools.sesiones.destroy', ['usuario' => $usuario, 'sessionId' => $row->id]) }}"
                                    data-session-id="{{ $row->id }}"
                                    data-ip="{{ $row->ip_address }}"
                                    data-last-activity="{{ $row->last_activity_label }}"
                                >
                                    Cerrar sesión
                                </button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">
                            <i class="bi bi-info-circle me-2"></i>
                            No hay sesiones activas registradas.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="bloque-seguridad">
        <h3 class="destacado h5 mb-2">Seguridad de la cuenta</h3>
        <p class="destacado-descripcion mb-3">
            @if ($managingSelf)
                Cierre todas las sesiones web activas, excepto la sesión que está utilizando actualmente.
            @else
                Cierre todas las sesiones web activas de este usuario.
            @endif
        </p>
        <button
            type="button"
            class="btn btn-danger btn-sesion"
            data-role="cerrar-sesion-admin"
            data-mode="all"
            data-url="{{ route('admin.tools.sesiones.destroy-all', $usuario) }}"
            @disabled($closableSessionsCount < 1)
        >
            @if ($managingSelf)
                Cerrar todas las otras sesiones
            @else
                Cerrar todas las sesiones
            @endif
        </button>
        <p class="text-muted small mt-2 mb-0">
            <i class="bi bi-info-circle"></i> Aplica solo a sesiones web activas. Motivo obligatorio.
        </p>
    </div>

    <div class="modal fade" id="modal-cerrar-sesion-admin" tabindex="-1" role="dialog" aria-labelledby="modal-cerrar-sesion-admin-titulo" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal-cerrar-sesion-admin-titulo" data-role="modal-titulo">Confirmar cierre de sesión</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-3 d-none" data-role="modal-mensaje"></p>

                    <div class="alert alert-light border mb-3" data-role="sesion-resumen">
                        <div class="mb-1"><strong>Usuario:</strong> {{ $usuario->displayName() }}</div>
                        <div class="mb-1" data-role="resumen-id-wrap"><strong>ID sesión:</strong> <span data-role="resumen-id" class="small text-break"></span></div>
                        <div class="mb-1" data-role="resumen-ip-wrap"><strong>IP:</strong> <span data-role="resumen-ip"></span></div>
                        <div class="mb-0" data-role="resumen-actividad-wrap"><strong>Última actividad:</strong> <span data-role="resumen-actividad"></span></div>
                    </div>

                    <div class="mb-0">
                        <label for="motivo-cierre-sesion-admin" class="form-label">Motivo <span class="text-danger">*</span></label>
                        <textarea
                            id="motivo-cierre-sesion-admin"
                            class="form-control"
                            rows="3"
                            maxlength="250"
                            required
                            placeholder="Indique el motivo del cierre (obligatorio)"
                            data-role="motivo"
                        ></textarea>
                        <small class="text-muted">Máximo 250 caracteres.</small>
                        <div class="text-danger small mt-1 d-none" data-role="motivo-error"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sesion" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-danger btn-sesion" data-role="confirmar-cierre">
                        Confirmar cierre
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection