{% extends "admin/_admin_base.html" %}

{% block title %}{{ ad.title }} · Preview · Admin{% endblock %}
{% block admin_title %}{{ ad.title }}{% endblock %}
{% block admin_subtitle %}Exactly how this advertisement appears in each placement.{% endblock %}

{% block admin_actions %}
  <a class="btn btn-outline-secondary" href="{{ url_for('admin.ad_edit', public_id=ad.public_id) }}">
    <i class="bi bi-pencil me-1"></i> Edit
  </a>
{% endblock %}

{% block admin_content %}
<!-- Summary -->
<div class="card border-0 shadow-sm mb-4">
  <div class="card-body p-4">
    <div class="row g-3">
      <div class="col-6 col-md-3">
        <div class="text-muted small">Status</div>
        {% include "admin/advertisements/_status_badge.html" %}
      </div>
      <div class="col-6 col-md-3">
        <div class="text-muted small">Type / Placement</div>
        <div class="fw-semibold">{{ ad.advertisement_type.value|title }} · {{ ad.placement.display_name }}</div>
      </div>
      <div class="col-6 col-md-2">
        <div class="text-muted small">Display Weight</div>
        <div class="fw-semibold">
          {{ ad.priority }}{% if ad.priority == 100 %}
          <span class="badge bg-success-subtle text-success-emphasis fw-normal">Recommended</span>{% endif %}
        </div>
        {# Relative frequency — explanatory label only (not a guaranteed percentage). #}
        <div class="text-muted small mt-1">
          {% set w = ad.priority %}
          {% if w == 0 %}Excluded from normal random selection
          {% elif w == 100 %}Baseline exposure
          {% elif w == 50 %}Approximately half as often as the default
          {% elif w == 200 %}Approximately twice as often as the default
          {% elif w == 500 %}Approximately five times as often as the default
          {% else %}Approximately {{ '%g'|format(w / 100) }}× as often as the default
          {% endif %}
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="text-muted small">Impressions</div>
        <div class="fw-semibold">{{ ad.impression_count }}</div>
      </div>
      <div class="col-6 col-md-2">
        <div class="text-muted small">Clicks · CTR</div>
        <div class="fw-semibold">{{ ad.click_count }} · {{ '0%' if ctr == 0 else '%.1f%%'|format(ctr) }}</div>
      </div>
    </div>
    {% if ad.start_at or ad.end_at %}
      <div class="text-muted small mt-3">
        <i class="bi bi-calendar-event me-1"></i>
        Schedule:
        {{ ad.start_at.strftime('%d %b %Y, %H:%M') if ad.start_at else 'immediately' }}
        &rarr;
        {{ ad.end_at.strftime('%d %b %Y, %H:%M') if ad.end_at else 'no end' }}
      </div>
    {% endif %}
    {% if ad.redirect_url %}
      <div class="text-muted small mt-1"><i class="bi bi-link-45deg me-1"></i>{{ ad.redirect_url }}</div>
    {% endif %}
  </div>
</div>

<!-- True-to-life previews: each ad partial is reused unchanged and rendered
     inside a container that reproduces its real page context (width, background,
     spacing). No fixed boxes constrain the ad's natural size. -->
<div class="wysiwyg-previews">

  <!-- Landing Page: banner inside the landing container width, on the landing bg -->
  <section class="wysiwyg-block">
    <div class="wysiwyg-label">Landing Page</div>
    <div class="wysiwyg-stage wysiwyg-stage-landing">
      <div class="wysiwyg-landing-container">
        {% with ad = ad %}{% include "advertisements/_ad_banner.html" %}{% endwith %}
      </div>
    </div>
  </section>

  <!-- Marketplace: banner at full catalog content width, on the app surface -->
  <section class="wysiwyg-block">
    <div class="wysiwyg-label">Marketplace</div>
    <div class="wysiwyg-stage wysiwyg-stage-marketplace">
      {% with ad = ad %}{% include "advertisements/_ad_banner.html" %}{% endwith %}
    </div>
  </section>

  <!-- Sidebar: card inside a rail at the real sidebar width + padding -->
  <section class="wysiwyg-block">
    <div class="wysiwyg-label">Sidebar</div>
    <div class="wysiwyg-stage wysiwyg-stage-rail">
      <div class="wysiwyg-sidebar-rail app-sidebar-body">
        {% with ad = ad %}{% include "advertisements/_ad_sidebar.html" %}{% endwith %}
      </div>
    </div>
  </section>

  <!-- Chat Unlock: card inside the real chat panel + composer wrapper -->
  <section class="wysiwyg-block">
    <div class="wysiwyg-label">Chat Unlock</div>
    <div class="wysiwyg-stage wysiwyg-stage-rail">
      <div class="wysiwyg-chat-panel card shadow-sm border-0">
        <div class="chat-composer-wrap">
          {% with conversation = {'public_id': ad.public_id},
                  messaging_state = {'unlock_size': 5, 'can_watch_ad': True},
                  rewarded_ad = ad %}
            {% include "advertisements/_ad_rewarded.html" %}
          {% endwith %}
        </div>
      </div>
    </div>
  </section>

</div>
{% endblock %}