{% extends "fatanalysis/base.html" %}
{% load i18n %}

{% block fatanalysis_content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 pb-2 border-bottom">
    <div>
        <h2 class="h4 mb-0 fw-bold">{{ title }}</h2>
        <small class="text-muted">{% trans "Longitudinal fleet activity and FAT type breakdown" %}</small>
    </div>
    <div>
        <a href="{% url 'fatanalysis:index' %}" class="btn btn-outline-light btn-sm">
            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Dashboard" %}
        </a>
    </div>
</div>

<!-- Pilot Summary KPI Cards -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card fat-stat-card h-100 p-3">
            <div class="text-muted small text-uppercase fw-semibold">{% trans "Total FATs Recorded" %}</div>
            <div class="fat-stat-number text-primary mt-1">{{ total_fats|default:0 }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card fat-stat-card h-100 p-3">
            <div class="text-muted small text-uppercase fw-semibold">{% trans "Active Months" %}</div>
            <div class="fat-stat-number text-success mt-1">{{ active_periods_count|default:0 }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card fat-stat-card h-100 p-3">
            <div class="text-muted small text-uppercase fw-semibold">{% trans "Total Months Tracked" %}</div>
            <div class="fat-stat-number text-info mt-1">{{ total_periods_count|default:0 }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card fat-stat-card h-100 p-3">
            <div class="text-muted small text-uppercase fw-semibold">{% trans "Main Status" %}</div>
            <div class="fat-stat-number mt-1">
                {% if latest_entry.is_main %}
                    <span class="badge bg-success fs-5">{% trans "Main" %}</span>
                {% else %}
                    <span class="badge bg-secondary fs-5">{% trans "Alt" %}</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Visualizations Row -->
<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card shadow-sm h-100">
            <div class="card-header fw-bold">
                <i class="fas fa-chart-line me-1 text-primary"></i> {% trans "Historical Monthly Participation" %}
            </div>
            <div class="card-body">
                {% if trend_totals %}
                    <div style="position: relative; height: 260px;">
                        <canvas id="playerTrendChart"></canvas>
                    </div>
                {% else %}
                    <p class="text-center text-muted py-5">{% trans "No trend data available." %}</p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card shadow-sm h-100">
            <div class="card-header fw-bold">
                <i class="fas fa-chart-pie me-1 text-info"></i> {% trans "FAT Type Breakdown" %}
            </div>
            <div class="card-body">
                {% if pie_values %}
                    <div style="position: relative; height: 260px;">
                        <canvas id="playerPieChart"></canvas>
                    </div>
                {% else %}
                    <p class="text-center text-muted py-5">{% trans "No breakdown data available." %}</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Historical Data Table -->
<div class="card shadow-sm mb-4">
    <div class="card-header fw-bold">
        <i class="fas fa-table me-1 text-primary"></i> {% trans "Monthly Participation History" %}
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover align-middle w-100" id="player-table">
                <thead>
                    <tr>
                        <th>{% trans "Period" %}</th>
                        <th class="text-center">{% trans "Total FATs" %}</th>
                        {% for header in dynamic_headers %}
                            <th class="text-center">{{ header }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for entry in entries %}
                        <tr>
                            <td class="fw-semibold">
                                <a href="{% url 'fatanalysis:period_detail' period_id=entry.period.id %}" class="text-decoration-none">
                                    {{ entry.period.label }}
                                </a>
                            </td>
                            <td class="text-center">
                                {% if entry.total_fats > 0 %}
                                    <span class="badge bg-primary fs-6">{{ entry.total_fats }}</span>
                                {% else %}
                                    <span class="text-muted">0</span>
                                {% endif %}
                            </td>
                            {% for val in entry.dynamic_values %}
                                <td class="text-center">
                                    {% if val > 0 %}
                                        {{ val }}
                                    {% else %}
                                        <span class="text-muted opacity-50">-</span>
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
    {{ block.super }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function() {
            $('#player-table').DataTable({
                order: [[0, 'desc']],
                pageLength: 25,
                responsive: false,
                language: {
                    emptyTable: "{% trans 'No entries found.' %}",
                    zeroRecords: "{% trans 'No matching entries found.' %}",
                    search: "_INPUT_",
                    searchPlaceholder: "{% trans 'Search...' %}"
                }
            });

            {% if trend_totals %}
            const trendCtx = document.getElementById('playerTrendChart');
            if (trendCtx) {
                new Chart(trendCtx.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: {{ trend_labels|safe }},
                        datasets: [{
                            label: '{% trans "FATs" %}',
                            data: {{ trend_totals|safe }},
                            borderColor: '#36A2EB',
                            backgroundColor: 'rgba(54, 162, 235, 0.15)',
                            fill: true,
                            tension: 0.25,
                            borderWidth: 2,
                            pointRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: { color: 'rgba(255, 255, 255, 0.08)' }
                            },
                            x: {
                                grid: { display: false }
                            }
                        }
                    }
                });
            }
            {% endif %}

            {% if pie_values %}
            const pieCtx = document.getElementById('playerPieChart');
            if (pieCtx) {
                new Chart(pieCtx.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: {{ pie_labels|safe }},
                        datasets: [{
                            data: {{ pie_values|safe }},
                            backgroundColor: [
                                '#36A2EB', '#4BC0C0', '#FF6384', '#FF9F40', '#9966FF',
                                '#FFCE56', '#4D5360', '#8AC926', '#1982C4', '#6A4C93'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: { boxWidth: 10, font: { size: 10 } }
                            }
                        }
                    }
                });
            }
            {% endif %}
        });
    </script>
{% endblock %}