<template>
  <div class="home-container">
    <!-- 顶部 Banner -->
    <div class="home-height">
      <div class="home-banner">
        <div class="neon-sun-wrapper">
          <div class="neon-sun"></div>
          <!-- Solar Flares -->
          <div class="solar-flare" style="--angle: -25deg; --delay: 0s"></div>
          <div class="solar-flare" style="--angle: -15deg; --delay: 2.1s"></div>
          <div class="solar-flare" style="--angle: -5deg; --delay: 1.3s"></div>
          <div class="solar-flare" style="--angle: 5deg; --delay: 3.5s"></div>
          <div class="solar-flare" style="--angle: 18deg; --delay: 0.8s"></div>
          <div class="solar-flare" style="--angle: 28deg; --delay: 2.9s"></div>
        </div>
        
        <!-- Tech Elements -->
        <div class="tech-grid"></div>

        <InteractiveTechBackground />

        <div class="watermark">51AIapi</div>
        <div class="home-banner-content">
          <div class="main-title">一句话 做AI</div>
          <div class="sub-title">该网站为测试网站，本网站仅供学习参考</div>
        </div>
        
      </div>
    </div>

    <!-- New Homepage Sections -->
    <div class="home-section-container">
      <!-- 首页广场 -->
      <HomePlaza
        v-if="plazaArticles.length"
        :articles="plazaArticles"
        :is-logged-in="isLoggedIn"
        @like-changed="syncLikeState"
      />
      <div v-else-if="loadingHomeFeatured" class="loading-card">
        首页推送加载中...
      </div>

      <!-- 更多精选文章 -->
      <div v-if="moreFeaturedArticles.length > 0" class="more-featured-section">
        <div class="section-header">
          <div class="section-title">更多精选文章</div>
        </div>
        <div class="cards-grid-responsive">
          <MarketCard
            v-for="article in moreFeaturedArticles"
            :key="article.slug"
            :slug="article.slug"
            :title="article.title"
            :cover="article.cover || defaultCover"
            :tags="article.tagList"
            :owner-name="article.author?.username"
            :owner-avatar="article.author?.image || undefined"
            :views="article.views"
            :likes="article.favoritesCount || 0"
            :favorited="article.favorited"
            :detail-href="`/articles/${article.slug}`"
            :created-at="article.createdAt"
            @toggle-like="toggleLike(article)"
          />
        </div>
      </div>

      <!-- 按标签浏览 -->
      <div v-if="showTagsSection" class="tags-section">
        <div class="section-header">
          <div class="section-title">按标签浏览</div>
        </div>
        
        <div class="tags-tabs">
          <button
            v-for="tag in allTags"
            :key="tag"
            class="tag-pill"
            :class="{ active: activeTag === tag }"
            @click="activeTag = tag"
          >
            {{ tag }}
          </button>
        </div>

        <div class="cards-grid-responsive">
            <MarketCard
              v-for="article in filteredByTag"
              :key="article.slug"
              :slug="article.slug"
              :title="article.title"
              :cover="article.cover || defaultCover"
              :tags="article.tagList"
              :owner-name="article.author?.username"
              :owner-avatar="article.author?.image || undefined"
              :views="article.views"
              :likes="article.favoritesCount || 0"
              :favorited="article.favorited"
              :detail-href="`/articles/${article.slug}`"
              :created-at="article.createdAt"
              @toggle-like="toggleLike(article)"
            />
          </div>
        </div>
      <div v-else-if="loadingTagArticles" class="tags-section">
        <div class="section-header">
          <div class="section-title">按标签浏览</div>
        </div>
        <div class="empty">文章加载中...</div>
      </div>
    </div>

    <!-- Admin Panel -->
    <div v-if="showAdminPanel" class="admin-panel-container">
      <div class="admin-stats-grid">
        <div class="admin-stat-card">
          <div class="admin-stat-label">用户总数</div>
          <div class="admin-stat-value">{{ adminStats?.users ?? 0 }}</div>
        </div>
        <div class="admin-stat-card">
          <div class="admin-stat-label">角色数</div>
          <div class="admin-stat-value">{{ adminStats?.roles ?? 0 }}</div>
        </div>
        <div class="admin-stat-card">
          <div class="admin-stat-label">文章总数</div>
          <div class="admin-stat-value">{{ adminStats?.articles ?? 0 }}</div>
        </div>
        <div class="admin-stat-card">
          <div class="admin-stat-label">今日新增</div>
          <div class="admin-stat-value">{{ adminStats?.published_today ?? 0 }}</div>
        </div>
        <div class="admin-stat-card">
          <div class="admin-stat-label">总浏览</div>
          <div class="admin-stat-value">{{ adminStats?.total_views ?? 0 }}</div>
        </div>
      </div>

      <div class="admin-tabs">
      <button
        v-for="tab in adminTabs"
        :key="tab.value"
        type="button"
        class="admin-tab"
        :class="{ active: adminActiveTab === tab.value }"
        @click="adminActiveTab = tab.value"
      >
        {{ tab.label }}
      </button>
    </div>

    <div v-if="adminActiveTab === 'users'" class="admin-section">
      <div class="admin-section-header">
        <div>
          <div class="admin-section-title">用户管理</div>
          <div class="admin-section-sub">
            共 {{ adminUsersTotal }} 人
          </div>
        </div>
        <div class="admin-filter-row">
          <input
            v-model="adminFilters.userSearch"
            class="admin-input"
            type="text"
            placeholder="搜索用户名 / 邮箱"
          />
          <select
            v-model="adminFilters.userRoleId"
            class="admin-input"
          >
            <option value="">全部角色</option>
            <option
              v-for="role in adminRoles"
              :key="role.id"
              :value="role.id"
            >
              {{ role.name }}
            </option>
          </select>
          <button type="button" class="admin-btn" @click="loadAdminUsers">
            查询
          </button>
        </div>
      </div>

      <div class="admin-two-columns">
        <div class="admin-card">
          <div class="admin-card-title">新建用户</div>
          <form class="admin-form" @submit.prevent="submitNewUser">
            <label>用户名</label>
            <input v-model="newUserForm.username" class="admin-input" type="text" required />

            <label>邮箱</label>
            <input v-model="newUserForm.email" class="admin-input" type="email" required />

            <label>初始密码</label>
            <input v-model="newUserForm.password" class="admin-input" type="password" required />

            <label>简介</label>
            <textarea v-model="newUserForm.bio" class="admin-input" rows="2" />

            <label>绑定角色</label>
            <div class="admin-role-checkboxes">
              <label v-for="role in adminRoles" :key="role.id">
                <input
                  type="checkbox"
                  :value="role.id"
                  v-model="newUserForm.roleIds"
                />
                {{ role.name }}
              </label>
            </div>

            <button
              class="admin-btn primary"
              type="submit"
              :disabled="adminLoading.createUser"
            >
              {{ adminLoading.createUser ? '创建中...' : '创建用户' }}
            </button>
          </form>
        </div>

        <div class="admin-card admin-table-card">
          <div class="admin-card-title">全部用户</div>
          <div v-if="adminLoading.users" class="admin-empty">加载中...</div>
          <div v-else-if="adminUsers.length === 0" class="admin-empty">暂无用户</div>
          <div v-else class="admin-table-wrapper">
            <table class="admin-table">
              <thead>
                <tr>
                  <th>用户</th>
                  <th>邮箱</th>
                  <th>角色</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="user in adminUsers" :key="user.id">
                  <td>
                    <template v-if="editingUser?.id === user.id">
                      <input
                        v-model="editingUser.username"
                        class="admin-input"
                        type="text"
                      />
                    </template>
                    <template v-else>
                      <div class="admin-user-name">{{ user.username }}</div>
                      <div class="admin-user-meta">
                        创建于：{{ formatDate(user.created_at) }}
                      </div>
                    </template>
                  </td>
                  <td>
                    <template v-if="editingUser?.id === user.id">
                      <input
                        v-model="editingUser.email"
                        class="admin-input"
                        type="email"
                      />
                    </template>
                    <template v-else>
                      {{ user.email }}
                    </template>
                  </td>
                  <td>
                    <template v-if="editingUser?.id === user.id">
                      <div class="admin-role-checkboxes">
                        <label
                          v-for="role in adminRoles"
                          :key="role.id"
                        >
                          <input
                            type="checkbox"
                            :value="role.id"
                            v-model="editingUser.roleIds"
                          />
                          {{ role.name }}
                        </label>
                      </div>
                    </template>
                    <template v-else>
                      <div class="admin-role-tags">
                        <span v-for="role in user.roles" :key="role.id">
                          {{ role.name }}
                        </span>
                        <span v-if="!user.roles.length">--</span>
                      </div>
                    </template>
                  </td>
                  <td class="admin-actions">
                    <template v-if="editingUser?.id === user.id">
                      <button type="button" class="admin-btn primary" @click="saveUserEdit">
                        保存
                      </button>
                      <button type="button" class="admin-btn" @click="cancelUserEdit">
                        取消
                      </button>
                    </template>
                    <template v-else>
                      <button type="button" class="admin-btn primary" @click="startUserEdit(user)">
                        编辑
                      </button>
                      <button
                        type="button"
                        class="admin-btn danger"
                        @click="deleteAdminUser(user)"
                      >
                        删除
                      </button>
                    </template>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="adminActiveTab === 'roles'" class="admin-section">
      <div class="admin-two-columns">
        <div class="admin-card">
          <div class="admin-card-title">
            {{ editingRole.id ? '编辑角色' : '新建角色' }}
          </div>
          <form class="admin-form" @submit.prevent="submitRoleForm">
            <label>角色名</label>
            <input v-model="editingRole.name" class="admin-input" type="text" required />

            <label>描述</label>
            <textarea v-model="editingRole.description" class="admin-input" rows="2" />

            <label>权限（用逗号隔开）</label>
            <input
              v-model="editingRole.permissionsInput"
              class="admin-input"
              type="text"
              placeholder="如：articles:write, users:read"
            />

            <div class="admin-form-buttons">
              <button class="admin-btn primary" type="submit" :disabled="adminLoading.saveRole">
                {{ editingRole.id ? '保存修改' : '创建角色' }}
              </button>
              <button
                v-if="editingRole.id"
                type="button"
                class="admin-btn"
                @click="resetRoleForm"
              >
                取消
              </button>
            </div>
          </form>
        </div>

        <div class="admin-card admin-table-card">
          <div class="admin-card-title">角色列表</div>
          <div v-if="adminLoading.roles" class="admin-empty">加载中...</div>
          <div v-else-if="adminRoles.length === 0" class="admin-empty">暂无角色</div>
          <ul v-else class="admin-role-list">
            <li v-for="role in adminRoles" :key="role.id">
              <div>
                <div class="admin-role-name">{{ role.name }}</div>
                <div class="admin-role-desc">{{ role.description || '未填写描述' }}</div>
                <div class="admin-role-perms">
                  权限：{{ role.permissions.join(', ') || '未设置' }}
                </div>
              </div>
              <div class="admin-actions">
                <button type="button" class="admin-btn primary" @click="startRoleEdit(role)">
                  编辑
                </button>
                <button
                  type="button"
                  class="admin-btn danger"
                  @click="deleteRole(role)"
                >
                  删除
                </button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div v-else-if="adminActiveTab === 'home_push'" class="admin-section">
      <div class="admin-section-header">
        <div>
          <div class="admin-section-title">首页推送设定</div>
          <div class="admin-section-sub">配置首页“广场”和“精选”模块的文章（前10条）</div>
        </div>
      </div>
      
      <div class="admin-card admin-table-card">
        <div class="admin-table-wrapper">
          <table class="admin-table">
            <thead>
              <tr>
                <th style="width: 60px">顺序</th>
                <th>文章标题</th>
                <th>作者</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(article, index) in homeFeaturedArticles" :key="article.slug">
                <td>
                  <span class="admin-badge">{{ index + 1 }}</span>
                </td>
                <td>
                  <div class="admin-article-title">{{ article.title }}</div>
                  <div class="admin-user-meta">{{ article.slug }}</div>
                </td>
                <td>{{ article.author?.username }}</td>
                <td>
                  <span v-if="index < 5" class="status-tag success">广场列表</span>
                  <span v-else class="status-tag warning">更多精选</span>
                </td>
                <td class="admin-actions">
                  <button 
                    type="button" 
                    class="admin-btn"
                    :disabled="index === 0"
                    @click="moveArticle(index, -1)"
                  >
                    ↑
                  </button>
                  <button 
                    type="button" 
                    class="admin-btn"
                    :disabled="index === homeFeaturedArticles.length - 1"
                    @click="moveArticle(index, 1)"
                  >
                    ↓
                  </button>
                  <button type="button" class="admin-btn danger" @click="removeFeatured(index)">
                    移除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="admin-card-footer">
          <p class="admin-hint">提示：实际项目中此处应连接后端 API 保存配置。</p>
        </div>
      </div>
    </div>

    <div v-else class="admin-section">
      <div class="admin-section-header">
        <div>
          <div class="admin-section-title">文章管理</div>
          <div class="admin-section-sub">批量管理所有文章</div>
        </div>
        <div class="admin-filter-row">
          <input
            v-model="adminFilters.articleSearch"
            class="admin-input"
            type="text"
            placeholder="搜索标题 / 描述"
          />
          <input
            v-model="adminFilters.articleAuthor"
            class="admin-input"
            type="text"
            placeholder="作者用户名"
          />
          <button type="button" class="admin-btn" @click="loadAdminArticles">
            查询
          </button>
        </div>
      </div>

      <div class="admin-card admin-table-card">
        <div v-if="adminLoading.articles" class="admin-empty">加载中...</div>
        <div v-else-if="adminArticles.length === 0" class="admin-empty">暂无文章</div>
        <div v-else class="admin-table-wrapper">
          <table class="admin-table">
            <thead>
              <tr>
                <th>标题</th>
                <th>作者</th>
                <th>浏览</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="article in adminArticles" :key="article.slug">
                <td>
                  <template v-if="articleEdit?.slug === article.slug">
                    <input
                      v-model="articleEdit.title"
                      class="admin-input"
                      type="text"
                    />
                    <textarea
                      v-model="articleEdit.description"
                      class="admin-input"
                      rows="2"
                    />
                  </template>
                  <template v-else>
                    <div class="admin-article-title">{{ article.title }}</div>
                    <div class="admin-user-meta">Slug：{{ article.slug }}</div>
                  </template>
                </td>
                <td>{{ article.author?.username || '未知' }}</td>
                <td>{{ article.views ?? 0 }}</td>
                <td class="admin-actions">
                  <template v-if="articleEdit?.slug === article.slug">
                    <button type="button" class="admin-btn primary" @click="saveArticleEdit">
                      保存
                    </button>
                    <button type="button" class="admin-btn" @click="cancelArticleEdit">
                      取消
                    </button>
                  </template>
                  <template v-else>
                    <button type="button" class="admin-btn primary" @click="startArticleEdit(article)">
                      编辑
                    </button>
                    <button
                      type="button"
                      class="admin-btn danger"
                      @click="deleteAdminArticle(article)"
                    >
                      删除
                    </button>
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, reactive, onMounted, onActivated, onBeforeUnmount } from 'vue'
import { navigateTo, useAsyncData } from '#app'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { useAuth } from '@/composables/useAuth'
import { useAuthToken, useApi } from '@/composables/useApi'
import MarketCard from '../components/home/MarketCard.vue'
import InteractiveTechBackground from '../components/home/InteractiveTechBackground.vue'
import HomePlaza from '../components/home/HomePlaza.vue'

