<script>
  // Phase E.1 — 얇은 wrapper로 축소.
  // 기존 344줄 → editors/* 7개로 분할. 이 파일은 header + 조합만 담당.
  // DocumentMetaRail (D.1) 과 documents/[id]/+page.svelte (E.2) 둘 다
  // 같은 editors/* 를 재사용한다.
  import { X, ExternalLink } from 'lucide-svelte';
  import FormatIcon from './FormatIcon.svelte';
  import NoteEditor from './editors/NoteEditor.svelte';
  import EditUrlEditor from './editors/EditUrlEditor.svelte';
  import TagsEditor from './editors/TagsEditor.svelte';
  import AIClassificationEditor from './editors/AIClassificationEditor.svelte';
  import FileInfoView from './editors/FileInfoView.svelte';
  import ProcessingStatusView from './editors/ProcessingStatusView.svelte';
  import DocumentDangerZone from './editors/DocumentDangerZone.svelte';

  let { doc, onclose, ondelete = () => {} } = $props();
</script>

<aside class="h-full w-full flex flex-col bg-sidebar border-l border-default overflow-y-auto">
  <!-- 헤더 -->
  <div class="flex items-center justify-between px-4 py-3 border-b border-default shrink-0">
    <div class="flex items-center gap-2 min-w-0">
      <FormatIcon format={doc.file_format} size={16} />
      <span class="text-sm font-medium text-text truncate">{doc.title || '제목 없음'}</span>
    </div>
    <div class="flex items-center gap-1 shrink-0">
      <a
        href="/documents/{doc.id}"
        class="p-1 rounded hover:bg-surface text-dim hover:text-text"
        title="전체 보기"
        aria-label="전체 보기"
      >
        <ExternalLink size={14} />
      </a>
      <button
        type="button"
        onclick={onclose}
        class="p-1 rounded hover:bg-surface text-dim hover:text-text"
        aria-label="닫기"
      >
        <X size={16} />
      </button>
    </div>
  </div>

  <!-- 조합 -->
  <div class="flex-1 p-4 space-y-4">
    <NoteEditor {doc} />
    <EditUrlEditor {doc} />
    <TagsEditor {doc} />
    <AIClassificationEditor {doc} />
    <FileInfoView {doc} />
    <ProcessingStatusView {doc} />
    <div class="pt-2 border-t border-default">
      <DocumentDangerZone {doc} {ondelete} />
    </div>
  </div>
</aside>
