<template>
  <div class="artist-search">
    <!-- 搜索表单 -->
    <div class="search-form">
      <div class="search-input-group">
        <input v-model="searchKeyword" type="text" placeholder="输入作者名称或账号搜索..." class="search-input"
          @keyup.enter="handleSearch" />
        <button @click="handleSearch" class="search-btn" :disabled="loading">
          <SvgIcon name="search" />
        </button>
      </div>

      <!-- 搜索选项 -->
      <div class="search-options">
        <label class="checkbox-label">
          <input v-model="hideFollowedArtists" type="checkbox" class="form-checkbox" />
          <span>隐藏已关注的作者</span>
        </label>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div v-if="loading" class="loading-section">
      <LoadingSpinner text="搜索中..." />
    </div>

    <div v-else-if="error" class="error-section">
      <ErrorMessage :error="error" @dismiss="clearError" />
    </div>

    <div v-else-if="searchResults.length > 0" class="results-section">
      <div class="results-header">
        <h3>搜索结果 ({{ filteredResults.length }})</h3>
        <div v-if="hideFollowedArtists && searchResults.length !== filteredResults.length" class="filter-info">
          已隐藏 {{ searchResults.length - filteredResults.length }} 个已关注的作者
        </div>
      </div>

      <div class="artists-grid">
        <ArtistCard v-for="artist in filteredResults" :key="artist.id" :artist="artist" :show-follow-button="true"
          :show-unfollow-button="false" @follow="handleFollow" @download="handleDownload" />
      </div>
    </div>

    <div v-else-if="hasSearched" class="empty-section">
      <div class="empty-content">
        <SvgIcon name="user" class="empty-icon" />
        <h3>未找到相关作者</h3>
        <p>尝试使用不同的关键词搜索</p>
      </div>
    </div>

    <div v-else class="welcome-section">
      <div class="welcome-content">
        <h3>搜索作者</h3>
        <p>输入作者名称或账号来搜索</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useArtistStore } from '@/stores/artist'

import ArtistCard from '@/components/artist/ArtistCard.vue'

const router = useRouter()
const artistStore = useArtistStore()

// 搜索状态
const searchKeyword = ref('')
const hideFollowedArtists = ref(false)
const loading = ref(false)
const error = ref<string | null>(null)
const hasSearched = ref(false)
const searchResults = ref<any[]>([])

// 计算属性：过滤搜索结果
const filteredResults = computed(() => {
  if (!hideFollowedArtists.value) {
    return searchResults.value
  }

  // 获取已关注作者的ID列表
  const followedIds = new Set(artistStore.followingArtists.map(artist => artist.id))

  // 过滤掉已关注的作者
  return searchResults.value.filter(artist => !followedIds.has(artist.id))
})

// 执行搜索
const handleSearch = async () => {
  if (!searchKeyword.value.trim()) {
    return
  }

  try {
    loading.value = true
    error.value = null
    hasSearched.value = true

    await artistStore.searchArtists(searchKeyword.value)
    searchResults.value = artistStore.searchResults
  } catch (err) {
    error.value = err instanceof Error ? err.message : '搜索失败'
    console.error('搜索失败:', err)
  } finally {
    loading.value = false
  }
}

// 关注作者
const handleFollow = async (artistId: number) => {
  try {
    await artistStore.followArtist(artistId)
    // 更新搜索结果中的关注状态
    const artist = searchResults.value.find(a => a.id === artistId)
    if (artist) {
      artist.is_followed = true
    }
  } catch (err) {
    error.value = err instanceof Error ? err.message : '关注失败'
    console.error('关注失败:', err)
  }
}

// 下载作品
const handleDownload = (artist: any) => {
  // 触发父组件的下载事件
  emit('download', artist)
}

// 清除错误
const clearError = () => {
  error.value = null
}

// 定义事件
interface Emits {
  (e: 'download', artist: any): void
}

const emit = defineEmits<Emits>()

// 暴露方法给父组件
defineExpose({
  searchKeyword,
  clearSearch: () => {
    searchKeyword.value = ''
    searchResults.value = []
    hasSearched.value = false
    error.value = null
  }
})
</script>

<style scoped>
.artist-search {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-input-group {
  display: flex;
  gap: 0.5rem;
}

.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.search-btn {
  padding: 0.75rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover:not(:disabled) {
  background: #2563eb;
}

.search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.search-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.search-options {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: #3b82f6;
}

.loading-section,
.error-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.results-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.results-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.results-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.filter-info {
  font-size: 0.875rem;
  color: #6b7280;
}

.artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.empty-section,
.welcome-section {
  text-align: center;
  padding: 3rem 0;
}

.empty-content,
.welcome-content {
  max-width: 300px;
  margin: 0 auto;
}

.empty-icon {
  width: 3rem;
  height: 3rem;
  color: #9ca3af;
  margin-bottom: 1rem;
}

.empty-content h3,
.welcome-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.empty-content p,
.welcome-content p {
  color: #6b7280;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .search-input-group {
    flex-direction: column;
  }

  .artists-grid {
    grid-template-columns: 1fr;
  }

  .search-options {
    justify-content: flex-start;
  }
}
</style>