const adminTabs = [
  { label: '用户管理', value: 'users' },
  { label: '角色管理', value: 'roles' },
  { label: '文章管理', value: 'articles' },
  { label: '首页推送', value: 'home_push' },
] as const

const route = useRoute()

const homeFeaturedArticles = ref<ArticleItem[]>([])
const taggedArticles = ref<ArticleItem[]>([])
const activeTag = ref('全部')

const api = useApi()

// GET /api/home-featured-articles：首页推送前 10 条
const { data: homeFeaturedRes, pending: loadingHomeFeatured } = useAsyncData(
  'home-featured-articles',
  () => api.get('/home-featured-articles'),
  { server: false },
)

watch(homeFeaturedRes, (res: any) => {
  const list = Array.isArray(res?.articles) ? res.articles : []
  homeFeaturedArticles.value = list.slice(0, 10)
  // 数据加载完成后再尝试恢复滚动
  requestAnimationFrame(() => restoreScrollPosition())
})

const plazaArticles = computed(() => homeFeaturedArticles.value.slice(0, 5))
const moreFeaturedArticles = computed(() => homeFeaturedArticles.value.slice(5, 10))

// GET /api/articles：标签列表 + 按标签浏览
const {
  data: tagRes,
  pending: loadingTagArticles,
} = useAsyncData(
  'tag-articles',
  () => api.get('/articles', { limit: 60, offset: 0 }),
  { server: false }
)

