<script>
  // HTML5 비디오 플레이어 (direct play 전용).
  // needsConversion=true 이면 재생 대신 안내 카드 표시 (§3 채널별 정책).

  import { getAccessToken } from '$lib/api';

  let { docId, needsConversion = false, fileFormat = '', title = '' } = $props();

  let token = $derived(getAccessToken());
  let src = $derived(`/api/documents/${docId}/file?token=${token}`);
  let thumbSrc = $derived(`/api/video/${docId}/thumbnail?token=${token}`);
</script>

{#if needsConversion}
  <div class="flex flex-col items-center justify-center h-full p-8 bg-surface text-center">
    <div class="max-w-md space-y-3">
      <p class="text-lg font-semibold">재생할 수 없는 포맷입니다</p>
      <p class="text-sm text-muted">
        {fileFormat ? `.${fileFormat}` : '현재 파일'} 포맷은 브라우저가 직접 재생할 수 없어 보관만 하고 있습니다.
      </p>
      <p class="text-sm text-muted">
        재생하려면 원본을 <code class="px-1.5 py-0.5 bg-surface-hover rounded">mp4 (H.264/AAC)</code> 또는
        <code class="px-1.5 py-0.5 bg-surface-hover rounded">webm (VP9)</code> 으로 변환 후 다시 올리세요.
      </p>
      {#if title}
        <p class="text-xs text-muted pt-2">파일: {title}</p>
      {/if}
    </div>
  </div>
{:else}
  <div class="flex flex-col h-full bg-black">
    <video
      {src}
      controls
      preload="metadata"
      poster={thumbSrc}
      class="w-full h-full object-contain"
    >
      <track kind="captions" />
    </video>
  </div>
{/if}
