{# Shared advertisement form fields (create + edit). Rendered inside a
   <form enctype="multipart/form-data"> supplied by the page. Pass: form, ad. #}
{{ form.hidden_tag() }}

<div class="mb-3">
  <label class="form-label" for="{{ form.title.id }}">{{ form.title.label.text }}</label>
  {{ form.title(class="form-control" ~ (" is-invalid" if form.title.errors else ""), data_ad_title="1", maxlength="150") }}
  {% for e in form.title.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
</div>

<div class="mb-3">
  <label class="form-label" for="{{ form.description.id }}">{{ form.description.label.text }}</label>
  {{ form.description(class="form-control" ~ (" is-invalid" if form.description.errors else ""), rows="3", data_ad_desc="1") }}
  {% for e in form.description.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
</div>

<div class="mb-3">
  <label class="form-label" for="{{ form.redirect_url.id }}">{{ form.redirect_url.label.text }}</label>
  {{ form.redirect_url(class="form-control" ~ (" is-invalid" if form.redirect_url.errors else ""), placeholder="https://example.com") }}
  {% for e in form.redirect_url.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
</div>

<div class="row g-3">
  <div class="col-md-6">
    <label class="form-label" for="{{ form.advertisement_type.id }}">{{ form.advertisement_type.label.text }}</label>
    {{ form.advertisement_type(class="form-select", data_ad_type="1") }}
    <div class="form-text">
      <span data-ad-type-banner>Static image advertisement displayed throughout the marketplace.</span>
      <span data-ad-type-rewarded>Advertisement shown when users unlock additional chat messages. Choose whether users will watch an image or a video advertisement.</span>
    </div>
  </div>
  {# Placement dropdown — shown for Banner. The <select> stays in the DOM even
     when hidden (for Rewarded) so the placement is always submitted; the backend
     also normalises Rewarded → rewarded defensively. #}
  <div class="col-md-6" data-ad-placement-field>
    <label class="form-label" for="{{ form.placement.id }}">{{ form.placement.label.text }}</label>
    {{ form.placement(class="form-select", data_ad_placement="1") }}
  </div>
  {# Rewarded placement is fixed — shown read-only in place of the dropdown. #}
  <div class="col-md-6 d-none" data-ad-placement-rewarded>
    <label class="form-label">Placement</label>
    <div class="d-flex align-items-start gap-2 p-2 rounded border bg-light">
      <i class="bi bi-gift-fill text-warning mt-1" aria-hidden="true"></i>
      <div>
        <div class="fw-semibold">Chat Unlock <span class="text-muted fw-normal">(Automatically assigned)</span></div>
        <div class="small text-muted">Rewarded advertisements are displayed when users watch an advertisement to unlock additional chat messages. This placement is assigned automatically.</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    {% set wval = form.priority.data or 0 %}
    {% set wpct = [[wval / 10, 0]|max, 100]|min %}
    {% set wnow = [[wval, 0]|max, 1000]|min %}
    <label class="form-label d-flex align-items-center gap-2" for="{{ form.priority.id }}">
      {{ form.priority.label.text }}
      <span class="badge bg-success-subtle text-success-emphasis fw-normal {{ '' if form.priority.data == 100 else 'd-none' }}"
            data-weight-recommended-badge title="This is the default, recommended weight.">Recommended</span>
    </label>
    {{ form.priority(class="form-control" ~ (" is-invalid" if form.priority.errors else ""),
                     min="0", max="1000", placeholder="100 (Recommended)",
                     data_ad_weight="1", aria_describedby="weight-help") }}
    {% for e in form.priority.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}

    {# Visual weight meter (0–1000). Guidance only — never affects validation. #}
    <div class="mt-2">
      <div class="progress" role="progressbar" aria-label="Display weight level"
           aria-valuemin="0" aria-valuemax="1000" aria-valuenow="{{ wnow }}"
           style="height: 8px;" data-weight-progress-wrap>
        <div class="progress-bar" data-weight-progress style="width: {{ wpct|round(1) }}%;"></div>
      </div>
      <div class="d-flex justify-content-between small text-muted mt-1">
        <span>Low</span>
        <span title="Weight 100 is the recommended default.">Recommended&nbsp;(100)</span>
        <span>High</span>
      </div>
    </div>

    {# Recommended-default note — shown when the weight is exactly 100. #}
    <div class="form-text text-success-emphasis {{ '' if form.priority.data == 100 else 'd-none' }}" data-weight-recommended-note>
      <i class="bi bi-check-circle me-1" aria-hidden="true"></i>This is the recommended default for most advertisements.
    </div>

    {# Very-high-weight caution — non-blocking; shown when the weight is ≥ 500. #}
    <div class="alert alert-warning d-flex gap-2 align-items-start mt-2 mb-0 py-2 px-3 small {{ '' if wval >= 500 else 'd-none' }}"
         role="alert" data-weight-warning>
      <i class="bi bi-exclamation-triangle-fill mt-1 flex-shrink-0" aria-hidden="true"></i>
      <div>Very high display weights can significantly reduce the visibility of other advertisements.</div>
    </div>

    <div class="form-text" id="weight-help">
      Advertisements are selected randomly. Higher weights increase how often an advertisement is chosen.
      <ul class="mb-0 mt-1 ps-3">
        <li><strong>100</strong> — Normal exposure (recommended)</li>
        <li><strong>200</strong> — Approximately twice as likely to appear as weight 100</li>
        <li><strong>50</strong> — Approximately half as likely to appear as weight 100</li>
        <li><strong>0</strong> — Weight 0 means this advertisement is excluded from normal random selection.
          It will only be selected if every eligible advertisement also has a Display Weight of 0.</li>
      </ul>
    </div>

    <div class="alert alert-info d-flex gap-2 align-items-start mt-2 mb-0 py-2 px-3 small" role="note">
      <i class="bi bi-info-circle-fill mt-1 flex-shrink-0" aria-hidden="true"></i>
      <div>
        <strong>How Display Weight works</strong><br>
        CampusCart uses weighted random selection, not fixed ordering. Every eligible advertisement has a
        chance to appear. Increasing the weight makes an advertisement appear more frequently over time,
        but it will never always appear first.
      </div>
    </div>

    {# Relative-frequency examples (relative, not guaranteed percentages). #}
    <div class="table-responsive mt-2">
      <table class="table table-sm small align-middle mb-1">
        <thead>
          <tr><th scope="col">Display Weight</th><th scope="col">Relative Frequency</th></tr>
        </thead>
        <tbody>
          <tr><td>50</td><td>About half as often as 100</td></tr>
          <tr><td>100</td><td>Baseline (Recommended)</td></tr>
          <tr><td>200</td><td>About twice as often as 100</td></tr>
          <tr><td>500</td><td>About five times as often as 100</td></tr>
        </tbody>
      </table>
    </div>
    <div class="form-text">These examples are relative probabilities, not guaranteed display percentages.</div>
  </div>
  <div class="col-md-6">
    <label class="form-label" for="{{ form.icon.id }}">{{ form.icon.label.text }}</label>
    {{ form.icon(class="form-select", data_ad_icon="1") }}
    <div class="form-text">Used when no image is uploaded.</div>
  </div>
</div>

{# Reward Format — shown only for Rewarded. The <select> stays in the DOM even
   when hidden (for Banner) so ``media_type=image`` is always submitted; the
   backend and its Banner+Video validation are unchanged. #}
<div class="mb-3 mt-3 d-none" data-ad-reward-format>
  <label class="form-label" for="{{ form.media_type.id }}">{{ form.media_type.label.text }}</label>
  {{ form.media_type(class="form-select", data_ad_media_type="1") }}
  <div class="form-text" data-ad-media-help>
    <strong>Image Advertisement</strong> — static rewarded advertisement.
    <strong>Video Advertisement</strong> — watch-to-unlock advertisement supporting MP4/WebM uploads.
  </div>
</div>
{# Shown in place of the selector when Banner is chosen (image-only). #}
<div class="form-text mt-3 mb-1 d-none" data-ad-banner-note>
  <i class="bi bi-info-circle me-1" aria-hidden="true"></i>Banner advertisements support images only.
</div>

{# Image fields — shown when media type is "image". #}
<div class="mb-3" data-ad-image-fields>
  <label class="form-label" for="{{ form.image.id }}">{{ form.image.label.text }}</label>
  {% if ad and ad.image_path %}
    <div class="d-flex align-items-center gap-3 mb-2">
      <span class="admin-thumb admin-thumb-lg"><img src="{{ ad.image_path }}" alt="Current image"></span>
      <div class="small text-muted">Current image. Uploading a new one replaces it; leaving this empty keeps it.</div>
    </div>
  {% endif %}
  <div class="ad-uploader" data-uploader>
    <div class="uploader-dropzone ad-dropzone" data-dropzone tabindex="0" role="button" aria-label="Upload advertisement image">
      <span class="uploader-cloud"><i class="bi bi-cloud-arrow-up"></i></span>
      <p class="mb-1"><strong>Drag &amp; drop</strong> an image here, or <span class="text-primary">click to browse</span></p>
      <p class="small text-muted mb-0">PNG, JPG, JPEG, WEBP · Max {{ config.MAX_AD_IMAGE_SIZE // (1024 * 1024) }} MB</p>
    </div>
    {{ form.image(class=("visually-hidden" ~ (" is-invalid" if form.image.errors else "")),
                  accept=".png,.jpg,.jpeg,.webp", data_ad_image="1", data_dropzone_input="1") }}
    <div class="ad-uploader-file d-none" data-dropzone-file>
      <i class="bi bi-file-earmark-image" aria-hidden="true"></i>
      <span class="fw-semibold text-truncate" data-dropzone-name></span>
      <span class="text-muted small" data-dropzone-size></span>
      <button type="button" class="btn-close ms-2" data-dropzone-remove aria-label="Remove selected file"></button>
    </div>
  </div>
  {% for e in form.image.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
  <div class="form-text">PNG, JPG, JPEG or WEBP. Optional — icon-only advertisements are supported.</div>
  <div class="upload-spinner d-none align-items-center gap-2 mt-2" data-upload-spinner>
    <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
    <span class="small text-muted">Preparing image…</span>
  </div>
</div>

{# Video fields — shown when media type is "video". #}
<div class="mb-3 d-none" data-ad-video-fields>
  {# Current video (edit only) — filename, preview and a remove option. #}
  {% if ad and ad.media_url %}
    <div class="d-flex align-items-center gap-3 mb-2">
      <span class="admin-thumb admin-thumb-lg d-inline-flex align-items-center justify-content-center">
        <i class="bi bi-camera-video-fill fs-3"></i>
      </span>
      <div class="small">
        <div class="fw-semibold text-truncate" style="max-width: 340px;">{{ ad.media_url.split('/')|last }}</div>
        <a href="{{ ad.media_url }}" target="_blank" rel="noopener"><i class="bi bi-play-circle me-1"></i>Preview current video</a>
        <div class="form-check mt-1">
          {{ form.remove_video(class="form-check-input") }}
          <label class="form-check-label" for="{{ form.remove_video.id }}">Remove current video</label>
        </div>
      </div>
    </div>
    <p class="small text-muted mb-2">Uploading a new file replaces the current video; leaving this empty keeps it.</p>
  {% endif %}
  <div class="row g-3">
    <div class="col-md-8">
      <label class="form-label" for="{{ form.video.id }}">{{ form.video.label.text }}</label>
      <div class="ad-uploader" data-uploader>
        <div class="uploader-dropzone ad-dropzone" data-dropzone tabindex="0" role="button" aria-label="Upload advertisement video">
          <span class="uploader-cloud"><i class="bi bi-cloud-arrow-up"></i></span>
          <p class="mb-1"><strong>Drag &amp; drop</strong> a video here, or <span class="text-primary">click to browse</span></p>
          <p class="small text-muted mb-0">MP4, WebM, Ogg · Max {{ config.MAX_AD_VIDEO_SIZE // (1024 * 1024) }} MB · Recommended 720p, 20–30s</p>
        </div>
        {{ form.video(class=("visually-hidden" ~ (" is-invalid" if form.video.errors else "")),
                      accept=".mp4,.webm,.ogg", data_ad_video_input="1", data_dropzone_input="1") }}
        <div class="ad-uploader-file d-none" data-dropzone-file>
          <i class="bi bi-file-earmark-play" aria-hidden="true"></i>
          <span class="fw-semibold text-truncate" data-dropzone-name></span>
          <span class="text-muted small" data-dropzone-size></span>
          <button type="button" class="btn-close ms-2" data-dropzone-remove aria-label="Remove selected file"></button>
        </div>
      </div>
      {% for e in form.video.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      <div class="form-text">
        The file is stored on the Student Bazaar server and used directly in rewarded advertisements.
        An image (above) is used as a fallback if the video fails to load.
      </div>
    </div>
    <div class="col-md-4">
      <label class="form-label" for="{{ form.video_duration.id }}">{{ form.video_duration.label.text }}</label>
      {{ form.video_duration(class="form-control" ~ (" is-invalid" if form.video_duration.errors else ""), min="5", max="600") }}
      {% for e in form.video_duration.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
      <div class="form-text">Default 20 seconds.</div>
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-md-6">
    <label class="form-label" for="{{ form.start_at.id }}">{{ form.start_at.label.text }}</label>
    {{ form.start_at(class="form-control" ~ (" is-invalid" if form.start_at.errors else "")) }}
    {% for e in form.start_at.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
  </div>
  <div class="col-md-6">
    <label class="form-label" for="{{ form.end_at.id }}">{{ form.end_at.label.text }}</label>
    {{ form.end_at(class="form-control" ~ (" is-invalid" if form.end_at.errors else "")) }}
    {% for e in form.end_at.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
  </div>
</div>
<div class="form-text mb-3">Leave dates empty to run immediately and indefinitely. Scheduling is automatic.</div>

<div class="form-check form-switch mb-4">
  {{ form.is_active(class="form-check-input") }}
  <label class="form-check-label" for="{{ form.is_active.id }}">{{ form.is_active.label.text }}</label>
</div>

<div class="d-flex flex-wrap gap-2">
  <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> {{ form.submit.label.text }}</button>
  <a class="btn btn-outline-secondary" href="{{ url_for('admin.ad_list') }}">Cancel</a>
</div>