@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row mb-4">
        <div class="col-md-8">
            <h1>{{ $agent->name }} - Conversation Analytics</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-primary">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>

    <!-- Conversation Quality Summary -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Conversation Quality 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>{{ $conversationQuality['average_conversation_length'] }}</h3>
                                    <p class="mb-0">Avg Conversation Length</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($conversationQuality['average_user_satisfaction'] * 100, 1) }}%</h3>
                                    <p class="mb-0">User Satisfaction</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($conversationQuality['task_completion_rate'] * 100, 1) }}%</h3>
                                    <p class="mb-0">Task Completion Rate</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($advancedAnalytics['semantic_accuracy'] * 100, 1) }}%</h3>
                                    <p class="mb-0">Semantic Accuracy</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Advanced Analytics Charts -->
    <div class="row mb-4">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Conversation Depth</h5>
                </div>
                <div class="card-body">
                    <canvas id="conversationDepthChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">User Engagement</h5>
                </div>
                <div class="card-body">
                    <canvas id="userEngagementChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Topic Distribution</h5>
                </div>
                <div class="card-body">
                    <canvas id="topicDistributionChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Sentiment Analysis</h5>
                </div>
                <div class="card-body">
                    <canvas id="sentimentChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Response Quality Metrics -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Response Quality Metrics</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6>Factual Accuracy</h6>
                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ $advancedAnalytics['response_quality']['factual_accuracy'] * 100 }}%" aria-valuenow="{{ $advancedAnalytics['response_quality']['factual_accuracy'] * 100 }}" aria-valuemin="0" aria-valuemax="100">{{ number_format($advancedAnalytics['response_quality']['factual_accuracy'] * 100, 1) }}%</div>
                    </div>
                    
                    <h6>Coherence Score</h6>
                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar bg-info" role="progressbar" style="width: {{ $advancedAnalytics['response_quality']['coherence_score'] * 100 }}%" aria-valuenow="{{ $advancedAnalytics['response_quality']['coherence_score'] * 100 }}" aria-valuemin="0" aria-valuemax="100">{{ number_format($advancedAnalytics['response_quality']['coherence_score'] * 100, 1) }}%</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h6>Helpfulness Rating</h6>
                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $advancedAnalytics['response_quality']['helpfulness_rating'] * 20 }}%" aria-valuenow="{{ $advancedAnalytics['response_quality']['helpfulness_rating'] }}" aria-valuemin="0" aria-valuemax="5">{{ number_format($advancedAnalytics['response_quality']['helpfulness_rating'], 1) }}/5</div>
                    </div>
                    
                    <h6>Hallucination Rate</h6>
                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $advancedAnalytics['response_quality']['hallucination_rate'] * 100 }}%" aria-valuenow="{{ $advancedAnalytics['response_quality']['hallucination_rate'] * 100 }}" aria-valuemin="0" aria-valuemax="100">{{ number_format($advancedAnalytics['response_quality']['hallucination_rate'] * 100, 1) }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Common Failure Points -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Common Failure Points</h5>
        </div>
        <div class="card-body">
            <div class="row">
                @foreach($conversationQuality['common_failure_points'] as $point => $rate)
                <div class="col-md-4 mb-3">
                    <div class="card {{ $rate > 0.1 ? 'border-warning' : 'border-success' }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ ucfirst(str_replace('_', ' ', $point)) }}</h5>
                            <div class="progress">
                                <div class="progress-bar {{ $rate > 0.1 ? 'bg-warning' : 'bg-success' }}" role="progressbar" style="width: {{ $rate * 100 }}%" aria-valuenow="{{ $rate * 100 }}" aria-valuemin="0" aria-valuemax="100">{{ number_format($rate * 100, 1) }}%</div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Improvement Recommendations -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Conversation Improvement Recommendations</h5>
        </div>
        <div class="card-body">
            <ul class="list-group">
                @if($advancedAnalytics['response_quality']['hallucination_rate'] > 0.05)
                <li class="list-group-item list-group-item-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>Reduce Hallucinations:</strong> Your agent has a relatively high hallucination rate. Consider improving your prompts with more factual constraints or using a more recent model version.
                </li>
                @endif
                @if($conversationQuality['task_completion_rate'] < 0.8)
                <li class="list-group-item list-group-item-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>Improve Task Completion:</strong> Your agent's task completion rate could be improved. Review common failure patterns and enhance your agent's instructions for handling complex requests.
                </li>
                @endif
                @if($advancedAnalytics['user_engagement']['abandonment_rate'] > 0.15)
                <li class="list-group-item list-group-item-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>Reduce Abandonment:</strong> Users are abandoning conversations at a high rate. Consider improving initial responses and making your agent more engaging.
                </li>
                @endif
                @if($advancedAnalytics['contextual_relevance'] < 0.85)
                <li class="list-group-item list-group-item-info">
                    <i class="fas fa-info-circle mr-2"></i>
                    <strong>Enhance Contextual Understanding:</strong> Your agent could better maintain context throughout conversations. Consider increasing context window or improving memory mechanisms.
                </li>
                @endif
                @if($advancedAnalytics['sentiment_analysis']['overall_sentiment'] < 1)
                <li class="list-group-item list-group-item-info">
                    <i class="fas fa-info-circle mr-2"></i>
                    <strong>Improve Sentiment:</strong> User sentiment is neutral or negative. Consider training your agent to be more helpful, friendly, and solution-oriented.
                </li>
                @endif
            </ul>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Conversation Depth Chart
    const depthCtx = document.getElementById('conversationDepthChart').getContext('2d');
    new Chart(depthCtx, {
        type: 'doughnut',
        data: {
            labels: ['1-3 Turns', '4-6 Turns', '7-10 Turns', '11+ Turns'],
            datasets: [{
                data: [
                    {{ $advancedAnalytics['conversation_depth']['turn_distribution']['1-3'] * 100 }},
                    {{ $advancedAnalytics['conversation_depth']['turn_distribution']['4-6'] * 100 }},
                    {{ $advancedAnalytics['conversation_depth']['turn_distribution']['7-10'] * 100 }},
                    {{ $advancedAnalytics['conversation_depth']['turn_distribution']['11+'] * 100 }}
                ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                }
            }
        }
    });
    
    // User Engagement Chart
    const engagementCtx = document.getElementById('userEngagementChart').getContext('2d');
    new Chart(engagementCtx, {
        type: 'bar',
        data: {
            labels: ['Follow-up Rate', 'Abandonment Rate', 'Return User Rate'],
            datasets: [{
                data: [
                    {{ $advancedAnalytics['user_engagement']['follow_up_rate'] * 100 }},
                    {{ $advancedAnalytics['user_engagement']['abandonment_rate'] * 100 }},
                    {{ $advancedAnalytics['user_engagement']['return_user_rate'] * 100 }}
                ],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(75, 192, 192, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: 'Percentage (%)'
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
    
    // Topic Distribution Chart
    const topicCtx = document.getElementById('topicDistributionChart').getContext('2d');
    new Chart(topicCtx, {
        type: 'pie',
        data: {
            labels: @json(array_column($advancedAnalytics['topic_analysis']['most_common_topics'], 'name')),
            datasets: [{
                data: @json(array_map(function($topic) { return $topic['frequency'] * 100; }, $advancedAnalytics['topic_analysis']['most_common_topics'])),
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(153, 102, 255, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });
    
    // Sentiment Analysis Chart
    const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
    new Chart(sentimentCtx, {
        type: 'doughnut',
        data: {
            labels: ['Positive', 'Neutral', 'Negative'],
            datasets: [{
                data: [
                    {{ $advancedAnalytics['sentiment_analysis']['emotional_distribution']['positive'] * 100 }},
                    {{ $advancedAnalytics['sentiment_analysis']['emotional_distribution']['neutral'] * 100 }},
                    {{ $advancedAnalytics['sentiment_analysis']['emotional_distribution']['negative'] * 100 }}
                ],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(255, 99, 132, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });
</script>
@endpush
@endsection