{% extends "base.html" %}

{% block title %}{{ _('Statistics & Analysis') }} - PyArchInit-Mini{% endblock %}

{% block extra_css %}
<style>
    .chart-container {
        position: relative;
        height: 400px;
        margin-bottom: 20px;
    }

    .chart-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .chart-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 15px;
        color: #2E86AB;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-box {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
    }

    .stat-box .stat-icon {
        font-size: 1.5rem;
        margin-bottom: 5px;
        opacity: 0.85;
    }

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

    .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .filter-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .table-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .table-card .table {
        margin-bottom: 0;
    }

    .collapsible-header {
        cursor: pointer;
        user-select: none;
    }

    .collapsible-header .toggle-icon {
        transition: transform 0.2s;
    }

    .collapsible-header.collapsed .toggle-icon {
        transform: rotate(-90deg);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="mb-4">
        <i class="fas fa-chart-pie"></i> {{ _('Statistics & Analysis') }}
    </h1>

    <!-- Filter Section -->
    <div class="filter-card">
        <form method="GET" action="" id="filter-form">
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label for="site-filter" class="form-label">{{ _('Site') }}</label>
                    <select class="form-select" id="site-filter" name="site">
                        <option value="">{{ _('All Sites') }}</option>
                        {% for site in sites %}
                        <option value="{{ site }}" {% if request.args.get('site') == site %}selected{% endif %}>{{ site }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="year-from" class="form-label">{{ _('Year From') }}</label>
                    <input type="number" class="form-control" id="year-from" name="year_from"
                           placeholder="{{ _('From') }}"
                           value="{{ request.args.get('year_from', '') }}">
                </div>
                <div class="col-md-2">
                    <label for="year-to" class="form-label">{{ _('Year To') }}</label>
                    <input type="number" class="form-control" id="year-to" name="year_to"
                           placeholder="{{ _('To') }}"
                           value="{{ request.args.get('year_to', '') }}">
                </div>
                <div class="col-md-3">
                    <label for="operator-filter" class="form-label">{{ _('Operator') }}</label>
                    <select class="form-select" id="operator-filter" name="operator">
                        <option value="">{{ _('All Operators') }}</option>
                        {% for op in data.get('operators_list', []) %}
                        <option value="{{ op }}" {% if request.args.get('operator') == op %}selected{% endif %}>{{ op }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-filter"></i> {{ _('Apply Filters') }}
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-box">
            <div class="stat-icon"><i class="fas fa-map-marked-alt"></i></div>
            <div class="stat-label">{{ _('Total Sites') }}</div>
            <div class="stat-number">{{ data.total_sites }}</div>
        </div>
        <div class="stat-box">
            <div class="stat-icon"><i class="fas fa-layer-group"></i></div>
            <div class="stat-label">{{ _('Total US') }}</div>
            <div class="stat-number">{{ data.total_us }}</div>
        </div>
        <div class="stat-box">
            <div class="stat-icon"><i class="fas fa-archive"></i></div>
            <div class="stat-label">{{ _('Total Materials') }}</div>
            <div class="stat-number">{{ data.total_materials }}</div>
        </div>
        <div class="stat-box">
            <div class="stat-icon"><i class="fas fa-user-tie"></i></div>
            <div class="stat-label">{{ _('Total Operators') }}</div>
            <div class="stat-number">{{ data.total_operators }}</div>
        </div>
    </div>

    <!-- A. Excavation Activity by Year -->
    <div class="chart-card">
        <div class="collapsible-header" data-bs-toggle="collapse" data-bs-target="#collapse-activity-year">
            <div class="chart-title d-flex justify-content-between align-items-center">
                <span><i class="fas fa-calendar-alt"></i> {{ _('Excavation Activity by Year') }}</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
        </div>
        <div class="collapse show" id="collapse-activity-year">
            <div class="chart-container">
                <canvas id="activityByYearChart"></canvas>
            </div>
        </div>
    </div>

    <!-- B. Operator Performance -->
    <div class="table-card">
        <div class="collapsible-header" data-bs-toggle="collapse" data-bs-target="#collapse-operator-perf">
            <div class="chart-title d-flex justify-content-between align-items-center">
                <span><i class="fas fa-users"></i> {{ _('Operator Performance') }}</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
        </div>
        <div class="collapse show" id="collapse-operator-perf">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>{{ _('Operator') }}</th>
                            <th>{{ _('Sites') }}</th>
                            <th>{{ _('US Count') }}</th>
                            <th>{{ _('Materials') }}</th>
                            <th>{{ _('Years Active') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in data.operator_performance %}
                        <tr>
                            <td>{{ row.operator }}</td>
                            <td>{{ row.sites }}</td>
                            <td>{{ row.us_count }}</td>
                            <td>{{ row.materials }}</td>
                            <td>{{ row.years_active }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="5" class="text-center text-muted">{{ _('No data available') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- C. Site Type Distribution -->
        <div class="col-md-6">
            <div class="chart-card">
                <div class="collapsible-header" data-bs-toggle="collapse" data-bs-target="#collapse-site-type">
                    <div class="chart-title d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-th-large"></i> {{ _('Site Type Distribution') }}</span>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                </div>
                <div class="collapse show" id="collapse-site-type">
                    <div class="chart-container">
                        <canvas id="siteTypeChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- D. Chronological Distribution -->
        <div class="col-md-6">
            <div class="chart-card">
                <div class="collapsible-header" data-bs-toggle="collapse" data-bs-target="#collapse-chrono">
                    <div class="chart-title d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-clock"></i> {{ _('Chronological Distribution') }}</span>
                        <i class="fas fa-chevron-down toggle-icon"></i>
                    </div>
                </div>
                <div class="collapse show" id="collapse-chrono">
                    <div class="chart-container">
                        <canvas id="chronoChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- E. Material Types -->
    <div class="chart-card">
        <div class="collapsible-header" data-bs-toggle="collapse" data-bs-target="#collapse-material-types">
            <div class="chart-title d-flex justify-content-between align-items-center">
                <span><i class="fas fa-cubes"></i> {{ _('Material Types') }}</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
        </div>
        <div class="collapse show" id="collapse-material-types">
            <div class="chart-container">
                <canvas id="materialTypesChart"></canvas>
            </div>
        </div>
    </div>

    <!-- F. Recent Activity -->
    <div class="table-card">
        <div class="collapsible-header" data-bs-toggle="collapse" data-bs-target="#collapse-recent">
            <div class="chart-title d-flex justify-content-between align-items-center">
                <span><i class="fas fa-history"></i> {{ _('Recent Activity') }}</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
        </div>
        <div class="collapse show" id="collapse-recent">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>{{ _('Site') }}</th>
                            <th>{{ _('US') }}</th>
                            <th>{{ _('Operator') }}</th>
                            <th>{{ _('Date') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in data.recent_activity %}
                        <tr>
                            <td>{{ row.sito }}</td>
                            <td>{{ row.us }}</td>
                            <td>{{ row.schedatore }}</td>
                            <td>{{ row.data_schedatura }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="4" class="text-center text-muted">{{ _('No recent activity') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
    // Data from backend
    const statsData = {{ data|tojson|safe }};

    // Color palettes
    const colors = {
        primary: ['#2E86AB', '#A23B72', '#F18F01', '#C73E1D', '#6A994E',
                  '#BC4B51', '#5B8E7D', '#8B5A3C', '#6D597A', '#B56576',
                  '#355070', '#E56B6F', '#EAAC8B', '#6D6875', '#577590'],
        background: ['rgba(46,134,171,0.2)', 'rgba(162,59,114,0.2)', 'rgba(241,143,1,0.2)',
                     'rgba(199,62,29,0.2)', 'rgba(106,153,78,0.2)', 'rgba(188,75,81,0.2)',
                     'rgba(91,142,125,0.2)', 'rgba(139,90,60,0.2)', 'rgba(109,89,122,0.2)',
                     'rgba(181,101,118,0.2)', 'rgba(53,80,112,0.2)', 'rgba(229,107,111,0.2)',
                     'rgba(234,172,139,0.2)', 'rgba(109,104,117,0.2)', 'rgba(87,117,144,0.2)']
    };

    // Common chart options
    const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    };

    // Collapsible header toggle icon
    document.querySelectorAll('.collapsible-header').forEach(function(header) {
        var targetId = header.getAttribute('data-bs-target');
        var target = document.querySelector(targetId);
        if (target) {
            target.addEventListener('hide.bs.collapse', function() {
                header.classList.add('collapsed');
            });
            target.addEventListener('show.bs.collapse', function() {
                header.classList.remove('collapsed');
            });
        }
    });

    // A. Excavation Activity by Year - Bar Chart
    if (statsData.activity_by_year && Object.keys(statsData.activity_by_year).length > 0) {
        new Chart(document.getElementById('activityByYearChart'), {
            type: 'bar',
            data: {
                labels: Object.keys(statsData.activity_by_year),
                datasets: [{
                    label: "{{ _('US Count') }}",
                    data: Object.values(statsData.activity_by_year),
                    backgroundColor: colors.background[0],
                    borderColor: colors.primary[0],
                    borderWidth: 2
                }]
            },
            options: {
                ...commonOptions,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { stepSize: 1 },
                        title: {
                            display: true,
                            text: "{{ _('US Count') }}"
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: "{{ _('Year') }}"
                        }
                    }
                }
            }
        });
    }

    // C. Site Type Distribution - Pie Chart
    if (statsData.site_type_distribution && Object.keys(statsData.site_type_distribution).length > 0) {
        new Chart(document.getElementById('siteTypeChart'), {
            type: 'pie',
            data: {
                labels: Object.keys(statsData.site_type_distribution),
                datasets: [{
                    data: Object.values(statsData.site_type_distribution),
                    backgroundColor: colors.background,
                    borderColor: colors.primary,
                    borderWidth: 1
                }]
            },
            options: commonOptions
        });
    }

    // D. Chronological Distribution - Bar Chart (Top 15)
    if (statsData.chronological_distribution && Object.keys(statsData.chronological_distribution).length > 0) {
        new Chart(document.getElementById('chronoChart'), {
            type: 'bar',
            data: {
                labels: Object.keys(statsData.chronological_distribution),
                datasets: [{
                    label: "{{ _('Count') }}",
                    data: Object.values(statsData.chronological_distribution),
                    backgroundColor: colors.background[1],
                    borderColor: colors.primary[1],
                    borderWidth: 2
                }]
            },
            options: {
                ...commonOptions,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { stepSize: 1 }
                    },
                    x: {
                        ticks: {
                            maxRotation: 45,
                            minRotation: 25
                        }
                    }
                }
            }
        });
    }

    // E. Material Types - Horizontal Bar Chart
    if (statsData.material_types && Object.keys(statsData.material_types).length > 0) {
        new Chart(document.getElementById('materialTypesChart'), {
            type: 'bar',
            data: {
                labels: Object.keys(statsData.material_types),
                datasets: [{
                    label: "{{ _('Count') }}",
                    data: Object.values(statsData.material_types),
                    backgroundColor: colors.background[2],
                    borderColor: colors.primary[2],
                    borderWidth: 2
                }]
            },
            options: {
                ...commonOptions,
                indexAxis: 'y',
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: { stepSize: 1 },
                        title: {
                            display: true,
                            text: "{{ _('Count') }}"
                        }
                    }
                }
            }
        });
    }
</script>
{% endblock %}