/**
 * 首页状态管理 Hook
 * 提取自 app/page.tsx 的状态管理逻辑
 */

import { useState, useCallback, useRef, useEffect } from 'react'
import { MATERIAL_TYPE_OPTIONS } from '@/lib/material-type-options'

// 素材类型定义
export interface Material {
  id: string
  userId: string
  previewUrl: string
  productModel: string
  categoryName: string
  sceneName: string
  platformName?: string
  productCategoryName?: string
  materialType: string
  renderer: string
  authorName: string
  zipFileName: string
  zipFileSize: string | number
  downloadCount: number
  likeCount: number
  isLiked: boolean
  isFavorited: boolean
  createdAt: string
  displayImages?: string[]
  videoSourceUrl?: string | null
  videoPreview540Url?: string | null
  videoPreviewClipUrl?: string | null
  videoCoverUrl?: string | null
  videoProcessingStatus?: string | null
  videoDuration?: number | null
  transcodeLastError?: string | null
  transcodeAttempts?: number | null
  transcodeProgress?: number | null
  transcodeStage?: string | null
  transcodeQueueWaitingIndex?: number | null
  transcodeQueueWaitingTotal?: number | null
  transcodeQueueProcessingIds?: string[]
  transcodeQueueMaxConcurrent?: number | null
  user: {
    username: string
    avatar?: string | null
  }
}

// 分类项类型
export interface CategoryItem {
  id: string
  name: string
  count: number
}

// 月份项类型
export interface MonthItem {
  value: string
  label: string
  count: number
}

// 默认素材类型列表（已分类排序）
export const DEFAULT_MATERIAL_TYPES = [
  ...MATERIAL_TYPE_OPTIONS,
] as string[]

export interface UseHomeStateReturn {
  // 素材数据
  materials: Material[]
  setMaterials: React.Dispatch<React.SetStateAction<Material[]>>
  loading: boolean
  setLoading: React.Dispatch<React.SetStateAction<boolean>>
  isTransitionLoading: boolean
  setIsTransitionLoading: React.Dispatch<React.SetStateAction<boolean>>
  
  // 筛选状态
  searchKeyword: string
  setSearchKeyword: React.Dispatch<React.SetStateAction<string>>
  selectedCategory: string
  setSelectedCategory: React.Dispatch<React.SetStateAction<string>>
  selectedScene: string
  setSelectedScene: React.Dispatch<React.SetStateAction<string>>
  selectedMaterialType: string
  setSelectedMaterialType: React.Dispatch<React.SetStateAction<string>>
  selectedPlatform: string
  setSelectedPlatform: React.Dispatch<React.SetStateAction<string>>
  selectedProductCategory: string
  setSelectedProductCategory: React.Dispatch<React.SetStateAction<string>>
  selectedMonth: string
  setSelectedMonth: React.Dispatch<React.SetStateAction<string>>
  
  // 排序状态
  sortBy: string
  setSortBy: React.Dispatch<React.SetStateAction<string>>
  sortOrder: 'desc' | 'asc'
  setSortOrder: React.Dispatch<React.SetStateAction<'desc' | 'asc'>>
  
  // 分类数据
  categories: CategoryItem[]
  setCategories: React.Dispatch<React.SetStateAction<CategoryItem[]>>
  scenes: CategoryItem[]
  setScenes: React.Dispatch<React.SetStateAction<CategoryItem[]>>
  platforms: CategoryItem[]
  setPlatforms: React.Dispatch<React.SetStateAction<CategoryItem[]>>
  productCategories: CategoryItem[]
  setProductCategories: React.Dispatch<React.SetStateAction<CategoryItem[]>>
  materialTypes: { value: string; label: string }[]
  setMaterialTypes: React.Dispatch<React.SetStateAction<{ value: string; label: string }[]>>
  months: MonthItem[]
  setMonths: React.Dispatch<React.SetStateAction<MonthItem[]>>
  
  // 分页状态
  displayedCount: number
  setDisplayedCount: React.Dispatch<React.SetStateAction<number>>
  currentPage: number
  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
  hasMore: boolean
  setHasMore: React.Dispatch<React.SetStateAction<boolean>>
  isLoadingMore: boolean
  setIsLoadingMore: React.Dispatch<React.SetStateAction<boolean>>
  totalMaterialsCount: number
  setTotalMaterialsCount: React.Dispatch<React.SetStateAction<number>>
  pageSize: number
  
  // UI状态
  isFilterCollapsed: boolean
  setIsFilterCollapsed: React.Dispatch<React.SetStateAction<boolean>>
  showUploadModal: boolean
  setShowUploadModal: React.Dispatch<React.SetStateAction<boolean>>
  themeColor: string
  setThemeColor: React.Dispatch<React.SetStateAction<string>>
  
  // 搜索防抖处理
  handleSearchChange: (value: string) => void
  searchDebounceRef: React.MutableRefObject<NodeJS.Timeout | null>
}

