{% 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">{{ period.corporation_name }} &bull; {% trans "Ingested on" %} {{ period.created_at|date:"Y-m-d H:i" }} UTC</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{% url 'fatanalysis:period_list' %}" class="btn btn-outline-light btn-sm">
            <i class="fas fa-arrow-left me-1"></i> {% trans "All Periods" %}
        </a>
        <a href="{% url 'fatanalysis:index' %}" class="btn btn-primary btn-sm">
            <i class="fas fa-chart-line me-1"></i> {% trans "Dashboard" %}
        </a>
    </div>
</div>

<!-- Period Stat 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 "Period" %}</div>
            <div class="fat-stat-number text-primary mt-1">{{ period.label }}</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 FATs" %}</div>
            <div class="fat-stat-number text-success mt-1">{{ period.total_fats }}</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 Pilots" %}</div>
            <div class="fat-stat-number text-info mt-1">{{ period.active_pilots_count }}</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 Recorded" %}</div>
            <div class="fat-stat-number text-warning mt-1">{{ period.total_pilots_count }}</div>
        </div>
    </div>
</div>

<!-- Top Pilots & Ship Breakdown 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-trophy me-1 text-warning"></i> {% trans "Top Participating Pilots" %}
            </div>
            <div class="card-body">
                {% if top_labels %}
                    <div style="position: relative; height: 260px;">
                        <canvas id="playerChart"></canvas>
                    </div>
                {% else %}
                    <p class="text-center text-muted py-4">{% trans "No entries available to display." %}</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-rocket me-1 text-info"></i> {% trans "Ship Types Breakdown" %}
            </div>
            <div class="card-body">
                {% if ship_type_distribution %}
                    <div style="position: relative; height: 260px;">
                        <canvas id="shipChart"></canvas>
                    </div>
                {% else %}
                    <div class="text-center py-5 text-muted">
                        <i class="fas fa-info-circle fa-2x mb-2 opacity-50"></i>
                        <p class="mb-0">{% trans "No ship type breakdown recorded for this month." %}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Activity Distribution Row: FATs by Time & FATs per Day -->
<div class="row g-4 mb-4">
    <div class="col-lg-6">
        <div class="card shadow-sm h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-bold"><i class="fas fa-clock me-1 text-warning"></i> {% trans "FATs by Time" %}</span>
                <span class="badge bg-secondary">{% trans "EVE Time (UTC)" %}</span>
            </div>
            <div class="card-body">
                {% if has_time_data %}
                    <div style="position: relative; height: 240px;">
                        <canvas id="timeChart"></canvas>
                    </div>
                {% else %}
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-clock fa-2x mb-2 opacity-50"></i>
                        <p class="mb-0">{% trans "No hourly time distribution data recorded for this month." %}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card shadow-sm h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-bold"><i class="fas fa-calendar-day me-1 text-success"></i> {% trans "FATs per Day" %}</span>
                <span class="badge bg-secondary">{% trans "Weekday" %}</span>
            </div>
            <div class="card-body">
                {% if has_weekday_data %}
                    <div style="position: relative; height: 240px;">
                        <canvas id="weekdayChart"></canvas>
                    </div>
                {% else %}
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-calendar-day fa-2x mb-2 opacity-50"></i>
                        <p class="mb-0">{% trans "No weekday distribution data recorded for this month." %}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Entries Table -->
