{% extends "pages/base.html" %}
{% load i18n static %}

{% block title %}{{ stream.name }} | {% trans "Video" %}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'video/stream_detail.css' %}">
{% endblock %}

{% block content %}
<div class="camera-viewer-shell py-4">
  <div class="camera-viewer-layout">
    <section class="camera-viewer-stage" aria-label="{% trans 'Live camera' %}">
      <div
        class="camera-stream-frame bg-dark shadow-sm"
        data-stream-ws-path="{{ stream_ws_path }}"
        data-stream-webrtc-ws-path="{{ stream_webrtc_ws_path }}"
        data-stream-url="{{ stream_url }}"
        data-preview-src="{{ preview_data_uri|default:'' }}"
        data-loading-message="{% trans 'Loading camera...' %}"
        data-warming-message="{% trans 'Camera is warming up...' %}"
      >
        <video
          playsinline
          autoplay
          muted
          controls
          hidden
        ></video>
        <img
          alt="{% trans 'Live video stream' %}"
          hidden
        />
        <div
          class="camera-stream-loading text-light text-center"
          data-stream-loading
        >
          <div class="spinner-border spinner-border-sm mb-2" role="status" aria-hidden="true"></div>
          <div data-stream-loading-message>{% trans "Loading camera..." %}</div>
        </div>
      </div>
    </section>

    <aside class="camera-viewer-sidebar" aria-label="{% trans 'Camera details' %}">
      <div class="camera-viewer-sidebar-content">
        <p class="text-muted mb-1">{% trans "Live stream" %}</p>
        <h1 class="h3 mb-3">{{ stream.name }}</h1>
        {% if not stream.is_active %}
          <span class="badge text-bg-warning mb-3">{% trans "Unpublished" %}</span>
        {% endif %}
        <dl class="camera-stream-status-grid mb-3">
          <div>
            <dt>{% trans "FPS" %}</dt>
            <dd data-camera-fps>{% trans "Waiting" %}</dd>
          </div>
          <div>
            <dt>{% trans "Resolution" %}</dt>
            <dd data-camera-resolution>{% trans "Waiting" %}</dd>
          </div>
        </dl>
        {% if can_capture_samples %}
        <form
          class="camera-sample-form mb-3"
          method="post"
          action="{{ sample_frames_url }}"
          data-sample-frame-form
        >
          {% csrf_token %}
          <label class="form-label mb-2" for="sample-frame-count">{% trans "Sample frames" %}</label>
          <div class="camera-sample-range">
            <input
              id="sample-frame-count"
              class="form-range"
              type="range"
              name="frame_count"
              min="{{ sample_frame_min }}"
              max="{{ sample_frame_max }}"
              value="{{ sample_frame_default }}"
              step="1"
              data-sample-frame-count
            >
            <output for="sample-frame-count" data-sample-frame-count-output>{{ sample_frame_default }}</output>
          </div>
          <button class="btn btn-primary w-100" type="submit" data-sample-frame-submit>
            {% trans "Sample Frames" %}
          </button>
          <p class="camera-sample-status small text-muted mb-0" role="status" data-sample-frame-status></p>
        </form>
        {% endif %}
        <div class="camera-viewer-actions mb-3">
          <a class="btn btn-outline-secondary" href="{% url 'video:camera-gallery' %}">
            {% trans "All cameras" %}
          </a>
          {% if request.user.is_staff %}
          <a class="btn btn-outline-primary" href="{{ stream.get_admin_url }}">
            {% trans "Configure" %}
          </a>
          <a class="btn btn-outline-secondary" href="{% url 'video:mjpeg-debug' stream.slug %}">
            {% trans "Debug stream" %}
          </a>
          {% endif %}
        </div>
        <p class="text-muted mb-0">
          {% trans "This stream uses WebRTC with a Redis-backed WebSocket transport. MJPEG playback is legacy." %}
        </p>
      </div>
    </aside>
  </div>