export function useHomeState(): UseHomeStateReturn {
  // 素材数据
  const [materials, setMaterials] = useState<Material[]>([])
  const [loading, setLoading] = useState(true)
  const [isTransitionLoading, setIsTransitionLoading] = useState(false)
  
  // 筛选状态
  const [searchKeyword, setSearchKeyword] = useState('')
  const [selectedCategory, setSelectedCategory] = useState('')
  const [selectedScene, setSelectedScene] = useState('')
  const [selectedMaterialType, setSelectedMaterialType] = useState('')
  const [selectedPlatform, setSelectedPlatform] = useState('')
  const [selectedProductCategory, setSelectedProductCategory] = useState('')
  const [selectedMonth, setSelectedMonth] = useState('')
  
  // 排序状态
  const [sortBy, setSortBy] = useState('createdAt')
  const [sortOrder, setSortOrder] = useState<'desc' | 'asc'>('desc')
  
  // 分类数据
  const [categories, setCategories] = useState<CategoryItem[]>([])
  const [scenes, setScenes] = useState<CategoryItem[]>([])
  const [platforms, setPlatforms] = useState<CategoryItem[]>([])
  const [productCategories, setProductCategories] = useState<CategoryItem[]>([])
  const [materialTypes, setMaterialTypes] = useState<{ value: string; label: string }[]>([])
  const [months, setMonths] = useState<MonthItem[]>([])
  
  // 分页状态
  const [displayedCount, setDisplayedCount] = useState(24)
  const [currentPage, setCurrentPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [isLoadingMore, setIsLoadingMore] = useState(false)
  const [totalMaterialsCount, setTotalMaterialsCount] = useState(0)
  const pageSize = 20
  
  // UI状态
  const [isFilterCollapsed, setIsFilterCollapsed] = useState(true)
  const [showUploadModal, setShowUploadModal] = useState(false)
  const [themeColor, setThemeColor] = useState('#1f2937')
  
  // 搜索防抖
  const searchDebounceRef = useRef<NodeJS.Timeout | null>(null)
  const fetchMaterialsRef = useRef<((page?: number, append?: boolean) => Promise<number>) | null>(null)
  
  // 搜索防抖处理函数
  const handleSearchChange = useCallback((value: string) => {
    setSearchKeyword(value)
    
    if (searchDebounceRef.current) {
      clearTimeout(searchDebounceRef.current)
    }
    
    searchDebounceRef.current = setTimeout(() => {
      console.log('[搜索防抖] 触发搜索:', value)
      setCurrentPage(1)
      setDisplayedCount(24)
      setHasMore(true)
      // 触发重新获取数据（通过依赖变化）
    }, 500)
  }, [])
  
  // 从URL参数恢复筛选状态
  useEffect(() => {
    if (typeof window === 'undefined') return
    
    const params = new URLSearchParams(window.location.search)
    const materialType = params.get('materialType')
    const category = params.get('category')
    const scene = params.get('scene')
    const platform = params.get('platform')
    const productCategory = params.get('productCategory')
    const month = params.get('month')
    const search = params.get('search')
    const sort = params.get('sortBy')
    const sortOrderParam = params.get('sortOrder')
    
    if (materialType) setSelectedMaterialType(materialType)
    if (category) setSelectedCategory(category)
    if (scene) setSelectedScene(scene)
    if (platform) setSelectedPlatform(platform)
    if (productCategory) setSelectedProductCategory(productCategory)
    if (month) setSelectedMonth(month)
    if (search) setSearchKeyword(search)
    if (sort) setSortBy(sort)
    if (sortOrderParam === 'asc' || sortOrderParam === 'desc') setSortOrder(sortOrderParam)
  }, [])
  
  // 同步筛选状态到URL参数
  useEffect(() => {
    if (typeof window === 'undefined') return
    
    const params = new URLSearchParams()
    if (searchKeyword) params.set('search', searchKeyword)
    if (selectedMaterialType) params.set('materialType', selectedMaterialType)
    if (selectedCategory) params.set('category', selectedCategory)
    if (selectedScene) params.set('scene', selectedScene)
    if (selectedPlatform) params.set('platform', selectedPlatform)
    if (selectedProductCategory) params.set('productCategory', selectedProductCategory)
    if (selectedMonth) params.set('month', selectedMonth)
    if (sortBy && sortBy !== 'createdAt') params.set('sortBy', sortBy)
    if (sortOrder && sortOrder !== 'desc') params.set('sortOrder', sortOrder)
    
    const newUrl = params.toString() ? `${window.location.pathname}?${params.toString()}` : window.location.pathname
    window.history.replaceState({}, '', newUrl)
  }, [searchKeyword, selectedMaterialType, selectedCategory, selectedScene, selectedPlatform, selectedProductCategory, selectedMonth, sortBy, sortOrder])
  
  return {
    // 素材数据
    materials,
    setMaterials,
    loading,
    setLoading,
    isTransitionLoading,
    setIsTransitionLoading,
    
    // 筛选状态
    searchKeyword,
    setSearchKeyword,
    selectedCategory,
    setSelectedCategory,
    selectedScene,
    setSelectedScene,
    selectedMaterialType,
    setSelectedMaterialType,
    selectedPlatform,
    setSelectedPlatform,
    selectedProductCategory,
    setSelectedProductCategory,
    selectedMonth,
    setSelectedMonth,
    
    // 排序状态
    sortBy,
    setSortBy,
    sortOrder,
    setSortOrder,
    
    // 分类数据
    categories,
    setCategories,
    scenes,
    setScenes,
    platforms,
    setPlatforms,
    productCategories,
    setProductCategories,
    materialTypes,
    setMaterialTypes,
    months,
    setMonths,
    
    // 分页状态
    displayedCount,
    setDisplayedCount,
    currentPage,
    setCurrentPage,
    hasMore,
    setHasMore,
    isLoadingMore,
    setIsLoadingMore,
    totalMaterialsCount,
    setTotalMaterialsCount,
    pageSize,
    
    // UI状态
    isFilterCollapsed,
    setIsFilterCollapsed,
    showUploadModal,
    setShowUploadModal,
    themeColor,
    setThemeColor,
    
    // 搜索防抖处理
    handleSearchChange,
    searchDebounceRef,
  }
}