'use client'

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import TrendLineChart from './TrendLineChart'
import {
  addDays,
  endOfMonth,
  format,
  isAfter,
  isBefore,
  isSameDay,
  isSameMonth,
  isValid,
  isWithinInterval,
  parse,
  startOfMonth,
  startOfWeek,
  subDays,
  subMonths,
} from 'date-fns'

type Granularity = 'month' | 'day'
type DatePresetKey = 'today' | 'last7' | 'last30' | 'thisMonth' | 'lastMonth' | 'all'
type DateFilterMode = DatePresetKey | 'custom'

interface MaterialUserUploadStat {
  userId: string
  username: string
  realName: string | null
  departmentName: string
  departmentKey: string
  uploadCount: number
  percentage?: number
}

interface MaterialDepartmentUploadStat {
  departmentKey: string
  departmentId: string | null
  departmentName: string
  uploadCount: number
  userCount: number
  percentage: number
  users?: MaterialUserUploadStat[]
}

interface MaterialTrendPoint {
  bucket: string
  count: number
}

interface MaterialTypeUploadStat {
  materialType: string
  uploadCount: number
  percentage: number
}

interface MaterialTypeDistributionStat {
  materialType: string
  uploadCount: number
  percentage: number
  users: MaterialUserUploadStat[]
}

interface MaterialDistributionSection<TItem> {
  granularity: Granularity
  period: string
  label: string
  totalUploads: number
  items: TItem[]
}

interface MaterialUploadStatsData {
  filters: {
    startDate: string | null
    endDate: string | null
    departmentKey: string | null
  }
  summary: {
    totalUploads: number
    totalDepartments: number
    totalUsers: number
  }
  departments: MaterialDepartmentUploadStat[]
  selectedDepartmentName: string
  selectedUsers: MaterialUserUploadStat[]
  dailyUploads: MaterialTrendPoint[]
  monthlyUploads: MaterialTrendPoint[]
  materialTypeStats: MaterialTypeUploadStat[]
  departmentDistribution: MaterialDistributionSection<MaterialDepartmentUploadStat>
  materialTypeDistribution: MaterialDistributionSection<MaterialTypeDistributionStat>
}

interface OperationLogItem {
  id: string
  source: 'material_log' | 'download_log'
  action: string
  timestamp: string
  user: {
    id: string
    username: string
    realName: string | null
    departmentName: string
  }
  material: {
    id: string
    productModel: string
    materialType: string
  }
  changes: Record<string, unknown> | null
}

interface OperationLogFieldDiff {
  oldValue?: unknown
  newValue?: unknown
}

interface OperationLogResponse {
  logs: OperationLogItem[]
  page: number
  pageSize: number
  total: number
  totalPages: number
}

interface DataStatisticsTabProps {
  showToast: (message: string, type?: 'success' | 'error') => void
  canViewLogs?: boolean
  canSelectDepartment?: boolean
  departmentScopeName?: string | null
}

interface StatsQueryState {
  startDate: string
  endDate: string
  departmentKey: string
}

interface DrilldownState {
  source: 'department' | 'materialType'
  key: string
  title: string
  totalUploads: number
  users: MaterialUserUploadStat[]
}

interface HorizontalBarDatum {
  key: string
  label: string
  value: number
  percentage: number
  subText?: string
}

const DATE_FORMAT = 'yyyy-MM-dd'

const DATE_PRESETS: Array<{ key: DatePresetKey; label: string }> = [
  { key: 'today', label: '今天' },
  { key: 'last7', label: '近7天' },
  { key: 'last30', label: '近30天' },
  { key: 'thisMonth', label: '本月' },
  { key: 'lastMonth', label: '上月' },
  { key: 'all', label: '全部' },
]

const ACTION_OPTIONS = [
  { value: 'ALL', label: '全部操作' },
  { value: 'UPLOAD', label: '上传' },
  { value: 'UPDATE', label: '修改' },
  { value: 'DELETE', label: '删除' },
  { value: 'DOWNLOAD', label: '下载' },
  { value: 'RESTORE', label: '恢复' },
]

const ACTION_COLOR_MAP: Record<string, string> = {
  UPLOAD: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
  UPDATE: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
  DELETE: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
  DOWNLOAD: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
  RESTORE: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
}

const BAR_SOLID_CLASS: Record<'blue' | 'emerald', string> = {
  // 对齐首页 Apple 基线：克制、有层次的蓝/青体系，柱体用渐变提升质感
  blue: 'bg-gradient-to-b from-sky-400 to-sky-600',
  emerald: 'bg-gradient-to-b from-teal-400 to-teal-600',
}

const WEEKDAY_LABELS = ['一', '二', '三', '四', '五', '六', '日']

function formatLogAction(action: string) {
  const matched = ACTION_OPTIONS.find((item) => item.value === action)
  return matched?.label || action
}

function formatValue(value: unknown): string {
  if (value === null || value === undefined || value === '') {
    return '空'
  }

  if (typeof value === 'string') {
    return value.length > 24 ? `${value.slice(0, 24)}...` : value
  }

  if (typeof value === 'number' || typeof value === 'boolean') {
    return String(value)
  }

  const serialized = JSON.stringify(value)
  return serialized.length > 24 ? `${serialized.slice(0, 24)}...` : serialized
}

function isOperationLogFieldDiff(value: unknown): value is OperationLogFieldDiff {
  if (!value || typeof value !== 'object') {
    return false
  }

  return 'oldValue' in value || 'newValue' in value
}

function formatChangeSummary(log: OperationLogItem): string {
  if (log.action === 'DOWNLOAD') {
    return '下载素材文件'
  }

  if (!log.changes || typeof log.changes !== 'object') {
    return '-'
  }

  const changeEntries = Object.entries(log.changes)
  if (changeEntries.length === 0) {
    return '-'
  }

  const items = changeEntries.slice(0, 2).map(([field, value]) => {
    if (isOperationLogFieldDiff(value)) {
      return `${field}: ${formatValue(value.oldValue)} -> ${formatValue(value.newValue)}`
    }
    return `${field}: ${formatValue(value)}`
  })

  return changeEntries.length > 2 ? `${items.join('；')} 等` : items.join('；')
}

