@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row mb-4">
        <div class="col-md-8">
            <h1>{{ $agent->name }} - Resource Utilization</h1>
            <p class="text-muted">Model: {{ $agent->model_type }} | Created: {{ $agent->created_at->format('M d, Y') }}</p>
        </div>
        <div class="col-md-4 text-right">
            <div class="btn-group">
                <a href="{{ route('ai-agents.performance.dashboard', $agent->id) }}" class="btn btn-outline-secondary">Dashboard</a>
                <a href="{{ route('ai-agents.performance.resources', $agent->id) }}" class="btn btn-primary">Resources</a>
                <a href="{{ route('ai-agents.performance.conversations', $agent->id) }}" class="btn btn-outline-secondary">Conversations</a>
            </div>
        </div>
    </div>

    <!-- Timeframe Selector -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="form-inline">
                <label class="mr-2">Timeframe:</label>
                <select name="timeframe" class="form-control mr-2" onchange="this.form.submit()">
                    <option value="day" {{ $timeframe == 'day' ? 'selected' : '' }}>Last 24 Hours</option>
                    <option value="week" {{ $timeframe == 'week' ? 'selected' : '' }}>Last 7 Days</option>
                    <option value="month" {{ $timeframe == 'month' ? 'selected' : '' }}>Last 30 Days</option>
                    <option value="all" {{ $timeframe == 'all' ? 'selected' : '' }}>All Time</option>
                </select>
            </form>
        </div>
    </div>

    <!-- Resource Summary -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Resource Utilization Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3>{{ $resourceMetrics['summary']['average_cpu_utilization'] }}%</h3>
                                    <p class="mb-0">Avg CPU Usage</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3>{{ $resourceMetrics['summary']['average_memory_utilization'] }}%</h3>
                                    <p class="mb-0">Avg Memory Usage</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3>{{ $resourceMetrics['summary']['average_gpu_utilization'] ? $resourceMetrics['summary']['average_gpu_utilization'] . '%' : 'N/A' }}</h3>
                                    <p class="mb-0">Avg GPU Usage</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3>{{ $resourceMetrics['summary']['total_network_bandwidth_gb'] }} GB</h3>
                                    <p class="mb-0">Network Bandwidth</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="progress" style="height: 25px;">
                                <div class="progress-bar bg-info" role="progressbar" style="width: {{ $resourceMetrics['summary']['resource_efficiency_score'] }}%" aria-valuenow="{{ $resourceMetrics['summary']['resource_efficiency_score'] }}" aria-valuemin="0" aria-valuemax="100">{{ $resourceMetrics['summary']['resource_efficiency_score'] }}% Efficiency</div>
                            </div>
                            <p class="text-muted mt-2">Resource Efficiency Score measures how effectively your agent uses allocated resources.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Resource Charts -->
    <div class="row mb-4">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">CPU Utilization</h5>
                </div>
                <div class="card-body">
                    <canvas id="cpuChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Memory Utilization</h5>
                </div>
                <div class="card-body">
                    <canvas id="memoryChart" height="250"></canvas>
                </div>
            </div>
        </div>
        @if($resourceMetrics['summary']['average_gpu_utilization'])
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">GPU Utilization</h5>
                </div>
                <div class="card-body">
                    <canvas id="gpuChart" height="250"></canvas>
                </div>
            </div>
        </div>
        @endif
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Network Bandwidth</h5>
                </div>
                <div class="card-body">
                    <canvas id="networkChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Resource Data -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Detailed Resource Data</h5>
            <button class="btn btn-sm btn-outline-secondary" type="button" data-toggle="collapse" data-target="#resourceDataTable" aria-expanded="false">
                Toggle Table
            </button>
        </div>
        <div class="collapse" id="resourceDataTable">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>CPU Avg</th>
                                <th>CPU Peak</th>
                                <th>Memory Avg</th>
                                <th>Memory Peak</th>
                                @if($resourceMetrics['summary']['average_gpu_utilization'])
                                <th>GPU Avg</th>
                                <th>GPU Peak</th>
                                @endif
                                <th>Network In</th>
                                <th>Network Out</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($resourceMetrics['data_points'] as $point)
                            <tr>
                                <td>{{ $point['date'] }}</td>
                                <td>{{ $point['cpu_utilization']['average'] }}%</td>
                                <td>{{ $point['cpu_utilization']['peak'] }}%</td>
                                <td>{{ $point['memory_utilization']['average'] }}%</td>
                                <td>{{ $point['memory_utilization']['peak'] }}%</td>
                                @if($resourceMetrics['summary']['average_gpu_utilization'])
                                <td>{{ $point['gpu_utilization'] ? $point['gpu_utilization']['average'] . '%' : 'N/A' }}</td>
                                <td>{{ $point['gpu_utilization'] ? $point['gpu_utilization']['peak'] . '%' : 'N/A' }}</td>
                                @endif
                                <td>{{ $point['network_bandwidth']['ingress_mb'] }} MB</td>
                                <td>{{ $point['network_bandwidth']['egress_mb'] }} MB</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Optimization Recommendations -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Resource Optimization Recommendations</h5>
        </div>
        <div class="card-body">
            <ul class="list-group">
                @if($resourceMetrics['summary']['average_cpu_utilization'] > 70)
                <li class="list-group-item list-group-item-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>High CPU Usage:</strong> Consider optimizing your agent's prompts or using a more efficient model.
                </li>
                @endif
                @if($resourceMetrics['summary']['average_memory_utilization'] > 80)
                <li class="list-group-item list-group-item-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>High Memory Usage:</strong> Your agent may be processing large contexts. Consider chunking inputs or optimizing context length.
                </li>
                @endif
                @if($resourceMetrics['summary']['average_gpu_utilization'] && $resourceMetrics['summary']['average_gpu_utilization'] > 85)
                <li class="list-group-item list-group-item-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>High GPU Usage:</strong> Your model is GPU-intensive. Consider batching requests or using a smaller model for less complex tasks.
                </li>
                @endif
                @if($resourceMetrics['summary']['resource_efficiency_score'] < 70)
                <li class="list-group-item list-group-item-info">
                    <i class="fas fa-info-circle mr-2"></i>
                    <strong>Efficiency Opportunity:</strong> Your resource efficiency score indicates room for improvement. Consider reviewing your agent's configuration.
                </li>
                @endif
                @if($resourceMetrics['summary']['average_cpu_utilization'] < 30 && $resourceMetrics['summary']['average_memory_utilization'] < 30)
                <li class="list-group-item list-group-item-success">
                    <i class="fas fa-check-circle mr-2"></i>
                    <strong>Resource Underutilization:</strong> Your agent is using minimal resources. You may be able to handle more traffic or reduce allocated resources.
                </li>
                @endif
            </ul>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Prepare data for charts
    const dates = @json(array_column($resourceMetrics['data_points'], 'date'));
    const cpuAvg = @json(array_column(array_column($resourceMetrics['data_points'], 'cpu_utilization'), 'average'));
    const cpuPeak = @json(array_column(array_column($resourceMetrics['data_points'], 'cpu_utilization'), 'peak'));
    const memoryAvg = @json(array_column(array_column($resourceMetrics['data_points'], 'memory_utilization'), 'average'));
    const memoryPeak = @json(array_column(array_column($resourceMetrics['data_points'], 'memory_utilization'), 'peak'));
    const networkIn = @json(array_column(array_column($resourceMetrics['data_points'], 'network_bandwidth'), 'ingress_mb'));
    const networkOut = @json(array_column(array_column($resourceMetrics['data_points'], 'network_bandwidth'), 'egress_mb'));
    
    // CPU Chart
    const cpuCtx = document.getElementById('cpuChart').getContext('2d');
    new Chart(cpuCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [
                {
                    label: 'Average CPU Usage (%)',
                    data: cpuAvg,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                    borderWidth: 2,
                    fill: true
                },
                {
                    label: 'Peak CPU Usage (%)',
                    data: cpuPeak,
                    borderColor: 'rgba(255, 99, 132, 1)',
                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                    borderWidth: 2,
                    borderDash: [5, 5],
                    fill: false
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: 'CPU Usage (%)'
                    }
                }
            }
        }
    });
    
    // Memory Chart
    const memoryCtx = document.getElementById('memoryChart').getContext('2d');
    new Chart(memoryCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [
                {
                    label: 'Average Memory Usage (%)',
                    data: memoryAvg,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.1)',
                    borderWidth: 2,
                    fill: true
                },
                {
                    label: 'Peak Memory Usage (%)',
                    data: memoryPeak,
                    borderColor: 'rgba(255, 159, 64, 1)',
                    backgroundColor