{% extends "base.html" %}

{% block title %}{{ t('statistics.title') }} - {{ t('header.appTitle') }}{% endblock %}
{% block page_id %}statistics{% endblock %}

{% block head_scripts %}
<!-- Add Chart.js for statistics page -->
<script src="/loras_static/vendor/chart.js/chart.umd.js"></script>
{% endblock %}

{% block init_title %}{{ t('initialization.statistics.title') }}{% endblock %}
{% block init_message %}{{ t('initialization.statistics.message') }}{% endblock %}
{% block init_check_url %}/api/stats/collection-overview{% endblock %}

{% block content %}
    {% if not is_initializing %}
    <!-- Key Metrics Panel -->
    <div class="metrics-panel">
        <div class="metrics-grid" id="metricsGrid">
            <!-- Metrics cards will be populated by JavaScript -->
        </div>
    </div>

    <!-- Main Dashboard Content -->
    <div class="dashboard-content">
        <!-- Navigation Tabs -->
        <div class="dashboard-tabs">
            <button class="tab-button active" data-tab="overview">
                <i class="fas fa-chart-bar"></i> {{ t('statistics.tabs.overview') }}
            </button>
            <button class="tab-button" data-tab="usage">
                <i class="fas fa-chart-line"></i> {{ t('statistics.tabs.usage') }}
            </button>
            <button class="tab-button" data-tab="collection">
                <i class="fas fa-layer-group"></i> {{ t('statistics.tabs.collection') }}
            </button>
            <button class="tab-button" data-tab="storage">
                <i class="fas fa-hdd"></i> {{ t('statistics.tabs.storage') }}
            </button>
            <button class="tab-button" data-tab="insights">
                <i class="fas fa-lightbulb"></i> {{ t('statistics.tabs.insights') }}
            </button>
        </div>

        <!-- Tab Content Panels -->
        <div class="tab-content">
            <!-- Overview Tab -->
            <div class="tab-panel active" id="overview-panel">
                <div class="panel-grid">
                    <!-- Collection Overview Chart -->
                    <div class="chart-container">
                        <h3><i class="fas fa-pie-chart"></i> {{ t('statistics.charts.collectionOverview') }}</h3>
                        <div class="chart-wrapper">
                            <canvas id="collectionPieChart"></canvas>
                        </div>
                    </div>

                    <!-- Base Model Distribution -->
                    <div class="chart-container">
                        <h3><i class="fas fa-layer-group"></i> {{ t('statistics.charts.baseModelDistribution') }}</h3>
                        <div class="chart-wrapper">
                            <canvas id="baseModelChart"></canvas>
                        </div>
                    </div>

                    <!-- Usage Timeline -->
                    <div class="chart-container full-width">
                        <h3><i class="fas fa-chart-line"></i> {{ t('statistics.charts.usageTrends') }}</h3>
                        <div class="chart-wrapper">
                            <canvas id="usageTimelineChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Usage Analysis Tab -->
            <div class="tab-panel" id="usage-panel">
                <div class="panel-grid">
                    <!-- Top Used LoRAs -->
                    <div class="list-container">
                        <h3><i class="fas fa-star"></i> {{ t('statistics.usage.mostUsedLoras') }}</h3>
                        <div class="model-list" id="topLorasList">
                            <!-- List will be populated by JavaScript -->
                        </div>
                    </div>

                    <!-- Top Used Checkpoints -->
                    <div class="list-container">
                        <h3><i class="fas fa-check-circle"></i> {{ t('statistics.usage.mostUsedCheckpoints') }}</h3>
                        <div class="model-list" id="topCheckpointsList">
                            <!-- List will be populated by JavaScript -->
                        </div>
                    </div>

                    <!-- Top Used Embeddings -->
                    <div class="list-container">
                        <h3><i class="fas fa-code"></i> {{ t('statistics.usage.mostUsedEmbeddings') }}</h3>
                        <div class="model-list" id="topEmbeddingsList">
                            <!-- List will be populated by JavaScript -->
                        </div>
                    </div>

                    <!-- Usage Distribution Chart -->
                    <div class="chart-container full-width">
                        <h3><i class="fas fa-chart-bar"></i> {{ t('statistics.charts.usageDistribution') }}</h3>
                        <div class="chart-wrapper">
                            <canvas id="usageDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Collection Tab -->
            <div class="tab-panel" id="collection-panel">
                <div class="panel-grid">
                    <!-- Tag Cloud -->
                    <div class="chart-container">
                        <h3><i class="fas fa-tags"></i> {{ t('statistics.collection.popularTags') }}</h3>
                        <div class="tag-cloud" id="tagCloud">
                            <!-- Tag cloud will be populated by JavaScript -->
                        </div>
                    </div>

                    <!-- Base Model Timeline -->
                    <div class="chart-container">
                        <h3><i class="fas fa-history"></i> {{ t('statistics.collection.modelTypes') }}</h3>
                        <div class="chart-wrapper">
                            <canvas id="modelTypesChart"></canvas>
                        </div>
                    </div>

                    <!-- Collection Growth -->
                    <div class="chart-container full-width">
                        <h3><i class="fas fa-chart-area"></i> {{ t('statistics.collection.collectionAnalysis') }}</h3>
                        <div class="analysis-cards" id="collectionAnalysis">
                            <!-- Analysis cards will be populated by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Storage Tab -->
            <div class="tab-panel" id="storage-panel">
                <div class="panel-grid">
                    <!-- Storage by Model Type -->
                    <div class="chart-container">
                        <h3><i class="fas fa-database"></i> {{ t('statistics.storage.storageUsage') }}</h3>
                        <div class="chart-wrapper">
                            <canvas id="storageChart"></canvas>
                        </div>
                    </div>

                    <!-- Largest Models -->
                    <div class="list-container">
                        <h3><i class="fas fa-weight-hanging"></i> {{ t('statistics.storage.largestModels') }}</h3>
                        <div class="model-list" id="largestModelsList">
                            <!-- List will be populated by JavaScript -->
                        </div>
                    </div>

                    <!-- Storage Efficiency -->
                    <div class="chart-container full-width">
                        <h3><i class="fas fa-chart-scatter"></i> {{ t('statistics.storage.storageEfficiency') }}</h3>
                        <div class="chart-wrapper">
                            <canvas id="storageEfficiencyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Insights Tab -->
            <div class="tab-panel" id="insights-panel">
                <div class="insights-container">
                    <h3><i class="fas fa-lightbulb"></i> {{ t('statistics.insights.smartInsights') }}</h3>
                    <div class="insights-list" id="insightsList">
                        <!-- Insights will be populated by JavaScript -->
                    </div>

                    <!-- Recommendations -->
                    <div class="recommendations-section">
                        <h4><i class="fas fa-tasks"></i> {{ t('statistics.insights.recommendations') }}</h4>
                        <div class="recommendations-list" id="recommendationsList">
                            <!-- Recommendations will be populated by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}

{% block main_script %}
{% if not is_initializing %}
<script type="module" src="/loras_static/js/statistics.js"></script>
{% endif %}
{% endblock %}