<script lang="ts">
  /**
   * SourceTextPanel — 학습 세션의 원문/어학 메타 표시 (read-only).
   *
   * 캔버스 옆 또는 위쪽에 깔린다. 트레이싱 모드(mode='trace')에선 캔버스가 직접
   * traceText 를 배경으로 그리므로 여기선 별도 표시 안 해도 되지만, 표시 보존.
   */

  type Mode = 'copy' | 'trace' | 'blank-repeat' | 'dictation' | 'shadowing' | 'quiz' | 'flashcard';

  interface Props {
    sourceText?: string | null;
    sourcePage?: number | null;
    metadata?: Record<string, unknown> | null;
    mode?: Mode;
    studyType?: 'certification' | 'language';
  }
  let { sourceText, sourcePage, metadata, mode, studyType }: Props = $props();

  let m = $derived((metadata ?? {}) as Record<string, string>);
</script>

<div class="flex flex-col gap-2 p-3 border-b border-default bg-surface">
  {#if sourceText}
    <div>
      <div class="text-xs text-dim mb-1">
        원문 {sourcePage ? `(p.${sourcePage})` : ''}
      </div>
      <div class="text-sm text-text whitespace-pre-wrap break-words">{sourceText}</div>
    </div>
  {:else}
    <div class="text-xs text-dim">원문 미설정 — 메타 편집기에서 입력</div>
  {/if}

  {#if studyType === 'language' && metadata}
    <div class="grid grid-cols-2 gap-x-3 gap-y-1 text-xs mt-1 pt-2 border-t border-default">
      {#if m.reading}
        <div><span class="text-dim">reading:</span> <span class="text-text">{m.reading}</span></div>
      {/if}
      {#if m.meaning}
        <div><span class="text-dim">meaning:</span> <span class="text-text">{m.meaning}</span></div>
      {/if}
      {#if m.unit_type}
        <div><span class="text-dim">unit:</span> <span class="text-text">{m.unit_type}</span></div>
      {/if}
      {#if m.romaji}
        <div><span class="text-dim">romaji:</span> <span class="text-text">{m.romaji}</span></div>
      {/if}
      {#if m.example_sentence}
        <div class="col-span-2">
          <span class="text-dim">example:</span> <span class="text-text">{m.example_sentence}</span>
        </div>
      {/if}
    </div>
  {/if}

  {#if mode === 'trace' && sourceText}
    <div class="text-[10px] text-dim mt-1">
      트레이싱 모드 — 캔버스 배경에 회색으로 깔린 원문 위에 펜으로 덮어쓰세요.
    </div>
  {/if}
</div>