watch(tagRes, (res: any) => {
  taggedArticles.value = Array.isArray(res?.articles) ? res.articles : []
  requestAnimationFrame(() => restoreScrollPosition())
})

const allTags = computed(() => {
  const set = new Set<string>()
  taggedArticles.value.forEach((article) => {
    article.tagList?.forEach((tag) => set.add(tag))
  })
  const list = Array.from(set)
  return list.length ? ['全部', ...list] : []
})

watch(allTags, (tags) => {
  if (!tags.length) {
    activeTag.value = ''
    return
  }
  if (!tags.includes(activeTag.value)) {
    activeTag.value = tags[0]
  }
})

const filteredByTag = computed(() => {
  if (!taggedArticles.value.length) return []
  if (!activeTag.value || activeTag.value === '全部') return taggedArticles.value
  return taggedArticles.value.filter((article) => article.tagList?.includes(activeTag.value))
})

const showTagsSection = computed(() => allTags.value.length > 0 && taggedArticles.value.length > 0)

async function toggleLike(article: ArticleItem): Promise<void> {
  if (!article?.slug) return
  if (!token.value) {
    await navigateTo('/login')
    return
  }
  try {
    if (article.favorited) {
      await api.del(`/articles/${article.slug}/favorite`)
      article.favorited = false
      article.favoritesCount = Math.max(0, (article.favoritesCount ?? 1) - 1)
      syncLikeState({ slug: article.slug, favorited: false, favoritesCount: article.favoritesCount ?? 0 })
    } else {
      await api.post(`/articles/${article.slug}/favorite`)
      article.favorited = true
      article.favoritesCount = (article.favoritesCount ?? 0) + 1
      syncLikeState({ slug: article.slug, favorited: true, favoritesCount: article.favoritesCount ?? 0 })
    }
  } catch (err) {
    console.error('[Home] toggle like failed', err)
  }
}

