<script setup lang="ts">
import { useAuthSession } from '../../composables/useAuthSession'

const { user } = useAuthSession()

usePageTitle('控制台')
const { fetchData } = useClientApi()

type ProfilePayload = {
  profile: { publicSlug: string | null }
}

const publicSlug = ref<string | null>(null)

onMounted(async () => {
  try {
    const { profile } = await fetchData<ProfilePayload>('/api/me/profile')
    publicSlug.value = profile.publicSlug
  } catch {
    publicSlug.value = null
  }
})
</script>

<template>
  <UContainer class="py-8 space-y-6">
    <div>
      <h1 class="text-2xl font-semibold">
        控制台
      </h1>
      <p class="text-sm text-muted mt-1">
        你好，{{ user?.username }}（{{ user?.role }}）
      </p>
      <UButton
        v-if="publicSlug"
        :to="`/@${publicSlug}`"
        class="mt-3"
        variant="outline"
        target="_blank"
      >
        查看我的公开主页
      </UButton>
    </div>

    <div class="grid gap-3 sm:grid-cols-2">
      <UCard>
        <div class="font-medium">
          个人资料
        </div>
        <p class="text-sm text-muted mt-1">
          公开链接、简介、社交链接
        </p>
        <UButton to="/me/profile" class="mt-3" size="sm">
          编辑
        </UButton>
      </UCard>
      <UCard>
        <div class="font-medium">
          文章
        </div>
        <p class="text-sm text-muted mt-1">
          Markdown 写作与可见性
        </p>
        <UButton to="/me/posts" class="mt-3" size="sm">
          管理
        </UButton>
      </UCard>
      <UCard>
        <div class="font-medium">
          时光机
        </div>
        <UButton to="/me/timeline" class="mt-3" size="sm">
          管理
        </UButton>
      </UCard>
      <UCard>
        <div class="font-medium">
          RSS
        </div>
        <UButton to="/me/rss" class="mt-3" size="sm">
          收件箱
        </UButton>
      </UCard>
      <UCard>
        <div class="font-medium">
          媒体
        </div>
        <p class="text-sm text-muted mt-1">
          资源库上传与复制链接；孤儿图片审查与清理。
        </p>
        <UButton to="/me/media" class="mt-3" size="sm">
          进入
        </UButton>
      </UCard>
      <UCard v-if="user?.role === 'admin'">
        <div class="font-medium">
          管理员中心
        </div>
        <p class="text-sm text-muted mt-1">
          统一进入应用配置、用户管理、媒体存储校验
        </p>
        <UButton to="/me/admin" class="mt-3" size="sm">
          进入
        </UButton>
      </UCard>
    </div>
  </UContainer>
</template>
