@extends('root')
@section('title', 'Agent Sessions')

@section('content')
<div class="container-fluid">
    {{-- Page Header --}}
    <div class="card bg-light-info shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Agent Sessions</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a class="text-muted" href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Agent Sessions</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3">
                    <div class="text-center mb-n5">
                        <img src="{{ asset('imgs/chat.png') }}" alt="" class="img-fluid mb-n4" style="max-height: 100px;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Summary Cards --}}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-white text-success" style="width:50px;height:50px;">
                            <i class="ti ti-device-mobile fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-white">Active Mobile</h6>
                            <h3 class="mb-0 text-white" id="active_mobile_count">-</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-white text-primary" style="width:50px;height:50px;">
                            <i class="ti ti-device-desktop fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-white">Active Web</h6>
                            <h3 class="mb-0 text-white" id="active_web_count">-</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-warning text-warning" style="width:50px;height:50px;">
                            <i class="ti ti-users fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 fw-semibold">Total Sessions</h6>
                            <h3 class="mb-0 fw-semibold" id="total_sessions_count">-</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-secondary text-secondary" style="width:50px;height:50px;">
                            <i class="ti ti-history fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 fw-semibold">Inactive Sessions</h6>
                            <h3 class="mb-0 fw-semibold" id="inactive_sessions_count">-</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filter & Table --}}
    <div class="card">
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <label class="form-label">Client</label>
                    <select class="form-select" id="filter_client">
                        <option value="">Semua Client</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}">{{ $client->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Platform</label>
                    <select class="form-select" id="filter_platform">
                        <option value="">Semua</option>
                        <option value="mobile">Mobile</option>
                        <option value="web">Web</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="filter_status">
                        <option value="">Semua</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button class="btn btn-primary me-2" id="btn_filter"><i class="ti ti-filter me-1"></i>Filter</button>
                    <button class="btn btn-outline-secondary" id="btn_reset"><i class="ti ti-refresh me-1"></i>Reset</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover" id="sessionsTable" style="width:100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Agent/User</th>
                            <th>Client</th>
                            <th>Platform</th>
                            <th>Device ID</th>
                            <th>Status</th>
                            <th>Last Active</th>
                            <th>Login At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Detail Modal --}}
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-info-circle me-2"></i>Session Detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm table-borderless">
                            <tr><th width="40%">Session ID</th><td id="detail_id">-</td></tr>
                            <tr><th>Agent/User</th><td id="detail_agent">-</td></tr>
                            <tr><th>Client</th><td id="detail_client">-</td></tr>
                            <tr><th>Platform</th><td id="detail_platform">-</td></tr>
                            <tr><th>Device ID</th><td id="detail_device_id">-</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm table-borderless">
                            <tr><th width="40%">Token ID</th><td id="detail_token">-</td></tr>
                            <tr><th>Status</th><td id="detail_status">-</td></tr>
                            <tr><th>Login At</th><td id="detail_login_at">-</td></tr>
                            <tr><th>Last Active</th><td id="detail_last_active">-</td></tr>
                            <tr><th>Logout At</th><td id="detail_logout_at">-</td></tr>
                            <tr><th>Logout Reason</th><td id="detail_logout_reason">-</td></tr>
                        </table>
                    </div>
                </div>
                <hr>
                <h6 class="fw-semibold"><i class="ti ti-server me-2"></i>WABA Pools (Client)</h6>
                <div id="detail_waba_pools" class="mb-0">-</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-danger" id="modal_force_logout" style="display:none;"><i class="ti ti-power me-1"></i>Force Logout</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    // Initialize DataTable
    var table = $('#sessionsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.agent-sessions.data") }}',
            data: function(d) {
                d.client_id = $('#filter_client').val();
                d.platform = $('#filter_platform').val();
                d.status = $('#filter_status').val();
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'agent_name', name: 'agent_name', orderable: false },
            { data: 'client_name', name: 'client_name', orderable: false },
            { data: 'platform_badge', name: 'platform' },
            { data: 'device_id', name: 'device_id' },
            { data: 'status_badge', name: 'is_active' },
            { data: 'last_active_formatted', name: 'last_active_at' },
            { data: 'login_at_formatted', name: 'login_at' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[6, 'desc']],
        drawCallback: function(settings) {
            // Update summary counts
            var json = settings.json;
            if (json) {
                // These would need a custom endpoint, using recordsTotal for now
                $('#total_sessions_count').text(json.recordsTotal);
            }
        }
    });

    // Filter buttons
    $('#btn_filter').on('click', function() {
        table.ajax.reload();
    });

    $('#btn_reset').on('click', function() {
        $('#filter_client').val('');
        $('#filter_platform').val('');
        $('#filter_status').val('');
        table.ajax.reload();
    });

    // Detail button
    $(document).on('click', '.btn-detail', function() {
        var sessionId = $(this).data('id');
        $.get('{{ url("admin/agent-sessions") }}/' + sessionId, function(res) {
            if (res.success) {
                var d = res.data;
                $('#detail_id').text(d.id);
                $('#detail_agent').text(d.agent_name);
                $('#detail_client').text(d.client_name);
                $('#detail_platform').text(d.platform);
                $('#detail_device_id').text(d.device_id || '-');
                $('#detail_token').text(d.token_masked);
                $('#detail_status').html(d.is_active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-secondary">Inactive</span>');
                $('#detail_login_at').text(d.login_at || '-');
                $('#detail_last_active').text(d.last_active_at || '-');
                $('#detail_logout_at').text(d.logout_at || '-');
                $('#detail_logout_reason').text(d.logout_reason || '-');

                // WABA Pools
                var wabaHtml = '-';
                if (d.waba_pools && Object.keys(d.waba_pools).length > 0) {
                    wabaHtml = '<ul class="list-unstyled mb-0">';
                    for (var phone in d.waba_pools) {
                        wabaHtml += '<li><i class="ti ti-phone me-1"></i>' + phone + ' (ID: ' + d.waba_pools[phone] + ')</li>';
                    }
                    wabaHtml += '</ul>';
                }
                $('#detail_waba_pools').html(wabaHtml);

                // Show/hide force logout button
                if (d.is_active) {
                    $('#modal_force_logout').show().data('id', d.id);
                } else {
                    $('#modal_force_logout').hide();
                }

                $('#detailModal').modal('show');
            }
        });
    });

    // Force logout (from table)
    $(document).on('click', '.btn-force-logout', function() {
        var sessionId = $(this).data('id');
        confirmForceLogout(sessionId);
    });

    // Force logout (from modal)
    $('#modal_force_logout').on('click', function() {
        var sessionId = $(this).data('id');
        $('#detailModal').modal('hide');
        confirmForceLogout(sessionId);
    });

    function confirmForceLogout(sessionId) {
        Swal.fire({
            title: 'Force Logout?',
            text: 'Session akan diputus dan token akan direvoke. Agent harus login ulang.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonText: 'Batal',
            confirmButtonText: 'Ya, Putuskan!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url("admin/agent-sessions") }}/' + sessionId,
                    type: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function(res) {
                        if (res.success) {
                            toastr.success(res.message);
                            table.ajax.reload();
                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error('Gagal memutus session.');
                    }
                });
            }
        });
    }

    // Load summary stats
    function loadSummary() {
        // Quick summary using different filter params
        $.get('{{ route("admin.agent-sessions.data") }}', { status: 'active', platform: 'mobile', length: 0 }, function(res) {
            $('#active_mobile_count').text(res.recordsFiltered || 0);
        });
        $.get('{{ route("admin.agent-sessions.data") }}', { status: 'active', platform: 'web', length: 0 }, function(res) {
            $('#active_web_count').text(res.recordsFiltered || 0);
        });
        $.get('{{ route("admin.agent-sessions.data") }}', { status: 'inactive', length: 0 }, function(res) {
            $('#inactive_sessions_count').text(res.recordsFiltered || 0);
        });
    }
    loadSummary();
});
</script>
@endpush