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

const { data: posts } = await useFetch('/admin/api/posts', {
  default: () => []
})

const publishedCount = computed(() => posts.value.filter((post) => post.status === 'published').length)
const draftCount = computed(() => posts.value.filter((post) => post.status === 'draft').length)
</script>

<template>
  <section class="admin-dashboard">
    <div class="admin-dashboard__header border-b border-line bg-paper p-6">
      <p class="admin-dashboard__eyebrow text-xs font-semibold uppercase text-muted">
        Admin
      </p>
      <h1 class="admin-dashboard__title mt-2 text-3xl font-semibold">
        대시보드
      </h1>
    </div>
    <div class="admin-dashboard__body grid gap-4 bg-paper p-6 text-sm text-muted md:grid-cols-3">
      <section class="admin-dashboard__metric border border-line bg-white p-4">
        <p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
          Posts
        </p>
        <strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
          {{ posts.length }}
        </strong>
      </section>
      <section class="admin-dashboard__metric border border-line bg-white p-4">
        <p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
          Published
        </p>
        <strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
          {{ publishedCount }}
        </strong>
      </section>
      <section class="admin-dashboard__metric border border-line bg-white p-4">
        <p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
          Draft
        </p>
        <strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
          {{ draftCount }}
        </strong>
      </section>
    </div>
  </section>
</template>
