'use client'

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'

type DatePreset = 'today' | 'last7' | 'last30' | 'custom'

interface PublicTrafficStats {
  generatedAt: string
  available: boolean
  range: { start: string; end: string }
  summary: {
    responseBytes: number
    requestBytes: number | null
    requestBytesKnownCount: number
    totalRequests: number
    uniqueIpCount: number
    statusCounts: Record<string, number>
    firstSeen: string | null
    lastSeen: string | null
  }
  byDay: Array<{
    date: string
    responseBytes: number
    requestBytes: number | null
    requestBytesKnownCount: number
    totalRequests: number
  }>
  byDomain: Array<{
    domain: string
    responseBytes: number
    requestBytes: number | null
    requestBytesKnownCount: number
    totalRequests: number
    statusCounts: Record<string, number>
  }>
  byPurpose: Array<{
    key: string
    label: string
    category: string
    detail: string
    responseBytes: number
    requestBytes: number | null
    requestBytesKnownCount: number
    totalRequests: number
  }>
  topPaths: Array<{
    path: string
    method: string
    purposeLabel: string
    purposeCategory: string
    purposeDetail: string
    responseBytes: number
    totalRequests: number
  }>
  source: {
    logPaths: string[]
    scannedFiles: number
    scannedLines: number
    matchedLines: number
    skippedLines: number
    truncated: boolean
    issues: Array<{ path: string; reason: string }>
    requestBytesAvailable: boolean
    cache?: {
      persisted: boolean
      hit: boolean
      stale: boolean
      refreshInProgress: boolean
      refreshedAt: string | null
      expiresAt: string | null
    }
  }
}

interface PublicTrafficTabProps {
  showToast: (message: string, type?: 'success' | 'error') => void
}

interface PublicTrafficCacheEntry {
  stats: PublicTrafficStats
  cachedAt: number
}

// ============ 工具函数 ============
function toDateInputValue(date: Date) {
  const y = date.getFullYear()
  const m = String(date.getMonth() + 1).padStart(2, '0')
  const d = String(date.getDate()).padStart(2, '0')
  return `${y}-${m}-${d}`
}

function presetRange(preset: Exclude<DatePreset, 'custom'>) {
  const now = new Date()
  const end = toDateInputValue(now)
  const startDate = new Date(now)
  if (preset === 'today') return { start: end, end }
  startDate.setDate(now.getDate() - (preset === 'last7' ? 6 : 29))
  return { start: toDateInputValue(startDate), end }
}

function formatBytes(bytes: number | null | undefined) {
  if (bytes === null || bytes === undefined) return '—'
  if (bytes < 1024) return `${bytes.toFixed(0)} B`
  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`
  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(2)} MB`
  if (bytes < 1024 ** 4) return `${(bytes / 1024 ** 3).toFixed(2)} GB`
  return `${(bytes / 1024 ** 4).toFixed(2)} TB`
}

function formatNumber(value: number) {
  return new Intl.NumberFormat('zh-CN').format(value)
}

function formatTime(value: string | null) {
  if (!value) return '—'
  return new Date(value).toLocaleString('zh-CN', { hour12: false })
}

// 类别中文映射 + 图标 + 颜色。后端目前返回的是中文 category，这里兼容旧英文分类。
type CategoryMeta = { label: string; icon: string; barColor: string; badgeClass: string }
type CategoryNarrative = { title: string }

