/**
 * MonitorTab 组件
 * 
 * 系统监控仪表板Tab组件
 * 从主页面拆分出来，负责显示系统监控数据
 * 包括用户统计、素材统计、系统状态等信息
 * 使用三层架构样式系统，支持深浅色主题
 * 
 * @created 2025-01-XX（拆分自 page.tsx）
 * @component
 */

'use client'

import { useEffect, useMemo, useState } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
import { formatDateTimeLocale } from '../_utils/formatters'
import type { ToastFn, DashboardData } from './types'
import { useDashboardData } from '../_hooks/useDashboardData'
import LoadingState from './ui/LoadingState'
import ErrorState from './ui/ErrorState'
import EmptyState from './ui/EmptyState'
import Modal from '@/components/ui/Modal'

interface MonitorTabProps {
  showToast: ToastFn
}

const AUTO_REFRESH_INTERVAL = 60_000

export default function MonitorTab({ showToast }: MonitorTabProps) {
  const styles = useThemeStyles()
  const theme = useTheme()
  const router = useRouter()
  
  // 根据主题选择颜色类名
  const borderColor = theme === 'dark' ? 'border-slate-800/70' : 'border-slate-200/70'
  const textTitle = theme === 'dark' ? 'text-white' : 'text-slate-900'
  const textDesc = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'
  const textLabel = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'
  const textValue = theme === 'dark' ? 'text-white' : 'text-slate-900'
  const borderRow = theme === 'dark' ? 'border-slate-700' : 'border-slate-200'
  const textRow = theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
  const { data: session } = useSession()
  const currentIsSuperAdmin = Boolean((session?.user as any)?.isSuperAdmin)
  const currentIsAdmin = Boolean((session?.user as any)?.role === 'ADMIN')
  const { data, loading, error, refresh, lastUpdated, refreshing } = useDashboardData({ showToast })
  const [showExportModal, setShowExportModal] = useState(false)
  const [showLogsModal, setShowLogsModal] = useState(false)
  const [exportOptions, setExportOptions] = useState({
    includeBasicInfo: true,
    includeStats: true,
    includeUserInfo: true,
    includeDates: true,
    includeFiles: false,
  })
  const [logs, setLogs] = useState<Array<{ time: string; level: string; message: string }>>([])
  const [materialLogs, setMaterialLogs] = useState<Array<{
    id: string
    type: string
    action: string
    materialId: string
    materialName: string
    username: string
    userEmail: string
    timestamp: string
    actionDetail?: string | string[]
  }>>([])
  const [loadingMaterialLogs, setLoadingMaterialLogs] = useState(false)

  useEffect(() => {
    refresh()
    addLog('info', '监控仪表板已加载')
  }, [refresh])

  useEffect(() => {
    const timer = setInterval(() => {
      void refresh({ background: true })
      addLog('info', '自动刷新数据')
    }, AUTO_REFRESH_INTERVAL)
    return () => clearInterval(timer)
  }, [refresh])

  useEffect(() => {
    if (data) {
      addLog('info', '数据加载成功')
      // 检查数据完整性
      console.log('[MonitorTab] Raw data.trends:', data.trends)
      console.log('[MonitorTab] materialUploadsDaily:', data.trends?.materialUploadsDaily)
      console.log('[MonitorTab] materialUploadsMonthly:', data.trends?.materialUploadsMonthly)
      
      if (!data.trends?.materialUploadsDaily || data.trends.materialUploadsDaily.length === 0) {
        addLog('warn', '本月新素材数据为空，请检查API返回')
        console.warn('[MonitorTab] materialUploadsDaily is empty')
      } else {
        console.log('[MonitorTab] materialUploadsDaily sample:', data.trends.materialUploadsDaily.slice(0, 5))
      }
      if (!data.trends?.materialUploadsMonthly || data.trends.materialUploadsMonthly.length === 0) {
        addLog('warn', '素材上传趋势（月度）数据为空，请检查API返回')
        console.warn('[MonitorTab] materialUploadsMonthly is empty')
      } else {
        console.log('[MonitorTab] materialUploadsMonthly sample:', data.trends.materialUploadsMonthly.slice(0, 5))
      }
    }
  }, [data])

  useEffect(() => {
    if (error) {
      addLog('error', `数据加载失败: ${error}`)
    }
  }, [error])

  const formattedLastUpdated = useMemo(() => {
    if (!lastUpdated) return '尚未获取'
    return formatDateTimeLocale(lastUpdated, 'zh-CN', { hour12: false })
  }, [lastUpdated])

  const handleManualRefresh = () => {
    addLog('info', '手动刷新数据')
    void refresh({ background: Boolean(data) })
  }

  // 导出素材CSV功能
  const handleExportMaterials = async () => {
    const escapeCell = (value: string | number | null | undefined) =>
      `"${String(value ?? '').replace(/"/g, '""')}"`
    try {
      const [materialsResponse, logsResponse] = await Promise.all([
        fetch('/api/admin/materials/export?limit=10000'),
        fetch('/api/admin/material-logs?limit=200'),
      ])
      if (!materialsResponse.ok) throw new Error('获取素材数据失败')
      const result = await materialsResponse.json()
      const materials = result.materials || []
      const logsPayload = logsResponse.ok ? await logsResponse.json() : null
      const materialLogsForExport = (logsPayload?.logs || []).slice(0, 200)

      const csvRows: string[] = []
      const headers: string[] = []
      
      if (exportOptions.includeBasicInfo) {
        headers.push('ID', '产品型号', '品牌名称', '系列名称', 'SKU编码', '材质纹理')
      }
      if (exportOptions.includeStats) {
        headers.push('下载次数', '点赞次数', '是否精品')
      }
      if (exportOptions.includeUserInfo) {
        headers.push('上传者', '作者名称')
      }
      if (exportOptions.includeDates) {
        headers.push('创建时间', '更新时间')
      }
      if (exportOptions.includeFiles) {
        headers.push('ZIP文件名', 'ZIP文件大小(字节)')
      }
      headers.push('分类', '场景', '平台', '素材类型', '渲染器', '渲染时间', '图像分辨率', '颜色模式')
      
      csvRows.push(headers.join(','))
      
      materials.forEach((material: any) => {
        const row: string[] = []
        if (exportOptions.includeBasicInfo) {
          row.push(
            material.id || '',
            `"${(material.productModel || '').replace(/"/g, '""')}"`,
            `"${(material.brandName || '').replace(/"/g, '""')}"`,
            `"${(material.seriesName || '').replace(/"/g, '""')}"`,
            `"${(material.skuCode || '').replace(/"/g, '""')}"`,
            `"${(material.materialTexture || '').replace(/"/g, '""')}"`
          )
        }
        if (exportOptions.includeStats) {
          row.push(
            material.downloadCount || 0,
            material.likeCount || 0,
            material.isPremium ? '是' : '否'
          )
        }
        if (exportOptions.includeUserInfo) {
          row.push(
            `"${(material.user?.username || '').replace(/"/g, '""')}"`,
            `"${(material.authorName || '').replace(/"/g, '""')}"`
          )
        }
        if (exportOptions.includeDates) {
          row.push(
            material.createdAt ? new Date(material.createdAt).toLocaleString('zh-CN') : '',
            material.updatedAt ? new Date(material.updatedAt).toLocaleString('zh-CN') : ''
          )
        }
        if (exportOptions.includeFiles) {
          row.push(
            `"${(material.zipFileName || '').replace(/"/g, '""')}"`,
            material.zipFileSize?.toString() || '0'
          )
        }
        row.push(
          `"${(material.categoryName || '').replace(/"/g, '""')}"`,
          `"${(material.sceneName || '').replace(/"/g, '""')}"`,
          `"${(material.platformName || '').replace(/"/g, '""')}"`,
          `"${(material.materialType || '').replace(/"/g, '""')}"`,
          `"${(material.renderer || '').replace(/"/g, '""')}"`,
          `"${(material.renderTime || '').replace(/"/g, '""')}"`,
          `"${(material.imageResolution || '').replace(/"/g, '""')}"`,
          `"${(material.colorMode || '').replace(/"/g, '""')}"`
        )
        csvRows.push(row.join(','))
      })

      if (materialLogsForExport.length) {
        csvRows.push('')
        csvRows.push('=== 素材操作日志（最近200条） ===')
        csvRows.push('时间,操作,素材名称,操作人,邮箱')
        materialLogsForExport.forEach((log: any) => {
          const row = [
            escapeCell(log.timestamp),
            escapeCell(log.action),
            escapeCell(log.materialName),
            escapeCell(log.username),
            escapeCell(log.userEmail),
          ]
          csvRows.push(row.join(','))
        })
      }

      const csvContent = csvRows.join('\n')
      const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `素材导出_${new Date().toISOString().split('T')[0]}.csv`
      link.click()
      URL.revokeObjectURL(url)
      
      setShowExportModal(false)
      showToast('素材数据导出成功', 'success')
      
      // 添加日志
      addLog('info', `导出素材数据，共 ${materials.length} 条记录`)
    } catch (error) {
      console.error('导出失败:', error)
      showToast('导出失败: ' + (error instanceof Error ? error.message : '未知错误'), 'error')
      addLog('error', `导出素材数据失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

  // 添加日志
  const addLog = (level: string, message: string) => {
    const newLog = {
      time: new Date().toLocaleString('zh-CN'),
      level,
      message,
    }
    setLogs((prev) => [newLog, ...prev].slice(0, 100)) // 只保留最近100条
  }

  // 获取素材操作日志
  const fetchMaterialLogs = async () => {
    setLoadingMaterialLogs(true)
    try {
      const response = await fetch('/api/admin/material-logs?limit=100')
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.error || `获取素材日志失败 (状态码: ${response.status})`)
      }
      const result = await response.json()
      setMaterialLogs(result.logs || [])
    } catch (error: any) {
      console.error('获取素材日志失败:', error)
      const errorMessage = error?.message || '获取素材日志失败，请稍后重试'
      showToast(errorMessage, 'error')
    } finally {
      setLoadingMaterialLogs(false)
    }
  }

  // 导出素材日志CSV
  const handleExportMaterialLogs = () => {
    try {
      const escapeCell = (value: string | number | null | undefined) =>
        `"${String(value ?? '').replace(/"/g, '""')}"`
      
      const csvRows: string[] = []
      csvRows.push('时间,操作,素材名称,素材ID,操作人,邮箱')
      
      materialLogs.forEach((log) => {
        const row = [
          escapeCell(new Date(log.timestamp).toLocaleString('zh-CN')),
          escapeCell(log.action),
          escapeCell(log.materialName),
          escapeCell(log.materialId),
          escapeCell(log.username),
          escapeCell(log.userEmail),
        ]
        csvRows.push(row.join(','))
      })
      
      const csvContent = csvRows.join('\n')
      const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `素材操作日志_${new Date().toISOString().split('T')[0]}.csv`
      link.click()
      URL.revokeObjectURL(url)
      
      showToast('素材日志导出成功', 'success')
      addLog('info', `导出素材日志，共 ${materialLogs.length} 条记录`)
    } catch (error) {
      console.error('导出日志失败:', error)
      showToast('导出日志失败: ' + (error instanceof Error ? error.message : '未知错误'), 'error')
      addLog('error', `导出素材日志失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

  const monthlyUploads = useMemo(() => {
    if (!data?.trends?.materialUploadsMonthly) {
      console.log('[MonitorTab] No materialUploadsMonthly data')
      return []
    }
    // 只显示最近12个月的数据
    const now = new Date()
    const twelveMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 12, 1)
    
    console.log('[MonitorTab] Filtering monthly data from:', twelveMonthsAgo.toISOString())
    console.log('[MonitorTab] Total monthly records:', data.trends.materialUploadsMonthly.length)
    
    const filtered = data.trends.materialUploadsMonthly
      .filter((item) => {
        try {
          if (!item.date) {
            console.warn('[MonitorTab] Monthly item has no date:', item)
            return false
          }
          // 解析日期，支持 YYYY-MM 格式
          let date: Date
          if (typeof item.date === 'string') {
            if (item.date.match(/^\d{4}-\d{2}$/)) {
              const parts = item.date.split('-').map((part) => Number(part))
              date = new Date(parts[0], parts[1] - 1, 1)
            } else {
              date = new Date(item.date)
            }
          } else {
            date = new Date(item.date)
          }
          
          const matches = date >= twelveMonthsAgo
          if (matches) {
            console.log('[MonitorTab] Matched monthly item:', item.date, '->', date.toISOString(), 'count:', item.count)
          }
          
          return matches
        } catch (error) {
          console.error('[MonitorTab] Error parsing monthly date:', item.date, error)
          return false
        }
      })
    
    console.log('[MonitorTab] Filtered monthly data:', filtered.length, 'items')
    
    return filtered.sort((a, b) => {
      try {
        const dateA = typeof a.date === 'string' && a.date.match(/^\d{4}-\d{2}$/)
          ? new Date(a.date.split('-').map(Number).join('-') + '-01')
          : new Date(a.date)
        const dateB = typeof b.date === 'string' && b.date.match(/^\d{4}-\d{2}$/)
          ? new Date(b.date.split('-').map(Number).join('-') + '-01')
          : new Date(b.date)
        return dateA.getTime() - dateB.getTime()
      } catch {
        return 0
      }
    })
  }, [data?.trends?.materialUploadsMonthly])
  const materialUploadMonthlyMax = monthlyUploads.length
    ? Math.max(...monthlyUploads.map((item) => item.count), 1)
    : 1

  const currentMonthDailyData = useMemo(() => {
    if (!data?.trends?.materialUploadsDaily) {
      console.log('[MonitorTab] No materialUploadsDaily data')
      return []
    }
    const now = new Date()
    const currentYear = now.getFullYear()
    const currentMonth = now.getMonth()
    
    console.log('[MonitorTab] Filtering for current month:', currentYear, currentMonth + 1)
    console.log('[MonitorTab] Total daily records:', data.trends.materialUploadsDaily.length)
    
    // 过滤出本月的数据，使用更宽松的匹配
    const filtered = data.trends.materialUploadsDaily.filter((item) => {
      try {
        if (!item.date) {
          console.warn('[MonitorTab] Item has no date:', item)
          return false
        }
        // 尝试多种日期格式解析
        let date: Date
        if (typeof item.date === 'string') {
          // 如果是 YYYY-MM-DD 格式
          if (item.date.match(/^\d{4}-\d{2}-\d{2}$/)) {
            const parts = item.date.split('-').map((part) => Number(part))
            date = new Date(parts[0], parts[1] - 1, parts[2])
          } else {
            date = new Date(item.date)
          }
        } else {
          date = new Date(item.date)
        }
        
        const itemYear = date.getFullYear()
        const itemMonth = date.getMonth()
        const matches = itemMonth === currentMonth && itemYear === currentYear
        
        if (matches) {
          console.log('[MonitorTab] Matched item:', item.date, '->', date.toISOString(), 'count:', item.count)
        }
        
        return matches
      } catch (error) {
        console.error('[MonitorTab] Error parsing date:', item.date, error)
        return false
      }
    })
    
    console.log('[MonitorTab] Filtered current month daily data:', filtered.length, 'items')
    
    // 按日期排序
    return filtered.sort((a, b) => {
      try {
        const dateA = typeof a.date === 'string' && a.date.match(/^\d{4}-\d{2}-\d{2}$/)
          ? new Date(a.date.split('-').map(Number).join('-'))
          : new Date(a.date)
        const dateB = typeof b.date === 'string' && b.date.match(/^\d{4}-\d{2}-\d{2}$/)
          ? new Date(b.date.split('-').map(Number).join('-'))
          : new Date(b.date)
        return dateA.getTime() - dateB.getTime()
      } catch {
        return 0
      }
    })
  }, [data?.trends?.materialUploadsDaily])
  const currentMonthDailyMax = currentMonthDailyData.length
    ? Math.max(...currentMonthDailyData.map((item) => item.count), 1)
    : 1

  const parseDateStringToLocal = (value: string) => {
    const parts = value.split('-').map((part) => Number(part))
    if (parts.length < 3) return new Date(value)
    const [year, month, day] = parts
    return new Date(year, month - 1, day)
  }

  const formatDayLabel = (value: string) =>
    parseDateStringToLocal(value).toLocaleDateString('zh-CN', {
      day: '2-digit',
    })

  if (loading) {
    return <LoadingState message="加载系统监控数据..." />
  }

  if (error) {
    return <ErrorState message={error} onRetry={() => refresh()} />
  }

  if (!data) {
    return <EmptyState message="暂无数据" />
  }


  return (
    <div className="space-y-8">
      <section
        className={cn(
          'rounded-lg border mb-6 flex-shrink-0',
          theme === 'dark'
            ? 'border-slate-700 bg-slate-900/80 text-white'
            : 'border-slate-200 bg-white text-slate-900',
          'p-5',
        )}
      >
        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div className="space-y-1.5">
            <h2 className={cn('text-xl font-semibold', textTitle)}>系统监控概览</h2>
            <p className={cn('text-sm', textDesc)}>最近更新：{formattedLastUpdated}</p>
          </div>
          <div className="flex items-center gap-3">
            {refreshing && (
              <span className={cn('text-xs flex items-center gap-1', textDesc)}>
                <span className="inline-block h-3 w-3 rounded-full border-2 border-slate-300 border-t-slate-600 animate-spin dark:border-slate-700 dark:border-t-slate-300" />
                后台同步中...
              </span>
            )}
            <button
              type="button"
              className={cn(
                styles.buttonStyles.secondary,
                'flex items-center gap-2',
                'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200' // 显式添加背景色、边框和文字色
              )}
              onClick={handleManualRefresh}
            >
              <svg className={cn('w-4 h-4', refreshing && 'animate-spin')} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v6h6M20 20v-6h-6M5 19a9 9 0 0014-7 9 9 0 00-9-9" />
              </svg>
              刷新数据
            </button>
            {currentIsAdmin && (
              <>
                <button
                  type="button"
                  className={cn(
                    styles.buttonStyles.secondary,
                    'flex items-center gap-2',
                    'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200'
                  )}
                  onClick={() => setShowExportModal(true)}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  导出素材CSV
                </button>
                <button
                  type="button"
                  className={cn(
                    styles.buttonStyles.secondary,
                    'flex items-center gap-2',
                    'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200'
                  )}
                  onClick={async () => {
                    setShowLogsModal(true)
                    await fetchMaterialLogs()
                  }}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  查看日志
                </button>
              </>
            )}
          </div>
        </div>
      </section>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {OVERVIEW_CARDS.map((card) => {
          const CardContent = (
            <div className="p-5">
              <div className="flex items-center gap-4">
                <span className={cn('h-10 w-1 rounded-sm', card.accentClass)} aria-hidden="true" />
                <dl className="min-w-0 flex-1">
                  <dt className={cn('text-sm font-medium truncate', textLabel)}>{card.label}</dt>
                  <dd className={cn('text-2xl font-semibold mt-1', textValue)}>{card.getValue(data)}</dd>
                </dl>
              </div>
            </div>
          )

          if (card.href) {
            return (
              <div
                key={card.label}
                className={cn(
                  styles.cardStyles.base,
                  'overflow-hidden cursor-pointer transition-colors',
                  theme === 'dark' ? 'hover:border-slate-500 hover:bg-slate-800/80' : 'hover:border-slate-300 hover:bg-slate-50'
                )}
                onClick={() => router.push(card.href!)}
                title={`点击查看${card.label}详情`}
              >
                {CardContent}
              </div>
            )
          }

          return (
            <div key={card.label} className={cn(styles.cardStyles.base, 'overflow-hidden')}>
              {CardContent}
            </div>
          )
        })}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div className={cn(styles.cardStyles.base, 'p-6')}>
          <div className="mb-4 flex items-center justify-between">
            <h3 className={cn('text-lg font-semibold', textTitle)}>本月新素材（每日上传）</h3>
            <span className={cn('text-sm', textDesc)}>累计 {currentMonthDailyData.reduce((sum, item) => sum + item.count, 0)}</span>
          </div>
          <div className="h-64">
            {currentMonthDailyData.length ? (
              <div className="h-full flex items-end gap-3 overflow-x-auto pb-4">
                {currentMonthDailyData.map((item) => {
                  const barHeight = Math.max(8, (item.count / currentMonthDailyMax) * 100)
                  return (
                    <div key={item.date} className="flex flex-col items-center min-w-[40px]">
                      <span className={cn('text-xs font-semibold mb-2', textValue)}>{item.count}</span>
                      <div className="w-7 h-44 rounded-sm bg-slate-200 dark:bg-slate-700 flex items-end overflow-hidden">
                        <div
                          className="w-full bg-slate-600 transition-colors dark:bg-slate-400"
                          style={{ height: `${barHeight}%` }}
                        />
                      </div>
                      <span className={cn('text-[11px] mt-2 text-center', textRow)}>{formatDayLabel(item.date)}</span>
                    </div>
                  )
                })}
              </div>
            ) : (
              <div className={cn('h-full flex items-center justify-center text-sm', textDesc)}>本月暂未上传素材</div>
            )}
          </div>
        </div>

        <div className={cn(styles.cardStyles.base, 'p-6')}>
          <div className="mb-4 flex items-center justify-between">
            <h3 className={cn('text-lg font-semibold', textTitle)}>素材上传趋势（最近12个月）</h3>
            {monthlyUploads.length > 0 && (
              <div className={cn('text-sm font-medium', textValue)}>
                最近月份上传:
                <span className="ml-1 text-slate-900 dark:text-slate-100">
                  {monthlyUploads[monthlyUploads.length - 1]?.count || 0}
                </span>
              </div>
            )}
          </div>
          <div className="h-64">
            {monthlyUploads.length ? (
              <div className="h-full flex items-end gap-4 overflow-x-auto pb-4">
                {monthlyUploads.map((item) => {
                  const barHeight = Math.max(8, (item.count / materialUploadMonthlyMax) * 100)
                  return (
                    <div key={item.date} className="flex flex-col items-center min-w-[48px]">
                      <span className={cn('text-xs font-semibold mb-2', textValue)}>{item.count}</span>
                      <div className="w-8 h-44 rounded-sm bg-slate-200 dark:bg-slate-700 flex items-end overflow-hidden">
                        <div
                          className="w-full bg-slate-600 transition-colors dark:bg-slate-400"
                          style={{ height: `${barHeight}%` }}
                        />
                      </div>
                      <span className={cn('text-[11px] mt-2 text-center', textRow)}>{item.date}</span>
                    </div>
                  )
                })}
              </div>
            ) : (
              <div className={cn('h-full flex items-center justify-center text-sm', textDesc)}>暂无趋势数据</div>
            )}
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className={cn(styles.cardStyles.base)}>
          <h3 className={cn('text-lg font-semibold mb-4', textTitle)}>架构分布（一级架构）</h3>
          <div className="space-y-2 h-48 overflow-y-auto pr-1">
            {(() => {
              // 只显示一级部门（没有"-"分隔符的部门）
              if (!data.distribution.departments.length) {
                return <p className={cn('text-sm', textDesc)}>暂无架构分布数据</p>
              }
              
              const deptMap = new Map<string, number>()
              
              data.distribution.departments.forEach((item) => {
                const dept = item.department || '未设置'
                // 如果部门名包含"-"，取第一部分作为一级部门
                const firstLevel = dept.includes('-') ? dept.split('-')[0] : dept
                deptMap.set(firstLevel, (deptMap.get(firstLevel) || 0) + item.count)
              })
              
              const firstLevelDepartments = Array.from(deptMap.entries())
                .map(([department, count]) => ({ department, count }))
                .sort((a, b) => b.count - a.count)
              
              return firstLevelDepartments.length ? (
                firstLevelDepartments.map((item) => (
                  <div key={item.department} className="flex justify-between items-center py-1.5">
                    <span className={cn('text-sm truncate flex-1', textRow)} title={item.department}>
                      {item.department}
                    </span>
                    <span className={cn('text-sm font-semibold ml-2', textValue)}>{item.count}</span>
                  </div>
                ))
              ) : (
                <p className={cn('text-sm', textDesc)}>暂无架构分布数据</p>
              )
            })()}
          </div>
        </div>

        <div className={cn(styles.cardStyles.base)}>
          <h3 className={cn('text-lg font-semibold mb-4', textTitle)}>权限分布</h3>
          <div className="space-y-3">
            {data.distribution.roles.length ? (
              data.distribution.roles.map((item, index) => (
                <div key={`${item.role}-${index}`} className="flex justify-between items-center">
                  <span className={cn('text-sm', textRow)}>
                    {item.role === 'ADMIN' && item.isSuperAdmin
                      ? '超级管理员'
                      : item.role === 'ADMIN'
                        ? '管理员'
                        : '普通用户'}
                  </span>
                  <span className={cn('text-sm font-semibold', textValue)}>{item.count}</span>
                </div>
              ))
            ) : (
              <p className={cn('text-sm', textDesc)}>暂无权限分布数据</p>
            )}
          </div>
        </div>

        <div className={cn(styles.cardStyles.base)}>
          <h3 className={cn('text-lg font-semibold mb-4', textTitle)}>系统信息</h3>
          <div className="space-y-3">
            <div className="flex justify-between items-center">
              <span className={cn('text-sm', textRow)}>站点名称</span>
              <span className={cn('text-sm font-semibold', textValue)}>{data.systemInfo.siteName || '未设置'}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className={cn('text-sm', textRow)}>注册功能</span>
              <span className={cn('text-sm font-medium', data.systemInfo.registrationEnabled ? 'text-green-600 dark:text-green-400' : 'text-slate-500 dark:text-slate-400')}>
                {data.systemInfo.registrationEnabled ? '开启' : '关闭'}
              </span>
            </div>
            <div className="flex justify-between items-center">
              <span className={cn('text-sm', textRow)}>用户激活</span>
              <span className={cn('text-sm font-medium', data.systemInfo.userActivationRequired ? 'text-green-600 dark:text-green-400' : 'text-slate-500 dark:text-slate-400')}>
                {data.systemInfo.userActivationRequired ? '需要' : '关闭'}
              </span>
            </div>
            <div className="flex justify-between items-center">
              <span className={cn('text-sm', textRow)}>数据库状态</span>
              <span
                className={cn(
                  'text-sm font-medium',
                  data.status.database === 'healthy' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400',
                )}
              >
                {data.status.database === 'healthy' ? '正常' : '异常'}
              </span>
            </div>
            <div className="flex justify-between items-center">
              <span className={cn('text-sm', textRow)}>运行时间</span>
              <span className={cn('text-sm font-semibold', textValue)}>
                {Math.floor(data.status.uptime / 3600)} 小时 {Math.floor((data.status.uptime % 3600) / 60)} 分钟
              </span>
            </div>
          </div>
        </div>
      </div>

      <div className={cn(styles.cardStyles.base)}>
        <h3 className={cn('text-lg font-semibold mb-4', textTitle)}>最近活动</h3>
        <div className="overflow-x-auto">
          <table className={cn('min-w-full divide-y', theme === 'dark' ? 'divide-slate-700' : 'divide-slate-200')}>
            <thead className={theme === 'dark' ? 'bg-slate-700' : 'bg-slate-50'}>
              <tr>
                <th className={cn('px-6 py-3 text-left text-xs font-medium uppercase tracking-wider', theme === 'dark' ? 'text-slate-300' : 'text-slate-500')}>
                  素材标题
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-300 uppercase tracking-wider">
                  上传者
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-300 uppercase tracking-wider">
                  上传时间
                </th>
              </tr>
            </thead>
            <tbody className={cn('divide-y', theme === 'dark' ? 'bg-slate-800 divide-slate-700' : 'bg-white divide-slate-200')}>
              {data.recentActivity && data.recentActivity.length > 0 ? (
                data.recentActivity.map((activity) => (
                  <tr key={activity.id} className={theme === 'dark' ? 'hover:bg-slate-700' : 'hover:bg-slate-50'}>
                    <td className={cn('px-6 py-4 whitespace-nowrap text-sm', textValue)}>{activity.title}</td>
                    <td className={cn('px-6 py-4 whitespace-nowrap text-sm', textDesc)}>
                      {activity.uploadedBy.username}
                    </td>
                    <td className={cn('px-6 py-4 whitespace-nowrap text-sm', textDesc)}>
                      {new Date(activity.createdAt).toLocaleString('zh-CN')}
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={3} className={cn('px-6 py-8 text-center text-sm', textDesc)}>
                    暂无最近活动
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* 导出素材CSV弹窗 */}
      <Modal
        isOpen={showExportModal}
        onClose={() => setShowExportModal(false)}
        title="导出素材数据"
        size="medium"
        footer={
          <div className="flex justify-end gap-3">
            <button
              type="button"
              onClick={() => setShowExportModal(false)}
              className={cn(
                styles.buttonStyles.secondary,
                'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200'
              )}
            >
              取消
            </button>
            <button
              type="button"
              onClick={handleExportMaterials}
              className={cn(styles.buttonStyles.primary)}
            >
              导出
            </button>
          </div>
        }
      >
        <div className="space-y-4">
          <p className={cn('text-sm', textDesc)}>请选择要导出的字段：</p>
          <div className="space-y-3">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={exportOptions.includeBasicInfo}
                onChange={(e) => setExportOptions({ ...exportOptions, includeBasicInfo: e.target.checked })}
                className="w-4 h-4 rounded border-slate-300 dark:border-slate-600"
              />
              <span className={cn('text-sm', textValue)}>基本信息（ID、产品型号、品牌、系列、SKU、材质）</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={exportOptions.includeStats}
                onChange={(e) => setExportOptions({ ...exportOptions, includeStats: e.target.checked })}
                className="w-4 h-4 rounded border-slate-300 dark:border-slate-600"
              />
              <span className={cn('text-sm', textValue)}>统计数据（下载次数、点赞次数、是否精品）</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={exportOptions.includeUserInfo}
                onChange={(e) => setExportOptions({ ...exportOptions, includeUserInfo: e.target.checked })}
                className="w-4 h-4 rounded border-slate-300 dark:border-slate-600"
              />
              <span className={cn('text-sm', textValue)}>用户信息（上传者、作者名称）</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={exportOptions.includeDates}
                onChange={(e) => setExportOptions({ ...exportOptions, includeDates: e.target.checked })}
                className="w-4 h-4 rounded border-slate-300 dark:border-slate-600"
              />
              <span className={cn('text-sm', textValue)}>时间信息（创建时间、更新时间）</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={exportOptions.includeFiles}
                onChange={(e) => setExportOptions({ ...exportOptions, includeFiles: e.target.checked })}
                className="w-4 h-4 rounded border-slate-300 dark:border-slate-600"
              />
              <span className={cn('text-sm', textValue)}>文件信息（ZIP文件名、文件大小）</span>
            </label>
          </div>
        </div>
      </Modal>

      {/* 素材操作日志弹窗 */}
      <Modal
        isOpen={showLogsModal}
        onClose={() => setShowLogsModal(false)}
        title="素材操作日志"
        size="large"
        footer={
          <div className="flex justify-between items-center gap-3">
            <button
              type="button"
              onClick={fetchMaterialLogs}
              disabled={loadingMaterialLogs}
              className={cn(
                styles.buttonStyles.secondary,
                'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200',
                loadingMaterialLogs && 'opacity-50 cursor-not-allowed'
              )}
            >
              {loadingMaterialLogs ? '刷新中...' : '刷新'}
            </button>
            <button
              type="button"
              onClick={handleExportMaterialLogs}
              disabled={materialLogs.length === 0}
              className={cn(
                styles.buttonStyles.secondary,
                'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200',
                materialLogs.length === 0 && 'opacity-50 cursor-not-allowed'
              )}
            >
              <svg className="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              导出CSV
            </button>
            <button
              type="button"
              onClick={() => setShowLogsModal(false)}
              className={cn(styles.buttonStyles.secondary)}
            >
              关闭
            </button>
          </div>
        }
      >
        <div className="space-y-2 max-h-96 overflow-y-auto">
          {loadingMaterialLogs ? (
            <div className={cn('text-center py-8', textDesc)}>
              <span className="mr-2 inline-block h-4 w-4 rounded-full border-2 border-slate-300 border-t-slate-600 animate-spin dark:border-slate-700 dark:border-t-slate-300" />
              加载中...
            </div>
          ) : materialLogs.length === 0 ? (
            <p className={cn('text-sm text-center py-8', textDesc)}>暂无操作日志</p>
          ) : (
            materialLogs.map((log) => {
              const cardColorMap: Record<string, string> = {
                upload: 'border-green-500/50 bg-green-50/50 dark:bg-green-900/20',
                update: 'border-slate-300 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/50',
                delete: 'border-red-500/50 bg-red-50/50 dark:bg-red-900/20',
                toggle: 'border-amber-500/50 bg-amber-50/50 dark:bg-amber-900/20',
              }

              const badgeColorMap: Record<string, string> = {
                upload: 'bg-green-500 text-white',
                update: 'bg-slate-600 text-white dark:bg-slate-500',
                delete: 'bg-red-500 text-white',
                toggle: 'bg-amber-500 text-white',
              }

              const cardTone = cardColorMap[log.type] || (theme === 'dark' ? 'border-slate-700 bg-slate-800/50' : 'border-slate-200 bg-slate-50')
              const badgeTone = badgeColorMap[log.type] || 'bg-slate-500 text-white'

              return (
              <div
                key={log.id}
                className={cn(
                  'p-3 rounded-lg border text-sm',
                  cardTone
                )}
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <span className={cn('text-xs font-semibold px-2 py-0.5 rounded', badgeTone)}>
                        {log.action}
                      </span>
                      <span className={cn('text-xs font-mono', textDesc)}>
                        {new Date(log.timestamp).toLocaleString('zh-CN')}
                      </span>
                    </div>
                    <p className={cn('font-medium', textValue)}>
                      素材：{log.materialName || '未命名素材'}
                    </p>
                    {(log as any).actionDetail && (
                      <div className={cn('text-xs mt-2 space-y-1', textDesc)}>
                        {Array.isArray((log as any).actionDetail) ? (
                          (log as any).actionDetail.map((detail: string, idx: number) => (
                            <p key={idx} className="leading-relaxed">
                              {detail}
                            </p>
                          ))
                        ) : (
                          <p className="leading-relaxed">{(log as any).actionDetail}</p>
                        )}
                      </div>
                    )}
                    <p className={cn('text-xs mt-1', textDesc)}>
                      操作人：{log.username} ({log.userEmail})
                    </p>
                  </div>
                </div>
              </div>
              )
            })
          )}
        </div>
      </Modal>
    </div>
  )
}

const OVERVIEW_CARDS: Array<{
  label: string
  accentClass: string
  getValue: (data: DashboardData) => number
  href?: string
  onClick?: () => void
}> = [
  {
    label: '总用户数',
    accentClass: 'bg-slate-400 dark:bg-slate-500',
    getValue: (data) => data.overview.totalUsers,
    href: '/admin?tab=users',
  },
  {
    label: '活跃用户',
    accentClass: 'bg-emerald-500 dark:bg-emerald-400',
    getValue: (data) => data.overview.activeUsers,
    href: '/admin?tab=users',
  },
  {
    label: '总素材数',
    accentClass: 'bg-slate-500 dark:bg-slate-400',
    getValue: (data) => data.overview.totalMaterials,
    href: '/',
  },
  {
    label: '本月新用户',
    accentClass: 'bg-amber-500 dark:bg-amber-400',
    getValue: (data) => data.overview.newUsersThisMonth,
    href: '/admin?tab=users',
  },
]