@extends('dashboard')

@section('page-title', $agent->name . ' - Logs')

@section('content')
<div class="page-container ai-agent-logs-page">
    <div class="page-header">
        <div class="header-actions">
            <h1>{{ $agent->name }} - Logs</h1>
            <div class="buttons-container">
                <a href="{{ route('ai-agents.show', $agent->id) }}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left"></i> Back to Agent
                </a>
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="?type=all" class="dropdown-item {{ !request()->has('type') || request('type') === 'all' ? 'active' : '' }}">All Logs</a>
                        <a href="?type=request" class="dropdown-item {{ request('type') === 'request' ? 'active' : '' }}">Requests</a>
                        <a href="?type=error" class="dropdown-item {{ request('type') === 'error' ? 'active' : '' }}">Errors</a>
                        <a href="?type=system" class="dropdown-item {{ request('type') === 'system' ? 'active' : '' }}">System Events</a>
                    </div>
                </div>
                <a href="{{ route('ai-agents.logs', ['id' => $agent->id, 'download' => 'csv']) }}" class="btn btn-outline-primary">
                    <i class="fas fa-download"></i> Download CSV
                </a>
            </div>
        </div>
        
        <div class="date-filter">
            <div class="date-range">
                <div class="input-group">
                    <span class="input-group-text">From</span>
                    <input type="date" class="form-control" id="startDate" value="{{ now()->subDays(7)->format('Y-m-d') }}">
                    <span class="input-group-text">To</span>
                    <input type="date" class="form-control" id="endDate" value="{{ now()->format('Y-m-d') }}">
                    <button class="btn btn-primary" type="button" id="applyDateFilter">Apply</button>
                </div>
            </div>
            
            <div class="quick-filters">
                <button class="btn btn-outline-secondary btn-sm" data-days="1">Today</button>
                <button class="btn btn-outline-secondary btn-sm" data-days="7">Last 7 days</button>
                <button class="btn btn-outline-secondary btn-sm" data-days="30">Last 30 days</button>
            </div>
        </div>
    </div>
    
    <div class="logs-container">
        <div class="table-responsive">
            <table class="table table-hover logs-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Message</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
                    @if(count($logs) > 0)
                        @foreach($logs as $log)
                            <tr class="log-row {{ $log['type'] }}">
                                <td>{{ $log['timestamp'] }}</td>
                                <td><span class="badge {{ $log['type'] }}">{{ ucfirst($log['type']) }}</span></td>
                                <td>{{ $log['status'] }}</td>
                                <td>{{ $log['message'] }}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-secondary view-details" data-bs-toggle="modal" data-bs-target="#logDetailsModal" data-log-id="{{ $loop->index }}">
                                        <i class="fas fa-info-circle"></i> Details
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="5" class="text-center">
                                <div class="empty-state">
                                    <div class="icon">
                                        <i class="fas fa-clipboard-list"></i>
                                    </div>
                                    <h3>No Logs Yet</h3>
                                    <p>There are no logs matching your filter criteria.</p>
                                </div>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
        
        @if(count($logs) > 0)
            <div class="pagination-container">
                <nav>
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">Previous</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
        @endif
    </div>
</div>

