{% extends "base.html" %}
{% block title %}{{ product.title | default("Crawl detail") }} — product-ui{% endblock %}

{% macro price_str(p) %}
  {%- if p -%}
    {%- if p.symbol and not p.suffix -%}{{ p.symbol }}{%- endif -%}
    {%- if p.value is not none -%}{{ "%.2f"|format(p.value) }}{%- else -%}{{ p.raw }}{%- endif -%}
    {%- if p.symbol and p.suffix -%} {{ p.symbol }}{%- endif -%}
    {%- if p.unit and not p.symbol -%} {{ p.unit }}{%- endif -%}
  {%- endif -%}
{% endmacro %}

{% block content %}

{# ── Header ────────────────────────────────────────────────────────────── #}
<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
  <div>
    <h2 class="mb-1">{{ product.title | default("(no title)") }}</h2>
    <div class="text-muted small">
      <span class="badge bg-secondary me-1">{{ info.provider }}</span>
      {% if info.variant %}<span class="badge bg-secondary me-1">{{ info.variant }}</span>{% endif %}
      <span>crawled {{ info.time[:19] | replace("T", " ") }}</span>
    </div>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    {% if info.url %}
    <a href="{{ info.url }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary">
      Open original ↗
    </a>
    {% endif %}
    {# Re-crawl button #}
    <form method="post" action="/fetch">
      <input type="hidden" name="url" value="{{ info.url }}">
      <button type="submit" class="btn btn-sm btn-primary">Re-crawl</button>
    </form>
    <a href="/" class="btn btn-sm btn-outline-dark">← List</a>
  </div>
</div>

{# ── Gallery ───────────────────────────────────────────────────────────── #}
{% set gallery = product.gallery %}
{% if gallery %}
<div class="mb-4">
  <h5 class="mb-2">Gallery</h5>
  <div class="gallery-row d-flex flex-wrap gap-2">
    {% for item in gallery %}
      {% if item.type == "image" %}
        {% set thumb_src = item.thumb.file or item.thumb.url if item.thumb else none %}
        {% set full_src = item.file or item.url %}
        <a href="{{ full_src }}" target="_blank" rel="noopener" class="gallery-item">
          {% if thumb_src %}
            <img src="{{ thumb_src }}" alt="{{ item.caption.text if item.caption else '' }}" class="gallery-thumb">
          {% elif full_src %}
            <img src="{{ full_src }}" alt="{{ item.caption.text if item.caption else '' }}" class="gallery-thumb">
          {% endif %}
        </a>

      {% elif item.type == "video" %}
        {% set thumb_src = item.thumb.file or item.thumb.url if item.thumb else none %}
        {% set video_src = item.file or item.url %}
        <div class="gallery-item position-relative">
          {% if thumb_src %}
            <a href="{{ video_src }}" target="_blank" rel="noopener">
              <img src="{{ thumb_src }}" alt="video" class="gallery-thumb">
              <span class="gallery-play-badge">▶</span>
            </a>
          {% elif video_src %}
            <a href="{{ video_src }}" target="_blank" rel="noopener" class="gallery-thumb d-flex align-items-center justify-content-center bg-dark text-white">
              ▶ Video
            </a>
          {% endif %}
        </div>

      {% elif item.type == "pdf" %}
        {% set pdf_src = item.file or item.url %}
        <a href="{{ pdf_src }}" target="_blank" rel="noopener" class="gallery-item gallery-thumb d-flex align-items-center justify-content-center bg-light border text-muted text-decoration-none">
          📄 PDF{% if item.page_count %} ({{ item.page_count }}p){% endif %}
        </a>
      {% endif %}
    {% endfor %}
  </div>
</div>
{% endif %}

{# ── Info cards ────────────────────────────────────────────────────────── #}
<div class="row g-3 mb-4">

  {# Pricing #}
  {% set pricing = product.pricing %}
  {% if pricing %}
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-header fw-semibold">Pricing</div>
      <div class="card-body">
        {% if pricing.price %}
        <div class="fs-4 fw-bold">{{ price_str(pricing.price) }}</div>
        {% endif %}
        {% if pricing.original %}
        <div class="text-muted text-decoration-line-through small">{{ price_str(pricing.original) }}</div>
        {% endif %}
        {% if pricing.reduction %}
          {% for r in pricing.reduction %}
          <span class="badge bg-danger me-1">
            {%- if r.type == "percentage" -%}
              −{{ (r.percentage * 100) | round(0) | int }}%
            {%- elif r.type == "price" -%}
              −{{ price_str(r.amount) }}
            {%- endif -%}
            {%- if r.name %} {{ r.name }}{%- endif -%}
          </span>
          {% endfor %}
        {% endif %}
        {% if pricing.shipping %}
          <div class="mt-2 small text-muted">
            {% for s in pricing.shipping %}
            <div>{{ s.name }}: {{ price_str(s.price) }}</div>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}

  {# Availability / Seller / Brand #}
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-header fw-semibold">Details</div>
      <div class="card-body small">
        {% if product.available is not none %}
        <div class="mb-1">
          <strong>Available:</strong>
          {% if product.available %}
            <span class="text-success">Yes</span>
          {% else %}
            <span class="text-danger">No</span>
          {% endif %}
        </div>
        {% endif %}

        {% if product.brand %}
        <div class="mb-1">
          <strong>Brand:</strong>
          {% if product.brand.url %}
            <a href="{{ product.brand.url }}" target="_blank" rel="noopener">{{ product.brand.name }}</a>
          {% else %}
            {{ product.brand.name }}
          {% endif %}
        </div>
        {% endif %}

        {% if product.seller %}
          {% if product.seller == "self" %}
          <div class="mb-1"><strong>Seller:</strong> Self (own shop)</div>
          {% elif product.seller is mapping %}
          <div class="mb-1">
            <strong>Seller:</strong>
            {% if product.seller.url %}
              <a href="{{ product.seller.url }}" target="_blank" rel="noopener">{{ product.seller.name }}</a>
            {% else %}
              {{ product.seller.name }}
            {% endif %}
            {% if product.seller.type %}<span class="badge bg-secondary ms-1">{{ product.seller.type }}</span>{% endif %}
          </div>
          {% endif %}
        {% endif %}

        {% if product.category %}
        <div class="mb-1">
          <strong>Category:</strong>
          {% set cat = product.category %}
          {% set parts = [] %}
          {% set _ = parts.append(cat.name) %}
          {% set parent = cat.parent %}
          {% for _ in range(10) %}
            {% if parent %}
              {% set _ = parts.insert(0, parent.name) %}
              {% set parent = parent.parent %}
            {% endif %}
          {% endfor %}
          {{ parts | join(" › ") }}
        </div>
        {% endif %}

        {% if product.id is not none %}
        <div class="mb-1"><strong>ID:</strong> {{ product.id }}</div>
        {% endif %}
        {% if product.website_variant %}
        <div class="mb-1"><strong>Website Variant:</strong> {{ product.website_variant }}</div>
        {% endif %}
      </div>
    </div>
  </div>

  {# Canonical URL #}
  {% if product.canonical_url or product.fetch_url %}
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-header fw-semibold">URLs</div>
      <div class="card-body small">
        {% if product.canonical_url %}
        <div class="mb-2">
          <strong>Canonical</strong><br>
          <a href="{{ product.canonical_url }}" target="_blank" rel="noopener" class="text-break">{{ product.canonical_url }}</a>
        </div>
        {% endif %}
        {% if product.fetch_url %}
        <div>
          <strong>Fetched</strong><br>
          <a href="{{ product.fetch_url }}" target="_blank" rel="noopener" class="text-break">{{ product.fetch_url }}</a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}

</div>

{# ── Description ────────────────────────────────────────────────────────── #}
{% if product.description %}
<div class="mb-4">
  <h5>Description</h5>
  <div class="description-box">{{ product.description }}</div>
</div>
{% endif %}

{# ── Variation types ────────────────────────────────────────────────────── #}
{% if product.variation_types %}
<div class="mb-4">
  <h5>Variations</h5>
  {% for vt in product.variation_types %}
  <div class="mb-3">
    <div class="fw-semibold mb-1">{{ vt.name }}{% if vt.type %} <span class="text-muted small">({{ vt.type }})</span>{% endif %}</div>
    <div class="d-flex flex-wrap gap-2">
      {% for v in (vt.variations or []) %}
      <span class="badge bg-light text-dark border">
        {% if v.image %}
          {% set vsrc = v.image.file or v.image.url %}
          {% if vsrc %}<img src="{{ vsrc }}" height="20" class="me-1">{% endif %}
        {% endif %}
        {{ v.name }}
        {% if v.available is not none %}
          {% if not v.available %}<span class="text-danger ms-1">✗</span>{% endif %}
        {% endif %}
      </span>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{# ── Tables ─────────────────────────────────────────────────────────────── #}
{% if product.tables %}
<div class="mb-4">
  <h5>Tables</h5>
  {% for table_name, rows in product.tables.items() %}
  <div class="mb-3">
    <h6 class="text-capitalize">{{ table_name }}</h6>
    <table class="table table-sm table-bordered table-striped w-auto">
      <tbody>
        {% for key, val in rows.items() %}
        <tr>
          <th class="text-nowrap pe-3 bg-light">{{ key }}</th>
          <td>{{ val }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>
{% endif %}

{# ── Availabilities ─────────────────────────────────────────────────────── #}
{% if product.availabilities %}
<div class="mb-4">
  <h5>Availabilities</h5>
  <table class="table table-sm table-bordered">
    <thead class="table-dark">
      <tr>
        <th>Selection</th>
        <th>Status</th>
        <th>Remaining</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      {% for av in product.availabilities %}
      <tr>
        <td>{{ av.selection | tojson }}</td>
        <td>{{ av.details or "" }}</td>
        <td>{{ av.remaining if av.remaining is not none else "—" }}</td>
        <td>{% if av.pricing and av.pricing.price %}{{ price_str(av.pricing.price) }}{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{# ── Extra (provider-specific) ──────────────────────────────────────────── #}
{% if product.extra %}
<div class="mb-4">
  <div class="accordion" id="acc-extra">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#col-extra">
          Provider extra data ({{ product.extra.parser }})
        </button>
      </h2>
      <div id="col-extra" class="accordion-collapse collapse" data-bs-parent="#acc-extra">
        <div class="accordion-body">
          <table class="table table-sm table-bordered mb-0">
            <tbody>
              {% for k, v in product.extra.items() %}
              {% if k not in ("parser", "version") %}
              <tr>
                <th class="bg-light text-nowrap pe-3">{{ k }}</th>
                <td>{% if v is mapping or v is iterable and v is not string %}{{ v | tojson }}{% else %}{{ v }}{% endif %}</td>
              </tr>
              {% endif %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}

{# ── Meta ───────────────────────────────────────────────────────────────── #}
{% if product.meta %}
<div class="mb-4">
  <div class="accordion" id="acc-meta">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#col-meta">
          Page metadata
        </button>
      </h2>
      <div id="col-meta" class="accordion-collapse collapse" data-bs-parent="#acc-meta">
        <div class="accordion-body">
          <pre class="small mb-0" style="max-height:400px;overflow:auto">{{ product.meta | tojson(indent=2) }}</pre>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% endblock %}