{% extends "base.html" %}
{% load static %}
{% load app_tags %}

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

{% block content %}
  <div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">Statistics</h1>
    <p class="text-gray-400">Track your media consumption habits</p>
  </div>
  <div x-data="dateRangePicker()" x-init="init()" class="relative mb-8">
    <!-- Trigger Button -->
    <button @click="toggleDropdown()"
            class="flex items-center gap-2 px-4 py-2.5 bg-[#2a2f35] hover:bg-[#343a40] rounded-lg transition-all duration-200 border border-gray-700 shadow-sm cursor-pointer">
      {% include "app/icons/calendar.svg" with classes="w-5 h-5 text-indigo-400" %}
      <span class="font-medium" x-text="selectedRange"></span>
      <div class="w-4 h-4 ml-1 transition-transform duration-200"
           :class="{'rotate-180': isOpen}">{% include "app/icons/chevron-down.svg" %}</div>
    </button>

    <!-- Dropdown -->
    <div x-cloak
         x-show="isOpen"
         x-transition
         @click.outside="isOpen = false"
         class="absolute z-20 mt-2 w-85 bg-[#2a2f35] rounded-lg shadow-lg border border-gray-700 overflow-hidden transition-all duration-200 animate-in fade-in-50 slide-in-from-top-5">

      <!-- Tabs -->
      <div class="flex border-b border-gray-700">
        <button @click="activeTab = 'predefined'"
                :class="{'text-white border-b-2 border-indigo-500': activeTab === 'predefined', 'text-gray-400 hover:text-gray-200': activeTab !== 'predefined'}"
                class="flex-1 py-3 text-sm font-medium transition-colors cursor-pointer">Predefined Ranges</button>
        <button @click="activeTab = 'custom'"
                :class="{'text-white border-b-2 border-indigo-500': activeTab === 'custom', 'text-gray-400 hover:text-gray-200': activeTab !== 'custom'}"
                class="flex-1 py-3 text-sm font-medium transition-colors cursor-pointer">Custom Range</button>
      </div>

      <!-- Predefined Ranges Tab -->
      <div x-show="activeTab === 'predefined'"
           class="p-2 max-h-80 overflow-y-auto">
        <div class="grid grid-cols-2 gap-2">
          <template x-for="range in predefinedRanges" :key="range.name">
            <button @click="selectPredefinedRange(range.name)"
                    :class="{'bg-indigo-600 text-white': selectedRange === range.name, 'hover:bg-[#39404b] text-gray-200': selectedRange !== range.name}"
                    class="flex items-center justify-between p-3 rounded-md text-left text-sm transition-all cursor-pointer">
              <span x-text="range.name"></span>
              <div x-show="selectedRange === range.name">{% include "app/icons/checkmark.svg" with classes="w-4 h-4" %}</div>
            </button>
          </template>
        </div>
      </div>

      <!-- Custom Range Tab -->
      <div x-show="activeTab === 'custom'" class="p-4">
        <div class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium mb-2 text-gray-300">Start Date</label>
              <input x-model="startDate"
                     @change="updateDateRange()"
                     class="w-full p-2.5 bg-[#39404b] rounded-md text-white border border-gray-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 text-sm scheme-dark"
                     type="date">
            </div>
            <div>
              <label class="block text-sm font-medium mb-2 text-gray-300">End Date</label>
              <input x-model="endDate"
                     @change="updateDateRange()"
                     class="w-full p-2.5 bg-[#39404b] rounded-md text-white border border-gray-600 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 text-sm scheme-dark"
                     type="date">
            </div>
          </div>

          <div class="flex justify-end gap-2 pt-2">
            <button @click="isOpen = false"
                    class="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-gray-200 text-sm rounded-md transition-colors cursor-pointer">
              Cancel
            </button>
            <button @click="applyCustomRange()"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-md transition-colors cursor-pointer flex items-center gap-2">
              {% include "app/icons/checkmark.svg" with classes="w-4 h-4" %}
              Apply Range
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="space-y-8">
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
      <div class="bg-[#2a2f35] rounded-lg p-6 flex items-center">
        <div class="bg-indigo-600/20 p-4 rounded-full mr-4">
          {% include "app/icons/states/completed.svg" with classes="w-8 h-8 text-indigo-400" %}
        </div>
        <div>
          <h3 class="text-sm font-medium text-gray-400">Completed Items</h3>
          {% if media_count.total %}
            <p class="text-2xl font-bold">
              {{ status_distribution.total_completed }} <span class="text-gray-500 text-lg">/ {{ media_count.total }}</span>
            </p>
          {% else %}
            <p class="text-2xl font-bold text-gray-500">--</p>
          {% endif %}
        </div>
      </div>
      <div class="bg-[#2a2f35] rounded-lg p-6 flex items-center">
        <div class="bg-sky-600/20 p-4 rounded-full mr-4">
          {% include "app/icons/states/in-progress.svg" with classes="w-8 h-8 text-sky-400" %}
        </div>
        <div>
          <h3 class="text-sm font-medium text-gray-400">In Progress</h3>
          {% if media_count.total %}
            <p class="text-2xl font-bold">{{ in_progress_count }}</p>
          {% else %}
            <p class="text-2xl font-bold text-gray-500">--</p>
          {% endif %}
        </div>
      </div>
      <div class="bg-[#2a2f35] rounded-lg p-6 flex items-center">
        <div class="bg-yellow-600/20 p-4 rounded-full mr-4">
          {% include "app/icons/ribbon.svg" with classes="w-8 h-8 text-yellow-400" %}
        </div>
        <div>
          <h3 class="text-sm font-medium text-gray-400">Average Rating</h3>
          {% if score_distribution.total_scored %}
            <p class="text-2xl font-bold">
              {{ score_distribution.average_score }} <span class="text-gray-500 text-lg">/ 10</span>
            </p>
          {% else %}
            <p class="text-2xl font-bold text-gray-500">--</p>
          {% endif %}
        </div>
      </div>
      <div class="bg-[#2a2f35] rounded-lg p-6 flex items-center">
        <div class="bg-emerald-600/20 p-4 rounded-full mr-4">
          {% include "app/icons/star.svg" with classes="w-8 h-8 text-emerald-400" %}
        </div>
        <div>
          <h3 class="text-sm font-medium text-gray-400">% Rated</h3>
          {% if rated_percent is not None %}
            <p class="text-2xl font-bold">
              {{ rated_percent }}<span class="text-gray-500 text-lg">%</span>
            </p>
          {% else %}
            <p class="text-2xl font-bold text-gray-500">--</p>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Consumption Section -->
    {% if consumption_stats %}
      <div class="bg-[#2a2f35] rounded-lg p-6">
        <h2 class="text-xl font-semibold mb-4">Consumption</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
          {% for stat in consumption_stats %}
            <div class="bg-[#39404b] rounded-lg p-4 flex items-center gap-3">
              <div class="shrink-0 {{ stat.media_type|media_color }}">{% icon stat.media_type False "w-7 h-7" %}</div>
              <div class="min-w-0">
                <p class="text-2xl font-bold leading-tight">{{ stat.value }}</p>
                <p class="text-xs text-gray-400 truncate" title="{{ stat.descriptor }}">{{ stat.descriptor }}</p>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Media Type Distribution Section -->
      <div class="bg-[#2a2f35] rounded-lg p-6">
        <h2 class="text-xl font-semibold mb-4">Media Type Distribution</h2>

        {% if media_type_distribution.labels %}
          <div class="h-80 flex justify-center items-center">
            <canvas id="mediaTypeChart"></canvas>
          </div>
        {% else %}
          <div class="flex flex-col items-center justify-center py-16">
            <div class="bg-[#39404b] rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
              {% include "app/icons/piechart.svg" with classes="w-8 h-8 text-gray-400" %}
            </div>
            <h3 class="text-lg font-medium mb-2">No media types to display</h3>
            <p class="text-gray-400 text-center max-w-md">Add different types of media to see their distribution.</p>
          </div>
        {% endif %}
      </div>

      <!-- Status Distribution Section -->
      <div class="bg-[#2a2f35] rounded-lg p-6">
        <h2 class="text-xl font-semibold mb-4">Status Distribution</h2>

        {% if status_pie_chart_data.labels %}
          <div class="h-80 flex justify-center items-center">
            <canvas id="statusChart"></canvas>
          </div>
        {% else %}
          <div class="flex flex-col items-center justify-center py-16">
            <div class="bg-[#39404b] rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
              {% include "app/icons/bars-increasing.svg" with classes="w-8 h-8 text-gray-400" %}
            </div>
            <h3 class="text-lg font-medium mb-2">No status data to display</h3>
            <p class="text-gray-400 text-center max-w-md">Track media items with different statuses to see their distribution.</p>
          </div>
        {% endif %}
      </div>

      <!-- Status Distribution by Media Type Section -->
      <div class="bg-[#2a2f35] rounded-lg p-6">
        <h2 class="text-xl font-semibold mb-4">Status Distribution by Media Type</h2>

        {% if media_type_distribution.labels %}
          <div class="h-80 flex justify-center items-center">
            <canvas id="statusStackedChart"></canvas>
          </div>
        {% else %}
          <div class="flex flex-col items-center justify-center py-16">
            <div class="bg-[#39404b] rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
              {% include "app/icons/bars-pyramid.svg" with classes="w-8 h-8 text-gray-400" %}
            </div>
            <h3 class="text-lg font-medium mb-2">No data available</h3>
            <p class="text-gray-400 text-center max-w-md">
              Add media items with different statuses to see their distribution by type.
            </p>
          </div>
        {% endif %}
      </div>

      <!-- Score Distribution by Media Type Section -->
      <div class="bg-[#2a2f35] rounded-lg p-6">
        <h2 class="text-xl font-semibold mb-4">Score Distribution by Media Type</h2>

        {% if score_distribution.total_scored %}
          <div class="h-80 flex justify-center items-center">
            <canvas id="scoreStackedChart"></canvas>
          </div>
        {% else %}
          <div class="flex flex-col items-center justify-center py-16">
            <div class="bg-[#39404b] rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
              {% include "app/icons/ribbon.svg" with classes="w-8 h-8 text-gray-400" %}
            </div>
            <h3 class="text-lg font-medium mb-2">No ratings yet</h3>
            <p class="text-gray-400 text-center max-w-md">Rate your media items to see score distribution statistics.</p>
          </div>
        {% endif %}
      </div>
    </div>

    <!-- Top Rated Media Section -->
    <div class="bg-[#2a2f35] rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Top Rated Media</h2>

      {% if top_rated %}
        <div class="media-grid">
          {% for media in top_rated %}
            {% include "app/components/media_card.html" with media=media item=media.item title=media.item from_grid=True secondary_color=True %}
          {% endfor %}
        </div>
      {% else %}
        <div class="flex flex-col items-center justify-center py-16">
          <div class="bg-[#39404b] rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
            {% include "app/icons/ribbon.svg" with classes="w-8 h-8 text-gray-400" %}
          </div>
          <h3 class="text-lg font-medium mb-2">No ratings yet</h3>
          <p class="text-gray-400 text-center max-w-md">Rate your media items to see score distribution statistics.</p>
        </div>
      {% endif %}
    </div>

  </div>
{% endblock content %}

{% block js %}
  {{ date_format_values|json_script:"date_format_values" }}
  <script src="{% static 'js/date-range.js' %}{% get_static_file_mtime 'js/date-range.js' %}"
          data-date-format="{{ user.date_format }}"></script>

  <script src="{% static 'js/libraries/chartjs-4.4.9.min.js' %}"></script>
  <script src="{% static 'js/libraries/chartjs-datalabels-2.0.0.min.js' %}"></script>

  <!-- JSON data for charts -->
  {{ media_type_distribution|json_script:"media_type_distribution" }}
  {{ status_pie_chart_data|json_script:"status_pie_chart_data" }}
  {{ status_distribution|json_script:"status_distribution" }}
  {{ score_distribution|json_script:"score_distribution" }}

  <script src="{% static 'js/statistics-charts.js' %}{% get_static_file_mtime 'js/statistics-charts.js' %}"></script>
{% endblock js %}