<template>
  <aside class="w-full lg:w-80">
    <!-- 发布新帖按钮 -->
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-4">
      <router-link 
        to="/posts/new" 
        class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
      >
        <PlusCircleIcon class="w-5 h-5 mr-2" />
        Create New Post
      </router-link>
    </div>

    <!-- 标签 -->
    <div class="mt-4 bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
        <TagIcon class="inline-block w-5 h-5 mr-2" /> Popular Tags
      </h2>
      <div class="p-4 space-y-2">
        <router-link 
          v-for="tag in tags" 
          :key="tag"
          :to="{
            name: 'SearchResults',
            query: { q: tag, tag: tag }
          }"
          class="inline-block bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-200 px-3 py-1 rounded-full text-sm hover:bg-green-200 dark:hover:bg-green-600 transition duration-150 ease-in-out mr-2 mb-2"
        >
          {{ tag }}
        </router-link>
      </div>
    </div>

    <!-- 热门话题 -->
    <div class="mt-4 bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
        <FireIcon class="inline-block w-5 h-5 mr-2" /> Hot Posts
      </h2>
      <div v-if="loading" class="p-4 text-center">
        <LoadingSpinner text="加载中..." />
      </div>
      <ul v-else class="p-4 space-y-2">
        <li 
          v-for="post in hotPosts" 
          :key="post.id"
          class="text-sm hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition duration-150 ease-in-out"
        >
          <router-link 
            :to="'/article/' + post.id"
            class="block px-3 py-2 text-gray-900 dark:text-gray-100"
          >
            <div class="flex items-center space-x-2">
              <span class="flex-grow line-clamp-2">{{ post.title }}</span>
              <span class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
                <EyeIcon class="w-4 h-4 mr-1" />
                {{ post.views_count }}
              </span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </aside>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PlusCircleIcon, TagIcon, FireIcon, EyeIcon } from '@heroicons/vue/24/outline'
import { usePosts } from '../composables/usePosts'
import LoadingSpinner from './LoadingSpinner.vue'

// 从后端获取热门标签
const tags = ref([
  'Travel', 'Food', 'Photography', 'Hiking', 'Road Trip',
  'Camping', 'City Exploration', 'Cultural Experience', 'Island Vacation'
])

const loading = ref(false)
const hotPosts = ref([])
const { fetchPosts } = usePosts()

const loadHotPosts = async () => {
  loading.value = true
  try {
    const { items } = await fetchPosts({
      page: 1,
      size: 5,
      sort: 'hot'
    })
    hotPosts.value = items
  } catch (error) {
    console.error('Failed to load hot posts:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadHotPosts()
})
</script>