{% extends "base.html" %}

{% block title %}Analytics - Liputan6 Summarizer{% endblock %}

{% block extra_css %}
<style>
    .stat-card {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        border-radius: var(--border-radius);
        padding: 25px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .chart-container {
        position: relative;
        height: 400px;
        margin: 20px 0;
    }

    .analysis-card {
        background: rgba(255, 255, 255, 0.8);
        border-radius: var(--border-radius);
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
    }

    .metric-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .metric-item:last-child {
        border-bottom: none;
    }

    .metric-label {
        font-weight: 600;
        color: var(--dark-color);
    }

    .metric-value {
        font-weight: 700;
        color: var(--primary-color);
    }

    .progress-custom {
        height: 8px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
    }

    .progress-bar-custom {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border-radius: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Header -->
    <div class="col-12 mb-4">
        <div class="text-center">
            <h2 class="mb-3">
                <i class="fas fa-chart-line me-2"></i>Analytics Dashboard
            </h2>
            <p class="text-muted">Analisis performa model dan statistik summarization</p>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="col-md-3 mb-4">
        <div class="stat-card">
            <div class="stat-number" id="total-summaries">0</div>
            <div class="stat-label">Total Summaries</div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="stat-card" style="background: linear-gradient(135deg, var(--success-color), var(--accent-color));">
            <div class="stat-number" id="avg-processing-time">0ms</div>
            <div class="stat-label">Avg Processing Time</div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="stat-card" style="background: linear-gradient(135deg, var(--warning-color), #f97316);">
            <div class="stat-number" id="model-accuracy">0%</div>
            <div class="stat-label">Model Accuracy</div>
        </div>
    </div>
    <div class="col-md-3 mb-4">
        <div class="stat-card" style="background: linear-gradient(135deg, var(--accent-color), var(--success-color));">
            <div class="stat-number" id="rouge-score">0.00</div>
            <div class="stat-label">Avg ROUGE Score</div>
        </div>
    </div>

    <!-- Model Performance Chart -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-chart-bar me-2"></i>Model Performance Comparison
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="performanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Processing Time Chart -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-clock me-2"></i>Processing Time Distribution
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="timeChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Text Analysis -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-text-width me-2"></i>Text Analysis
            </div>
            <div class="card-body">
                <form id="analyze-form">
                    <div class="mb-3">
                        <label for="analyze-text" class="form-label">Input Text untuk Analisis</label>
                        <textarea class="form-control" id="analyze-text" rows="6" 
                                  placeholder="Masukkan teks untuk dianalisis..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-2"></i>Analyze Text
                    </button>
                </form>

                <div id="analysis-results" style="display: none;" class="mt-4">
                    <h6><i class="fas fa-chart-pie me-2"></i>Analysis Results:</h6>
                    <div class="analysis-card">
                        <div class="metric-item">
                            <span class="metric-label">Total Characters:</span>
                            <span class="metric-value" id="char-count">0</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">Total Words:</span>
                            <span class="metric-value" id="word-count">0</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">Total Sentences:</span>
                            <span class="metric-value" id="sentence-count">0</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">Avg Words per Sentence:</span>
                            <span class="metric-value" id="avg-words">0</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">Reading Time:</span>
                            <span class="metric-value" id="reading-time">0 min</span>
                        </div>
                    </div>

                    <div class="mt-3">
                        <h6><i class="fas fa-tags me-2"></i>Readability Score:</h6>
                        <div class="progress-custom">
                            <div class="progress-bar-custom" id="readability-bar" style="width: 0%"></div>
                        </div>
                        <small class="text-muted mt-1 d-block">
                            <span id="readability-text">Calculating...</span>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Model Comparison -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-balance-scale me-2"></i>Model Comparison
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Model</th>
                                <th>ROUGE-1</th>
                                <th>ROUGE-2</th>
                                <th>F1-Score</th>
                                <th>Speed</th>
                            </tr>
                        </thead>
                        <tbody id="model-comparison">
                            <tr>
                                <td><strong>TextRank</strong></td>
                                <td><span class="badge bg-primary">0.289</span></td>
                                <td><span class="badge bg-primary">0.138</span></td>
                                <td><span class="badge bg-success">0.255</span></td>
                                <td><span class="badge bg-success">Fast</span></td>
                            </tr>
                            <tr>
                                <td><strong>TF-IDF + LR</strong></td>
                                <td><span class="badge bg-primary">0.359</span></td>
                                <td><span class="badge bg-primary">0.198</span></td>
                                <td><span class="badge bg-success">0.401</span></td>
                                <td><span class="badge bg-warning">Medium</span></td>
                            </tr>
                            <tr>
                                <td><strong>BERT-based</strong></td>
                                <td><span class="badge bg-primary">0.420</span></td>
                                <td><span class="badge bg-primary">0.250</span></td>
                                <td><span class="badge bg-success">0.480</span></td>
                                <td><span class="badge bg-danger">Slow</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    <button class="btn btn-outline-primary btn-sm" onclick="refreshModelStats()">
                        <i class="fas fa-sync-alt me-2"></i>Refresh Stats
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-history me-2"></i>Recent Summarization Activity
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Time</th>
                                <th>Type</th>
                                <th>Model</th>
                                <th>Input Length</th>
                                <th>Summary Length</th>
                                <th>Processing Time</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="activity-log">
                            <!-- Activity akan diisi via JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let performanceChart, timeChart;

    $(document).ready(function() {
        initializeCharts();
        loadAnalyticsData();
        
        // Auto refresh every 30 seconds
        setInterval(loadAnalyticsData, 30000);
    });

    function initializeCharts() {
        // Performance Chart
        const performanceCtx = document.getElementById('performanceChart').getContext('2d');
        performanceChart = new Chart(performanceCtx, {
            type: 'bar',
            data: {
                labels: ['TextRank', 'TF-IDF + LR', 'BERT-based'],
                datasets: [{
                    label: 'ROUGE-1',
                    data: [0.289, 0.359, 0.420],
                    backgroundColor: 'rgba(99, 102, 241, 0.8)',
                    borderColor: 'rgba(99, 102, 241, 1)',
                    borderWidth: 2
                }, {
                    label: 'ROUGE-2',
                    data: [0.138, 0.198, 0.250],
                    backgroundColor: 'rgba(139, 92, 246, 0.8)',
                    borderColor: 'rgba(139, 92, 246, 1)',
                    borderWidth: 2
                }, {
                    label: 'F1-Score',
                    data: [0.255, 0.401, 0.480],
                    backgroundColor: 'rgba(16, 185, 129, 0.8)',
                    borderColor: 'rgba(16, 185, 129, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Model Performance Metrics'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 0.5
                    }
                }
            }
        });

        // Time Chart
        const timeCtx = document.getElementById('timeChart').getContext('2d');
        timeChart = new Chart(timeCtx, {
            type: 'doughnut',
            data: {
                labels: ['< 1s', '1-3s', '3-5s', '> 5s'],
                datasets: [{
                    data: [45, 30, 20, 5],
                    backgroundColor: [
                        'rgba(16, 185, 129, 0.8)',
                        'rgba(245, 158, 11, 0.8)',
                        'rgba(239, 68, 68, 0.8)',
                        'rgba(107, 114, 128, 0.8)'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    title: {
                        display: true,
                        text: 'Processing Time Distribution'
                    }
                }
            }
        });
    }

    function loadAnalyticsData() {
        // Load analytics data from server
        $.get('/api/analytics')
            .done(function(data) {
                updateStatistics(data);
                updateActivityLog(data.recent_activity || []);
            })
            .fail(function() {
                console.log('Failed to load analytics data');
            });
    }

    function updateStatistics(data) {
        $('#total-summaries').text(data.total_summaries || 0);
        $('#avg-processing-time').text((data.avg_processing_time || 0) + 'ms');
        $('#model-accuracy').text(((data.model_accuracy || 0) * 100).toFixed(1) + '%');
        $('#rouge-score').text((data.avg_rouge_score || 0).toFixed(3));
    }

    function updateActivityLog(activities) {
        const tbody = $('#activity-log');
        tbody.empty();

        if (activities.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        <i class="fas fa-info-circle me-2"></i>No recent activity
                    </td>
                </tr>
            `);
            return;
        }

        activities.forEach(activity => {
            const statusBadge = activity.status === 'success' ? 
                '<span class="badge bg-success">Success</span>' : 
                '<span class="badge bg-danger">Failed</span>';

            tbody.append(`
                <tr>
                    <td>${activity.time}</td>
                    <td>${activity.type}</td>
                    <td>${activity.model}</td>
                    <td>${activity.input_length}</td>
                    <td>${activity.summary_length}</td>
                    <td>${activity.processing_time}ms</td>
                    <td>${statusBadge}</td>
                </tr>
            `);
        });
    }

    // Text Analysis
    $('#analyze-form').on('submit', function(e) {
        e.preventDefault();
        
        const text = $('#analyze-text').val().trim();
        if (!text) {
            showAlert('Masukkan teks untuk dianalisis!', 'warning');
            return;
        }

        analyzeText(text);
    });

    function analyzeText(text) {
        // Basic text analysis
        const charCount = text.length;
        const wordCount = text.split(/\s+/).filter(word => word.length > 0).length;
        const sentenceCount = text.split(/[.!?]+/).filter(s => s.trim().length > 0).length;
        const avgWords = sentenceCount > 0 ? (wordCount / sentenceCount).toFixed(1) : 0;
        const readingTime = Math.ceil(wordCount / 200); // Assuming 200 words per minute

        // Simple readability score (based on sentence length and word complexity)
        const avgWordsPerSentence = wordCount / sentenceCount;
        const readabilityScore = Math.max(0, Math.min(100, 100 - (avgWordsPerSentence * 2)));

        // Update UI
        $('#char-count').text(charCount.toLocaleString());
        $('#word-count').text(wordCount.toLocaleString());
        $('#sentence-count').text(sentenceCount);
        $('#avg-words').text(avgWords);
        $('#reading-time').text(readingTime + ' min');

        $('#readability-bar').css('width', readabilityScore + '%');
        let readabilityText = 'Very Hard';
        if (readabilityScore > 80) readabilityText = 'Very Easy';
        else if (readabilityScore > 60) readabilityText = 'Easy';
        else if (readabilityScore > 40) readabilityText = 'Medium';
        else if (readabilityScore > 20) readabilityText = 'Hard';
        
        $('#readability-text').text(`${readabilityScore.toFixed(1)}% - ${readabilityText}`);

        $('#analysis-results').show();
    }

    function refreshModelStats() {
        showAlert('Refreshing model statistics...', 'info');
        loadAnalyticsData();
    }
</script>
{% endblock %}