function syncLikeState(payload: { slug: string; favorited: boolean; favoritesCount: number }): void {
  const { slug, favorited, favoritesCount } = payload
  const apply = (list: ArticleItem[]) =>
    list.map((it) =>
      it.slug === slug
        ? { ...it, favorited, favoritesCount, likes: favoritesCount }
        : it,
    )
  homeFeaturedArticles.value = apply(homeFeaturedArticles.value)
  taggedArticles.value = apply(taggedArticles.value)
}

// -------- 滚动位置存取（防止返回首页时回到顶部） --------
const HOME_SCROLL_KEY = 'scroll:/'
let scrollRaf: number | null = null
let restoredOnce = false

function readSavedScroll(): { left: number; top: number } | null {
  if (!process.client) return null
  try {
    const raw = sessionStorage.getItem(HOME_SCROLL_KEY)
    if (!raw) return null
    const pos = JSON.parse(raw)
    if (typeof pos?.left === 'number' && typeof pos?.top === 'number') return pos
  } catch (err) {
    console.warn('[Home] read scroll failed', err)
  }
  return null
}

function saveHomeScroll(): void {
  if (!process.client) return
  try {
    const pos = { left: window.scrollX, top: window.scrollY }
    sessionStorage.setItem(HOME_SCROLL_KEY, JSON.stringify(pos))
  } catch (err) {
    console.warn('[Home] save scroll failed', err)
  }
}