</div>
{{ webrtc_ice_servers|json_script:"webrtc-ice-servers" }}
<script>
  (() => {
    const container = document.querySelector("[data-stream-ws-path]");
    if (!container) {
      return;
    }
    const wsPath = container.dataset.streamWsPath;
    const webrtcPath = container.dataset.streamWebrtcWsPath;
    const streamUrl = container.dataset.streamUrl;
    const previewSrc = container.dataset.previewSrc;
    const video = container.querySelector("video");
    const image = container.querySelector("img");
    const loading = container.querySelector("[data-stream-loading]");
    const loadingMessage = container.querySelector("[data-stream-loading-message]");
    const fpsNode = document.querySelector("[data-camera-fps]");
    const resolutionNode = document.querySelector("[data-camera-resolution]");
    const sampleForm = document.querySelector("[data-sample-frame-form]");
    const sampleCount = document.querySelector("[data-sample-frame-count]");
    const sampleCountOutput = document.querySelector("[data-sample-frame-count-output]");
    const sampleSubmit = document.querySelector("[data-sample-frame-submit]");
    const sampleStatus = document.querySelector("[data-sample-frame-status]");
    const iceServers = (() => {
      const node = document.getElementById("webrtc-ice-servers");
      if (!node) {
        return [];
      }
      try {
        return JSON.parse(node.textContent);
      } catch (error) {
        console.error("Unable to parse ICE servers:", error);
        return [];
      }
    })();

    const wsScheme = window.location.protocol === "https:" ? "wss" : "ws";
    const buildWsUrl = (path) => `${wsScheme}://${window.location.host}${path}`;
    const minimumFrameDelay = 250;
    const maxWebsocketReconnectAttempts = 5;
    const loadingText = container.dataset.loadingMessage || (loadingMessage && loadingMessage.textContent) || "";
    const warmingText = container.dataset.warmingMessage || loadingText;
    const frameTimestamps = [];
    let videoFrameObserverStarted = false;

    const setResolution = (width, height) => {
      if (!resolutionNode || !width || !height) {
        return;
      }
      resolutionNode.textContent = `${width} x ${height}`;
    };

    const recordRenderedFrame = (width, height) => {
      const now = performance.now();
      frameTimestamps.push(now);
      while (frameTimestamps.length && now - frameTimestamps[0] > 2000) {
        frameTimestamps.shift();
      }
      if (fpsNode && frameTimestamps.length > 1) {
        const duration = frameTimestamps[frameTimestamps.length - 1] - frameTimestamps[0];
        const fps = duration > 0 ? ((frameTimestamps.length - 1) / (duration / 1000)) : 0;
        fpsNode.textContent = fps > 0 ? fps.toFixed(1) : "{% trans 'Waiting' %}";
      }
      setResolution(width, height);
    };

    const observeVideoFrames = () => {
      if (!video || videoFrameObserverStarted) {
        return;
      }
      videoFrameObserverStarted = true;
      if (video.requestVideoFrameCallback) {
        const onVideoFrame = (_now, metadata) => {
          recordRenderedFrame(
            metadata.width || video.videoWidth,
            metadata.height || video.videoHeight
          );
          if (!video.hidden && video.requestVideoFrameCallback) {
            video.requestVideoFrameCallback(onVideoFrame);
          }
        };
        video.requestVideoFrameCallback(onVideoFrame);
        return;
      }
      window.setInterval(() => {
        if (!video.hidden && !video.paused) {
          recordRenderedFrame(video.videoWidth, video.videoHeight);
        }
      }, 1000);
    };

    const recordImageFrameOnLoad = () => {
      if (!image) {
        return;
      }
      image.addEventListener("load", () => {
        recordRenderedFrame(image.naturalWidth, image.naturalHeight);
      }, { once: true });
    };

    const setLoading = (message) => {
      if (loadingMessage && message) {
        loadingMessage.textContent = message;
      }
      if (loading) {
        loading.hidden = false;
      }
    };

    const hideLoading = () => {
      if (loading) {
        loading.hidden = true;
      }
    };

    const showVideo = () => {
      if (video) {
        video.hidden = false;
        observeVideoFrames();
      }
      if (image) {
        image.hidden = true;
      }
      hideLoading();
    };

    const showImage = () => {
      if (video) {
        video.hidden = true;
      }
      if (image) {
        image.hidden = false;
      }
      hideLoading();
    };

    if (previewSrc && image) {
      recordImageFrameOnLoad();
      image.src = previewSrc;
      showImage();
    } else {
      setLoading(loadingText);
    }

    let websocketStarted = false;
    let websocketReconnectDelay = 1000;
    let websocketReconnectAttempts = 0;
    const maxWebsocketReconnectDelay = 30000;
    let mjpegFallbackStarted = false;
    let mjpegRetryTimer = null;
    const mjpegRetryDelay = 5000;
    const scheduleMjpegRetry = () => {
      if (mjpegRetryTimer || !streamUrl || !image) {
        return;
      }
      mjpegRetryTimer = window.setTimeout(() => {
        mjpegRetryTimer = null;
        mjpegFallbackStarted = false;
        startMjpegStream();
      }, mjpegRetryDelay);
    };
    const startMjpegStream = () => {
      if (mjpegFallbackStarted || !streamUrl || !image) {
        return;
      }
      mjpegFallbackStarted = true;
      image.addEventListener("error", () => {
        image.removeAttribute("src");
        setLoading(warmingText);
        scheduleMjpegRetry();
      }, { once: true });
      image.addEventListener("load", () => {
        if (mjpegRetryTimer) {
          window.clearTimeout(mjpegRetryTimer);
          mjpegRetryTimer = null;
        }
        recordRenderedFrame(image.naturalWidth, image.naturalHeight);
        showImage();
      }, { once: true });
      image.src = `${streamUrl}?ts=${Date.now()}`;
      setLoading(warmingText);
    };
    const startWebsocketStream = () => {
      if (mjpegFallbackStarted) {
        return;
      }
      if (websocketStarted) {
        return;
      }
      websocketStarted = true;
      if (!wsPath || !image) {
        return;
      }
      let lastUrl = null;
      const ws = new WebSocket(buildWsUrl(wsPath));
      ws.binaryType = "arraybuffer";
      const cleanup = () => {
        if (lastUrl) {
          URL.revokeObjectURL(lastUrl);
          lastUrl = null;
        }
      };
      const scheduleReconnect = () => {
        cleanup();
        websocketStarted = false;
        websocketReconnectAttempts += 1;
        if (websocketReconnectAttempts >= maxWebsocketReconnectAttempts) {
          setLoading(warmingText);
          return;
        }
        if (!mjpegFallbackStarted) {
          setTimeout(startWebsocketStream, websocketReconnectDelay);
          websocketReconnectDelay = Math.min(
            websocketReconnectDelay * 2,
            maxWebsocketReconnectDelay
          );
        }
      };
      let lastRenderedAt = 0;
      ws.addEventListener("message", (event) => {
        const now = Date.now();
        if (now - lastRenderedAt < minimumFrameDelay) {
          return;
        }
        lastRenderedAt = now;
        const blob = new Blob([event.data], { type: "image/jpeg" });
        const objectUrl = URL.createObjectURL(blob);
        if (lastUrl) {
          URL.revokeObjectURL(lastUrl);
        }
        lastUrl = objectUrl;
        recordImageFrameOnLoad();
        image.src = objectUrl;
      });
      ws.addEventListener("open", () => {
        websocketReconnectDelay = 1000;
        websocketReconnectAttempts = 0;
        showImage();
      });
      ws.addEventListener("close", scheduleReconnect);
      ws.addEventListener("error", (event) => {
        console.error("WebSocket error:", event);
        startMjpegStream();
        ws.close();
      });
    };

    if (sampleCount && sampleCountOutput) {
      sampleCountOutput.textContent = sampleCount.value;
      sampleCount.addEventListener("input", () => {
        sampleCountOutput.textContent = sampleCount.value;
      });
    }

    if (sampleForm) {
      sampleForm.addEventListener("submit", async (event) => {
        event.preventDefault();
        if (sampleSubmit) {
          sampleSubmit.disabled = true;
        }
        if (sampleStatus) {
          sampleStatus.classList.remove("text-danger");
          sampleStatus.classList.add("text-muted");
          sampleStatus.textContent = "{% trans 'Capturing sample frames...' %}";
        }
        try {
          const response = await fetch(sampleForm.action, {
            method: "POST",
            body: new FormData(sampleForm),
            headers: {
              "Accept": "application/json",
              "X-Requested-With": "XMLHttpRequest"
            }
          });
          const payload = await response.json();
          if (!response.ok) {
            throw new Error(payload.error || "{% trans 'Sample capture failed.' %}");
          }
          if (sampleStatus) {
            sampleStatus.classList.remove("text-danger");
            sampleStatus.classList.add("text-muted");
            sampleStatus.textContent = payload.message || "{% trans 'Sample frames captured.' %}";
          }
        } catch (error) {
          if (sampleStatus) {
            sampleStatus.classList.remove("text-muted");
            sampleStatus.classList.add("text-danger");
            sampleStatus.textContent = error.message || "{% trans 'Sample capture failed.' %}";
          }
        } finally {
          if (sampleSubmit) {
            sampleSubmit.disabled = false;
          }
        }
      });
    }

    const startWebrtcStream = async () => {
      if (!webrtcPath || !window.RTCPeerConnection || !video) {
        return false;
      }
      const ws = new WebSocket(buildWsUrl(webrtcPath));
      const pc = new RTCPeerConnection({ iceServers });
      pc.addEventListener("track", (event) => {
        showVideo();
        if (video.srcObject !== event.streams[0]) {
          video.srcObject = event.streams[0];
        }
      });
      pc.addEventListener("icecandidate", (event) => {
        if (event.candidate) {
          ws.send(JSON.stringify({ type: "candidate", candidate: event.candidate }));
        }
      });
      pc.addEventListener("connectionstatechange", () => {
        if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
          startWebsocketStream();
        }
      });

      ws.addEventListener("message", async (event) => {
        const payload = JSON.parse(event.data || "{}");
        if (payload.type === "answer") {
          await pc.setRemoteDescription({ type: "answer", sdp: payload.sdp });
        }
        if (payload.type === "candidate" && payload.candidate) {
          await pc.addIceCandidate(payload.candidate);
        }
      });

      ws.addEventListener("open", async () => {
        const offer = await pc.createOffer();
        await pc.setLocalDescription(offer);
        ws.send(JSON.stringify({ type: "offer", sdp: offer.sdp }));
      });

      ws.addEventListener("close", () => {
        pc.close();
        if (video.srcObject) {
          video.srcObject = null;
        }
        startWebsocketStream();
      });

      ws.addEventListener("error", () => {
        pc.close();
        startWebsocketStream();
      });

      return true;
    };

    startWebrtcStream().then((started) => {
      if (!started) {
        startWebsocketStream();
      }
    });
  })();
</script>
{% endblock %}