{% extends "base.html" %}
{% block content %}
<div style="max-width: 1280px; margin: 0 auto; padding: 1rem 0;">
  <div style="margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
    <a href="/days/{{ day }}">&larr; {{ weekday }} &middot; {{ day }}</a>
    <label style="font-size: 0.9rem;">
      Camera:
      <select id="camera-select" onchange="switchCamera(this.value)" style="margin-left: 0.25rem;">
        {% for cam in all_cameras %}
        <option value="{{ cam }}" {% if cam == camera %}selected{% endif %}>{{ cam }}</option>
        {% endfor %}
      </select>
    </label>
  </div>

  {% if total == 0 %}
  <p>No snapshots for camera &ldquo;{{ camera }}&rdquo; on {{ day }}{% if has_time_filter %} in the selected time window{% endif %}.</p>
  {% else %}
  {% if has_time_filter %}
  <div style="margin-bottom: 0.5rem; padding: 0.3rem 0.75rem; background: #e8f0fe; border-radius: 4px; font-size: 0.85rem; color: #333;">
    Showing snapshots in filtered time window. <a href="?camera={{ encoded_camera }}">Show all</a>
  </div>
  {% endif %}
  <div style="text-align: center;">
    <div style="margin-bottom: 0.25rem; color: #666; font-size: 0.9rem;">
      <span id="timestamp">{{ labels[n] }}</span>
      &middot;
      <span id="counter">{{ n + 1 }} / {{ total }}</span>
    </div>

    <img
      id="main-img"
      src="{{ img_base_url }}/{{ n }}{{ query_string }}"
      alt="Snapshot {{ n + 1 }} of {{ total }}"
      style="max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border: 1px solid #ccc;"
    >

    <div
      id="filmstrip"
      style="display: flex; gap: 4px; overflow-x: auto; padding: 0.5rem 0; margin: 0.75rem auto; max-width: 100%; justify-content: safe center;"
    ></div>

    <div style="position: relative; max-width: 100%; margin: 0 auto;">
      <div id="density-track" style="position: relative; height: 20px; margin: 0 8px;"></div>
      <input
        type="range"
        id="scrubber"
        min="0"
        max="{{ total - 1 }}"
        value="{{ n }}"
        step="1"
        style="width: 100%; margin: 0;"
        oninput="onScrub(this.value)"
      >
      <div style="display: flex; justify-content: space-between; font-size: 0.7rem; color: #888; padding: 0 8px;">
        {% for h in range(0, 24, 3) %}
        <span>{{ "%02d" % h }}</span>
        {% endfor %}
      </div>
    </div>

    <div style="margin-top: 0.75rem; display: flex; justify-content: center; gap: 1.5rem; align-items: center;">
      <button id="prev-btn" onclick="goTo(currentN - 1)" style="font-size: 1rem; cursor: pointer; padding: 0.2rem 0.6rem; background: none; border: 1px solid #ccc; border-radius: 3px;">&larr; Prev</button>
      <button id="play-btn" onclick="togglePlay()" style="font-size: 1rem; cursor: pointer; padding: 0.2rem 0.8rem; background: none; border: 1px solid #ccc; border-radius: 3px;">&#9654; Play</button>
      <button id="next-btn" onclick="goTo(currentN + 1)" style="font-size: 1rem; cursor: pointer; padding: 0.2rem 0.6rem; background: none; border: 1px solid #ccc; border-radius: 3px;">Next &rarr;</button>
      <select id="speed-select" onchange="setSpeed(this.value)" style="font-size: 0.85rem;">
        <option value="2000">1&times;</option>
        <option value="1000" selected>2&times;</option>
        <option value="400">5&times;</option>
        <option value="200">10&times;</option>
      </select>
    </div>

    <div style="margin-top: 0.5rem;">
      <a id="open-tab-link" href="{{ img_base_url }}/{{ n }}{{ query_string }}" target="_blank" rel="noopener" style="font-size: 0.85rem;">Open in new tab</a>
    </div>
  </div>

  <style>
    .film-thumb {
      width: 80px;
      height: 45px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .film-thumb.selected {
      border-color: #3388ff;
    }
    .event-marker {
      position: absolute;
      width: 4px;
      height: 14px;
      background: #f0a030;
      bottom: 0;
      border-radius: 2px;
      transform: translateX(-50%);
    }
  </style>

  <script>
    const snapshots = {{ snapshots_json | safe }};
    const imgBaseUrl = {{ img_base_url | tojson }};
    const queryString = {{ query_string | tojson }};
    let currentN = {{ n }};
    let speedMs = 1000;
    let intervalId = null;

    function goTo(n) {
      if (snapshots.total === 0) return;
      n = ((n % snapshots.total) + snapshots.total) % snapshots.total;
      currentN = n;

      document.getElementById('main-img').src = imgBaseUrl + '/' + n + queryString;
      document.getElementById('counter').textContent = (n + 1) + ' / ' + snapshots.total;
      document.getElementById('timestamp').textContent = snapshots.labels[n] || '';
      document.getElementById('scrubber').value = n;
      document.getElementById('open-tab-link').href = imgBaseUrl + '/' + n + queryString;

      renderFilmstrip(n);

      const url = new URL(window.location);
      url.searchParams.set('n', String(n));
      history.replaceState(null, '', url);

      if (intervalId !== null) {
        clearInterval(intervalId);
        intervalId = setInterval(() => goTo(currentN + 1), speedMs);
      }
    }

    function renderFilmstrip(n) {
      const strip = document.getElementById('filmstrip');
      const total = snapshots.total;
      let start = n - 5;
      if (start < 0) start = 0;
      if (start + 10 > total) start = Math.max(0, total - 10);

      strip.innerHTML = '';
      for (let i = start; i < Math.min(start + 10, total); i++) {
        const img = document.createElement('img');
        img.src = imgBaseUrl + '/' + i + queryString;
        img.className = 'film-thumb' + (i === n ? ' selected' : '');
        img.loading = 'lazy';
        img.title = snapshots.labels[i] || '';
        img.addEventListener('click', () => goTo(i));
        strip.appendChild(img);
      }

      requestAnimationFrame(() => {
        const selected = strip.querySelector('.selected');
        if (selected) selected.scrollIntoView({ inline: 'center', behavior: 'smooth' });
      });
    }

    function renderEventMarkers() {
      const track = document.getElementById('density-track');
      track.innerHTML = '';
      const total = snapshots.total;
      const motion = snapshots.motion || [];
      if (total <= 1) return;

      for (let i = 0; i < total; i++) {
        if (!motion[i]) continue;
        const marker = document.createElement('div');
        marker.className = 'event-marker';
        marker.style.left = ((i / (total - 1)) * 100) + '%';
        marker.title = snapshots.labels[i] || '';
        track.appendChild(marker);
      }
    }

    function onScrub(value) {
      goTo(parseInt(value, 10));
    }

    function togglePlay() {
      const btn = document.getElementById('play-btn');
      if (intervalId !== null) {
        clearInterval(intervalId);
        intervalId = null;
        btn.innerHTML = '&#9654; Play';
      } else {
        intervalId = setInterval(() => goTo(currentN + 1), speedMs);
        btn.innerHTML = '&#9208; Pause';
      }
    }

    function setSpeed(value) {
      speedMs = parseInt(value, 10);
      if (intervalId !== null) {
        clearInterval(intervalId);
        intervalId = setInterval(() => goTo(currentN + 1), speedMs);
      }
    }

    function switchCamera(value) {
      const params = new URLSearchParams();
      params.set('camera', value);
      params.set('n', '0');
      {% if start_time %}params.set('start_time', {{ start_time | tojson }});{% endif %}
      {% if end_time %}params.set('end_time', {{ end_time | tojson }});{% endif %}
      window.location.href = '?' + params.toString();
    }

    document.addEventListener('keydown', (e) => {
      if (e.target.tagName === 'SELECT' || (e.target.tagName === 'INPUT' && e.target.type !== 'range')) return;
      if (e.key === 'ArrowLeft') { e.preventDefault(); goTo(currentN - 1); }
      else if (e.key === 'ArrowRight') { e.preventDefault(); goTo(currentN + 1); }
      else if (e.key === ' ') { e.preventDefault(); togglePlay(); }
      else if (e.key === 'Home') { e.preventDefault(); goTo(0); }
      else if (e.key === 'End') { e.preventDefault(); goTo(snapshots.total - 1); }
    });

    window.addEventListener('resize', renderEventMarkers);

    renderFilmstrip(currentN);
    if (snapshots.total > 0) renderEventMarkers();
  </script>
  {% endif %}
</div>
{% endblock %}