function restoreScrollPosition(attempt = 0): void {
  if (!process.client || restoredOnce) return
  const pos = readSavedScroll()
  if (!pos) return

  const maxAttempts = 15
  const canScroll =
    document.documentElement.scrollHeight - pos.top > window.innerHeight / 2 ||
    attempt >= maxAttempts

  if (canScroll) {
    window.scrollTo({ left: pos.left, top: pos.top, behavior: 'auto' })
    restoredOnce = true
    return
  }

  requestAnimationFrame(() => restoreScrollPosition(attempt + 1))
}

onMounted(() => {
  // 双 RAF + nextTick，保证内容高度准备好后再恢复
  requestAnimationFrame(() => restoreScrollPosition())

  const onScroll = () => {
    if (scrollRaf) cancelAnimationFrame(scrollRaf)
    scrollRaf = requestAnimationFrame(() => {
      scrollRaf = null
      saveHomeScroll()
    })
  }
  window.addEventListener('scroll', onScroll, { passive: true })
  window.addEventListener('beforeunload', saveHomeScroll)

  onBeforeUnmount(() => {
    window.removeEventListener('scroll', onScroll)
    window.removeEventListener('beforeunload', saveHomeScroll)
    if (scrollRaf) cancelAnimationFrame(scrollRaf)
  })
})

onActivated(() => {
  requestAnimationFrame(() => restoreScrollPosition())
})

onBeforeRouteLeave(() => {
  saveHomeScroll()
})

// Admin Logic for Home Push（保留内嵌管理面板的排序/移除功能）
function moveArticle(index: number, direction: number) {
  const newIndex = index + direction
  if (newIndex < 0 || newIndex >= homeFeaturedArticles.value.length) return
  const temp = homeFeaturedArticles.value[index]
  homeFeaturedArticles.value[index] = homeFeaturedArticles.value[newIndex]
  homeFeaturedArticles.value[newIndex] = temp
}

function removeFeatured(index: number) {
  homeFeaturedArticles.value.splice(index, 1)
}

const adminActiveTab = ref<(typeof adminTabs)[number]['value']>('users')
const enableInlineAdminPanel = false

interface ArticleItem {
  slug: string
  title: string
  description?: string | null
  body?: string
  tagList?: string[]
  cover?: string | null
  favorited?: boolean
  views?: number
  author?: {
    username?: string
    image?: string | null
  }
  favoritesCount?: number
  createdAt?: string
  updatedAt?: string
}

interface ArticlesListResponse {
  articles?: ArticleItem[]
  articles_count?: number
  articlesCount?: number
}

interface CurrentUser {
  username: string
  image?: string | null
  email?: string
  roles?: string[]
}

interface AdminRole {
  id: number
  name: string
  description?: string | null
  permissions: string[]
}

interface AdminUser {
  id: number
  username: string
  email: string
  bio?: string | null
  image?: string | null
  roles: AdminRole[]
  created_at?: string
  updated_at?: string
}

interface AdminDashboardStats {
  users: number
  roles: number
  articles: number
  total_views: number
  published_today: number
}

interface AdminUsersResponse {
  users?: AdminUser[]
  total?: number
}

interface AdminRolesResponse {
  roles?: AdminRole[]
}

interface AdminArticlesResponse {
  articles?: ArticleItem[]
  articles_count?: number
  articlesCount?: number
}

const defaultCover = '/cover.jpg'

const { token } = useAuthToken()
const { user: authUser, fetchMe } = useAuth()



const currentUser = ref<CurrentUser | null>(
  (authUser.value || null) as CurrentUser | null,
)

watch(
  () => authUser.value,
  (val) => {
    currentUser.value = (val || null) as CurrentUser | null
  },
  { immediate: true },
)

watch(
  () => token.value,
  async (val) => {
    if (!val) {
      currentUser.value = null
      return
    }
    try {
      if (!currentUser.value) {
        await fetchMe()
      }
    } catch (err) {
      console.error('[Home] fetch current user failed:', err)
      currentUser.value = null
    }
  },
  { immediate: true },
)

const isLoggedIn = computed<boolean>(() => {
  return Boolean(token.value && currentUser.value)
})

const isAdmin = computed<boolean>(() => {
  if (!isLoggedIn.value) return false
  const fallbackUser = (authUser.value || null) as CurrentUser | null
  const roles = currentUser.value?.roles ?? fallbackUser?.roles ?? []
  return Array.isArray(roles) && roles.includes('admin')
})