const CATEGORY_META: Record<string, CategoryMeta> = {
  image_direct: {
    label: '图片/文件直链',
    icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z',
    barColor: 'bg-sky-500',
    badgeClass: 'bg-sky-50 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300',
  },
  material_download: {
    label: '素材下载',
    icon: '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',
    barColor: 'bg-teal-500',
    badgeClass: 'bg-teal-50 text-teal-700 dark:bg-teal-950/40 dark:text-teal-300',
  },
  api_request: {
    label: '接口请求',
    icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
    barColor: 'bg-violet-500',
    badgeClass: 'bg-violet-50 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300',
  },
  素材库: {
    label: '素材库业务',
    icon: 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4',
    barColor: 'bg-teal-500',
    badgeClass: 'bg-teal-50 text-teal-700 dark:bg-teal-950/40 dark:text-teal-300',
  },
  外部接口: {
    label: '外部接口',
    icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
    barColor: 'bg-violet-500',
    badgeClass: 'bg-violet-50 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300',
  },
  产品设计平台: {
    label: '产品设计平台',
    icon: 'M9.75 3l-.75 5.25L3.75 9l5.25.75L9.75 15l.75-5.25L15.75 9l-5.25-.75L9.75 3zM18 12l-.5 3.5L14 16l3.5.5L18 20l.5-3.5L22 16l-3.5-.5L18 12z',
    barColor: 'bg-indigo-500',
    badgeClass: 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300',
  },
  资源直链: {
    label: '资源直链',
    icon: 'M13.19 8.688a4.5 4.5 0 016.364 6.364l-1.757 1.757a4.5 4.5 0 01-6.364 0M10.81 15.312a4.5 4.5 0 01-6.364-6.364l1.757-1.757a4.5 4.5 0 016.364 0',
    barColor: 'bg-sky-500',
    badgeClass: 'bg-sky-50 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300',
  },
  直传资源: {
    label: '直传资源',
    icon: 'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M7.5 7.5L12 3m0 0l4.5 4.5M12 3v13.5',
    barColor: 'bg-cyan-500',
    badgeClass: 'bg-cyan-50 text-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-300',
  },
  历史上传资源: {
    label: '历史上传资源',
    icon: 'M12 6v6l4 2m6-2a10 10 0 11-3.07-7.07M21 3v6h-6',
    barColor: 'bg-blue-500',
    badgeClass: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
  },
  账号: {
    label: '账号登录',
    icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a8.25 8.25 0 1115 0',
    barColor: 'bg-emerald-500',
    badgeClass: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
  },
  后台: {
    label: '后台管理',
    icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065zM15 12a3 3 0 11-6 0 3 3 0 016 0z',
    barColor: 'bg-slate-500',
    badgeClass: 'bg-slate-50 text-slate-700 dark:bg-slate-800 dark:text-slate-200',
  },
  页面加载: {
    label: '页面加载',
    icon: 'M3 8h18M8 3v18m8-18v18M3 16h18',
    barColor: 'bg-orange-500',
    badgeClass: 'bg-orange-50 text-orange-700 dark:bg-orange-950/40 dark:text-orange-300',
  },
  资源文件: {
    label: '页面静态资源',
    icon: 'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5A3.375 3.375 0 0010.125 2.25H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z',
    barColor: 'bg-lime-500',
    badgeClass: 'bg-lime-50 text-lime-700 dark:bg-lime-950/40 dark:text-lime-300',
  },
  其他: {
    label: '其他流量',
    icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
    barColor: 'bg-amber-500',
    badgeClass: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
  },
  other: {
    label: '其他流量',
    icon: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
    barColor: 'bg-amber-500',
    badgeClass: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
  },
}

function normalizeCategoryKey(category: string) {
  const trimmed = (category || '').trim()
  if (!trimmed) return 'other'
  if (trimmed === '其它资源' || trimmed === '其他资源') return '其他'
  return trimmed
}

function getCategoryMeta(category: string) {
  const key = normalizeCategoryKey(category)
  const meta = CATEGORY_META[key]
  if (meta) return meta
  return { ...CATEGORY_META.other, label: key }
}

function getCategoryNarrative(category: string): CategoryNarrative {
  const key = normalizeCategoryKey(category)
  const narratives: Record<string, CategoryNarrative> = {
    素材库: {
      title: '素材库业务',
    },
    历史上传资源: {
      title: '历史上传图片/文件',
    },
    资源直链: {
      title: '图片/文件直链访问',
    },
    直传资源: {
      title: '直传资源访问',
    },
    产品设计平台: {
      title: '产品设计平台',
    },
    外部接口: {
      title: '外部平台接口',
    },
    后台: {
      title: '后台管理',
    },
    账号: {
      title: '登录与认证',
    },
    页面加载: {
      title: '页面资源',
    },
    资源文件: {
      title: '静态文件',
    },
    其他: {
      title: '未归类',
    },
    other: {
      title: '未归类',
    },
  }

  return narratives[key] || { title: getCategoryMeta(key).label }
}

const PRESET_OPTIONS: Array<{ key: Exclude<DatePreset, 'custom'>; label: string }> = [
  { key: 'today', label: '今天' },
  { key: 'last7', label: '近7天' },
  { key: 'last30', label: '近30天' },
]

