@extends('layouts.app')

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

    <!-- Alerts Section -->
    @if($alerts['alert_count'] > 0)
    <div class="alert alert-warning">
        <h5><i class="fas fa-exclamation-triangle"></i> Performance Alerts ({{ $alerts['alert_count'] }})</h5>
        <ul class="mb-0">
            @foreach($alerts['alerts'] as $alert)
            <li>
                <strong>{{ ucfirst(str_replace('_', ' ', $alert['type'])) }}:</strong> 
                {{ $alert['message'] }}
            </li>
            @endforeach
        </ul>
        <div class="mt-2">
            <a href="{{ route('ai-agents.performance.alerts', $agent->id) }}" class="btn btn-sm btn-warning">Manage Alerts</a>
        </div>
    </div>
    @endif

    <!-- Real-time Stats -->
    <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">Real-time Usage</h5>
                    <span class="badge badge-info">Updated: {{ \Carbon\Carbon::parse($realtimeStats['timestamp'])->diffForHumans() }}</span>
                </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>{{ $realtimeStats['active_sessions'] }}</h3>
                                    <p class="mb-0">Active Sessions</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3>{{ $realtimeStats['requests_per_minute'] }}</h3>
                                    <p class="mb-0">Requests/Minute</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3>{{ $realtimeStats['average_response_time'] }}ms</h3>
                                    <p class="mb-0">Avg Response Time</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3>{{ number_format($realtimeStats['error_rate'] * 100, 1) }}%</h3>
                                    <p class="mb-0">Error Rate</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Performance Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h4>{{ number_format($performanceMetrics['total_requests']) }}</h4>
                                    <p class="mb-0">Total Requests</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h4>{{ number_format($performanceMetrics['total_tokens_used']) }}</h4>
                                    <p class="mb-0">Total Tokens Used</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h4>{{ number_format($performanceMetrics['unique_users']) }}</h4>
                                    <p class="mb-0">Unique Users</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h4>${{ number_format($performanceMetrics['cost_estimate'], 2) }}</h4>
                                    <p class="mb-0">Estimated Cost</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Health Status</h5>
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ $performanceMetrics['uptime_percentage'] }}%" aria-valuenow="{{ $performanceMetrics['uptime_percentage'] }}" aria-valuemin="0" aria-valuemax="100">{{ number_format($performanceMetrics['uptime_percentage'], 1) }}%</div>
                        </div>
                        <p class="mt-1 mb-0">Uptime</p>
                    </div>
                    <div class="mb-3">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar {{ $performanceMetrics['error_rate'] < 0.05 ? 'bg-success' : ($performanceMetrics['error_rate'] < 0.1 ? 'bg-warning' : 'bg-danger') }}" role="progressbar" style="width: {{ min($performanceMetrics['error_rate'] * 1000, 100) }}%" aria-valuenow="{{ $performanceMetrics['error_rate'] * 100 }}" aria-valuemin="0" aria-valuemax="100">{{ number_format($performanceMetrics['error_rate'] * 100, 1) }}%</div>
                        </div>
                        <p class="mt-1 mb-0">Error Rate</p>
                    </div>
                    <div class="mb-3">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar {{ $performanceMetrics['average_response_time'] < 500 ? 'bg-success' : ($performanceMetrics['average_response_time'] < 1000 ? 'bg-info' : ($performanceMetrics['average_response_time'] < 2000 ? 'bg-warning' : 'bg-danger')) }}" role="progressbar" style="width: {{ min($performanceMetrics['average_response_time'] / 20, 100) }}%" aria-valuenow="{{ $performanceMetrics['average_response_time'] }}" aria-valuemin="0" aria-valuemax="2000">{{ $performanceMetrics['average_response_time'] }}ms</div>
                        </div>
                        <p class="mt-1 mb-0">Avg Response Time</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Cards -->
    <div class="row mb-4">
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Resource Utilization</h5>
                    <p class="card-text">Monitor CPU, memory, and network usage of your AI agent.</p>
                    <a href="{{ route('ai-agents.performance.resources', $agent->id) }}" class="btn btn-primary">View Resources</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Conversation Analytics</h5>
                    <p class="card-text">Analyze conversation quality, user satisfaction, and more.</p>
                    <a href="{{ route('ai-agents.performance.conversations', $agent->id) }}" class="btn btn-primary">View Analytics</a>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Usage History</h5>
                    <p class="card-text">View historical usage data and trends over time.</p>
                    <a href="{{ route('ai-agents.performance.history', $agent->id) }}" class="btn btn-primary">View History</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Export 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">Data Export & Reports</h5>
                    <button class="btn btn-sm btn-outline-secondary" type="button" data-toggle="collapse" data-target="#exportCollapse">
                        <i class="fas fa-caret-down"></i>
                    </button>
                </div>
                <div class="collapse show" id="exportCollapse">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Export Performance Data</h6>
                                <form method="post" action="{{ route('ai-agents.performance.export', $agent->id) }}" class="mb-3">
                                    @csrf
                                    <div class="form-row align-items-end">
                                        <div class="col-md-5">
                                            <label for="export_timeframe">Timeframe:</label>
                                            <select name="timeframe" id="export_timeframe" class="form-control form-control-sm">
                                                <option value="day">Last 24 Hours</option>
                                                <option value="week">Last 7 Days</option>
                                                <option value="month">Last 30 Days</option>
                                                <option value="all">All Time</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="export_format">Format:</label>
                                            <select name="format" id="export_format" class="form-control form-control-sm">
                                                <option value="csv">CSV</option>
                                                <option value="json">JSON</option>
                                                <option value="pdf">PDF</option>
                                                <option value="excel">Excel</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <button type="submit" class="btn btn-sm btn-primary btn-block">Export</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-6">
                                <h6>Schedule Regular Reports</h6>
                                <form method="post" action="{{ route('ai-agents.performance.schedule-report', $agent->id) }}" class="mb-3">
                                    @csrf
                                    <div class="form-row align-items-end">
                                        <div class="col-md-5">
                                            <label for="report_frequency">Frequency:</label>
                                            <select name="frequency" id="report_frequency" class="form-control form-control-sm">
                                                <option value="daily">Daily</option>
                                                <option value="weekly">Weekly</option>
                                                <option value="monthly">Monthly</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="report_format">Format:</label>
                                            <select name="format" id="report_format" class="form-control form-control-sm">
                                                <option value="pdf">PDF</option>
                                                <option value="excel">Excel</option>
                                                <option value="csv">CSV</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <button type="submit" class="btn btn-sm btn-primary btn-block">Schedule</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Add charts and real-time updates here
    // This would be implemented with actual data in a production environment
</script>
@endpush
@endsection