/*
  WATCH — hero, player, source list (switch mid-watch), episodes.

  URL params: ?id=<tmdb id>&type=<movie|tv>
              TV adds &s=<season>&e=<episode> as playback progresses.
*/
(function () {
  'use strict';

  const params = new URLSearchParams(location.search);
  const id = (params.get('id') || '').trim();
  const type = params.get('type') === 'tv' ? 'tv' : 'movie';

  SR.app.initChrome();

  const content = document.getElementById('content');
  if (!id || !/^\d+$/.test(id)) {
    content.replaceChildren(SR.cards.emptyState('Missing ?id=', 'This page needs a TMDB id, e.g. watch.html?id=1396&type=tv'));
    return;
  }

  const video = document.getElementById('video');
  const statusEl = document.getElementById('playerStatus');
  const sourceLabel = document.getElementById('sourceLabel');
  const resumeNote = document.getElementById('resumeNote');
  const sourcesPanel = document.getElementById('sourcesPanel');
  const episodeSection = document.getElementById('episodes');

  // custom player controls
  const playerWrap = document.getElementById('playerWrap');
  const bigPlay = document.getElementById('bigPlay');
  const pcSeek = document.getElementById('pcSeek');
  const pcPlay = document.getElementById('pcPlay');
  const pcMute = document.getElementById('pcMute');
  const pcVol = document.getElementById('pcVol');
  const pcTime = document.getElementById('pcTime');
  const pcCc = document.getElementById('pcCc');
  const pcQuality = document.getElementById('pcQuality');
  const pcGear = document.getElementById('pcGear');
  const pcPip = document.getElementById('pcPip');
  const pcFull = document.getElementById('pcFull');
  const seasonSelect = document.getElementById('seasonSelect');
  const episodeGrid = document.getElementById('episodeGrid');
  const prevBtn = document.getElementById('prevEpisode');
  const nextBtn = document.getElementById('nextEpisode');

  const state = {
    details: null,
    seasons: [],
    episodes: [],
    streams: [],
    sourceIndex: -1,
    season: null,
    episode: null,
    loadedKey: null,
  };

  /* ---- status overlay ------------------------------------------------------ */

  function showStatus(msg, isError) {
    statusEl.hidden = false;
    playerWrap.classList.remove('player-wrap--controls', 'player-wrap--paused');
    statusEl.innerHTML = isError
      ? `<h3>Playback problem</h3><p>${SR.util.escapeHtml(msg)}</p>`
      : `<div class="spinner"></div><p>${SR.util.escapeHtml(msg)}</p>`;
  }

  function hideStatus() {
    statusEl.hidden = true;
    syncPaused();
  }

  /* ---- player --------------------------------------------------------------- */

  const player = SR.player.create(video, {
    onStatus: (msg) => showStatus(msg),
    onReady: (resumeAt) => {
      hideStatus();
      if (resumeAt > 10) resumeNote.textContent = `Resuming at ${SR.util.formatSeconds(resumeAt)}`;
    },
    onError: (msg) => {
      showStatus(msg, true);
      SR.app.toast(msg, true);
    },
  });

  /* ---- custom player controls -------------------------------------------------- */

  const ICON_PLAY =
    '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>';
  const ICON_PAUSE =
    '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 4h4v16H6zm8 0h4v16h-4z"></path></svg>';
  const ICON_VOL =
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>';
  const ICON_VOL_X =
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>';

  let hideTimer = null;
  let scrubbing = false;

  function paintProgress(el, ratio) {
    const pct = Math.max(0, Math.min(1, ratio)) * 100;
    el.style.setProperty('--pc-progress', pct + '%');
  }

  function timeLabel() {
    const d = video.duration;
    const ds = d && isFinite(d) ? SR.util.formatSeconds(d) : '0:00';
    return `${SR.util.formatSeconds(video.currentTime)} / ${ds}`;
  }

  function syncPlayIcon() {
    const playing = !video.paused && !video.ended;
    pcPlay.innerHTML = playing ? ICON_PAUSE : ICON_PLAY;
    pcPlay.setAttribute('aria-label', playing ? 'Pause' : 'Play');
  }

  function syncVolIcon() {
    const muted = video.muted || video.volume === 0;
    pcMute.innerHTML = muted ? ICON_VOL_X : ICON_VOL;
    pcMute.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
    pcMute.classList.toggle('is-on', muted);
    pcVol.value = String(video.muted ? 0 : video.volume);
    paintProgress(pcVol, video.muted ? 0 : video.volume);
  }

  function syncTimeUI() {
    if (scrubbing) return;
    const d = video.duration;
    if (d && isFinite(d) && d > 0) {
      pcSeek.value = String(Math.round((video.currentTime / d) * 1000));
      paintProgress(pcSeek, video.currentTime / d);
    }
    pcTime.textContent = timeLabel();
  }

  function syncPaused() {
    playerWrap.classList.toggle('player-wrap--paused', video.paused);
  }

  function togglePlay() {
    if (!video.src && !video.currentSrc) return;
    if (video.paused || video.ended) {
      video.play().catch(() => {});
    } else {
      video.pause();
    }
  }

  function showControls() {
    playerWrap.classList.add('player-wrap--controls');
    clearTimeout(hideTimer);
    hideTimer = setTimeout(() => {
      if (!video.paused && !video.ended && !scrubbing) {
        playerWrap.classList.remove('player-wrap--controls');
      }
    }, 3000);
  }

  function toggleFullscreen() {
    const el = playerWrap;
    const doc = document;
    if (doc.fullscreenElement || doc.webkitFullscreenElement) {
      (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc);
    } else {
      (el.requestFullscreen || el.webkitRequestFullscreen).call(el);
    }
  }

  function togglePip() {
    if (!document.pictureInPictureEnabled) {
      SR.app.toast('Picture-in-picture is not supported in this browser', true);
      return;
    }
    if (document.pictureInPictureElement) {
      document.exitPictureInPicture().catch(() => {});
    } else {
      video.requestPictureInPicture().catch(() => {});
    }
  }

  function toggleCc() {
    const tracks = video.textTracks;
    let target = null;
    for (let i = 0; i < tracks.length; i++) {
      if (tracks[i].kind === 'subtitles') {
        target = tracks[i];
        break;
      }
    }
    if (!target) {
      SR.app.toast('This source has no subtitles', true);
      return;
    }
    target.mode = target.mode === 'showing' ? 'hidden' : 'showing';
    pcCc.classList.toggle('is-on', target.mode === 'showing');
    pcCc.setAttribute('aria-pressed', String(target.mode === 'showing'));
  }

  // video events
  video.addEventListener('click', togglePlay);
  video.addEventListener('dblclick', toggleFullscreen);
  video.addEventListener('play', () => {
    syncPlayIcon();
    syncPaused();
    showControls();
  });
  video.addEventListener('pause', () => {
    syncPlayIcon();
    syncPaused();
    showControls();
  });
  video.addEventListener('loadedmetadata', () => {
    syncPlayIcon();
    syncPaused();
    syncTimeUI();
  });
  video.addEventListener('timeupdate', syncTimeUI);
  video.addEventListener('volumechange', syncVolIcon);

  // buttons
  bigPlay.addEventListener('click', (e) => {
    e.stopPropagation();
    togglePlay();
  });
  pcPlay.addEventListener('click', togglePlay);
  pcMute.addEventListener('click', () => {
    video.muted = !video.muted;
  });
  pcCc.addEventListener('click', toggleCc);
  pcGear.addEventListener('click', () => {
    sourcesPanel.hidden = !sourcesPanel.hidden;
    pcGear.classList.toggle('is-on', !sourcesPanel.hidden);
  });
  pcPip.addEventListener('click', togglePip);
  pcFull.addEventListener('click', toggleFullscreen);

  // seek + volume scrubbing
  pcSeek.addEventListener('pointerdown', () => {
    scrubbing = true;
    showControls();
  });
  pcSeek.addEventListener('input', () => {
    const d = video.duration;
    if (d && isFinite(d) && d > 0) {
      paintProgress(pcSeek, pcSeek.value / 1000);
      pcTime.textContent = `${SR.util.formatSeconds((pcSeek.value / 1000) * d)} / ${SR.util.formatSeconds(d)}`;
    }
  });
  pcSeek.addEventListener('change', () => {
    const d = video.duration;
    if (d && isFinite(d) && d > 0) {
      video.currentTime = (pcSeek.value / 1000) * d;
    }
    scrubbing = false;
    syncTimeUI();
  });
  pcVol.addEventListener('input', () => {
    video.volume = Number(pcVol.value);
    video.muted = video.volume === 0;
  });

  // reveal controls on hover/interaction
  playerWrap.addEventListener('pointermove', showControls);
  playerWrap.addEventListener('pointerdown', showControls);

  // keyboard shortcuts
  document.addEventListener('keydown', (e) => {
    const tag = (e.target.tagName || '').toLowerCase();
    if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
    const d = video.duration;
    switch (e.key) {
      case ' ':
      case 'k':
        e.preventDefault();
        togglePlay();
        break;
      case 'ArrowRight':
        if (d && isFinite(d)) video.currentTime = Math.min(d, video.currentTime + 10);
        break;
      case 'ArrowLeft':
        if (d && isFinite(d)) video.currentTime = Math.max(0, video.currentTime - 10);
        break;
      case 'ArrowUp':
        e.preventDefault();
        video.volume = Math.min(1, video.volume + 0.05);
        video.muted = false;
        break;
      case 'ArrowDown':
        e.preventDefault();
        video.volume = Math.max(0, video.volume - 0.05);
        break;
      case 'm':
        video.muted = !video.muted;
        break;
      case 'f':
        toggleFullscreen();
        break;
      case 'c':
        toggleCc();
        break;
    }
    if (video.src || video.currentSrc) showControls();
  });

  // initial icon state
  syncPlayIcon();
  syncVolIcon();

  /* ---- hero ------------------------------------------------------------------ */

  function renderHero(d) {
    document.title = `${d.name || d.title} — bug.tv`;
    const isTv = type === 'tv';
    const year = String((isTv ? d.first_air_date : d.release_date) || '').slice(0, 4);
    const facts = [
      isTv ? `${d.number_of_seasons || 0} seasons` : SR.util.runtimeLabel(d.runtime),
      year,
    ]
      .filter(Boolean)
      .map(SR.util.escapeHtml)
      .join('<span>·</span>');
    const rating = d.vote_average
      ? `<span class="watch-hero__rating">★ ${Number(d.vote_average).toFixed(1)}</span>`
      : '';
    const genres = (d.genres || [])
      .map((g) => `<span class="tag">${SR.util.escapeHtml(g.name)}</span>`)
      .join('');
    const poster = SR.util.tmdbResize(d.poster_url, 'w500');
    const backdrop = SR.util.tmdbResize(d.backdrop_url, 'w1280');
    document.getElementById('hero').innerHTML = `
      ${backdrop ? `<div class="watch-hero__backdrop"><img src="${backdrop}" alt=""></div>` : ''}
      ${poster ? `<div class="watch-hero__poster"><img src="${poster}" alt=""></div>` : ''}
      <div class="watch-hero__body">
        <h1 class="watch-hero__title">${SR.util.escapeHtml(d.name || d.title)}</h1>
        <div class="watch-hero__facts">${rating}${rating && facts ? '<span>·</span>' : ''}${facts}</div>
        ${genres ? `<div class="watch-hero__genres">${genres}</div>` : ''}
        ${d.overview ? `<p class="watch-hero__overview">${SR.util.escapeHtml(d.overview)}</p>` : ''}
      </div>`;
  }

  /* ---- url -------------------------------------------------------------------- */

  function syncUrl() {
    const p = new URLSearchParams();
    p.set('id', id);
    p.set('type', type);
    if (type === 'tv') {
      if (state.season != null) p.set('s', state.season);
      if (state.episode != null) p.set('e', state.episode);
    }
    history.replaceState(null, '', `?${p.toString()}`);
  }

  /* ---- streams ------------------------------------------------------------------ */

  function keyFor() {
    return SR.storage.keyFor({ type, tmdbId: Number(id), season: state.season, episode: state.episode });
  }

  let providerNames = null; // cached per page load; null → ask server again

  async function getProviderNames() {
    if (providerNames) return providerNames;
    try {
      const data = await SR.api.providers();
      providerNames = SR.config.enabledProviders(data.all || [], data.enabled || []);
    } catch (e) {
      providerNames = null; // unreachable → let /streams use server defaults
    }
    return providerNames;
  }

  async function loadStreams() {
    const query = { tmdb: id, type, providers: await getProviderNames() };
    if (type === 'tv') {
      if (state.season == null || state.episode == null) return;
      query.season = state.season;
      query.episode = state.episode;
    }
    sourcesPanel.hidden = true;
    pcGear.classList.remove('is-on');
    pcQuality.textContent = '';
    showStatus('Finding streams…');
    sourceLabel.textContent = '';
    resumeNote.textContent = '';
    try {
      const data = await SR.api.streams(query);
      state.streams = data.streams || [];
      renderSources();
      pcGear.hidden = state.streams.length === 0;
      if (state.streams.length) playSource(0);
      else showStatus('No streams found for this title.', true);
    } catch (e) {
      SR.app.showError(e, 'stream lookup failed');
      showStatus('Stream lookup failed.', true);
    }
  }

  function renderSources() {
    const list = document.getElementById('sourceList');
    list.replaceChildren();
    state.streams.forEach((s, i) => {
      const b = document.createElement('button');
      b.type = 'button';
      b.className = i === state.sourceIndex ? 'source-item source-item--active' : 'source-item';
      const meta = [s.provider, s.quality, s.audio].filter(Boolean).join(' · ');
      b.innerHTML = `
        <span class="source-item__rank">${i + 1}</span>
        <span class="source-item__name">${SR.util.escapeHtml(s.name)}</span>
        <span class="source-item__meta">${SR.util.escapeHtml(meta)}</span>`;
      b.addEventListener('click', () => playSource(i));
      list.appendChild(b);
    });
    document.getElementById('sourcesCount').textContent =
      `${state.streams.length} source${state.streams.length === 1 ? '' : 's'}`;
  }

  function playSource(i) {
    const s = state.streams[i];
    if (!s) return;
    const key = keyFor();
    // Same episode as the one currently loaded → source switch: carry the
    // playhead over (resumeAt: null). A different episode → fresh resume:
    // pick up its own saved record, or start from the top.
    const resumeAt = state.loadedKey === key ? null : (() => {
      const rec = SR.storage.get(key);
      return rec && rec.t > 10 ? rec.t : 0;
    })();
    state.sourceIndex = i;
    state.loadedKey = key;
    renderSources();
    sourceLabel.textContent = `${s.name} — ${[s.quality, s.provider].filter(Boolean).join(', ')}`;
    pcQuality.textContent = s.quality || '';
    player.load(s, { resumeAt });
  }

  /* ---- resume persistence ---------------------------------------------------------- */

  let lastPersist = 0;

  function persistProgress(force) {
    const d = video.duration;
    if (!d || !isFinite(d)) return;
    const t = video.currentTime;
    if (t < 10) return;
    const key = keyFor();
    if (t >= d - 15 || t / d >= 0.95) {
      SR.storage.remove(key);
      return;
    }
    const now = Date.now();
    if (!force && now - lastPersist < 3000) return;
    lastPersist = now;
    const ep = state.episodes.find((e) => e.episode_number === state.episode);
    SR.storage.save({
      key,
      type,
      tmdbId: Number(id),
      season: state.season,
      episode: state.episode,
      show: state.details ? state.details.name || state.details.title : '',
      title: ep ? ep.name || '' : '',
      poster: state.details ? SR.util.tmdbResize(state.details.poster_url, 'w342') : '',
      t,
      d,
      at: now,
      provider: state.streams[state.sourceIndex] ? state.streams[state.sourceIndex].provider : '',
    });
  }

  video.addEventListener('timeupdate', () => persistProgress(false));
  video.addEventListener('pause', () => persistProgress(true));
  video.addEventListener('seeked', () => persistProgress(true));
  video.addEventListener('ended', () => SR.storage.remove(keyFor()));
  window.addEventListener('pagehide', () => persistProgress(true));
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) persistProgress(true);
  });

  /* ---- episodes ------------------------------------------------------------------------ */

  async function loadSeasons() {
    const data = await SR.api.seasons(id);
    state.seasons = data.seasons || [];
    for (const s of state.seasons) {
      const opt = document.createElement('option');
      opt.value = s.season_number;
      opt.textContent = `${s.name} (${s.episode_count})`;
      seasonSelect.appendChild(opt);
    }
  }

  function showGridSpinner() {
    episodeGrid.replaceChildren();
    const cell = document.createElement('div');
    cell.className = 'loading-cell';
    cell.innerHTML = '<div class="spinner"></div>';
    episodeGrid.appendChild(cell);
  }

  function renderEpisodes() {
    episodeGrid.replaceChildren();
    if (!state.episodes.length) {
      const empty = SR.cards.emptyState('No episodes listed');
      empty.style.gridColumn = '1 / -1';
      episodeGrid.appendChild(empty);
      return;
    }
    for (const ep of state.episodes) {
      const b = document.createElement('button');
      b.type = 'button';
      b.className = ep.episode_number === state.episode ? 'episode episode--current' : 'episode';
      const date = ep.air_date ? ` · ${SR.util.escapeHtml(ep.air_date)}` : '';
      b.innerHTML = `
        <span class="episode__thumb"><span class="episode__play">▶</span></span>
        <span class="episode__body">
          <span class="episode__num">S${state.season} · E${ep.episode_number}${date}</span>
          <span class="episode__title">${SR.util.escapeHtml(ep.name || `Episode ${ep.episode_number}`)}</span>
        </span>`;
      b.addEventListener('click', () => playEpisode(ep.episode_number));
      episodeGrid.appendChild(b);
    }
  }

  async function loadEpisodes(season, autoplayEpisode) {
    state.season = season;
    seasonSelect.value = String(season);
    showGridSpinner();
    const data = await SR.api.episodes(id, season);
    state.episodes = data.episodes || [];
    renderEpisodes();
    syncUrl();
    if (autoplayEpisode && state.episodes.some((e) => e.episode_number === autoplayEpisode)) {
      playEpisode(autoplayEpisode);
    }
  }

  function playEpisode(n) {
    state.episode = n;
    syncUrl();
    renderEpisodes();
    loadStreams();
    document.getElementById('playerSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  seasonSelect.addEventListener('change', async () => {
    const season = parseInt(seasonSelect.value, 10);
    if (!season) return;
    try {
      await loadEpisodes(season);
    } catch (e) {
      SR.app.showError(e, 'failed to load episodes');
    }
  });

  async function stepEpisode(delta) {
    if (type !== 'tv') return;
    const idx = state.episodes.findIndex((e) => e.episode_number === state.episode);
    if (idx >= 0 && idx + delta >= 0 && idx + delta < state.episodes.length) {
      playEpisode(state.episodes[idx + delta].episode_number);
      return;
    }
    const sIdx = state.seasons.findIndex((s) => s.season_number === state.season);
    if (sIdx < 0 || sIdx + delta < 0 || sIdx + delta >= state.seasons.length) return;
    try {
      await loadEpisodes(state.seasons[sIdx + delta].season_number);
      const first = state.episodes[0];
      if (first) playEpisode(first.episode_number);
    } catch (e) {
      SR.app.showError(e, 'failed to load episodes');
    }
  }

  prevBtn.addEventListener('click', () => stepEpisode(-1));
  nextBtn.addEventListener('click', () => stepEpisode(1));

  /* ---- init ------------------------------------------------------------------------------ */

  (async function init() {
    let details;
    try {
      details = await SR.api.details(type, id);
    } catch (e) {
      SR.app.showError(e, 'failed to load this title');
      showStatus('Could not load this title.', true);
      return;
    }
    state.details = details;
    renderHero(details);

    if (type !== 'tv') {
      loadStreams();
      return;
    }

    episodeSection.hidden = false;
    showStatus('Pick an episode to start.');

    try {
      await loadSeasons();
    } catch (e) {
      SR.app.showError(e, 'failed to load seasons');
      return;
    }
    if (!state.seasons.length) {
      showStatus('No seasons found for this show.', true);
      return;
    }

    const sParam = parseInt(params.get('s'), 10);
    const eParam = parseInt(params.get('e'), 10);
    const season = state.seasons.some((s) => s.season_number === sParam)
      ? sParam
      : state.seasons[0].season_number;
    try {
      await loadEpisodes(season, eParam || null);
    } catch (e) {
      SR.app.showError(e, 'failed to load episodes');
      showStatus('Failed to load episodes.', true);
    }
  })();
})();
