{# Rewarded-advertisement modal (chat). A trigger with [data-watch-ad-trigger]
   opens it; the simulated ad runs through loading → playing → completed states
   (see RewardedAdService in main.js). Only the Continue button submits the real
   reward form — the backend stays the single source of truth for granting
   messages. The creative is populated from a real rewarded advertisement (CHAT
   placement) when one is passed in `rewarded_ad`; otherwise the built-in
   placeholder is shown. Pass: conversation, messaging_state, rewarded_ad. #}
{% set ad = rewarded_ad %}
<div class="modal fade rad-modal" id="rewardedAdModal" tabindex="-1"
     aria-labelledby="rewardedAdTitle" aria-describedby="rewardedAdDesc" aria-hidden="true"
     data-ad-convo="{{ conversation.public_id }}"
     data-ad-placement="chat"
     data-ad-media-type="{{ 'video' if ad and ad.is_video else 'image' }}"
     data-duration-seconds="{{ ad.resolved_video_duration if ad and ad.is_video else config.get('REWARDED_AD_DURATION_SECONDS', 20) }}"
     data-cooldown-seconds="{{ config.get('REWARDED_AD_COOLDOWN_SECONDS', 0) }}"
     data-ad-public-id="{{ ad.public_id if ad else '' }}"
     data-reward-token-url="{{ url_for('chat.reward_token', public_id=conversation.public_id) }}"
     data-ad-event-url="{{ url_for('chat.ad_event', public_id=conversation.public_id) }}"
     {% if ad %}data-ad-impression-url="{{ url_for('advertisements.impression', public_id=ad.public_id) }}"{% endif %}>
  <div class="modal-dialog modal-dialog-centered rad-dialog">
    <div class="modal-content rad-content">

      <div class="rad-top">
        <span class="rad-eyebrow"><span class="rad-eyebrow-dot" aria-hidden="true"></span> Sponsored Advertisement</span>
        <h2 class="rad-title" id="rewardedAdTitle">Support CampusCart</h2>
        <p class="rad-subtitle" id="rewardedAdDesc">
          Watch this short advertisement to unlock {{ messaging_state.unlock_size }} additional messages.
        </p>
        {# Hidden until the ad completes — the user cannot skip it. #}
        <button type="button" class="btn-close rad-close d-none" data-ad-close
                data-bs-dismiss="modal" aria-label="Close advertisement"></button>
      </div>

      <div class="rad-body">
        {# Loading skeleton (~500ms) so it feels like a real ad request. #}
        <div class="rad-ad rad-skeleton" data-ad-loading>
          <div class="rad-sk rad-sk-badge"></div>
          <div class="rad-sk rad-sk-banner"></div>
          <div class="rad-sk rad-sk-line" style="width: 70%;"></div>
          <div class="rad-sk rad-sk-line" style="width: 48%;"></div>
          <div class="rad-sk rad-sk-btn"></div>
          <p class="rad-loading-text">Loading advertisement…</p>
        </div>

        {# Advertisement creative — real ad data when available, else placeholder.
           The in-creative CTA is shown *disabled* while the ad plays: the real,
           clickable click-through link lives in the completed state below, so a
           user can't leave mid-ad and abandon the reward. #}
        <div class="rad-ad rad-ad-live d-none" data-ad-creative aria-hidden="true">
          <span class="rad-ad-badge">Sponsored</span>
          <div class="rad-ad-banner{{ ' rad-ad-banner-video' if ad and ad.is_video }}">
            {% if ad and ad.is_video %}
              {# HTML5 video creative: muted + playsinline for autoplay policies,
                 no controls, seeking disabled in JS. Reward timing is driven by
                 the configured duration, not the media length. #}
              <video class="rad-ad-video" data-ad-video src="{{ ad.media_url }}"
                     muted playsinline preload="auto" disablepictureinpicture
                     controlslist="nodownload noplaybackrate noremoteplayback"
                     {% if ad.image_path %}poster="{{ ad.image_path }}"{% endif %}></video>
              <span class="rad-video-spinner" data-ad-video-loading role="status" aria-label="Loading advertisement">
                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
              </span>
              {% if ad.image_path %}
                {# Fallback shown automatically if the video cannot be played. #}
                <img class="rad-ad-img d-none" data-ad-fallback-img src="{{ ad.image_path }}" alt="" decoding="async">
              {% endif %}
              <div class="rad-video-error d-none" data-ad-video-error role="alert">
                <i class="bi bi-camera-video-off" aria-hidden="true"></i>
                <span>This advertisement couldn't be played.</span>
              </div>
            {% elif ad and ad.image_path %}
              <img class="rad-ad-img" src="{{ ad.image_path }}" alt="" loading="lazy" decoding="async">
            {% else %}
              <span class="rad-ad-illus"><i class="bi {{ ad.icon if ad and ad.icon else 'bi-code-slash' }}"></i></span>
            {% endif %}
            <span class="rad-ad-shine" aria-hidden="true"></span>
          </div>
          {% if not ad %}
            <div class="rad-ad-brand">
              <span class="rad-ad-logo"><i class="bi bi-mortarboard-fill"></i></span>
              <span class="rad-ad-brandname">ProvatSoft Academy</span>
            </div>
          {% endif %}
          <h3 class="rad-ad-headline">{{ ad.title if ad else 'Learn Python Faster' }}</h3>
          <p class="rad-ad-copy">{{ ad.description if ad and ad.description else 'Build real-world projects. Start your career today.' }}</p>
          {# Only render a CTA when there is a real destination to open (else the
             fallback: no clickable-looking button that goes nowhere). It stays
             locked during playback and becomes active in the completed state. #}
          {% if ad and ad.redirect_url %}
            <span class="rad-ad-cta is-locked" aria-disabled="true"
                  title="Available after the advertisement finishes.">
              <i class="bi bi-lock-fill" aria-hidden="true"></i> Available after advertisement
            </span>
            <p class="rad-ad-cta-hint"><i class="bi bi-hourglass-split" aria-hidden="true"></i> Unlocks after the countdown.</p>
          {% endif %}
        </div>
      </div>

      {# Progress + live countdown (visible while playing). #}
      <div class="rad-progress-wrap d-none" data-ad-playing>
        <p class="rad-watching"><span class="rad-watching-dot" aria-hidden="true"></span> Watching advertisement…</p>
        <p class="rad-watching-hint">Please watch this advertisement to unlock +{{ messaging_state.unlock_size }} chat messages.</p>

        {# Circular animated countdown / progress indicator. #}
        <div class="rad-ring-wrap" role="progressbar" aria-label="Advertisement progress"
             aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <svg class="rad-ring" viewBox="0 0 120 120" aria-hidden="true">
            <circle class="rad-ring-track" cx="60" cy="60" r="52" fill="none"></circle>
            <circle class="rad-ring-fill" data-ad-ring cx="60" cy="60" r="52" fill="none"
                    transform="rotate(-90 60 60)"></circle>
          </svg>
          <span class="rad-ring-num">
            <span class="rad-countdown" data-ad-countdown>{{ config.get('REWARDED_AD_DURATION_SECONDS', 20) }}</span>
            <span class="rad-ring-unit" data-ad-unit>seconds</span>
          </span>
        </div>

        {# Retained thin linear bar as a secondary cue. #}
        <div class="rad-progress" aria-hidden="true">
          <span class="rad-progress-fill" data-ad-progress></span>
        </div>
      </div>

      {# Completion success animation. #}
      <div class="rad-done d-none" data-ad-done>
        <span class="rad-done-check" aria-hidden="true">
          <svg class="rad-check-svg" viewBox="0 0 52 52">
            <circle class="rad-check-circle" cx="26" cy="26" r="24" fill="none"/>
            <path class="rad-check-mark" fill="none" d="M14 27l7 7 16-16"/>
          </svg>
        </span>
        <p class="rad-done-title"><i class="bi bi-check-circle-fill me-1" aria-hidden="true"></i>Advertisement completed</p>
        <p class="rad-done-text">Your reward has been unlocked.</p>
        {% if ad and ad.redirect_url %}
          {# Real click-through: opens the advertiser in a new tab (records a click
             via the existing analytics route) without interrupting the reward. #}
          <a class="rad-ad-visit" data-ad-cta target="_blank" rel="noopener sponsored"
             href="{{ url_for('advertisements.click', public_id=ad.public_id) }}"
             {% if ad.redirect_url.startswith('http') %}data-dest="{{ ad.redirect_url }}"{% endif %}>
            {{ ad.title }} <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
          </a>
          {# Shown only if the browser blocks the new tab on a repeat click. Never
             affects the reward — purely a UX hint. #}
          <p class="rad-popup-blocked d-none" data-ad-popup-msg role="alert">
            <i class="bi bi-exclamation-triangle me-1" aria-hidden="true"></i>
            We couldn't open the advertiser's page because your browser blocked it.
            Please click the button again or allow pop-ups.
          </p>
        {% endif %}
      </div>

      {# Reward card — toggles to a "ready" state on completion. #}
      <div class="rad-reward" data-reward-card>
        <span class="rad-reward-ico" data-reward-ico aria-hidden="true">🎁</span>
        <div class="rad-reward-body">
          <p class="rad-reward-title" data-reward-title>Reward</p>
          <p class="rad-reward-amount">+{{ messaging_state.unlock_size }} Messages</p>
          <p class="rad-reward-note" data-reward-note>Available after watching this advertisement.</p>
        </div>
      </div>

      <div class="rad-footer">
        {# The ONLY path that claims the reward: submitting this form hits the
           existing chat.watch_ad endpoint (POST → redirect → success flash). #}
        <form method="post" action="{{ url_for('chat.watch_ad', public_id=conversation.public_id) }}"
              class="rad-claim-form" data-ad-form
              data-reward-amount="{{ messaging_state.unlock_size }}"
              data-prev-remaining="{{ messaging_state.total_remaining }}"
              data-convo="{{ conversation.public_id }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          {# Signed, single-use reward token — server-minted, refreshed in memory
             when the modal opens, and verified server-side before granting. #}
          <input type="hidden" name="reward_token" data-reward-token value="{{ reward_token or '' }}">
          <button type="submit" class="rad-continue" data-ad-continue disabled>Watching advertisement…</button>
        </form>
      </div>

      {# Screen-reader live region for the countdown / completion. #}
      <p class="visually-hidden" aria-live="polite" data-ad-live></p>
    </div>
  </div>
</div>