import './landing-video.css';

/** Self-hosted intro video (56 s, 1920×1080 H.264, no audio track). Fetched only when opened. */
export const introVideoUrl = new URL('./assets/pierzainer-intro.mp4', import.meta.url).href;

export const introVideoTriggerMarkup = `<button class="landing-video-trigger" type="button" aria-haspopup="dialog" aria-controls="landing-video"><span aria-hidden="true">▶</span>소개 영상 <span class="landing-video-trigger-time">1분</span></button>`;

/** Native dialog: Esc/backdrop close, pause + rewind on close, focus returns to the opener. */
export function createIntroVideo(root: HTMLElement, poster: string): { open: () => void; close: (restoreFocus?: boolean) => void } {
  const trigger = root.querySelector<HTMLButtonElement>('.landing-video-trigger')!;
  const dialog = document.createElement('dialog');
  dialog.className = 'landing-video';
  dialog.id = 'landing-video';
  dialog.setAttribute('aria-labelledby', 'landing-video-title');
  dialog.innerHTML = `
    <div class="landing-video-head">
      <div><span class="landing-video-kicker">PRODUCT TOUR / PIER &amp; ABUT</span><h2 id="landing-video-title">Pierzainer 소개 영상</h2></div>
      <button type="button" class="landing-video-close" aria-label="소개 영상 닫기">×</button>
    </div>
    <div class="landing-video-frame">
      <video controls playsinline muted preload="none" poster="${poster}" aria-describedby="landing-video-desc"></video>
    </div>
    <p id="landing-video-desc" class="landing-video-desc">설계정보 입력부터 3D 모델링, 철근배근, 도면작성, 수량산출까지의 흐름을 1분 동안 소개합니다. (음성 없음)</p>`;
  root.append(dialog);
  const video = dialog.querySelector('video')!;
  const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)');

  const open = (): void => {
    if (dialog.open) return;
    if (!video.currentSrc && !video.querySelector('source')) {
      const source = document.createElement('source');
      source.src = introVideoUrl;
      source.type = 'video/mp4';
      video.append(source);
      video.load();
    }
    dialog.showModal();
    dialog.querySelector<HTMLButtonElement>('.landing-video-close')!.focus();
    if (!reducedMotion?.matches) void video.play().catch(() => undefined);
  };
  const stop = (): void => {
    video.pause();
    if (video.readyState > 0) video.currentTime = 0;
  };
  const close = (restoreFocus = true): void => {
    if (!dialog.open) return;
    dialog.close();
    if (restoreFocus && trigger.isConnected && !root.hidden) trigger.focus();
  };

  trigger.addEventListener('click', open);
  dialog.querySelector('.landing-video-close')!.addEventListener('click', () => close());
  dialog.addEventListener('close', stop);
  dialog.addEventListener('cancel', (event) => { event.preventDefault(); close(); });
  // Clicking the backdrop (outside the panel box) closes the dialog.
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;
    const box = dialog.getBoundingClientRect();
    const inside = event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
    if (!inside) close();
  });
  return { open, close };
}