@extends('layouts.app')

@section('title', 'Error Logs - Admin Panel')
@section('page_title', 'Application Error Logs')

@section('styles')
<style>
    .error-preview {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: monospace;
        font-size: 11px;
    }
    .badge-app {
        background-color: #e83e8c;
        color: white;
    }
    .badge-admin {
        background-color: #fd7e14;
        color: white;
    }
    .badge-system {
        background-color: #dc3545;
        color: white;
    }
    pre {
        background: #1e1e1e;
        color: #d4d4d4;
        padding: 15px;
        border-radius: 5px;
        max-height: 400px;
        overflow-y: auto;
        font-family: Consolas, "Courier New", monospace;
        font-size: 12px;
        border: 1px solid #333;
    }
</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('error-logs.index') }}" method="GET" class="form-inline row">
                    <div class="form-group col-md-3 mb-2">
                        <label for="user_type" class="sr-only">User Type</label>
                        <select name="user_type" id="user_type" class="form-control w-100">
                            <option value="">All User Types</option>
                            <option value="app_user" {{ request('user_type') == 'app_user' ? 'selected' : '' }}>App User</option>
                            <option value="admin" {{ request('user_type') == 'admin' ? 'selected' : '' }}>Admin Dashboard</option>
                            <option value="system" {{ request('user_type') == 'system' ? 'selected' : '' }}>Backend System</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 error message, file, screen, 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>Application & System Error Logs</h5>
                <span class="text-muted">Total Errors: {{ $errors->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>Source</th>
                                <th>User / Context</th>
                                <th>Error Message</th>
                                <th>File & Line</th>
                                <th>Screen / Endpoint</th>
                                <th>IP Address</th>
                                <th>Logged At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($errors as $log)
                            <tr>
                                <td>{{ $log->id }}</td>
                                <td>
                                    @if($log->user_type === 'app_user')
                                        <span class="badge badge-app">App User</span>
                                    @elseif($log->user_type === 'admin')
                                        <span class="badge badge-admin">Admin UI</span>
                                    @else
                                        <span class="badge badge-system">System</span>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $log->user_name }}</strong>
                                    <small class="d-block text-muted">ID: {{ $log->user_id ?? 'N/A' }}</small>
                                </td>
                                <td class="error-preview" title="{{ $log->error_message }}">
                                    <code class="text-danger">{{ $log->error_message }}</code>
                                </td>
                                <td>
                                    @if($log->file)
                                        <small class="d-block text-secondary" style="word-break: break-all;">{{ basename($log->file) }}</small>
                                        <span class="badge badge-light-secondary">Line: {{ $log->line }}</span>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    <small>{{ $log->screen ?? '-' }}</small>
                                </td>
                                <td>
                                    <small>{{ $log->ip_address }}</small>
                                </td>
                                <td><x-date-display :date="$log->created_at" /></td>
                                <td>
                                    <button class="btn btn-danger btn-sm view-details-btn" data-id="{{ $log->id }}">
                                        <i class="feather icon-alert-triangle"></i> Inspect
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted">No error logs recorded. Great news!</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-3">
                    {{ $errors->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 bg-danger text-white">
                <h5 class="modal-title text-white" id="detailsModalLabel">Inspect Exception (ID: <span id="modal-log-id"></span>)</h5>
                <button type="button" class="close text-white" 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%">Source Type</th>
                        <td id="modal-log-type"></td>
                    </tr>
                    <tr>
                        <th>User Name</th>
                        <td id="modal-user-name"></td>
                    </tr>
                    <tr>
                        <th>Error Message</th>
                        <td><strong class="text-danger" id="modal-message"></strong></td>
                    </tr>
                    <tr>
                        <th>File & Line</th>
                        <td id="modal-file-line"></td>
                    </tr>
                    <tr>
                        <th>Screen / Endpoint</th>
                        <td id="modal-screen"></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 class="mt-3">Request / Diagnostic Payload</h5>
                <pre><code id="modal-payload"></code></pre>

                <h5 class="mt-3">Stack Trace</h5>
                <pre><code id="modal-stack-trace"></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('error-logs.index') }}/" + logId,
            type: "GET",
            success: function(response) {
                if(response.success) {
                    var data = response.data;
                    $('#modal-log-id').text(data.id);
                    
                    var badge = '';
                    if (data.user_type === 'app_user') {
                        badge = '<span class="badge badge-app">App User</span>';
                    } else if (data.user_type === 'admin') {
                        badge = '<span class="badge badge-admin">Admin UI</span>';
                    } else {
                        badge = '<span class="badge badge-system">System</span>';
                    }
                    
                    $('#modal-log-type').html(badge);
                    $('#modal-user-name').text(data.user_name + ' (ID: ' + (data.user_id || 'N/A') + ')');
                    $('#modal-message').text(data.error_message);
                    
                    var fileLine = '-';
                    if (data.file) {
                        fileLine = data.file + ' (Line: ' + data.line + ')';
                    }
                    $('#modal-file-line').text(fileLine);
                    
                    $('#modal-screen').text(data.screen || '-');
                    $('#modal-ip').text(data.ip_address || '-');
                    $('#modal-user-agent').text(data.user_agent || '-');
                    $('#modal-time').text(data.created_at);
                    
                    // Format JSON Payload
                    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);
                    
                    // Format Stack Trace
                    $('#modal-stack-trace').text(data.stack_trace || 'No stack trace available.');
                    
                    $('#detailsModal').modal('show');
                }
            },
            error: function(xhr) {
                alert('Failed to retrieve error log details.');
            }
        });
    });
});
</script>
@endsection