{% extends "base.html" %}

{% block content %}
<div class="container-fluid px-3 px-md-4 mt-4 mb-5 pb-5 d-flex flex-column align-items-center">
  <div class="text-center mb-5 animate-in">
    <h2 class="fw-bold text-white mb-0">Playback Control</h2>
    <p class="text-muted">Virtual Remote</p>
  </div>

  <div class="card bg-dark border-secondary animate-in shadow-lg"
    style="width: 100%; max-width: 360px; border-radius: 32px; animation-delay: 0.1s;">
    <div class="card-body p-4 p-md-5 d-flex flex-column align-items-center gap-4">

      <!-- Main Controls -->
      <div class="d-flex align-items-center justify-content-center gap-4 w-100 my-3">
        <button
          class="btn btn-outline-secondary rounded-circle d-flex align-items-center justify-content-center border-0 bg-secondary bg-opacity-10"
          id="rw" style="width: 65px; height: 65px;" title="Rewind 10s">
          <i class="bi bi-rewind-fill fs-3 text-light"></i>
        </button>

        <button class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center shadow" id="play"
          style="width: 95px; height: 95px;" title="Play / Pause">
          <i class="bi bi-play-fill" id="play-icon" style="font-size: 3rem; margin-left: 6px;"></i>
        </button>

        <button
          class="btn btn-outline-secondary rounded-circle d-flex align-items-center justify-content-center border-0 bg-secondary bg-opacity-10"
          id="ff" style="width: 65px; height: 65px;" title="Fast Forward 10s">
          <i class="bi bi-fast-forward-fill fs-3 text-light"></i>
        </button>
      </div>

      <hr class="w-100 border-secondary my-3" style="opacity: 0.5;">

      <!-- Secondary Controls -->
      <div class="d-flex justify-content-between w-100 px-2">
        <button class="btn btn-outline-light d-flex flex-column align-items-center border-0 gap-2 opacity-75" id="ccOn"
          title="Enable Subtitles">
          <i class="bi bi-badge-cc-fill fs-3"></i>
          <span style="font-size: 0.7rem; font-weight: 600; letter-spacing: 1px;">CC ON</span>
        </button>

        <button class="btn btn-outline-danger d-flex flex-column align-items-center border-0 gap-2 opacity-75" id="stop"
          title="Stop">
          <i class="bi bi-stop-circle-fill fs-3"></i>
          <span style="font-size: 0.7rem; font-weight: 600; letter-spacing: 1px;">STOP</span>
        </button>

        <button class="btn btn-outline-secondary d-flex flex-column align-items-center border-0 gap-2 opacity-75"
          id="ccOff" title="Disable Subtitles">
          <i class="bi bi-badge-cc fs-3"></i>
          <span style="font-size: 0.7rem; font-weight: 600; letter-spacing: 1px;">CC OFF</span>
        </button>
      </div>

    </div>
  </div>
</div>

<script>
  const playBtn = document.getElementById('play');
  const stopBtn = document.getElementById('stop');
  const ffBtn = document.getElementById('ff');
  const rwBtn = document.getElementById('rw');
  const ccOnBtn = document.getElementById('ccOn');
  const ccOffBtn = document.getElementById('ccOff');
  const playIcon = document.getElementById('play-icon');
  let isPlaying = false;

  playBtn.addEventListener('click', async () => {
    isPlaying = !isPlaying;
    playIcon.className = isPlaying ? 'bi bi-pause-fill' : 'bi bi-play-fill';
    playIcon.style.fontSize = '3rem';
    playIcon.style.marginLeft = isPlaying ? '0px' : '6px';
    await send_cmd("plp");
  });

  stopBtn.addEventListener('click', () => {
    isPlaying = false;
    playIcon.className = 'bi bi-play-fill';
    playIcon.style.fontSize = '3rem';
    playIcon.style.marginLeft = '6px';
    send_cmd("stp");
    setTimeout(() => window.location.href = "/mydownloads", 1000);
  });

  ffBtn.addEventListener('click', () => send_cmd("ffw"));
  rwBtn.addEventListener('click', () => send_cmd("rrw"));
  ccOnBtn.addEventListener('click', () => send_cmd("ccy"));
  ccOffBtn.addEventListener('click', () => send_cmd("ccn"));

  async function send_cmd(cmd) {
    try {
      await fetch(`/command/${cmd}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });
    } catch (e) {
      console.error("Remote command failed:", e);
    }
  }
</script>
{% endblock %}