const showAdminPanel = computed<boolean>(() => {
  return enableInlineAdminPanel && isLoggedIn.value && isAdmin.value
})

const adminStats = ref<AdminDashboardStats | null>(null)
const adminUsers = ref<AdminUser[]>([])
const adminUsersTotal = ref(0)
const adminRoles = ref<AdminRole[]>([])
const adminArticles = ref<ArticleItem[]>([])
const adminFilters = reactive({
  userSearch: '',
  userRoleId: '' as string | number,
  articleSearch: '',
  articleAuthor: '',
})
const newUserForm = reactive({
  username: '',
  email: '',
  password: '',
  bio: '',
  roleIds: [] as number[],
})
const editingUser = ref<
  | {
      id: number
      username: string
      email: string
      bio?: string | null
      roleIds: number[]
    }
  | null
>(null)
const editingRole = reactive({
  id: null as number | null,
  name: '',
  description: '',
  permissionsInput: '',
})
const articleEdit = ref<{ slug: string; title: string; description: string | null } | null>(null)
const adminLoading = reactive({
  stats: false,
  users: false,
  roles: false,
  articles: false,
  createUser: false,
  saveUser: false,
  saveRole: false,
  saveArticle: false,
})

watch(isAdmin, async (val) => {
  if (!enableInlineAdminPanel) return
  if (val) {
    await initAdminPanel()
  } else {
    adminStats.value = null
    adminUsers.value = []
    adminUsersTotal.value = 0
    adminRoles.value = []
    adminArticles.value = []
  }
})

watch(adminActiveTab, async (tab) => {
  if (!enableInlineAdminPanel || !isAdmin.value) return
  if (tab === 'users' && !adminUsers.value.length) {
    await loadAdminUsers()
  } else if (tab === 'roles' && !adminRoles.value.length) {
    await loadAdminRoles()
  } else if (tab === 'articles' && !adminArticles.value.length) {
    await loadAdminArticles()
  }
})



function formatDate(value?: string | null): string {
  if (!value) return '--'
  try {
    return new Date(value).toLocaleDateString()
  } catch (e) {
    return '--'
  }
}

async function initAdminPanel(): Promise<void> {
  if (!enableInlineAdminPanel) return
  await Promise.all([loadAdminStats(), loadAdminRoles()])
  await Promise.all([loadAdminUsers(), loadAdminArticles()])
}

async function loadAdminStats(): Promise<void> {
  if (!isAdmin.value) return
  adminLoading.stats = true
  try {
    const res = (await api.get('/admin/dashboard')) as Partial<AdminDashboardStats>
    adminStats.value = res
      ? ({
          users: Number(res.users ?? 0),
          roles: Number(res.roles ?? 0),
          articles: Number(res.articles ?? 0),
          total_views: Number(res.total_views ?? 0),
          published_today: Number(res.published_today ?? 0),
        } as AdminDashboardStats)
      : null
  } catch (err) {
    console.error('[Admin] load stats failed', err)
  } finally {
    adminLoading.stats = false
  }
}

async function loadAdminUsers(): Promise<void> {
  if (!isAdmin.value) return
  adminLoading.users = true
  try {
    const query: Record<string, any> = { limit: 50, offset: 0 }
    const search = adminFilters.userSearch.trim()
    if (search) query.search = search
    const roleId = Number(adminFilters.userRoleId)
    if (!Number.isNaN(roleId) && roleId > 0) {
      query.role_id = roleId
    }
    const res = (await api.get('/admin/users', query)) as AdminUsersResponse
    const list = Array.isArray(res.users) ? res.users : []
    adminUsers.value = list
    adminUsersTotal.value = typeof res.total === 'number' ? res.total : list.length
  } catch (err) {
    console.error('[Admin] load users failed', err)
    alert('加载用户列表失败')
  } finally {
    adminLoading.users = false
  }
}

async function loadAdminRoles(): Promise<void> {
  if (!isAdmin.value) return
  adminLoading.roles = true
  try {
    const res = (await api.get('/admin/roles')) as AdminRolesResponse
    adminRoles.value = Array.isArray(res.roles) ? res.roles : []
  } catch (err) {
    console.error('[Admin] load roles failed', err)
    alert('加载角色列表失败')
  } finally {
    adminLoading.roles = false
  }
}

async function loadAdminArticles(): Promise<void> {
  if (!isAdmin.value) return
  adminLoading.articles = true
  try {
    const query: Record<string, any> = { limit: 50, offset: 0 }
    const keyword = adminFilters.articleSearch.trim()
    if (keyword) query.search = keyword
    const author = adminFilters.articleAuthor.trim()
    if (author) query.author = author
    const res = (await api.get('/admin/articles', query)) as AdminArticlesResponse
    adminArticles.value = Array.isArray(res.articles) ? res.articles : []
  } catch (err) {
    console.error('[Admin] load articles failed', err)
    alert('加载文章列表失败')
  } finally {
    adminLoading.articles = false
  }
}

