{% extends "base.html" %}
{% from '_upsell.html' import crown_badge, max_badge, beta_pill %}
{% block title %}{{ _("Dashboard") }}{% endblock %}
{% block content %}
<div id="dashboard-page" class="p-3 sm:p-6">
  <div class="flex items-center gap-3 mb-5">
    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ _("Dashboard") }}</h2>
    {% if last_order_sync %}
    <span class="text-xs text-gray-400 dark:text-gray-500">
      &mdash; {{ _("last updated") }} <span data-ts="{{ last_order_sync }}"></span>
      <a href="#" onclick="inlineSync('orders',this);return false" class="text-brand-500 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 ml-0.5">{{ _("(update now)") }}</a>
    </span>
    {% endif %}
  </div>

  {# ── Date range filter for revenue/order charts ── #}
  <form id="dashboard-date-form" method="get" class="flex flex-wrap items-center gap-3 mb-4">
    <label class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ _("Period:") }}</label>
    <input type="date" name="date_from" id="dash-date-from" value="{{ dash_filters.date_from or '' }}"
           class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    <span class="text-xs text-gray-400 dark:text-gray-500">{{ _("to") }}</span>
    <input type="date" name="date_to" id="dash-date-to" value="{{ dash_filters.date_to or '' }}"
           class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    <button type="submit" id="date-apply-btn"
            class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
      {{ _("Apply") }}
    </button>
    {% if dash_filters.date_from or dash_filters.date_to %}
    <a href="{{ url_for('dashboard') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 underline">{{ _("Clear") }}</a>
    {% endif %}
    {% if has_feature('analytics') and has_feature('ratings_export') %}
    <a href="/api/dashboard/export-csv?date_from={{ dash_filters.date_from or '' }}&date_to={{ dash_filters.date_to or '' }}"
       class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ml-auto">
      <span class="material-symbols-outlined text-base">download</span>
      {{ _("Export CSV") }}
    </a>
    {% else %}
    <button type="button" onclick='showUpgradeModal("max", {{ _("Dashboard CSV Export")|tojson }})'
            class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ml-auto">
      <span class="material-symbols-outlined text-base">download</span>
      {{ _("Export CSV") }}{{ max_badge() }}
    </button>
    {% endif %}
  </form>
  <script>document.addEventListener('DOMContentLoaded', function() { initDatePresets('dashboard-date-form', 'dash-date-from', 'dash-date-to'); });</script>

  {# ── Ticket summary cards ── #}
  {% if last_msg_sync %}
  <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">
    {{ _("Messages last synced") }} <span data-ts="{{ last_msg_sync }}"></span>
    <a href="#" onclick="inlineSync('messages',this);return false" class="text-brand-500 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300">{{ _("(sync now)") }}</a>
  </p>
  {% endif %}
  <div id="ticket-stats" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-total">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _("Total Tickets") }}</p>
      <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ stats.total }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-unread">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _("Unread") }}</p>
      <p class="text-2xl font-bold text-brand-600 dark:text-brand-400 mt-1">{{ stats.unread }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-open">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _("Open") }}</p>
      <p class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mt-1">{{ stats.open }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-avg-response">
      <div class="relative">
        <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _("Avg Response (6mo · Addons)") }}<span class="inline-block align-middle ml-1 normal-case tracking-normal font-normal"><button id="avg-response-tips-btn" type="button" class="w-4 h-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600 hover:text-gray-600 dark:hover:text-gray-300 cursor-help text-xs leading-none inline-flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" aria-label="{{ _("Tips to improve your Addons response time") }}" aria-expanded="false" aria-controls="avg-response-tips-popover">?</button></span></p>
        <div id="avg-response-tips-popover" class="hidden absolute right-0 top-full mt-1.5 z-50 w-72 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-xl p-3 text-xs text-gray-700 dark:text-gray-200 font-normal leading-relaxed">
          <strong class="block mb-1.5 text-gray-900 dark:text-gray-100 font-semibold">{{ _("Tips to improve your Addons response time:") }}</strong>
          <ol class="list-decimal list-outside ml-4 space-y-1.5">
            <li>{% trans %}Only your <strong class="font-semibold">first reply</strong> per ticket counts — send a quick acknowledgment early, even if the full answer comes later.{% endtrans %}</li>
            <li>{% trans %}<strong class="font-semibold">Weekends count</strong> in full: a Friday-evening ticket answered Monday adds ~60h. A short Saturday reply neutralizes it.{% endtrans %}</li>
            <li>{% trans %}Set an <strong class="font-semibold">auto-response</strong> for evenings, weekends and holidays so no ticket waits silently.{% endtrans %}</li>
            <li>{% trans %}Enable <strong class="font-semibold">push notifications</strong> so new tickets don't sit unread for hours.{% endtrans %}</li>
            <li>{% trans %}The metric spans <strong class="font-semibold">6 calendar months</strong> — one slow week lingers for months; consistency beats sprints.{% endtrans %}</li>
          </ol>
        </div>
      </div>
      <p class="text-2xl font-bold mt-1
        {% if stats.avg_response_hours is not none %}
          {% if stats.avg_response_hours < 8 %}text-green-600 dark:text-green-400
          {% elif stats.avg_response_hours < 24 %}text-amber-600 dark:text-amber-400
          {% else %}text-red-600 dark:text-red-400{% endif %}
        {% else %}text-gray-900 dark:text-gray-100{% endif %}">
        {% if stats.avg_response_hours is not none %}{{ stats.avg_response_hours }}h{% else %}&mdash;{% endif %}
      </p>
      {% if stats.avg_response_trend and stats.avg_response_trend.delta is not none %}
        {% set delta = stats.avg_response_trend.delta %}
        {% set prev_h = stats.avg_response_trend.prev_hours %}
        {% if delta <= -0.5 %}
          <span class="inline-block mt-1 px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300"
                title="{{ _("vs previous 6-month period (%(hours)sh)", hours=prev_h) }}">&#9660; {{ (delta * -1)|round(1) }}h</span>
        {% elif delta >= 0.5 %}
          <span class="inline-block mt-1 px-1.5 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300"
                title="{{ _("vs previous 6-month period (%(hours)sh)", hours=prev_h) }}">&#9650; +{{ delta }}h</span>
        {% else %}
          <span class="inline-block mt-1 px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400"
                title="{{ _("vs previous 6-month period (%(hours)sh)", hours=prev_h) }}">&asymp; {{ _("stable") }}</span>
        {% endif %}
      {% endif %}
    </div>
  </div>

  {# ── Revenue + Period cards ── #}
  {% if revenue_stats and revenue_stats.total_orders > 0 %}
  <div id="revenue-stats" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-xl p-4 text-white" data-testid="stat-period-revenue">
      <p class="text-xs font-medium text-emerald-100 uppercase tracking-wider">{{ _("Net Revenue") }}</p>
      <p class="text-2xl font-bold mt-1">&euro;{{ revenue_stats.total_revenue }}</p>
      {% set avg_order_value = revenue_stats.avg_order_value %}
      <p class="text-xs text-emerald-200 mt-1">{% trans %}Avg &euro;{{ avg_order_value }}/order{% endtrans %}</p>
    </div>
    <div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl p-4 text-white" data-testid="stat-period-orders">
      <p class="text-xs font-medium text-blue-100 uppercase tracking-wider">{{ _("Period Orders") }}</p>
      <p class="text-2xl font-bold mt-1">{{ revenue_stats.total_orders }}</p>
    </div>
    <div class="bg-gradient-to-br from-violet-500 to-violet-700 rounded-xl p-4 text-white" data-testid="stat-new-tickets">
      <p class="text-xs font-medium text-violet-100 uppercase tracking-wider">{{ _("New Tickets") }}</p>
      <p class="text-2xl font-bold mt-1">{{ period_ticket_stats.new_tickets }}</p>
    </div>
    <div class="bg-gradient-to-br from-amber-500 to-amber-700 rounded-xl p-4 text-white" data-testid="stat-inbound-msgs">
      <p class="text-xs font-medium text-amber-100 uppercase tracking-wider">{{ _("Inbound Messages") }}</p>
      <p class="text-2xl font-bold mt-1">{{ period_ticket_stats.inbound_messages }}</p>
    </div>
  </div>
  <p class="text-xs text-gray-400 dark:text-gray-500 mb-4 -mt-2">{{ _("Values may slightly differ from the Addons website.") }}</p>
  {% endif %}

  {# ── Charts section ── #}
  {% if revenue_stats and revenue_stats.total_orders > 0 %}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    {# Orders & Revenue trend #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <div class="flex items-center justify-between mb-3">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _("Orders & Revenue Trend") }}</h3>
        <div class="flex items-center gap-3 text-xs">
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#6366f1"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="0" checked> <span class="text-gray-600 dark:text-gray-400">{{ _("Orders") }}</span>
          </label>
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#10b981"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="1" checked> <span class="text-gray-600 dark:text-gray-400">{{ _("Products") }}</span>
          </label>
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#f59e0b"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="2" checked> <span class="text-gray-600 dark:text-gray-400">{{ _("Business Care") }}</span>
          </label>
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#6b7280"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="3"> <span class="text-gray-600 dark:text-gray-400">{{ _("Total") }}</span>
          </label>
        </div>
      </div>
      <canvas id="ordersRevenueChart" height="200"></canvas>
    </div>

    {# Top Products by Revenue #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ _("Top Products by Revenue") }}</h3>
      <canvas id="productChart" height="200"></canvas>
    </div>

    {# Top Countries by Orders — MAX feature #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5{% if not has_feature('ratings_export') %} cursor-pointer{% endif %}"
         {% if not has_feature('ratings_export') %}onclick='showUpgradeModal("max", {{ _("Geography Analytics")|tojson }})'{% endif %}>
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
        {{ _("Top Countries by Orders") }}{% if not has_feature('ratings_export') %}{{ max_badge() }}{% endif %}
      </h3>
      {% if has_feature('ratings_export') %}
      <canvas id="geoChart" height="200"></canvas>
      {% else %}
      <div class="flex flex-col items-center justify-center h-[200px] text-gray-400 dark:text-gray-500 gap-2">
        <span class="material-symbols-outlined text-3xl">public</span>
        <span class="text-xs text-center">{{ _("Geography analytics available on MAX plan") }}</span>
      </div>
      {% endif %}
    </div>

    {# Customer Value Segments — MAX feature #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5{% if not has_feature('ratings_export') %} cursor-pointer{% endif %}"
         {% if not has_feature('ratings_export') %}onclick='showUpgradeModal("max", {{ _("Customer Value Segments")|tojson }})'{% endif %}>
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
        {{ _("Customer Value Segments") }}{% if not has_feature('ratings_export') %}{{ max_badge() }}{% endif %}
      </h3>
      {% if has_feature('ratings_export') %}
      <canvas id="segmentChart" height="200"></canvas>
      {% else %}
      <div class="flex flex-col items-center justify-center h-[200px] text-gray-400 dark:text-gray-500 gap-2">
        <span class="material-symbols-outlined text-3xl">pie_chart</span>
        <span class="text-xs text-center">{{ _("Value segmentation available on MAX plan") }}</span>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {# ── Status breakdown ── #}
    <div id="status-breakdown" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ _("By Status") }}</h3>
      <div class="space-y-2">
        {% set max_status = [stats.open, stats.in_progress, stats.waiting_customer, stats.closed]|max or 1 %}
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">{{ _("Open") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-yellow-400 h-5 rounded-full" style="width: {{ (stats.open / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.open }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">{{ _("In Progress") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-blue-400 h-5 rounded-full" style="width: {{ (stats.in_progress / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.in_progress }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">{{ _("Waiting") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-orange-400 h-5 rounded-full" style="width: {{ (stats.waiting_customer / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.waiting_customer }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">{{ _("Closed") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-green-400 h-5 rounded-full" style="width: {{ (stats.closed / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.closed }}</span>
        </div>
      </div>
    </div>

    {# ── Priority breakdown ── #}
    <div id="priority-breakdown" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ _("By Priority") }}</h3>
      <div class="space-y-2">
        {% set max_prio = [stats.p1, stats.p2, stats.p3, stats.p4]|max or 1 %}
        <div class="flex items-center gap-3">
          <span class="w-16 text-xs text-gray-600 dark:text-gray-400">{{ _("Critical") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-red-500 h-5 rounded-full" style="width: {{ (stats.p1 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p1 }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-16 text-xs text-gray-600 dark:text-gray-400">{{ _("High") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-orange-500 h-5 rounded-full" style="width: {{ (stats.p2 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p2 }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-16 text-xs text-gray-600 dark:text-gray-400">{{ _("Normal") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-yellow-500 h-5 rounded-full" style="width: {{ (stats.p3 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p3 }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-16 text-xs text-gray-600 dark:text-gray-400">{{ _("Low") }}</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-gray-400 h-5 rounded-full" style="width: {{ (stats.p4 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p4 }}</span>
        </div>
      </div>
    </div>
  </div>

  {# ── Support expiration alerts ── #}
  {% if expiring %}
  <div id="expiring-section" class="mt-6 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-700 rounded-xl p-5">
    <h3 class="text-sm font-semibold text-red-700 dark:text-red-400 mb-3 flex items-center gap-1.5">
      <span class="material-symbols-outlined text-lg">warning</span>
      {% set n_expiring = expiring|length %}
      {% trans count=n_expiring %}Expired Support ({{ count }} open ticket){% pluralize %}Expired Support ({{ count }} open tickets){% endtrans %}
    </h3>
    <div class="space-y-1">
      {% for t in expiring %}
      <a href="{{ url_for('ticket_get', ticket_id=t.id) }}" class="flex items-center justify-between text-sm text-red-800 dark:text-red-400 hover:text-red-600 dark:hover:text-red-200 py-1">
        <span class="truncate">#{{ t.id }} &mdash; {{ t.subject }}</span>
        <span class="text-xs text-red-500 dark:text-red-400 whitespace-nowrap ml-3">
          {% if t.expire_date %}{% set expire_date = t.expire_date %}{% trans %}expired {{ expire_date }}{% endtrans %}{% else %}{{ _("expired") }}{% endif %}
        </span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# ── Recent activity ── #}
  <div id="recent-activity" class="mt-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _("Recent Activity") }}</h3>
    </div>
    <table id="recent-activity-table" class="w-full text-sm">
      <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for t in recent %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          <td class="px-5 py-2.5">
            <a href="{{ url_for('ticket_get', ticket_id=t.id) }}" class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 font-medium">#{{ t.id }}</a>
          </td>
          <td class="px-5 py-2.5 text-gray-900 dark:text-gray-100 truncate max-w-xs">{{ t.subject }}</td>
          <td class="px-5 py-2.5 whitespace-nowrap">
            {% if t.status == 'open' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">{{ _("Open") }}</span>
            {% elif t.status == 'in_progress' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400">{{ _("In Progress") }}</span>
            {% elif t.status == 'waiting_customer' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">{{ _("Waiting") }}</span>
            {% elif t.status == 'closed' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400">{{ _("Closed") }}</span>
            {% endif %}
          </td>
          <td class="px-5 py-2.5 whitespace-nowrap">
            {% if t.priority == 'p1' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400">{{ _("Critical") }}</span>
            {% elif t.priority == 'p2' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">{{ _("High") }}</span>
            {% elif t.priority == 'p3' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">{{ _("Normal") }}</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">{{ _("Low") }}</span>
            {% endif %}
          </td>
          <td class="px-5 py-2.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
            {{ t.last_activity_at|localdt('%Y-%m-%d %H:%M') if t.last_activity_at else '-' }}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="5" class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">{{ _("No tickets yet.") }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{# ── Chart.js initialization ── #}
{% if revenue_stats and revenue_stats.total_orders > 0 %}
<script>
// Chart.js dark mode color helper
function getChartColors() {
  var isDark = document.documentElement.classList.contains('dark');
  return {
    text: isDark ? '#d1d5db' : '#374151',
    grid: isDark ? 'rgba(75,85,99,0.3)' : 'rgba(0,0,0,0.1)',
    tick: isDark ? '#9ca3af' : '#6b7280',
  };
}

var _allCharts = [];

function updateChartColors() {
  var c = getChartColors();
  _allCharts.forEach(function(chart) {
    if (!chart || !chart.options) return;
    // Update scale colors
    Object.keys(chart.options.scales || {}).forEach(function(key) {
      var scale = chart.options.scales[key];
      if (scale.ticks) scale.ticks.color = c.tick;
      if (scale.grid) scale.grid.color = c.grid;
      if (scale.title) scale.title.color = c.text;
    });
    // Update legend color
    if (chart.options.plugins && chart.options.plugins.legend && chart.options.plugins.legend.labels) {
      chart.options.plugins.legend.labels.color = c.text;
    }
    chart.update('none');
  });
}

document.addEventListener('DOMContentLoaded', function() {
  var cc = getChartColors();

  // Orders & Revenue trend (dual Y-axis, 4 datasets)
  const otLabels = {{ orders_time.labels | tojson }};
  const otOrders = {{ orders_time.order_counts | tojson }};
  const otRevProducts = {{ orders_time.revenue_products | tojson }};
  const otRevBC = {{ orders_time.revenue_bc | tojson }};
  const otRevTotal = {{ orders_time.revenue_total | tojson }};

  if (document.getElementById('ordersRevenueChart')) {
    // Load saved toggle state
    const toggleKeys = ['orders', 'products', 'bc', 'total'];
    let savedToggles = { orders: true, products: true, bc: true, total: false };
    try {
      const stored = localStorage.getItem('dashboard_chart_toggles');
      if (stored) savedToggles = JSON.parse(stored);
    } catch(e) {}

    const orChart = new Chart(document.getElementById('ordersRevenueChart'), {
      type: 'line',
      data: {
        labels: otLabels,
        datasets: [
          {
            label: {{ _("Orders")|tojson }},
            data: otOrders,
            borderColor: '#6366f1',
            backgroundColor: 'rgba(99,102,241,0.1)',
            fill: true,
            tension: 0.3,
            yAxisID: 'y',
            hidden: !savedToggles.orders,
          },
          {
            label: {{ _("Products")|tojson }},
            data: otRevProducts,
            borderColor: '#10b981',
            backgroundColor: 'rgba(16,185,129,0.1)',
            fill: true,
            tension: 0.3,
            yAxisID: 'y1',
            hidden: !savedToggles.products,
          },
          {
            label: {{ _("Business Care")|tojson }},
            data: otRevBC,
            borderColor: '#f59e0b',
            backgroundColor: 'rgba(245,158,11,0.1)',
            fill: true,
            tension: 0.3,
            yAxisID: 'y1',
            hidden: !savedToggles.bc,
          },
          {
            label: {{ _("Total Revenue")|tojson }},
            data: otRevTotal,
            borderColor: '#6b7280',
            backgroundColor: 'transparent',
            borderDash: [5, 5],
            fill: false,
            tension: 0.3,
            yAxisID: 'y1',
            hidden: !savedToggles.total,
          }
        ]
      },
      options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        scales: {
          y: { type: 'linear', position: 'left', title: { display: true, text: {{ _("Orders")|tojson }}, color: cc.text }, beginAtZero: true, ticks: { color: cc.tick }, grid: { color: cc.grid } },
          y1: { type: 'linear', position: 'right', title: { display: true, text: {{ _("Revenue (€)")|tojson }}, color: cc.text }, beginAtZero: true, grid: { drawOnChartArea: false }, ticks: { color: cc.tick } },
          x: { ticks: { color: cc.tick }, grid: { color: cc.grid } },
        },
        plugins: { legend: { display: false } }
      }
    });
    _allCharts.push(orChart);

    // Apply saved state to checkboxes
    document.querySelectorAll('[data-chart-toggle]').forEach(cb => {
      const idx = parseInt(cb.dataset.chartToggle);
      const key = toggleKeys[idx];
      cb.checked = savedToggles[key] !== false;
      // Style: dim label when unchecked
      if (!cb.checked) cb.closest('label').classList.add('opacity-40');
    });

    // Toggle handler
    document.querySelectorAll('[data-chart-toggle]').forEach(cb => {
      cb.addEventListener('change', function() {
        const idx = parseInt(this.dataset.chartToggle);
        const key = toggleKeys[idx];
        orChart.data.datasets[idx].hidden = !this.checked;
        orChart.update();
        this.closest('label').classList.toggle('opacity-40', !this.checked);
        savedToggles[key] = this.checked;
        try { localStorage.setItem('dashboard_chart_toggles', JSON.stringify(savedToggles)); } catch(e) {}
      });
    });
  }

  // Top Products by Revenue (horizontal bar)
  const prodData = {{ product_perf | tojson }};
  if (document.getElementById('productChart') && prodData.length) {
    var pChart = new Chart(document.getElementById('productChart'), {
      type: 'bar',
      data: {
        labels: prodData.map(p => p.name.length > 25 ? p.name.slice(0,22) + '...' : p.name),
        datasets: [{
          label: {{ _("Revenue")|tojson }},
          data: prodData.map(p => parseFloat(p.revenue)),
          backgroundColor: ['#6366f1','#8b5cf6','#a78bfa','#c4b5fd','#ddd6fe','#ede9fe','#f5f3ff','#818cf8','#4f46e5','#4338ca'],
        }]
      },
      options: {
        indexAxis: 'y',
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
          x: { beginAtZero: true, title: { display: true, text: {{ _("Revenue")|tojson }}, color: cc.text }, ticks: { color: cc.tick }, grid: { color: cc.grid } },
          y: { ticks: { color: cc.tick }, grid: { color: cc.grid } },
        }
      }
    });
    _allCharts.push(pChart);
  }

  // Top Countries by Orders (bar)
  const geoData = {{ geography | tojson }};
  if (document.getElementById('geoChart') && geoData.length) {
    var gChart = new Chart(document.getElementById('geoChart'), {
      type: 'bar',
      data: {
        labels: geoData.map(g => g.country),
        datasets: [{
          label: {{ _("Orders")|tojson }},
          data: geoData.map(g => g.orders),
          backgroundColor: '#3b82f6',
        }]
      },
      options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
          y: { beginAtZero: true, title: { display: true, text: {{ _("Orders")|tojson }}, color: cc.text }, ticks: { color: cc.tick }, grid: { color: cc.grid } },
          x: { ticks: { color: cc.tick }, grid: { color: cc.grid } },
        }
      }
    });
    _allCharts.push(gChart);
  }

  // Customer Value Segments (doughnut)
  const segData = {{ value_segments | tojson }};
  if (document.getElementById('segmentChart') && (segData.high + segData.medium + segData.low) > 0) {
    var sChart = new Chart(document.getElementById('segmentChart'), {
      type: 'doughnut',
      data: {
        labels: [{{ _("High (>500)")|tojson }}, {{ _("Medium (100-500)")|tojson }}, {{ _("Low (<100)")|tojson }}],
        datasets: [{
          data: [segData.high, segData.medium, segData.low],
          backgroundColor: ['#10b981', '#f59e0b', '#94a3b8'],
        }]
      },
      options: {
        responsive: true,
        plugins: { legend: { position: 'bottom', labels: { color: cc.text } } }
      }
    });
    _allCharts.push(sChart);
  }
});

</script>
{% endif %}

<script>
(function () {
  var btn = document.getElementById('avg-response-tips-btn');
  var popover = document.getElementById('avg-response-tips-popover');
  if (!btn || !popover) return;

  function openPopover() {
    popover.classList.remove('hidden');
    btn.setAttribute('aria-expanded', 'true');
    setTimeout(function () {
      document.addEventListener('click', onOutsideClick);
      document.addEventListener('keydown', onEscape);
    }, 0);
  }

  function closePopover() {
    popover.classList.add('hidden');
    btn.setAttribute('aria-expanded', 'false');
    document.removeEventListener('click', onOutsideClick);
    document.removeEventListener('keydown', onEscape);
  }

  function onOutsideClick(e) {
    if (!btn.contains(e.target) && !popover.contains(e.target)) {
      closePopover();
    }
  }

  function onEscape(e) {
    if (e.key === 'Escape') {
      closePopover();
      btn.focus();
    }
  }

  btn.addEventListener('click', function (e) {
    e.stopPropagation();
    if (popover.classList.contains('hidden')) {
      openPopover();
    } else {
      closePopover();
    }
  });
})();
</script>
{% endblock %}