<script setup>
definePageMeta({
  layout: 'post'
})

const previewPost = ref(null)
const previewError = ref('')

/**
 * 미리보기 저장 값을 읽어 온다
 * @returns {void}
 */
const loadPreviewPost = () => {
  const rawPreview = localStorage.getItem('SORI_ADMIN_POST_PREVIEW')

  if (!rawPreview) {
    previewError.value = '미리보기 데이터가 없습니다.'
    return
  }

  try {
    previewPost.value = JSON.parse(rawPreview)
  } catch {
    previewError.value = '미리보기 데이터를 읽지 못했습니다.'
  }
}

onMounted(loadPreviewPost)
</script>

<template>
  <div class="admin-post-preview">
    <div class="admin-post-preview__banner mb-5 rounded border border-line bg-white px-4 py-3 text-sm font-semibold text-ink">
      관리자 미리보기
    </div>

    <p v-if="previewError" class="admin-post-preview__error rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
      {{ previewError }}
    </p>

    <ContentRenderer v-else-if="previewPost">
      <ProseHeaderCard>
        <p class="post-detail__eyebrow text-sm uppercase text-white/70">
          PREVIEW
        </p>
        <h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
          {{ previewPost.title || '제목 없음' }}
        </h1>
      </ProseHeaderCard>

      <ContentMarkdownRenderer class="post-detail__content" :content="previewPost.content || ''" />
    </ContentRenderer>
  </div>
</template>
