<!-- 内容搜索页面 - UTSJSONObject 优化版本 -->
<template>
	<scroll-view direction="vertical" class="search-page" :scroll-y="true" :enable-back-to-top="true">
		<!-- 搜索头部 -->
		<view class="search-header">
			<view class="search-bar">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="search-input-container">
					<input class="search-input" :value="searchKeyword" @input="onSearchInput" @confirm="performSearch"
						:placeholder="$t('mt.search.placeholder')" confirm-type="search" :focus="true" />
					<view class="clear-btn" v-if="searchKeyword !== ''" @click="clearSearch">
						<text class="clear-icon">✕</text>
					</view>
				</view>
				<view class="search-btn" @click="performSearch">
					<text class="search-icon">🔍</text>
				</view>
			</view>

			<!-- 筛选条件 -->
			<view class="filter-section">
				<scroll-view direction="horizontal" class="filter-scroll" :scroll-x="true">
					<view class="filter-tabs">
						<view class="filter-tab" @click="showFilterModal">
							<text class="filter-text">{{ $t('mt.search.filter') }}</text>
							<text class="filter-icon">⚙</text>
						</view>
						<view class="filter-tab" :class="{ active: activeFilters.category !== null }"
							@click="clearCategoryFilter" v-if="activeFilters.category !== null">
							<text class="filter-text">{{ getCategoryDisplayNameById(activeFilters.category) }}</text>
							<text class="filter-remove">✕</text>
						</view>
						<view class="filter-tab" :class="{ active: activeFilters.language !== null }"
							@click="clearLanguageFilter" v-if="activeFilters.language !== null">
							<text class="filter-text">{{ activeFilters.language }}</text>
							<text class="filter-remove">✕</text>
						</view>
						<view class="filter-tab" :class="{ active: activeFilters.dateRange !== null }"
							@click="clearDateFilter" v-if="activeFilters.dateRange !== null">
							<text class="filter-text">{{ activeFilters.dateRange }}</text>
							<text class="filter-remove">✕</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 搜索建议 -->
		<view class="suggestions-section" v-if="showSuggestions && searchSuggestions.length > 0">
			<view class="suggestions-header">
				<text class="suggestions-title">{{ $t('mt.search.suggestions') }}</text>
			</view>
			<view class="suggestions-list">
				<view v-for="suggestion in searchSuggestions" :key="suggestion" class="suggestion-item"
					@click="selectSuggestion(suggestion)">
					<text class="suggestion-icon"></text>
					<text class="suggestion-text">{{ suggestion }}</text>
				</view>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="hot-searches-section" v-if="searchKeyword === '' && hotSearches.length > 0">
			<view class="section-header">
				<text class="section-title">{{ $t('mt.search.hot') }}</text>
			</view>
			<view class="hot-tags">
				<view v-for="hotSearch in hotSearches" :key="hotSearch" class="hot-tag"
					@click="selectHotSearch(hotSearch)">
					<text class="hot-text">{{ hotSearch }}</text>
				</view>
			</view>
		</view>

		<!-- 搜索历史 -->
		<view class="history-section" v-if="searchKeyword === '' && searchHistory.length > 0">
			<view class="section-header">
				<text class="section-title">{{ $t('mt.search.history') }}</text>
				<view class="clear-history-btn" @click="clearSearchHistory">
					<text class="clear-history-icon">🧹</text>
				</view>
			</view>
			<view class="history-list">
				<view v-for="history in searchHistory" :key="history" class="history-item"
					@click="selectHistory(history)">
					<text class="history-icon">⏰</text>
					<text class="history-text">{{ history }}</text>
					<view class="history-remove" @click.stop="removeHistory(history)">
						<text class="remove-icon">✕</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="results-section" v-if="hasSearched">
			<!-- 结果统计 -->
			<view class="results-header">
				<text class="results-count">{{ $t('mt.search.found', { count: pageState.total }) }}</text>
				<view class="sort-options">
					<view class="sort-btn" @click="showSortModal">
						<text class="sort-text">{{ currentSortText }}</text>
						<text class="sort-icon">↕</text>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-section" v-if="pageState.loading">
				<text class="loading-text">{{ $t('mt.search.loading') }}</text>
			</view>

			<!-- 错误状态 -->
			<view class="error-section" v-if="pageState.error !== null">
				<text class="error-text">{{ pageState.error }}</text>
				<view class="retry-btn" @click="retrySearch">
					<text class="retry-text">{{ $t('mt.action.retry') }}</text>
				</view>
			</view>

			<!-- 结果列表 -->
			<view class="results-list" v-if="searchResults.length > 0">
				<view v-for="content in searchResults" :key="content.id" class="result-item"
					@click="navigateToDetail(content)">
					<view class="result-header">
						<text class="result-title">{{highlightSearchText(content.title) }}</text>
						<view class="result-meta">
							<view class="quality-indicator"
								:style="{ backgroundColor: getQualityScoreColor(content.quality_score) }">
							</view>
							<text class="result-language">{{ content.original_language }}</text>
						</view>
					</view>
					<text class="result-summary">{{ highlightSearchText(content.summary as string) }}</text>
					<view class="result-footer">
						<text class="result-author">{{ content.author }}</text>
						<text class="result-time">{{ formatRelativeTimeKey(content.published_at) }}</text>
						<view class="result-stats">
							<text class="stat-text"> {{ content.view_count }}</text>
							<text class="stat-text"> {{ content.like_count }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空结果状态 -->
			<view class="empty-results"
				v-if="!pageState.loading && pageState.error === null && searchResults.length === 0">
				<text class="empty-icon"></text>
				<text class="empty-title">{{ $t('mt.search.empty') }}</text>
				<text class="empty-text">{{ $t('mt.search.emptyTip') }}</text>
			</view>

			<!-- 加载更多 -->
			<view class="load-more-section" v-if="searchResults.length > 0 && searchResults.length < pageState.total">
				<view class="load-more-btn" @click="loadMore">
					<text class="load-more-text">{{ $t('mt.button.loadMore') }}</text>
				</view>
			</view>
		</view>
	</scroll-view>

	<!-- 筛选弹窗 -->
	<view class="filter-modal" v-if="showFilterPanel" @click="hideFilterModal">
		<view class="filter-content" @click.stop>
			<view class="modal-header">
				<text class="modal-title">{{ $t('mt.search.filterTitle') }}</text>
				<view class="close-btn" @click="hideFilterModal">
					<text class="close-text">✕</text>
				</view>
			</view>

			<view class="filter-form">
				<!-- 分类筛选 -->
				<view class="filter-group">
					<text class="group-title">内容分类</text>
					<view class="category-options">
						<view v-for="category in categoriesList" :key="category.id" class="category-option"
							:class="{ active: filterForm.category_id === category.id }"
							@click="selectFilterCategory(category)">
							<text class="option-text">{{ getCategoryDisplayName(category) }}</text>
						</view>
					</view>
				</view>

				<!-- 语言筛选 -->
				<view class="filter-group">
					<text class="group-title">语言</text>
					<view class="language-options">
						<view v-for="language in languagesList" :key="language.code" class="language-option"
							:class="{ active: filterForm.language === language.code }"
							@click="selectFilterLanguage(language)">
							<text class="option-text">{{ $t(getLanguageDisplayNameKey(language.code)) }}</text>
						</view>
					</view>
				</view>

			   <!-- 质量筛选 -->
			   <view class="filter-group">
				   <text class="group-title">内容质量</text>
				   <view class="quality-slider">
					   <text class="slider-label">最低质量分：{{ filterForm.quality_min ?? 0 }}</text>
					   <!-- 使用官方 UTS <slider /> 组件 -->
					   <slider
						   :min="0"
						   :max="100"
						   :step="1"
						   :value="filterForm.quality_min ?? 0"
						   @change="onQualitySliderChange"
						   show-value
					   />
				   </view>
			   </view>

				<!-- 时间筛选 -->
				<view class="filter-group">
					<text class="group-title">发布时间</text>
					<view class="date-options">
						<view v-for="option in dateRangeOptions" :key="option.value" class="date-option"
							:class="{ active: filterForm.date_range === option.value }"
							@click="selectDateRange(option.value)">
							<text class="option-text">{{ option.text }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="modal-actions">
				<view class="action-btn secondary" @click="resetFilters">
					<text class="action-text">重置</text>
				</view>
				<view class="action-btn primary" @click="applyFilters">
					<text class="action-text">应用</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 排序弹窗 -->
	<view class="sort-modal" v-if="showSortPanel" @click="hideSortModal">
		<view class="sort-content" @click.stop>
			<view class="modal-header">
				<text class="modal-title">排序方式</text>
				<view class="close-btn" @click="hideSortModal">
					<text class="close-text">✕</text>
				</view>
			</view>
			<view class="sort-list">
				<view v-for="option in sortOptions" :key="option.value" class="sort-item"
					:class="{ active: currentSort === option.value }" @click="selectSort(option.value)">
					<text class="sort-name">{{ option.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref, computed, onMounted, onUnmounted } from 'vue'
	import type {
		InfoContent,
		CategoryData,
		LanguageData,
		PageState,
		PickerOption,
		ContentFilterData
	} from './types.uts'
	import {
		formatRelativeTimeKey,
		getLanguageDisplayName,
		getQualityScoreColor
	} from './types.uts'
	import supa from '@/components/supadb/aksupainstance.uts'

	// 页面状态
	const pageState = ref<PageState>({
		loading: false,
		error: null,
		currentPage: 1,
		pageSize: 20,
		total: 0
	})

	// 搜索状态
	const searchKeyword = ref<string>('')
	const hasSearched = ref<boolean>(false)
	const showSuggestions = ref<boolean>(false)

	// 数据列表
	const searchResults = ref<Array<InfoContent>>([])
	const searchSuggestions = ref<Array<string>>([])
	const searchHistory = ref<Array<string>>([])
	const hotSearches = ref<Array<string>>([])
	const categoriesList = ref<Array<CategoryData>>([])
	const languagesList = ref<Array<LanguageData>>([])

	// 筛选和排序
	const showFilterPanel = ref<boolean>(false)
	const showSortPanel = ref<boolean>(false)
	const currentSort = ref<string>('relevance')

	const filterForm = ref<ContentFilterData>({
		category_id: null,
		language: null,
		status: 'published',
		quality_min: null,
		date_from: null,
		date_to: null,
		search_text: null
	})
	type ActiveFilters = {
		category : string | null
		language : string | null
		dateRange : string | null
	}
	const activeFilters = ref<ActiveFilters>({
		category: null,
		language: null,
		dateRange: null
	})

	// Supabase组件引用
	const searchRef = ref<SupadbComponentPublicInstance | null>(null)

	// 计算属性
	const searchFilter = computed(() : UTSJSONObject => {
		const filter : UTSJSONObject = {}
		filter.set('status', 'eq.published')

		if (searchKeyword.value !== '') {
			// 全文搜索 - 简化实现
			filter.set('or', `title.ilike.*${searchKeyword.value}*,content.ilike.*${searchKeyword.value}*,summary.ilike.*${searchKeyword.value}*`)
		}

		if (filterForm.value.category_id !== null) {
			filter.set('category_id', `eq.${filterForm.value.category_id}`)
		}

		if (filterForm.value.language !== null) {
			filter.set('original_language', `eq.${filterForm.value.language}`)
		}

		if (filterForm.value.quality_min !== null) {
			filter.set('quality_score', `gte.${filterForm.value.quality_min}`)
		}

		if (filterForm.value.date_from !== null && filterForm.value.date_to !== null) {
			filter.set('published_at', `gte.${filterForm.value.date_from}`)
			filter.set('published_at', `lte.${filterForm.value.date_to}`)
		}

		// 排序
		let orderBy = 'published_at.desc'
		switch (currentSort.value) {
			case 'relevance':
				orderBy = 'quality_score.desc'
				break
			case 'newest':
				orderBy = 'published_at.desc'
				break
			case 'oldest':
				orderBy = 'published_at.asc'
				break
			case 'quality':
				orderBy = 'quality_score.desc'
				break
			case 'popular':
				orderBy = 'view_count.desc'
				break
		}
		filter.set('order', orderBy)

		return filter
	})

	const sortOptions = ref<Array<PickerOption>>([
		{ value: 'relevance', text: '相关性' },
		{ value: 'newest', text: '最新发布' },
		{ value: 'oldest', text: '最早发布' },
		{ value: 'quality', text: '质量最高' },
		{ value: 'popular', text: '最多浏览' }
	])

	const currentSortText = computed(() : string => {
		const option = sortOptions.value.find(opt => opt.value === currentSort.value)
		return option != null ? option.text : '相关性'
	})

	const dateRangeOptions = ref<Array<PickerOption>>([
		{ value: 'today', text: '今天' },
		{ value: 'week', text: '本周' },
		{ value: 'month', text: '本月' },
		{ value: 'year', text: '本年' },
		{ value: 'all', text: '全部' }
	])


	// 根据category对象获取显示名称（优先translations，否则name_key）
	const getCategoryDisplayName = (category : CategoryData) : string => {
		const translations = category.translations
		// UTS: translations may be null or undefined, so use safe call
		if (translations != null && translations.length > 0) {
			const first = translations[0]
			if (first != null && typeof first.name === 'string') {
				return first.name
			}
		}
		// fallback: use name_key
		return category.name_key
	}

	// 根据category_id获取显示名称
	const getCategoryDisplayNameById = (categoryId : string | null) : string => {
		if (categoryId == null || categoryId === '') return ''
		const category = categoriesList.value.find(cat => cat.id === categoryId)
		return category != null ? getCategoryDisplayName(category) : ''
	}

	// 搜索相关函数
	const loadSearchSuggestions = (keyword : string) => {
		// 模拟搜索建议
		const suggestions = [
			'人工智能发展趋势',
			'人工智能应用场景',
			'人工智能技术突破',
			'人工智能行业分析'
		].filter(s => s.includes(keyword))

		searchSuggestions.value = suggestions
	}

	const onSearchInput = (event : InputEvent) => {
		const value = event.detail.value
		searchKeyword.value = value

		if (value.length > 0) {
			showSuggestions.value = true
			loadSearchSuggestions(value)
		} else {
			showSuggestions.value = false
		}

	}


	const executeSearch = async () => {
		pageState.value.loading = true
		pageState.value.error = null

		const keyword = searchKeyword.value.trim()

		try {
			// 只查 ak_contents_translation，按当前语言过滤
			const result = await supa
				.from('ak_contents')
				.select('*', { count: 'exact' })
				.or(`title.ilike.%${keyword}%,content.ilike.%${keyword}%`)
				//.eq('language_id', lang)
				.range((pageState.value.currentPage - 1) * pageState.value.pageSize, pageState.value.currentPage * pageState.value.pageSize - 1)
				.executeAs<InfoContent>()

			if (result.error === null && Array.isArray(result.data)) {
				const resdata=  result.data as Array<InfoContent>
				if (pageState.value.currentPage === 1) {
					searchResults.value =resdata
				} else {
					searchResults.value = searchResults.value.concat(result.data!!)
				}
				pageState.value.total = result.total ?? resdata.length
				pageState.value.loading = false
				pageState.value.error = null
			} else {
				pageState.value.loading = false
				pageState.value.error = '搜索失败，请重试'
			}
		} catch (error) {
			console.error('Search error:', error)
			pageState.value.loading = false
			pageState.value.error = '搜索失败，请重试'
		}
	}

	const retrySearch = () => {
		executeSearch()
	}

	const clearSearch = () => {
		searchKeyword.value = ''
		showSuggestions.value = false
		hasSearched.value = false
		searchResults.value = []
		pageState.value.total = 0
	}
	const addToSearchHistory = (keyword : string) => {
		// 移除重复项
		const filteredHistory = searchHistory.value.filter(item => item !== keyword)
		// 添加到开头
		searchHistory.value = [keyword, ...filteredHistory].slice(0, 10)
		// 保存到本地存储
		try {
			uni.setStorageSync('search_history', searchHistory.value)
		} catch (error) {
			console.error('保存搜索历史失败:', error)
		}
	}
	const performSearch = () => {
		if (searchKeyword.value.trim() === '') return

		showSuggestions.value = false
		hasSearched.value = true
		pageState.value.currentPage = 1

		// 添加到搜索历史
		addToSearchHistory(searchKeyword.value.trim())

		// 执行搜索
		executeSearch()
	}
	const selectSuggestion = (suggestion : string) => {
		searchKeyword.value = suggestion
		performSearch()
	}

	const selectHotSearch = (hotSearch : string) => {
		searchKeyword.value = hotSearch
		performSearch()
	}

	const selectHistory = (history : string) => {
		searchKeyword.value = history
		performSearch()
	}



	const loadSearchHistory = () => {
		try {
			const history = uni.getStorageSync('search_history')
			if (history != null && Array.isArray(history)) {
				searchHistory.value = history as Array<string>
			}
		} catch (error) {
			console.error('加载搜索历史失败:', error)
		}
	}

	const clearSearchHistory = () => {
		searchHistory.value = []
		try {
			uni.removeStorageSync('search_history')
		} catch (error) {
			console.error('清空搜索历史失败:', error)
		}
	}

	const removeHistory = (history : string) => {
		searchHistory.value = searchHistory.value.filter(item => item !== history)
		try {
			uni.setStorageSync('search_history', searchHistory.value)
		} catch (error) {
			console.error('删除搜索历史失败:', error)
		}
	}

	// 筛选相关函数
	const showFilterModal = () => {
		showFilterPanel.value = true
	}

	const hideFilterModal = () => {
		showFilterPanel.value = false
	}

	const selectFilterCategory = (category : CategoryData) => {
		const categoryId = category.id
		filterForm.value.category_id = filterForm.value.category_id === categoryId ? null : categoryId
	}

	const selectFilterLanguage = (language : LanguageData) => {
		const languageCode = language.code
		filterForm.value.language = filterForm.value.language === languageCode ? null : languageCode
	}

	const selectDateRange = (range : string) => {
		filterForm.value.date_range = filterForm.value.date_range === range ? null : range

		// 计算日期范围
		const now = new Date()
		let startDate : Date | null = null

		switch (range) {
			case 'today':
				startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
				break
			case 'week':
				startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
				break
			case 'month':
				startDate = new Date(now.getFullYear(), now.getMonth(), 1)
				break
			case 'year':
				startDate = new Date(now.getFullYear(), 0, 1)
				break
			case 'all':
				startDate = null
				break
		}

		if (startDate !== null) {
			filterForm.value.date_from = startDate.toISOString()
			filterForm.value.date_to = now.toISOString()
		} else {
			filterForm.value.date_from = null
			filterForm.value.date_to = null
		}
	}

	const resetFilters = () => {
		filterForm.value = {
			category_id: null,
			language: null,
			status: 'published',
			quality_min: null,
			date_from: null,
			date_to: null,
			search_text: searchKeyword.value.trim(),
			date_range: null
		} as ContentFilterData
		activeFilters.value = {
			category: null,
			language: null,
			dateRange: null
		} as ActiveFilters
	}

	const applyFilters = () => {
		// 更新活跃筛选器显示
		activeFilters.value.category = filterForm.value.category_id
		activeFilters.value.language = filterForm.value.language
		activeFilters.value.dateRange = filterForm.value.date_range

		hideFilterModal()

		if (hasSearched.value) {
			pageState.value.currentPage = 1
			executeSearch()
		}
	}

	const clearCategoryFilter = () => {
		filterForm.value.category_id = null
		activeFilters.value.category = null
		if (hasSearched.value) {
			executeSearch()
		}
	}

	const clearLanguageFilter = () => {
		filterForm.value.language = null
		activeFilters.value.language = null
		if (hasSearched.value) {
			executeSearch()
		}
	}

	const clearDateFilter = () => {
		filterForm.value.date_from = null
		filterForm.value.date_to = null
		filterForm.value.date_range = null
		activeFilters.value.dateRange = null
		if (hasSearched.value) {
			executeSearch()
		}
	}

	// 排序相关函数
	const showSortModal = () => {
		showSortPanel.value = true
	}

	const hideSortModal = () => {
		showSortPanel.value = false
	}

	const selectSort = (sortValue : string) => {
		currentSort.value = sortValue
		hideSortModal()

		if (hasSearched.value) {
			pageState.value.currentPage = 1
			executeSearch()
		}
	}

	// 数据处理函数
	const handleSearchResults = (result : UTSJSONObject) => {
		const data = result.get('data')
		const count = result.get('count')

		if (data != null && Array.isArray(data)) {
			if (pageState.value.currentPage === 1) {
				searchResults.value = data as Array<InfoContent>
			} else {
				searchResults.value = searchResults.value.concat(data as Array<InfoContent>)
			}
		}

		if (count != null) {
			pageState.value.total = count as number
		}

		pageState.value.loading = false
		pageState.value.error = null
	}

	const handleError = (error : any) => {
		console.error('Search error:', error)
		pageState.value.loading = false
		pageState.value.error = '搜索失败，请重试'

		uni.showToast({
			title: '搜索失败',
			icon: 'error'
		})
	}

	const loadMore = () => {
		pageState.value.currentPage += 1
		executeSearch()
	}

	// 高亮搜索关键词

const highlightSearchText = (text: string | null): string => {
  if (typeof text !== 'string' || searchKeyword.value.trim() === '') return text ?? ''
  const keyword = searchKeyword.value.trim()
  const regex = new RegExp(keyword, 'gi')
  return text?.replace(regex, `**${keyword}**`)??''
}

   // 质量滑块变更事件

   const onQualitySliderChange = (event:UniSliderChangeEvent) => {
	   const value = event.detail.value
	   filterForm.value.quality_min = value.toString()
   }

	// 导航函数
	const navigateToDetail = (content : InfoContent) => {
		const contentId = content.id
		try {
			uni.navigateTo({
				url: `/pages/info/detail?id=${contentId}`
			})
		} catch (error) {
			console.error('导航异常:', error)
		}
	}

	const goBack = () => {
		try {
			uni.navigateBack({
				delta: 1
			})
		} catch (error) {
			console.error('返回异常:', error)
		}
	}

	// 加载语言数据，直接使用强类型常量
	import { LANGUAGE_OPTIONS, getLanguageDisplayNameKey } from './types.uts'
	const loadLanguages = () => {
		languagesList.value = LANGUAGE_OPTIONS
	}


	// 加载热门搜索
	const loadHotSearches = () => {
		hotSearches.value = [
			'人工智能',
			'机器学习',
			'深度学习',
			'自然语言处理',
			'计算机视觉',
			'大数据',
			'云计算',
			'区块链',
			'物联网',
			'5G技术'
		]
	}

	// 加载分类数据
	// 动态加载分类，强类型 CategoryData[]，与 index.uvue 保持一致
	const loadCategories = async () => {
		if (supa === null) return
		try {
			// 默认使用中文，或可根据当前语言调整
			const lang = 'zh-CN'
			const result = await supa
				.from('ak_content_categories')
				.select('*,translations:ak_content_category_translations(name)', {})
				.eq('translations.language_code', lang)
				.order('sort_order', { ascending: true })
				.executeAs<CategoryData>()
			if (result.data !== null && Array.isArray(result.data)) {
				categoriesList.value = result.data as CategoryData[]
			} else {
				categoriesList.value = []
			}
		} catch (e) {
			console.error('加载分类失败:', e)
			categoriesList.value = []
		}
	}
	// 生命周期

	onMounted(() => {
		loadSearchHistory()
		loadHotSearches()
		loadCategories()
		loadLanguages()
	})

	onUnmounted(() => {
		// 清理工作
	})
</script>

<style>
	.search-page {
		flex: 1;
		background-color: #f5f5f5;
	}

	.search-header {
		background-color: #ffffff;
		border-bottom: 1px solid #e5e5e5;
	}

	.search-bar {
		flex-direction: row;
		align-items: center;
		padding: 12px 16px;
	}

	.back-btn {
		width: 40px;
		height: 40px;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		background-color: #f3f4f6;
		margin-right: 12px;
	}

	.back-icon {
		font-size: 18px;
		color: #374151;
	}

	.search-input-container {
		flex: 1;
		flex-direction: row;
		align-items: center;
		background-color: #f3f4f6;
		border-radius: 20px;
		padding: 0 16px;
		margin-right: 12px;
	}

	.search-input {
		flex: 1;
		height: 40px;
		font-size: 16px;
		color: #374151;
	}

	.clear-btn {
		width: 20px;
		height: 20px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		background-color: #d1d5db;
	}

	.clear-icon {
		font-size: 12px;
		color: #ffffff;
	}

	.search-btn {
		padding: 10px 16px;
		background-color: #3b82f6;
		border-radius: 20px;
	}

	.search-text {
		font-size: 14px;
		color: #ffffff;
	}

	.filter-section {
		border-top: 1px solid #f3f4f6;
	}

	.filter-scroll {
		height: 50px;
	}

	.filter-tabs {
		flex-direction: row;
		align-items: center;
		padding: 0 16px;
	}

	.filter-tab {
		flex-direction: row;
		align-items: center;
		margin-right: 12px;
		padding: 6px 12px;
		border-radius: 16px;
		background-color: #f3f4f6;
	}

	.filter-tab.active {
		background-color: #eff6ff;
		border: 1px solid #3b82f6;
	}

	.filter-text {
		font-size: 14px;
		color: #374151;
		white-space: nowrap;
	}

	.filter-tab.active .filter-text {
		color: #3b82f6;
	}

	.filter-icon,
	.filter-remove {
		font-size: 12px;
		color: #6b7280;
		margin-left: 4px;
	}

	.filter-tab.active .filter-remove {
		color: #3b82f6;
	}

	.suggestions-section,
	.hot-searches-section,
	.history-section {
		background-color: #ffffff;
		margin: 12px;
		border-radius: 12px;
	}

	.suggestions-header,
	.section-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #e5e5e5;
	}

	.suggestions-title,
	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #1f2937;
	}

	.clear-history-btn {
		padding: 4px 12px;
		background-color: #f3f4f6;
		border-radius: 12px;
	}

	.clear-history-text {
		font-size: 14px;
		color: #6b7280;
	}

	.suggestions-list,
	.history-list {
		padding: 0 16px;
	}

	.suggestion-item,
	.history-item {
		flex-direction: row;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f3f4f6;
	}

	.suggestion-icon,
	.history-icon {
		font-size: 16px;
		color: #6b7280;
		margin-right: 12px;
	}

	.suggestion-text,
	.history-text {
		flex: 1;
		font-size: 16px;
		color: #374151;
	}

	.history-remove {
		width: 24px;
		height: 24px;
		justify-content: center;
		align-items: center;
		border-radius: 12px;
		background-color: #f3f4f6;
	}

	.remove-icon {
		font-size: 12px;
		color: #6b7280;
	}

	.hot-tags {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 16px;
	}

	.hot-tag {
		margin-right: 12px;
		margin-bottom: 8px;
		padding: 8px 16px;
		background-color: #eff6ff;
		border-radius: 20px;
	}

	.hot-text {
		font-size: 14px;
		color: #3b82f6;
	}

	.results-section {
		background-color: #ffffff;
		margin: 12px;
		border-radius: 12px;
	}

	.results-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #e5e5e5;
	}

	.results-count {
		font-size: 14px;
		color: #6b7280;
	}

	.sort-options {
		flex-direction: row;
		align-items: center;
	}

	.sort-btn {
		flex-direction: row;
		align-items: center;
		padding: 6px 12px;
		background-color: #f3f4f6;
		border-radius: 16px;
	}

	.sort-text {
		font-size: 14px;
		color: #374151;
	}

	.sort-icon {
		font-size: 12px;
		color: #6b7280;
		margin-left: 4px;
	}

	.loading-section,
	.error-section,
	.empty-results {
		padding: 40px 16px;
		align-items: center;
	}

	.loading-text,
	.error-text {
		font-size: 16px;
		color: #6b7280;
	}

	.empty-icon {
		font-size: 48px;
		margin-bottom: 16px;
	}

	.empty-title {
		font-size: 18px;
		color: #1f2937;
		margin-bottom: 8px;
	}

	.empty-text {
		font-size: 14px;
		color: #6b7280;
	}

	.retry-btn {
		margin-top: 16px;
		padding: 8px 16px;
		background-color: #3b82f6;
		border-radius: 8px;
	}

	.retry-text {
		font-size: 14px;
		color: #ffffff;
	}

	.results-list {
		padding: 0 16px;
	}

	.result-item {
		padding: 16px 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.result-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 8px;
	}

	.result-title {
		flex: 1;
		font-size: 16px;
		font-weight: bold;
		color: #1f2937;
		line-height: 22px;
		margin-right: 12px;
	}

	.result-meta {
		flex-direction: row;
		align-items: center;
	}

	.quality-indicator {
		width: 8px;
		height: 8px;
		border-radius: 4px;
		margin-right: 6px;
	}

	.result-language {
		font-size: 12px;
		color: #6b7280;
	}

	.result-summary {
		font-size: 14px;
		color: #6b7280;
		line-height: 20px;
		margin-bottom: 12px;
	}

	.result-footer {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.result-author {
		font-size: 12px;
		color: #9ca3af;
	}

	.result-time {
		font-size: 12px;
		color: #9ca3af;
	}

	.result-stats {
		flex-direction: row;
		align-items: center;
	}

	.stat-text {
		font-size: 12px;
		color: #9ca3af;
		margin-left: 8px;
	}

	.load-more-section {
		padding: 16px;
		align-items: center;
	}

	.load-more-btn {
		padding: 12px 24px;
		background-color: #f3f4f6;
		border-radius: 8px;
	}

	.load-more-text {
		font-size: 14px;
		color: #374151;
	}

	/* 弹窗样式 */
	.filter-modal,
	.sort-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		justify-content: center;
		align-items: center;
	}

	.filter-content,
	.sort-content {
		width: 320px;
		max-height: 600px;
		background-color: #ffffff;
		border-radius: 12px;
		margin: 20px;
	}

	.modal-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #e5e5e5;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
	}

	.close-btn {
		width: 32px;
		height: 32px;
		justify-content: center;
		align-items: center;
		border-radius: 16px;
		background-color: #f3f4f6;
	}

	.close-text {
		font-size: 16px;
		color: #6b7280;
	}

	.filter-form {
		max-height: 400px;
		padding: 16px;
	}

	.filter-group {
		margin-bottom: 24px;
	}

	.group-title {
		font-size: 16px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 12px;
	}

	.category-options,
	.language-options,
	.date-options {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.category-option,
	.language-option,
	.date-option {
		margin-right: 8px;
		margin-bottom: 8px;
		padding: 8px 16px;
		background-color: #f3f4f6;
		border-radius: 20px;
	}

	.category-option.active,
	.language-option.active,
	.date-option.active {
		background-color: #eff6ff;
		border: 1px solid #3b82f6;
	}

	.option-text {
		font-size: 14px;
		color: #374151;
	}

	.category-option.active .option-text,
	.language-option.active .option-text,
	.date-option.active .option-text {
		color: #3b82f6;
	}

	.quality-slider {
		padding: 16px 0;
	}

	.slider-label {
		font-size: 14px;
		color: #374151;
		margin-bottom: 12px;
	}

   /* 移除自定义滑块样式，保留官方slider相关样式 */

	.modal-actions {
		flex-direction: row;
		justify-content: space-between;
		padding: 16px;
		border-top: 1px solid #e5e5e5;
	}

	.action-btn {
		flex: 1;
		height: 44px;
		justify-content: center;
		align-items: center;
		border-radius: 8px;
		margin: 0 8px;
	}

	.action-btn.secondary {
		background-color: #f3f4f6;
	}

	.action-btn.primary {
		background-color: #3b82f6;
	}

	.action-text {
		font-size: 16px;
	}

	.action-btn.secondary .action-text {
		color: #374151;
	}

	.action-btn.primary .action-text {
		color: #ffffff;
	}

	.sort-list {
		max-height: 300px;
	}

	.sort-item {
		padding: 16px;
		border-bottom: 1px solid #f3f4f6;
	}

	.sort-item.active {
		background-color: #eff6ff;
	}

	.sort-name {
		font-size: 16px;
		color: #1f2937;
	}

	.sort-item.active .sort-name {
		color: #3b82f6;
	}
</style>