<!DOCTYPE html>
<html>
<head>
  <title>Watching {{ username }}</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; padding: 16px; }
    #status { opacity: .8; margin: 8px 0 16px; }
    video { width: min(900px, 100%); border-radius: 12px; background: #111; }
    .hint { font-size: 14px; opacity: .75; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>Watching {{ username }}</h1>
  <div id="status">Connecting…</div>

  <video
    id="remoteVideo"
    playsinline
    autoplay
    controls
    style="transform: scaleX(-1);">
  </video>

  <div class="hint">
    If you don’t hear audio, click the video and press play (browser autoplay rules).
  </div>

  <script>
    const username = "{{ username }}";
    const socket = io({ transports: ["websocket"] });

    let peerConnection = null;
    let currentStreamerSid = null;

    const statusEl = document.getElementById("status");
    const remoteVideo = document.getElementById("remoteVideo");

    function cleanupPeer() {
      try { if (peerConnection) peerConnection.close(); } catch (e) {}
      peerConnection = null;
      currentStreamerSid = null;
      try { remoteVideo.srcObject = null; } catch (e) {}
    }

    socket.on("connect", () => {
      console.log("[Watcher] Connected:", socket.id);
      statusEl.textContent = "Connected. Looking for stream…";

      socket.emit("join_room", { username, role: "watcher" });

      setTimeout(() => {
        console.log("[Watcher] emitting new_watcher");
        socket.emit("new_watcher", { username });
      }, 250);
    });

    socket.on("disconnect", () => {
      statusEl.textContent = "Disconnected.";
      cleanupPeer();
    });

    socket.on("stream_offline", () => {
      statusEl.textContent = `@${username} is offline.`;
      cleanupPeer();
    });

    socket.on("offer", async (data) => {
      console.log("[Watcher] Offer from:", data.streamerSid);
      statusEl.textContent = "Receiving stream…";
      currentStreamerSid = data.streamerSid;

      if (!peerConnection) {
        peerConnection = new RTCPeerConnection({
          iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
        });

        peerConnection.onicecandidate = (event) => {
          if (event.candidate && currentStreamerSid) {
            socket.emit("ice-candidate", {
              candidate: event.candidate.candidate,
              sdpMid: event.candidate.sdpMid,
              sdpMLineIndex: event.candidate.sdpMLineIndex,
              targetSid: currentStreamerSid
            });
          }
        };

        peerConnection.ontrack = (event) => {
          const stream = event.streams && event.streams[0];
          if (!stream) return;

          remoteVideo.srcObject = stream;

          remoteVideo.play().then(() => {
            statusEl.textContent = "Live ✅";
          }).catch(() => {
            statusEl.textContent = "Live (press play)";
          });
        };
      }

      try {
        await peerConnection.setRemoteDescription(new RTCSessionDescription({
          type: data.offerType,
          sdp: data.offer
        }));

        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);

        socket.emit("answer", {
          answer: answer.sdp,
          answerType: answer.type,
          streamerSid: data.streamerSid
        });
      } catch (err) {
        console.error("[Watcher] offer/answer error:", err);
        statusEl.textContent = "Error connecting to stream.";
        cleanupPeer();
      }
    });

    socket.on("ice-candidate", (data) => {
      const { candidate, sdpMid, sdpMLineIndex, senderSid } = data;
      if (!peerConnection || !candidate) return;
      if (currentStreamerSid && senderSid !== currentStreamerSid) return;

      peerConnection.addIceCandidate(new RTCIceCandidate({ candidate, sdpMid, sdpMLineIndex }))
        .catch(err => console.error("[Watcher] addIceCandidate error:", err));
    });
  </script>
</body>
</html>

