<script>
  // /audio/[id] — 단건 오디오 재생 + 전사 세그먼트.

  import { page } from '$app/stores';
  import { onMount } from 'svelte';
  import { api } from '$lib/api';
  import { addToast } from '$lib/stores/toast';
  import AudioPlayer from '$lib/components/AudioPlayer.svelte';
  import { ArrowLeft } from 'lucide-svelte';
  import { goto } from '$app/navigation';

  let docId = $derived(Number($page.params.id));
  let doc = $state(null);
  let loading = $state(true);

  onMount(load);

  $effect(() => {
    if (docId) load();
  });

  async function load() {
    loading = true;
    try {
      doc = await api(`/documents/${docId}`);
    } catch (err) {
      addToast('error', '문서를 불러올 수 없습니다');
      doc = null;
    } finally {
      loading = false;
    }
  }
</script>

<div class="flex flex-col h-full">
  <header class="flex items-center gap-2 px-4 py-2 border-b border-default">
    <button
      type="button"
      class="p-1 rounded hover:bg-surface-hover"
      onclick={() => goto('/audio')}
      aria-label="목록으로"
    >
      <ArrowLeft size={18} />
    </button>
    <h1 class="font-medium truncate flex-1">
      {doc?.title ?? (loading ? '불러오는 중…' : '(제목 없음)')}
    </h1>
  </header>

  <div class="flex-1 overflow-hidden">
    {#if loading}
      <p class="p-4 text-muted">불러오는 중…</p>
    {:else if !doc}
      <p class="p-4 text-error">문서를 찾을 수 없습니다.</p>
    {:else if doc.category !== 'audio'}
      <p class="p-4 text-error">이 문서는 오디오가 아닙니다 (category={doc.category}).</p>
    {:else}
      <AudioPlayer docId={doc.id} />
    {/if}
  </div>
</div>
