@extends('layouts.app')

@section('title', 'User Connection Logs - ISP ERP System')

@section('page-title', 'User Connection Logs Management')

@section('styles')
<style>
    /* Make everything bigger */
    h3 {
        font-size: 1.4rem !important;
    }
    h4 {
        font-size: 1.3rem !important;
    }
    h5 {
        font-size: 1.15rem !important;
    }
    p, span, small {
        font-size: 1rem !important;
    }
    
    /* Reduce font size in header row */
    .container-fluid > .row:first-child h3 {
        font-size: 1.1rem !important;
    }
    
    .container-fluid > .row:first-child p {
        font-size: 0.8rem !important;
    }
    
    /* Reduce font size in statistics cards row */
    .container-fluid > .row:nth-child(2) h3,
    .container-fluid > .row:nth-child(2) .fs-4 {
        font-size: 1.1rem !important;
    }
    
    .container-fluid > .row:nth-child(2) p,
    .container-fluid > .row:nth-child(2) .small {
        font-size: 0.75rem !important;
    }
    
    /* Reduce font size in filters row */
    .container-fluid > .row:nth-child(3) h4 {
        font-size: 1rem !important;
    }
    
    .container-fluid > .row:nth-child(3) p,
    .container-fluid > .row:nth-child(3) span,
    .container-fluid > .row:nth-child(3) label {
        font-size: 0.85rem !important;
    }
    
    /* Card padding and margins */
    .custom-card {
        margin-bottom: 1rem !important;
    }
    .custom-card-header {
        padding: 0.75rem 1rem !important;
    }
    .custom-card-body {
        padding: 0.85rem 1rem !important;
    }
    
    /* Reduce height of rows */
    .container-fluid > .row:first-child .custom-card-header {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    .container-fluid > .row:nth-child(2) .custom-card-body.py-3 {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }
    
    .container-fluid > .row:nth-child(3) .custom-card-header {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    .container-fluid > .row:nth-child(3) .custom-card-body {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    
    /* Table cell padding */
    .table th,
    .table td {
        padding: 0.65rem 0.75rem !important;
        font-size: 1rem !important;
    }
    
    /* Reduce font size in table */
    .custom-table th {
        font-size: 0.75rem !important;
    }
    
    .custom-table td {
        font-size: 0.8rem !important;
    }
    
    .custom-table .badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Row margins */
    .row {
        margin-bottom: 0 !important;
    }
    .mb-4 {
        margin-bottom: 0 !important;
    }
    .mb-3 {
        margin-bottom: 0.1rem !important;
    }
    
    /* Form controls */
    .form-select,
    .form-control {
        padding: 0.6rem 0.8rem !important;
        font-size: 1rem !important;
    }
    
    /* Make Filters & Search select fields smaller */
    .container-fluid > .row:nth-child(3) .form-select,
    .container-fluid > .row:nth-child(3) .form-control {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.85rem !important;
        height: auto !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-network-wired me-2"></i>
                                User Connection Logs
                            </h3>
                            <p class="mb-0 opacity-75">Track user connections and disconnections from MikroTik servers</p>
                        </div>
                        <div class="d-flex gap-2 align-items-center">
                            <a href="{{ route('user-connection-logs.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add Log
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4" id="statisticsCards">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-list text-primary fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-primary fs-4" id="statTotalLogs">{{ $totalLogs }}</h3>
                            <p class="mb-0 text-muted small">Total Logs</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-plug text-success fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-success fs-4" id="statTotalConnects">{{ $totalConnects }}</h3>
                            <p class="mb-0 text-muted small">Connections</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-unlink text-warning fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-warning fs-4" id="statTotalDisconnects">{{ $totalDisconnects }}</h3>
                            <p class="mb-0 text-muted small">Disconnections</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card">
                <div class="custom-card-body py-3">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-users text-info fa-lg me-4"></i>
                        <div class="flex-grow-1 text-center">
                            <h3 class="mb-0 text-info fs-4" id="statUniqueUsers">{{ $uniqueUsers }}</h3>
                            <p class="mb-0 text-muted small">Unique Users</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-filter me-2"></i>
                        Filters & Search
                    </h4>
                </div>
                <div class="custom-card-body">
                    <form method="GET" action="{{ route('user-connection-logs.index') }}" class="d-flex gap-2 align-items-end">
                        <div class="flex-grow-1">
                            <select class="form-select" id="action" name="action">
                                <option value="">All Actions</option>
                                <option value="connect" {{ request('action') == 'connect' ? 'selected' : '' }}>Connect</option>
                                <option value="disconnect" {{ request('action') == 'disconnect' ? 'selected' : '' }}>Disconnect</option>
                            </select>
                        </div>
                        <div class="flex-grow-1">
                            <select class="form-select" id="mikrotik_server_id" name="mikrotik_server_id">
                                <option value="">All Servers</option>
                                @foreach($servers as $server)
                                    <option value="{{ $server->id }}" {{ request('mikrotik_server_id') == $server->id ? 'selected' : '' }}>
                                        {{ $server->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="flex-grow-1">
                            <input type="text" class="form-control" id="search" name="search" 
                                   value="{{ request('search') }}" placeholder="Search by username, IP, session ID...">
                        </div>
                        <div class="flex-grow-1">
                            <input type="date" class="form-control" id="date_from" name="date_from" 
                                   value="{{ request('date_from') }}" placeholder="From Date">
                        </div>
                        <div class="flex-grow-1">
                            <input type="date" class="form-control" id="date_to" name="date_to" 
                                   value="{{ request('date_to') }}" placeholder="To Date">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-filter me-2"></i>Filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Connection Logs List -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-list me-2"></i>
                            All Connection Logs
                        </h4>
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-white small">Show</span>
                            <form method="GET" action="{{ route('user-connection-logs.index') }}" id="perPageForm" class="d-inline">
                                @if(request('action'))
                                    <input type="hidden" name="action" value="{{ request('action') }}">
                                @endif
                                @if(request('mikrotik_server_id'))
                                    <input type="hidden" name="mikrotik_server_id" value="{{ request('mikrotik_server_id') }}">
                                @endif
                                @if(request('search'))
                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                @endif
                                @if(request('date_from'))
                                    <input type="hidden" name="date_from" value="{{ request('date_from') }}">
                                @endif
                                @if(request('date_to'))
                                    <input type="hidden" name="date_to" value="{{ request('date_to') }}">
                                @endif
                                <select name="per_page" id="perPageSelect" class="form-select form-select-sm" style="width: auto; display: inline-block; color: white; background-color: transparent; border-color: rgba(255,255,255,0.5);" onchange="document.getElementById('perPageForm').submit();">
                                    @php
                                        $currentPerPage = request('per_page', 100);
                                        $isAllSelected = ($currentPerPage == 9999 || $currentPerPage == 'all' || $currentPerPage == 'All');
                                    @endphp
                                    <option value="10" {{ $currentPerPage == 10 ? 'selected' : '' }} style="color: #000;">10</option>
                                    <option value="25" {{ $currentPerPage == 25 ? 'selected' : '' }} style="color: #000;">25</option>
                                    <option value="50" {{ $currentPerPage == 50 ? 'selected' : '' }} style="color: #000;">50</option>
                                    <option value="100" {{ $currentPerPage == 100 ? 'selected' : '' }} style="color: #000;">100</option>
                                    <option value="200" {{ $currentPerPage == 200 ? 'selected' : '' }} style="color: #000;">200</option>
                                    <option value="300" {{ $currentPerPage == 300 ? 'selected' : '' }} style="color: #000;">300</option>
                                    <option value="all" {{ $isAllSelected ? 'selected' : '' }} style="color: #000;">All</option>
                                </select>
                            </form>
                            <span class="text-white small">entries</span>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <div id="logsTableContainer">
                        @if($logs->count() > 0)
                            <div class="table-responsive">
                                <table class="table custom-table">
                                    <thead>
                                        <tr>
                                            <th>SL</th>
                                            <th>Username</th>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Server</th>
                                            <th>IP Address</th>
                                            <th>Session ID</th>
                                            <th>Connected At</th>
                                            <th>Disconnected At</th>
                                            <th>Uptime</th>
                                            <th>Duration</th>
                                            <th>Data (In/Out)</th>
                                            <th>Created</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="logsTableBody">
                                        @foreach($logs as $log)
                                            <tr>
                                                <td>
                                                    <span class="badge bg-secondary">
                                                        {{ ($logs->currentPage() - 1) * $logs->perPage() + $loop->iteration }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <strong>{{ $log->username }}</strong>
                                                    @if($log->client)
                                                        <br><small class="text-muted">{{ $log->client->name ?? '' }}</small>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->action == 'connect')
                                                        <span class="badge bg-success">
                                                            <i class="fas fa-plug me-1"></i>Connect
                                                        </span>
                                                    @else
                                                        <span class="badge bg-warning">
                                                            <i class="fas fa-unlink me-1"></i>Disconnect
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @php
                                                        // Determine status for connect logs
                                                        $status = 'N/A';
                                                        $statusBadge = 'secondary';
                                                        
                                                        if ($log->action == 'connect') {
                                                            // Check if this connect log has a disconnect log
                                                            $hasDisconnect = false;
                                                            if ($log->session_id) {
                                                                $hasDisconnect = \App\Models\UserConnectionLog::where('username', $log->username)
                                                                    ->where('session_id', $log->session_id)
                                                                    ->where('action', 'disconnect')
                                                                    ->where('created_at', '>', $log->created_at)
                                                                    ->exists();
                                                            }
                                                            
                                                            // Check if user is currently active in ANY MikroTik server (has live uptime data)
                                                            // Try exact match first, then case-insensitive match
                                                            $isActive = false;
                                                            if (isset($liveUptimeData) && is_array($liveUptimeData)) {
                                                                // Try exact match first
                                                                if (isset($liveUptimeData[$log->username])) {
                                                                    $isActive = true;
                                                                } else {
                                                                    // Try case-insensitive match
                                                                    foreach ($liveUptimeData as $username => $uptime) {
                                                                        if (strtolower($username) === strtolower($log->username)) {
                                                                            $isActive = true;
                                                                            break;
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                            
                                                            if ($isActive && !$hasDisconnect) {
                                                                // User is currently active in at least one server
                                                                $status = 'Active';
                                                                $statusBadge = 'success';
                                                            } elseif (!$hasDisconnect) {
                                                                // User was connected but now disconnected (no disconnect log, no live uptime from any server)
                                                                $status = 'Disconnected';
                                                                $statusBadge = 'danger';
                                                            } else {
                                                                // Has disconnect log
                                                                $status = 'Disconnected';
                                                                $statusBadge = 'warning';
                                                            }
                                                        } else {
                                                            // Disconnect action
                                                            $status = 'Disconnected';
                                                            $statusBadge = 'warning';
                                                        }
                                                    @endphp
                                                    @if($status != 'N/A')
                                                        <span class="badge bg-{{ $statusBadge }}">
                                                            @if($status == 'Active')
                                                                <i class="fas fa-circle-check me-1"></i>
                                                            @else
                                                                <i class="fas fa-circle-xmark me-1"></i>
                                                            @endif
                                                            {{ $status }}
                                                        </span>
                                                    @else
                                                        <span class="text-muted">{{ $status }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->mikrotikServer)
                                                        <span class="badge bg-info">{{ $log->mikrotikServer->name }}</span>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->ip_address)
                                                        <code class="text-primary">{{ $log->ip_address }}</code>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->session_id)
                                                        <small><code>{{ $log->session_id }}</code></small>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->connected_at)
                                                        <small>{{ $log->connected_at->format('M d, Y H:i:s') }}</small>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->disconnected_at)
                                                        <small>{{ $log->disconnected_at->format('M d, Y H:i:s') }}</small>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @php
                                                        // Check if this connect log has a disconnect log
                                                        $hasDisconnect = false;
                                                        if ($log->action == 'connect' && $log->session_id) {
                                                            $hasDisconnect = \App\Models\UserConnectionLog::where('username', $log->username)
                                                                ->where('session_id', $log->session_id)
                                                                ->where('action', 'disconnect')
                                                                ->where('created_at', '>', $log->created_at)
                                                                ->exists();
                                                        }
                                                        
                                                        // Check if we have live uptime data from MikroTik
                                                        $mikrotikUptime = isset($liveUptimeData) && isset($liveUptimeData[$log->username]) ? $liveUptimeData[$log->username] : null;
                                                        
                                                        if ($log->action == 'connect' && !$hasDisconnect && $mikrotikUptime) {
                                                            // Use MikroTik's actual uptime string format (e.g., "1d2h3m4s")
                                                            // Keep the original format without converting days to hours
                                                            $uptime = $mikrotikUptime;
                                                        } elseif ($log->action == 'connect' && !$hasDisconnect && $log->connected_at) {
                                                            // Fallback: calculate from connected_at timestamp
                                                            $uptimeSeconds = now()->diffInSeconds($log->connected_at);
                                                            $totalHours = floor($uptimeSeconds / 3600);
                                                            $minutes = floor(($uptimeSeconds % 3600) / 60);
                                                            $seconds = $uptimeSeconds % 60;
                                                            if ($totalHours > 0) {
                                                                $uptime = sprintf('%dh %dm %ds', $totalHours, $minutes, $seconds);
                                                            } elseif ($minutes > 0) {
                                                                $uptime = sprintf('%dm %ds', $minutes, $seconds);
                                                            } else {
                                                                $uptime = sprintf('%ds', $seconds);
                                                            }
                                                        }
                                                    @endphp
                                                    @if($log->action == 'connect' && !$hasDisconnect && isset($uptime))
                                                        @if($mikrotikUptime)
                                                            <small class="text-success"><strong data-mikrotik-uptime="{{ $mikrotikUptime }}" data-log-id="{{ $log->id }}">{{ $uptime }}</strong></small>
                                                        @else
                                                            <small class="text-success"><strong data-uptime-base="{{ $log->connected_at->timestamp }}" data-log-id="{{ $log->id }}">{{ $uptime }}</strong></small>
                                                        @endif
                                                    @elseif($log->duration_seconds)
                                                        <small>{{ $log->formatted_duration }}</small>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->duration_seconds)
                                                        <small>{{ $log->formatted_duration }}</small>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($log->bytes_in || $log->bytes_out)
                                                        <small>
                                                            <strong>In:</strong> {{ number_format($log->bytes_in ?? 0) }}<br>
                                                            <strong>Out:</strong> {{ number_format($log->bytes_out ?? 0) }}
                                                        </small>
                                                    @else
                                                        <span class="text-muted">N/A</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <small class="text-muted">
                                                        {{ $log->created_at->format('M d, Y H:i') }}
                                                    </small>
                                                </td>
                                                <td>
                                                    <div class="d-flex gap-2">
                                                        <a href="{{ route('user-connection-logs.show', $log) }}" 
                                                           class="btn btn-sm btn-outline-info" 
                                                           data-bs-toggle="tooltip" title="View Details">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                        <a href="{{ route('user-connection-logs.edit', $log) }}" 
                                                           class="btn btn-sm btn-outline-primary" 
                                                           data-bs-toggle="tooltip" title="Edit">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        <button class="btn btn-sm btn-outline-danger" 
                                                                onclick="deleteLog({{ $log->id }})"
                                                                data-bs-toggle="tooltip" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination -->
                            <div class="d-flex justify-content-center mt-4" id="paginationContainer">
                                {!! $logs->links() !!}
                            </div>
                        @else
                            <div class="text-center py-5" id="emptyState">
                                <div class="text-muted mb-3">
                                    <i class="fas fa-network-wired fa-3x"></i>
                                </div>
                                <h5 class="text-muted">No connection logs found</h5>
                                <p class="text-muted">Start by creating your first connection log or run the monitoring command.</p>
                                <a href="{{ route('user-connection-logs.create') }}" class="btn btn-primary btn-custom">
                                    <i class="fas fa-plus me-2"></i>Create Connection Log
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Confirm Deletion
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this connection log?</p>
                <p class="text-muted">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Log</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
let autoRefreshInterval = null;
let countdownInterval = null;
let countdownSeconds = 30;

// Update live uptime for active connections every second
let uptimeUpdateInterval = null;

function startUptimeUpdates() {
    stopUptimeUpdates();
    
    const startTime = Date.now();
    const mikrotikUptimeElements = document.querySelectorAll('[data-mikrotik-uptime]');
    const baseUptimeMap = new Map();
    
    // Store initial MikroTik uptime values (in seconds)
    mikrotikUptimeElements.forEach(function(el) {
        const uptimeStr = el.getAttribute('data-mikrotik-uptime');
        if (uptimeStr) {
            // Parse MikroTik uptime string and convert to total seconds
            const totalSeconds = parseMikrotikUptime(uptimeStr);
            baseUptimeMap.set(el, totalSeconds);
        }
    });
    
    uptimeUpdateInterval = setInterval(function() {
        // Update MikroTik uptime elements (increment from base)
        mikrotikUptimeElements.forEach(function(el) {
            const baseSeconds = baseUptimeMap.get(el);
            if (baseSeconds !== undefined) {
                const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
                const currentUptimeSeconds = baseSeconds + elapsedSeconds;
                // Format in MikroTik style: "1d2h3m4s"
                el.textContent = formatMikrotikUptime(currentUptimeSeconds);
            }
        });
        
        // Update timestamp-based uptime elements
        const uptimeElements = document.querySelectorAll('[data-uptime-base]');
        uptimeElements.forEach(function(el) {
            const baseTimestamp = parseInt(el.getAttribute('data-uptime-base'));
            if (!baseTimestamp || isNaN(baseTimestamp)) return;
            
            const now = Math.floor(Date.now() / 1000);
            const uptimeSeconds = now - baseTimestamp;
            
            if (uptimeSeconds >= 0) {
                // formatDuration already converts days to hours
                el.textContent = formatDuration(uptimeSeconds);
            }
        });
    }, 1000);
}

function stopUptimeUpdates() {
    if (uptimeUpdateInterval) {
        clearInterval(uptimeUpdateInterval);
        uptimeUpdateInterval = null;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    initializeTooltips();
    initializeAutoRefresh();
    startUptimeUpdates();
});

function initializeAutoRefresh() {
    const autoRefreshToggle = document.getElementById('autoRefreshToggle');
    const refreshCountdown = document.getElementById('refreshCountdown');
    
    // Check if auto-refresh should be enabled (default: enabled)
    const autoRefreshEnabled = localStorage.getItem('userConnectionLogsAutoRefresh');
    if (autoRefreshEnabled === 'false') {
        autoRefreshToggle.checked = false;
    }
    
    if (autoRefreshToggle.checked) {
        startAutoRefresh();
    }
    
    // Toggle auto-refresh
    autoRefreshToggle.addEventListener('change', function() {
        if (this.checked) {
            startAutoRefresh();
            localStorage.setItem('userConnectionLogsAutoRefresh', 'true');
        } else {
            stopAutoRefresh();
            localStorage.setItem('userConnectionLogsAutoRefresh', 'false');
        }
    });
}

function startAutoRefresh() {
    stopAutoRefresh(); // Clear any existing interval
    
    countdownSeconds = 10; // Refresh every 10 seconds for live updates
    updateCountdown();
    
    countdownInterval = setInterval(function() {
        countdownSeconds--;
        updateCountdown();
        
        if (countdownSeconds <= 0) {
            refreshPage(false); // Don't show loader for auto-refresh
            countdownSeconds = 10; // Reset to 10 seconds
        }
    }, 1000);
}

function stopAutoRefresh() {
    if (countdownInterval) {
        clearInterval(countdownInterval);
        countdownInterval = null;
    }
    document.getElementById('refreshCountdown').textContent = '--';
}

function updateCountdown() {
    const refreshCountdown = document.getElementById('refreshCountdown');
    refreshCountdown.textContent = countdownSeconds + 's';
    
    // Change color when countdown is low
    if (countdownSeconds <= 5) {
        refreshCountdown.classList.remove('bg-secondary');
        refreshCountdown.classList.add('bg-warning');
    } else {
        refreshCountdown.classList.remove('bg-warning');
        refreshCountdown.classList.add('bg-secondary');
    }
}

function refreshPage(showLoader = true) {
    if (showLoader) {
        const refreshBtn = document.getElementById('refreshBtn');
        const icon = refreshBtn.querySelector('i');
        
        // Add spinning animation
        icon.classList.add('fa-spin');
        refreshBtn.disabled = true;
    }
    
    // Get current filters from URL
    const urlParams = new URLSearchParams(window.location.search);
    
    // Fetch data via AJAX
    fetch('{{ route("user-connection-logs.index") }}?' + urlParams.toString(), {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            updateStatistics(data.statistics);
            // Handle paginator structure - logs.data contains the array
            const logsArray = data.logs && data.logs.data ? data.logs.data : (data.logs || []);
            const pagination = data.pagination || (data.logs ? {
                current_page: data.logs.current_page,
                last_page: data.logs.last_page,
                per_page: data.logs.per_page,
                total: data.logs.total
            } : {});
            updateLogsTable(logsArray, pagination);
            updatePagination(pagination);
            
            // Re-initialize tooltips
            initializeTooltips();
        } else {
            console.error('Failed to refresh data:', data.message);
        }
    })
    .catch(error => {
        console.error('Error refreshing data:', error);
    })
    .finally(() => {
        if (showLoader) {
            const refreshBtn = document.getElementById('refreshBtn');
            const icon = refreshBtn.querySelector('i');
            icon.classList.remove('fa-spin');
            refreshBtn.disabled = false;
        }
        
                // Reset countdown
                if (document.getElementById('autoRefreshToggle').checked) {
                    countdownSeconds = 10;
                    updateCountdown();
                }
    });
}

function updateStatistics(stats) {
    document.getElementById('statTotalLogs').textContent = stats.totalLogs;
    document.getElementById('statTotalConnects').textContent = stats.totalConnects;
    document.getElementById('statTotalDisconnects').textContent = stats.totalDisconnects;
    document.getElementById('statUniqueUsers').textContent = stats.uniqueUsers;
}

function updateLogsTable(logs, pagination, data = null) {
    const tbody = document.getElementById('logsTableBody');
    const emptyState = document.getElementById('emptyState');
    
    if (!logs || logs.length === 0) {
        // Show empty state
        if (tbody) {
            tbody.parentElement.parentElement.style.display = 'none';
        }
        if (emptyState) {
            emptyState.style.display = 'block';
        }
        return;
    }
    
    // Hide empty state
    if (emptyState) {
        emptyState.style.display = 'none';
    }
    if (tbody && tbody.parentElement.parentElement) {
        tbody.parentElement.parentElement.style.display = 'table';
    }
    
    // Build table rows
    let html = '';
    logs.forEach((log, index) => {
        const sl = (pagination.current_page - 1) * pagination.per_page + index + 1;
        const actionBadge = log.action === 'connect' 
            ? '<span class="badge bg-success"><i class="fas fa-plug me-1"></i>Connect</span>'
            : '<span class="badge bg-warning"><i class="fas fa-unlink me-1"></i>Disconnect</span>';
        
        // Determine status - check across all MikroTik servers
        let statusBadge = '<span class="badge bg-secondary">N/A</span>';
        if (log.action === 'connect') {
            // Check if user has live uptime (active) in ANY server and no disconnect
            const liveUptime = data && data.live_uptime ? data.live_uptime : {};
            let isActive = false;
            
            // Try exact match first
            if (liveUptime[log.username]) {
                isActive = true;
            } else {
                // Try case-insensitive match
                for (const username in liveUptime) {
                    if (username.toLowerCase() === log.username.toLowerCase()) {
                        isActive = true;
                        break;
                    }
                }
            }
            
            const hasDisconnect = log.disconnected_at ? true : false;
            
            if (isActive && !hasDisconnect) {
                // User is active in at least one server
                statusBadge = '<span class="badge bg-success"><i class="fas fa-circle-check me-1"></i>Active</span>';
            } else if (!hasDisconnect) {
                // User was connected but now disconnected (no disconnect log, no live uptime from any server)
                statusBadge = '<span class="badge bg-danger"><i class="fas fa-circle-xmark me-1"></i>Disconnected</span>';
            } else {
                // Has disconnect log
                statusBadge = '<span class="badge bg-warning"><i class="fas fa-circle-xmark me-1"></i>Disconnected</span>';
            }
        } else {
            statusBadge = '<span class="badge bg-warning"><i class="fas fa-circle-xmark me-1"></i>Disconnected</span>';
        }
        
        const serverBadge = log.mikrotik_server 
            ? `<span class="badge bg-info">${log.mikrotik_server.name}</span>`
            : '<span class="text-muted">N/A</span>';
        
        const ipAddress = log.ip_address 
            ? `<code class="text-primary">${log.ip_address}</code>`
            : '<span class="text-muted">N/A</span>';
        
        const sessionId = log.session_id 
            ? `<small><code>${log.session_id}</code></small>`
            : '<span class="text-muted">N/A</span>';
        
        const connectedAt = log.connected_at 
            ? `<small>${formatDateTime(log.connected_at)}</small>`
            : '<span class="text-muted">N/A</span>';
        
        const disconnectedAt = log.disconnected_at 
            ? `<small>${formatDateTime(log.disconnected_at)}</small>`
            : '<span class="text-muted">N/A</span>';
        
        // Calculate uptime
        let uptime = '<span class="text-muted">N/A</span>';
        // Check if we have live uptime data from MikroTik (from AJAX response) - with case-insensitive matching
        let liveUptime = null;
        if (data && data.live_uptime) {
            // Try exact match first
            if (data.live_uptime[log.username]) {
                liveUptime = data.live_uptime[log.username];
            } else {
                // Try case-insensitive match
                for (const username in data.live_uptime) {
                    if (username.toLowerCase() === log.username.toLowerCase()) {
                        liveUptime = data.live_uptime[username];
                        break;
                    }
                }
            }
        }
        
        if (log.action === 'connect' && !log.disconnected_at && liveUptime) {
            // Use MikroTik's actual uptime string format (e.g., "1d2h3m4s")
            uptime = `<small class="text-success"><strong data-mikrotik-uptime="${liveUptime}" data-log-id="${log.id}">${liveUptime}</strong></small>`;
        } else if (log.action === 'connect' && !log.disconnected_at && log.connected_at) {
            // Fallback: calculate from connected_at timestamp
            const connectedTime = new Date(log.connected_at);
            const now = new Date();
            const uptimeSeconds = Math.floor((now - connectedTime) / 1000);
            if (uptimeSeconds >= 0) {
                uptime = `<small class="text-success"><strong data-uptime-base="${Math.floor(connectedTime.getTime() / 1000)}" data-log-id="${log.id}">${formatDuration(uptimeSeconds)}</strong></small>`;
            } else {
                uptime = '<span class="text-muted">N/A</span>';
            }
        } else if (log.duration_seconds) {
            uptime = `<small>${formatDuration(log.duration_seconds)}</small>`;
        }
        
        const duration = log.duration_seconds 
            ? `<small>${formatDuration(log.duration_seconds)}</small>`
            : '<span class="text-muted">N/A</span>';
        
        const dataInfo = (log.bytes_in || log.bytes_out)
            ? `<small><strong>In:</strong> ${numberFormat(log.bytes_in || 0)}<br><strong>Out:</strong> ${numberFormat(log.bytes_out || 0)}</small>`
            : '<span class="text-muted">N/A</span>';
        
        const createdAt = formatDateTime(log.created_at, 'short');
        
        html += `
            <tr>
                <td><span class="badge bg-secondary">${sl}</span></td>
                <td>
                    <strong>${log.username}</strong>
                    ${log.client ? '<br><small class="text-muted">' + (log.client.name || '') + '</small>' : ''}
                </td>
                <td>${actionBadge}</td>
                <td>${statusBadge}</td>
                <td>${serverBadge}</td>
                <td>${ipAddress}</td>
                <td>${sessionId}</td>
                <td>${connectedAt}</td>
                <td>${disconnectedAt}</td>
                <td>${uptime}</td>
                <td>${duration}</td>
                <td>${dataInfo}</td>
                <td><small class="text-muted">${createdAt}</small></td>
                <td>
                    <div class="d-flex gap-2">
                        <a href="{{ route('user-connection-logs.index') }}/${log.id}" class="btn btn-sm btn-outline-info" data-bs-toggle="tooltip" title="View Details">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{{ route('user-connection-logs.index') }}/${log.id}/edit" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteLog(${log.id})" data-bs-toggle="tooltip" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
        `;
    });
    
    if (tbody) {
        tbody.innerHTML = html;
    }
}

function updatePagination(pagination) {
    // Pagination will be handled by Laravel's pagination links
    // For now, we'll keep the existing pagination container
    // In a more advanced implementation, you could update pagination links dynamically
}

function formatDateTime(dateString, format = 'full') {
    if (!dateString) return '';
    const date = new Date(dateString);
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
    if (format === 'short') {
        return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    }
    
    return `${months[date.getMonth()]} ${String(date.getDate()).padStart(2, '0')}, ${date.getFullYear()} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
}

function parseMikrotikUptime(uptimeStr) {
    if (!uptimeStr) return 0;
    
    // Parse MikroTik uptime string format: "1w5d16h15s" or "1d2h3m4s" or "2h3m4s" or "3m4s" or "4s"
    // Convert to total seconds for incrementing
    let seconds = 0;
    const weekMatch = uptimeStr.match(/(\d+)w/);
    const dayMatch = uptimeStr.match(/(\d+)d/);
    const hourMatch = uptimeStr.match(/(\d+)h/);
    const minMatch = uptimeStr.match(/(\d+)m/);
    const secMatch = uptimeStr.match(/(\d+)s/);
    
    if (weekMatch) seconds += parseInt(weekMatch[1]) * 604800; // 7 days = 604800 seconds
    if (dayMatch) seconds += parseInt(dayMatch[1]) * 86400;
    if (hourMatch) seconds += parseInt(hourMatch[1]) * 3600;
    if (minMatch) seconds += parseInt(minMatch[1]) * 60;
    if (secMatch) seconds += parseInt(secMatch[1]);
    
    return seconds;
}

function formatMikrotikUptime(totalSeconds) {
    // Convert total seconds back to MikroTik format: "1w5d16h15s" (includes weeks)
    if (!totalSeconds) return '0s';
    
    const weeks = Math.floor(totalSeconds / 604800); // 7 days = 604800 seconds
    const days = Math.floor((totalSeconds % 604800) / 86400);
    const hours = Math.floor((totalSeconds % 86400) / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const secs = totalSeconds % 60;
    
    let uptimeStr = '';
    if (weeks > 0) uptimeStr += `${weeks}w`;
    if (days > 0) uptimeStr += `${days}d`;
    if (hours > 0) uptimeStr += `${hours}h`;
    if (minutes > 0) uptimeStr += `${minutes}m`;
    if (secs > 0 || uptimeStr === '') uptimeStr += `${secs}s`;
    
    return uptimeStr;
}

function formatDuration(seconds) {
    if (!seconds) return 'N/A';
    // Convert days to hours (1 day = 24 hours)
    const totalHours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    
    if (totalHours > 0) {
        return `${totalHours}h ${minutes}m ${secs}s`;
    } else if (minutes > 0) {
        return `${minutes}m ${secs}s`;
    } else {
        return `${secs}s`;
    }
}

function numberFormat(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function deleteLog(logId) {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const form = document.getElementById('deleteForm');
    
    form.action = `{{ route('user-connection-logs.index') }}/${logId}`;
    modal.show();
}

function initializeTooltips() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    stopAutoRefresh();
    stopUptimeUpdates();
});

// Restart uptime updates after table refresh
const originalUpdateLogsTable = updateLogsTable;
updateLogsTable = function(logs, pagination, data) {
    originalUpdateLogsTable(logs, pagination, data);
    startUptimeUpdates();
};
</script>
@endsection