<template>
  <header class="bg-white dark:bg-gray-800 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center py-6 md:justify-start md:space-x-10">
        <div class="flex justify-start lg:w-0 lg:flex-1">
          <router-link to="/" class="flex items-center text-2xl font-bold text-green-600 dark:text-green-400">
            <div class="flex items-center">
              <GlobeAltIcon class="w-5 h-5 mr-2" />
              <span>Travel Share</span>
            </div>
          </router-link>
          <nav class="ml-10 space-x-4">
            <router-link to="/home" class="text-base font-medium text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
              <HomeIcon class="inline-block w-5 h-5 mr-1" /> Home
            </router-link>
            <router-link to="/latest" class="text-base font-medium text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
              <ClockIcon class="inline-block w-5 h-5 mr-1" /> Latest
            </router-link>
            <router-link to="/hot" class="text-base font-medium text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
              <FireIcon class="inline-block w-5 h-5 mr-1" /> Hot
            </router-link>
          </nav>
        </div>
        <div class="md:flex items-center justify-end md:flex-1 lg:w-0">
          <div class="relative">
            <input
              v-model="searchQuery"
              type="search"
              placeholder="Search posts..."
              @keyup.enter="handleSearch"
              class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-200 rounded-full pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 w-full"
            />
            <MagnifyingGlassIcon 
              @click="handleSearch"
              class="h-5 w-5 text-gray-400 dark:text-gray-300 absolute left-3 top-1/2 transform -translate-y-1/2 cursor-pointer" 
            />
          </div>
          <template v-if="!isAuthenticated">
            <router-link to="/login" class="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-green-600 bg-white hover:bg-gray-100">
              <ArrowRightOnRectangleIcon class="w-5 h-5 mr-1" /> Login
            </router-link>
            <router-link to="/register" class="ml-4 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-green-600 hover:bg-green-700">
              <UserPlusIcon class="w-5 h-5 mr-1" /> Register
            </router-link>
          </template>
          <template v-else>
            <router-link to="/posts/new" class="ml-4 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-green-600 hover:bg-green-700">
              <PlusCircleIcon class="w-5 h-5 mr-1" /> New Post
            </router-link>
            <router-link to="/profile" class="ml-4 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-green-600 bg-white hover:bg-gray-100">
              <UserCircleIcon class="w-5 h-5 mr-1" />
              <span v-if="user">{{ user.name || user.email }}</span>
              <span v-else>Profile</span>
            </router-link>
            <button @click="handleLogout" class="ml-4 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-red-600 bg-white hover:bg-gray-100">
              <ArrowLeftOnRectangleIcon class="w-5 h-5 mr-1" /> Logout
            </button>
          </template>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAuthStore } from '../store/auth'
import { useRouter } from 'vue-router'
import { useToast } from '../composables/useToast'
import {
  GlobeAltIcon,
  HomeIcon,
  ClockIcon,
  FireIcon,
  MagnifyingGlassIcon,
  PlusCircleIcon,
  UserCircleIcon,
  ArrowRightOnRectangleIcon,
  ArrowLeftOnRectangleIcon,
  UserPlusIcon
} from '@heroicons/vue/24/outline'

const router = useRouter()
const { showToast } = useToast()
const authStore = useAuthStore()
const searchQuery = ref('')

// 使用 storeToRefs 保持响应性
const { isAuthenticated, user } = storeToRefs(authStore)

const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    showToast('请输入搜索关键词', 'warning')
    return
  }
  router.push({
    name: 'SearchResults',
    query: { q: searchQuery.value.trim() }
  })
  searchQuery.value = ''
}

const handleLogout = () => {
  authStore.logout()
  showToast('已退出登录', 'success')
  router.push('/login')
}
</script>