export default function PublicTrafficTab({ showToast }: PublicTrafficTabProps) {
  const [preset, setPreset] = useState<DatePreset>('last7')
  const initialRange = useMemo(() => presetRange('last7'), [])
  const [startDate, setStartDate] = useState(initialRange.start)
  const [endDate, setEndDate] = useState(initialRange.end)
  const [loading, setLoading] = useState(false)
  const [stats, setStats] = useState<PublicTrafficStats | null>(null)
  const [statsRangeKey, setStatsRangeKey] = useState('')
  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set())
  const requestSeqRef = useRef(0)
  const abortRef = useRef<AbortController | null>(null)
  const statsCacheRef = useRef(new Map<string, PublicTrafficCacheEntry>())
  const activeRangeKey = `${startDate}|${endDate}`

  const loadStats = useCallback(async (options?: { forceRefresh?: boolean }) => {
    const rangeKey = `${startDate}|${endDate}`
    const today = toDateInputValue(new Date())
    const cacheTtlMs = endDate >= today ? 60_000 : 10 * 60_000
    const cached = statsCacheRef.current.get(rangeKey)

    if (!options?.forceRefresh && cached && Date.now() - cached.cachedAt <= cacheTtlMs) {
      requestSeqRef.current += 1
      abortRef.current?.abort()
      setStats(cached.stats)
      setStatsRangeKey(rangeKey)
      setLoading(false)
      return
    }

    const requestSeq = requestSeqRef.current + 1
    requestSeqRef.current = requestSeq
    abortRef.current?.abort()
    const controller = new AbortController()
    abortRef.current = controller

    if (!cached) {
      setStatsRangeKey('')
    }
    setLoading(true)
    try {
      const params = new URLSearchParams()
      params.set('start', startDate)
      params.set('end', endDate)
      if (options?.forceRefresh) params.set('refresh', '1')
      const response = await fetch(`/api/admin/public-traffic?${params.toString()}`, {
        cache: 'no-store',
        signal: controller.signal,
      })
      if (!response.ok) {
        const data = await response.json().catch(() => null)
        throw new Error(data?.error || '加载公网流量统计失败')
      }
      const nextStats = await response.json()
      if (requestSeq !== requestSeqRef.current) return

      statsCacheRef.current.set(rangeKey, {
        stats: nextStats,
        cachedAt: Date.now(),
      })
      setStats(nextStats)
      setStatsRangeKey(rangeKey)
    } catch (error) {
      if (error instanceof DOMException && error.name === 'AbortError') return
      console.error('Load public traffic stats error:', error)
      showToast(error instanceof Error ? error.message : '加载公网流量统计失败', 'error')
    } finally {
      if (requestSeq === requestSeqRef.current) {
        setLoading(false)
      }
    }
  }, [endDate, showToast, startDate])

  useEffect(() => { loadStats() }, [loadStats])
  useEffect(() => () => abortRef.current?.abort(), [])

  const handlePresetChange = (nextPreset: Exclude<DatePreset, 'custom'>) => {
    const range = presetRange(nextPreset)
    setPreset(nextPreset)
    setStartDate(range.start)
    setEndDate(range.end)
  }

  const togglePathExpand = (key: string) => {
    setExpandedPaths((prev) => {
      const next = new Set(prev)
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }

  // 派生数据
  const visibleStats = statsRangeKey === activeRangeKey ? stats : null
  const responseBytes = visibleStats?.summary.responseBytes || 0
  const requestBytes = visibleStats?.summary.requestBytes ?? null
  const totalBytes = requestBytes === null ? responseBytes : responseBytes + requestBytes
  const dayPeak = visibleStats?.byDay.reduce((max, item) => Math.max(max, item.responseBytes), 0) || 0
  const peakDay = visibleStats?.byDay.find((d) => d.responseBytes === dayPeak)

  // 按 category 分组 byPurpose
  const purposeByCategory = useMemo(() => {
    if (!visibleStats) return new Map<string, PublicTrafficStats['byPurpose'][number][]>()
    const map = new Map<string, PublicTrafficStats['byPurpose'][number][]>()
    for (const item of visibleStats.byPurpose) {
      const cat = normalizeCategoryKey(item.category)
      if (!map.has(cat)) map.set(cat, [])
      map.get(cat)!.push(item)
    }
    // 每组内按流量降序
    map.forEach((items) => {
      items.sort((a: PublicTrafficStats['byPurpose'][number], b: PublicTrafficStats['byPurpose'][number]) => b.responseBytes - a.responseBytes)
    })
    return map
  }, [visibleStats])

  // category 合计
  const categoryTotals = useMemo(() => {
    if (!visibleStats) return [] as Array<{ category: string; bytes: number; requests: number }>
    const map = new Map<string, { category: string; bytes: number; requests: number }>()
    for (const item of visibleStats.byPurpose) {
      const cat = normalizeCategoryKey(item.category)
      const existing = map.get(cat) || { category: cat, bytes: 0, requests: 0 }
      existing.bytes += item.responseBytes
      existing.requests += item.totalRequests
      map.set(cat, existing)
    }
    return Array.from(map.values()).sort((a, b) => b.bytes - a.bytes)
  }, [visibleStats])

  const categoryInsights = useMemo(() => {
    return categoryTotals.map((cat, index) => {
      const items: PublicTrafficStats['byPurpose'][number][] = purposeByCategory.get(cat.category) || []
      const share = responseBytes > 0 ? (cat.bytes / responseBytes) * 100 : 0
      return {
        ...cat,
        rank: index + 1,
        share,
        meta: getCategoryMeta(cat.category),
        narrative: getCategoryNarrative(cat.category),
        topPurpose: items[0] || null,
      }
    })
  }, [categoryTotals, purposeByCategory, responseBytes])

  const visibleCategoryInsights = categoryInsights.filter((cat) => cat.rank <= 5 || cat.share >= 1)

  if (!visibleStats) {
    return (
      <div className="flex min-h-[300px] items-center justify-center text-gray-400 dark:text-gray-500">
        {loading ? '正在读取固化汇总...' : '暂无数据'}
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* ===== 顶部：标题 + 时间筛选 ===== */}
      <div className="card-apple p-5">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <h2 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">公网流量看板</h2>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
              按公网入口日志统计 · 不含七牛 CDN 流量（以七牛后台为准）
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <div className="inline-flex rounded-apple border border-gray-200 bg-gray-50 p-1 dark:border-gray-700 dark:bg-gray-900">
              {PRESET_OPTIONS.map((item) => (
                <button
                  key={item.key}
                  type="button"
                  onClick={() => handlePresetChange(item.key)}
                  className={`rounded-[10px] px-3.5 py-1.5 text-sm font-medium transition-all ${
                    preset === item.key
                      ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white'
                      : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'
                  }`}
                >
                  {item.label}
                </button>
              ))}
            </div>
            <label className="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-300">
              <span className="text-gray-400">起</span>
              <input
                type="date"
                value={startDate}
                onChange={(e) => { setPreset('custom'); setStartDate(e.target.value) }}
                className="input-apple py-1.5 px-2.5 text-sm"
              />
            </label>
            <label className="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-300">
              <span className="text-gray-400">止</span>
              <input
                type="date"
                value={endDate}
                onChange={(e) => { setPreset('custom'); setEndDate(e.target.value) }}
                className="input-apple py-1.5 px-2.5 text-sm"
              />
            </label>
            <button
              type="button"
              onClick={() => loadStats({ forceRefresh: true })}
              disabled={loading}
              className="btn-primary text-sm"
            >
              {loading ? '刷新中...' : '重新统计'}
            </button>
          </div>
        </div>
      </div>

      {!visibleStats.available && (
        <div className="card-apple border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900/30 dark:text-amber-200">
          暂未读取到公网入口日志。请配置 PUBLIC_TRAFFIC_LOG_PATHS 环境变量，或把穿透服务器 Nginx access log 同步到应用服务器。
        </div>
      )}

      {visibleStats.available && (
        <>
          {/* ===== 顶部汇总卡片 ===== */}
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
            {/* 总流量（大卡，突出） */}
            <div className="card-apple relative overflow-hidden p-5 pl-6 md:col-span-2">
              <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-sky-400 to-sky-600" />
              <div className="text-sm text-gray-500 dark:text-gray-400">统计总流量</div>
              <div className="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white tabular-nums">
                {formatBytes(totalBytes)}
              </div>
              <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
                <span>响应 {formatBytes(responseBytes)}</span>
                {requestBytes !== null && <span>入站 {formatBytes(requestBytes)}</span>}
                {peakDay && <span className="text-sky-600 dark:text-sky-400">峰值 {peakDay.date}（{formatBytes(peakDay.responseBytes)}）</span>}
                {requestBytes === null && <span>· 日志未含入站字节，按响应流量统计</span>}
              </div>
            </div>

            {/* 请求次数 */}
            <div className="card-apple p-5">
              <div className="text-sm text-gray-500 dark:text-gray-400">请求次数</div>
              <div className="mt-2 text-3xl font-bold tabular-nums text-gray-900 dark:text-white">{formatNumber(visibleStats.summary.totalRequests)}</div>
              <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">{formatNumber(visibleStats.summary.uniqueIpCount)} 个客户端 IP</div>
            </div>

            {/* 日志时间范围 */}
            <div className="card-apple p-5">
              <div className="text-sm text-gray-500 dark:text-gray-400">日志范围</div>
              <div className="mt-2 text-lg font-semibold tabular-nums text-gray-900 dark:text-white">
                {formatTime(visibleStats.summary.firstSeen).slice(5, 17)}
              </div>
              <div className="mt-1 text-xs text-gray-400 dark:text-gray-500">至 {formatTime(visibleStats.summary.lastSeen).slice(5, 17)}</div>
            </div>
          </div>

          {/* ===== 流量来源分组（人类视角）===== */}
          <div className="card-apple overflow-hidden">
            <div className="border-b border-gray-200 px-5 py-4 dark:border-gray-700">
              <h3 className="text-base font-semibold text-gray-900 dark:text-white">流量来源</h3>
            </div>

            <div className="p-5">
              {categoryInsights.length === 0 && (
                <div className="py-8 text-center text-sm text-gray-400 dark:text-gray-500">当前范围没有流量记录</div>
              )}

              <div className="space-y-3">
                {visibleCategoryInsights.map((cat) => {
                  return (
                    <div key={cat.category} className="rounded-apple border border-gray-100 px-4 py-3 dark:border-gray-800">
                      <div className="flex items-center justify-between gap-4">
                        <div className="flex min-w-0 items-center gap-3">
                          <span className={`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-apple ${cat.meta.badgeClass}`}>
                            <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                              <path strokeLinecap="round" strokeLinejoin="round" d={cat.meta.icon} />
                            </svg>
                          </span>
                          <div className="min-w-0">
                            <div className="truncate text-sm font-semibold text-gray-900 dark:text-white">{cat.narrative.title}</div>
                            <div className="mt-1 flex min-w-0 items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
                              <span className="tabular-nums">{formatNumber(cat.requests)} 次</span>
                              {cat.topPurpose && cat.topPurpose.label !== cat.narrative.title && (
                                <span className="hidden min-w-0 truncate sm:inline">· {cat.topPurpose.label}</span>
                              )}
                            </div>
                          </div>
                        </div>
                        <div className="shrink-0 text-right">
                          <div className="text-base font-semibold tabular-nums text-gray-900 dark:text-white">{formatBytes(cat.bytes)}</div>
                          <div className="text-xs text-gray-400 dark:text-gray-500">
                            {cat.share.toFixed(1)}%
                          </div>
                        </div>
                      </div>

                      <div className="mt-3">
                        <div className="h-2 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
                          <div className={`h-full rounded-full ${cat.meta.barColor} transition-all duration-500`} style={{ width: `${Math.max(cat.share, 1)}%` }} />
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>

            {/* 每类内的用途明细（展开式）*/}
            {categoryInsights.length > 0 && (
              <div className="border-t border-gray-100 px-5 pb-5 dark:border-gray-800">
                <details>
                  <summary className="cursor-pointer py-3 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    展开明细
                  </summary>
                  <div className="mt-2 space-y-3">
                    {categoryInsights.map((cat) => {
                      const items: PublicTrafficStats['byPurpose'][number][] = purposeByCategory.get(cat.category) || []
                      if (items.length === 0) return null
                      return (
                        <div key={cat.category} className="rounded-apple border border-gray-100 p-3 dark:border-gray-800">
                          <div className="mb-2 flex items-center gap-2 text-sm font-medium" style={{ color: undefined }}>
                            <span className={`inline-block h-3 w-1 rounded-full ${cat.meta.barColor}`} />
                            {cat.narrative.title}
                          </div>
                          <div className="space-y-2">
                            {items.map((item) => {
                              const itemPct = cat.bytes > 0 ? (item.responseBytes / cat.bytes) * 100 : 0
                              return (
                                <div key={item.key} className="flex items-center justify-between gap-3 text-xs">
                                  <div className="flex items-center gap-2 min-w-0">
                                    <span className="truncate text-gray-700 dark:text-gray-200">{item.label}</span>
                                    {item.detail && (
                                      <span className="hidden truncate text-gray-400 dark:text-gray-500 sm:block" title={item.detail}>
                                        · {item.detail}
                                      </span>
                                    )}
                                  </div>
                                  <div className="flex shrink-0 items-center gap-2 tabular-nums">
                                    <span className="font-medium text-gray-900 dark:text-white">{formatBytes(item.responseBytes)}</span>
                                    <span className="text-gray-400 dark:text-gray-500">{itemPct.toFixed(0)}%</span>
                                    <span className="text-gray-400 dark:text-gray-500">· {formatNumber(item.totalRequests)}次</span>
                                  </div>
                                </div>
                              )
                            })}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </details>
              </div>
            )}
          </div>

          {/* ===== 两列：域名分布 + 每日趋势 ===== */}
          <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
            {/* 域名分布 */}
            <div className="card-apple overflow-hidden">
              <div className="border-b border-gray-200 px-5 py-4 dark:border-gray-700">
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">按域名</h3>
              </div>
              <div className="space-y-3 p-5">
                {visibleStats.byDomain.length === 0 && <div className="py-4 text-sm text-gray-400 dark:text-gray-500">无数据</div>}
                {visibleStats.byDomain.map((item) => {
                  const pct = responseBytes > 0 ? Math.round((item.responseBytes / responseBytes) * 100) : 0
                  return (
                    <div key={item.domain}>
                      <div className="mb-1.5 flex items-center justify-between gap-2 text-sm">
                        <span className="font-medium text-gray-800 dark:text-gray-100">{item.domain}</span>
                        <span className="shrink-0 text-xs text-gray-500 dark:text-gray-400 tabular-nums">
                          {formatBytes(item.responseBytes)} · {formatNumber(item.totalRequests)}次
                        </span>
                      </div>
                      <div className="h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
                        <div className="h-full rounded-full bg-sky-500" style={{ width: `${Math.max(pct, 2)}%` }} />
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>

            {/* 每日趋势（迷你柱状）*/}
            <div className="card-apple overflow-hidden">
              <div className="border-b border-gray-200 px-5 py-4 dark:border-gray-700">
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">每日流量</h3>
              </div>
              <div className="p-5">
                {visibleStats.byDay.length === 0 && <div className="py-4 text-sm text-gray-400 dark:text-gray-500">无数据</div>}
                <div className="flex items-end gap-1" style={{ height: '120px' }}>
                  {visibleStats.byDay.map((item) => {
                    const heightPct = dayPeak > 0 ? (item.responseBytes / dayPeak) * 100 : 0
                    const isPeak = item.responseBytes === dayPeak && dayPeak > 0
                    return (
                      <div key={item.date} className="group relative flex flex-1 flex-col items-center justify-end" style={{ minWidth: '8px' }}>
                        <div
                          className={`w-full rounded-t transition-all duration-300 ${isPeak ? 'bg-teal-500' : 'bg-teal-300 dark:bg-teal-700'}`}
                          style={{ height: `${Math.max(heightPct, 2)}%` }}
                          title={`${item.date}: ${formatBytes(item.responseBytes)} · ${formatNumber(item.totalRequests)}次`}
                        />
                        {/* hover tooltip */}
                        <div className="pointer-events-none absolute -top-12 z-10 hidden whitespace-nowrap rounded-lg bg-gray-900 px-2 py-1 text-xs text-white group-hover:block">
                          {item.date.slice(5)}: {formatBytes(item.responseBytes)}
                        </div>
                      </div>
                    )
                  })}
                </div>
                {visibleStats.byDay.length > 0 && (
                  <div className="mt-2 flex justify-between text-xs text-gray-400 dark:text-gray-500">
                    <span>{visibleStats.byDay[0]?.date.slice(5)}</span>
                    <span>{visibleStats.byDay[visibleStats.byDay.length - 1]?.date.slice(5)}</span>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* ===== 高消耗资源 Top（可展开原始路径）===== */}
          <div className="card-apple overflow-hidden">
            <div className="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-gray-700">
              <div>
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">高消耗资源 Top {visibleStats.topPaths.length}</h3>
                <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">点击展开查看原始路径</p>
              </div>
            </div>
            <div className="divide-y divide-gray-100 dark:divide-gray-800">
              {visibleStats.topPaths.length === 0 && (
                <div className="py-8 text-center text-sm text-gray-400 dark:text-gray-500">无数据</div>
              )}
              {visibleStats.topPaths.map((item, idx) => {
                const meta = getCategoryMeta(item.purposeCategory)
                const rowKey = `${item.method}-${item.path}`
                const expanded = expandedPaths.has(rowKey)
                const pct = responseBytes > 0 ? (item.responseBytes / responseBytes) * 100 : 0
                return (
                  <div key={rowKey} className="px-5 py-3 transition-colors hover:bg-gray-50/60 dark:hover:bg-gray-800/30">
                    <button
                      type="button"
                      onClick={() => togglePathExpand(rowKey)}
                      className="flex w-full items-center gap-3 text-left"
                    >
                      {/* 排名 */}
                      <span className="shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-apple bg-gray-100 text-xs font-bold text-gray-500 dark:bg-gray-700 dark:text-gray-300 tabular-nums">
                        {idx + 1}
                      </span>
                      {/* 类别标签 */}
                      <span className={`shrink-0 inline-flex items-center gap-1 rounded-apple px-2 py-0.5 text-xs font-medium ${meta.badgeClass}`}>
                        {meta.label}
                      </span>
                      {/* 用途描述 */}
                      <div className="min-w-0 flex-1">
                        <div className="truncate text-sm font-medium text-gray-900 dark:text-white">{item.purposeLabel}</div>
                        {item.purposeDetail && (
                          <div className="truncate text-xs text-gray-400 dark:text-gray-500">{item.purposeDetail}</div>
                        )}
                      </div>
                      {/* 数值 */}
                      <div className="flex shrink-0 items-center gap-3 text-sm tabular-nums">
                        <div className="text-right">
                          <div className="font-semibold text-gray-900 dark:text-white">{formatBytes(item.responseBytes)}</div>
                          <div className="text-xs text-gray-400 dark:text-gray-500">{pct.toFixed(1)}% · {formatNumber(item.totalRequests)}次</div>
                        </div>
                        <svg className={`h-4 w-4 shrink-0 text-gray-400 transition-transform ${expanded ? 'rotate-180' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                        </svg>
                      </div>
                    </button>
                    {/* 展开后的原始路径 */}
                    {expanded && (
                      <div className="mt-2 ml-9 space-y-1 rounded-apple bg-gray-50 p-3 dark:bg-gray-800/50">
                        <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                          <span className="font-mono rounded bg-gray-200 px-1 py-0.5 text-[10px] dark:bg-gray-700">{item.method}</span>
                          <span className="text-gray-400 dark:text-gray-500">类别:</span>
                          <span>{item.purposeCategory}</span>
                        </div>
                        <div className="overflow-x-auto">
                          <code className="text-xs text-gray-600 dark:text-gray-300 break-all">{item.path}</code>
                        </div>
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          </div>

          {/* ===== 底部统计信息 ===== */}
          <div className="card-apple p-4 text-xs text-gray-500 dark:text-gray-400">
            <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
              <span>{visibleStats.source.cache?.persisted ? '数据源：固化汇总表' : `已扫描 ${formatNumber(visibleStats.source.scannedFiles)} 个日志文件`}</span>
              <span>·</span>
              <span>{formatNumber(visibleStats.source.matchedLines)} 条有效请求</span>
              {visibleStats.source.truncated && <span className="text-amber-600 dark:text-amber-400">· 读取达上限，结果可能不完整</span>}
            </div>
            {!visibleStats.source.requestBytesAvailable && (
              <div className="mt-1 text-gray-400 dark:text-gray-500">
                日志未含 request_length 字段，上传入站流量无法精确拆分。
              </div>
            )}
            {visibleStats.source.cache && (
              <div className="mt-1 text-gray-400 dark:text-gray-500">
                数据缓存：
                {visibleStats.source.cache.hit ? '已读取固化结果' : '本次重新统计'}
                {visibleStats.source.cache.refreshedAt && `，更新时间 ${formatTime(visibleStats.source.cache.refreshedAt)}`}
                {visibleStats.source.cache.stale && '，正在后台刷新'}
              </div>
            )}
          </div>
        </>
      )}
    </div>
  )
}