'use client'

import { useCallback, useEffect, useMemo, useState, useRef, useLayoutEffect } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter, useSearchParams } from 'next/navigation'
import Image from 'next/image'
import { format } from 'date-fns'
import UploadModal from '@/components/UploadModal'
import Header from '@/components/Header'
import ChangePasswordModal from '@/components/ChangePasswordModal'
import MaterialPreviewModal from '@/components/MaterialPreviewModal'
import Modal from '@/components/ui/Modal'
import Button from '@/components/ui/Button'
import Tag from '@/components/ui/Tag'
import Avatar from '@/components/ui/Avatar'
import MaterialActionButtons from '@/components/MaterialActionButtons'
import EditMaterialModal from '@/components/EditMaterialModal'
import { useThemeStyles, cn } from '@/lib/ui-styles'
import { useDialog } from '@/components/ui/DialogProvider'
import {
  BUILTIN_TEMPLATE_NAMES as BUILTIN_TEMPLATE_NAMES_MAP,
  BUILTIN_TEMPLATE_TYPES as BUILTIN_TEMPLATE_TYPES_MAP,
} from '@/lib/upload-template-presets'

const TAG_COLOR_PALETTE = ['blue', 'green', 'orange', 'purple', 'indigo', 'pink', 'cyan'] as const
type TagColorToken = (typeof TAG_COLOR_PALETTE)[number]

const FALLBACK_MATERIAL_TYPES = Array.from(new Set(Object.values(BUILTIN_TEMPLATE_TYPES_MAP)))
const MONTH_KEYS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'] as const

const VIDEO_STATUS_META: Record<'pending' | 'processing' | 'done' | 'failed', { label: string; className: string }> = {
  pending: { label: '等待转码', className: 'bg-amber-500/90' },
  processing: { label: '转码中', className: 'bg-sky-500/90' },
  done: { label: '可预览', className: 'bg-emerald-500/90' },
  failed: { label: '转码失败', className: 'bg-rose-500/90' },
}

const normalizeMaterialType = (value: string) => (typeof value === 'string' ? value.trim() : '')

const normalizeMaterialTypeList = (list: string[]) => {
  // 保留所有值，包括自定义模板（template:...格式）
  const normalized = list.map(normalizeMaterialType).filter(Boolean)
  // 使用 Set 去重，但保留所有值（包括自定义模板）
  return Array.from(new Set(normalized))
}

interface Material {
  id: string
  userId: string
  previewUrl: string
  videoCoverUrl?: string | null
  videoPreview540Url?: string | null
  videoPreviewClipUrl?: string | null
  videoProcessingStatus?: string | null
  videoDuration?: number | null
  materialKind?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'
  displayImages?: string[]
  productModel: string
  brandName?: string | null
  seriesName?: string | null
  skuCode?: string | null
  materialTexture?: string | null
  categoryName: string
  sceneName: string
  materialType: string
  renderer: string
  renderTime?: string | null
  imageResolution?: string | null
  colorMode?: string | null
  authorName: string
  zipFileName: string
  zipFileSize: string | number
  downloadCount: number
  likeCount: number
  isLiked: boolean
  createdAt: string
  isPremium: boolean
  templateId?: string | null
  template?: {
    name: string
  } | null
  user: {
    username: string
    avatar?: string | null
  }
  rankingBadges?: RankingBadge[]
  // 音频相关字段
  audioDuration?: string | null
  audioCategory?: string | null
  audioScene?: string | null
  audioUrl?: string | null
}

// 内置预制模板名称（用于区分“自定义模板”与“预制模板”）
const BUILTIN_TEMPLATE_NAMES = new Set([
  ...Object.values(BUILTIN_TEMPLATE_NAMES_MAP),
])

// 计算素材卡片上用于区分模板的标签文案：
// - 如果绑定了“自定义模板”，优先使用模板名称（去掉尾部的“素材模板”）
// - 如果是预制模板或没有模板信息，继续使用 materialType（保持旧行为）
const getMaterialTemplateLabel = (material: Material): string => {
  const templateName = material.template?.name?.trim()
  if (templateName) {
    // 去掉尾部的“素材模板”后缀
    const stripped = templateName.replace(/\s*素材模板\s*$/g, '').trim()
    const isBuiltin =
      BUILTIN_TEMPLATE_NAMES.has(templateName) ||
      BUILTIN_TEMPLATE_NAMES.has(stripped + '素材模板') ||
      Object.values(BUILTIN_TEMPLATE_TYPES_MAP).includes(stripped)

    // 非预制模板：认为是“自定义模板”，展示模板名称
    if (!isBuiltin) {
      return stripped || templateName
    }
  }

  // 预制模板或没有模板信息时，使用 materialType
  return material.materialType
}

type RankingBadge = {
  label: string
}

type TemplateFieldMeta = {
  key: string
  label: string
  type: string
  visibleOnHomeFilter?: boolean
  optionsStatic?: string | null
}

type HomeFilterOption = {
  label: string
  value: string
  count?: number
}

type HomeFilterFieldConfig = {
  key: string
  label: string
  type?: string
  options: HomeFilterOption[]
  /** 该字段有非空值的素材总数，用于"全部"按钮显示 */
  totalCount?: number
}

type ShareTokenItem = {
  id: string
  materialId: string
  createdByUserId: string
  createdByName: string
  createdAt: string
  expiresAt: string
  revokedAt: string | null
  status: 'active' | 'expired' | 'revoked'
}

