@extends('dashboard')

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

@section('content')
<div class="page-container ai-agent-analytics-page">
    <div class="page-header">
        <div class="header-actions">
            <h1>{{ $agent->name }} - Analytics</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">
                        {{ $periodLabels[$period] ?? 'Last 30 Days' }}
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="?period=7d" class="dropdown-item {{ $period === '7d' ? 'active' : '' }}">Last 7 Days</a>
                        <a href="?period=30d" class="dropdown-item {{ $period === '30d' ? 'active' : '' }}">Last 30 Days</a>
                        <a href="?period=90d" class="dropdown-item {{ $period === '90d' ? 'active' : '' }}">Last 90 Days</a>
                        <a href="?period=1y" class="dropdown-item {{ $period === '1y' ? 'active' : '' }}">Last Year</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="fas fa-download"></i> Export Data
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="{{ route('ai-agents.analytics', ['id' => $agent->id, 'period' => $period, 'export' => 'csv']) }}" class="dropdown-item">CSV Format</a>
                        <a href="{{ route('ai-agents.analytics', ['id' => $agent->id, 'period' => $period, 'export' => 'json']) }}" class="dropdown-item">JSON Format</a>
                        <a href="#" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#scheduleReportModal">Schedule Reports</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="analytics-summary">
            <div class="summary-card">
                <div class="summary-value">{{ number_format($stats['requests']['total']) }}</div>
                <div class="summary-label">Total Requests</div>
                @if(isset($stats['trends']['requests']))
                <div class="trend-indicator {{ $stats['trends']['requests'] > 0 ? 'trend-up' : ($stats['trends']['requests'] < 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['requests'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['requests'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ number_format($stats['tokens']['input'] + $stats['tokens']['output']) }}</div>
                <div class="summary-label">Total Tokens</div>
                @if(isset($stats['trends']['tokens']))
                <div class="trend-indicator {{ $stats['trends']['tokens'] > 0 ? 'trend-up' : ($stats['trends']['tokens'] < 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['tokens'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['tokens'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ $stats['response_time']['average_ms'] }}ms</div>
                <div class="summary-label">Avg. Response Time</div>
                @if(isset($stats['trends']['response_time']))
                <div class="trend-indicator {{ $stats['trends']['response_time'] < 0 ? 'trend-up' : ($stats['trends']['response_time'] > 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['response_time'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['response_time'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ number_format(($stats['requests']['successful'] / $stats['requests']['total']) * 100, 1) }}%</div>
                <div class="summary-label">Success Rate</div>
                @if(isset($stats['trends']['error_rate']))
                <div class="trend-indicator {{ $stats['trends']['error_rate'] < 0 ? 'trend-up' : ($stats['trends']['error_rate'] > 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['error_rate'] > 0 ? '+' : '' }}{{ number_format(abs($stats['trends']['error_rate']), 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">${{ number_format($stats['cost_estimate'] ?? 0, 2) }}</div>
                <div class="summary-label">Estimated Cost</div>
                @if(isset($stats['trends']['cost']))
                <div class="trend-indicator {{ $stats['trends']['cost'] < 0 ? 'trend-up' : ($stats['trends']['cost'] > 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['cost'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['cost'], 1) }}%
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="analytics-tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-selected="true">Overview</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="performance-tab" data-bs-toggle="tab" data-bs-target="#performance" type="button" role="tab" aria-selected="false">Performance</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="conversation-tab" data-bs-toggle="tab" data-bs-target="#conversation" type="button" role="tab" aria-selected="false">Conversation Quality</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#resources" type="button" role="tab" aria-selected="false">Resource Usage</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="anomalies-tab" data-bs-toggle="tab" data-bs-target="#anomalies" type="button" role="tab" aria-selected="false">Anomalies</button>
            </li>
        </ul>
    </div>
    
    <div class="tab-content">
        <!-- Overview Tab -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
            <div class="analytics-grid">
                <!-- Usage Over Time Chart -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Usage Over Time</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="usageChart" height="300"></canvas>
                    </div>
                </div>
                
                <!-- Response Time Chart -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Response Time</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="responseTimeChart" height="300"></canvas>
                    </div>
                </div>
                
                <!-- Token Usage Chart -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Token Usage</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="tokenUsageChart" height="250"></canvas>
                    </div>
                </div>
                
                <!-- Top Queries -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Top Queries</h2>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Query</th>
                                        <th>Count</th>
                                        <th>Avg. Response Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($stats['top_queries'] ?? [] as $query)
                                        <tr>
                                            <td>{{ $query['text'] }}</td>
                                            <td>{{ $query['count'] }}</td>
                                            <td>{{ $query['avg_response_time'] }}ms</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Performance Tab -->
        <div class="tab-pane fade" id="performance" role="tabpanel" aria-labelledby="performance-tab">
            <div class="analytics-grid">
                <!-- Performance Metrics -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Performance Metrics</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="performanceMetricsChart" height="300"></canvas>
                    </div>
                </div>
                
                <!-- Cost Analysis -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Cost Analysis</h2>
                    </div>
                    <div class="card-body">
                        <div class="cost-summary">
                            <div class="cost-item">
                                <div class="cost-label">Total Cost</div>
                                <div class="cost-value">${{ number_format($stats['cost_estimate'] ?? 0, 2) }}</div>
                            </div>
                            <div class="cost-item">
                                <div class="cost-label">Cost per Request</div>
                                <div class="cost-value">${{ number_format($stats['requests']['total'] > 0 ? ($stats['cost_estimate'] ?? 0) / $stats['requests']['total'] : 0, 4) }}</div>
                            </div>
                            <div class="cost-item">
                                <div class="cost-label">Cost per 1K Tokens</div>
                                <div class="cost-value">${{ number_format($stats['cost_per_1k_tokens'] ?? 0, 4) }}</div>
                            </div>
                        </div>
                        <canvas id="costTrendChart" height="250"></canvas>
                    </div>
                </div>
                
                <!-- Recommendations -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Performance Recommendations</h2>
                    </div>
                    <div class="card-body">
                        <div class="recommendations-list">
                            @if(isset($stats['recommendations']) && count($stats['recommendations']) > 0)
                                @foreach($stats['recommendations'] as $recommendation)
                                    <div class="recommendation-item">
                                        <div class="recommendation-icon">
                                            <i class="fas fa-lightbulb"></i>
                                        </div>
                                        <div class="recommendation-content">
                                            <p>{{ $recommendation }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="empty-state">
                                    <i class="fas fa-check-circle"></i>
                                    <p>No recommendations at this time. Your agent is performing optimally.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Conversation Quality Tab -->
        <div class="tab-pane fade" id="conversation" role="tabpanel" aria-labelledby="conversation-tab">
            <div class="analytics-grid">
                <!-- Conversation Metrics -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Conversation Quality Metrics</h2>
                    </div>
                    <div class="card-body">
                        <div class="metrics-grid">
                            <div class="metric-item">
                                <div class="metric-title">Avg. Conversation Length</div>
                                <div class="metric-value">{{ number_format($stats['conversation_quality']['average_conversation_length'] ?? 0, 1) }} turns</div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-title">User Satisfaction</div>
                                <div class="metric-value">{{ number_format(($stats['conversation_quality']['average_user_satisfaction'] ?? 0) * 100, 1) }}%</div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-title">Task Completion Rate</div>
                                <div class="metric-value">{{ number_format(($stats['conversation_quality']['task_completion_rate'] ?? 0) * 100, 1) }}%</div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-title">Semantic Accuracy</div>
                                <div class="metric-value">{{ number_
```
```
@extends('dashboard')

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

@section('content')
<div class="page-container ai-agent-analytics-page">
    <div class="page-header">
        <div class="header-actions">
            <h1>{{ $agent->name }} - Analytics</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">
                        {{ $periodLabels[$period] ?? 'Last 30 Days' }}
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a href="?period=7d" class="dropdown-item {{ $period === '7d' ? 'active' : '' }}">Last 7 Days</a>
                        <a href="?period=30d" class="dropdown-item {{ $period === '30d' ? 'active' : '' }}">Last 30 Days</a>
                        <a href="?period=90d" class="dropdown-item {{ $period === '90d' ? 'active' : '' }}">Last 90 Days</a>
                        <a href="?period=1y" class="dropdown-item {{ $period === '1y' ? 'active' : '' }}">Last Year</a>
                    </div>
                </div>
                <a href="{{ route('ai-agents.analytics', ['id' => $agent->id, 'period' => $period, 'export' => 'csv']) }}" class="btn btn-outline-primary">
                    <i class="fas fa-download"></i> Export Data
                </a>
            </div>
        </div>
        
        <div class="analytics-summary">
            <div class="summary-card">
                <div class="summary-value">{{ number_format($stats['requests']['total']) }}</div>
                <div class="summary-label">Total Requests</div>
                @if(isset($stats['trends']['requests']))
                <div class="trend-indicator {{ $stats['trends']['requests'] > 0 ? 'trend-up' : ($stats['trends']['requests'] < 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['requests'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['requests'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ number_format($stats['tokens']['input'] + $stats['tokens']['output']) }}</div>
                <div class="summary-label">Total Tokens</div>
                @if(isset($stats['trends']['tokens']))
                <div class="trend-indicator {{ $stats['trends']['tokens'] > 0 ? 'trend-up' : ($stats['trends']['tokens'] < 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['tokens'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['tokens'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ $stats['response_time']['average_ms'] }}ms</div>
                <div class="summary-label">Avg. Response Time</div>
                @if(isset($stats['trends']['response_time']))
                <div class="trend-indicator {{ $stats['trends']['response_time'] < 0 ? 'trend-up' : ($stats['trends']['response_time'] > 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['response_time'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['response_time'], 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">{{ number_format(($stats['requests']['successful'] / $stats['requests']['total']) * 100, 1) }}%</div>
                <div class="summary-label">Success Rate</div>
                @if(isset($stats['trends']['error_rate']))
                <div class="trend-indicator {{ $stats['trends']['error_rate'] < 0 ? 'trend-up' : ($stats['trends']['error_rate'] > 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['error_rate'] > 0 ? '+' : '' }}{{ number_format(abs($stats['trends']['error_rate']), 1) }}%
                </div>
                @endif
            </div>
            <div class="summary-card">
                <div class="summary-value">${{ number_format($stats['cost_estimate'] ?? 0, 2) }}</div>
                <div class="summary-label">Estimated Cost</div>
                @if(isset($stats['trends']['cost']))
                <div class="trend-indicator {{ $stats['trends']['cost'] < 0 ? 'trend-up' : ($stats['trends']['cost'] > 0 ? 'trend-down' : 'trend-stable') }}">
                    {{ $stats['trends']['cost'] > 0 ? '+' : '' }}{{ number_format($stats['trends']['cost'], 1) }}%
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="analytics-tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-selected="true">Overview</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="performance-tab" data-bs-toggle="tab" data-bs-target="#performance" type="button" role="tab" aria-selected="false">Performance</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="conversation-tab" data-bs-toggle="tab" data-bs-target="#conversation" type="button" role="tab" aria-selected="false">Conversation Quality</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#resources" type="button" role="tab" aria-selected="false">Resource Usage</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="anomalies-tab" data-bs-toggle="tab" data-bs-target="#anomalies" type="button" role="tab" aria-selected="false">Anomalies</button>
            </li>
        </ul>
    </div>
    
    <div class="tab-content">
        <!-- Overview Tab -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
            <div class="analytics-grid">
                <!-- Usage Over Time Chart -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Usage Over Time</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="usageChart" height="300"></canvas>
                    </div>
                </div>
                
                <!-- Response Time Chart -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Response Time</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="responseTimeChart" height="300"></canvas>
                    </div>
                </div>
                
                <!-- Token Usage Chart -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Token Usage</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="tokenUsageChart" height="250"></canvas>
                    </div>
                </div>
                
                <!-- Top Queries -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Top Queries</h2>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Query</th>
                                        <th>Count</th>
                                        <th>Avg. Response Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($stats['top_queries'] ?? [] as $query)
                                        <tr>
                                            <td>{{ $query['text'] }}</td>
                                            <td>{{ $query['count'] }}</td>
                                            <td>{{ $query['avg_response_time'] }}ms</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Performance Tab -->
        <div class="tab-pane fade" id="performance" role="tabpanel" aria-labelledby="performance-tab">
            <div class="analytics-grid">
                <!-- Performance Metrics -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Performance Metrics</h2>
                    </div>
                    <div class="card-body">
                        <canvas id="performanceMetricsChart" height="300"></canvas>
                    </div>
                </div>
                
                <!-- Cost Analysis -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Cost Analysis</h2>
                    </div>
                    <div class="card-body">
                        <div class="cost-summary">
                            <div class="cost-item">
                                <div class="cost-label">Total Cost</div>
                                <div class="cost-value">${{ number_format($stats['cost_estimate'] ?? 0, 2) }}</div>
                            </div>
                            <div class="cost-item">
                                <div class="cost-label">Cost per Request</div>
                                <div class="cost-value">${{ number_format($stats['requests']['total'] > 0 ? ($stats['cost_estimate'] ?? 0) / $stats['requests']['total'] : 0, 4) }}</div>
                            </div>
                            <div class="cost-item">
                                <div class="cost-label">Cost per 1K Tokens</div>
                                <div class="cost-value">${{ number_format($stats['cost_per_1k_tokens'] ?? 0, 4) }}</div>
                            </div>
                        </div>
                        <canvas id="costTrendChart" height="250"></canvas>
                    </div>
                </div>
                
                <!-- Recommendations -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Performance Recommendations</h2>
                    </div>
                    <div class="card-body">
                        <div class="recommendations-list">
                            @if(isset($stats['recommendations']) && count($stats['recommendations']) > 0)
                                @foreach($stats['recommendations'] as $recommendation)
                                    <div class="recommendation-item">
                                        <div class="recommendation-icon">
                                            <i class="fas fa-lightbulb"></i>
                                        </div>
                                        <div class="recommendation-content">
                                            <p>{{ $recommendation }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="empty-state">
                                    <i class="fas fa-check-circle"></i>
                                    <p>No recommendations at this time. Your agent is performing optimally.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Conversation Quality Tab -->
        <div class="tab-pane fade" id="conversation" role="tabpanel" aria-labelledby="conversation-tab">
            <div class="analytics-grid">
                <!-- Conversation Metrics -->
                <div class="analytics-card">
                    <div class="card-header">
                        <h2>Conversation Quality Metrics</h2>
                    </div>
                    <div class="card-body">
                        <div class="metrics-grid">
                            <div class="metric-item">
                                <div class="metric-title">Avg. Conversation Length</div>
                                <div class="metric-value">{{ number_format($stats['conversation_quality']['average_conversation_length'] ?? 0, 1) }} turns</div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-title">User Satisfaction</div>
                                <div class="metric-value">{{ number_format(($stats['conversation_quality']['average_user_satisfaction'] ?? 0) * 100, 1) }}%</div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-title">Task Completion Rate</div>
                                <div class="metric-value">{{ number_format(($stats['conversation_quality']['task_completion_rate'] ?? 0) * 100, 1) }}%</div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-title">Semantic Accuracy</div>
                                <div class="metric-value">{{ number_