function resetNewUserForm(): void {
  newUserForm.username = ''
  newUserForm.email = ''
  newUserForm.password = ''
  newUserForm.bio = ''
  newUserForm.roleIds = []
}

async function submitNewUser(): Promise<void> {
  if (!isAdmin.value) return
  if (!newUserForm.username.trim() || !newUserForm.email.trim() || !newUserForm.password.trim()) {
    alert('请完整填写用户名、邮箱和密码')
    return
  }
  adminLoading.createUser = true
  try {
    await api.post('/admin/users', {
      user: {
        username: newUserForm.username.trim(),
        email: newUserForm.email.trim(),
        password: newUserForm.password,
        bio: newUserForm.bio,
        role_ids: newUserForm.roleIds,
      },
    })
    resetNewUserForm()
    await Promise.all([loadAdminUsers(), loadAdminStats()])
  } catch (err: any) {
    console.error('[Admin] create user failed', err)
    alert(err?.statusMessage || '创建用户失败')
  } finally {
    adminLoading.createUser = false
  }
}

function startUserEdit(user: AdminUser): void {
  editingUser.value = {
    id: user.id,
    username: user.username,
    email: user.email,
    bio: user.bio || '',
    roleIds: (user.roles || []).map((r) => r.id),
  }
}

function cancelUserEdit(): void {
  editingUser.value = null
}

async function saveUserEdit(): Promise<void> {
  if (!editingUser.value) return
  adminLoading.saveUser = true
  try {
    await api.put(`/admin/users/${editingUser.value.id}`, {
      user: {
        username: editingUser.value.username,
        email: editingUser.value.email,
        bio: editingUser.value.bio,
        role_ids: editingUser.value.roleIds,
      },
    })
    editingUser.value = null
    await Promise.all([loadAdminUsers(), loadAdminStats()])
  } catch (err: any) {
    console.error('[Admin] save user failed', err)
    alert(err?.statusMessage || '保存用户失败')
  } finally {
    adminLoading.saveUser = false
  }
}

async function deleteAdminUser(user: AdminUser): Promise<void> {
  if (!user?.id) return
  if (!confirm(`确定删除用户 ${user.username} 吗？`)) return
  try {
    await api.del(`/admin/users/${user.id}`)
    await Promise.all([loadAdminUsers(), loadAdminStats()])
  } catch (err: any) {
    console.error('[Admin] delete user failed', err)
    alert(err?.statusMessage || '删除用户失败')
  }
}

function startRoleEdit(role: AdminRole): void {
  editingRole.id = role.id
  editingRole.name = role.name
  editingRole.description = role.description || ''
  editingRole.permissionsInput = (role.permissions || []).join(', ')
}

function resetRoleForm(): void {
  editingRole.id = null
  editingRole.name = ''
  editingRole.description = ''
  editingRole.permissionsInput = ''
}

async function submitRoleForm(): Promise<void> {
  if (!editingRole.name.trim()) {
    alert('请输入角色名称')
    return
  }
  adminLoading.saveRole = true
  const permissions = editingRole.permissionsInput
    .split(',')
    .map((item) => item.trim())
    .filter(Boolean)
  const payload = {
    role: {
      name: editingRole.name.trim(),
      description: editingRole.description,
      permissions,
    },
  }
  try {
    if (editingRole.id) {
      await api.put(`/admin/roles/${editingRole.id}`, payload)
    } else {
      await api.post('/admin/roles', payload)
    }
    resetRoleForm()
    await loadAdminRoles()
  } catch (err: any) {
    console.error('[Admin] save role failed', err)
    alert(err?.statusMessage || '保存角色失败')
  } finally {
    adminLoading.saveRole = false
  }
}

async function deleteRole(role: AdminRole): Promise<void> {
  if (role.name === 'admin') {
    alert('admin 角色不允许删除')
    return
  }
  if (!confirm(`确定删除角色 ${role.name} 吗？`)) return
  try {
    await api.del(`/admin/roles/${role.id}`)
    await loadAdminRoles()
  } catch (err: any) {
    console.error('[Admin] delete role failed', err)
    alert(err?.statusMessage || '删除角色失败')
  }
}

function startArticleEdit(article: ArticleItem): void {
  articleEdit.value = {
    slug: article.slug,
    title: article.title,
    description: article.description || '',
  }
}

function cancelArticleEdit(): void {
  articleEdit.value = null
}

async function saveArticleEdit(): Promise<void> {
  if (!articleEdit.value) return
  adminLoading.saveArticle = true
  try {
    await api.put(`/admin/articles/${articleEdit.value.slug}`, {
      article: {
        title: articleEdit.value.title,
        description: articleEdit.value.description,
      },
    })
    articleEdit.value = null
    await loadAdminArticles()
  } catch (err: any) {
    console.error('[Admin] save article failed', err)
    alert(err?.statusMessage || '保存文章失败')
  } finally {
    adminLoading.saveArticle = false
  }
}

