<script setup lang="ts">
type HomeUser = {
  username: string
  nickname?: string | null
  avatar?: string | null
  role: 'admin' | 'user' | string
  publicSlug?: string | null
}

defineProps<{
  user: HomeUser
}>()
</script>

<template>
  <div class="space-y-4">
    <section class="rounded-2xl border border-default bg-gradient-to-br from-primary/5 via-default to-elevated px-6 py-6 sm:px-8">
      <div class="grid gap-4 lg:grid-cols-3">
        <UCard class="ring-1 ring-default/60 lg:col-span-2">
          <div class="flex flex-wrap items-start justify-between gap-4">
            <div class="flex min-w-0 items-start gap-3">
              <UAvatar :src="user.avatar || undefined" :alt="user.username" size="lg" class="ring-1 ring-default" />
              <div class="min-w-0">
                <p class="text-xs font-medium text-muted">
                  当前用户
                </p>
                <p class="truncate text-lg font-semibold text-highlighted">
                  {{ user.nickname?.trim() || user.username }}
                </p>
                <NuxtLink
                  to="/me/profile"
                  class="block truncate text-sm text-muted transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                >
                  @{{ user.username }} · {{ user.role === 'admin' ? '管理员' : '用户' }}
                </NuxtLink>
                <NuxtLink
                  v-if="user.publicSlug"
                  :to="`/@${user.publicSlug}`"
                  target="_blank"
                  class="mt-1 block text-sm tabular-nums text-[#d46a31] transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                >
                  {{ `/@${user.publicSlug}` }}
                </NuxtLink>
                <NuxtLink
                  v-else
                  to="/me/profile"
                  class="mt-1 block text-sm text-muted transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                >
                  未设置公开主页地址（去设置）
                </NuxtLink>
              </div>
            </div>
            <div class="flex flex-wrap gap-2">
              <UButton to="/me" size="sm" icon="i-lucide-layout-dashboard">
                控制台
              </UButton>
              <UButton to="/me/profile" size="sm" color="neutral" variant="outline">
                编辑资料
              </UButton>
              <UButton
                v-if="user.publicSlug"
                :to="`/@${user.publicSlug}`"
                target="_blank"
                size="sm"
                color="neutral"
                variant="outline"
                icon="i-lucide-external-link"
              >
                公开主页
              </UButton>
            </div>
          </div>
        </UCard>

        <UCard>
          <p class="text-xs font-medium text-muted">
            管理与常用
          </p>
          <div class="mt-3 flex flex-wrap gap-2">
            <UButton to="/me/posts" size="xs" variant="soft">
              文章
            </UButton>
            <UButton to="/me/timeline" size="xs" variant="soft">
              时光机
            </UButton>
            <UButton to="/me/rss" size="xs" variant="soft">
              RSS
            </UButton>
            <UButton
              v-if="user.role === 'admin'"
              to="/me/admin/config"
              size="xs"
              color="primary"
              variant="soft"
            >
              应用配置
            </UButton>
            <UButton
              v-if="user.role === 'admin'"
              to="/me/admin/users"
              size="xs"
              color="primary"
              variant="soft"
            >
              用户管理
            </UButton>
          </div>
        </UCard>
      </div>
    </section>

    <UAlert
      v-if="!user.publicSlug"
      color="warning"
      variant="subtle"
      title="还没有公开主页地址"
      description="在「资料」中设置 public slug 后，访客即可通过 /@你的地址 访问你的公开内容。"
      icon="i-lucide-alert-circle"
    />
  </div>
</template>
