<script>
  // Phase E.1 — 문서 삭제 영역. ConfirmDialog 프리미티브 사용.
  import { Trash2 } from 'lucide-svelte';
  import { api } from '$lib/api';
  import { addToast } from '$lib/stores/toast';
  import { ui } from '$lib/stores/uiState.svelte';
  import Button from '$lib/components/ui/Button.svelte';
  import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';

  let { doc, ondelete = () => {} } = $props();

  let deleting = $state(false);

  // doc id 기반으로 modal id를 고유하게 해서, 여러 danger zone이 동시에
  // 있어도 충돌하지 않게 한다 (예: detail 페이지 + rail).
  let modalId = $derived(`doc-delete-${doc?.id ?? 'unknown'}`);

  async function confirm() {
    if (!doc) return;
    deleting = true;
    try {
      await api(`/documents/${doc.id}?delete_file=true`, { method: 'DELETE' });
      addToast('success', '문서 삭제됨');
      ondelete();
    } catch (err) {
      addToast('error', '삭제 실패');
    } finally {
      deleting = false;
    }
  }
</script>

<div>
  <Button
    variant="ghost"
    size="sm"
    icon={Trash2}
    onclick={() => ui.openModal(modalId)}
    class="text-dim hover:text-error"
  >
    문서 삭제
  </Button>
</div>

<ConfirmDialog
  id={modalId}
  title="문서 삭제"
  message="원본 파일과 모든 메타데이터(메모/태그/분류)가 함께 삭제됩니다. 되돌릴 수 없습니다."
  confirmLabel="삭제"
  tone="danger"
  loading={deleting}
  onconfirm={confirm}
/>