function parseFileNameFromHeader(contentDisposition: string | null): string {
  if (!contentDisposition) {
    return `data-stats-${Date.now()}.csv`
  }

  const match = contentDisposition.match(/filename="?([^";]+)"?/i)
  if (!match?.[1]) {
    return `data-stats-${Date.now()}.csv`
  }

  try {
    return decodeURIComponent(match[1])
  } catch {
    return match[1]
  }
}

function normalizeDateInputValue(value: string): string {
  return value.trim().replace(/[./]/g, '-')
}

function isValidDateInputValue(value: string): boolean {
  if (!value) {
    return true
  }

  const parsed = parse(value, DATE_FORMAT, new Date())
  return isValid(parsed) && format(parsed, DATE_FORMAT) === value
}

function parseDateInputValue(value: string | null | undefined): Date | null {
  const normalizedValue = normalizeDateInputValue(value || '')
  if (!normalizedValue || !isValidDateInputValue(normalizedValue)) {
    return null
  }

  return parse(normalizedValue, DATE_FORMAT, new Date())
}

function getPresetRange(preset: DatePresetKey): { startDate: string; endDate: string } {
  const today = new Date()

  if (preset === 'all') {
    return { startDate: '', endDate: '' }
  }

  if (preset === 'today') {
    const value = format(today, DATE_FORMAT)
    return { startDate: value, endDate: value }
  }

  if (preset === 'last7') {
    return {
      startDate: format(subDays(today, 6), DATE_FORMAT),
      endDate: format(today, DATE_FORMAT),
    }
  }

  if (preset === 'last30') {
    return {
      startDate: format(subDays(today, 29), DATE_FORMAT),
      endDate: format(today, DATE_FORMAT),
    }
  }

  if (preset === 'thisMonth') {
    return {
      startDate: format(startOfMonth(today), DATE_FORMAT),
      endDate: format(today, DATE_FORMAT),
    }
  }

  const lastMonthDate = subMonths(today, 1)
  return {
    startDate: format(startOfMonth(lastMonthDate), DATE_FORMAT),
    endDate: format(endOfMonth(lastMonthDate), DATE_FORMAT),
  }
}

function getUserDisplayName(user: MaterialUserUploadStat): string {
  if (user.realName) {
    return `${user.realName} (${user.username})`
  }

  return user.username
}

function toDepartmentDrilldown(item: MaterialDepartmentUploadStat): DrilldownState {
  return {
    source: 'department',
    key: item.departmentKey,
    title: `${item.departmentName} - 人员素材占比`,
    totalUploads: item.uploadCount,
    users: (item.users || []).slice().sort((a, b) => b.uploadCount - a.uploadCount),
  }
}

function toMaterialTypeDrilldown(item: MaterialTypeDistributionStat): DrilldownState {
  return {
    source: 'materialType',
    key: item.materialType,
    title: `${item.materialType} - 人员素材占比`,
    totalUploads: item.uploadCount,
    users: item.users.slice().sort((a, b) => b.uploadCount - a.uploadCount),
  }
}

function SummaryCard({
  title,
  value,
  tone,
}: {
  title: string
  value: number | string
  tone: 'blue' | 'emerald' | 'amber'
}) {
  // 对齐首页 Apple 基线：白底卡片 + 左侧色条 + 图标徽章，层次更清晰
  const accentBarClass = tone === 'blue'
    ? 'bg-sky-500'
    : tone === 'emerald'
      ? 'bg-teal-500'
      : 'bg-amber-500'
  const badgeClass = tone === 'blue'
    ? 'bg-sky-50 text-sky-600 dark:bg-sky-950/50 dark:text-sky-400'
    : tone === 'emerald'
      ? 'bg-teal-50 text-teal-600 dark:bg-teal-950/50 dark:text-teal-400'
      : 'bg-amber-50 text-amber-600 dark:bg-amber-950/50 dark:text-amber-400'
  // 图标：上传(蓝)/部门(青)/用户(琥珀)
  const iconPath = tone === 'blue'
    ? 'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 7.5m0 0L7.5 12M12 7.5v9'
    : tone === 'emerald'
      ? 'M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21'
      : 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z'

  return (
    <div className="card-apple relative overflow-hidden p-5 pl-6">
      {/* 左侧色条 */}
      <div className={`absolute left-0 top-0 bottom-0 w-1 ${accentBarClass}`} />
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="text-sm text-gray-500 dark:text-gray-400 truncate">{title}</div>
          <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2 tracking-tight tabular-nums">{value}</div>
        </div>
        <div className={`shrink-0 inline-flex items-center justify-center h-10 w-10 rounded-apple ${badgeClass}`}>
          <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path strokeLinecap="round" strokeLinejoin="round" d={iconPath} />
          </svg>
        </div>
      </div>
    </div>
  )
}

