@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row mb-4">
        <div class="col-md-8">
            <h1>{{ $agent->name }} - Performance Alerts</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.show', $agent->id) }}" class="btn btn-outline-secondary">Overview</a>
                <a href="{{ route('ai-agents.performance.dashboard', $agent->id) }}" class="btn btn-outline-secondary">Performance</a>
                <a href="{{ route('ai-agents.logs', $agent->id) }}" class="btn btn-outline-secondary">Logs</a>
            </div>
        </div>
    </div>

    <!-- Current Alerts Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Current Alerts</h5>
                    <span class="badge {{ $currentAlerts['alert_count'] > 0 ? 'badge-warning' : 'badge-success' }}">{{ $currentAlerts['status'] }}</span>
                </div>
                <div class="card-body">
                    @if($currentAlerts['alert_count'] > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Severity</th>
                                        <th>Current Value</th>
                                        <th>Threshold</th>
                                        <th>Message</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($currentAlerts['alerts'] as $alert)
                                    <tr>
                                        <td>
                                            <span class="badge badge-{{ $alert['severity'] == 'high' ? 'danger' : ($alert['severity'] == 'medium' ? 'warning' : 'info') }}">
                                                {{ ucfirst(str_replace('_', ' ', $alert['type'])) }}
                                            </span>
                                        </td>
                                        <td>{{ ucfirst($alert['severity']) }}</td>
                                        <td>{{ is_numeric($alert['current_value']) && !is_int($alert['current_value']) ? number_format($alert['current_value'], 2) : $alert['current_value'] }}</td>
                                        <td>{{ is_numeric($alert['threshold']) && !is_int($alert['threshold']) ? number_format($alert['threshold'], 2) : $alert['threshold'] }}</td>
                                        <td>{{ $alert['message'] }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle"></i> No active alerts at this time. All metrics are within normal ranges.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Alert Thresholds Configuration -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Alert Thresholds Configuration</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('ai-agents.performance.update-alerts', $agent->id) }}">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="error_rate">Error Rate Threshold (%)</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control @error('thresholds.error_rate') is-invalid @enderror" 
                                            id="error_rate" name="thresholds[error_rate]" 
                                            value="{{ old('thresholds.error_rate', $alertThresholds['error_rate']) }}" 
                                            step="0.01" min="0" max="1">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">Alert when error rate exceeds this percentage (0-100%)</small>
                                    @error('thresholds.error_rate')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="response_time">Response Time Threshold (ms)</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control @error('thresholds.response_time') is-invalid @enderror" 
                                            id="response_time" name="thresholds[response_time]" 
                                            value="{{ old('thresholds.response_time', $alertThresholds['response_time']) }}" 
                                            min="0">
                                        <div class="input-group-append">
                                            <span class="input-group-text">ms</span>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">Alert when average response time exceeds this value</small>
                                    @error('thresholds.response_time')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="token_usage">Token Usage Threshold (per day)</label>
                                    <input type="number" class="form-control @error('thresholds.token_usage') is-invalid @enderror" 
                                        id="token_usage" name="thresholds[token_usage]" 
                                        value="{{ old('thresholds.token_usage', $alertThresholds['token_usage']) }}" 
                                        min="0">
                                    <small class="form-text text-muted">Alert when daily token usage exceeds this value</small>
                                    @error('thresholds.token_usage')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="cost_limit">Cost Limit Threshold ($ per day)</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="number" class="form-control @error('thresholds.cost_limit') is-invalid @enderror" 
                                            id="cost_limit" name="thresholds[cost_limit]" 
                                            value="{{ old('thresholds.cost_limit', $alertThresholds['cost_limit']) }}" 
                                            step="0.01" min="0">
                                    </div>
                                    <small class="form-text text-muted">Alert when daily cost estimate exceeds this value</small>
                                    @error('thresholds.cost_limit')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="form-group">
                                    <label for="cpu_utilization">CPU Utilization Threshold (%)</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control @error('thresholds.cpu_utilization') is-invalid @enderror" 
                                            id="cpu_utilization" name="thresholds[cpu_utilization]" 
                                            value="{{ old('thresholds.cpu_utilization', $alertThresholds['cpu_utilization']) }}" 
                                            min="0" max="100">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">Alert when CPU usage exceeds this percentage</small>
                                    @error('thresholds.cpu_utilization')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <div class="form-group">
                                    <label for="memory_utilization">Memory Utilization Threshold (%)</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control @error('thresholds.memory_utilization') is-invalid @enderror" 
                                            id="memory_utilization" name="thresholds[memory_utilization]" 
                                            value="{{ old('thresholds.memory_utilization', $alertThresholds['memory_utilization']) }}" 
                                            min="0" max="100">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">Alert when memory usage exceeds this percentage</small>
                                    @error('thresholds.memory_utilization')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <div class="form-group">
                                    <label for="gpu_utilization">GPU Utilization Threshold (%)</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control @error('thresholds.gpu_utilization') is-invalid @enderror" 
                                            id="gpu_utilization" name="thresholds[gpu_utilization]" 
                                            value="{{ old('thresholds.gpu_utilization', $alertThresholds['gpu_utilization']) }}" 
                                            min="0" max="100">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">Alert when GPU usage exceeds this percentage</small>
                                    @error('thresholds.gpu_utilization')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary">Save Alert Thresholds</button>
                            <a href="{{ route('ai-agents.performance.dashboard', $agent->id) }}" class="btn btn-outline-secondary ml-2">Back to Dashboard</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Convert error rate from decimal to percentage for display
        const errorRateInput = document.getElementById('error_rate');
        errorRateInput.value = errorRateInput.value * 100;
        
        // Convert back to decimal when submitting
        $('form').on('submit', function() {
            errorRateInput.value = errorRateInput.value / 100;
        });
    });
</script>
@endsection