{% extends "base.html" %}
{% block title %}{{ customer.display_name }} — Customer{% endblock %}
{% block content %}
<div id="customer-detail-page" class="p-6 max-w-6xl">

  {# ── Back + Header ── #}
  <div class="mb-6">
    <a href="{{ url_for('customers_list') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 mb-3">
      <span class="material-symbols-outlined text-base">arrow_back</span>
      Back to Customers
    </a>
    <div class="flex items-start justify-between">
      <div>
        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
          <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">person</span>
          {{ customer.display_name }}
          {% if has_bc %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-indigo-100 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-400">BC</span>
          {% endif %}
        </h2>
        {% if customer.website %}
        {% set ws_href = customer.website if customer.website.startswith('http') else 'https://' + customer.website %}
        <div class="flex items-center gap-2 mt-1">
          <a href="{{ ws_href }}" target="_blank" rel="noopener"
             class="inline-flex items-center gap-1 text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 text-sm">
            <span class="material-symbols-outlined text-base">link</span>
            {{ customer.website }}
            <span class="material-symbols-outlined text-xs">open_in_new</span>
          </a>
          {% if site_check %}
            {% if site_check.is_online == true %}
              {% set tip = 'Online' %}
              {% if site_check.error_message %}{% set tip = 'Online (' ~ site_check.http_status ~ ' — ' ~ site_check.error_message ~ ')' %}
              {% elif site_check.http_status %}{% set tip = 'Online (' ~ site_check.http_status ~ ', ' ~ (site_check.response_time_ms or '?') ~ 'ms)' %}{% endif %}
              <span class="inline-block w-2.5 h-2.5 rounded-full bg-green-500" title="{{ tip }}"></span>
            {% elif site_check.is_online == false %}
              {% set tip = 'Offline' %}
              {% if site_check.error_message %}{% set tip = 'Offline — ' ~ site_check.error_message %}{% endif %}
              <span class="inline-block w-2.5 h-2.5 rounded-full bg-red-500" title="{{ tip }}"></span>{% endif %}
            {% if site_check.module_found == true %}<span class="text-green-600 dark:text-green-400 text-xs font-medium" title="Module installed">Module OK</span>
            {% elif site_check.module_found == false %}<span class="text-amber-500 dark:text-amber-400 text-xs" title="Module not found">Module ?</span>{% endif %}
            {% if site_check.last_check_at %}<span class="text-xs text-gray-400 dark:text-gray-500">checked {{ site_check.last_check_at }}</span>{% endif %}
          {% endif %}
        </div>
        {% endif %}
        <div class="flex items-center gap-3 mt-1.5 text-xs text-gray-500 dark:text-gray-400">
          {% if customer.country_code %}
          <span>{{ customer.country_code }}</span>
          {% endif %}
          {% if customer.language %}
          <span class="text-gray-300 dark:text-gray-600">|</span>
          <span>{{ customer.language }}</span>
          {% endif %}
          <span class="text-gray-300 dark:text-gray-600">|</span>
          <span class="font-mono text-gray-400 dark:text-gray-500" title="{{ customer.customer_hash }}">{{ customer.customer_hash[:16] }}...</span>
        </div>
      </div>
    </div>
  </div>

  {# ── Stat cards ── #}
  <div 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">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Revenue</p>
      <p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">&euro;{{ customer.total_revenue }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Orders</p>
      <p class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ customer.total_orders }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Products</p>
      <p class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ customer.total_products }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Tickets</p>
      <p class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ customer.total_threads }}</p>
    </div>
  </div>

  {# ── Info cards: BC + Support ── #}
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    {# Business Care card #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-1.5 mb-3">
        <span class="material-symbols-outlined text-base text-indigo-600 dark:text-indigo-400">verified</span>
        Business Care
      </h3>
      {% if has_bc and bc_info %}
      <div class="space-y-1.5 text-sm">
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Status</span>
          <span class="font-medium text-indigo-700 dark:text-indigo-400">Active</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Product</span>
          <span class="text-gray-700 dark:text-gray-300">{{ bc_info.product_name or '--' }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Last BC Order</span>
          <span class="text-gray-700 dark:text-gray-300">{{ bc_info.order_date.strftime('%Y-%m-%d') if bc_info.order_date else '--' }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Amount</span>
          <span class="text-gray-700 dark:text-gray-300">&euro;{{ bc_info.amount or '0' }}</span>
        </div>
      </div>
      {% else %}
      <p class="text-sm text-gray-400 dark:text-gray-500">No Business Care subscription</p>
      {% endif %}
    </div>

    {# Support Status card #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-1.5 mb-3">
        <span class="material-symbols-outlined text-base text-blue-600 dark:text-blue-400">support</span>
        Support Status
      </h3>
      {% if support_info %}
      <div class="space-y-1.5 text-sm">
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Has Support</span>
          {% if support_info.has_support %}
          <span class="font-medium text-green-700 dark:text-green-400">Yes</span>
          {% elif support_info.has_support == false %}
          <span class="font-medium text-red-600 dark:text-red-400">No</span>
          {% else %}
          <span class="text-gray-400 dark:text-gray-500">Unknown</span>
          {% endif %}
        </div>
        {% if support_info.support_type %}
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Type</span>
          <span class="text-gray-700 dark:text-gray-300">{{ support_info.support_type }}</span>
        </div>
        {% endif %}
        {% if support_info.zen_type %}
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Zen Type</span>
          <span class="text-gray-700 dark:text-gray-300">{{ support_info.zen_type }}</span>
        </div>
        {% endif %}
        {% if support_info.zen_nb_days_left is not none %}
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Days Left</span>
          <span class="{% if support_info.zen_nb_days_left <= 0 %}text-red-600 dark:text-red-400{% elif support_info.zen_nb_days_left <= 30 %}text-amber-600 dark:text-amber-400{% else %}text-green-700 dark:text-green-400{% endif %} font-medium">
            {{ support_info.zen_nb_days_left }}
          </span>
        </div>
        {% endif %}
        {% if support_info.support_expiration_date %}
        <div class="flex justify-between">
          <span class="text-gray-500 dark:text-gray-400">Expires</span>
          <span class="text-gray-700 dark:text-gray-300">{{ support_info.support_expiration_date.strftime('%Y-%m-%d') }}</span>
        </div>
        {% endif %}
      </div>
      {% else %}
      <p class="text-sm text-gray-400 dark:text-gray-500">No support data available</p>
      {% endif %}
    </div>
  </div>

  {# ── Timeline row ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 mb-6">
    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Timeline</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400 block">First Order</span>
        <span class="text-gray-700 dark:text-gray-300">{{ customer.first_order_date.strftime('%Y-%m-%d') if customer.first_order_date else '--' }}</span>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400 block">Last Order</span>
        <span class="text-gray-700 dark:text-gray-300">{{ customer.last_order_date.strftime('%Y-%m-%d') if customer.last_order_date else '--' }}</span>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400 block">First Ticket</span>
        <span class="text-gray-700 dark:text-gray-300">{{ customer.first_thread_date.strftime('%Y-%m-%d') if customer.first_thread_date else '--' }}</span>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400 block">Last Ticket</span>
        <span class="text-gray-700 dark:text-gray-300">{{ customer.last_thread_date.strftime('%Y-%m-%d') if customer.last_thread_date else '--' }}</span>
      </div>
    </div>
  </div>

  {# ── Inferred Purchases (from BC subscriptions) ── #}
  {% if inferred_products %}
  <div class="mb-6">
    <div class="bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-700 rounded-xl p-4">
      <h3 class="text-sm font-semibold text-amber-800 dark:text-amber-400 flex items-center gap-1.5 mb-3">
        <span class="material-symbols-outlined text-base text-amber-600 dark:text-amber-400">lightbulb</span>
        Inferred Purchases
        <span class="text-xs font-normal text-amber-500 dark:text-amber-400">(from Business Care subscriptions)</span>
      </h3>
      <div class="space-y-2">
        {% for ip in inferred_products %}
        <div class="flex items-center gap-3 bg-white/60 dark:bg-gray-800/60 rounded-lg px-3 py-2">
          {% if ip.pico_url %}
          <img src="{{ ip.pico_url }}" alt="" class="w-7 h-7 rounded flex-shrink-0" loading="lazy" onerror="this.style.display='none'">
          {% else %}
          <div class="w-7 h-7 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
            <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">inventory_2</span>
          </div>
          {% endif %}
          <div class="min-w-0 flex-1">
            <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ ip.name }}</span>
            <span class="text-xs text-amber-600 dark:text-amber-400 ml-2">Inferred from: {{ ip.bc_name }}</span>
          </div>
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 flex-shrink-0">inferred</span>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  {# ── Purchase History ── #}
  <div class="mb-6">
    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-1.5">
      <span class="material-symbols-outlined text-base">receipt_long</span>
      Purchase History
      <span class="text-xs font-normal text-gray-400 dark:text-gray-500">({{ orders|length }})</span>
    </h3>
    {% if orders %}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
            <tr>
              <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Date</th>
              <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Order ID</th>
              <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Product</th>
              <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Type</th>
              <th class="text-right px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Amount</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for o in orders %}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
              <td class="px-4 py-2.5 text-gray-600 dark:text-gray-400 whitespace-nowrap text-xs">
                {{ o.order_date.strftime('%Y-%m-%d') if o.order_date else '--' }}
              </td>
              <td class="px-4 py-2.5 text-gray-700 dark:text-gray-300 whitespace-nowrap font-mono text-xs">
                {{ o.id_order or o.provider_order_id }}
              </td>
              <td class="px-4 py-2.5 max-w-[260px]">
                <div class="flex items-center gap-2">
                  {% if o.product_type == 'business_care' %}
                  <div class="w-6 h-6 rounded bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-600 flex items-center justify-center flex-shrink-0">
                    <span class="text-[10px] font-bold text-indigo-600 dark:text-indigo-400">BC</span>
                  </div>
                  {% elif o.pico_url %}
                  <img src="{{ o.pico_url }}" alt="" class="w-6 h-6 rounded flex-shrink-0" loading="lazy" onerror="this.style.display='none'">
                  {% endif %}
                  <span class="text-gray-900 dark:text-gray-100 truncate">{{ o.product_name or '--' }}</span>
                </div>
              </td>
              <td class="px-4 py-2.5 whitespace-nowrap">
                {% if o.transaction_type == 'income' %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400">income</span>
                {% elif o.transaction_type == 'payment' %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400">payment</span>
                {% else %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">{{ o.transaction_type or '--' }}</span>
                {% endif %}
              </td>
              <td class="px-4 py-2.5 text-right whitespace-nowrap font-medium">
                {% if o.transaction_type == 'income' %}
                <span class="text-emerald-600 dark:text-emerald-400">&euro;{{ o.amount or '0' }}</span>
                {% elif o.transaction_type == 'payment' %}
                <span class="text-red-600 dark:text-red-400">&euro;{{ o.amount or '0' }}</span>
                {% else %}
                <span class="text-gray-600 dark:text-gray-400">&euro;{{ o.amount or '0' }}</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% else %}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 text-center">
      <p class="text-gray-400 dark:text-gray-500 text-sm">No purchase history</p>
    </div>
    {% endif %}
  </div>

  {# ── Support Threads ── #}
  <div class="mb-6">
    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-1.5">
      <span class="material-symbols-outlined text-base">forum</span>
      Support Threads
      <span class="text-xs font-normal text-gray-400 dark:text-gray-500">({{ threads|length }})</span>
    </h3>
    {% if threads %}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
            <tr>
              <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Subject</th>
              <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Product</th>
              <th class="text-center px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Status</th>
              <th class="text-center px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Priority</th>
              <th class="text-center px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Support</th>
              <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Last Activity</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for t in threads %}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
              <td class="px-4 py-2.5 max-w-[300px]">
                {% if t.ticket_id %}
                <a href="{{ url_for('ticket_get', ticket_id=t.ticket_id) }}"
                   class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 truncate block" title="{{ t.subject }}">
                  {{ t.subject | truncate(50) }}
                </a>
                {% else %}
                <span class="text-gray-700 dark:text-gray-300 truncate block" title="{{ t.subject }}">{{ t.subject | truncate(50) }}</span>
                {% endif %}
              </td>
              <td class="px-4 py-2.5 text-gray-600 dark:text-gray-400 text-xs max-w-[160px]">
                <span class="truncate block">{{ t.product_name or '--' }}</span>
              </td>
              <td class="px-4 py-2.5 text-center whitespace-nowrap">
                {% if t.status == 'open' %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-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-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-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-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-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-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">closed</span>
                {% else %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
                {% endif %}
              </td>
              <td class="px-4 py-2.5 text-center whitespace-nowrap">
                {% if t.priority %}
                <span class="text-xs font-medium
                  {% if t.priority == 'p1' %}text-red-600 dark:text-red-400
                  {% elif t.priority == 'p2' %}text-amber-600 dark:text-amber-400
                  {% elif t.priority == 'p3' %}text-blue-600 dark:text-blue-400
                  {% else %}text-gray-500 dark:text-gray-400{% endif %}">
                  {{ t.priority | upper }}
                </span>
                {% else %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
                {% endif %}
              </td>
              <td class="px-4 py-2.5 text-center whitespace-nowrap">
                {% if t.is_support_expired %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400">expired</span>
                {% elif t.has_support %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400">active</span>
                {% elif t.has_support == false %}
                <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-500 dark:text-gray-400">none</span>
                {% else %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
                {% endif %}
              </td>
              <td class="px-4 py-2.5 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs">
                {{ t.last_activity_at.strftime('%Y-%m-%d') if t.last_activity_at else '--' }}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% else %}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 text-center">
      <p class="text-gray-400 dark:text-gray-500 text-sm">No support threads</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}