@extends('layouts.app')

@section('title', 'Activity Logs - Admin Panel')
@section('page_title', 'Activity & Interaction Logs')

@section('styles')
<style>
    .payload-preview {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: monospace;
        font-size: 11px;
    }
    .badge-app {
        background-color: #6f42c1;
        color: white;
    }
    .badge-admin {
        background-color: #007bff;
        color: white;
    }
    pre {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #e9ecef;
        max-height: 400px;
        overflow-y: auto;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <!-- Filters Card -->
        <div class="card mb-3">
            <div class="card-body">
                <form action="{{ route('activity-logs.index') }}" method="GET" class="form-inline row">
                    <div class="form-group col-md-3 mb-2">
                        <label for="log_type" class="sr-only">Log Type</label>
                        <select name="log_type" id="log_type" class="form-control w-100">
                            <option value="">All Log Types</option>
                            <option value="app_interaction" {{ request('log_type') == 'app_interaction' ? 'selected' : '' }}>App Interaction</option>
                            <option value="admin_action" {{ request('log_type') == 'admin_action' ? 'selected' : '' }}>Admin Action</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6 mb-2">
                        <label for="search" class="sr-only">Search</label>
                        <input type="text" name="search" id="search" class="form-control w-100" placeholder="Search by action, screen, element, user name, or payload..." value="{{ request('search') }}">
                    </div>
                    <div class="col-md-3 mb-2">
                        <button type="submit" class="btn btn-primary w-100"><i class="feather icon-filter"></i> Filter</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Logs Table Card -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Activity & Interaction Logs</h5>
                <span class="text-muted">Total Logs: {{ $logs->total() }}</span>
            </div>
            <div class="card-body table-border-style">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Log Type</th>
                                <th>User / Admin</th>
                                <th>Action</th>
                                <th>Screen / Endpoint</th>
                                <th>Target / Element</th>
                                <th>IP Address</th>
                                <th>Payload Preview</th>
                                <th>Logged At</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($logs as $log)
                            <tr>
                                <td>{{ $log->id }}</td>
                                <td>
                                    @if($log->log_type === 'app_interaction')
                                        <span class="badge badge-app">App User</span>
                                    @else
                                        <span class="badge badge-admin">Admin</span>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $log->user_name }}</strong>
                                    <small class="d-block text-muted">ID: {{ $log->user_id ?? 'N/A' }}</small>
                                </td>
                                <td>
                                    <code class="text-primary font-weight-bold">{{ $log->action }}</code>
                                </td>
                                <td>
                                    <small>{{ $log->screen ?? '-' }}</small>
                                </td>
                                <td>
                                    <small class="text-secondary">{{ $log->element ?? '-' }}</small>
                                </td>
                                <td>
                                    <small>{{ $log->ip_address }}</small>
                                </td>
                                <td class="payload-preview">
                                    {{ is_array($log->payload) ? json_encode($log->payload) : ($log->payload ?? '{}') }}
                                </td>
                                <td><x-date-display :date="$log->created_at" /></td>
                                <td>
                                    <button class="btn btn-info btn-sm view-details-btn" data-id="{{ $log->id }}">
                                        <i class="feather icon-eye"></i> Details
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted">No activity logs found.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-3">
                    {{ $logs->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Log Details (ID: <span id="modal-log-id"></span>)</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <tr>
                        <th width="30%">Log Type</th>
                        <td id="modal-log-type"></td>
                    </tr>
                    <tr>
                        <th>User Name</th>
                        <td id="modal-user-name"></td>
                    </tr>
                    <tr>
                        <th>Action</th>
                        <td id="modal-action"></td>
                    </tr>
                    <tr>
                        <th>Screen / Route</th>
                        <td id="modal-screen"></td>
                    </tr>
                    <tr>
                        <th>Target Element</th>
                        <td id="modal-element"></td>
                    </tr>
                    <tr>
                        <th>IP Address</th>
                        <td id="modal-ip"></td>
                    </tr>
                    <tr>
                        <th>User Agent</th>
                        <td id="modal-user-agent" style="font-size: 12px; word-break: break-all;"></td>
                    </tr>
                    <tr>
                        <th>Time</th>
                        <td id="modal-time"></td>
                    </tr>
                </table>
                
                <h5>Payload Data</h5>
                <pre><code id="modal-payload" class="json"></code></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('.view-details-btn').on('click', function() {
        var logId = $(this).data('id');
        
        // Fetch details from backend API
        $.ajax({
            url: "{{ route('activity-logs.index') }}/" + logId,
            type: "GET",
            success: function(response) {
                if(response.success) {
                    var data = response.data;
                    $('#modal-log-id').text(data.id);
                    
                    var badge = data.log_type === 'app_interaction' 
                        ? '<span class="badge badge-app">App User</span>' 
                        : '<span class="badge badge-admin">Admin</span>';
                    
                    $('#modal-log-type').html(badge);
                    $('#modal-user-name').text(data.user_name + ' (ID: ' + (data.user_id || 'N/A') + ')');
                    $('#modal-action').html('<code class="text-primary font-weight-bold">' + data.action + '</code>');
                    $('#modal-screen').text(data.screen || '-');
                    $('#modal-element').text(data.element || '-');
                    $('#modal-ip').text(data.ip_address || '-');
                    $('#modal-user-agent').text(data.user_agent || '-');
                    $('#modal-time').text(data.created_at);
                    
                    // Format JSON
                    var payloadStr = '{}';
                    if (data.payload) {
                        try {
                            var payloadJson = typeof data.payload === 'string' ? JSON.parse(data.payload) : data.payload;
                            payloadStr = JSON.stringify(payloadJson, null, 4);
                        } catch(e) {
                            payloadStr = typeof data.payload === 'string' ? data.payload : JSON.stringify(data.payload);
                        }
                    }
                    $('#modal-payload').text(payloadStr);
                    
                    $('#detailsModal').modal('show');
                }
            },
            error: function(xhr) {
                alert('Failed to retrieve log details.');
            }
        });
    });
});
</script>
@endsection