@extends('layouts.app')

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

    <!-- Usage Summary -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Usage 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>{{ number_format(collect($usageHistory)->sum('requests')) }}</h3>
                                    <p class="mb-0">Total Requests</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(collect($usageHistory)->sum('tokens_used')) }}</h3>
                                    <p class="mb-0">Total Tokens Used</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(collect($usageHistory)->max('unique_users')) }}</h3>
                                    <p class="mb-0">Max Unique Users</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(collect($usageHistory)->sum('tokens_used') / 1000 * 0.002, 2) }}</h3>
                                    <p class="mb-0">Estimated Cost</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Usage History Chart -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Usage Trends</h5>
                </div>
                <div class="card-body">
                    <canvas id="usageHistoryChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed History Table -->
    <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">Detailed Usage History</h5>
                    <button class="btn btn-sm btn-outline-secondary" onclick="exportTableToCSV('usage-history.csv')">Export CSV</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Requests</th>
                                    <th>Tokens Used</th>
                                    <th>Unique Users</th>
                                    <th>Avg Response Time</th>
                                    <th>Error Rate</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($usageHistory as $record)
                                <tr>
                                    <td>{{ $record['date'] }}</td>
                                    <td>{{ number_format($record['requests']) }}</td>
                                    <td>{{ number_format($record['tokens_used']) }}</td>
                                    <td>{{ number_format($record['unique_users']) }}</td>
                                    <td>{{ $record['average_response_time'] }}ms</td>
                                    <td>{{ number_format($record['error_rate'] * 100, 2) }}%</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Initialize the usage history chart
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('usageHistoryChart').getContext('2d');
        
        // Extract data from the usage history
        const dates = @json(collect($usageHistory)->pluck('date'));
        const requests = @json(collect($usageHistory)->pluck('requests'));
        const tokens = @json(collect($usageHistory)->pluck('tokens_used'));
        const users = @json(collect($usageHistory)->pluck('unique_users'));
        
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: dates,
                datasets: [
                    {
                        label: 'Requests',
                        data: requests,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderWidth: 2,
                        tension: 0.1
                    },
                    {
                        label: 'Tokens (thousands)',
                        data: tokens.map(t => t / 1000),
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderWidth: 2,
                        tension: 0.1
                    },
                    {
                        label: 'Unique Users',
                        data: users,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderWidth: 2,
                        tension: 0.1
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });
    });
    
    // Function to export table data to CSV
    function exportTableToCSV(filename) {
        const table = document.querySelector('table');
        let csv = [];
        const rows = table.querySelectorAll('tr');
        
        for (let i = 0; i < rows.length; i++) {
            const row = [], cols = rows[i].querySelectorAll('td, th');
            
            for (let j = 0; j < cols.length; j++) {
                row.push('"' + cols[j].innerText + '"');
            }
            
            csv.push(row.join(','));
        }
        
        // Download CSV file
        downloadCSV(csv.join('\n'), filename);
    }
    
    function downloadCSV(csv, filename) {
        const csvFile = new Blob([csv], {type: 'text/csv'});
        const downloadLink = document.createElement('a');
        
        downloadLink.download = filename;
        downloadLink.href = window.URL.createObjectURL(csvFile);
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
        
        downloadLink.click();
        document.body.removeChild(downloadLink);
    }
</script>
@endpush
@endsection