{% extends 'base.html' %}

{% block title %} - Statistics{% endblock %}

{% block main %}
<div class="container-fluid">

  <!-- Overview Cards Row -->
  <div class="row g-3 mb-4">
    <!-- Collection Summary -->
    <div class="col-lg-4 col-md-6">
      <div class="card h-100">
        <div class="card-header bg-primary text-white">
          <h5 class="card-title mb-0">
            <i class="ri-grid-line"></i> Collection Overview
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-2">
            <div class="col-6">
              <div class="text-center">
                <a href="{{ url_for('set.list') }}" class="text-decoration-none">
                  <div class="h4 text-primary mb-0">{{ collection_summary.total_sets }}</div>
                  <small class="text-dark">Total Sets</small>
                </a>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <div class="h4 text-dark mb-0">{{ collection_summary.unique_sets }}</div>
                <small class="text-dark">Unique Sets</small>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <a href="{{ url_for('part.list') }}" class="text-decoration-none">
                  <div class="h4 text-primary mb-0">{{ "{:,}".format(collection_summary.total_parts_count) }}</div>
                  <small class="text-dark">Total Parts</small>
                </a>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <div class="h4 text-dark mb-0">{{ collection_summary.unique_parts }}</div>
                <small class="text-dark">Unique Parts</small>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <a href="{{ url_for('minifigure.list') }}" class="text-decoration-none">
                  <div class="h4 text-primary mb-0">{{ collection_summary.total_minifigures_count }}</div>
                  <small class="text-dark">Minifigures</small>
                </a>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <div class="h4 text-dark mb-0">{{ collection_summary.unique_minifigures }}</div>
                <small class="text-dark">Unique Figs</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Financial Summary -->
    <div class="col-lg-4 col-md-6">
      <div class="card h-100">
        <div class="card-header bg-success text-white">
          <h5 class="card-title mb-0">
            <i class="ri-money-dollar-circle-line"></i> Financial Summary
          </h5>
        </div>
        <div class="card-body">
          <div class="text-center mb-3">
            <div class="h3 text-success mb-0">{{ config['PURCHASE_CURRENCY'] }}{{ "%.2f"|format(financial_summary.total_cost) }}</div>
            <small class="text-dark">Total Investment</small>
          </div>
          <div class="row g-2">
            <div class="col-6">
              <div class="text-center">
                <div class="h5 text-dark mb-0">{{ financial_summary.sets_with_price }}</div>
                <small class="text-dark">Sets with Price</small>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <div class="h5 text-dark mb-0">{{ financial_summary.percentage_with_price }}%</div>
                <small class="text-dark">Price Coverage</small>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <div class="text-dark small">Average</div>
                <div class="fw-bold">{{ config['PURCHASE_CURRENCY'] }}{{ "%.2f"|format(financial_summary.average_cost) }}</div>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <div class="text-dark small">Range</div>
                <div class="fw-bold">{{ config['PURCHASE_CURRENCY'] }}{{ "%.2f"|format(financial_summary.minimum_cost) }} - {{ config['PURCHASE_CURRENCY'] }}{{ "%.2f"|format(financial_summary.maximum_cost) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Problems & Storage -->
    <div class="col-lg-4 col-md-12">
      <div class="card h-100">
        <div class="card-header bg-warning text-dark">
          <h5 class="card-title mb-0">
            <i class="ri-error-warning-line"></i> Issues & Storage
          </h5>
        </div>
        <div class="card-body">
          <div class="row g-2">
            <div class="col-6">
              <div class="text-center">
                <a href="{{ url_for('part.problem') }}" class="text-decoration-none">
                  <div class="h4 text-danger mb-0">{{ collection_summary.total_missing_parts }}</div>
                  <small class="text-dark">Missing Parts</small>
                </a>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <a href="{{ url_for('part.problem') }}" class="text-decoration-none">
                  <div class="h4 text-danger mb-0">{{ collection_summary.total_damaged_parts }}</div>
                  <small class="text-dark">Damaged Parts</small>
                </a>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                {% if config['HIDE_ALL_STORAGES'] %}
                  <div class="h4 text-dark mb-0">{{ collection_summary.storage_locations_used }}</div>
                {% else %}
                  <a href="{{ url_for('storage.list') }}" class="text-decoration-none">
                    <div class="h4 text-primary mb-0">{{ collection_summary.storage_locations_used }}</div>
                  </a>
                {% endif %}
                <small class="text-dark">Storage Locations</small>
              </div>
            </div>
            <div class="col-6">
              <div class="text-center">
                <div class="h4 text-dark mb-0">{{ collection_summary.purchase_locations_used }}</div>
                <small class="text-dark">Purchase Locations</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Collection Growth Charts -->
  {% if config['STATISTICS_SHOW_CHARTS'] %}
  <div class="row g-3 mb-4">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#collapseCharts" role="button" aria-expanded="{{ 'true' if config['STATISTICS_DEFAULT_EXPANDED'] else 'false' }}" aria-controls="collapseCharts">
              <i class="ri-line-chart-line"></i> Collection Growth Over Time
              <i class="ri-arrow-down-s-line float-end"></i>
            </a>
          </h5>
        </div>
        <div class="collapse {{ 'show' if config['STATISTICS_DEFAULT_EXPANDED'] else '' }}" id="collapseCharts">
          <div class="card-body">
          <div class="row">
            <div class="col-lg-4 mb-3">
              <h6 class="text-center text-dark">Sets by Release Year</h6>
              <div style="position: relative; height: 250px;">
                <canvas id="setsChart"></canvas>
              </div>
            </div>
            <div class="col-lg-4 mb-3">
              <h6 class="text-center text-dark">Parts by Release Year</h6>
              <div style="position: relative; height: 250px;">
                <canvas id="partsChart"></canvas>
              </div>
            </div>
            <div class="col-lg-4 mb-3">
              <h6 class="text-center text-dark">Minifigures by Release Year</h6>
              <div style="position: relative; height: 250px;">
                <canvas id="minifigsChart"></canvas>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Detailed Statistics Tables -->
  <div class="row g-3">
    <!-- Theme Statistics -->
    {% if theme_statistics %}
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#collapseThemes" role="button" aria-expanded="{{ 'true' if config['STATISTICS_DEFAULT_EXPANDED'] else 'false' }}" aria-controls="collapseThemes">
              <i class="ri-palette-line"></i> Sets by Theme
              <i class="ri-arrow-down-s-line float-end"></i>
            </a>
          </h5>
        </div>
        <div class="collapse {{ 'show' if config['STATISTICS_DEFAULT_EXPANDED'] else '' }}" id="collapseThemes">
          <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>Theme</th>
                  <th class="text-center">Sets</th>
                  <th class="text-center">Parts</th>
                  <th class="text-center">Minifigures</th>
                  <th class="text-center">Spent</th>
                </tr>
              </thead>
              <tbody>
                {% for theme in theme_statistics[:10] %}
                <tr>
                  <td>
                    <a href="{{ url_for('set.list', theme=theme.theme_id) }}" class="text-decoration-none">
                      {{ theme.theme_name }}
                    </a>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ theme.set_count }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ "{:,}".format(theme.total_parts) }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ theme.total_minifigures }}</small>
                  </td>
                  <td class="text-center">
                    {% if theme.total_spent %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.0f"|format(theme.total_spent) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% if theme_statistics|length > 10 %}
          <div class="card-footer text-center">
            <small class="text-dark">Showing top 10 themes</small>
          </div>
          {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Storage Statistics -->
    {% if storage_statistics %}
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#collapseStorage" role="button" aria-expanded="{{ 'true' if config['STATISTICS_DEFAULT_EXPANDED'] else 'false' }}" aria-controls="collapseStorage">
              <i class="ri-archive-2-line"></i> Sets by Storage
              <i class="ri-arrow-down-s-line float-end"></i>
            </a>
          </h5>
        </div>
        <div class="collapse {{ 'show' if config['STATISTICS_DEFAULT_EXPANDED'] else '' }}" id="collapseStorage">
          <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>Storage Location</th>
                  <th class="text-center">Sets</th>
                  <th class="text-center">Parts</th>
                  <th class="text-center">Minifigures</th>
                  <th class="text-center">Value</th>
                </tr>
              </thead>
              <tbody>
                {% for storage in storage_statistics %}
                <tr>
                  <td>
                    <a href="{{ url_for('set.list', storage=storage.storage_id) }}" class="text-decoration-none">
                      {{ storage.storage_name or 'Unknown' }}
                    </a>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ storage.set_count }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ "{:,}".format(storage.total_parts) }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ storage.total_minifigures }}</small>
                  </td>
                  <td class="text-center">
                    {% if storage.total_value %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.0f"|format(storage.total_value) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Purchase Location Statistics -->
  {% if purchase_location_statistics %}
  <div class="row g-3 mt-2">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#collapsePurchase" role="button" aria-expanded="{{ 'true' if config['STATISTICS_DEFAULT_EXPANDED'] else 'false' }}" aria-controls="collapsePurchase">
              <i class="ri-shopping-cart-line"></i> Sets by Purchase Location
              <i class="ri-arrow-down-s-line float-end"></i>
            </a>
          </h5>
        </div>
        <div class="collapse {{ 'show' if config['STATISTICS_DEFAULT_EXPANDED'] else '' }}" id="collapsePurchase">
          <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>Purchase Location</th>
                  <th class="text-center">Sets</th>
                  <th class="text-center">Parts</th>
                  <th class="text-center">Minifigures</th>
                  <th class="text-center">Total Spent</th>
                  <th class="text-center">Avg. Price</th>
                  <th class="text-center">Price Range</th>
                </tr>
              </thead>
              <tbody>
                {% for location in purchase_location_statistics %}
                <tr>
                  <td>
                    <a href="{{ url_for('set.list', purchase_location=location.location_id) }}" class="text-decoration-none">
                      {{ location.location_name or 'Unknown' }}
                    </a>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ location.set_count }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ "{:,}".format(location.total_parts) }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ location.total_minifigures }}</small>
                  </td>
                  <td class="text-center">
                    {% if location.total_spent %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.2f"|format(location.total_spent) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    {% if location.avg_price %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.2f"|format(location.avg_price) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    {% if location.min_price and location.max_price %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.0f"|format(location.min_price) }}-{{ "%.0f"|format(location.max_price) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Year-based Statistics -->
  <div class="row g-3 mt-2">
    <!-- Sets by Year (Release Year) -->
    {% if sets_by_year_statistics %}
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#collapseReleaseYear" role="button" aria-expanded="{{ 'true' if config['STATISTICS_DEFAULT_EXPANDED'] else 'false' }}" aria-controls="collapseReleaseYear">
              <i class="ri-calendar-line"></i> Sets by Release Year
              <i class="ri-arrow-down-s-line float-end"></i>
            </a>
          </h5>
          <small class="text-dark">Statistics grouped by when LEGO released the sets</small>
        </div>
        <div class="collapse {{ 'show' if config['STATISTICS_DEFAULT_EXPANDED'] else '' }}" id="collapseReleaseYear">
          <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0 table-sm">
              <thead class="table-light">
                <tr>
                  <th>Year</th>
                  <th class="text-center">Unique</th>
                  <th class="text-center">Total</th>
                  <th class="text-center">Parts</th>
                  <th class="text-center">Minifigures</th>
                  <th class="text-center">Spent</th>
                  <th class="text-center">Avg/Set</th>
                </tr>
              </thead>
              <tbody>
                {% for year in sets_by_year_statistics[:15] %}
                <tr>
                  <td>
                    <a href="{{ url_for('set.list', year=year.year) }}" class="year-filter-link text-decoration-none" data-year="{{ year.year }}">
                      <strong>{{ year.year }}</strong>
                    </a>
                    {% if year.unique_themes > 1 %}
                      <small class="text-dark d-block">{{ year.unique_themes }} themes</small>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ year.unique_sets }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ year.total_sets }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ "{:,}".format(year.total_parts) }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ year.total_minifigures }}</small>
                  </td>
                  <td class="text-center">
                    {% if year.total_spent %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.0f"|format(year.total_spent) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    {% if year.avg_price_per_set %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.0f"|format(year.avg_price_per_set) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% if sets_by_year_statistics|length > 15 %}
          <div class="card-footer text-center">
            <small class="text-dark">Showing last 15 years</small>
          </div>
          {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Purchases by Year -->
    {% if purchases_by_year_statistics %}
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <a class="text-decoration-none text-dark" data-bs-toggle="collapse" href="#collapsePurchaseYear" role="button" aria-expanded="{{ 'true' if config['STATISTICS_DEFAULT_EXPANDED'] else 'false' }}" aria-controls="collapsePurchaseYear">
              <i class="ri-shopping-cart-line"></i> Purchases by Year
              <i class="ri-arrow-down-s-line float-end"></i>
            </a>
          </h5>
          <small class="text-dark">Statistics grouped by when you purchased the sets</small>
        </div>
        <div class="collapse {{ 'show' if config['STATISTICS_DEFAULT_EXPANDED'] else '' }}" id="collapsePurchaseYear">
          <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0 table-sm">
              <thead class="table-light">
                <tr>
                  <th>Year</th>
                  <th class="text-center">Unique</th>
                  <th class="text-center">Total</th>
                  <th class="text-center">Parts</th>
                  <th class="text-center">Minifigures</th>
                  <th class="text-center">Spent</th>
                  <th class="text-center">Avg/Set</th>
                </tr>
              </thead>
              <tbody>
                {% for year in purchases_by_year_statistics %}
                <tr>
                  <td>
                    <strong>{{ year.purchase_year }}</strong>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ year.unique_sets }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ year.total_sets }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ "{:,}".format(year.total_parts) }}</small>
                  </td>
                  <td class="text-center">
                    <small class="text-dark">{{ year.total_minifigures }}</small>
                  </td>
                  <td class="text-center">
                    {% if year.total_spent %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.2f"|format(year.total_spent) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    {% if year.avg_price_per_set %}
                      <small class="text-dark">{{ config['PURCHASE_CURRENCY'] }}{{ "%.0f"|format(year.avg_price_per_set) }}</small>
                    {% else %}
                      <small class="text-dark">-</small>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% if year_summary %}
          <div class="card-footer">
            <div class="row text-center">
              <div class="col-6">
                <small class="text-dark">Peak Year</small><br>
                {% if year_summary.peak_spending_year %}
                  <strong>{{ year_summary.peak_spending_year }}</strong>
                  <small class="text-success d-block">{{ config['PURCHASE_CURRENCY'] }}{{ "%.0f"|format(year_summary.max_spending) }}</small>
                {% else %}
                  <small class="text-dark">N/A</small>
                {% endif %}
              </div>
              <div class="col-6">
                <small class="text-dark">Active Years</small><br>
                <strong>{{ year_summary.years_with_purchases }}</strong>
                <small class="text-dark d-block">years</small>
              </div>
            </div>
          </div>
          {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Year Summary Banner -->
  {% if year_summary and (year_summary.peak_collection_year or year_summary.oldest_set_year) %}
  <div class="row g-3 mt-2">
    <div class="col-12">
      <div class="alert alert-info">
        <div class="row text-center">
          {% if year_summary.oldest_set_year and year_summary.newest_set_year %}
          <div class="col-md-3">
            <strong>{{ year_summary.oldest_set_year }} - {{ year_summary.newest_set_year }}</strong><br>
            <small class="text-dark">Set Year Range</small>
          </div>
          {% endif %}
          {% if year_summary.peak_collection_year %}
          <div class="col-md-3">
            <strong>{{ year_summary.peak_collection_year }}</strong><br>
            <small class="text-dark">Most Sets from Year ({{ year_summary.max_sets_in_year }} sets)</small>
          </div>
          {% endif %}
          {% if year_summary.years_represented %}
          <div class="col-md-3">
            <strong>{{ year_summary.years_represented }}</strong><br>
            <small class="text-dark">Years Represented</small>
          </div>
          {% endif %}
          {% if year_summary.years_with_purchases %}
          <div class="col-md-3">
            <strong>{{ year_summary.years_with_purchases }}</strong><br>
            <small class="text-dark">Years with Purchases</small>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endif %}


</div>

{% if config['STATISTICS_SHOW_CHARTS'] %}
<script type="text/javascript">
  // Initialize chart data for statistics.js
  window.chartData = {
    years: {{ chart_data.years|safe }},
    sets: {{ chart_data.sets_data|safe }},
    parts: {{ chart_data.parts_data|safe }},
    minifigs: {{ chart_data.minifigs_data|safe }}
  };
</script>
{% endif %}
{% endblock %}