<div class="card shadow-sm mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span class="fw-bold"><i class="fas fa-list me-1 text-primary"></i> {% trans "Individual Pilot Participation" %}</span>
        <span class="badge bg-secondary">{{ entries|length }} {% trans "Entries" %}</span>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover align-middle w-100" id="entries-table">
                <thead>
                    <tr>
                        <th>{% trans "Pilot Name" %}</th>
                        <th class="text-center">{% trans "Status" %}</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>
                                <a href="{% url 'fatanalysis:player_detail' character_name=entry.character_name %}" class="fw-bold text-decoration-none">
                                    {{ entry.character_name }}
                                </a>
                            </td>
                            <td class="text-center">
                                {% if entry.is_main %}
                                    <span class="badge bg-success">{% trans "Main" %}</span>
                                {% else %}
                                    <span class="badge bg-secondary">{% trans "Alt" %}</span>
                                {% endif %}
                            </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() {
            $('#entries-table').DataTable({
                order: [[2, 'desc']],
                pageLength: 25,
                responsive: false,
                language: {
                    emptyTable: "{% trans 'No entries recorded for this period.' %}",
                    zeroRecords: "{% trans 'No matching entries found.' %}",
                    search: "_INPUT_",
                    searchPlaceholder: "{% trans 'Search entries...' %}"
                }
            });

            {% if top_labels %}
            const ctx = document.getElementById('playerChart');
            if (ctx) {
                new Chart(ctx.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: {{ top_labels|safe }},
                        datasets: [{
                            label: '{% trans "Total FATs" %}',
                            data: {{ top_values|safe }},
                            backgroundColor: 'rgba(54, 162, 235, 0.45)',
                            borderColor: '#36A2EB',
                            borderWidth: 1.5,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: { color: 'rgba(255, 255, 255, 0.08)' }
                            },
                            x: {
                                grid: { display: false }
                            }
                        },
                        plugins: {
                            legend: { display: false }
                        }
                    }
                });
            }
            {% endif %}

            // Ship Types Breakdown (Doughnut Chart)
            {% if ship_type_distribution %}
            const shipCtx = document.getElementById('shipChart');
            if (shipCtx) {
                const shipData = {{ ship_type_distribution|safe }};
                const labels = Object.keys(shipData);
                const values = Object.values(shipData);
                const colors = [
                    '#36A2EB', '#4BC0C0', '#FF6384', '#FF9F40', '#9966FF',
                    '#FFCE56', '#20c997', '#8AC926', '#1982C4', '#6A4C93',
                    '#fd7e14', '#0dcaf0', '#6c757d'
                ];

                new Chart(shipCtx.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: values,
                            backgroundColor: colors.slice(0, labels.length),
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: { boxWidth: 12, font: { size: 10 } }
                            }
                        }
                    }
                });
            }
            {% endif %}

            // FATs by Time
            {% if has_time_data %}
            const timeCtx = document.getElementById('timeChart');
            if (timeCtx) {
                new Chart(timeCtx.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: {{ fats_by_time_labels|safe }},
                        datasets: [{
                            label: '{% trans "# of FATs" %}',
                            data: {{ fats_by_time_values|safe }},
                            backgroundColor: 'rgba(255, 193, 7, 0.25)',
                            borderColor: '#ffc107',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3,
                            pointRadius: 3,
                            pointBackgroundColor: '#ffc107'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: { color: 'rgba(255, 255, 255, 0.08)' }
                            },
                            x: {
                                grid: { color: 'rgba(255, 255, 255, 0.04)' },
                                ticks: { maxRotation: 45, minRotation: 0 }
                            }
                        },
                        plugins: {
                            legend: { display: false }
                        }
                    }
                });
            }
            {% endif %}

            // FATs per Day
            {% if has_weekday_data %}
            const weekdayCtx = document.getElementById('weekdayChart');
            if (weekdayCtx) {
                new Chart(weekdayCtx.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: {{ fats_by_weekday_labels|safe }},
                        datasets: [{
                            label: '{% trans "# of FATs" %}',
                            data: {{ fats_by_weekday_values|safe }},
                            backgroundColor: 'rgba(25, 135, 84, 0.65)',
                            borderColor: '#198754',
                            borderWidth: 1.5,
                            borderRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: { color: 'rgba(255, 255, 255, 0.08)' }
                            },
                            x: {
                                grid: { display: false }
                            }
                        },
                        plugins: {
                            legend: { display: false }
                        }
                    }
                });
            }
            {% endif %}
        });
    </script>
{% endblock %}