<script>
  // 관련 문서 (유사도) — 문서 레벨 임베딩 KNN. 자기완결: docId 받아 /related 조회.
  import { onMount } from 'svelte';
  import { api } from '$lib/api';

  let { documentId } = $props();
  let items = $state([]);
  let loaded = $state(false);

  const KIND = { law: '법령', guide: '지침', paper: '논문', standard: '표준', incident: '사례' };

  onMount(async () => {
    try {
      const r = await api(`/documents/${documentId}/related?limit=6`);
      items = r?.related ?? [];
    } catch (e) { /* silent */ }
    finally { loaded = true; }
  });
</script>

{#if items.length}
  <div class="rel">
    <div class="lab">관련 문서</div>
    {#each items as it (it.id)}
      <a class="ri" href={`/documents/${it.id}`}>
        <span class="rt">{it.title}</span>
        <span class="rm">
          {#if it.material_type && KIND[it.material_type]}<span class="kind">{KIND[it.material_type]}</span>{/if}
          <span class="rs">{Math.round((it.sim ?? 0) * 100)}</span>
        </span>
      </a>
    {/each}
  </div>
{/if}

<style>
  .rel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px; }
  .lab { font-size: 10.5px; font-weight: 700; color: var(--text-dim); letter-spacing: .4px; margin-bottom: 8px; }
  .ri { display: flex; align-items: baseline; gap: 8px; padding: 5px 6px; border-radius: 7px; text-decoration: none; }
  .ri:hover { background: var(--surface-hover, #ecf0e8); }
  .rt { flex: 1; font-size: 12px; line-height: 1.4; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rm { flex-shrink: 0; display: flex; align-items: center; gap: 5px; }
  .kind { font-size: 9px; font-weight: 700; color: var(--accent-hover, #3d7256); background: #e3efe2; border: 1px solid #cfe3cd; border-radius: 4px; padding: 0 4px; }
  .rs { font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; color: var(--faint, #9aa090); }
</style>