async function deleteAdminArticle(article: ArticleItem): Promise<void> {
  if (!article?.slug) return
  if (!confirm(`确定删除文章「${article.title}」吗？`)) return
  try {
    await api.del(`/admin/articles/${article.slug}`)
    await Promise.all([loadAdminArticles(), loadAdminStats()])
  } catch (err: any) {
    console.error('[Admin] delete article failed', err)
    alert(err?.statusMessage || '删除文章失败')
  }
}


</script>

<style scoped>
.home-container {
  padding: 0 5px;
}

/* 顶部 Banner */
.home-height {
  height: 65vh;
  position: relative;
}
.home-banner {
  position: absolute;
  inset: 0;
  background-color: #f8faff; /* Light background */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.neon-sun-wrapper {
  position: absolute;
  top: -1750px; /* Moved much higher to reduce visible arc */
  left: 50%;
  width: 2000px;
  height: 2000px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.neon-sun {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #ff0080,
    #7928ca,
    #4f46e5,
    #0ea5e9,
    #4f46e5,
    #7928ca,
    #ff0080
  );
  /* Strong blur for the misty look */
  filter: blur(100px);
  opacity: 0.7;
  animation: sun-spin 80s linear infinite;
}

.solar-flare {
  position: absolute;
  bottom: 40px; /* Positioned within the blur */
  left: 50%;
  width: 30px;
  height: 100px;
  background: linear-gradient(to top, transparent, rgba(255, 0, 128, 0.6), rgba(14, 165, 233, 0.8));
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--angle)) scaleY(0);
  /* Blur the flares too so they blend with the mist */
  filter: blur(20px);
  opacity: 0;
  animation: flare-erupt 5s ease-in-out infinite;
  animation-delay: var(--delay);
  border-radius: 50% 50% 0 0;
}

@keyframes sun-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes flare-erupt {
  0% { transform: translateX(-50%) rotate(var(--angle)) scaleY(0.5); opacity: 0; }
  20% { opacity: 0.6; }
  50% { transform: translateX(-50%) rotate(var(--angle)) scaleY(1.2); opacity: 0.3; }
  100% { transform: translateX(-50%) rotate(var(--angle)) scaleY(0.5); opacity: 0; }
}

.watermark {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10rem;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.03); /* Dark watermark for light bg */
  pointer-events: none;
  user-select: none;
  z-index: 1;
  letter-spacing: 0.5rem;
  font-family: sans-serif;
}

.home-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 120px;
}

.main-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #0f172a; /* Dark text */
  margin-bottom: 1.5rem;
  letter-spacing: 0.2rem;
  /* Removed heavy text shadow */
}

.sub-title {
  font-size: 1.5rem;
  color: #334155; /* Dark gray text */
  font-weight: 700;
}

/* Tech Elements */
.tech-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  z-index: 0;
  pointer-events: none;
}

.tech-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
  animation: scanline 4s linear infinite;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes scanline {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { top: 100%; opacity: 0; }
}

/* Removed .tech-particles and .tech-particle CSS as they are replaced by the component */

.home-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 40px;
}

.main-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 1.5rem;
  letter-spacing: 0.2rem;
}

.sub-title {
  font-size: 1.5rem;
  color: #334155;
  font-weight: 700;
}

.home-banner-right {
  position: absolute;
  top: 0;
  right: 5%;
  width: 35%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .home-banner-right {
    display: none;
  }
}

/* New Homepage Sections */
.home-section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  margin-bottom: 64px;
}

.loading-card {
  margin: 0 0 24px 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  color: #6b7280;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.empty {
  padding: 20px 12px;
  text-align: center;
  color: #9ca3af;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px dashed #e5e7eb;
}

.more-featured-section {
  margin-top: 48px;
}

.section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-main);
  letter-spacing: -0.5px;
  position: relative;
  padding-left: 16px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* Responsive Grid for Cards */
.cards-grid-responsive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

@media (max-width: 1280px) {
  .cards-grid-responsive {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .cards-grid-responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .cards-grid-responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cards-grid-responsive {
    grid-template-columns: 1fr;
  }
  .home-section-container {
    padding: 0 20px;
    margin-bottom: 48px;
  }
}

/* Tags Section */
.tags-section {
  margin-top: 48px;
}

.tags-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.tag-pill {
  padding: 8px 20px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-sub);
  background: #fff;
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-pill:hover {
  border-color: var(--color-primary-end);
  color: var(--color-primary-end);
}

.tag-pill.active {
  background: var(--color-primary-end);
  color: #fff;
  border-color: var(--color-primary-end);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* Admin Status Tags */
.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.status-tag.success {
  background: #dcfce7;
  color: #166534;
}

.status-tag.warning {
  background: #fef9c3;
  color: #854d0e;
}

/* Small Screen Adaptations */
@media (max-width: 640px) {
  .banner-title {
    font-size: 2.2rem;
  }
}

</style>
