import { ZonePlayer } from '../shared/zoneplayer.js';

// 오프라인 재생 안정성: 서비스 워커 등록 (앱 셸/이미지 캐시)
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').catch(() => {});
}
const DIRECTIVE_CACHE_KEY = 'sig-last-directive';

const stage = document.getElementById('stage');
const viewport = document.getElementById('viewport');
const badge = document.getElementById('badge');
const conn = document.getElementById('conn');
const overlay = document.getElementById('start-overlay');
const startBtn = document.getElementById('start-btn');

let resolution = { width: 1920, height: 1080 };
let ws = null;

let lastNow = null;
const engine = new ZonePlayer(stage, {
  muted: true,
  onNowPlaying: (item, index) => {
    lastNow = { media: { id: item.id, name: item.name, type: item.type, kind: item.kind }, index };
    send({ type: 'nowplaying', payload: lastNow });
  },
});

// 무대를 지정 해상도로 세팅하고 화면에 맞게 스케일
function layout() {
  stage.style.width = resolution.width + 'px';
  stage.style.height = resolution.height + 'px';
  const sx = viewport.clientWidth / resolution.width;
  const sy = viewport.clientHeight / resolution.height;
  const scale = Math.min(sx, sy);
  stage.style.transform = `scale(${scale})`;
}
window.addEventListener('resize', layout);

function applyDirective(d) {
  // 마지막 지시를 캐시 → 재시작/오프라인 시 즉시 이어서 재생
  try { localStorage.setItem(DIRECTIVE_CACHE_KEY, JSON.stringify(d)); } catch {}
  if (d.resolution && (d.resolution.width !== resolution.width || d.resolution.height !== resolution.height)) {
    resolution = d.resolution;
    layout();
  }
  // 긴급 송출 뱃지
  if (d.mode === 'emergency') {
    badge.className = 'emergency';
    badge.textContent = '● 긴급 송출';
  } else {
    badge.className = '';
    badge.textContent = '';
  }
  engine.apply(d);
}

function connect() {
  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
  ws = new WebSocket(`${proto}://${location.host}/ws?role=player`);
  ws.onopen = () => {
    conn.className = 'ok';
    reportScreen(); // 접속 시 이 전광판 모니터 해상도 보고
    if (lastNow) send({ type: 'nowplaying', payload: lastNow }); // 재연결 시 현재 재생 항목 재보고(이력 기록)
  };
  ws.onclose = () => { conn.className = ''; setTimeout(connect, 1500); };
  ws.onmessage = (ev) => {
    const msg = JSON.parse(ev.data);
    if (msg.type === 'directive') applyDirective(msg.directive);
    else if (msg.type === 'capture') {
      const shot = engine.captureFrame(720);
      send({ type: 'screenshot', payload: { ...shot, at: Date.now(), resolution } });
    }
  };
}

function send(obj) { if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj)); }

function reportScreen() {
  const dpr = window.devicePixelRatio || 1;
  // 실제 물리 픽셀 해상도(전광판 패널 해상도) 추정
  send({ type: 'screeninfo', payload: {
    width: Math.round(window.screen.width * dpr),
    height: Math.round(window.screen.height * dpr),
    cssWidth: window.screen.width,
    cssHeight: window.screen.height,
    dpr,
  }});
}
window.addEventListener('resize', reportScreen);

startBtn.addEventListener('click', async () => {
  overlay.style.display = 'none';
  engine.setMuted(false); // 사용자 제스처 후 소리 허용
  try { await document.documentElement.requestFullscreen(); } catch {}
  layout();
});

// 부팅 시 캐시된 지시가 있으면 즉시 재생 (서버 응답 전·재시작·오프라인에도 화면 유지)
try {
  const cached = JSON.parse(localStorage.getItem(DIRECTIVE_CACHE_KEY) || 'null');
  if (cached) applyDirective(cached);
} catch {}

layout();
connect();