<!-- Log Details Modal -->
<div class="modal fade" id="logDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Log Entry Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="log-details-content">
                    <div class="log-detail">
                        <span class="label">Time:</span>
                        <span class="value" id="detailTime"></span>
                    </div>
                    <div class="log-detail">
                        <span class="label">Type:</span>
                        <span class="value" id="detailType"></span>
                    </div>
                    <div class="log-detail">
                        <span class="label">Status:</span>
                        <span class="value" id="detailStatus"></span>
                    </div>
                    <div class="log-detail">
                        <span class="label">Message:</span>
                        <span class="value" id="detailMessage"></span>
                    </div>
                    
                    <div class="log-section">
                        <h6>Request:</h6>
                        <div class="code-block">
                            <pre><code id="detailRequest"></code></pre>
                        </div>
                    </div>
                    
                    <div class="log-section">
                        <h6>Response:</h6>
                        <div class="code-block">
                            <pre><code id="detailResponse"></code></pre>
                        </div>
                    </div>
                    
                    <div class="log-section">
                        <h6>Additional Information:</h6>
                        <table class="table table-sm">
                            <tbody id="detailMetadata">
                                <!-- Metadata will be inserted here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .logs-container {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        padding: 1.5rem;
    }
    
    .logs-table {
        margin-bottom: 0;
    }
    
    .logs-table th {
        border-top: none;
    }
    
    .badge {
        padding: 0.35em 0.65em;
        font-size: 0.75em;
        font-weight: 500;
    }
    
    .badge.request {
        background-color: #007bff;
    }
    
    .badge.error {
        background-color: #dc3545;
    }
    
    .badge.system {
        background-color: #6c757d;
    }
    
    .badge.info {
        background-color: #17a2b8;
    }
    
    .date-filter {
        margin-top: 1rem;
        padding: 1rem;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
    
    .quick-filters {
        margin-top: 0.75rem;
        display: flex;
        gap: 0.5rem;
    }
    
    .empty-state {
        padding: 3rem 0;
        text-align: center;
    }
    
    .empty-state .icon {
        font-size: 3rem;
        color: #adb5bd;
        margin-bottom: 1.5rem;
    }
    
    .empty-state h3 {
        margin-bottom: 0.5rem;
    }
    
    .empty-state p {
        color: #6c757d;
    }
    
    .pagination-container {
        margin-top: 1.5rem;
        display: flex;
        justify-content: center;
    }
    
    .log-row {
        cursor: pointer;
    }
    
    .log-row:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }
    
    .log-details-content {
        padding: 0.5rem;
    }
    
    .log-detail {
        margin-bottom: 1rem;
        display: flex;
    }
    
    .log-detail .label {
        font-weight: 500;
        width: 80px;
        flex-shrink: 0;
    }
    
    .log-section {
        margin-top: 1.5rem;
    }
    
    .log-section h6 {
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    
    .code-block {
        background-color: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 1rem;
    }
    
    .code-block pre {
        margin: 0;
        padding: 1rem;
        overflow-x: auto;
    }
    
    .code-block code {
        font-size: 0.85rem;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Sample log data - in a real application, this would come from the server
        const logData = [
            {
                timestamp: '2023-08-15T14:25:32Z',
                type: 'request',
                status: 'success',
                message: 'Chat request processed',
                request: {
                    message: 'What services do you offer?',
                    conversation_id: null
                },
                response: {
                    response: 'We offer a wide range of services including web hosting, domain registration, email hosting, and AI-powered solutions. Our hosting plans start at $5.99/month and include 24/7 support.',
                    conversation_id: 'conv_3f8a9d2e7c1b',
                    created_at: '2023-08-15T14:25:32Z'
                },
                metadata: {
                    ip: '192.168.1.1',
                    user_agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
                    processing_time_ms: 456,
                    token_count: {
                        input: 5,
                        output: 37
                    }
                }
            },
            {
                timestamp: '2023-08-15T12:18:45Z',
                type: 'error',
                status: 'failed',
                message: 'Rate limit exceeded',
                request: {
                    message: 'Generate a product description for a new smartphone',
                    conversation_id: 'conv_7e2b5d1c9a3f'
                },
                response: {
                    error: 'rate_limit_exceeded',
                    message: 'You have exceeded the rate limit for your plan.',
                    retry_after: 60
                },
                metadata: {
                    ip: '192.168.1.1',
                    user_agent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)',
                    rate_limit: {
                        limit: 60,
                        remaining: 0,
                        reset: '2023-08-15T12:19:45Z'
                    }
                }
            },
            {
                timestamp: '2023-08-15T10:05:12Z',
                type: 'system',
                status: 'info',
                message: 'Agent configuration updated',
                request: null,
                response: null,
                metadata: {
                    user_id: '{{ Auth::id() }}',
                    changes: {
                        temperature: [0.5, 0.7],
                        max_tokens: [1024, 2048]
                    }
                }
            }
        ];
        
        // Date filter handling
        document.getElementById('applyDateFilter').addEventListener('click', function() {
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            
            if (startDate && endDate) {
                window.location.href = '?start=' + startDate + '&end=' + endDate + 
                    (window.location.search.includes('type=') ? '&type={{ request("type") }}' : '');
            }
        });
        
        // Quick filter buttons
        document.querySelectorAll('.quick-filters button').forEach(button => {
            button.addEventListener('click', function() {
                const days = this.dataset.days;
                const endDate = new Date();
                const startDate = new Date();
                startDate.setDate(startDate.getDate() - parseInt(days));
                
                document.getElementById('startDate').value = startDate.toISOString().substr(0, 10);
                document.getElementById('endDate').value = endDate.toISOString().substr(0, 10);
                document.getElementById('applyDateFilter').click();
            });
        });
        
        // Log details modal
        document.querySelectorAll('.view-details').forEach(button => {
            button.addEventListener('click', function() {
                const logId = parseInt(this.dataset.logId);
                const log = logData[logId];
                
                // Fill in modal details
                document.getElementById('detailTime').textContent = new Date(log.timestamp).toLocaleString();
                document.getElementById('detailType').textContent = log.type.charAt(0).toUpperCase() + log.type.slice(1);
                document.getElementById('detailStatus').textContent = log.status;
                document.getElementById('detailMessage').textContent = log.message;
                
                // Request and Response JSON
                document.getElementById('detailRequest').textContent = log.request ? 
                    JSON.stringify(log.request, null, 2) : 'No request data';
                    
                document.getElementById('detailResponse').textContent = log.response ? 
                    JSON.stringify(log.response, null, 2) : 'No response data';
                
                // Metadata
                const metadataContainer = document.getElementById('detailMetadata');
                metadataContainer.innerHTML = '';
                
                if (log.metadata) {
                    for (const [key, value] of Object.entries(log.metadata)) {
                        if (typeof value === 'object') {
                            const row = document.createElement('tr');
                            row.innerHTML = `
                                <td class="fw-bold">${key}</td>
                                <td><code>${JSON.stringify(value)}</code></td>
                            `;
                            metadataContainer.appendChild(row);
                        } else {
                            const row = document.createElement('tr');
                            row.innerHTML = `
                                <td class="fw-bold">${key}</td>
                                <td>${value}</td>
                            `;
                            metadataContainer.appendChild(row);
                        }
                    }
                } else {
                    metadataContainer.innerHTML = '<tr><td colspan="2">No additional information available</td></tr>';
                }
            });
        });
    });
</script>
@endpush