<script>
  // Phase E.1 — AI 분류 결과 표시.
  // 현재는 read-only. 향후 phase에서 inline select로 override 가능하게 확장.
  import Badge from '$lib/components/ui/Badge.svelte';

  let { doc } = $props();

  let parts = $derived(doc?.ai_domain ? doc.ai_domain.split('/') : []);
  let confidenceTone = $derived.by(() => {
    const c = doc?.ai_confidence ?? 0;
    if (c >= 0.85) return 'success';
    if (c >= 0.6) return 'warning';
    return 'error';
  });
</script>

{#if doc?.ai_domain}
  <div>
    <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">분류</h4>
    <!-- domain breadcrumb -->
    <div class="flex flex-wrap items-center gap-1 mb-2">
      {#each parts as part, i}
        {#if i > 0}<span class="text-[10px] text-faint">›</span>{/if}
        <span class="text-xs text-accent">{part}</span>
      {/each}
    </div>
    <div class="flex items-center gap-1.5 flex-wrap">
      {#if doc.document_type}
        <Badge tone="accent" size="sm">{doc.document_type}</Badge>
      {/if}
      {#if doc.ai_confidence}
        <Badge tone={confidenceTone} size="sm">
          {(doc.ai_confidence * 100).toFixed(0)}%
        </Badge>
      {/if}
      {#if doc.importance && doc.importance !== 'medium'}
        <Badge tone={doc.importance === 'high' ? 'error' : 'neutral'} size="sm">
          {doc.importance}
        </Badge>
      {/if}
      <!-- B-3: tier 배지 (triage=4B 흰/deep=26B 파랑) -->
      {#if doc.ai_analysis_tier === 'deep'}
        <Badge tone="accent" size="sm" title="26B 가 깊은 요약까지 작성">깊이</Badge>
      {:else if doc.ai_analysis_tier === 'triage'}
        <Badge tone="neutral" size="sm" title="4B 짧은 분석만 완료">짧음</Badge>
      {/if}
    </div>
  </div>
{/if}
