{% extends "base.html" %}
{% block content %}
  {# Expose server-side crop target sizes to the JS without embedding Jinja inside JS #}
  <div
    id="page-config"
    class="d-none"
    data-image-crop-target-w="{{ config.get('IMAGE_CROP_TARGET_W', 1920) }}"
    data-image-crop-target-h="{{ config.get('IMAGE_CROP_TARGET_H', 1080) }}"
  ></div>
  {# Cropper.js (used for image cropping) #}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css" />
  <style>
    /* Gallery grid for playlist items */
    #playlist-items.playlist-gallery,
    #playlist-items.playlist-gallery:not(.list-group) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
    }
    .playlist-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .playlist-card.dragging {
      opacity: .5;
    }
    .playlist-card .card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: .5rem;
      padding: .5rem .75rem;
      border-bottom: 1px solid var(--border);
    }
    .playlist-card .drag-handle {
      width: 26px;
      cursor: grab;
      user-select: none;
      color: var(--muted);
      flex: 0 0 auto;
    }
    .playlist-card .card-body {
      padding: .5rem .75rem .75rem;
    }
    .playlist-card .thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #111;
      border-radius: .35rem;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: .5rem;
    }
    .playlist-card .thumb img,
    .playlist-card .thumb video,
    .playlist-card .thumb iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0;
    }

    /* Modal step visibility */
    .step { display: none; }
    .step.active { display: block; }

    /* Tiny status pills/icons */
    .priority-pill { color: #dc3545; font-weight: 700; }
    .schedule-pill { font-weight: 700; }
    .schedule-pill.active { color: #198754; }
    .schedule-pill.inactive { color: #dc3545; }
  </style>
  <div class="d-flex justify-content-between align-items-center">
    <h1 class="h3">Playlist: {{ playlist.name }}</h1>
    <div class="d-flex gap-2">
      <button
        class="btn btn-outline-primary btn-sm"
        type="button"
        data-bs-toggle="modal"
        data-bs-target="#renamePlaylistModal"
      >
        Rename
      </button>
      <form method="post" action="{{ url_for('company.delete_playlist', playlist_id=playlist.id) }}" onsubmit="return confirm('Delete playlist? This will remove all items and unassign it from displays.');">
        <button class="btn btn-outline-danger btn-sm" type="submit">Delete playlist</button>
      </form>
      <a class="btn btn-outline-ink btn-sm" href="{{ url_for('company.dashboard') }}">Back</a>
    </div>
  </div>

  {# Priority + schedule indicators #}
  {% set has_schedule = (playlist.schedule_start is not none) or (playlist.schedule_end is not none) %}
  {% set schedule_active = (not playlist.schedule_start or playlist.schedule_start <= now_utc) and (not playlist.schedule_end or now_utc <= playlist.schedule_end) %}

  <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mt-2">
    <div class="small">
      {% if playlist.is_priority %}
        <span class="me-2 priority-pill" title="Priority playlist">❗ Priority</span>
      {% else %}
        <span class="text-muted me-2">Not priority</span>
      {% endif %}

      {% if has_schedule %}
        <span class="me-2" title="Scheduled">
          <span class="schedule-pill {{ 'active' if schedule_active else 'inactive' }}">📅 Scheduled</span>
          <span class="text-muted">(<span id="scheduleSummary">…</span>)</span>
        </span>
      {% else %}
        <span class="text-muted">Not scheduled</span>
      {% endif %}
    </div>

    <div class="d-flex align-items-center gap-2">
      {# Priority toggle: auto-saves (no Save button) #}
      <form
        id="priorityForm"
        method="post"
        action="{{ url_for('company.update_playlist_priority', playlist_id=playlist.id) }}"
        class="d-flex align-items-center gap-2"
      >
        <div class="form-check mb-0">
          <input class="form-check-input" type="checkbox" value="1" id="priorityMain" name="is_priority" {% if playlist.is_priority %}checked{% endif %} />
          <label class="form-check-label" for="priorityMain">Priority playlist</label>
        </div>
        <span class="small text-muted" id="prioritySaveStatus" aria-live="polite"></span>
      </form>

      {# Schedule button moved to where Save button used to be #}
      <button
        class="btn btn-outline-secondary btn-sm"
        type="button"
        data-bs-toggle="modal"
        data-bs-target="#playlistScheduleModal"
      >
        Schedule
      </button>
    </div>
  </div>

  {# Schedule Modal #}
  <div class="modal fade" id="playlistScheduleModal" tabindex="-1" aria-labelledby="playlistScheduleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="playlistScheduleModalLabel">Schedule</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form id="playlistScheduleForm" method="post" action="{{ url_for('company.update_playlist_schedule', playlist_id=playlist.id) }}">
          <div class="modal-body">
            <div class="alert alert-info py-2 mb-3" role="note">
              Scheduling uses your browser's local time. Empty values mean “always active”.
            </div>

            <div class="row g-3">
              <div class="col-6">
                <label class="form-label" for="schedule_start_date">Start date</label>
                <input class="form-control" type="date" id="schedule_start_date" name="schedule_start_date" />
              </div>
              <div class="col-6">
                <label class="form-label" for="schedule_start_time">Start time</label>
                <input class="form-control" type="time" id="schedule_start_time" name="schedule_start_time" />
              </div>
              <div class="col-6">
                <label class="form-label" for="schedule_end_date">End date</label>
                <input class="form-control" type="date" id="schedule_end_date" name="schedule_end_date" />
              </div>
              <div class="col-6">
                <label class="form-label" for="schedule_end_time">End time</label>
                <input class="form-control" type="time" id="schedule_end_time" name="schedule_end_time" />
              </div>
            </div>

            {# JS uses these to populate initial values #}
            <input type="hidden" id="schedule_start_iso" value="{{ playlist.schedule_start.isoformat() if playlist.schedule_start else '' }}" />
            <input type="hidden" id="schedule_end_iso" value="{{ playlist.schedule_end.isoformat() if playlist.schedule_end else '' }}" />
          </div>

          <div class="modal-footer">
            {% if has_schedule %}
              <button
                type="submit"
                class="btn btn-outline-danger me-auto"
                formaction="{{ url_for('company.clear_playlist_schedule', playlist_id=playlist.id) }}"
                formmethod="post"
                onclick="return confirm('Remove schedule? This playlist will become always active.');"
              >
                Delete schedule
              </button>
            {% endif %}
            <button type="button" class="btn btn-outline-ink" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-brand">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {# Rename Playlist Modal #}
  <div class="modal fade" id="renamePlaylistModal" tabindex="-1" aria-labelledby="renamePlaylistModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="renamePlaylistModalLabel">Rename playlist</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form method="post" action="{{ url_for('company.update_playlist', playlist_id=playlist.id) }}">
          <div class="modal-body">
            <label class="form-label" for="playlist-name">Name</label>
            <input
              id="playlist-name"
              class="form-control"
              name="name"
              value="{{ playlist.name }}"
              placeholder="Playlist name"
              maxlength="120"
              required
              autofocus
            />
            <div class="text-muted small mt-2">Rename only changes the playlist title; items and assignments stay the same.</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-ink" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-brand">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-between align-items-center mt-4">
    <div>
      <h2 class="h5 mb-0">Items</h2>
      <div class="text-muted small">Tip: drag items to reorder. Changes save automatically.</div>
    </div>
    <div class="d-flex gap-2">
      <button class="btn btn-outline-secondary" type="button" id="open-bulk-upload">Bulk upload</button>
      <button class="btn btn-brand" type="button" id="open-add-item">Add item</button>
    </div>
  </div>

  <div class="mt-3">
      <div class="small text-muted mb-2" id="reorder-status" aria-live="polite"></div>
      <div
        class="playlist-gallery"
        id="playlist-items"
        data-reorder-url="{{ url_for('company.reorder_playlist_items', playlist_id=playlist.id) }}"
        data-delete-base="{{ url_for('company.delete_item', item_id=0) }}"
        data-duration-base="{{ url_for('company.update_item_duration', item_id=0) }}"
      >
        {% for i in playlist.items %}
          <div class="playlist-card" draggable="true" data-item-id="{{ i.id }}">
            <div class="card-top">
              <div class="d-flex gap-2">
                <div class="drag-handle" title="Drag to reorder">≡</div>
                <div>
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <strong>#{{ i.position }}</strong>
                    <span class="badge bg-secondary">{{ i.item_type }}</span>
                  </div>
                  {% if i.title %}
                    <div class="small">{{ i.title }}</div>
                  {% else %}
                    <div class="small">.</div>
                  {% endif %}
                </div>
              </div>
              <form method="post" action="{{ url_for('company.delete_item', item_id=i.id) }}" onsubmit="return confirm('Delete item?');">
                <button class="btn btn-outline-danger btn-sm" type="submit">Delete</button>
              </form>
            </div>
            <div class="card-body">
              

              <div class="thumb">
                {% if i.item_type == 'image' and i.file_path %}
                  <img src="{{ url_for('static', filename=i.file_path) }}" alt="{{ i.title or 'image' }}" loading="lazy" />
                {% elif i.item_type == 'video' and i.file_path %}
                  <video src="{{ url_for('static', filename=i.file_path) }}" muted controls preload="metadata"></video>
                {% elif i.item_type == 'webpage' and i.url %}
                  <iframe src="{{ i.url }}" title="{{ i.title or 'webpage' }}" loading="lazy" referrerpolicy="no-referrer"></iframe>
                {% elif i.item_type == 'youtube' and i.url %}
                  <iframe src="{{ i.url }}" title="{{ i.title or 'youtube' }}" loading="lazy" referrerpolicy="no-referrer"></iframe>
                {% else %}
                  <div class="text-muted">No preview</div>
                {% endif %}
              </div>
              <div class="text-muted small d-flex align-items-center gap-2 flex-wrap">
                {# Intentionally do NOT show file names or URLs for privacy/clean UI #}
                {% if i.item_type != 'video' %}
                  <label class="text-nowrap" style="margin: 0;">
                    <span class="me-1">Duration</span>
                    <input
                      class="form-control form-control-sm d-inline-block js-duration-input"
                      style="width: 92px;"
                      type="number"
                      min="1"
                      value="{{ i.duration_seconds }}"
                      data-item-id="{{ i.id }}"
                      aria-label="Duration seconds"
                    />
                    <span class="ms-1">s</span>
                  </label>
                  <span class="small text-muted js-duration-status" data-item-id="{{ i.id }}"></span>
                {% endif %}
              </div>
            </div>
          </div>
        {% else %}
          <div class="text-muted">No items.</div>
        {% endfor %}
      </div>

      {# Add Item Modal (multi-step) #}
      <div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="addItemModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="addItemModalLabel">Add item</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form id="add-item-form" method="post" action="{{ url_for('company.add_playlist_item', playlist_id=playlist.id) }}" enctype="multipart/form-data">
                <input type="hidden" name="response" value="json" />
                <input type="hidden" name="item_type" id="item_type" value="image" />
                <input type="hidden" name="crop_mode" id="crop_mode" value="16:9" />

                {# Step 1: pick type, then show relevant inputs #}
                <div id="step-type" class="step active">
                  <div class="text-muted small mb-2">Select a slide type.</div>
                  <div class="mb-2">
                    <div class="btn-group w-100" role="group" aria-label="Slide type">
                      <input type="radio" class="btn-check" name="item_type_choice" id="type-image" autocomplete="off" checked>
                      <label class="btn btn-outline-primary" for="type-image">Image</label>

                      <input type="radio" class="btn-check" name="item_type_choice" id="type-webpage" autocomplete="off">
                      <label class="btn btn-outline-primary" for="type-webpage">Webpage</label>

                      <input type="radio" class="btn-check" name="item_type_choice" id="type-video" autocomplete="off">
                      <label class="btn btn-outline-primary" for="type-video">Video</label>
                    </div>
                  </div>
                </div>

                {# Step 2 (only for video): choose upload vs YouTube #}
                <div id="step-video-source" class="step">
                  <div class="text-muted small mb-2">Choose how you want to add the video.</div>
                  <div class="btn-group w-100" role="group" aria-label="Video source">
                    <input type="radio" class="btn-check" name="video_source_choice" id="video-source-upload" autocomplete="off" checked>
                    <label class="btn btn-outline-primary" for="video-source-upload">Upload video</label>

                    <input type="radio" class="btn-check" name="video_source_choice" id="video-source-youtube" autocomplete="off">
                    <label class="btn btn-outline-primary" for="video-source-youtube">YouTube</label>
                  </div>
                </div>

                <style>
                  .dropzone {
                    border: 2px dashed #6c757d;
                    border-radius: .5rem;
                    padding: 1rem;
                    text-align: center;
                    background: rgba(0,0,0,.02);
                    cursor: pointer;
                    user-select: none;
                  }
                  .dropzone.dragover {
                    border-color: #0d6efd;
                    background: rgba(13,110,253,.08);
                  }
                  .webpage-preview-frame {
                    width: 1200px;
                    height: 675px; /* 16:9 */
                    border: 0;
                    transform: scale(0.25);
                    transform-origin: 0 0;
                    background: #111;
                  }
                  .webpage-preview-wrap {
                    width: 100%;
                    height: 170px; /* 675 * 0.25 = ~168.75 */
                    overflow: hidden;
                    border: 1px solid #333;
                    border-radius: .25rem;
                    background: #111;
                  }
                </style>

                <div id="step-input" class="step">
                  <div class="text-muted small mb-2" id="step-input-hint">Fill in the details for the new slide.</div>

                  <div class="mb-2">
                    <label class="form-label">Title (optional)</label>
                    <input class="form-control" name="title" />
                  </div>

                  <div class="mb-2" id="duration-group">
                    <label class="form-label">Duration (seconds, for images/webpages/YouTube)</label>
                    <input class="form-control" type="number" name="duration_seconds" value="10" min="1" />
                  </div>

                  <div class="mb-3" id="crop-mode-group">
                    <label class="form-label">Image crop</label>
                    <div class="btn-group w-100" role="group" aria-label="Crop mode">
                      <input type="radio" class="btn-check" name="crop_mode_choice" id="crop-16-9" autocomplete="off" checked>
                      <label class="btn btn-outline-primary" for="crop-16-9">16:9 (landscape)</label>

                      <input type="radio" class="btn-check" name="crop_mode_choice" id="crop-9-16" autocomplete="off">
                      <label class="btn btn-outline-primary" for="crop-9-16">9:16 (portrait)</label>

                      <input type="radio" class="btn-check" name="crop_mode_choice" id="crop-none" autocomplete="off">
                      <label class="btn btn-outline-primary" for="crop-none">No crop</label>
                    </div>
                    <div class="text-muted small mt-1">Cropping is optional. If enabled, we center-crop to the chosen aspect ratio.</div>
                  </div>

                  {# Image section #}
                  <div id="section-image" class="item-type-section">
                    <label class="form-label">Image</label>
                    <div id="image-dropzone" class="dropzone mb-2">
                      <div><strong>Drag & drop</strong> an image here</div>
                      <div class="text-muted small">or click to select a file</div>
                    </div>
                    <input id="image-file-input" class="form-control d-none" type="file" name="file" accept="image/*" />
                    <div class="text-muted small" id="image-select-status"></div>
                  </div>

                  {# Webpage section #}
                  <div id="section-webpage" class="item-type-section d-none">
                    <div class="mb-2">
                      <label class="form-label">URL</label>
                      <input id="webpage-url" class="form-control" name="url" placeholder="https://..." inputmode="url" />
                      <div class="text-muted small mt-1">Preview might not work for all sites (some block embedding).</div>
                    </div>

                    <div id="webpage-preview" class="d-none">
                      <div class="d-flex justify-content-between align-items-center mb-1">
                        <div class="text-muted small">Preview</div>
                        <a id="webpage-open" href="#" target="_blank" rel="noopener noreferrer" class="small">Open</a>
                      </div>
                      <div class="webpage-preview-wrap">
                        <iframe
                          id="webpage-iframe"
                          class="webpage-preview-frame"
                          src="about:blank"
                          title="Webpage preview"
                          loading="lazy"
                          referrerpolicy="no-referrer"
                        ></iframe>
                      </div>
                    </div>
                  </div>

                  {# YouTube section (also used as video source) #}
                  <div id="section-youtube" class="item-type-section d-none">
                    <div class="mb-2">
                      <label class="form-label">YouTube URL</label>
                      <input id="youtube-url" class="form-control" name="url" placeholder="https://www.youtube.com/watch?v=..." inputmode="url" />
                      <div class="text-muted small mt-1">
                        Paste a YouTube link (watch / shorts / youtu.be). We embed using youtube-nocookie.com.
                      </div>
                    </div>
                    <div class="text-muted small">Tip: set a duration; YouTube embeds will advance after that time.</div>
                  </div>

                  {# Video upload section #}
                  <div id="section-video" class="item-type-section d-none">
                    <label class="form-label">Video upload</label>
                    <div id="video-dropzone" class="dropzone mb-2">
                      <div><strong>Drag & drop</strong> a video here</div>
                      <div class="text-muted small">or click to select a file</div>
                    </div>
                    <input id="video-file-input" class="form-control d-none" type="file" name="file" accept="video/*" />
                    <div class="text-muted small" id="video-select-status"></div>

                    {# Upload progress (for large videos) #}
                    <div id="video-upload-progress" class="d-none mt-2" aria-live="polite">
                      <div class="progress" style="height: 10px;">
                        <div
                          id="video-upload-progress-bar"
                          class="progress-bar"
                          role="progressbar"
                          style="width: 0%"
                          aria-valuenow="0"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                      <div class="text-muted small mt-1" id="video-upload-progress-text">Uploading…</div>
                    </div>
                  </div>
                </div>

                <div id="step-crop" class="step">
                  <div class="text-muted small mb-2" id="crop-step-hint">Crop to <strong>16:9</strong> (recommended for display screens).</div>
                  <div style="width: 100%; background: #111; border-radius: .25rem; overflow: hidden;">
                    <img id="image-crop-target" alt="Crop" style="max-width: 100%; display: block;" />
                  </div>
                  <div class="d-flex gap-2 mt-2">
                    <button class="btn btn-outline-secondary btn-sm" type="button" id="image-crop-reset">Reset crop</button>
                    <div class="text-muted small align-self-center" id="image-crop-status"></div>
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <div class="small text-danger me-auto" id="add-item-error" aria-live="polite"></div>
              <button type="button" class="btn btn-outline-ink" id="add-item-back">Back</button>
              <button type="button" class="btn btn-brand" id="add-item-submit">Add</button>
            </div>
          </div>
        </div>
      </div>

      {# Bulk upload images modal #}
      <div class="modal fade" id="bulkUploadModal" tabindex="-1" aria-labelledby="bulkUploadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="bulkUploadModalLabel">Bulk upload images</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
              <div class="text-muted small mb-2">Choose an aspect ratio. Images will be center-cropped automatically.</div>

              <div class="mb-3">
                <div class="btn-group w-100" role="group" aria-label="Bulk crop mode">
                  <input type="radio" class="btn-check" name="bulk_crop_mode_choice" id="bulk-crop-16-9" autocomplete="off" checked>
                  <label class="btn btn-outline-primary" for="bulk-crop-16-9">16:9 (landscape)</label>

                  <input type="radio" class="btn-check" name="bulk_crop_mode_choice" id="bulk-crop-9-16" autocomplete="off">
                  <label class="btn btn-outline-primary" for="bulk-crop-9-16">9:16 (portrait)</label>
                </div>
              </div>

              <div id="bulk-dropzone" class="dropzone">
                <div><strong>Drag & drop</strong> multiple images here</div>
                <div class="text-muted small">or click to select files</div>
              </div>
              <input id="bulk-file-input" class="form-control d-none" type="file" accept="image/*" multiple />

              <div class="mt-3">
                <div class="small text-muted" id="bulk-status" aria-live="polite"></div>

                <div id="bulk-upload-progress" class="d-none mt-2" aria-live="polite">
                  <div class="progress" style="height: 10px;">
                    <div
                      id="bulk-upload-progress-bar"
                      class="progress-bar"
                      role="progressbar"
                      style="width: 0%"
                      aria-valuenow="0"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                  <div class="text-muted small mt-1" id="bulk-upload-progress-text">Uploading…</div>
                </div>

                <ul class="list-group mt-2" id="bulk-file-list"></ul>
              </div>
            </div>

            <div class="modal-footer">
              <div class="small text-danger me-auto" id="bulk-error" aria-live="polite"></div>
              <button type="button" class="btn btn-outline-ink" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-brand" id="bulk-upload-submit" disabled>Upload</button>
            </div>
          </div>
        </div>
      </div>

      {# Load Cropper.js BEFORE our inline script so window.Cropper is available #}
      <script src="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.js"></script>

      <script type="module">
        (function() {
          // -------------------------
          // Priority toggle: auto-save
          // -------------------------
          const priorityForm = document.getElementById('priorityForm');
          const priorityCb = document.getElementById('priorityMain');
          const priorityStatus = document.getElementById('prioritySaveStatus');
          let priorityReqId = 0;

          async function savePriority() {
            if (!priorityForm || !priorityCb) return;
            if (priorityStatus) priorityStatus.textContent = 'Saving…';

            const body = new URLSearchParams();
            // Mirror server behavior: send "1" when checked, send empty when unchecked.
            if (priorityCb.checked) body.set('is_priority', '1');

            const reqId = ++priorityReqId;
            const res = await fetch(priorityForm.action, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
              },
              body
            });

            if (reqId !== priorityReqId) return; // newer request in flight

            if (!res.ok) {
              if (priorityStatus) priorityStatus.textContent = 'Failed to save';
              return;
            }

            const data = await res.json().catch(() => null);
            if (!data || !data.ok) {
              if (priorityStatus) priorityStatus.textContent = 'Failed to save';
              return;
            }

            if (priorityStatus) {
              priorityStatus.textContent = 'Saved';
              window.setTimeout(() => {
                if (priorityStatus.textContent === 'Saved') priorityStatus.textContent = '';
              }, 900);
            }
          }

          // Prevent accidental full-page POST when user hits Enter inside the form.
          priorityForm?.addEventListener('submit', (e) => e.preventDefault());
          priorityCb?.addEventListener('change', () => {
            savePriority().catch((err) => {
              console.warn('Failed to save priority', err);
              if (priorityStatus) priorityStatus.textContent = 'Failed to save';
            });
          });

          // -------------------------
          // Schedule modal: populate existing UTC timestamps into local date/time inputs
          // -------------------------
          const schedModalEl = document.getElementById('playlistScheduleModal');
          if (schedModalEl) {
            const startIso = document.getElementById('schedule_start_iso')?.value || '';
            const endIso = document.getElementById('schedule_end_iso')?.value || '';

            const scheduleSummary = document.getElementById('scheduleSummary');

            const startDate = document.getElementById('schedule_start_date');
            const startTime = document.getElementById('schedule_start_time');
            const endDate = document.getElementById('schedule_end_date');
            const endTime = document.getElementById('schedule_end_time');

            function pad2(n) { return String(n).padStart(2, '0'); }
            function toLocalDateStr(d) { return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}`; }
            function toLocalTimeStr(d) { return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`; }

            function toSummary() {
              const parts = [];
              if (startIso) {
                const d = new Date(startIso);
                if (!isNaN(d.getTime())) parts.push(`from ${toLocalDateStr(d)} ${toLocalTimeStr(d)}`);
              }
              if (endIso) {
                const d = new Date(endIso);
                if (!isNaN(d.getTime())) parts.push(`until ${toLocalDateStr(d)} ${toLocalTimeStr(d)}`);
              }
              return parts.join(' ');
            }

            function fill() {
              if (startIso) {
                const d = new Date(startIso);
                if (!isNaN(d.getTime())) {
                  if (startDate) startDate.value = toLocalDateStr(d);
                  if (startTime) startTime.value = toLocalTimeStr(d);
                }
              }
              if (endIso) {
                const d = new Date(endIso);
                if (!isNaN(d.getTime())) {
                  if (endDate) endDate.value = toLocalDateStr(d);
                  if (endTime) endTime.value = toLocalTimeStr(d);
                }
              }

              if (scheduleSummary) scheduleSummary.textContent = toSummary() || 'scheduled';
            }

            schedModalEl.addEventListener('shown.bs.modal', fill);

            // Populate summary immediately on page load
            if (scheduleSummary) scheduleSummary.textContent = toSummary() || 'scheduled';
          }

          // Keep the card layout in ONE place to ensure newly-added items match server-rendered items.
          // -------------------------
          // Add-item modal + steps
          // -------------------------
          const openBtn = document.getElementById('open-add-item');
          const modalEl = document.getElementById('addItemModal');
          const modal = modalEl ? new bootstrap.Modal(modalEl) : null;

          const form = document.getElementById('add-item-form');
          if (!form) return;

          const typeHidden = document.getElementById('item_type');
          const cropModeHidden = document.getElementById('crop_mode');
          const submitBtn = document.getElementById('add-item-submit');
          const durationGroup = document.getElementById('duration-group');
          const cropModeGroup = document.getElementById('crop-mode-group');
          const cropHint = document.getElementById('crop-step-hint');

          const sectionImage = document.getElementById('section-image');
          const sectionWebpage = document.getElementById('section-webpage');
          const sectionYoutube = document.getElementById('section-youtube');
          const sectionVideo = document.getElementById('section-video');

          const stepType = document.getElementById('step-type');
          const stepVideoSource = document.getElementById('step-video-source');
          const stepInput = document.getElementById('step-input');
          const stepCrop = document.getElementById('step-crop');
          const backBtn = document.getElementById('add-item-back');
          const errorEl = document.getElementById('add-item-error');
          const stepInputHint = document.getElementById('step-input-hint');

          function setError(msg) {
            if (!errorEl) return;
            errorEl.textContent = (msg || '').trim();
          }

          let currentStep = 'type';

          function updatePrimaryButton() {
            // Primary button acts as Next in early steps, and Add in the final steps.
            if (!submitBtn) return;
            const isNextStep = (currentStep === 'type' || currentStep === 'video-source');
            submitBtn.textContent = isNextStep ? 'Next' : 'Add';
          }

          function showStep(which) {
            currentStep = which;
            stepType?.classList.toggle('active', which === 'type');
            stepVideoSource?.classList.toggle('active', which === 'video-source');
            stepInput?.classList.toggle('active', which === 'input');
            stepCrop?.classList.toggle('active', which === 'crop');

            // Back is enabled for all steps except the first.
            backBtn.disabled = (which === 'type');

            // Enable Next for the initial steps.
            if (which === 'type' || which === 'video-source') {
              submitBtn.disabled = false;
              updatePrimaryButton();
              return;
            }

            // For input/crop steps: image requires crop step before enabling Add.
            if (typeHidden.value === 'image') {
              submitBtn.disabled = (which !== 'crop');
            } else {
              submitBtn.disabled = false;
            }

            updatePrimaryButton();
          }

          function videoSource() {
            return document.getElementById('video-source-youtube')?.checked ? 'youtube' : 'upload';
          }

          function setType(t) {
            // For this UI, "video" is a top-level type, but it can map to item_type=video OR item_type=youtube.
            typeHidden.value = t;
            setError('');

            // Visible section is decided by type + (video source)
            const vs = (t === 'video') ? videoSource() : null;
            const effectiveType = (t === 'video' && vs === 'youtube') ? 'youtube' : t;
            typeHidden.value = effectiveType;

            sectionImage.classList.toggle('d-none', effectiveType !== 'image');
            sectionWebpage.classList.toggle('d-none', effectiveType !== 'webpage');
            sectionYoutube.classList.toggle('d-none', effectiveType !== 'youtube');
            sectionVideo.classList.toggle('d-none', effectiveType !== 'video');

            // duration applies to image/webpage/youtube. Video upload plays until ended.
            durationGroup.classList.toggle('d-none', effectiveType === 'video');
            cropModeGroup?.classList.toggle('d-none', effectiveType !== 'image');

            if (stepInputHint) {
              if (effectiveType === 'image') stepInputHint.textContent = 'Select an image. After selecting, you\'ll crop it.';
              else if (effectiveType === 'webpage') stepInputHint.textContent = 'Enter a webpage URL.';
              else if (effectiveType === 'youtube') stepInputHint.textContent = 'Paste a YouTube URL.';
              else stepInputHint.textContent = 'Upload a video file.';
            }

            // Reset cropper when leaving image.
            if (effectiveType !== 'image') destroyCropper();
          }

          function currentCropMode() {
            // crop_mode_choice is only UI; we submit hidden crop_mode for server fallback
            return (cropModeHidden?.value || '16:9').toLowerCase();
          }

          function updateCropHint() {
            const cm = currentCropMode();
            if (!cropHint) return;
            if (cm === 'none') {
              cropHint.innerHTML = 'No crop selected. The image will be resized/compressed, keeping its original aspect ratio.';
              if (cropResetBtn) cropResetBtn.disabled = true;
            } else if (cm === '9:16') {
              cropHint.innerHTML = 'Crop to <strong>9:16</strong> (portrait).';
              if (cropResetBtn) cropResetBtn.disabled = false;
            } else {
              cropHint.innerHTML = 'Crop to <strong>16:9</strong> (landscape, recommended for display screens).';
              if (cropResetBtn) cropResetBtn.disabled = false;
            }
          }

          document.getElementById('type-image')?.addEventListener('change', () => {
            setType('image');
            // Stay on type step; user clicks Next.
            showStep('type');
          });
          document.getElementById('type-webpage')?.addEventListener('change', () => {
            setType('webpage');
            // Stay on type step; user clicks Next.
            showStep('type');
          });
          document.getElementById('type-video')?.addEventListener('change', () => {
            // We show an intermediate step for video so user chooses upload vs YouTube.
            // Keep item_type unset until that choice is made.
            setError('');
            destroyCropper();
            // Hide crop/duration while selecting source (they depend on source).
            cropModeGroup?.classList.add('d-none');
            durationGroup?.classList.add('d-none');
            showStep('video-source');
          });

          document.getElementById('video-source-upload')?.addEventListener('change', () => {
            // effective type becomes "video"
            setType('video');
            // Stay on source step; user clicks Next.
            showStep('video-source');
          });
          document.getElementById('video-source-youtube')?.addEventListener('change', () => {
            // effective type becomes "youtube"
            setType('video');
            // Stay on source step; user clicks Next.
            showStep('video-source');
          });

          // -------------------------
          // Image: drag/drop + crop
          // -------------------------
          const dropzone = document.getElementById('image-dropzone');
          const fileInput = document.getElementById('image-file-input');
          const cropImg = document.getElementById('image-crop-target');
          const cropResetBtn = document.getElementById('image-crop-reset');
          const cropStatus = document.getElementById('image-crop-status');
          const imageSelectStatus = document.getElementById('image-select-status');

          let cropper = null;
          let currentObjectUrl = null;

          function destroyCropper() {
            try {
              if (cropper) cropper.destroy();
            } catch (e) {}
            cropper = null;
            if (currentObjectUrl) {
              URL.revokeObjectURL(currentObjectUrl);
              currentObjectUrl = null;
            }
            if (cropStatus) cropStatus.textContent = '';
            if (imageSelectStatus) imageSelectStatus.textContent = '';
          }

          function setFileOnInput(input, file) {
            const dt = new DataTransfer();
            dt.items.add(file);
            input.files = dt.files;
          }

          async function loadImageFile(file) {
            if (!file || !file.type || !file.type.startsWith('image/')) {
              if (imageSelectStatus) imageSelectStatus.textContent = 'Please choose an image file.';
              return;
            }
            destroyCropper();

            currentObjectUrl = URL.createObjectURL(file);
            cropImg.src = currentObjectUrl;
            cropStatus.textContent = '';
            if (imageSelectStatus) imageSelectStatus.textContent = `Selected: ${file.name}`;

            // Move to crop step after image selection
            showStep('crop');

            // Wait for image to be ready
            await new Promise((resolve, reject) => {
              cropImg.onload = () => resolve();
              cropImg.onerror = () => reject(new Error('Failed to load image'));
            });

            // Cropper.js is loaded from CDN, so window.Cropper should exist
            if (!window.Cropper) {
              cropStatus.textContent = 'Cropper failed to load. Check your network connection.';
              return;
            }

            // Create cropper only when cropping is enabled
            const cm = currentCropMode();
            if (cm !== 'none') {
              cropper = new window.Cropper(cropImg, {
                aspectRatio: (cm === '9:16') ? (9 / 16) : (16 / 9),
                viewMode: 1,
                autoCropArea: 1,
                responsive: true,
                background: false,
              });
            }

            updateCropHint();

            // Enable Add button now that cropper exists
            if (typeHidden.value === 'image') submitBtn.disabled = false;
          }

          dropzone?.addEventListener('click', () => {
            fileInput?.click();
          });

          dropzone?.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropzone.classList.add('dragover');
          });
          dropzone?.addEventListener('dragleave', () => {
            dropzone.classList.remove('dragover');
          });
          dropzone?.addEventListener('drop', async (e) => {
            e.preventDefault();
            dropzone.classList.remove('dragover');
            const f = e.dataTransfer?.files?.[0];
            if (!f) return;
            // Put the original file in the input (will be replaced by cropped version on submit)
            setFileOnInput(fileInput, f);
            await loadImageFile(f);
          });

          fileInput?.addEventListener('change', async () => {
            const f = fileInput.files?.[0];
            if (!f) return;
            await loadImageFile(f);
          });

          cropResetBtn?.addEventListener('click', () => {
            cropper?.reset();
          });

          async function submitViaAjax() {
            submitBtn.disabled = true;
            cropStatus.textContent = '';
            setError('');

            // If image, replace file with cropped version before sending.
            if (typeHidden.value === 'image') {
              const cm = currentCropMode();

              // If no crop is selected, just upload the original file.
              if (cm !== 'none') {
                if (!cropper) {
                  cropStatus.textContent = 'Please select an image first.';
                  submitBtn.disabled = false;
                  return;
                }

                cropStatus.textContent = 'Preparing cropped image…';
                const isPortrait = cm === '9:16';
                // Export at Full HD by default (or whatever the server config says).
                // We still enforce a server-side max output size in _save_compressed_image.
                const cfg = document.getElementById('page-config');
                const TARGET_W = parseInt(cfg?.dataset?.imageCropTargetW || '1920', 10) || 1920;
                const TARGET_H = parseInt(cfg?.dataset?.imageCropTargetH || '1080', 10) || 1080;

                const canvas = cropper.getCroppedCanvas({
                  width: isPortrait ? TARGET_H : TARGET_W,
                  height: isPortrait ? TARGET_W : TARGET_H,
                  imageSmoothingQuality: 'high',
                });
                const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
                if (!blob) {
                  cropStatus.textContent = 'Failed to crop image.';
                  submitBtn.disabled = false;
                  return;
                }
                const croppedFile = new File([blob], 'cropped.png', { type: 'image/png' });
                setFileOnInput(fileInput, croppedFile);
                cropStatus.textContent = '';
              }
            }

            const fd = new FormData(form);

            // For upload progress we need XHR (fetch does not provide upload progress reliably).
            const useXhrProgress = (typeHidden.value === 'video');

            function setVideoProgressVisible(visible) {
              const wrap = document.getElementById('video-upload-progress');
              wrap?.classList.toggle('d-none', !visible);
            }

            function setVideoProgress(percent, text) {
              const bar = document.getElementById('video-upload-progress-bar');
              const txt = document.getElementById('video-upload-progress-text');
              const p = Math.max(0, Math.min(100, Math.round(Number(percent) || 0)));
              if (bar) {
                bar.style.width = `${p}%`;
                bar.setAttribute('aria-valuenow', String(p));
              }
              if (txt) txt.textContent = text || `${p}%`;
            }

            function resetVideoProgress() {
              setVideoProgress(0, 'Uploading…');
              setVideoProgressVisible(false);
            }

            let resOk = false;
            let data = null;
            let errorText = null;

            if (useXhrProgress) {
              // Show progress UI immediately for video uploads.
              setVideoProgressVisible(true);
              setVideoProgress(0, 'Uploading…');

              const xhr = new XMLHttpRequest();
              const xhrPromise = new Promise((resolve) => {
                xhr.onreadystatechange = () => {
                  if (xhr.readyState !== 4) return;
                  resolve();
                };
              });

              xhr.open('POST', form.action, true);
              xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
              xhr.setRequestHeader('Accept', 'application/json');

              xhr.upload.onprogress = (e) => {
                if (!e || !e.lengthComputable) {
                  setVideoProgress(0, 'Uploading…');
                  return;
                }
                const pct = (e.total > 0) ? ((e.loaded / e.total) * 100) : 0;
                setVideoProgress(pct, `Uploading… ${Math.round(pct)}%`);
              };

              xhr.onerror = () => {
                errorText = 'Upload failed (network error).';
              };

              xhr.send(fd);
              await xhrPromise;

              // When upload is done, server may still process the file. Give a hint.
              setVideoProgress(100, 'Processing…');

              const status = xhr.status;
              const text = xhr.responseText || '';
              let json = null;
              try { json = JSON.parse(text); } catch (e) {}

              resOk = (status >= 200 && status < 300);
              data = json;

              if (!resOk) {
                // Prefer any earlier error (e.g. xhr.onerror network failure)
                errorText = errorText || ((json && json.error) ? json.error : `Failed to add item (HTTP ${status}).`);
              }
            } else {
              const res = await fetch(form.action, {
                method: 'POST',
                headers: {
                  'X-Requested-With': 'XMLHttpRequest',
                  'Accept': 'application/json'
                },
                body: fd
              });

              resOk = res.ok;
              if (!resOk) {
                let errText = 'Failed to add item.';
                try {
                  const j = await res.json();
                  if (j && j.error) errText = j.error;
                } catch (e) {}
                errorText = errText;
              } else {
                data = await res.json();
              }
            }

            // Error handling shared between fetch/XHR paths
            if (!resOk) {
              submitBtn.disabled = false;
              setError(errorText || 'Failed to add item.');
              resetVideoProgress();
              return;
            }

            // For XHR path we may not have parsed JSON (bad response)
            if (!data) {
              submitBtn.disabled = false;
              setError('Failed to add item.');
              resetVideoProgress();
              return;
            }

            if (!data.ok) {
              submitBtn.disabled = false;
              setError(data.error || 'Failed to add item.');
              resetVideoProgress();
              return;
            }

            // Add the new item card to the gallery (append at end)
            const item = data.item;
            const list = document.getElementById('playlist-items');
            if (list && item) {
              const el = document.createElement('div');
              el.className = 'playlist-card';
              el.setAttribute('draggable', 'true');
              el.setAttribute('data-item-id', item.id);
              el.innerHTML = renderCardInnerHtml(item);
              list.appendChild(el);
            }

            // Reset modal state + close
            resetModalState();
            modal?.hide();
          }

          function setEnabled(el, enabled) {
            if (!el) return;
            el.disabled = !enabled;
          }

          // -------------------------
          // Webpage: live preview
          // -------------------------
          const urlInput = document.getElementById('webpage-url');
          const youtubeUrlInput = document.getElementById('youtube-url');
          const preview = document.getElementById('webpage-preview');
          const iframe = document.getElementById('webpage-iframe');
          const openLink = document.getElementById('webpage-open');

          function normalizeUrl(raw) {
            const val = (raw || '').trim();
            if (!val) return '';
            if (/^https?:\/\//i.test(val)) return val;
            // Be forgiving: if user enters "example.com", treat it as https://example.com
            return 'https://' + val;
          }

          let previewTimer = null;
          function schedulePreview() {
            if (previewTimer) window.clearTimeout(previewTimer);
            previewTimer = window.setTimeout(() => {
              const url = normalizeUrl(urlInput.value);
              if (!url) {
                preview.classList.add('d-none');
                iframe.src = 'about:blank';
                openLink.href = '#';
                return;
              }
              preview.classList.remove('d-none');
              iframe.src = url;
              openLink.href = url;
            }, 450);
          }

          urlInput?.addEventListener('input', schedulePreview);

          // -------------------------
          // Video: drag/drop select
          // -------------------------
          const videoDropzone = document.getElementById('video-dropzone');
          const videoInput = document.getElementById('video-file-input');
          const videoStatus = document.getElementById('video-select-status');

          function setVideoOnInput(file) {
            const dt = new DataTransfer();
            dt.items.add(file);
            videoInput.files = dt.files;
          }

          function loadVideoFile(file) {
            if (!file || !file.type || !file.type.startsWith('video/')) {
              if (videoStatus) videoStatus.textContent = 'Please choose a video file.';
              return;
            }
            if (videoStatus) videoStatus.textContent = `Selected: ${file.name}`;
          }

          videoDropzone?.addEventListener('click', () => videoInput?.click());
          videoDropzone?.addEventListener('dragover', (e) => { e.preventDefault(); videoDropzone.classList.add('dragover'); });
          videoDropzone?.addEventListener('dragleave', () => videoDropzone.classList.remove('dragover'));
          videoDropzone?.addEventListener('drop', (e) => {
            e.preventDefault();
            videoDropzone.classList.remove('dragover');
            const f = e.dataTransfer?.files?.[0];
            if (!f) return;
            setVideoOnInput(f);
            loadVideoFile(f);
          });
          videoInput?.addEventListener('change', () => {
            const f = videoInput.files?.[0];
            if (!f) return;
            loadVideoFile(f);
          });

          // Ensure only inputs from the active section are enabled (so form fields don't clash)
          function syncEnabledInputs() {
            const t = typeHidden.value;

            // Disable all optional inputs by default
            setEnabled(fileInput, t === 'image');
            setEnabled(videoInput, t === 'video');
            setEnabled(urlInput, t === 'webpage');
            setEnabled(youtubeUrlInput, t === 'youtube');

            // Crop mode only applies to images
            setEnabled(cropModeHidden, t === 'image');

            if (t === 'webpage') {
              // Keep preview behavior
              schedulePreview();
              return;
            }

            // Hide webpage preview if not active
            preview?.classList.add('d-none');
            if (iframe) iframe.src = 'about:blank';
            if (openLink) openLink.href = '#';
          }

          function resetModalState() {
            setError('');
            try { form.reset(); } catch (e) {}
            destroyCropper();

            // Default selections (without triggering change handlers)
            const typeImage = document.getElementById('type-image');
            const typeWebpage = document.getElementById('type-webpage');
            const typeVideo = document.getElementById('type-video');
            if (typeImage) typeImage.checked = true;
            if (typeWebpage) typeWebpage.checked = false;
            if (typeVideo) typeVideo.checked = false;

            const vsUpload = document.getElementById('video-source-upload');
            const vsYoutube = document.getElementById('video-source-youtube');
            if (vsUpload) vsUpload.checked = true;
            if (vsYoutube) vsYoutube.checked = false;

            if (cropModeHidden) cropModeHidden.value = '16:9';
            document.getElementById('crop-16-9')?.click();

            // Set UI for default type, but start at type selection step
            setType('image');
            showStep('type');
            syncEnabledInputs();
            updateCropHint();

            // Also reset video upload progress UI if present
            try {
              const bar = document.getElementById('video-upload-progress-bar');
              if (bar) {
                bar.style.width = '0%';
                bar.setAttribute('aria-valuenow', '0');
              }
              document.getElementById('video-upload-progress-text') && (document.getElementById('video-upload-progress-text').textContent = 'Uploading…');
              document.getElementById('video-upload-progress')?.classList.add('d-none');
            } catch (e) {}
          }

          // Initialize modal state once on page load
          resetModalState();

          // Modal open
          openBtn?.addEventListener('click', () => {
            // Always start from the beginning.
            resetModalState();
            modal?.show();
          });

          // Back button: stepwise navigation
          backBtn?.addEventListener('click', () => {
            if (currentStep === 'crop') {
              // Going back from crop returns to input for image
              showStep('input');
              submitBtn.disabled = true;
              return;
            }

            if (currentStep === 'input') {
              // If top-level selected is video, go back to video source selection.
              const isTopLevelVideo = document.getElementById('type-video')?.checked;
              if (isTopLevelVideo) {
                showStep('video-source');
              } else {
                showStep('type');
              }
              return;
            }

            if (currentStep === 'video-source') {
              showStep('type');
              return;
            }
          });

          // Crop mode selection
          function setCropMode(mode) {
            if (!cropModeHidden) return;
            cropModeHidden.value = mode;

            // If cropper exists, update aspect ratio or destroy it
            const cm = currentCropMode();
            if (typeHidden.value !== 'image') return;
            if (!cropImg?.src) {
              updateCropHint();
              return;
            }

            // Ensure cropper state matches selection
            if (cm === 'none') {
              destroyCropper();
              // Re-load the selected file into the preview without cropper.
              const f = fileInput?.files?.[0];
              if (f) loadImageFile(f);
              return;
            }

            if (cropper) {
              cropper.setAspectRatio((cm === '9:16') ? (9 / 16) : (16 / 9));
              updateCropHint();
              return;
            }

            // No cropper yet (e.g. user changed crop mode after selecting file but before cropper init)
            const f = fileInput?.files?.[0];
            if (f) loadImageFile(f);
          }

          document.getElementById('crop-16-9')?.addEventListener('change', () => setCropMode('16:9'));
          document.getElementById('crop-9-16')?.addEventListener('change', () => setCropMode('9:16'));
          document.getElementById('crop-none')?.addEventListener('change', () => setCropMode('none'));

          // Whenever type changes, keep enabled inputs in sync
          ['type-image','type-webpage','type-video','video-source-upload','video-source-youtube'].forEach((id) => {
            document.getElementById(id)?.addEventListener('change', syncEnabledInputs);
          });

          // Add button
          submitBtn?.addEventListener('click', async () => {
            try {
              // Multi-step behavior:
              // - Type step: Next -> (video ? source step : input step)
              // - Video source step: Next -> input step
              // - Input/crop: Add -> submit
              if (currentStep === 'type') {
                const isVideo = document.getElementById('type-video')?.checked;
                const isWebpage = document.getElementById('type-webpage')?.checked;

                if (isVideo) {
                  // Hide crop/duration while selecting source.
                  cropModeGroup?.classList.add('d-none');
                  durationGroup?.classList.add('d-none');
                  showStep('video-source');
                  return;
                }

                setType(isWebpage ? 'webpage' : 'image');
                showStep('input');
                syncEnabledInputs();
                return;
              }

              if (currentStep === 'video-source') {
                // Apply the chosen source (upload vs YouTube) and continue.
                setType('video');
                showStep('input');
                syncEnabledInputs();
                return;
              }

              await submitViaAjax();
            } catch (err) {
              console.warn(err);
              submitBtn.disabled = false;
              cropStatus.textContent = 'Failed to add item.';
            }
          });

          // Render helper for newly appended card
          function renderCardInnerHtml(i) {
            const safeTitle = (i.title || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
            const type = i.item_type;
            const badge = `<span class="badge bg-secondary">${type}</span>`;
            const durationInput = (type === 'video')
              ? ''
              : `
                <label class="text-nowrap" style="margin: 0;">
                  <span class="me-1">Duration</span>
                  <input
                    class="form-control form-control-sm d-inline-block js-duration-input"
                    style="width: 92px;"
                    type="number"
                    min="1"
                    value="${i.duration_seconds || 10}"
                    data-item-id="${i.id}"
                    aria-label="Duration seconds"
                  />
                  <span class="ms-1">s</span>
                </label>
                <span class="small text-muted js-duration-status" data-item-id="${i.id}"></span>
              `;

            let thumb = `<div class="text-muted">No preview</div>`;
            if (type === 'image' && i.file_path) {
              thumb = `<img src="/static/${i.file_path}" alt="${safeTitle || 'image'}" loading="lazy" />`;
            } else if (type === 'video' && i.file_path) {
              thumb = `<video src="/static/${i.file_path}" muted controls preload="metadata"></video>`;
            } else if (type === 'webpage' && i.url) {
              thumb = `<iframe src="${i.url}" title="${safeTitle || 'webpage'}" loading="lazy" referrerpolicy="no-referrer"></iframe>`;
            } else if (type === 'youtube' && i.url) {
              thumb = `<iframe src="${i.url}" title="${safeTitle || 'youtube'}" loading="lazy" referrerpolicy="no-referrer"></iframe>`;
            }

            const list = document.getElementById('playlist-items');
            const base = list?.getAttribute('data-delete-base') || '';
            // base will be something like /company/items/0/delete
            const deleteAction = base.replace(/0\/?delete$/, `${i.id}/delete`).replace(/0\/delete$/, `${i.id}/delete`);

            return `
              <div class="card-top">
                <div class="d-flex gap-2">
                  <div class="drag-handle" title="Drag to reorder">≡</div>
                  <div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                      <strong>#${i.position}</strong>
                      ${badge}
                    </div>
                    ${safeTitle ? `<div class="small">${safeTitle}</div>` : `<div class="small">.</div>`}
                  </div>
                </div>
                <form method="post" action="${deleteAction}" onsubmit="return confirm('Delete item?');">
                  <button class="btn btn-outline-danger btn-sm" type="submit">Delete</button>
                </form>
              </div>
              <div class="card-body">
                <div class="thumb">${thumb}</div>
                <div class="text-muted small d-flex align-items-center gap-2 flex-wrap">
                  <!-- Intentionally do NOT show file names or URLs for privacy/clean UI -->
                  ${durationInput}
                </div>
              </div>
            `;
          }

          // Expose for other scripts on this page (bulk upload appends cards).
          window.__renderPlaylistCardInnerHtml = renderCardInnerHtml;
        })();

        (function() {
          // -------------------------
          // Bulk image upload (auto center-crop)
          // -------------------------
          const openBtn = document.getElementById('open-bulk-upload');
          const modalEl = document.getElementById('bulkUploadModal');
          const modal = modalEl ? new bootstrap.Modal(modalEl) : null;

          const dropzone = document.getElementById('bulk-dropzone');
          const fileInput = document.getElementById('bulk-file-input');
          const submitBtn = document.getElementById('bulk-upload-submit');
          const statusEl = document.getElementById('bulk-status');
          const errorEl = document.getElementById('bulk-error');
          const listEl = document.getElementById('bulk-file-list');

          const crop169 = document.getElementById('bulk-crop-16-9');
          const crop916 = document.getElementById('bulk-crop-9-16');

          const cfg = document.getElementById('page-config');
          const TARGET_W = parseInt(cfg?.dataset?.imageCropTargetW || '1920', 10) || 1920;
          const TARGET_H = parseInt(cfg?.dataset?.imageCropTargetH || '1080', 10) || 1080;

          const uploadUrl = `{{ url_for('company.bulk_upload_playlist_images', playlist_id=playlist.id) }}`;

          let selectedFiles = [];
          let processedFiles = []; // cropped output

          function setError(msg) {
            if (errorEl) errorEl.textContent = (msg || '').trim();
          }
          function setStatus(msg) {
            if (statusEl) statusEl.textContent = (msg || '').trim();
          }

          function currentCropMode() {
            return crop916?.checked ? '9:16' : '16:9';
          }

          function clearList() {
            if (listEl) listEl.innerHTML = '';
          }

          function addListItem(name, initialText) {
            if (!listEl) return null;
            const li = document.createElement('li');
            li.className = 'list-group-item d-flex justify-content-between align-items-center';
            li.innerHTML = `
              <div class="text-truncate" style="max-width: 70%;">${escapeHtml(name)}</div>
              <div class="small text-muted">${escapeHtml(initialText || '')}</div>
            `;
            listEl.appendChild(li);
            return li;
          }

          function setListItemStatus(li, txt, kind) {
            if (!li) return;
            const right = li.querySelector('div.small');
            if (!right) return;
            right.textContent = txt || '';
            right.classList.toggle('text-danger', kind === 'err');
            right.classList.toggle('text-success', kind === 'ok');
            right.classList.toggle('text-muted', !kind);
          }

          function escapeHtml(s) {
            return String(s || '')
              .replace(/&/g, '&amp;')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#039;');
          }

          async function loadImageFromFile(file) {
            return await new Promise((resolve, reject) => {
              const url = URL.createObjectURL(file);
              const img = new Image();
              img.onload = () => {
                URL.revokeObjectURL(url);
                resolve(img);
              };
              img.onerror = () => {
                URL.revokeObjectURL(url);
                reject(new Error('Failed to load image'));
              };
              img.src = url;
            });
          }

          async function centerCropToAspect(file, cropMode) {
            // cropMode is "16:9" or "9:16"
            const img = await loadImageFromFile(file);
            const srcW = img.naturalWidth || img.width;
            const srcH = img.naturalHeight || img.height;
            if (!srcW || !srcH) throw new Error('Invalid image');

            const targetAspect = (cropMode === '9:16') ? (9 / 16) : (16 / 9);
            const srcAspect = srcW / srcH;

            // Compute center crop rect in source pixels
            let cropW = srcW;
            let cropH = srcH;
            if (srcAspect > targetAspect) {
              // too wide -> crop width
              cropW = Math.max(1, Math.round(srcH * targetAspect));
              cropH = srcH;
            } else {
              // too tall -> crop height
              cropW = srcW;
              cropH = Math.max(1, Math.round(srcW / targetAspect));
            }
            const cropX = Math.max(0, Math.round((srcW - cropW) / 2));
            const cropY = Math.max(0, Math.round((srcH - cropH) / 2));

            const outW = (cropMode === '9:16') ? TARGET_H : TARGET_W;
            const outH = (cropMode === '9:16') ? TARGET_W : TARGET_H;

            const canvas = document.createElement('canvas');
            canvas.width = outW;
            canvas.height = outH;
            const ctx = canvas.getContext('2d');
            if (!ctx) throw new Error('Canvas not supported');
            ctx.imageSmoothingEnabled = true;
            ctx.imageSmoothingQuality = 'high';
            ctx.drawImage(img, cropX, cropY, cropW, cropH, 0, 0, outW, outH);

            const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
            if (!blob) throw new Error('Failed to encode cropped image');

            const base = (file.name || 'image').replace(/\.[^/.]+$/, '');
            const outName = `${base}_${cropMode.replace(':','x')}.png`;
            return new File([blob], outName, { type: 'image/png' });
          }

          async function processSelection(files) {
            setError('');
            processedFiles = [];
            clearList();
            submitBtn.disabled = true;

            selectedFiles = (files || []).filter(f => f && f.type && f.type.startsWith('image/'));
            if (!selectedFiles.length) {
              setStatus('');
              setError('Please select one or more image files.');
              return;
            }

            const mode = currentCropMode();
            setStatus(`Preparing ${selectedFiles.length} image(s)…`);

            // Process sequentially to keep memory use stable.
            for (let i = 0; i < selectedFiles.length; i++) {
              const f = selectedFiles[i];
              const li = addListItem(f.name, 'Cropping…');
              try {
                const cropped = await centerCropToAspect(f, mode);
                processedFiles.push(cropped);
                setListItemStatus(li, 'Ready', 'ok');
              } catch (e) {
                console.warn('Failed to crop', f.name, e);
                setListItemStatus(li, 'Failed to crop', 'err');
              }
            }

            if (!processedFiles.length) {
              setStatus('');
              setError('No images could be processed.');
              return;
            }

            setStatus(`Ready to upload ${processedFiles.length} image(s).`);
            submitBtn.disabled = false;
          }

          async function upload() {
            setError('');
            if (!processedFiles.length) {
              setError('Please add some images first.');
              return;
            }

            submitBtn.disabled = true;
            dropzone?.classList.add('disabled');

            const progressWrap = document.getElementById('bulk-upload-progress');
            const progressBar = document.getElementById('bulk-upload-progress-bar');
            const progressText = document.getElementById('bulk-upload-progress-text');

            function setProgressVisible(visible) {
              progressWrap?.classList.toggle('d-none', !visible);
            }

            function setProgress(pct, text) {
              const p = Math.max(0, Math.min(100, Math.round(Number(pct) || 0)));
              if (progressBar) {
                progressBar.style.width = `${p}%`;
                progressBar.setAttribute('aria-valuenow', String(p));
              }
              if (progressText) progressText.textContent = text || `${p}%`;
            }

            setProgressVisible(true);
            setProgress(0, 'Uploading…');

            const mode = currentCropMode();
            setStatus(`Uploading ${processedFiles.length} image(s)…`);

            const fd = new FormData();
            fd.set('crop_mode', mode);
            fd.set('duration_seconds', '10');
            for (const f of processedFiles) fd.append('files', f);

            // Use XHR so we can track upload progress.
            const xhr = new XMLHttpRequest();
            const xhrPromise = new Promise((resolve) => {
              xhr.onreadystatechange = () => {
                if (xhr.readyState !== 4) return;
                resolve();
              };
            });

            xhr.open('POST', uploadUrl, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.setRequestHeader('Accept', 'application/json');

            xhr.upload.onprogress = (e) => {
              if (!e || !e.lengthComputable) {
                setProgress(0, 'Uploading…');
                return;
              }
              const pct = (e.total > 0) ? ((e.loaded / e.total) * 100) : 0;
              setProgress(pct, `Uploading… ${Math.round(pct)}%`);
            };

            xhr.onerror = () => {
              // Network error
              setError('Upload failed (network error).');
            };

            xhr.send(fd);
            await xhrPromise;

            const status = xhr.status;
            const text = xhr.responseText || '';
            let data = null;
            try { data = JSON.parse(text); } catch (e) {}

            const resOk = (status >= 200 && status < 300);
            if (!resOk) {
              let msg = (data && data.error) ? data.error : `Upload failed (HTTP ${status}).`;
              setError(msg);
              submitBtn.disabled = false;
              dropzone?.classList.remove('disabled');
              setStatus('');
              setProgressVisible(false);
              return;
            }

            if (!data || !data.ok) {
              setError((data && data.error) ? data.error : 'Upload failed.');
              submitBtn.disabled = false;
              dropzone?.classList.remove('disabled');
              setStatus('');
              setProgressVisible(false);
              return;
            }

            setProgress(100, 'Processing…');

            // Append cards in returned order.
            const list = document.getElementById('playlist-items');
            const render = window.__renderPlaylistCardInnerHtml;

            if (list && Array.isArray(data.items) && render) {
              for (const item of data.items) {
                const el = document.createElement('div');
                el.className = 'playlist-card';
                el.setAttribute('draggable', 'true');
                el.setAttribute('data-item-id', item.id);
                el.innerHTML = render(item);
                list.appendChild(el);
              }
            }

            setStatus(`Uploaded ${data.items?.length || processedFiles.length} image(s).`);

            // Reset & close.
            selectedFiles = [];
            processedFiles = [];
            clearList();
            submitBtn.disabled = true;
            window.setTimeout(() => {
              modal?.hide();
              setStatus('');
              setError('');
            }, 500);

            dropzone?.classList.remove('disabled');
            setProgressVisible(false);
          }

          function resetModal() {
            setError('');
            setStatus('');
            selectedFiles = [];
            processedFiles = [];
            clearList();
            submitBtn.disabled = true;
            try { if (fileInput) fileInput.value = ''; } catch (e) {}

            // Reset progress UI
            try {
              document.getElementById('bulk-upload-progress')?.classList.add('d-none');
              const bar = document.getElementById('bulk-upload-progress-bar');
              if (bar) {
                bar.style.width = '0%';
                bar.setAttribute('aria-valuenow', '0');
              }
              const txt = document.getElementById('bulk-upload-progress-text');
              if (txt) txt.textContent = 'Uploading…';
            } catch (e) {}

            // default to landscape
            if (crop169) crop169.checked = true;
            if (crop916) crop916.checked = false;
          }

          openBtn?.addEventListener('click', () => {
            resetModal();
            modal?.show();
          });

          dropzone?.addEventListener('click', () => fileInput?.click());
          dropzone?.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('dragover'); });
          dropzone?.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));
          dropzone?.addEventListener('drop', async (e) => {
            e.preventDefault();
            dropzone.classList.remove('dragover');
            const files = Array.from(e.dataTransfer?.files || []);
            await processSelection(files);
          });
          fileInput?.addEventListener('change', async () => {
            const files = Array.from(fileInput.files || []);
            await processSelection(files);
          });

          // If user switches aspect ratio after selecting files, re-process automatically.
          [crop169, crop916].forEach((el) => {
            el?.addEventListener('change', async () => {
              if (selectedFiles.length) await processSelection(selectedFiles);
            });
          });

          submitBtn?.addEventListener('click', () => {
            upload().catch((err) => {
              console.warn('Bulk upload failed', err);
              setError('Bulk upload failed.');
              submitBtn.disabled = false;
              setStatus('');
            });
          });
        })();

        (function() {
          const list = document.getElementById('playlist-items');
          if (!list) return;

          const statusEl = document.getElementById('reorder-status');

          let dragged = null;
          let lastSavedOrder = null;
          let persistTimer = null;

          function setStatus(msg, kind) {
            if (!statusEl) return;
            statusEl.textContent = msg || '';
            statusEl.classList.toggle('text-success', kind === 'ok');
            statusEl.classList.toggle('text-danger', kind === 'err');
            statusEl.classList.toggle('text-muted', !kind);
          }

          function items() {
            // Only the draggable cards should participate in ordering.
            // (duration inputs/status spans also have data-item-id)
            return Array.from(list.querySelectorAll('.playlist-card[data-item-id]'));
          }

          function computeOrder() {
            return items().map(el => el.getAttribute('data-item-id')).join(',');
          }

          function refreshVisiblePositions() {
            items().forEach((el, idx) => {
              const posEl = el.querySelector('.card-top strong');
              if (posEl) posEl.textContent = `#${idx + 1}`;
            });
          }

          async function persist() {
            const url = list.getAttribute('data-reorder-url');
            const body = new URLSearchParams();
            body.set('order', computeOrder());
            setStatus('Saving order…');
            const res = await fetch(url, {
              method: 'POST',
              credentials: 'same-origin',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
              },
              body
            });

            if (!res.ok) {
              let details = '';
              try {
                const txt = await res.text();
                details = (txt || '').slice(0, 140).replace(/\s+/g, ' ').trim();
              } catch (e) {}
              throw new Error(`Failed to persist: ${res.status}${details ? ` (${details})` : ''}`);
            }

            lastSavedOrder = computeOrder();
            setStatus('Order saved', 'ok');
            window.setTimeout(() => {
              if (statusEl && statusEl.textContent === 'Order saved') setStatus('');
            }, 900);
          }

          function schedulePersistSoon() {
            // Debounce to avoid spamming on rapid reorder.
            if (persistTimer) window.clearTimeout(persistTimer);
            persistTimer = window.setTimeout(async () => {
              const current = computeOrder();
              if (current && current !== lastSavedOrder) {
                try {
                  await persist();
                } catch (err) {
                  console.warn('Failed to persist order', err);
                  setStatus('Failed to save order', 'err');
                }
              }
            }, 200);
          }

          // Initialize baseline order
          lastSavedOrder = computeOrder();

          list.addEventListener('dragstart', (e) => {
            const el = e.target.closest('.playlist-card[data-item-id]');
            if (!el) return;
            dragged = el;
            el.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
            // Some browsers (Safari) require data to be set.
            try { e.dataTransfer.setData('text/plain', el.getAttribute('data-item-id') || ''); } catch (err) {}
          });

          list.addEventListener('dragend', (e) => {
            const el = e.target.closest('.playlist-card[data-item-id]');
            if (el) el.classList.remove('dragging');
            dragged = null;

            // Persist on dragend as well; drop may not fire if released outside container.
            refreshVisiblePositions();
            schedulePersistSoon();
          });

          list.addEventListener('dragover', (e) => {
            e.preventDefault();
            const over = e.target.closest('.playlist-card[data-item-id]');
            if (!dragged || !over || over === dragged) return;

            const rect = over.getBoundingClientRect();
            const after = (e.clientY - rect.top) > (rect.height / 2);
            if (after) {
              if (over.nextSibling !== dragged) {
                list.insertBefore(dragged, over.nextSibling);
              }
            } else {
              if (over.previousSibling !== dragged) {
                list.insertBefore(dragged, over);
              }
            }
          });

          list.addEventListener('drop', async (e) => {
            e.preventDefault();
            refreshVisiblePositions();
            // Debounced persist (drop is not reliable cross-browser)
            schedulePersistSoon();
          });
        })();

        (function() {
          // Inline duration editing
          const list = document.getElementById('playlist-items');
          if (!list) return;

          const durationBase = list.getAttribute('data-duration-base') || '';
          function durationAction(itemId) {
            // base will be something like /company/items/0/duration
            return durationBase.replace(/0\/?duration$/, `${itemId}/duration`).replace(/0\/duration$/, `${itemId}/duration`);
          }

          function statusEl(itemId) {
            return list.querySelector(`.js-duration-status[data-item-id="${itemId}"]`);
          }

          let saveTimer = null;
          let lastRequestId = 0;

          async function saveDuration(itemId, value) {
            const st = statusEl(itemId);
            if (st) st.textContent = 'Saving…';

            const body = new URLSearchParams();
            body.set('duration_seconds', String(value));

            const reqId = ++lastRequestId;

            const res = await fetch(durationAction(itemId), {
              method: 'POST',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
              },
              body
            });

            if (reqId !== lastRequestId) {
              // newer request is in flight; ignore this response
              return;
            }

            if (!res.ok) {
              if (st) st.textContent = 'Failed to save';
              return;
            }

            let data = null;
            try { data = await res.json(); } catch (e) {}
            if (!data || !data.ok) {
              if (st) st.textContent = (data && data.error) ? data.error : 'Failed to save';
              return;
            }

            if (st) {
              st.textContent = 'Saved';
              window.setTimeout(() => {
                if (st.textContent === 'Saved') st.textContent = '';
              }, 900);
            }
          }

          list.addEventListener('input', (e) => {
            const input = e.target.closest('.js-duration-input');
            if (!input) return;
            const itemId = input.getAttribute('data-item-id');
            if (!itemId) return;

            const v = Math.max(1, parseInt(input.value || '1', 10));
            if (String(v) !== String(input.value)) input.value = String(v);

            if (saveTimer) window.clearTimeout(saveTimer);
            saveTimer = window.setTimeout(() => {
              saveDuration(itemId, v).catch((err) => {
                console.warn('Failed to save duration', err);
                const st = statusEl(itemId);
                if (st) st.textContent = 'Failed to save';
              });
            }, 450);
          });
        })();
      </script>
    </div>
{% endblock %}