export default function Home() {
  const { data: session, status } = useSession()
  const router = useRouter()
  const searchParams = useSearchParams()
  const styles = useThemeStyles()
  const { alert, confirm } = useDialog()
  const currentUserId = (session?.user as any)?.id || ''
  const [materials, setMaterials] = useState<Material[]>([])
  const [loading, setLoading] = useState(true)
  const [showUploadModal, setShowUploadModal] = useState(false)
  const [searchKeyword, setSearchKeyword] = useState('')
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedCategory, setSelectedCategory] = useState('')
  const [selectedScene, setSelectedScene] = useState('')
  const [selectedMaterialType, setSelectedMaterialType] = useState('') // 素材类型筛选（内置模板）或模板ID（自定义模板）
  const [selectedTemplateId, setSelectedTemplateId] = useState('') // 自定义模板ID筛选
  const [selectedPlatform, setSelectedPlatform] = useState('') // 平台分类筛选
  const [materialTypes, setMaterialTypes] = useState<string[]>([])
  const [materialTypesCount, setMaterialTypesCount] = useState<Record<string, number>>({})
  const [homeFilterFields, setHomeFilterFields] = useState<Record<string, HomeFilterFieldConfig>>({})
  const [homeFilterSelections, setHomeFilterSelections] = useState<Record<string, string>>({})
  const [homeFilterReady, setHomeFilterReady] = useState(false)
  const [downloadingIds, setDownloadingIds] = useState<Set<string>>(new Set())
  const [downloadProgresses, setDownloadProgresses] = useState<Record<string, number>>({})
  const [selectedYear, setSelectedYear] = useState('')
  const [selectedMonth, setSelectedMonth] = useState('')
  const [months, setMonths] = useState<Array<{ value: string; label: string; count: number }>>([])
  const [sortBy, setSortBy] = useState<'createdAt' | 'downloadCount' | 'likeCount'>('createdAt')
  const [previewMaterial, setPreviewMaterial] = useState<Material | null>(null)
  const [totalMaterialsCount, setTotalMaterialsCount] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)
  const [shareUrl, setShareUrl] = useState<string | null>(null)
  const [shareMaterialId, setShareMaterialId] = useState<string | null>(null)
  const [shareTokens, setShareTokens] = useState<ShareTokenItem[]>([])
  const [shareTokensLoading, setShareTokensLoading] = useState(false)
  const [shareTokensError, setShareTokensError] = useState<string | null>(null)
  const [showShareModal, setShowShareModal] = useState(false)
  const [showShareNotification, setShowShareNotification] = useState(false)
  const searchDebounceRef = useRef<number | null>(null)
  const [isGridTransitioning, setIsGridTransitioning] = useState(false)
  const videoRefs = useRef<Record<string, HTMLVideoElement | null>>({})
  const [playingVideoIds, setPlayingVideoIds] = useState<Set<string>>(new Set())
  // 音频播放状态
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const [playingAudioId, setPlayingAudioId] = useState<string | null>(null)
  const [audioProgress, setAudioProgress] = useState(0) // 0-100
  const chipListRef = useRef<HTMLDivElement>(null)
  const copyTextToClipboard = async (text: string) => {
    if (!text) return false
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text)
        return true
      }
    } catch (error) {
      console.warn('[Share] Primary clipboard copy failed:', error)
    }

    try {
      const textarea = document.createElement('textarea')
      textarea.value = text
      textarea.style.position = 'fixed'
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      textarea.focus()
      textarea.select()
      const successful = document.execCommand('copy')
      document.body.removeChild(textarea)
      return successful
    } catch (error) {
      console.error('[Share] Fallback clipboard copy failed:', error)
      return false
    }
  }

  const [themeColor, setThemeColor] = useState('#1f2937') // 主题颜色
  const [homeDeleteButtonAdminOnly, setHomeDeleteButtonAdminOnly] = useState(true) // 首页删除按钮是否仅管理员可见
  const [showIntranetTip, setShowIntranetTip] = useState(false) // 内网切换提示
  const [showFilterModal, setShowFilterModal] = useState(false) // 筛选弹窗
  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false) // 修改密码弹窗
  const [isDefaultPassword, setIsDefaultPassword] = useState(false) // 是否使用默认密码
  const [initialPasswordCheckDone, setInitialPasswordCheckDone] = useState(false) // 初始密码检查是否完成
  const [isScrolled, setIsScrolled] = useState(false) // 是否已滚动
  const searchSectionRef = useRef<HTMLDivElement>(null) // 搜索区域引用（包含TAG和搜索框）
  const searchStartScrollStateRef = useRef<boolean>(false) // 记录搜索开始时的滚动状态
  const [materialRankings, setMaterialRankings] = useState<{
    downloads: string[]
    likes: string[]
    premium: string[]
  }>({
    downloads: [],
    likes: [],
    premium: [],
  })
  const INITIAL_BATCH_COUNT = 24
  const [displayedCount, setDisplayedCount] = useState(INITIAL_BATCH_COUNT) // 初始显示数量
  const [isLoadingMore, setIsLoadingMore] = useState(false)
  const [hasMoreMaterials, setHasMoreMaterials] = useState(true)
  const loadMoreRef = useRef<HTMLDivElement>(null)
  const selectedYearMonth = selectedYear && selectedMonth ? `${selectedYear}-${selectedMonth}` : ''
  const homeFilterCount = Object.keys(homeFilterSelections).length
  const filterIndicatorCount =
    [selectedCategory, selectedScene, selectedPlatform, selectedYear, selectedYearMonth].filter(Boolean).length +
    homeFilterCount
  const hasActiveFilters =
    Boolean(searchQuery) ||
    Boolean(selectedCategory) ||
    Boolean(selectedScene) ||
    Boolean(selectedPlatform) ||
    Boolean(selectedYear) ||
    Boolean(selectedYearMonth) ||
    homeFilterCount > 0
  const pageSize = 20
  const categoryField = homeFilterFields.categoryName
  const sceneField = homeFilterFields.sceneName
  const platformField = homeFilterFields.platformName
  const showCategoryFilter = homeFilterReady ? Boolean(categoryField) : true
  const showSceneFilter = homeFilterReady ? Boolean(sceneField) : true
  const showPlatformFilter = homeFilterReady ? Boolean(platformField) : false
  const categoryLabel = categoryField?.label || '使用店铺'
  const sceneLabel = sceneField?.label || '场景类别'
  const platformLabel = platformField?.label || '平台分类'
  const categoryOptions = useMemo(() => categoryField?.options ?? [], [categoryField])
  const sceneOptions = useMemo(() => sceneField?.options ?? [], [sceneField])
  const platformOptions = useMemo(() => platformField?.options ?? [], [platformField])
  const dynamicHomeFilterEntries = useMemo(
    () => {
      const baseKeys = new Set(['categoryName', 'sceneName', 'platformName'])
      return Object.entries(homeFilterFields).filter(
        ([key, field]) => !baseKeys.has(key) && (field.options?.length ?? 0) > 0
      )
    },
    [homeFilterFields]
  )
  const orderedHomeFilterKeys = useMemo(() => Object.keys(homeFilterFields), [homeFilterFields])
  const yearMonthStats = useMemo(() => {
    const map: Record<string, { count: number; months: Record<string, number> }> = {}

    months.forEach((item) => {
      const [year, monthValue] = item.value.split('-')
      if (!year || !monthValue) return

      if (!map[year]) {
        map[year] = { count: 0, months: {} }
      }

      const numericCount = item.count ?? 0
      map[year].count += numericCount
      map[year].months[monthValue] = numericCount
    })

    return map
  }, [months])

  const yearOptions = useMemo(
    () =>
      Object.entries(yearMonthStats)
        .map(([year, data]) => ({ year, count: data.count }))
        .filter(({ count }) => count > 0)
        .sort((a, b) => b.year.localeCompare(a.year)),
    [yearMonthStats]
  )

  const availableMonths = useMemo(() => {
    if (!selectedYear) return []
    const monthCounts = yearMonthStats[selectedYear]?.months ?? {}
    return MONTH_KEYS.filter((key) => (monthCounts[key] ?? 0) > 0)
  }, [selectedYear, yearMonthStats])

  const monthCountsForSelectedYear = selectedYear ? yearMonthStats[selectedYear]?.months ?? {} : {}
  const selectedMonthLabel = useMemo(() => {
    if (!selectedYearMonth) return ''
    const match = months.find((item) => item.value === selectedYearMonth)
    if (match) return match.label
    if (selectedYear && selectedMonth) {
      return `${selectedYear}年${parseInt(selectedMonth, 10)}月`
    }
    return selectedYearMonth
  }, [months, selectedYearMonth, selectedYear, selectedMonth])

  const filterCardClass =
    'space-y-1.5 pb-3 border-b border-slate-200 dark:border-slate-700 last:border-b-0 last:pb-0'
  const filterCardTitleClass = 'text-sm font-semibold text-slate-900 dark:text-white'
  const buildFilterPillClass = (isActive: boolean) =>
    cn(
      'px-3 py-1.5 rounded-md text-xs font-medium transition-colors border flex items-center gap-1.5 whitespace-nowrap',
      isActive
        ? 'text-white'
        : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-400 dark:hover:border-slate-500'
    )
  const getFilterPillStyle = (isActive: boolean) =>
    isActive ? { backgroundColor: themeColor, borderColor: themeColor } : undefined

  const applyMaterialTypeList = useCallback((rawList?: string[]) => {
    console.log('[Home] applyMaterialTypeList called with:', rawList)
    const normalizedList = rawList && rawList.length > 0 ? normalizeMaterialTypeList(rawList) : []
    console.log('[Home] Normalized list:', normalizedList)
    const finalList = normalizedList.length > 0 ? normalizedList : FALLBACK_MATERIAL_TYPES
    console.log('[Home] Final material types list to set:', finalList)
    setMaterialTypes(finalList)

    // 如果当前选中的分类不在新的列表中，自动清空以避免"选中却无按钮"
    setSelectedMaterialType((prev) => {
      if (prev && !finalList.includes(prev)) {
        return ''
      }
      return prev
    })

    // 检查自定义模板是否还在列表中
    setSelectedTemplateId((prev) => {
      if (!prev) return prev
      const templateStillExists = finalList.some((t) => t.startsWith(`template:${prev}:`))
      return templateStillExists ? prev : ''
    })
  }, [])

  const handleMaterialTypeSelection = useCallback(
    (rawValue: string) => {
      // 如果是自定义模板（格式：template:模板ID:模板名称）
      if (rawValue.startsWith('template:')) {
        const parts = rawValue.split(':')
        const templateId = parts[1]
        const templateName = parts.slice(2).join(':') // 支持名称中包含冒号的情况
        setSelectedTemplateId((prev) => (prev === templateId ? '' : templateId))
        setSelectedMaterialType('') // 清空内置模板选择
      } else {
        // 内置模板
        const normalizedValue = normalizeMaterialType(rawValue)
        if (!normalizedValue) {
          setSelectedMaterialType('')
          setSelectedTemplateId('') // 清空自定义模板选择
          return
        }
        setSelectedMaterialType((prev) => (prev === normalizedValue ? '' : normalizedValue))
        setSelectedTemplateId('') // 清空自定义模板选择
      }
    },
    []
  )

  const getRankingBadges = useCallback(
    (materialId: string, overrides?: { isPremium?: boolean }): RankingBadge[] => {
      const badges: RankingBadge[] = []
      const premiumIncluded =
        typeof overrides?.isPremium === 'boolean'
          ? overrides.isPremium
          : materialRankings.premium.includes(materialId)

      const downloadIndex = materialRankings.downloads.indexOf(materialId)
      const likeIndex = materialRankings.likes.indexOf(materialId)

      if (premiumIncluded) {
        badges.push({ label: '精品' })
      }
      if (downloadIndex > -1 && downloadIndex < 10) {
        badges.push({ label: '下载榜' })
      }
      if (likeIndex > -1 && likeIndex < 10) {
        badges.push({ label: '点赞榜' })
      }
      return badges
    },
    [materialRankings]
  )

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/login')
    }
  }, [status, router])

  // 初始管理员强制改密检查
  useEffect(() => {
    const checkInitialAdminPassword = async () => {
      if (status !== 'authenticated') {
        setInitialPasswordCheckDone(false)
        return
      }

      try {
        const passwordCheck = await fetch('/api/user/check-default-password')
        const passwordData = await passwordCheck.json()
        if (passwordData.isDefaultPassword) {
          console.log('检测到系统初始化账号仍需首次改密，强制修改密码')
          setIsDefaultPassword(true)
          setShowChangePasswordModal(true)
        } else {
          setIsDefaultPassword(false)
          setShowChangePasswordModal(false)
        }
      } catch (error) {
        console.error('初始管理员改密检查失败:', error)
      } finally {
        setInitialPasswordCheckDone(true)
      }
    }

    checkInitialAdminPassword()
  }, [status, session?.user?.email])

  // 检查是否有未完成的上传（断点续传）
  useEffect(() => {
    if (status !== 'authenticated') return
    
    const checkUnfinishedUpload = () => {
      try {
        const savedState = localStorage.getItem('uploadState')
        if (savedState) {
          const data = JSON.parse(savedState)
          // 检查是否在24小时内（避免过期数据）
          const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000
          // 只有在有实际文件且时间戳有效时才打开上传面板
          if (data.timestamp && data.timestamp > oneDayAgo && data.files && data.files.length > 0) {
            // 如果有未完成的上传，自动打开上传模态框
            // UploadModal 组件内部会检查并显示恢复对话框
            setShowUploadModal(true)
          } else {
            // 超过24小时或没有有效文件，清除过期数据
            localStorage.removeItem('uploadState')
          }
        }
      } catch (e) {
        console.error('Failed to check unfinished upload:', e)
        localStorage.removeItem('uploadState')
      }
    }
    
    checkUnfinishedUpload()
  }, [status])

  // 检查是否需要显示内网切换提示（使用后端判断）
  useEffect(() => {
    const checkNetworkStatus = async () => {
      if (status !== 'authenticated') return
      
      const tipDismissed = sessionStorage.getItem('intranet_tip_dismissed')
      if (tipDismissed === 'true') return
      
      try {
        // 调用后端API获取准确的网络状态
        const response = await fetch('/api/network-status')
        const data = await response.json()
        
        if (data.success) {
          console.log(`[Network Status] isIntranet: ${data.isIntranet}, isPublicDomain: ${data.isPublicDomain}`)
          
          // 如果用户在内网但访问的是公网域名，显示切换提示
          if (data.isIntranet && data.isPublicDomain) {
            console.log('💡 后端检测到用户在内网访问公网，显示切换提示')
            setShowIntranetTip(true)
          }
        }
      } catch (error) {
        console.error('网络状态检测失败:', error)
      }
    }
    
    checkNetworkStatus()
  }, [status])

  const handleDismissIntranetTip = () => {
    sessionStorage.setItem('intranet_tip_dismissed', 'true')
    setShowIntranetTip(false)
  }

  const handleSwitchToIntranet = () => {
    const url = process.env.NEXT_PUBLIC_INTRANET_URL
    if (url) {
      window.location.href = url
    } else {
      alert({
        title: '提示',
        message: '未配置内网地址，请联系管理员设置 NEXT_PUBLIC_INTRANET_URL',
        variant: 'warning',
      })
    }
  }

  // 获取主题颜色和系统级开关
  const fetchThemeColor = useCallback(async () => {
    try {
      const response = await fetch('/api/system-settings')
      if (response.ok) {
        const data = await response.json()
        setThemeColor(data.headerBgColor || '#1f2937')
        // 首页删除按钮模式：默认仅管理员可见；当后端配置为 ALL 时，所有人都能看到按钮
        setHomeDeleteButtonAdminOnly((data.homeDeleteButtonMode ?? 'ADMIN_ONLY') !== 'ALL')
      }
    } catch (error) {
      console.error('获取主题颜色失败:', error)
    }
  }, [])

  // 当搜索关键词变化时，记录搜索开始时的滚动状态
  useEffect(() => {
    if (searchKeyword) {
      // 记录搜索开始时的滚动状态
      searchStartScrollStateRef.current = isScrolled
    } else {
      // 搜索清空时，重置记录
      searchStartScrollStateRef.current = false
    }
  }, [searchKeyword, isScrolled])
  
  // 滚动监听，检测搜索区域是否可见
  useEffect(() => {
    const handleScroll = () => {
      if (!searchSectionRef.current) return
      
      // 如果有搜索关键词，保持搜索开始时的滚动状态，不要因为滚动而改变
      // 这样搜索时搜索栏不会自动展开或收缩
      if (searchKeyword) {
        setIsScrolled(searchStartScrollStateRef.current)
        return
      }
      
      const rect = searchSectionRef.current.getBoundingClientRect()
      // 当搜索区域的底部滚动到窗口顶部以上时，显示收缩的顶部栏
      // 使用一个小的阈值（100px）来提前触发，让过渡更自然
      const threshold = 100
      const isScrolledPast = rect.bottom < threshold
      
      setIsScrolled(isScrolledPast)
    }

    window.addEventListener('scroll', handleScroll, { passive: true })
    handleScroll() // 初始检查
    
    return () => window.removeEventListener('scroll', handleScroll)
  }, [materialTypes.length, searchKeyword])

  // 获取素材排行榜数据
  const fetchMaterialRankings = useCallback(async () => {
    try {
      const response = await fetch('/api/material-rankings')
      if (response.ok) {
        const data = await response.json()
        setMaterialRankings({
          downloads: Array.isArray(data?.downloads) ? data.downloads.slice(0, 10) : [],
          likes: Array.isArray(data?.likes) ? data.likes.slice(0, 10) : [],
          premium: Array.isArray(data?.premium) ? data.premium.slice(0, 10) : [],
        })
      }
    } catch (error) {
      console.error('Error fetching material rankings:', error)
    }
  }, [])

  const fetchMaterialTypesCount = useCallback(async (types: string[]) => {
    try {
      const counts: Record<string, number> = {}
      await Promise.all(
        types.map(async (type) => {
          // 如果是自定义模板（格式：template:模板ID:模板名称），使用 templateId 参数
          if (type.startsWith('template:')) {
            const parts = type.split(':')
            const templateId = parts[1] // 提取模板ID
            const response = await fetch(`/api/materials?templateId=${encodeURIComponent(templateId)}&pageSize=1`)
            if (response.ok) {
              const data = await response.json()
              counts[type] = data.totalCount || 0
            } else {
              counts[type] = 0
            }
          } else {
            // 内置模板使用 materialType 参数
            const response = await fetch(`/api/materials?materialType=${encodeURIComponent(type)}&pageSize=1`)
            if (response.ok) {
              const data = await response.json()
              counts[type] = data.totalCount || 0
            } else {
              counts[type] = 0
            }
          }
        })
      )
      setMaterialTypesCount(counts)
    } catch (error) {
      console.error('Error fetching material types count:', error)
    }
  }, [])

  const fetchMaterialTypes = useCallback(async () => {
    try {
      const response = await fetch('/api/material-types', {
        cache: 'no-store',
      })
      if (response.ok) {
        const data = await response.json()
        console.log('[Home] Fetched material types from API:', data)
        console.log('[Home] Data type:', typeof data, 'Is array:', Array.isArray(data), 'Length:', Array.isArray(data) ? data.length : 'N/A')
        if (Array.isArray(data) && data.length > 0) {
          console.log('[Home] Applying material type list:', data)
          console.log('[Home] Custom types in list:', data.filter(t => t.startsWith('template:')))
          applyMaterialTypeList(data)
          // 获取每个类型的素材数量
          fetchMaterialTypesCount(data)
          return
        }
        if (Array.isArray(data?.types) && data.types.length > 0) {
          console.log('[Home] Applying material type list (nested):', data.types)
          applyMaterialTypeList(data.types)
          fetchMaterialTypesCount(data.types)
          return
        }
      }
      // 接口返回异常或为空时使用兜底
      console.warn('[Home] Material types API returned empty or invalid data, using fallback')
      applyMaterialTypeList(FALLBACK_MATERIAL_TYPES)
      fetchMaterialTypesCount(FALLBACK_MATERIAL_TYPES)
    } catch (error) {
      console.error('[Home] Error fetching material types:', error)
      applyMaterialTypeList(FALLBACK_MATERIAL_TYPES)
      fetchMaterialTypesCount(FALLBACK_MATERIAL_TYPES)
    }
  }, [applyMaterialTypeList, fetchMaterialTypesCount])

  const fetchHomeFilterFields = useCallback(async () => {
    try {
      const response = await fetch('/api/home-filter-fields', {
        cache: 'no-store',
      })
      if (!response.ok) {
        throw new Error('Fetch failed')
      }
      const data = await response.json()
      const map: Record<string, HomeFilterFieldConfig> = {}
      if (Array.isArray(data?.fields)) {
        data.fields.forEach((field: HomeFilterFieldConfig) => {
          if (!field?.key) return
          // 解析totalCount（该字段有非空值的素材总数）
          const fieldTotalCount = typeof field.totalCount === 'number' ? field.totalCount : undefined
          map[field.key] = {
            key: field.key,
            label: field.label || field.key,
            type: field.type,
            totalCount: fieldTotalCount,
            options: Array.isArray(field.options)
              ? field.options
                  .map((option: any) => {
                    if (!option) return null
                    if (typeof option === 'string') {
                      return { label: option, value: option }
                    }
                    if (typeof option.value === 'string') {
                      const count =
                        typeof option.count === 'number'
                          ? option.count
                          : typeof option.count === 'string'
                          ? Number(option.count)
                          : undefined
                      return {
                        label: option.label || option.value,
                        value: option.value,
                        count: Number.isFinite(count) ? count : undefined,
                      }
                    }
                    return null
                  })
                  .filter((option): option is HomeFilterOption => Boolean(option))
              : [],
          }
        })
      }
      setHomeFilterFields(map)
    } catch (error) {
      console.error('Error fetching home filter fields:', error)
      setHomeFilterFields({})
    } finally {
      setHomeFilterReady(true)
    }
  }, [])

  const fetchMonthsAndTotal = useCallback(async () => {
    try {
      const response = await fetch('/api/materials/stats')
      if (response.ok) {
        const data = await response.json()
        setMonths(data.months || [])
        setTotalMaterialsCount(data.total || 0)
      }
    } catch (error) {
      console.error('Error fetching months:', error)
    }
  }, [])

  const fetchMaterials = useCallback(
    async (page = 1, append = false) => {
      try {
        if (!append) {
          // 首次加载时设置loading状态
          setLoading(true)
          setHasMoreMaterials(true)
        }

        const params = new URLSearchParams()
        if (searchQuery) params.append('search', searchQuery)
        if (selectedCategory) params.append('category', selectedCategory)
        if (selectedScene) params.append('scene', selectedScene)
        if (selectedMaterialType) params.append('materialType', selectedMaterialType)
        if (selectedTemplateId) params.append('templateId', selectedTemplateId)
        if (selectedPlatform) params.append('platform', selectedPlatform)
        if (selectedYearMonth) {
          params.append('month', selectedYearMonth)
        } else if (selectedYear) {
          params.append('year', selectedYear)
        }
        Object.entries(homeFilterSelections).forEach(([key, value]) => {
          if (value) {
            params.append(`homeField_${key}`, value)
          }
        })
        if (sortBy) params.append('sortBy', sortBy)
        params.append('page', page.toString())
        params.append('pageSize', pageSize.toString())

        const url = `/api/materials${params.toString() ? '?' + params.toString() : ''}`
        console.log('[Home] Fetching materials from:', url)
        const response = await fetch(url)
        if (response.ok) {
          const data = await response.json()
          const materialsList = (Array.isArray(data.materials) ? data.materials : Array.isArray(data) ? data : []) as Material[]
          console.log('[Home] Received materials:', materialsList.length, 'items')

          let appendedItems: Material[] = materialsList
          if (append) {
            setMaterials((prev) => {
              const existingIds = new Set(prev.map((item) => item.id))
              const deduped = materialsList.filter((item) => !existingIds.has(item.id))
              appendedItems = deduped
              if (deduped.length === 0) return prev
              return [...prev, ...deduped]
            })
          } else {
            setMaterials(materialsList)
            setDisplayedCount(Math.min(INITIAL_BATCH_COUNT, materialsList.length))
          }

          const appendedCount = append ? appendedItems.length : materialsList.length

          setCurrentPage(page)
          const nextTotalPages = data.totalPages || 1
          setHasMoreMaterials(appendedCount > 0 && page < nextTotalPages)
          if (typeof data.totalCount === 'number') {
            setTotalMaterialsCount(data.totalCount)
          } else if (!append) {
            setTotalMaterialsCount(materialsList.length)
          }

          // 获取月份统计和总数
          fetchMonthsAndTotal()
          return appendedCount
        } else {
          console.error('[Home] Failed to fetch materials:', response.status, response.statusText)
        }
      } catch (error) {
        console.error('Error fetching materials:', error)
        if (!append) {
          setMaterials([])
          setDisplayedCount(0)
        }
      } finally {
        if (!append) {
          // 清除loading状态
          setLoading(false)
        }
      }
      return 0
    },
    [
      fetchMonthsAndTotal,
      homeFilterSelections,
      pageSize,
      searchQuery,
      selectedCategory,
      selectedScene,
      selectedMaterialType,
      selectedTemplateId,
      selectedPlatform,
      selectedYear,
      selectedYearMonth,
      sortBy,
    ]
  )

  const handleLoadMore = useCallback(async () => {
    if (isLoadingMore) return

    if (displayedCount < materials.length) {
      setIsLoadingMore(true)
      setDisplayedCount((prev) => Math.min(prev + INITIAL_BATCH_COUNT, materials.length))
      setIsLoadingMore(false)
      return
    }

    if (!hasMoreMaterials) return

    setIsLoadingMore(true)
    const appended = await fetchMaterials(currentPage + 1, true)
    if (appended > 0) {
      setDisplayedCount((prev) => Math.min(prev + INITIAL_BATCH_COUNT, materials.length + appended))
    }
    setIsLoadingMore(false)
  }, [displayedCount, materials.length, hasMoreMaterials, fetchMaterials, currentPage, isLoadingMore])

  // IntersectionObserver实现自动懒加载
  useEffect(() => {
    if (!loadMoreRef.current) return

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          handleLoadMore()
        }
      },
      { threshold: 0.2 }
    )

    observer.observe(loadMoreRef.current)

    return () => {
      observer.disconnect()
    }
  }, [handleLoadMore, displayedCount, materials.length, hasMoreMaterials])

  useEffect(() => {
    fetchMaterials()
    fetchMaterialTypes()
    fetchHomeFilterFields()
    fetchThemeColor()
    fetchMaterialRankings()
  }, [fetchMaterials, fetchMaterialTypes, fetchHomeFilterFields, fetchThemeColor, fetchMaterialRankings])

  // 监听后台模板改动事件，自动刷新筛选字段和素材类型
  useEffect(() => {
    const handleStorageChange = (e: StorageEvent) => {
      if (e.key === 'templates-updated') {
        fetchMaterialTypes()
        fetchHomeFilterFields()
      }
    }

    const handleMessage = (e: MessageEvent) => {
      if (e.data?.type === 'templates-updated') {
        fetchMaterialTypes()
        fetchHomeFilterFields()
      }
    }

    // 监听 localStorage 变化（跨标签页）
    window.addEventListener('storage', handleStorageChange)
    
    // 监听 BroadcastChannel 消息（同源跨标签页）
    const channel = new BroadcastChannel('templates-channel')
    channel.addEventListener('message', handleMessage)

    return () => {
      window.removeEventListener('storage', handleStorageChange)
      channel.removeEventListener('message', handleMessage)
      channel.close()
    }
  }, [fetchMaterialTypes, fetchHomeFilterFields])

  useEffect(() => {
    if (selectedCategory && !categoryOptions.some((option) => option.value === selectedCategory)) {
      setSelectedCategory('')
    }
  }, [categoryOptions, selectedCategory])

  useEffect(() => {
    if (selectedScene && !sceneOptions.some((option) => option.value === selectedScene)) {
      setSelectedScene('')
    }
  }, [sceneOptions, selectedScene])

  useEffect(() => {
    if (selectedPlatform && !platformOptions.some((option) => option.value === selectedPlatform)) {
      setSelectedPlatform('')
    }
  }, [platformOptions, selectedPlatform])

  useEffect(() => {
    if (status === 'authenticated') {
      fetchMaterials()
    }
  }, [status, fetchMaterials])

  useEffect(() => {
    const validIds = new Set(materials.map((item) => item.id))
    Object.keys(videoRefs.current).forEach((id) => {
      if (!validIds.has(id)) {
        delete videoRefs.current[id]
      }
    })
  }, [materials])

  // 格式化文件大小
  const formatFileSize = (bytes: string | number): string => {
    const size = typeof bytes === 'string' ? parseInt(bytes) : bytes
    if (size === 0) return '未知'
    const units = ['B', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(size) / Math.log(1024))
    return `${(size / Math.pow(1024, i)).toFixed(2)} ${units[i]}`
  }

  const formatVideoDuration = (seconds?: number | null): string => {
    if (!seconds || Number.isNaN(seconds) || seconds <= 0) return ''
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
  }

  const handleCardVideoHover = useCallback((materialId: string, shouldPlay: boolean) => {
    const videoEl = videoRefs.current[materialId]
    if (!videoEl) return
    
    if (shouldPlay) {
      // 更新播放状态
      setPlayingVideoIds(prev => new Set(prev).add(materialId))
      try {
        // 先暂停并重置，避免之前的播放请求干扰
        videoEl.pause()
        videoEl.currentTime = 0
        
        // 使用 requestAnimationFrame 确保 DOM 更新后再播放
        requestAnimationFrame(() => {
          const playPromise = videoEl.play()
          if (playPromise && typeof playPromise.catch === 'function') {
            playPromise.catch((error) => {
              // 忽略 AbortError，这是正常的（当快速移入移出时）
              if (error.name !== 'AbortError') {
                console.warn('[Home] Video preview play failed:', error)
              }
            })
          }
        })
      } catch (error) {
        // 忽略 AbortError
        if (error instanceof Error && error.name !== 'AbortError') {
          console.warn('[Home] Video preview play exception:', error)
        }
      }
    } else {
      // 更新播放状态
      setPlayingVideoIds(prev => {
        const next = new Set(prev)
        next.delete(materialId)
        return next
      })
      // 暂停时也使用 requestAnimationFrame，避免与播放请求冲突
      requestAnimationFrame(() => {
        try {
          videoEl.pause()
          videoEl.currentTime = 0
        } catch (error) {
          // 忽略暂停时的错误
        }
      })
    }
  }, [])

  // 音频播放控制
  const handleAudioPlay = useCallback((materialId: string, audioUrl: string) => {
    // 如果点击的是当前正在播放的音频，则暂停
    if (playingAudioId === materialId) {
      if (audioRef.current) {
        audioRef.current.pause()
      }
      setPlayingAudioId(null)
      setAudioProgress(0)
      return
    }

    // 停止之前的音频
    if (audioRef.current) {
      audioRef.current.pause()
    }

    // 创建新的音频元素
    const audio = new Audio(audioUrl)
    audioRef.current = audio

    // 监听播放进度
    audio.addEventListener('timeupdate', () => {
      if (audio.duration) {
        setAudioProgress((audio.currentTime / audio.duration) * 100)
      }
    })

    // 监听播放结束
    audio.addEventListener('ended', () => {
      setPlayingAudioId(null)
      setAudioProgress(0)
    })

    // 监听错误
    audio.addEventListener('error', (e) => {
      console.error('[Home] Audio play error:', e)
      setPlayingAudioId(null)
      setAudioProgress(0)
    })

    // 开始播放
    audio.play().then(() => {
      setPlayingAudioId(materialId)
    }).catch((error) => {
      console.error('[Home] Audio play failed:', error)
      setPlayingAudioId(null)
    })
  }, [playingAudioId])

  // 组件卸载时清理音频
  useEffect(() => {
    return () => {
      if (audioRef.current) {
        audioRef.current.pause()
        audioRef.current = null
      }
    }
  }, [])

  const resolveVideoStatus = (status?: string | null): 'pending' | 'processing' | 'done' | 'failed' => {
    const normalized = (status || '').trim().toLowerCase()
    if (normalized === 'processing' || normalized === 'done' || normalized === 'failed' || normalized === 'pending') {
      return normalized
    }
    return 'pending'
  }

  const formatShareDateTime = (value?: string | null) => {
    if (!value) return '-'
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return '-'
    return format(date, 'yyyy-MM-dd HH:mm')
  }

  const getShareTokenStatusMeta = (status: ShareTokenItem['status']) => {
    if (status === 'active') {
      return {
        label: '有效',
        className: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-300',
      }
    }
    if (status === 'expired') {
      return {
        label: '已过期',
        className: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-300',
      }
    }
    return {
      label: '已撤销',
      className: 'border-slate-200 bg-slate-100 text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400',
    }
  }

  const fetchShareTokens = useCallback(async (materialId: string) => {
    setShareTokensLoading(true)
    setShareTokensError(null)
    try {
      const response = await fetch(`/api/materials/share/tokens?materialId=${encodeURIComponent(materialId)}`, {
        cache: 'no-store',
      })
      const data = await response.json().catch(() => ({}))
      if (!response.ok) {
        throw new Error(data?.error || '获取分享链接失败')
      }
      setShareTokens(Array.isArray(data?.tokens) ? data.tokens : [])
    } catch (error) {
      console.error('[Share] Fetch share tokens failed:', error)
      setShareTokens([])
      setShareTokensError(error instanceof Error ? error.message : '获取分享链接失败')
    } finally {
      setShareTokensLoading(false)
    }
  }, [])

  // 分享功能
  const handleShare = async (materialId: string) => {
    try {
      const response = await fetch('/api/materials/share', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ materialId }),
      })

      const data = await response.json().catch(() => ({}))
      if (!response.ok || !data?.shareToken) {
        throw new Error(data?.error || '创建分享链接失败')
      }

      const base = process.env.NEXT_PUBLIC_PORTAL_BASE_URL || window.location.origin
      const url = `${base}/share/${materialId}?token=${encodeURIComponent(data.shareToken)}`
      setShareUrl(url)
      setShareMaterialId(materialId)
      setShowShareModal(true)
      void fetchShareTokens(materialId)
      const copied = await copyTextToClipboard(url)
      if (copied) {
        setShowShareNotification(true)
        setTimeout(() => setShowShareNotification(false), 2000)
      }
    } catch (error) {
      console.error('[Share] Create share token failed:', error)
      alert({
        title: '分享失败',
        message: error instanceof Error ? error.message : '创建分享链接失败，请稍后重试',
        variant: 'error',
      })
    }
  }

  // 实时搜索：输入时更新 searchQuery，但不做整页刷新，只重新请求列表数据
  useEffect(() => {
    if (searchDebounceRef.current) {
      window.clearTimeout(searchDebounceRef.current)
    }
    searchDebounceRef.current = window.setTimeout(() => {
      setSearchQuery(searchKeyword.trim())
    }, 400)

    return () => {
      if (searchDebounceRef.current) {
        window.clearTimeout(searchDebounceRef.current)
      }
    }
  }, [searchKeyword])

  const copyShareUrl = async () => {
    if (shareUrl) {
      const copied = await copyTextToClipboard(shareUrl)
      if (copied) {
        alert({
          title: '复制成功',
          message: '链接已复制，可直接分享给同事',
          variant: 'success',
        })
        return
      }
      alert({
        title: '复制失败',
        message: '浏览器未授予复制权限，请手动复制',
        variant: 'error',
      })
    }
  }

  const handleRevokeShareToken = async (tokenId: string) => {
    const confirmed = await confirm({
      title: '撤销分享链接',
      message: '撤销后，持有该链接的人将不能继续访问这个素材。确定要撤销吗？',
      confirmText: '撤销',
      cancelText: '取消',
      variant: 'danger',
    })

    if (!confirmed) return

    try {
      const response = await fetch(`/api/materials/share/tokens/${encodeURIComponent(tokenId)}`, {
        method: 'DELETE',
      })
      const data = await response.json().catch(() => ({}))
      if (!response.ok) {
        throw new Error(data?.error || '撤销分享链接失败')
      }

      if (shareMaterialId) {
        await fetchShareTokens(shareMaterialId)
      }

      alert({
        title: '已撤销',
        message: '该分享链接已失效',
        variant: 'success',
      })
    } catch (error) {
      console.error('[Share] Revoke share token failed:', error)
      alert({
        title: '撤销失败',
        message: error instanceof Error ? error.message : '撤销分享链接失败，请稍后重试',
        variant: 'error',
      })
    }
  }

  // TAG 按钮区域不再做宽度动画，改为简单左对齐，避免任何因测量/过渡导致的整体闪动

  const renderMaterialTypeChips = () => {
    const typeList = materialTypes.length > 0 ? materialTypes : FALLBACK_MATERIAL_TYPES
    if (!typeList.length) return null
    
    // 按素材数量降序排序
    const sortedTypeList = [...typeList].sort((a, b) => {
      const countA = materialTypesCount[a] ?? 0
      const countB = materialTypesCount[b] ?? 0
      return countB - countA
    })

    const chipClasses = (active: boolean) =>
      cn(
        'rounded-md border transition-colors font-medium inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm',
        active
          ? 'text-white'
          : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-400 dark:hover:border-slate-500'
      )

    return (
      <div className="flex flex-wrap w-full items-center justify-center gap-2.5">
        <button
          onClick={() => handleMaterialTypeSelection('')}
          className={chipClasses(selectedMaterialType === '' && selectedTemplateId === '')}
          style={selectedMaterialType === '' && selectedTemplateId === '' ? { backgroundColor: themeColor, borderColor: themeColor } : undefined}
          title={`全部：${totalMaterialsCount}个素材`}
        >
          <span>全部</span>
          {totalMaterialsCount > 0 && (
            <span className="text-xs text-current/70">({totalMaterialsCount})</span>
          )}
        </button>
        {sortedTypeList.map((type) => {
          const isCustomTemplate = type.startsWith('template:')
          const displayName = isCustomTemplate ? type.split(':').slice(2).join(':') : type
          const normalized = isCustomTemplate ? null : normalizeMaterialType(type)
          const isActive = isCustomTemplate
            ? type.split(':')[1] === selectedTemplateId
            : Boolean(normalized) && selectedMaterialType === normalized
          const count = materialTypesCount[type] ?? 0
          const titleLabel = count > 0 ? `${displayName}：${count}个素材` : displayName

          return (
            <button
              key={type}
              onClick={() => handleMaterialTypeSelection(type)}
              className={chipClasses(isActive)}
              style={isActive ? { backgroundColor: themeColor, borderColor: themeColor } : undefined}
              title={titleLabel}
            >
              <span>{displayName}</span>
              {count > 0 && (
                <span className="text-xs text-current/70">({count})</span>
              )}
            </button>
          )
        })}
      </div>
    )
  }

  const handleHomeFilterSelection = (fieldKey: string, option: string | HomeFilterOption) => {
    const optionValue = typeof option === 'string' ? option : option.value
    setHomeFilterSelections((prev) => {
      const next = { ...prev }
      if (prev[fieldKey] === optionValue) {
        delete next[fieldKey]
      } else {
        next[fieldKey] = optionValue
      }
      return next
    })
  }

  const getHomeFilterOptionLabel = (fieldKey: string, optionValue: string) => {
    const field = homeFilterFields[fieldKey]
    if (!field) return optionValue
    const match = field.options.find((option) => option.value === optionValue)
    return match?.label || optionValue
  }

  const clearHomeFilterSelection = (fieldKey: string) => {
    setHomeFilterSelections((prev) => {
      if (!(fieldKey in prev)) return prev
      const next = { ...prev }
      delete next[fieldKey]
      return next
    })
  }

  const handleDownload = (id: string) => {
    // 如果已经在下载，直接返回
    if (downloadingIds.has(id)) {
      return
    }

    console.log(`[Download] Starting download for material ${id}`)
    setDownloadingIds((prev) => new Set(prev).add(id))
    setDownloadProgresses((prev) => ({ ...prev, [id]: 0 }))
    const scrollPosition = typeof window !== 'undefined' ? window.scrollY : 0

    const xhr = new XMLHttpRequest()
    xhr.responseType = 'arraybuffer'

    // 监听下载进度
    xhr.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        const percentComplete = Math.round((e.loaded / e.total) * 100)
        setDownloadProgresses((prev) => ({ ...prev, [id]: percentComplete }))
      }
    })

    xhr.addEventListener('load', () => {
      console.log(`[Download] Response received, status: ${xhr.status}`)
      if (xhr.status === 200) {
        try {
          const contentType = xhr.getResponseHeader('Content-Type') || 'application/octet-stream'
          const blob = new Blob([xhr.response], { type: contentType })
          
          // 从响应头获取文件名
          const contentDisposition = xhr.getResponseHeader('Content-Disposition')
          let filename = 'material'
          if (contentDisposition) {
            const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
            if (filenameMatch && filenameMatch[1]) {
              filename = decodeURIComponent(filenameMatch[1].replace(/['"]/g, ''))
            }
          } else if (contentType) {
            const extensionMap: Record<string, string> = {
              'application/zip': '.zip',
              'video/mp4': '.mp4',
              'video/webm': '.webm',
              'video/x-msvideo': '.avi',
              'video/quicktime': '.mov',
            }
            const matchedExt = Object.entries(extensionMap).find(([type]) => contentType.includes(type))
            if (matchedExt) {
              filename += matchedExt[1]
            }
          }
          
          // 使用download属性直接下载，避免浏览器提示
          const url = window.URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          a.download = filename
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          // 延迟移除，确保下载开始
          setTimeout(() => {
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url)
          }, 100)
          
          // 本地更新下载次数，避免整页刷新
          setMaterials((prev) =>
            prev.map((material) =>
              material.id === id
                ? {
                    ...material,
                    downloadCount: (material.downloadCount || 0) + 1,
                  }
                : material
            )
          )
          if (previewMaterial && previewMaterial.id === id) {
            setPreviewMaterial({
              ...previewMaterial,
              downloadCount: (previewMaterial.downloadCount || 0) + 1,
            })
          }
          // 排行榜可能发生变化，刷新排行榜数据
          fetchMaterialRankings()
          if (typeof window !== 'undefined') {
            requestAnimationFrame(() => {
              window.scrollTo({ top: scrollPosition, behavior: 'auto' })
            })
          }
        } catch (error) {
          console.error('下载处理失败:', error)
          alert({
            title: '下载失败',
            message: '下载失败，请稍后重试',
            variant: 'error',
          })
        }
      } else {
        console.error(`[Download] Download failed with status ${xhr.status}`)
        try {
          const errorText = xhr.responseText
          console.error(`[Download] Error response:`, errorText)
          const error = JSON.parse(errorText)
          alert({
            title: '下载失败',
            message: error.error || `下载失败 (状态码: ${xhr.status})`,
            variant: 'error',
          })
        } catch (parseError) {
          console.error('[Download] Failed to parse error response:', parseError)
          alert({
            title: '下载失败',
            message: `下载失败 (状态码: ${xhr.status})`,
            variant: 'error',
          })
        }
      }
      
      // 清理下载状态
      setDownloadingIds((prev) => {
        const next = new Set(prev)
        next.delete(id)
        return next
      })
      setDownloadProgresses((prev) => {
        const next = { ...prev }
        delete next[id]
        return next
      })
    })

    xhr.addEventListener('error', (e) => {
      console.error('[Download] Network error:', e)
      alert({
        title: '下载失败',
        message: '网络错误，请检查网络连接后重试',
        variant: 'error',
      })
      setDownloadingIds((prev) => {
        const next = new Set(prev)
        next.delete(id)
        return next
      })
      setDownloadProgresses((prev) => {
        const next = { ...prev }
        delete next[id]
        return next
      })
    })

    xhr.open('GET', `/api/materials/download?id=${id}`)
    xhr.send()
  }

  const handleLike = async (id: string) => {
    if (currentUserId) {
      const targetMaterial =
        materials.find((item) => item.id === id) ||
        (previewMaterial && previewMaterial.id === id ? previewMaterial : null)
      if (targetMaterial && targetMaterial.userId === currentUserId) {
        alert({
          title: '无法点赞',
          message: '不能给自己的素材点赞',
          variant: 'warning',
        })
        return
      }
    }

    try {
      const response = await fetch('/api/materials/like', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ materialId: id }),
      })

      if (response.ok) {
        const result = await response.json()
        // 更新本地状态
        setMaterials((prev) =>
          prev.map((m) => {
            if (m.id === id) {
              return {
                ...m,
                isLiked: result.liked,
                likeCount: result.liked ? m.likeCount + 1 : Math.max(0, m.likeCount - 1),
              }
            }
            return m
          })
        )
        // 如果预览的素材是当前素材，也更新预览状态
        if (previewMaterial && previewMaterial.id === id) {
          setPreviewMaterial({
            ...previewMaterial,
            isLiked: result.liked,
            likeCount: result.liked ? previewMaterial.likeCount + 1 : Math.max(0, previewMaterial.likeCount - 1),
          })
        }
        // 点赞榜可能发生变化，重新获取排行榜（不会刷新列表）
        fetchMaterialRankings()
      } else {
        const error = await response.json()
        alert({
          title: '操作失败',
          message: error.error || '操作失败',
          variant: 'error',
        })
      }
    } catch (error) {
      console.error('Like error:', error)
      alert({
        title: '操作失败',
        message: '操作失败，请稍后重试',
        variant: 'error',
      })
    }
  }

  const handleFavorite = async (id: string) => {
    try {
      const response = await fetch('/api/materials/favorite', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ materialId: id }),
      })

      if (!response.ok) {
        const error = await response.json()
        alert({
          title: '操作失败',
          message: error.error || '更新收藏失败',
          variant: 'error',
        })
        return
      }

      const result = await response.json()
      setMaterials((prev) =>
        prev.map((material) =>
          material.id === id ? { ...material, isFavorited: result.favorited } : material
        )
      )
      setPreviewMaterial((prev) => {
        if (!prev || prev.id !== id) return prev
        return { ...prev, isFavorited: result.favorited }
      })
    } catch (error) {
      console.error('Favorite error:', error)
      alert({
        title: '操作失败',
        message: '更新收藏失败，请稍后重试',
        variant: 'error',
      })
    }
  }

  const handlePremiumToggle = async (id: string, nextState: boolean) => {
    try {
      const response = await fetch('/api/materials/premium', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ materialId: id, isPremium: nextState }),
      })

      if (!response.ok) {
        const error = await response.json()
        alert({
          title: '操作失败',
          message: error.error || '更新精品状态失败',
          variant: 'error',
        })
        return
      }

      setMaterials((prev) =>
        prev.map((material) =>
          material.id === id ? { ...material, isPremium: nextState } : material
        )
      )
      setPreviewMaterial((prev) => {
        if (!prev || prev.id !== id) return prev
        return {
          ...prev,
          isPremium: nextState,
          rankingBadges: getRankingBadges(id, { isPremium: nextState }),
        }
      })
      setMaterialRankings((prev) => ({
        ...prev,
        premium: nextState
          ? Array.from(new Set([id, ...prev.premium])).slice(0, 10)
          : prev.premium.filter((item) => item !== id),
      }))
    } catch (error) {
      console.error('Premium toggle error:', error)
      alert({
        title: '操作失败',
        message: '更新精品状态失败，请稍后重试',
        variant: 'error',
      })
    }
  }

  // 删除素材（仅管理员有权限，按钮可根据系统设置控制是否对普通用户展示）
  const handleDelete = async (id: string) => {
    // 后端仍然会做权限验证，这里主要负责 UI 确认和反馈
    const confirmed = await confirm({
      title: '删除素材',
      message: '确定要删除这个素材吗？该操作不可恢复。',
      confirmText: '删除',
      cancelText: '取消',
      variant: 'danger',
    })

    if (!confirmed) return

    try {
      const response = await fetch(`/api/materials?id=${encodeURIComponent(id)}`, {
        method: 'DELETE',
      })

      if (response.ok) {
        alert({
          title: '删除成功',
          message: '素材已删除。',
          variant: 'success',
        })
        fetchMaterials()
      } else {
        const error = await response.json()
        alert({
          title: '删除失败',
          message: error.error || '删除失败，请稍后重试',
          variant: 'error',
        })
      }
    } catch (error) {
      console.error('Delete error:', error)
      alert({
        title: '删除失败',
        message: '删除失败，请稍后重试',
        variant: 'error',
      })
    }
  }

  // 编辑素材
  const [editingMaterial, setEditingMaterial] = useState<Material | null>(null)
  const handleEdit = async (material: Material) => {
    // 获取完整的素材信息（包括templateId）
    try {
      const response = await fetch(`/api/materials/${material.id}`)
      if (response.ok) {
        const fullMaterial = await response.json()
        setEditingMaterial(fullMaterial as Material)
      } else {
        // 如果获取失败，使用现有数据
        setEditingMaterial(material)
      }
    } catch (error) {
      console.error('Failed to fetch material details:', error)
      setEditingMaterial(material)
    }
  }

  // 检测URL中的edit参数，自动打开编辑弹窗
  useEffect(() => {
    const editId = searchParams?.get('edit')
    if (editId && status === 'authenticated' && !editingMaterial) {
      // 从materials中查找对应的素材
      const material = materials.find((m) => m.id === editId)
      if (material) {
        setEditingMaterial(material)
        // 清除URL参数
        router.replace('/', { scroll: false })
      } else {
        // 如果素材不在列表中，尝试从API获取
        fetch(`/api/materials/${editId}`)
          .then((res) => res.json())
          .then((data) => {
            if (data && data.id) {
              setEditingMaterial(data as Material)
              router.replace('/', { scroll: false })
            }
          })
          .catch((err) => {
            console.error('Failed to fetch material for edit:', err)
          })
      }
    }
  }, [searchParams, status, materials, editingMaterial, router])

  // 只在首次加载时显示加载中（NextAuth检查状态或首次加载素材）
  // 如果已经有素材了，即使loading为true也不显示加载中（避免tag切换时闪烁）
  const isInitialLoading =
    status === 'loading' ||
    (status === 'authenticated' && !initialPasswordCheckDone) ||
    (!isDefaultPassword && loading && materials.length === 0 && !homeFilterReady)

  if (isInitialLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900">
        <div className="text-xl text-slate-600 dark:text-slate-400">加载中...</div>
      </div>
    )
  }

  if (!session) {
    return null
  }

  if (isDefaultPassword) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
        <Header session={session} />
        <main className="container mx-auto max-w-7xl px-4 py-8">
          <ChangePasswordModal
            isOpen
            onClose={() => {}}
            isRequired
            onSuccess={() => {
              setIsDefaultPassword(false)
              setShowChangePasswordModal(false)
              window.location.reload()
            }}
          />
        </main>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <Header
        session={session}
        compactMode={{
          isScrolled,
          searchKeyword,
          onSearchChange: (value) => setSearchKeyword(value),
          onOpenFilter: () => setShowFilterModal(true),
          onOpenUpload: () => setShowUploadModal(true),
          categoryItems: [
            { key: '', label: '全部素材' },
            ...materialTypes.map((type) => ({ key: type, label: type })),
          ],
          selectedCategoryKey: selectedMaterialType,
          onSelectCategory: (key) => {
            // 分类选择不算筛选，与tag按钮逻辑一致，可二次点击取消
            handleMaterialTypeSelection(key)
          },
          themeColor,
        }}
      />
      
      <main className="container mx-auto px-4 py-8 max-w-7xl">
        {/* Header Section */}
        <div className="mb-8 space-y-6">
          <div ref={searchSectionRef} className="space-y-4 mt-16">
            <div className="flex flex-wrap.items-center justify-center gap-3">
              {renderMaterialTypeChips()}
          </div>
            <div className="flex flex-wrap items-center gap-3">
              <div className="relative flex-1 min-w-[240px]">
                <input
                  type="text"
                  value={searchKeyword}
                  onChange={(e) => setSearchKeyword(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      setSearchQuery(searchKeyword.trim())
                    }
                  }}
                  placeholder="搜索SPU、店铺、场景类别、作者..."
                  className={`${styles.inputStyles.base} pl-12 pr-10`}
                />
              <svg
                  className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                />
              </svg>
              {searchKeyword && (
                <button
                  onClick={() => {
                    setSearchKeyword('')
                    setSearchQuery('')
                  }}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
                >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              )}
            </div>
            <button
              onClick={() => setShowFilterModal(true)}
                className={cn(
                  styles.buttonStyles.secondary,
                  styles.buttonModifiers.compact,
                  'flex items-center gap-2 relative'
                )}
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
                  />
              </svg>
              筛选
                {filterIndicatorCount > 0 && (
                  <span className="absolute -top-1 -right-1 min-w-[20px] h-5 px-1 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center">
                    {filterIndicatorCount}
                </span>
              )}
            </button>
            <button
              onClick={() => setShowUploadModal(true)}
              className="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-white transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
              style={{ backgroundColor: themeColor }}
            >
              上传素材
            </button>
            </div>
          </div>

          <div className="mb-2">
            <div className="flex items-center justify-between mb-2">
              <h2 className="text-sm font-medium text-slate-700 dark:text-slate-300">排序方式</h2>
            </div>
            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => setSortBy('createdAt')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors border ${
                  sortBy === 'createdAt'
                    ? 'text-white border-transparent'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700'
                }`}
                style={sortBy === 'createdAt' ? { backgroundColor: themeColor } : {}}
              >
                最新上传
              </button>
              <button
                onClick={() => setSortBy('downloadCount')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors border ${
                  sortBy === 'downloadCount'
                    ? 'text-white border-transparent'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700'
                }`}
                style={sortBy === 'downloadCount' ? { backgroundColor: themeColor } : {}}
              >
                下载最多
              </button>
              <button
                onClick={() => setSortBy('likeCount')}
                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors border ${
                  sortBy === 'likeCount'
                    ? 'text-white border-transparent'
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700'
                }`}
                style={sortBy === 'likeCount' ? { backgroundColor: themeColor } : {}}
              >
                点赞最多
              </button>
              {hasActiveFilters && (
                <button
                  type="button"
                  onClick={() => {
                    setSearchKeyword('')
                    setSearchQuery('')
                    setSelectedCategory('')
                    setSelectedScene('')
                    setSelectedPlatform('')
                    setSelectedYear('')
                    setSelectedMonth('')
                    setHomeFilterSelections({})
                  }}
                  className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700"
                >
                  清除筛选
                </button>
              )}
            </div>
          </div>
        </div>

        {/* Materials Grid */}
        {materials.length === 0 ? (
          <div className="text-center py-16">
            <p className="text-slate-500 dark:text-slate-400 text-lg">
              {hasActiveFilters ? '没有找到匹配的素材' : '暂无素材，请上传素材'}
            </p>
          </div>
        ) : (
          <>

            <div className="mt-6">
              <div
                className={cn(
                  'grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
                  // 使用更平滑的过渡，避免闪烁
                  isGridTransitioning && 'opacity-70 pointer-events-none',
                  !isGridTransitioning && 'opacity-100 pointer-events-auto transition-opacity duration-150 ease-in-out'
                )}
              >
                {materials.slice(0, displayedCount).map((material) => {
                  const rankingBadges = getRankingBadges(material.id, { isPremium: material.isPremium })
                  const isOwnMaterial = Boolean(currentUserId && material.userId === currentUserId)
                  const materialRecord = material as unknown as Record<string, unknown>
                  const seenTagValues = new Set<string>()
                  const filterTags = orderedHomeFilterKeys
                    .map((fieldKey) => {
                      const rawValue = materialRecord[fieldKey]
                      if (typeof rawValue !== 'string') return null
                      const value = rawValue.trim()
                      if (!value || seenTagValues.has(value)) return null
                      seenTagValues.add(value)
                      return { fieldKey, label: value }
                    })
                    .filter((item): item is { fieldKey: string; label: string } => Boolean(item))
                  const resolvedMaterialKind = (material.materialKind || '').toUpperCase()
                  const isVideoMaterial = resolvedMaterialKind === 'VIDEO' || material.materialType === '视频'
                  const isAudioMaterial = resolvedMaterialKind === 'AUDIO' || material.materialType === '音频'
                  const videoStatus = isVideoMaterial
                    ? resolveVideoStatus(material.videoProcessingStatus || 'pending')
                    : 'done'
                  const videoStatusMeta = isVideoMaterial ? VIDEO_STATUS_META[videoStatus] : null
                  const videoCover = material.videoCoverUrl || material.previewUrl
                  const videoClipUrl = material.videoPreviewClipUrl || ''
                  const canPlayClip = isVideoMaterial && videoStatus === 'done' && Boolean(videoClipUrl)
                  const videoDurationLabel = isVideoMaterial ? formatVideoDuration(material.videoDuration ?? null) : ''
                  const audioUrl = isAudioMaterial ? (material.audioUrl || `/api/materials/stream?id=${material.id}`) : ''

                  return (
                    <div
                      key={material.id}
                      className="w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden flex flex-col transition-colors hover:border-slate-300 dark:hover:border-slate-600"
                    >
                      <div
                        className="relative w-full aspect-[3/4] bg-slate-100 dark:bg-slate-800 cursor-pointer group overflow-hidden rounded-t-lg"
                  onClick={() => {
                          setPreviewMaterial({
                            ...material,
                            rankingBadges: getRankingBadges(material.id, { isPremium: material.isPremium }),
                            user: material.user, // 确保包含user信息用于头像显示
                          })
                          // 记录浏览历史
                          if (session?.user) {
                            fetch('/api/user/history', {
                              method: 'POST',
                              headers: { 'Content-Type': 'application/json' },
                              body: JSON.stringify({ materialId: material.id }),
                            }).catch((err) => console.error('记录浏览历史失败:', err))
                          }
                  }}
                        onMouseEnter={() => {
                          if (canPlayClip) {
                            handleCardVideoHover(material.id, true)
                          }
                        }}
                        onMouseLeave={() => {
                          if (canPlayClip) {
                            handleCardVideoHover(material.id, false)
                          }
                        }}
                >
                        {isVideoMaterial ? (
                          canPlayClip ? (
                            <>
                              <video
                                ref={(el) => {
                                  if (el) {
                                    videoRefs.current[material.id] = el
                                  } else {
                                    delete videoRefs.current[material.id]
                                  }
                                }}
                                poster={videoCover || material.previewUrl}
                                className="object-cover rounded-t-lg w-full h-full"
                                muted
                                loop
                                playsInline
                                preload="metadata"
                              >
                                <source src={videoClipUrl} />
                              </video>
                              {/* 视频封面覆盖层：当视频不在播放时显示用户上传的封面图 */}
                              {!playingVideoIds.has(material.id) && (
                                <div className="absolute inset-0 z-10 pointer-events-none">
                                  <Image
                                    src={videoCover || material.previewUrl}
                                    alt={material.sceneName}
                                    fill
                                    unoptimized
                                    className="object-cover rounded-t-lg"
                                    sizes="(max-width: 640px) 90vw, 320px"
                                    priority={false}
                                  />
                                </div>
                              )}
                            </>
                          ) : (
                            <Image
                              src={videoCover || material.previewUrl}
                              alt={material.sceneName}
                              fill
                              unoptimized
                              className="object-cover rounded-t-lg"
                              sizes="(max-width: 640px) 90vw, 320px"
                              priority={false}
                            />
                          )
                        ) : isAudioMaterial ? (
                          <div className="absolute inset-0 flex flex-col justify-between bg-slate-100 p-4 dark:bg-slate-800">
                            <div className="flex items-start gap-3">
                              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
                                <svg className="h-5 w-5 text-slate-500 dark:text-slate-300" fill="currentColor" viewBox="0 0 24 24">
                                  <path d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z" />
                                </svg>
                              </div>
                              <div className="min-w-0">
                                <p className="line-clamp-2 text-sm font-medium text-slate-900 dark:text-white">{material.productModel}</p>
                                <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                                  {material.audioDuration || '音频素材'}
                                </p>
                              </div>
                            </div>
                            <div className="space-y-3">
                              <div className="h-1.5 overflow-hidden rounded bg-slate-200 dark:bg-slate-700">
                                <div
                                  className="h-full bg-slate-500 transition-[width] duration-100 dark:bg-slate-400"
                                  style={{ width: playingAudioId === material.id ? `${audioProgress}%` : '0%' }}
                                />
                              </div>
                              <button
                                type="button"
                                onClick={(e) => {
                                  e.stopPropagation()
                                  handleAudioPlay(material.id, audioUrl)
                                }}
                                className="inline-flex h-9 items-center gap-2 rounded-md border border-slate-300 bg-white px-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
                              >
                                {playingAudioId === material.id ? (
                                  <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
                                  </svg>
                                ) : (
                                  <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8 5v14l11-7z" />
                                  </svg>
                                )}
                                <span>{playingAudioId === material.id ? '暂停' : '播放'}</span>
                              </button>
                            </div>
                          </div>
                        ) : (
                          <Image
                            src={material.previewUrl}
                            alt={material.sceneName}
                            fill
                            unoptimized
                            className="object-cover rounded-t-lg"
                            sizes="(max-width: 640px) 90vw, 320px"
                            priority={false}
                          />
                        )}
                        {isVideoMaterial && !canPlayClip && (
                          <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-950/50 text-white text-sm font-semibold">
                            <svg
                              className="w-7 h-7"
                              fill="none"
                              stroke="currentColor"
                              viewBox="0 0 24 24"
                              aria-hidden="true"
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={1.8}
                                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.868v4.264a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
                              />
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={1.8}
                                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                              />
                            </svg>
                            <span>{videoStatusMeta?.label || '预览生成中'}</span>
                          </div>
                        )}
                        {/* 型号标识 - 使用z-20确保在音频/视频覆盖层之上 */}
                        <div className="absolute top-3 left-3 flex flex-col items-start gap-1.5 z-20">
                          {/* SPU型号 */}
                          <div className="rounded-md border border-slate-200 bg-white/90 text-slate-800 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-100 px-2 py-1 text-xs font-medium">
                            {material.productModel}
                          </div>
                        </div>
                        {/* 点赞按钮 - 使用z-20确保在音频/视频覆盖层之上，已点赞时始终显示 */}
                        {!isOwnMaterial && currentUserId && (
                          <button
                            type="button"
                            onClick={(event) => {
                              event.stopPropagation()
                              handleLike(material.id)
                            }}
                            className={cn(
                              'absolute top-3 right-3 w-8 h-8 rounded-md flex items-center justify-center border transition-colors z-20',
                              material.isLiked
                                ? 'opacity-100 bg-white text-rose-500 border-rose-200'
                                : 'opacity-0 group-hover:opacity-100 bg-white/85 text-slate-600 border-white/60 hover:text-rose-500'
                            )}
                            aria-label={material.isLiked ? '取消点赞' : '点赞'}
                          >
                            <svg
                              className="w-5 h-5"
                              viewBox="0 0 24 24"
                              fill={material.isLiked ? 'currentColor' : 'none'}
                              stroke="currentColor"
                              strokeWidth={material.isLiked ? 0 : 1.8}
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                              />
                            </svg>
                          </button>
                        )}
                        {isVideoMaterial && videoDurationLabel && (
                          <div className="absolute bottom-3 left-3 bg-black/75 text-white px-2 py-1 rounded text-xs font-semibold flex items-center gap-1">
                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            {videoDurationLabel}
                          </div>
                        )}
                </div>

                      <div className="p-4 flex flex-col flex-1">
                        <div className="flex items-center gap-1 mb-2 overflow-hidden whitespace-nowrap">
                          {rankingBadges.length > 0 && rankingBadges.map((badge) => (
                            <span
                              key={`card-badge-${material.id}-${badge.label}`}
                              className="shrink-0 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-[11px] font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            >
                              {badge.label}
                            </span>
                          ))}
                          {getMaterialTemplateLabel(material) && (
                            <Tag
                              size="xs"
                              color="blue"
                              className="shrink-0 font-medium"
                            >
                              {getMaterialTemplateLabel(material)}
                            </Tag>
                          )}
                          {filterTags.length > 0 && filterTags.map((tag, index) => {
                            const color: TagColorToken = TAG_COLOR_PALETTE[index % TAG_COLOR_PALETTE.length]
                            return (
                              <Tag
                                key={`${material.id}-${tag.fieldKey}`}
                                size="xs"
                                color={color}
                                className="shrink-0"
                              >
                                {tag.label}
                              </Tag>
                            )
                          })}
                  </div>
                  
                      <div className="flex items-center justify-between mt-3 gap-3">
                        <div className="flex min-w-0 items-center gap-2">
                          {/* 显示上传者信息，而不是素材内容的作者（如音频歌手） */}
                          <Avatar name={material.user?.username || material.authorName} src={material.user?.avatar || undefined} size="xs" />
                          <span className="truncate text-sm text-slate-700 dark:text-slate-200 font-medium">
                      {material.user?.username || material.authorName}
                          </span>
                  </div>
                        <div className="flex shrink-0 items-center gap-3 text-xs text-slate-500 dark:text-slate-400">
                      <span>{format(new Date(material.createdAt), 'yyyy-MM-dd')}</span>
                      <span className="flex items-center gap-1">
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                        {material.downloadCount}
                      </span>
                      <span className="flex items-center gap-1">
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                        {material.likeCount}
                      </span>
                    </div>
                  </div>

                      <MaterialActionButtons
                        className="mt-4"
                        layout="card"
                        material={material}
                        themeColor={themeColor}
                        inlineLikeButton={false}
                        onEdit={
                          session?.user &&
                          (material.userId === (session.user as any).id || (session.user as any).role === 'ADMIN')
                            ? () => handleEdit(material)
                            : undefined
                        }
                        canEdit={
                          !!(
                            session?.user &&
                            (material.userId === (session.user as any).id || (session.user as any).role === 'ADMIN')
                          )
                        }
                        onDelete={
                          session?.user && (((session.user as any).role === 'ADMIN') || !homeDeleteButtonAdminOnly)
                            ? () => handleDelete(material.id)
                            : undefined
                        }
                        canDelete={
                          !!(
                            session?.user && (((session.user as any).role === 'ADMIN') || !homeDeleteButtonAdminOnly)
                          )
                        }
                        onShare={() => handleShare(material.id)}
                        onLike={
                          !isOwnMaterial && currentUserId
                            ? () => handleLike(material.id)
                            : undefined
                        }
                        onDownload={() => handleDownload(material.id)}
                        isDownloading={downloadingIds.has(material.id)}
                        downloadProgress={downloadProgresses[material.id] || 0}
                      />
                    </div>
                  </div>
                )
            })}
              
              {/* 懒加载触发器 */}
              {materials.length > 0 && (displayedCount < materials.length || hasMoreMaterials) && (
                <div ref={loadMoreRef} className="w-full h-20 flex items-center justify-center">
                  {isLoadingMore ? (
                    <div className="text-slate-500 dark:text-slate-400 text-sm flex items-center gap-2">
                      <span className="inline-block h-3 w-3 rounded-full border-2 border-slate-300 border-t-slate-500 animate-spin" />
                      加载中...
                    </div>
                  ) : (
                    <div className="text-slate-400 dark:text-slate-500 text-sm">加载更多素材</div>
                  )}
                </div>
              )}
              {materials.length > 0 && !hasMoreMaterials && displayedCount >= materials.length && (
                <div className="w-full py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                  暂无更多素材
                </div>
              )}
                  </div>
          </div>

          </>
        )}
      </main>

      {/* Upload Modal */}
      {showUploadModal && (
        <UploadModal
          onClose={() => setShowUploadModal(false)}
          onSuccess={() => {
            setShowUploadModal(false)
            fetchMaterials()
            fetchHomeFilterFields()
          }}
        />
      )}

      {/* Image Preview Modal */}
      <MaterialPreviewModal
        isOpen={!!previewMaterial}
        onClose={() => setPreviewMaterial(null)}
        material={previewMaterial}
        onDownload={previewMaterial ? () => handleDownload(previewMaterial.id) : undefined}
        actionSection={
          previewMaterial ? (
            <MaterialActionButtons
              layout="modal"
              material={previewMaterial}
              themeColor={themeColor}
              onEdit={
                session?.user &&
                (previewMaterial.userId === (session.user as any).id ||
                  (session.user as any).role === 'ADMIN')
                  ? () => handleEdit(previewMaterial)
                  : undefined
              }
              canEdit={
                !!(
                  session?.user &&
                  (previewMaterial.userId === (session.user as any).id ||
                    (session.user as any).role === 'ADMIN')
                )
              }
              onDelete={
                session?.user && (((session.user as any).role === 'ADMIN') || !homeDeleteButtonAdminOnly)
                  ? () => handleDelete(previewMaterial.id)
                  : undefined
              }
              canDelete={
                !!(
                  session?.user && (((session.user as any).role === 'ADMIN') || !homeDeleteButtonAdminOnly)
                )
              }
              onShare={() => handleShare(previewMaterial.id)}
              onLike={
                currentUserId && previewMaterial.userId !== currentUserId
                  ? () => handleLike(previewMaterial.id)
                  : undefined
              }
              onDownload={() => handleDownload(previewMaterial.id)}
              isDownloading={downloadingIds.has(previewMaterial.id)}
              downloadProgress={downloadProgresses[previewMaterial.id] || 0}
              canTogglePremium={(session?.user as any)?.role === 'ADMIN'}
              onTogglePremium={(nextState) => handlePremiumToggle(previewMaterial.id, nextState)}
            />
          ) : undefined
        }
      />

      {/* Share Notification */}
      {showShareNotification && (
        <div className="fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-[200] flex items-center gap-2 animate-fade-in">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
          <span>分享链接已复制到剪贴板！</span>
        </div>
      )}

      {/* 筛选弹窗 */}
      <Modal
        isOpen={showFilterModal}
        onClose={() => setShowFilterModal(false)}
        size="xlarge"
        title="筛选选项"
        showCloseButton
        closeOnOverlayClick
        closeOnEscape
        containerClassName="max-h-[92vh] w-full max-w-[760px]"
        bodyClassName="max-h-[80vh] overflow-y-auto pr-1"
      >
        <div className="flex flex-col min-h-full gap-5">
          <div className="flex flex-col gap-4 flex-1 pb-4">
            {showCategoryFilter && categoryOptions.length > 0 && (
              <section className={filterCardClass}>
                <p className={filterCardTitleClass}>{categoryLabel}</p>
                <div className="flex flex-wrap gap-1.5 mt-2">
                  <button
                    onClick={() => setSelectedCategory('')}
                    className={buildFilterPillClass(selectedCategory === '')}
                    style={getFilterPillStyle(selectedCategory === '')}
                  >
                    全部 ({categoryField?.totalCount ?? 0})
                  </button>
                  {categoryOptions.map((option) => (
                    <button
                      key={option.value}
                      onClick={() => setSelectedCategory(option.value === selectedCategory ? '' : option.value)}
                      className={buildFilterPillClass(selectedCategory === option.value)}
                      style={getFilterPillStyle(selectedCategory === option.value)}
                    >
                      {option.label}
                      <span className="text-[11px] text-current/70">({option.count ?? 0})</span>
                    </button>
                  ))}
                </div>
              </section>
            )}

            {showSceneFilter && sceneOptions.length > 0 && (
              <section className={filterCardClass}>
                <p className={filterCardTitleClass}>{sceneLabel}</p>
                <div className="flex flex-wrap gap-1.5 mt-2">
                  <button
                    onClick={() => setSelectedScene('')}
                    className={buildFilterPillClass(selectedScene === '')}
                    style={getFilterPillStyle(selectedScene === '')}
                  >
                    全部 ({sceneField?.totalCount ?? 0})
                  </button>
                  {sceneOptions.map((option) => (
                    <button
                      key={option.value}
                      onClick={() => setSelectedScene(option.value === selectedScene ? '' : option.value)}
                      className={buildFilterPillClass(selectedScene === option.value)}
                      style={getFilterPillStyle(selectedScene === option.value)}
                    >
                      {option.label}
                      <span className="text-[11px] text-current/70">({option.count ?? 0})</span>
                    </button>
                  ))}
                </div>
              </section>
            )}

            {platformOptions.length > 0 && showPlatformFilter && (
              <section className={filterCardClass}>
                <p className={filterCardTitleClass}>{platformLabel}</p>
                <div className="flex flex-wrap gap-1.5 mt-2">
                  <button
                    onClick={() => setSelectedPlatform('')}
                    className={buildFilterPillClass(selectedPlatform === '')}
                    style={getFilterPillStyle(selectedPlatform === '')}
                  >
                    全部 ({platformField?.totalCount ?? 0})
                  </button>
                  {platformOptions.map((option) => (
                    <button
                      key={option.value}
                      onClick={() => setSelectedPlatform(option.value === selectedPlatform ? '' : option.value)}
                      className={buildFilterPillClass(selectedPlatform === option.value)}
                      style={getFilterPillStyle(selectedPlatform === option.value)}
                    >
                      {option.label}
                      <span className="text-[11px] text-current/70">({option.count ?? 0})</span>
                    </button>
                  ))}
                </div>
              </section>
            )}

            <section className={filterCardClass}>
              <p className={filterCardTitleClass}>上传年份</p>
              <div className="flex flex-wrap gap-1.5 mt-2">
                <button
                  onClick={() => {
                    setSelectedYear('')
                    setSelectedMonth('')
                  }}
                  className={buildFilterPillClass(selectedYear === '')}
                  style={getFilterPillStyle(selectedYear === '')}
                >
                  全部 ({totalMaterialsCount})
                </button>
                {yearOptions.length === 0 ? (
                  <span className="text-xs text-slate-500 dark:text-slate-400">暂无年份数据</span>
                ) : (
                  yearOptions.map(({ year, count }) => (
                    <button
                      key={year}
                      onClick={() => {
                        if (selectedYear === year) {
                          setSelectedYear('')
                          setSelectedMonth('')
                        } else {
                          setSelectedYear(year)
                          setSelectedMonth('')
                        }
                      }}
                      className={buildFilterPillClass(selectedYear === year)}
                      style={getFilterPillStyle(selectedYear === year)}
                    >
                      {year} 年
                      <span className="text-[11px] text-current/70">({count})</span>
                    </button>
                  ))
                )}
              </div>
            </section>

            <section className={filterCardClass}>
              <p className={filterCardTitleClass}>上传月份</p>
              {!selectedYear && (
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">请先选择年份，再选择具体月份</p>
              )}
              <div className="flex flex-wrap gap-1.5 mt-2">
                <button
                  onClick={() => setSelectedMonth('')}
                  disabled={!selectedYear}
                  className={cn(
                    buildFilterPillClass(selectedMonth === ''),
                    !selectedYear && 'opacity-60 cursor-not-allowed'
                  )}
                  style={getFilterPillStyle(selectedMonth === '' && Boolean(selectedYear))}
                >
                  全部
                  {selectedYear && (
                    <span className="text-[11px] text-current/70">
                      ({yearMonthStats[selectedYear]?.count ?? 0})
                    </span>
                  )}
                </button>
                {selectedYear && availableMonths.length === 0 && (
                  <p className="text-xs text-slate-500 dark:text-slate-400">该年份暂无月份数据</p>
                )}
                {availableMonths.map((monthKey) => {
                  const isActive = selectedMonth === monthKey
                  const monthCount = monthCountsForSelectedYear[monthKey] ?? 0
                  return (
                    <button
                      key={monthKey}
                      onClick={() => {
                        if (!selectedYear) return
                        setSelectedMonth((prev) => (prev === monthKey ? '' : monthKey))
                      }}
                      disabled={!selectedYear}
                      className={cn(
                        buildFilterPillClass(isActive),
                        !selectedYear && 'cursor-not-allowed'
                      )}
                      style={getFilterPillStyle(isActive)}
                    >
                      {parseInt(monthKey, 10)}月
                      <span className="text-[11px] text-current/70">({monthCount})</span>
                    </button>
                  )
                })}
              </div>
            </section>

            {dynamicHomeFilterEntries.map(([fieldKey, field]) => (
              <section key={fieldKey} className={filterCardClass}>
                <p className={filterCardTitleClass}>{field.label}</p>
                <div className="flex flex-wrap gap-1.5 mt-2">
                  <button
                    onClick={() => clearHomeFilterSelection(fieldKey)}
                    className={buildFilterPillClass(!homeFilterSelections[fieldKey])}
                    style={getFilterPillStyle(!homeFilterSelections[fieldKey])}
                  >
                    全部 ({field.totalCount ?? 0})
                  </button>
                  {field.options.map((option) => {
                    const optionValue = option.value
                    const isActive = homeFilterSelections[fieldKey] === optionValue
                    return (
                      <button
                        key={`${fieldKey}-${optionValue}`}
                        onClick={() => handleHomeFilterSelection(fieldKey, option)}
                        className={buildFilterPillClass(isActive)}
                        style={getFilterPillStyle(isActive)}
                      >
                        {option.label}
                        {typeof option.count === 'number' && (
                          <span className="text-[11px] text-current/70">({option.count})</span>
                        )}
                      </button>
                    )
                  })}
                </div>
              </section>
            ))}
          </div>

          <div className="sticky bottom-0 right-0 pt-3 bg-transparent">
            <div className="border-t border-slate-200 dark:border-slate-700 pt-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <p className="text-xs text-slate-500 dark:text-slate-400">
                调整完成后点击“应用筛选”，即可在首页看到最新结果。
              </p>
              <div className="flex flex-col gap-3 sm:flex-row sm:gap-2 sm:items-center">
                <Button
                  variant="secondary"
                  size="md"
                  onClick={() => {
                    setSelectedCategory('')
                    setSelectedScene('')
                    setSelectedPlatform('')
                    setSelectedMonth('')
                    setHomeFilterSelections({})
                    // 注意：selectedMaterialType是分类选择，不算筛选，不清除
                  }}
                  className="sm:min-w-[140px]"
                >
                  清除全部
                </Button>
                <Button
                  variant="primary"
                  size="md"
                  onClick={() => setShowFilterModal(false)}
                  style={{ backgroundColor: themeColor }}
                  className="sm:min-w-[140px]"
                >
                  应用筛选
                </Button>
              </div>
            </div>
          </div>
        </div>
      </Modal>

      <Modal
        isOpen={showShareModal}
        onClose={() => {
          setShowShareModal(false)
          setShareTokensError(null)
        }}
        size="medium"
        title="分享素材链接"
        showCloseButton
        closeOnOverlayClick
        closeOnEscape
        footer={
          <div className="flex justify-end">
            <Button
              variant="secondary"
              size="md"
              onClick={() => {
                setShowShareModal(false)
                setShareTokensError(null)
              }}
            >
              关闭
            </Button>
          </div>
        }
      >
        <div className="space-y-5">
          <p className="text-sm text-slate-600 dark:text-slate-300">
            新生成的链接会自动复制。下方列表用于查看已有链接状态，必要时可撤销。
          </p>
          <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 px-3 py-2">
              <input
                readOnly
                value={shareUrl ?? ''}
                className="flex-1 bg-transparent text-sm text-slate-800 dark:text-slate-100 outline-none"
              />
              <Button variant="primary" size="sm" onClick={copyShareUrl}>
                复制链接
              </Button>
            </div>
            <p className="text-[11px] text-slate-500 dark:text-slate-400">
              分享链接默认 7 天有效。如浏览器拦截自动复制，可手动选中上方链接后使用 Ctrl+C（或 ⌘+C）
            </p>
          </div>
          <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
            <div className="mb-3 flex items-center justify-between gap-3">
              <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">已有分享链接</h3>
              {shareMaterialId && (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => fetchShareTokens(shareMaterialId)}
                  disabled={shareTokensLoading}
                >
                  刷新
                </Button>
              )}
            </div>
            {shareTokensError && (
              <div className="mb-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
                {shareTokensError}
              </div>
            )}
            {shareTokensLoading ? (
              <div className="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-4 text-sm text-slate-500 dark:text-slate-400">
                正在加载分享链接...
              </div>
            ) : shareTokens.length === 0 ? (
              <div className="rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-4 text-sm text-slate-500 dark:text-slate-400">
                暂无历史分享链接。
              </div>
            ) : (
              <div className="space-y-2">
                {shareTokens.map((token) => {
                  const statusMeta = getShareTokenStatusMeta(token.status)
                  const canRevoke = token.status === 'active'
                  return (
                    <div
                      key={token.id}
                      className="rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-3"
                    >
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0 flex-1 space-y-1">
                          <div className="flex flex-wrap items-center gap-2">
                            <span className={cn('inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium', statusMeta.className)}>
                              {statusMeta.label}
                            </span>
                            <span className="text-xs text-slate-500 dark:text-slate-400">
                              创建人：{token.createdByName || '未知'}
                            </span>
                          </div>
                          <div className="grid gap-1 text-xs text-slate-500 dark:text-slate-400 sm:grid-cols-2">
                            <span>创建：{formatShareDateTime(token.createdAt)}</span>
                            <span>到期：{formatShareDateTime(token.expiresAt)}</span>
                            {token.revokedAt && (
                              <span className="sm:col-span-2">撤销：{formatShareDateTime(token.revokedAt)}</span>
                            )}
                          </div>
                        </div>
                        {canRevoke && (
                          <Button
                            variant="danger"
                            size="sm"
                            onClick={() => handleRevokeShareToken(token.id)}
                            className="shrink-0"
                          >
                            撤销
                          </Button>
                        )}
                      </div>
                    </div>
                  )
                })}
              </div>
            )}
          </div>
        </div>
      </Modal>

      {/* Edit Material Modal */}
      {editingMaterial && (
        <EditMaterialModal
          material={{
            id: editingMaterial.id,
            previewUrl: editingMaterial.previewUrl,
            productModel: editingMaterial.productModel,
            categoryName: editingMaterial.categoryName,
            sceneName: editingMaterial.sceneName,
            materialType: editingMaterial.materialType || '3DMAX',
            renderer: editingMaterial.renderer || 'CR',
            authorName: editingMaterial.authorName,
            brandName: editingMaterial.brandName,
            seriesName: editingMaterial.seriesName,
            skuCode: editingMaterial.skuCode,
            materialTexture: editingMaterial.materialTexture,
            renderTime: editingMaterial.renderTime,
            imageResolution: editingMaterial.imageResolution,
            colorMode: editingMaterial.colorMode,
            templateId: (editingMaterial as any).templateId,
            templateFields: (editingMaterial as any).templateFields,
            platformName: (editingMaterial as any).platformName,
            // 音频相关字段
            audioDuration: (editingMaterial as any).audioDuration,
            audioCategory: (editingMaterial as any).audioCategory,
            audioScene: (editingMaterial as any).audioScene,
          }}
          onClose={() => setEditingMaterial(null)}
          onSuccess={() => {
            setEditingMaterial(null)
            fetchMaterials()
          }}
        />
      )}

      {/* 修改密码弹窗 */}
      <ChangePasswordModal
        isOpen={showChangePasswordModal}
        onClose={() => {
          if (!isDefaultPassword) {
            setShowChangePasswordModal(false)
          }
        }}
        isRequired={isDefaultPassword}
        onSuccess={() => {
          setIsDefaultPassword(false)
          setShowChangePasswordModal(false)
          // 刷新页面以更新session
          window.location.reload()
        }}
      />
    </div>
  )
}