export function CalendarDateInput({
  id,
  label,
  value,
  min,
  max,
  rangeStart,
  rangeEnd,
  onChange,
}: {
  id: string
  label: string
  value: string
  min?: string
  max?: string
  rangeStart?: string
  rangeEnd?: string
  onChange: (value: string) => void
}) {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const selectedDate = useMemo(() => parseDateInputValue(value), [value])
  const minDate = parseDateInputValue(min)
  const maxDate = parseDateInputValue(max)
  const rangeStartDate = parseDateInputValue(rangeStart)
  const rangeEndDate = parseDateInputValue(rangeEnd)
  const [isOpen, setIsOpen] = useState(false)
  const [visibleMonth, setVisibleMonth] = useState(() => startOfMonth(selectedDate || new Date()))

  useEffect(() => {
    if (!selectedDate) return

    const nextMonth = startOfMonth(selectedDate)
    setVisibleMonth((currentMonth) => (isSameMonth(currentMonth, nextMonth) ? currentMonth : nextMonth))
  }, [selectedDate])

  useEffect(() => {
    if (!isOpen) {
      return
    }

    const handleClickOutside = (event: MouseEvent) => {
      const containerElement = containerRef.current
      if (!containerElement) {
        return
      }

      if (!containerElement.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [isOpen])

  const dayCells = useMemo(() => {
    const calendarStart = startOfWeek(startOfMonth(visibleMonth), { weekStartsOn: 1 })
    return Array.from({ length: 42 }, (_, index) => addDays(calendarStart, index))
  }, [visibleMonth])

  const rangeBounds = useMemo(() => {
    if (!rangeStartDate || !rangeEndDate) {
      return null
    }

    return isAfter(rangeStartDate, rangeEndDate)
      ? { start: rangeEndDate, end: rangeStartDate }
      : { start: rangeStartDate, end: rangeEndDate }
  }, [rangeStartDate, rangeEndDate])

  const isDayDisabled = (day: Date) => {
    if (minDate && isBefore(day, minDate)) {
      return true
    }

    if (maxDate && isAfter(day, maxDate)) {
      return true
    }

    return false
  }

  const selectDate = (day: Date) => {
    if (isDayDisabled(day)) {
      return
    }

    onChange(format(day, DATE_FORMAT))
    setIsOpen(false)
  }

  const setToday = () => {
    selectDate(new Date())
  }

  const clearDate = () => {
    onChange('')
    setIsOpen(false)
  }

  return (
    <div ref={containerRef} className="relative">
      <label htmlFor={id} className="block text-sm text-gray-600 dark:text-gray-400 mb-1">{label}</label>
      <div className="relative">
        <input
          id={id}
          type="text"
          readOnly
          value={value}
          placeholder="YYYY-MM-DD"
          onClick={() => setIsOpen(true)}
          className="input-apple py-2 px-3 pr-10 text-sm cursor-pointer"
        />
        <button
          type="button"
          onClick={() => setIsOpen((previous) => !previous)}
          className="absolute inset-y-0 right-0 w-9 inline-flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          aria-label={`打开${label}日历`}
          title={`打开${label}日历`}
        >
          <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
            <line x1="16" y1="2" x2="16" y2="6" />
            <line x1="8" y1="2" x2="8" y2="6" />
            <line x1="3" y1="10" x2="21" y2="10" />
          </svg>
        </button>
      </div>

      {isOpen && (
        <div className="absolute z-30 mt-2 w-[280px] rounded-apple border border-gray-200 bg-white shadow-apple-lg dark:border-gray-700 dark:bg-gray-900">
          <div className="flex items-center justify-between px-3 py-2.5 border-b border-gray-100 dark:border-gray-800">
            <button
              type="button"
              onClick={() => setVisibleMonth((previous) => subMonths(previous, 1))}
              className="h-7 w-7 inline-flex items-center justify-center rounded-apple text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 transition-colors"
              aria-label="上个月"
            >
              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
            </button>
            <div className="text-sm font-semibold text-gray-900 dark:text-white">
              {format(visibleMonth, 'yyyy年MM月')}
            </div>
            <button
              type="button"
              onClick={() => setVisibleMonth((previous) => addDays(endOfMonth(previous), 1))}
              className="h-7 w-7 inline-flex items-center justify-center rounded-apple text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 transition-colors"
              aria-label="下个月"
            >
              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
            </button>
          </div>

          <div className="grid grid-cols-7 gap-1 px-3 pt-2.5 text-[11px] text-gray-400 dark:text-gray-500 font-medium">
            {WEEKDAY_LABELS.map((day) => (
              <div key={day} className="h-6 flex items-center justify-center">{day}</div>
            ))}
          </div>

          <div className="grid grid-cols-7 gap-1 px-3 pb-2">
            {dayCells.map((day) => {
              const disabled = isDayDisabled(day)
              const inCurrentMonth = isSameMonth(day, visibleMonth)
              const isSelected = selectedDate ? isSameDay(day, selectedDate) : false
              const isRangeStart = rangeStartDate ? isSameDay(day, rangeStartDate) : false
              const isRangeEnd = rangeEndDate ? isSameDay(day, rangeEndDate) : false
              const isInRange = rangeBounds ? isWithinInterval(day, rangeBounds) : false

              const dayClass = isSelected
                ? 'bg-gray-900 text-white border-gray-900 dark:bg-gray-100 dark:text-gray-900 dark:border-gray-100'
                : isRangeStart || isRangeEnd
                  ? 'bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-900/60 dark:text-sky-100 dark:border-sky-800'
                  : isInRange
                    ? 'bg-sky-50 text-sky-700 border-sky-100 dark:bg-sky-900/35 dark:text-sky-200 dark:border-sky-900/50'
                    : 'bg-white text-gray-700 border-transparent dark:bg-gray-900 dark:text-gray-200'

              return (
                <button
                  key={day.toISOString()}
                  type="button"
                  disabled={disabled}
                  onClick={() => selectDate(day)}
                  className={`h-8 rounded-apple border text-sm font-medium transition-colors ${
                    dayClass
                  } ${
                    !inCurrentMonth ? 'opacity-40' : ''
                  } ${
                    disabled
                      ? 'cursor-not-allowed opacity-35'
                      : 'hover:border-sky-300 hover:bg-sky-50 dark:hover:border-sky-700 dark:hover:bg-sky-900/25'
                  }`}
                >
                  {format(day, 'd')}
                </button>
              )
            })}
          </div>

          <div className="flex items-center justify-between px-3 py-2 border-t border-gray-100 dark:border-gray-800">
            <button
              type="button"
              onClick={clearDate}
              className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
            >
              清空
            </button>
            <button
              type="button"
              onClick={setToday}
              className="text-xs font-medium text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300 transition-colors"
            >
              今天
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

function HorizontalBarChart({
  items,
  emptyText,
  activeKey,
  onSelect,
  accent,
}: {
  items: HorizontalBarDatum[]
  emptyText: string
  activeKey?: string
  onSelect: (key: string) => void
  accent: 'blue' | 'emerald'
}) {
  const [animated, setAnimated] = useState(false)

  useEffect(() => {
    setAnimated(false)
    const frameId = requestAnimationFrame(() => setAnimated(true))
    return () => cancelAnimationFrame(frameId)
  }, [items])

  if (!items.length) {
    return <div className="py-16 text-center text-sm text-gray-500 dark:text-gray-400">{emptyText}</div>
  }

  const maxValue = Math.max(...items.map((item) => item.value), 1)
  const barColorClass = BAR_SOLID_CLASS[accent]
  const activeBarClass = accent === 'blue'
    ? 'ring-2 ring-sky-300 ring-offset-1 dark:ring-sky-600'
    : 'ring-2 ring-teal-300 ring-offset-1 dark:ring-teal-600'
  return (
    <div className="overflow-x-auto pb-2">
      <div className="w-max min-w-full h-64 flex items-end gap-2 px-1">
          {items.map((item) => {
            const targetHeight = Math.max((item.value / maxValue) * 92, 4)
            const isActive = activeKey === item.key

            return (
              <button
                key={item.key}
                type="button"
                onClick={() => onSelect(item.key)}
                className="group shrink-0 w-20 text-center rounded-apple transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
              >
                <div className="h-[160px] flex items-end justify-center overflow-visible px-1">
                  <div
                    className="relative w-8 transition-all duration-500 ease-out"
                    style={{ height: animated ? `${targetHeight}%` : '0%' }}
                  >
                    {/* 数值标签：改用深色文字 + 柔和背景，白底卡片上清晰可见 */}
                    <div className="absolute left-1/2 -translate-x-1/2 -top-6 text-xs font-semibold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                      {item.value}
                    </div>
                    <div
                      className={`h-full w-8 rounded-t-md shadow-sm transition-all ${barColorClass} ${
                        isActive ? activeBarClass : 'group-hover:brightness-110'
                      }`}
                    />
                  </div>
                </div>
                <div className="mt-1.5 px-1 min-h-[2.5rem] flex items-start justify-center">
                  <div
                    className="text-xs font-medium text-gray-700 dark:text-gray-200 leading-4 whitespace-normal break-words text-center line-clamp-2"
                    title={item.label}
                  >
                    {item.label}
                  </div>
                </div>
                <div className="mt-0.5 leading-tight">
                  <div className="text-[11px] text-gray-500 dark:text-gray-400">
                    {item.percentage.toFixed(1)}%
                  </div>
                  {item.subText && (
                    <div className="text-[11px] text-gray-400 dark:text-gray-500 whitespace-nowrap mt-0.5" title={item.subText}>
                      {item.subText}
                    </div>
                  )}
                </div>
              </button>
            )
          })}
        </div>
      <div className="mt-3 flex items-center justify-end gap-1 text-[11px] text-gray-400 dark:text-gray-500">
        <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
        点击柱子查看人员占比
      </div>
    </div>
  )
}

export default function DataStatisticsTab({
  showToast,
  canViewLogs = false,
  canSelectDepartment = true,
  departmentScopeName = null,
}: DataStatisticsTabProps) {
  const today = new Date()
  const initialStartDate = format(startOfMonth(today), DATE_FORMAT)
  const initialEndDate = format(today, DATE_FORMAT)

  const [startDate, setStartDate] = useState(initialStartDate)
  const [endDate, setEndDate] = useState(initialEndDate)
  const [draftStartDate, setDraftStartDate] = useState(initialStartDate)
  const [draftEndDate, setDraftEndDate] = useState(initialEndDate)
  const [departmentKey, setDepartmentKey] = useState('')

  const [statsLoading, setStatsLoading] = useState(false)
  const [statsData, setStatsData] = useState<MaterialUploadStatsData | null>(null)
  const [drilldown, setDrilldown] = useState<DrilldownState | null>(null)
  const [dateFilterMode, setDateFilterMode] = useState<DateFilterMode>('thisMonth')

  const [logAction, setLogAction] = useState('ALL')
  const [logKeywordInput, setLogKeywordInput] = useState('')
  const [logKeyword, setLogKeyword] = useState('')
  const [logPage, setLogPage] = useState(1)

  const [logsLoading, setLogsLoading] = useState(false)
  const [logsData, setLogsData] = useState<OperationLogResponse | null>(null)
  // 趋势区视图切换：'chart' 折线图（默认）| 'table' 表格
  const [trendView, setTrendView] = useState<'chart' | 'table'>('chart')
  const hasInitializedStatsRef = useRef(false)
  const drilldownSectionRef = useRef<HTMLDivElement | null>(null)
  const scrollToDrilldownSection = useCallback(() => {
    requestAnimationFrame(() => {
      drilldownSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
    })
  }, [])

  const fetchStats = useCallback(async (overrides: Partial<StatsQueryState> = {}) => {
    const query: StatsQueryState = {
      startDate,
      endDate,
      departmentKey,
      ...overrides,
    }

    const normalizedStartDate = normalizeDateInputValue(query.startDate)
    const normalizedEndDate = normalizeDateInputValue(query.endDate)

    if (!isValidDateInputValue(normalizedStartDate)) {
      showToast('开始日期格式不正确，请输入 YYYY-MM-DD', 'error')
      return
    }

    if (!isValidDateInputValue(normalizedEndDate)) {
      showToast('结束日期格式不正确，请输入 YYYY-MM-DD', 'error')
      return
    }

    if (normalizedStartDate && normalizedEndDate) {
      const parsedStartDate = parse(normalizedStartDate, DATE_FORMAT, new Date())
      const parsedEndDate = parse(normalizedEndDate, DATE_FORMAT, new Date())
      if (isAfter(parsedStartDate, parsedEndDate)) {
        showToast('开始日期不能晚于结束日期', 'error')
        return
      }
    }

    setStatsLoading(true)
    try {
      const params = new URLSearchParams()
      if (normalizedStartDate) params.append('startDate', normalizedStartDate)
      if (normalizedEndDate) params.append('endDate', normalizedEndDate)
      if (canSelectDepartment && query.departmentKey) params.append('departmentKey', query.departmentKey)

      const response = await fetch(`/api/admin/data-stats?${params.toString()}`)
      if (!response.ok) {
        const error = await response.json()
        throw new Error(error?.error || '获取数据统计失败')
      }

      const payload = await response.json()
      const nextData: MaterialUploadStatsData = payload.data

      setStatsData(nextData)

      setDrilldown((previous) => {
        if (previous?.source === 'department') {
          const matched = nextData.departmentDistribution.items.find((item) => item.departmentKey === previous.key)
          if (matched) return toDepartmentDrilldown(matched)
        }

        if (previous?.source === 'materialType') {
          const matched = nextData.materialTypeDistribution.items.find((item) => item.materialType === previous.key)
          if (matched) return toMaterialTypeDrilldown(matched)
        }

        if (nextData.departmentDistribution.items.length) {
          return toDepartmentDrilldown(nextData.departmentDistribution.items[0])
        }

        if (nextData.materialTypeDistribution.items.length) {
          return toMaterialTypeDrilldown(nextData.materialTypeDistribution.items[0])
        }

        return null
      })
    } catch (error) {
      console.error('[DataStatisticsTab] fetchStats error:', error)
      showToast(error instanceof Error ? error.message : '获取数据统计失败', 'error')
    } finally {
      setStatsLoading(false)
    }
  }, [
    canSelectDepartment,
    departmentKey,
    endDate,
    showToast,
    startDate,
  ])

  const fetchLogs = useCallback(async () => {
    if (!canViewLogs) {
      return
    }

    setLogsLoading(true)
    try {
      const params = new URLSearchParams({
        action: logAction,
        page: String(logPage),
        pageSize: '20',
      })

      if (startDate) params.append('startDate', startDate)
      if (endDate) params.append('endDate', endDate)
      if (logKeyword) params.append('keyword', logKeyword)

      const response = await fetch(`/api/admin/material-operation-logs?${params.toString()}`)
      if (!response.ok) {
        const error = await response.json()
        throw new Error(error?.error || '获取日志失败')
      }

      const payload = await response.json()
      setLogsData(payload.data)
    } catch (error) {
      console.error('[DataStatisticsTab] fetchLogs error:', error)
      showToast(error instanceof Error ? error.message : '获取日志失败', 'error')
    } finally {
      setLogsLoading(false)
    }
  }, [canViewLogs, endDate, logAction, logKeyword, logPage, showToast, startDate])

  useEffect(() => {
    if (hasInitializedStatsRef.current) {
      return
    }

    hasInitializedStatsRef.current = true
    fetchStats()
  }, [fetchStats])

  useEffect(() => {
    fetchLogs()
  }, [fetchLogs])

  const handleApplyFilters = async () => {
    const normalizedStartDate = normalizeDateInputValue(draftStartDate)
    const normalizedEndDate = normalizeDateInputValue(draftEndDate)

    if (!isValidDateInputValue(normalizedStartDate)) {
      showToast('开始日期格式不正确，请输入 YYYY-MM-DD', 'error')
      return
    }

    if (!isValidDateInputValue(normalizedEndDate)) {
      showToast('结束日期格式不正确，请输入 YYYY-MM-DD', 'error')
      return
    }

    if (normalizedStartDate && normalizedEndDate) {
      const parsedStartDate = parse(normalizedStartDate, DATE_FORMAT, new Date())
      const parsedEndDate = parse(normalizedEndDate, DATE_FORMAT, new Date())
      if (isAfter(parsedStartDate, parsedEndDate)) {
        showToast('开始日期不能晚于结束日期', 'error')
        return
      }
    }

    setStartDate(normalizedStartDate)
    setEndDate(normalizedEndDate)
    setDraftStartDate(normalizedStartDate)
    setDraftEndDate(normalizedEndDate)
    setDateFilterMode('custom')
    setLogPage(1)

    await fetchStats({
      startDate: normalizedStartDate,
      endDate: normalizedEndDate,
    })
  }

  const handleApplyPreset = async (preset: DatePresetKey) => {
    const range = getPresetRange(preset)

    setStartDate(range.startDate)
    setEndDate(range.endDate)
    setDraftStartDate(range.startDate)
    setDraftEndDate(range.endDate)
    setDateFilterMode(preset)
    setLogPage(1)

    await fetchStats({
      startDate: range.startDate,
      endDate: range.endDate,
    })
  }

  const handleExportCsv = async () => {
    try {
      const params = new URLSearchParams()
      if (startDate) params.append('startDate', startDate)
      if (endDate) params.append('endDate', endDate)
      if (canSelectDepartment && departmentKey) params.append('departmentKey', departmentKey)

      const response = await fetch(`/api/admin/data-stats/export?${params.toString()}`)
      if (!response.ok) {
        const error = await response.json()
        throw new Error(error?.error || '导出失败')
      }

      const blob = await response.blob()
      const downloadUrl = URL.createObjectURL(blob)
      const fileName = parseFileNameFromHeader(response.headers.get('content-disposition'))

      const link = document.createElement('a')
      link.href = downloadUrl
      link.download = fileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(downloadUrl)

      showToast('CSV 导出成功')
    } catch (error) {
      console.error('[DataStatisticsTab] export error:', error)
      showToast(error instanceof Error ? error.message : 'CSV 导出失败', 'error')
    }
  }

  const departmentBars = useMemo(() => {
    if (!statsData) {
      return [] as HorizontalBarDatum[]
    }

    return statsData.departmentDistribution.items.map((item) => ({
      key: item.departmentKey,
      label: item.departmentName,
      value: item.uploadCount,
      percentage: item.percentage,
      subText: `${item.userCount} 人参与`,
    }))
  }, [statsData])

  const materialTypeBars = useMemo(() => {
    if (!statsData) {
      return [] as HorizontalBarDatum[]
    }

    return statsData.materialTypeDistribution.items.map((item) => ({
      key: item.materialType,
      label: item.materialType,
      value: item.uploadCount,
      percentage: item.percentage,
      subText: `${item.users.length} 人参与`,
    }))
  }, [statsData])

  const handleDepartmentBarSelect = (key: string) => {
    const selected = statsData?.departmentDistribution.items.find((item) => item.departmentKey === key)
    if (!selected) {
      return
    }

    setDrilldown(toDepartmentDrilldown(selected))
    scrollToDrilldownSection()
  }

  const handleMaterialTypeBarSelect = (key: string) => {
    const selected = statsData?.materialTypeDistribution.items.find((item) => item.materialType === key)
    if (!selected) {
      return
    }

    setDrilldown(toMaterialTypeDrilldown(selected))
    scrollToDrilldownSection()
  }

  const drilldownUsers = useMemo(() => {
    if (!drilldown) {
      return [] as MaterialUserUploadStat[]
    }

    return drilldown.users.map((user) => ({
      ...user,
      percentage: drilldown.totalUploads > 0
        ? Number(((user.uploadCount / drilldown.totalUploads) * 100).toFixed(2))
        : 0,
    }))
  }, [drilldown])

  const totalPages = logsData?.totalPages || 1
  const canGoPrev = logPage > 1
  const canGoNext = logPage < totalPages

  return (
    <div className="space-y-6">
      <div className="card-apple overflow-hidden">
        <div className="px-6 py-5 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 flex items-start justify-between gap-4 flex-wrap">
          <div>
            <h2 className="text-xl font-semibold text-gray-900 dark:text-white tracking-tight">数据统计看板</h2>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              统一按上方时间范围统计；点击分布项可直接跳转到下方人员明细。
            </p>
            <div className="mt-3 flex flex-wrap gap-2 text-xs">
              <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-apple bg-white/80 border border-gray-200 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200">
                <svg className="h-3 w-3 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0V11.25A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>
                {startDate || '不限'} ~ {endDate || '不限'}
              </span>
              <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-apple bg-white/80 border border-gray-200 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200">
                <svg className="h-3 w-3 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0z" /></svg>
                {statsData?.selectedDepartmentName || '全部部门'}
              </span>
            </div>
            {!canSelectDepartment && (departmentScopeName || statsData?.selectedDepartmentName) && (
              <p className="text-xs text-sky-600 dark:text-sky-400 mt-2 inline-flex items-center gap-1">
                <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
                当前为 {departmentScopeName || statsData?.selectedDepartmentName} 部门范围
              </p>
            )}
          </div>

          <button
            type="button"
            onClick={handleExportCsv}
            className="shrink-0 btn-primary text-sm"
          >
            导出当前筛选 CSV
          </button>
        </div>

        <div className="p-6 space-y-6">
          <div className="rounded-apple border border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900/40 p-5 space-y-4">
            <div className="flex flex-wrap items-center gap-2">
              {DATE_PRESETS.map((preset) => (
                <button
                  key={preset.key}
                  type="button"
                  onClick={() => handleApplyPreset(preset.key)}
                  className={`px-3.5 py-1.5 text-xs font-medium rounded-apple border transition-all ${
                    dateFilterMode === preset.key
                      ? 'border-gray-900 bg-gray-900 text-white shadow-sm dark:bg-gray-100 dark:text-gray-900 dark:border-gray-100'
                      : 'border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 hover:border-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                  }`}
                >
                  {preset.label}
                </button>
              ))}
              {dateFilterMode === 'custom' && (
                <span className="px-2.5 py-1 text-xs rounded-apple border border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950/40 dark:text-sky-300">
                  自定义日期
                </span>
              )}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3 items-end">
              <CalendarDateInput
                id="stats-start-date"
                label="开始日期"
                value={draftStartDate}
                max={draftEndDate || undefined}
                rangeStart={draftStartDate}
                rangeEnd={draftEndDate}
                onChange={setDraftStartDate}
              />

              <CalendarDateInput
                id="stats-end-date"
                label="结束日期"
                value={draftEndDate}
                min={draftStartDate || undefined}
                rangeStart={draftStartDate}
                rangeEnd={draftEndDate}
                onChange={setDraftEndDate}
              />

              {canSelectDepartment ? (
                <div>
                  <label htmlFor="stats-department-filter" className="block text-sm text-gray-600 dark:text-gray-400 mb-1">部门</label>
                  <select
                    id="stats-department-filter"
                    value={departmentKey}
                    onChange={async (event) => {
                      const nextDepartmentKey = event.target.value
                      setDepartmentKey(nextDepartmentKey)
                      await fetchStats({ departmentKey: nextDepartmentKey })
                    }}
                    className="input-apple py-2 px-3 text-sm"
                  >
                    <option value="">全部部门</option>
                    {statsData?.departments.map((department) => (
                      <option key={department.departmentKey} value={department.departmentKey}>
                        {department.departmentName}
                      </option>
                    ))}
                  </select>
                </div>
              ) : (
                <div className="md:col-span-2 xl:col-span-1 flex items-end">
                  <div className="w-full rounded-apple border border-gray-200 bg-white text-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 px-3 py-2 text-sm inline-flex items-center gap-1.5">
                    <svg className="h-3.5 w-3.5 text-gray-400 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>
                    已按部门范围自动过滤
                  </div>
                </div>
              )}

              <div>
                <button
                  type="button"
                  onClick={handleApplyFilters}
                  className="btn-secondary w-full text-sm"
                >
                  刷新数据
                </button>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <SummaryCard
              title="总上传数"
              value={statsLoading ? '...' : statsData?.summary.totalUploads || 0}
              tone="blue"
            />
            <SummaryCard
              title="有上传的部门数"
              value={statsLoading ? '...' : statsData?.summary.totalDepartments || 0}
              tone="emerald"
            />
            <SummaryCard
              title="上传用户数"
              value={statsLoading ? '...' : statsData?.summary.totalUsers || 0}
              tone="amber"
            />
          </div>

          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
            <div className="rounded-apple border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
              <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-800/40">
                <div className="flex items-center gap-2">
                  <span className="inline-block h-4 w-1 rounded-full bg-sky-500" />
                  <h3 className="text-sm font-semibold text-gray-900 dark:text-white">部门上传分布（核心）</h3>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5 ml-3">
                  统计范围：{statsData?.departmentDistribution.label || '-'}
                </p>
              </div>

              <div className="p-5">
                <HorizontalBarChart
                  items={departmentBars}
                  emptyText="当前条件下暂无部门分布数据"
                  activeKey={drilldown?.source === 'department' ? drilldown.key : ''}
                  onSelect={handleDepartmentBarSelect}
                  accent="blue"
                />
              </div>
            </div>

            <div className="rounded-apple border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
              <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-800/40">
                <div className="flex items-center gap-2">
                  <span className="inline-block h-4 w-1 rounded-full bg-teal-500" />
                  <h3 className="text-sm font-semibold text-gray-900 dark:text-white">素材类型上传分布（核心）</h3>
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5 ml-3">
                  统计范围：{statsData?.materialTypeDistribution.label || '-'}
                </p>
              </div>

              <div className="p-5">
                <HorizontalBarChart
                  items={materialTypeBars}
                  emptyText="当前条件下暂无素材类型分布数据"
                  activeKey={drilldown?.source === 'materialType' ? drilldown.key : ''}
                  onSelect={handleMaterialTypeBarSelect}
                  accent="emerald"
                />
              </div>
            </div>
          </div>

          <div ref={drilldownSectionRef} className="scroll-mt-24 rounded-apple border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-800/40 flex items-center justify-between gap-3 flex-wrap">
              <div className="flex items-center gap-2">
                <span className="inline-block h-4 w-1 rounded-full bg-violet-500" />
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
                  {drilldown?.title || '人员素材占比（点击上方柱子查看）'}
                </h3>
              </div>
              {drilldown && (
                <span className="text-xs text-gray-500 dark:text-gray-400">
                  合计 {drilldown.totalUploads} 条
                </span>
              )}
            </div>

            <div className="p-5">
              {drilldownUsers.length ? (
                <div className="max-h-[360px] overflow-y-auto space-y-2.5 pr-1">
                  {drilldownUsers.map((user) => {
                    const percentage = user.percentage || 0
                    const width = Math.max(percentage, 3)

                    return (
                      <div
                        key={`${drilldown?.source || 'unknown'}-${drilldown?.key || 'unknown'}-${user.userId}`}
                        className="rounded-apple border border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30 px-4 py-2.5 transition-colors hover:border-gray-200 dark:hover:border-gray-700"
                      >
                        <div className="flex items-center justify-between gap-3">
                          <div className="font-medium text-sm text-gray-900 dark:text-white truncate">{getUserDisplayName(user)}</div>
                          <div className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap tabular-nums">
                            {user.uploadCount} 条 ({percentage.toFixed(1)}%)
                          </div>
                        </div>
                        <div className="mt-2 h-1.5 rounded-full bg-gray-100 dark:bg-gray-700 overflow-hidden">
                          <div
                            className="h-full rounded-full bg-gradient-to-r from-violet-400 to-violet-600 transition-all duration-500"
                            style={{ width: `${width}%` }}
                          />
                        </div>
                        <div className="mt-1.5 text-[11px] text-gray-400 dark:text-gray-500">{user.departmentName}</div>
                      </div>
                    )
                  })}
                </div>
              ) : (
                <div className="py-16 text-center text-sm text-gray-400 dark:text-gray-500">
                  请选择上方柱子查看对应人员占比
                </div>
              )}
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="rounded-apple border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
              <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-800/40 flex items-center justify-between gap-3 flex-wrap">
                <div className="flex items-center gap-2">
                  <span className="inline-block h-4 w-1 rounded-full bg-sky-500" />
                  <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
                    每日趋势{statsData?.dailyUploads.length ? `（共 ${statsData.dailyUploads.length} 天）` : ''}
                  </h3>
                </div>
                <div className="inline-flex rounded-apple border border-gray-200 dark:border-gray-700 overflow-hidden text-xs">
                  <button
                    type="button"
                    onClick={() => setTrendView('chart')}
                    className={`px-2.5 py-1 font-medium transition-colors ${trendView === 'chart' ? 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900' : 'text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800'}`}
                  >
                    图表
                  </button>
                  <button
                    type="button"
                    onClick={() => setTrendView('table')}
                    className={`px-2.5 py-1 font-medium transition-colors ${trendView === 'table' ? 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900' : 'text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800'}`}
                  >
                    表格
                  </button>
                </div>
              </div>
              {trendView === 'chart' ? (
                <div className="p-4">
                  <TrendLineChart
                    data={statsData?.dailyUploads || []}
                    granularity="day"
                    accent="sky"
                    startDate={startDate}
                    endDate={endDate}
                  />
                </div>
              ) : (
                <div className="max-h-[320px] overflow-y-auto">
                  {statsData?.dailyUploads.length ? (
                    <table className="w-full text-sm">
                      <thead className="sticky top-0 bg-gray-50/80 dark:bg-gray-800/60 backdrop-blur z-10">
                        <tr className="border-b border-gray-100 dark:border-gray-800">
                          <th className="px-5 py-2.5 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">日期</th>
                          <th className="px-5 py-2.5 text-right font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">上传数</th>
                        </tr>
                      </thead>
                      <tbody>
                        {statsData.dailyUploads.map((item) => (
                          <tr key={item.bucket} className="border-b border-gray-50 dark:border-gray-800/60 transition-colors hover:bg-gray-50/60 dark:hover:bg-gray-800/30">
                            <td className="px-5 py-2.5 text-gray-700 dark:text-gray-300 tabular-nums">{item.bucket}</td>
                            <td className="px-5 py-2.5 text-right font-semibold text-gray-900 dark:text-white tabular-nums">{item.count}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  ) : (
                    <div className="py-16 text-center text-sm text-gray-400 dark:text-gray-500">暂无每日趋势数据</div>
                  )}
                </div>
              )}
            </div>

            <div className="rounded-apple border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
              <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-800/40">
                <div className="flex items-center gap-2">
                  <span className="inline-block h-4 w-1 rounded-full bg-teal-500" />
                  <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
                    月度趋势{statsData?.monthlyUploads.length ? `（共 ${statsData.monthlyUploads.length} 个月）` : ''}
                  </h3>
                </div>
              </div>
              {trendView === 'chart' ? (
                <div className="p-4">
                  <TrendLineChart
                    data={statsData?.monthlyUploads || []}
                    granularity="month"
                    accent="teal"
                    startDate={startDate}
                    endDate={endDate}
                  />
                </div>
              ) : (
                <div className="max-h-[320px] overflow-y-auto">
                  {statsData?.monthlyUploads.length ? (
                    <table className="w-full text-sm">
                      <thead className="sticky top-0 bg-gray-50/80 dark:bg-gray-800/60 backdrop-blur z-10">
                        <tr className="border-b border-gray-100 dark:border-gray-800">
                          <th className="px-5 py-2.5 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">月份</th>
                          <th className="px-5 py-2.5 text-right font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">上传数</th>
                        </tr>
                      </thead>
                      <tbody>
                        {statsData.monthlyUploads.map((item) => (
                          <tr key={item.bucket} className="border-b border-gray-50 dark:border-gray-800/60 transition-colors hover:bg-gray-50/60 dark:hover:bg-gray-800/30">
                            <td className="px-5 py-2.5 text-gray-700 dark:text-gray-300 tabular-nums">{item.bucket}</td>
                            <td className="px-5 py-2.5 text-right font-semibold text-gray-900 dark:text-white tabular-nums">{item.count}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  ) : (
                    <div className="py-16 text-center text-sm text-gray-400 dark:text-gray-500">暂无月度趋势数据</div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {canViewLogs && (
        <div className="card-apple overflow-hidden">
          <div className="px-6 py-5 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white tracking-tight">素材操作日志</h2>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              记录上传、修改（含字段前后值）、下载、删除等关键操作
            </p>
          </div>

          <div className="p-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <label htmlFor="stats-log-action" className="block text-sm text-gray-600 dark:text-gray-400 mb-1.5">操作类型</label>
                <select
                  id="stats-log-action"
                  value={logAction}
                  onChange={(event) => {
                    setLogAction(event.target.value)
                    setLogPage(1)
                  }}
                  className="input-apple py-2 px-3 text-sm"
                >
                  {ACTION_OPTIONS.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>

              <div className="md:col-span-2">
                <label htmlFor="stats-log-keyword" className="block text-sm text-gray-600 dark:text-gray-400 mb-1.5">关键词</label>
                <input
                  id="stats-log-keyword"
                  type="text"
                  value={logKeywordInput}
                  onChange={(event) => setLogKeywordInput(event.target.value)}
                  onKeyDown={(event) => {
                    if (event.key === 'Enter') {
                      setLogPage(1)
                      setLogKeyword(logKeywordInput.trim())
                    }
                  }}
                  placeholder="可按素材型号、类型、用户名搜索"
                  className="input-apple py-2 px-3 text-sm"
                />
              </div>

              <div className="flex items-end gap-2">
                <button
                  type="button"
                  onClick={() => {
                    setLogPage(1)
                    setLogKeyword(logKeywordInput.trim())
                  }}
                  className="btn-primary flex-1 text-sm"
                >
                  查询
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setLogKeywordInput('')
                    setLogKeyword('')
                    setLogAction('ALL')
                    setLogPage(1)
                  }}
                  className="btn-secondary flex-1 text-sm"
                >
                  重置
                </button>
              </div>
            </div>

            <div className="rounded-apple border border-gray-200 dark:border-gray-700 overflow-x-auto">
              <table className="w-full min-w-[860px] text-sm">
                <thead className="bg-gray-50/80 dark:bg-gray-800/60">
                  <tr>
                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">时间</th>
                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">操作</th>
                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">素材</th>
                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">操作人</th>
                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">部门</th>
                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wide">变更详情</th>
                  </tr>
                </thead>
                <tbody>
                  {logsLoading ? (
                    <tr>
                      <td colSpan={6} className="px-4 py-12 text-center text-gray-400 dark:text-gray-500">加载日志中...</td>
                    </tr>
                  ) : logsData?.logs.length ? (
                    logsData.logs.map((log) => (
                      <tr key={log.id} className="border-t border-gray-100 dark:border-gray-800 transition-colors hover:bg-gray-50/60 dark:hover:bg-gray-800/30">
                        <td className="px-4 py-3 text-gray-600 dark:text-gray-300 whitespace-nowrap tabular-nums">
                          {new Date(log.timestamp).toLocaleString('zh-CN')}
                        </td>
                        <td className="px-4 py-3 whitespace-nowrap">
                          <span
                            className={`inline-flex px-2 py-1 rounded-full text-xs font-semibold ${
                              ACTION_COLOR_MAP[log.action] || 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
                            }`}
                          >
                            {formatLogAction(log.action)}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-gray-900 dark:text-white">
                          <div className="font-medium">{log.material.productModel}</div>
                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{log.material.materialType}</div>
                        </td>
                        <td className="px-4 py-3 text-gray-700 dark:text-gray-300">{log.user.realName || log.user.username}</td>
                        <td className="px-4 py-3 text-gray-600 dark:text-gray-400">{log.user.departmentName}</td>
                        <td className="px-4 py-3 text-gray-600 dark:text-gray-300">{formatChangeSummary(log)}</td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={6} className="px-4 py-12 text-center text-gray-400 dark:text-gray-500">暂无日志数据</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>

            <div className="flex items-center justify-between gap-3 text-sm">
              <div className="text-gray-500 dark:text-gray-400">
                共 <span className="font-semibold text-gray-900 dark:text-white tabular-nums">{logsData?.total || 0}</span> 条，当前第 {logsData?.page || 1} / {logsData?.totalPages || 1} 页
              </div>
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  disabled={!canGoPrev}
                  onClick={() => setLogPage((prev) => Math.max(1, prev - 1))}
                  className="px-3.5 py-1.5 text-sm font-medium border border-gray-200 dark:border-gray-700 rounded-apple text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                >
                  上一页
                </button>
                <button
                  type="button"
                  disabled={!canGoNext}
                  onClick={() => setLogPage((prev) => prev + 1)}
                  className="px-3.5 py-1.5 text-sm font-medium border border-gray-200 dark:border-gray-700 rounded-apple text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                >
                  下一页
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}