{% extends "base.html" %}

{% block title %}Notes - Fireflies{% endblock %}

{% block content %}
<h1 class="page-title">
    <i class="fas fa-chart-line me-2"></i>{{ _('Grades') }}
</h1>

<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-filter me-2"></i>{{ _('Filter Grades') }}</h5>
    </div>
    <div class="card-body">
        <form method="get" action="{{ url_for('grades') }}" class="row g-3 align-items-center">
            <!-- Period selection -->
            <div class="col-md-4">
                <label for="period" class="form-label">{{ _('Period') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                    <select class="form-select" id="period" name="period">
                        {% for period in periods %}
                        <option value="{{ period.index }}" {% if period.index == selected_period %}selected{% endif %}>
                            {{ period.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- View mode selection -->
            <div class="col-md-3">
                <label for="view_mode" class="form-label">{{ _('Display Mode') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-th-list"></i></span>
                    <select class="form-select" id="view_mode" name="view_mode">
                        <option value="chronological" {% if view_mode == 'chronological' %}selected{% endif %}>{{ _('Chronological') }}</option>
                        <option value="by_subject" {% if view_mode == 'by_subject' %}selected{% endif %}>{{ _('By Subject') }}</option>
                    </select>
                </div>
            </div>

            <!-- Sort order selection -->
            <div class="col-md-3">
                <label for="sort_order" class="form-label">{{ _('Sort') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-sort"></i></span>
                    <select class="form-select" id="sort_order" name="sort_order">
                        <option value="date" {% if sort_order == 'date' %}selected{% endif %}>
                            {% if view_mode == 'chronological' %}{{ _('Date (recent → old)') }}{% else %}{{ _('Alphabetical') }}{% endif %}
                        </option>
                        <option value="best_first" {% if sort_order == 'best_first' %}selected{% endif %}>{{ _('Best grades first') }}</option>
                        <option value="worst_first" {% if sort_order == 'worst_first' %}selected{% endif %}>{{ _('Worst grades first') }}</option>
                    </select>
                </div>
            </div>

            <!-- Subject filter -->
            <div class="col-md-3">
                <label for="subject" class="form-label">{{ _('Subject') }}</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-book"></i></span>
                    <select class="form-select" id="subject" name="subject">
                        <option value="">{{ _('All subjects') }}</option>
                        {% for subject in all_subjects %}
                        <option value="{{ subject }}" {% if subject_filter == subject %}selected{% endif %}>
                            {{ subject }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- Submit button -->
            <div class="col-12 mt-3">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-filter me-1"></i>{{ _('Apply Filters') }}
                </button>
            </div>
        </form>
    </div>
</div>

{% if grades %}
<!-- Overall Average Chart -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-chart-area me-2"></i>{{ _('Overall Average Evolution') }}</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div style="height: 300px; position: relative;">
                    <canvas id="averageChart" style="display:block;"></canvas>
                </div>
                <div id="noGradesMessage" class="text-center py-5">
                    <i class="fas fa-chart-line text-muted" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">{{ _('No grade data available') }}</h5>
                    <p class="text-muted">{{ _('Your grade evolution chart will appear here once you have grades') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">{{ _('Current Averages') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group">
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span><i class="fas fa-user me-2"></i>{{ _('Your Average') }}</span>
                                    <span class="badge bg-primary rounded-pill">{{ overall_average }}/20</span>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span><i class="fas fa-users me-2"></i>{{ _('Class Average') }}</span>
                                    <span class="badge bg-secondary rounded-pill">{{ latest_class_avg }}/20</span>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span><i class="fas fa-arrow-down me-2"></i>{{ _('Minimum') }}</span>
                                    <span class="badge bg-danger rounded-pill">{{ latest_min_avg }}/20</span>
                                </div>
                            </div>
                            <div class="list-group-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span><i class="fas fa-arrow-up me-2"></i>{{ _('Maximum') }}</span>
                                    <span class="badge bg-success rounded-pill">{{ latest_max_avg }}/20</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        {% if view_mode == 'chronological' %}
        <!-- Chronological grades view -->
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>{{ _('List of Grades') }}
                        {% if sort_order == 'date' %}
                            ({{ _('chronological order') }})
                        {% elif sort_order == 'best_first' %}
                            ({{ _('best first') }})
                        {% elif sort_order == 'worst_first' %}
                            ({{ _('worst first') }})
                        {% endif %}
                    </h5>
                    <span class="badge bg-primary">{{ grades|length }} {{ _('Grade') }}s</span>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{{ _('Subject') }}</th>
                                <th>{{ _('Grade') }}</th>
                                <th>{{ _('Out of') }}</th>
                                <th>{{ _('Coef.') }}</th>
                                <th>{{ _('Percentage') }}</th>
                                <th>{{ _('Date') }}</th>
                                <th>{{ _('Comment') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for grade in grades %}
                            {% set percentage = 0 %}
                            {% if grade.grade is defined and grade.out_of is defined %}
                                {% set grade_float = grade.grade|default(0)|string|replace(',', '.') %}
                                {% set out_of_float = grade.out_of|default(0)|string|replace(',', '.') %}
                                {% if grade_float|float > 0 and out_of_float|float > 0 %}
                                    {% set percentage = (grade_float|float / out_of_float|float * 100)|round|int %}
                                {% endif %}
                            {% endif %}
                            <tr>
                                <td class="fw-bold">{{ grade.subject }}</td>
                                <td>{{ grade.grade }}</td>
                                <td>{{ grade.out_of }}</td>
                                <td>{{ grade.coefficient }}</td>
                                <td>
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar
                                            {% if percentage >= 80 %}bg-success
                                            {% elif percentage >= 60 %}bg-info
                                            {% elif percentage >= 40 %}bg-warning
                                            {% else %}bg-danger{% endif %}"
                                            role="progressbar"
                                            style="width: {{ percentage }}%;"
                                            aria-valuenow="{{ percentage }}"
                                            aria-valuemin="0"
                                            aria-valuemax="100">{{ percentage }}%</div>
                                    </div>
                                </td>
                                <td>{{ grade.date }}</td>
                                <td>
                                    {% if grade.comment %}
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                            title="{{ grade.comment }}">
                                        <i class="fas fa-comment-dots"></i>
                                    </button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% else %}
        <!-- By subject view -->
        <div class="accordion" id="subjectsAccordion">
            {% for subject, data in subjects_data.items() %}
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{ loop.index }}">
                    <button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button"
                            data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}"
                            aria-expanded="{% if loop.first %}true{% else %}false{% endif %}"
                            aria-controls="collapse{{ loop.index }}">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <span><i class="fas fa-book me-2"></i>{{ subject }}</span>
                            <span class="badge bg-primary rounded-pill ms-2">{{ data.grades|length }} {{ _('Grade') }}s</span>
                            <span class="ms-auto me-3">
                                {{ _('Average') }}:
                                <span class="badge
                                    {% if data.average_percentage >= 80 %}bg-success
                                    {% elif data.average_percentage >= 60 %}bg-info
                                    {% elif data.average_percentage >= 40 %}bg-warning
                                    {% else %}bg-danger{% endif %}">
                                    {{ data.average_out_of_20 }}/20 ({{ data.average_percentage }}%)
                                </span>
                            </span>
                        </div>
                    </button>
                </h2>
                <div id="collapse{{ loop.index }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}"
                     aria-labelledby="heading{{ loop.index }}" data-bs-parent="#subjectsAccordion">
                    <div class="accordion-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>{{ _('Grade') }}</th>
                                        <th>{{ _('Out of') }}</th>
                                        <th>{{ _('Coef.') }}</th>
                                        <th>{{ _('Percentage') }}</th>
                                        <th>{{ _('Date') }}</th>
                                        <th>{{ _('Comment') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for grade in data.grades %}
                                    {% set percentage = 0 %}
                                    {% if grade.grade is defined and grade.out_of is defined %}
                                        {% set grade_float = grade.grade|default(0)|string|replace(',', '.') %}
                                        {% set out_of_float = grade.out_of|default(0)|string|replace(',', '.') %}
                                        {% if grade_float|float > 0 and out_of_float|float > 0 %}
                                            {% set percentage = (grade_float|float / out_of_float|float * 100)|round|int %}
                                        {% endif %}
                                    {% endif %}
                                    <tr>
                                        <td>{{ grade.grade }}</td>
                                        <td>{{ grade.out_of }}</td>
                                        <td>{{ grade.coefficient }}</td>
                                        <td>
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar
                                                    {% if percentage >= 80 %}bg-success
                                                    {% elif percentage >= 60 %}bg-info
                                                    {% elif percentage >= 40 %}bg-warning
                                                    {% else %}bg-danger{% endif %}"
                                                    role="progressbar"
                                                    style="width: {{ percentage }}%;"
                                                    aria-valuenow="{{ percentage }}"
                                                    aria-valuemin="0"
                                                    aria-valuemax="100">{{ percentage }}%</div>
                                            </div>
                                        </td>
                                        <td>{{ grade.date }}</td>
                                        <td>
                                            {% if grade.comment %}
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                                    title="{{ grade.comment }}">
                                                <i class="fas fa-comment-dots"></i>
                                            </button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>

        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>{{ _('Grade Distribution') }}</h5>
                </div>
                <div class="card-body">
                    {% set grade_ranges = {
                        'excellent': {'min': 80, 'max': 100, 'count': 0, 'color': 'success', 'label': _('Excellent')},
                        'good': {'min': 60, 'max': 79, 'count': 0, 'color': 'info', 'label': _('Good')},
                        'average': {'min': 40, 'max': 59, 'count': 0, 'color': 'warning', 'label': _('Average')},
                        'poor': {'min': 0, 'max': 39, 'count': 0, 'color': 'danger', 'label': _('Poor')}
                    } %}

                    {% for grade in grades %}
                        {% set percentage = 0 %}
                        {% if grade.grade is defined and grade.out_of is defined %}
                            {% set grade_float = grade.grade|default(0)|string|replace(',', '.') %}
                            {% set out_of_float = grade.out_of|default(0)|string|replace(',', '.') %}
                            {% if grade_float|float > 0 and out_of_float|float > 0 %}
                                {% set percentage = (grade_float|float / out_of_float|float * 100)|round|int %}
                            {% endif %}
                        {% endif %}
                        {% if percentage >= 80 %}
                            {% set _ = grade_ranges.excellent.update({'count': grade_ranges.excellent.count + 1}) %}
                        {% elif percentage >= 60 %}
                            {% set _ = grade_ranges.good.update({'count': grade_ranges.good.count + 1}) %}
                        {% elif percentage >= 40 %}
                            {% set _ = grade_ranges.average.update({'count': grade_ranges.average.count + 1}) %}
                        {% else %}
                            {% set _ = grade_ranges.poor.update({'count': grade_ranges.poor.count + 1}) %}
                        {% endif %}
                    {% endfor %}

                    <div class="mb-4">
                        {% for range_name, range_data in grade_ranges.items() %}
                            <div class="mb-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <span>{{ range_data.label }} ({{ range_data.min }}-{{ range_data.max }}%)</span>
                                    <span>{{ range_data.count }}</span>
                                </div>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar bg-{{ range_data.color }}" role="progressbar"
                                         style="width: {{ (range_data.count / grades|length * 100)|round|int if grades|length > 0 else 0 }}%;"
                                         aria-valuenow="{{ range_data.count }}"
                                         aria-valuemin="0"
                                         aria-valuemax="{{ grades|length }}">
                                        {{ (range_data.count / grades|length * 100)|round|int if grades|length > 0 else 0 }}%
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-calculator me-2"></i>{{ _('Grade Statistics') }}</h5>
                </div>
                <div class="card-body">
                    {% set total_percentage = 0 %}
                    {% set valid_grades = 0 %}
                    {% set highest = {'subject': '', 'percentage': 0} %}
                    {% set lowest = {'subject': '', 'percentage': 100} %}

                    {% for grade in grades %}
                        {% set percentage = 0 %}
                        {% if grade.grade is defined and grade.out_of is defined %}
                            {% set grade_float = grade.grade|default(0)|string|replace(',', '.') %}
                            {% set out_of_float = grade.out_of|default(0)|string|replace(',', '.') %}
                            {% if grade_float|float > 0 and out_of_float|float > 0 %}
                                {% set percentage = (grade_float|float / out_of_float|float * 100)|round|int %}
                            {% endif %}
                        {% endif %}

                        {% if percentage > 0 %}
                            {% set total_percentage = total_percentage + percentage %}
                            {% set valid_grades = valid_grades + 1 %}

                            {% if percentage > highest.percentage %}
                                {% set _ = highest.update({'subject': grade.subject, 'percentage': percentage}) %}
                            {% endif %}

                            {% if percentage < lowest.percentage %}
                                {% set _ = lowest.update({'subject': grade.subject, 'percentage': percentage}) %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}

                    {% set average = (total_percentage / valid_grades)|round|int if valid_grades > 0 else 0 %}

                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="p-3 border rounded bg-light">
                                <h3 class="text-primary">{{ average }}%</h3>
                                <p class="mb-0">{{ _('Average') }}</p>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="p-3 border rounded bg-light">
                                <h3 class="text-success">{{ highest.percentage }}%</h3>
                                <p class="mb-0">{{ _('Maximum') }}</p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="p-3 border rounded bg-light">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 class="text-success mb-0">{{ highest.subject }}</h5>
                                        <small class="text-muted">{{ _('Best Subject') }}</small>
                                    </div>
                                    <div>
                                        <h5 class="text-danger mb-0">{{ lowest.subject }}</h5>
                                        <small class="text-muted">{{ _('Needs Improvement') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="text-center py-5">
        <i class="fas fa-graduation-cap text-muted" style="font-size: 4rem;"></i>
        <h4 class="mt-3">{{ _('No grades found for the selected period') }}</h4>
        <p class="text-muted">{{ _('Try selecting a different period') }}</p>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        // Add event listener for accordion changes to reinitialize tooltips
        var accordionElements = document.querySelectorAll('.accordion-button');
        accordionElements.forEach(function(element) {
            element.addEventListener('click', function() {
                // Wait for accordion animation to complete
                setTimeout(function() {
                    // Reinitialize tooltips
                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl)
                    });
                }, 350);
            });
        });

        // Auto-submit form when filters change
        document.getElementById('period').addEventListener('change', function() {
            // Ensure period has a valid value before submitting
            if (this.value !== undefined) {
                this.form.submit();
            }
        });

        document.getElementById('view_mode').addEventListener('change', function() {
            this.form.submit();
        });

        document.getElementById('subject').addEventListener('change', function() {
            this.form.submit();
        });

        document.getElementById('sort_order').addEventListener('change', function() {
            this.form.submit();
        });

        // Initialize the average chart
        var chartData = {{ chart_data|safe }};
        var chartCanvas = document.getElementById('averageChart');
        var noGradesMessage = document.getElementById('noGradesMessage');

        // Debug logging
        console.log("Chart data:", chartData);
        console.log("Chart data labels length:", chartData.labels ? chartData.labels.length : 0);

        if (chartCanvas && chartData && chartData.labels && chartData.labels.length > 0) {
            console.log("Showing chart, hiding message");
            // Show chart, hide message
            chartCanvas.style.display = 'block';
            if (noGradesMessage) noGradesMessage.style.display = 'none';

            // Clean up null values in datasets to prevent chart errors
            if (chartData.student_avg) {
                chartData.student_avg = chartData.student_avg.map(val => val === null ? undefined : val);
            }
            if (chartData.class_avg) {
                chartData.class_avg = chartData.class_avg.map(val => val === null ? undefined : val);
            }
            if (chartData.min_avg) {
                chartData.min_avg = chartData.min_avg.map(val => val === null ? undefined : val);
            }
            if (chartData.max_avg) {
                chartData.max_avg = chartData.max_avg.map(val => val === null ? undefined : val);
            }

            var ctx = chartCanvas.getContext('2d');
            var averageChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: chartData.labels,
                    datasets: [
                        {
                            label: '{{ _("Your Average") }}',
                            data: chartData.student_avg,
                            borderColor: '#4361ee',
                            backgroundColor: 'rgba(67, 97, 238, 0.1)',
                            borderWidth: 3,
                            tension: 0.3,
                            fill: true,
                            spanGaps: true
                        },
                        {
                            label: '{{ _("Class Average") }}',
                            data: chartData.class_avg,
                            borderColor: '#6c757d',
                            backgroundColor: 'transparent',
                            borderWidth: 2,
                            borderDash: [5, 5],
                            tension: 0.3,
                            fill: false,
                            spanGaps: true
                        },
                        {
                            label: '{{ _("Minimum") }}',
                            data: chartData.min_avg,
                            borderColor: '#dc3545',
                            backgroundColor: 'transparent',
                            borderWidth: 2,
                            borderDash: [3, 3],
                            tension: 0.3,
                            fill: false,
                            spanGaps: true
                        },
                        {
                            label: '{{ _("Maximum") }}',
                            data: chartData.max_avg,
                            borderColor: '#28a745',
                            backgroundColor: 'transparent',
                            borderWidth: 2,
                            borderDash: [3, 3],
                            tension: 0.3,
                            fill: false,
                            spanGaps: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 20,
                            title: {
                                display: true,
                                text: '{{ _("Average out of 20") }}'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '{{ _("Date") }}'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y + '/20';
                                }
                            }
                        },
                        legend: {
                            position: 'top',
                        }
                    }
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 0,
                            max: 20,
                            title: {
                                display: true,
                                text: '{{ _("Average") }} /20'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '{{ _("Date") }}'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        },
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });
        } else if (chartCanvas && noGradesMessage) {
            console.log("Hiding chart, showing message");
            // Hide chart, show message
            chartCanvas.style.display = 'none';
            noGradesMessage.style.display = 'block';
        }
    });
</script>
{% endblock %}