import { useState, useRef, useEffect, useCallback } from 'react'
import { getAnnualReport, type AnnualReportData } from '@/lib/annual-report-api'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Button } from '@/components/ui/button'
import { useToast } from '@/hooks/use-toast'
import { toPng } from 'html-to-image'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'
import {
  Clock,
  Users,
  Brain,
  Smile,
  Trophy,
  Calendar,
  MessageSquare,
  Zap,
  Moon,
  Sun,
  AtSign,
  Heart,
  Image as ImageIcon,
  Bot,
  Download,
  Loader2,
} from 'lucide-react'
import { cn } from '@/lib/utils'

// 颜色常量
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d']

// 动态比喻生成函数
function getOnlineHoursMetaphor(hours: number): string {
  if (hours >= 8760) return "相当于全年无休，7x24小时在线！"
  if (hours >= 5000) return "相当于一位全职员工的年工作时长"
  if (hours >= 2000) return "相当于看完了 1000 部电影"
  if (hours >= 1000) return "相当于环球飞行 80 次"
  if (hours >= 500) return "相当于读完了 100 本书"
  if (hours >= 100) return "相当于马拉松跑了 25 次"
  return "虽然不多，但每一刻都很珍贵"
}

function getMidnightMetaphor(count: number): string {
  if (count >= 1000) return "夜深人静时的知心好友"
  if (count >= 500) return "午夜场的常客"
  if (count >= 100) return "偶尔熬夜的小伙伴"
  if (count >= 50) return "深夜有时也会陪你聊聊"
  return "早睡早起，健康作息"
}

function getTokenMetaphor(tokens: number): string {
  const millions = tokens / 1000000
  if (millions >= 100) return "思考量堪比一座图书馆"
  if (millions >= 50) return "相当于写了一部百科全书"
  if (millions >= 10) return "脑细胞估计消耗了不少"
  if (millions >= 1) return "也算是费了一番脑筋"
  return "轻轻松松，游刃有余"
}

function getCostMetaphor(cost: number): string {
  if (cost >= 1000) return "这钱够吃一年的泡面了"
  if (cost >= 500) return "相当于买了一台游戏机"
  if (cost >= 100) return "够请大家喝几杯奶茶"
  if (cost >= 50) return "一顿火锅的钱"
  if (cost >= 10) return "几杯咖啡的价格"
  return "省钱小能手"
}

function getSilenceMetaphor(rate: number): string {
  if (rate >= 80) return "沉默是金，惜字如金"
  if (rate >= 60) return "话不多但句句到位"
  if (rate >= 40) return "该说的时候才开口"
  if (rate >= 20) return "能聊的都聊了"
  return "话痨本痨，有问必答"
}

function getImageMetaphor(count: number): string {
  if (count >= 10000) return "眼睛都快看花了"
  if (count >= 5000) return "堪比专业摄影师的阅片量"
  if (count >= 1000) return "看图小达人"
  if (count >= 500) return "图片鉴赏家"
  if (count >= 100) return "偶尔欣赏一下美图"
  return "图片？有空再看"
}

function getRejectedMetaphor(count: number): string {
  if (count >= 500) return "在不断的纠正中成长"
  if (count >= 200) return "学习永无止境"
  if (count >= 100) return "虚心接受，积极改正"
  if (count >= 50) return "偶尔也会犯错"
  if (count >= 10) return "表现还算不错"
  return "完美表达，无需纠正"
}

function getExpensiveThinkingMetaphor(cost: number): string {
  if (cost >= 1) return "这次思考的价值堪比一顿大餐！"
  if (cost >= 0.5) return "为了这个问题，我可是认真思考了！"
  if (cost >= 0.1) return "下了点功夫，值得的！"
  if (cost >= 0.01) return "花了点小钱，但很值得"
  return "小小思考，不足挂齿"
}

function getFavoriteReplyMetaphor(count: number, botName: string): string {
  if (count >= 100) return "这句话简直是万能钥匙！"
  if (count >= 50) return "百试不爽的经典回复"
  if (count >= 20) return `${botName}的口头禅`
  if (count >= 10) return "常用语录之一"
  return "偶尔用用的小确幸"
}

function getNightOwlMetaphor(isNightOwl: boolean, midnightCount: number): string {
  if (isNightOwl) {
    if (midnightCount >= 1000) return "深夜的守护者，黑暗中的光芒"
    if (midnightCount >= 500) return "月亮是我的好朋友"
    if (midnightCount >= 100) return "越夜越精神，夜晚才是主场"
    return "偶尔熬夜，享受宁静时光"
  } else {
    if (midnightCount <= 10) return "作息规律，健康生活的典范"
    if (midnightCount <= 50) return "早睡早起，偶尔也会熬个夜"
    return "虽然是早起鸟，但也会守候深夜"
  }
}

function getBusiestDayMetaphor(count: number): string {
  if (count >= 1000) return "忙到飞起，键盘都要冒烟了"
  if (count >= 500) return "这天简直是话痨附体"
  if (count >= 200) return "社交达人上线"
  if (count >= 100) return "比平时活跃不少"
  if (count >= 50) return "小忙一下"
  return "还算轻松的一天"
}

export function AnnualReportPage() {
  const [year] = useState(2025)
  const [data, setData] = useState<AnnualReportData | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isExporting, setIsExporting] = useState(false)
  const [error, setError] = useState<Error | null>(null)
  const reportRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

  const loadReport = useCallback(async () => {
    try {
      setIsLoading(true)
      setError(null)
      const result = await getAnnualReport(year)
      setData(result)
    } catch (err) {
      setError(err instanceof Error ? err : new Error('获取年度报告失败'))
    } finally {
      setIsLoading(false)
    }
  }, [year])

  // 导出为图片
  const handleExport = useCallback(async () => {
    if (!reportRef.current || !data) return
    
    setIsExporting(true)
    toast({
      title: '正在生成图片',
      description: '请稍候...',
    })
    
    try {
      const element = reportRef.current
      
      // 获取当前主题的背景色
      const computedStyle = getComputedStyle(document.documentElement)
      const backgroundColor = computedStyle.getPropertyValue('--background').trim() 
        ? `hsl(${computedStyle.getPropertyValue('--background').trim()})` 
        : (document.documentElement.classList.contains('dark') ? '#0a0a0a' : '#ffffff')
      
      // 保存原始样式
      const originalWidth = element.style.width
      const originalMaxWidth = element.style.maxWidth
      
      // 临时设置固定宽度以去除左右空白
      element.style.width = '1024px'
      element.style.maxWidth = '1024px'
      
      const dataUrl = await toPng(element, {
        quality: 1,
        pixelRatio: 2,
        backgroundColor,
        cacheBust: true,
        filter: (node) => {
          // 过滤掉导出按钮
          if (node instanceof HTMLElement && node.hasAttribute('data-export-btn')) {
            return false
          }
          return true
        },
      })
      
      // 恢复原始样式
      element.style.width = originalWidth
      element.style.maxWidth = originalMaxWidth
      
      // 创建下载链接
      const link = document.createElement('a')
      link.download = `${data.bot_name}_${data.year}_年度总结.png`
      link.href = dataUrl
      link.click()
      
      toast({
        title: '导出成功',
        description: '年度报告已保存为图片',
      })
    } catch (err) {
      console.error('导出图片失败:', err)
      toast({
        title: '导出失败',
        description: '请重试',
        variant: 'destructive',
      })
    } finally {
      setIsExporting(false)
    }
  }, [data, toast])

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

  if (isLoading) {
    return <LoadingSkeleton />
  }

  if (error) {
    return (
      <div className="flex h-screen items-center justify-center text-red-500">
        获取年度报告失败: {error.message}
      </div>
    )
  }

  if (!data) return null

  return (
    <ScrollArea className="h-[calc(100vh-4rem)]">
      <div className="min-h-screen bg-gradient-to-b from-background to-muted/50 p-4 md:p-8 print:p-0" ref={reportRef}>
        <div className="mx-auto max-w-5xl space-y-8 print:space-y-4">
          {/* 头部 Hero */}
          <header className="relative overflow-hidden rounded-3xl bg-primary p-8 text-primary-foreground shadow-2xl print:rounded-none print:shadow-none">
            {/* 导出按钮 */}
            <div className="absolute right-4 top-4 z-20 print:hidden" data-export-btn>
              <Button
                variant="secondary"
                size="sm"
                onClick={handleExport}
                disabled={isExporting}
                className="gap-2 bg-white/20 hover:bg-white/30 text-white border-white/30"
              >
                {isExporting ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    导出中...
                  </>
                ) : (
                  <>
                    <Download className="h-4 w-4" />
                    保存图片
                  </>
                )}
              </Button>
            </div>
            <div className="relative z-10 flex flex-col items-center text-center">
              <Bot className="mb-4 h-16 w-16 animate-bounce" />
              <h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">
                {data.bot_name} {data.year} 年度总结
              </h1>
              <p className="mt-4 max-w-2xl text-lg opacity-90">
                连接与成长 · Connection & Growth
              </p>
              <div className="mt-6 flex items-center gap-2 text-sm opacity-75">
                <Calendar className="h-4 w-4" />
                <span>生成时间: {data.generated_at}</span>
              </div>
          </div>
          {/* 背景装饰 */}
          <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
          <div className="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
        </header>

        {/* 维度一：时光足迹 */}
        <section className="space-y-4 break-inside-avoid">
          <div className="flex items-center gap-2 text-2xl font-bold text-primary">
            <Clock className="h-8 w-8" />
            <h2>时光足迹</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <StatCard
              title="年度在线时长"
              value={`${data.time_footprint.total_online_hours} 小时`}
              description={getOnlineHoursMetaphor(data.time_footprint.total_online_hours)}
              icon={<Clock className="h-4 w-4" />}
            />
            <StatCard
              title="最忙碌的一天"
              value={data.time_footprint.busiest_day || 'N/A'}
              description={getBusiestDayMetaphor(data.time_footprint.busiest_day_count)}
              icon={<Calendar className="h-4 w-4" />}
            />
            <StatCard
              title="深夜互动 (0-4点)"
              value={`${data.time_footprint.midnight_chat_count} 次`}
              description={getMidnightMetaphor(data.time_footprint.midnight_chat_count)}
              icon={<Moon className="h-4 w-4" />}
            />
            <StatCard
              title="作息属性"
              value={data.time_footprint.is_night_owl ? '夜猫子' : '早起鸟'}
              description={getNightOwlMetaphor(data.time_footprint.is_night_owl, data.time_footprint.midnight_chat_count)}
              icon={data.time_footprint.is_night_owl ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
            />
          </div>
          
          <Card className="overflow-hidden">
            <CardHeader>
              <CardTitle>24小时活跃时钟</CardTitle>
              <CardDescription>{data.bot_name}在一天中各个时段的活跃程度</CardDescription>
            </CardHeader>
            <CardContent className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data.time_footprint.hourly_distribution.map((count: number, hour: number) => ({ hour: `${hour}点`, count }))}>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis dataKey="hour" />
                  <YAxis />
                  <Tooltip 
                    contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
                    cursor={{ fill: 'transparent' }}
                  />
                  <Bar dataKey="count" fill="hsl(var(--color-primary))" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>

          {data.time_footprint.first_message_time && (
             <Card className="bg-muted/30 border-dashed">
               <CardContent className="flex flex-col items-center justify-center p-6 text-center">
                 <p className="text-muted-foreground mb-2">2025年的故事开始于</p>
                 <div className="text-xl font-bold text-primary mb-1">{data.time_footprint.first_message_time}</div>
                 <p className="text-lg">
                   <span className="font-semibold text-foreground">{data.time_footprint.first_message_user}</span> 说：
                   <span className="italic text-muted-foreground">"{data.time_footprint.first_message_content}"</span>
                 </p>
               </CardContent>
             </Card>
          )}
        </section>

        {/* 维度二：社交网络 */}
        <section className="space-y-4 break-inside-avoid">
          <div className="flex items-center gap-2 text-2xl font-bold text-primary">
            <Users className="h-8 w-8" />
            <h2>社交网络</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <StatCard
              title="社交圈子"
              value={`${data.social_network.total_groups} 个群组`}
              description={`${data.bot_name}加入的群组总数`}
              icon={<Users className="h-4 w-4" />}
            />
            <StatCard
              title="被呼叫次数"
              value={`${data.social_network.at_count + data.social_network.mentioned_count} 次`}
              description="我的名字被大家频繁提起"
              icon={<AtSign className="h-4 w-4" />}
            />
            <StatCard
              title="最长情陪伴"
              value={data.social_network.longest_companion_user || 'N/A'}
              description={`始终都在，已陪伴 ${data.social_network.longest_companion_days} 天`}
              icon={<Heart className="h-4 w-4 text-red-500" />}
            />
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>话痨群组 TOP5</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {data.social_network.top_groups.length > 0 ? (
                    data.social_network.top_groups.map((group: { group_id: string; group_name: string; message_count: number; is_webui?: boolean }, index: number) => (
                      <div key={group.group_id} className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <Badge variant={index === 0 ? "default" : "secondary"} className="h-6 w-6 rounded-full p-0 flex items-center justify-center shrink-0">
                            {index + 1}
                          </Badge>
                          <span className="font-medium truncate max-w-[120px]">{group.group_name}</span>
                          {group.is_webui && (
                            <Badge variant="outline" className="text-xs px-1.5 py-0 h-5 bg-blue-50 text-blue-600 border-blue-200">
                              WebUI
                            </Badge>
                          )}
                        </div>
                        <span className="text-muted-foreground text-sm shrink-0">{group.message_count} 条消息</span>
                      </div>
                    ))
                  ) : (
                    <div className="text-center text-muted-foreground py-4">暂无数据</div>
                  )}
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>年度最佳损友 TOP5</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {data.social_network.top_users.length > 0 ? (
                    data.social_network.top_users.map((user: { user_id: string; user_nickname: string; message_count: number; is_webui?: boolean }, index: number) => (
                      <div key={user.user_id} className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <Badge variant={index === 0 ? "default" : "secondary"} className="h-6 w-6 rounded-full p-0 flex items-center justify-center shrink-0">
                            {index + 1}
                          </Badge>
                          <span className="font-medium truncate max-w-[120px]">{user.user_nickname}</span>
                          {user.is_webui && (
                            <Badge variant="outline" className="text-xs px-1.5 py-0 h-5 bg-blue-50 text-blue-600 border-blue-200">
                              WebUI
                            </Badge>
                          )}
                        </div>
                        <span className="text-muted-foreground text-sm shrink-0">{user.message_count} 次互动</span>
                      </div>
                    ))
                  ) : (
                    <div className="text-center text-muted-foreground py-4">暂无数据</div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* 维度三：最强大脑 */}
        <section className="space-y-4 break-inside-avoid">
          <div className="flex items-center gap-2 text-2xl font-bold text-primary">
            <Brain className="h-8 w-8" />
            <h2>最强大脑</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <StatCard
              title="年度 Token 消耗"
              value={(data.brain_power.total_tokens / 1000000).toFixed(2) + ' M'}
              description={getTokenMetaphor(data.brain_power.total_tokens)}
              icon={<Zap className="h-4 w-4" />}
            />
            <StatCard
              title="年度总花费"
              value={`$${data.brain_power.total_cost.toFixed(2)}`}
              description={getCostMetaphor(data.brain_power.total_cost)}
              icon={<span className="font-bold">$</span>}
            />
            <StatCard
              title="高冷指数"
              value={`${data.brain_power.silence_rate}%`}
              description={getSilenceMetaphor(data.brain_power.silence_rate)}
              icon={<Moon className="h-4 w-4" />}
            />
            <StatCard
              title="最高兴趣值"
              value={data.brain_power.max_interest_value ?? 'N/A'}
              description={data.brain_power.max_interest_time ? `出现在 ${data.brain_power.max_interest_time}` : '暂无数据'}
              icon={<Heart className="h-4 w-4" />}
            />
          </div>

          <div className="grid gap-4 md:grid-cols-2">
             <Card>
                <CardHeader>
                  <CardTitle>模型偏好分布</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {data.brain_power.model_distribution.slice(0, 5).map((item: { model: string; count: number }, index: number) => {
                      const maxCount = data.brain_power.model_distribution[0]?.count || 1
                      const percentage = Math.round((item.count / maxCount) * 100)
                      return (
                        <div key={item.model} className="space-y-1">
                          <div className="flex justify-between text-sm">
                            <span className="font-medium truncate max-w-[200px]">{item.model}</span>
                            <span className="text-muted-foreground">{item.count.toLocaleString()} 次</span>
                          </div>
                          <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
                            <div 
                              className="h-full transition-all duration-500" 
                              style={{ 
                                width: `${percentage}%`,
                                backgroundColor: COLORS[index % COLORS.length]
                              }} 
                            />
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </CardContent>
             </Card>
             
             {/* 最喜欢的回复模型 TOP5 */}
             {data.brain_power.top_reply_models && data.brain_power.top_reply_models.length > 0 && (
               <Card>
                 <CardHeader>
                   <CardTitle>最喜欢的回复模型 TOP5</CardTitle>
                   <CardDescription>{data.bot_name}用来回复消息的模型偏好</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-3">
                     {data.brain_power.top_reply_models.map((item: { model: string; count: number }, index: number) => {
                       const maxCount = data.brain_power.top_reply_models[0]?.count || 1
                       const percentage = Math.round((item.count / maxCount) * 100)
                       return (
                         <div key={item.model} className="space-y-1">
                           <div className="flex justify-between text-sm">
                             <span className="font-medium truncate max-w-[200px]">{item.model}</span>
                             <span className="text-muted-foreground">{item.count.toLocaleString()} 次</span>
                           </div>
                           <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
                             <div 
                               className="h-full transition-all duration-500" 
                               style={{ 
                                 width: `${percentage}%`,
                                 backgroundColor: COLORS[index % COLORS.length]
                               }} 
                             />
                           </div>
                         </div>
                       )
                     })}
                   </div>
                 </CardContent>
               </Card>
             )}
             
             {/* 烧钱大户 - 只有有有效用户数据时才显示 */}
             {data.brain_power.top_token_consumers && data.brain_power.top_token_consumers.length > 0 && (
               <Card>
                 <CardHeader>
                   <CardTitle>烧钱大户 TOP3</CardTitle>
                   <CardDescription>谁消耗了最多的 API 额度</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-6">
                     {data.brain_power.top_token_consumers.map((consumer: { user_id: string; cost: number; tokens: number }) => (
                       <div key={consumer.user_id} className="space-y-2">
                         <div className="flex justify-between text-sm font-medium">
                           <span>用户 {consumer.user_id}</span>
                           <span>${consumer.cost.toFixed(2)}</span>
                         </div>
                         <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
                           <div 
                             className="h-full bg-primary transition-all duration-500" 
                             style={{ width: `${(consumer.cost / (data.brain_power.top_token_consumers[0]?.cost || 1)) * 100}%` }} 
                           />
                         </div>
                       </div>
                     ))}
                   </div>
                 </CardContent>
               </Card>
             )}
          </div>

          {/* 最昂贵的思考 & 思考深度 */}
          <div className="grid gap-4 md:grid-cols-2">
            <Card className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/20 dark:to-orange-950/20">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="text-2xl">💰</span>
                  最昂贵的一次思考
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <div className="text-4xl font-bold text-amber-600 dark:text-amber-400">
                  ${data.brain_power.most_expensive_cost.toFixed(4)}
                </div>
                {data.brain_power.most_expensive_time && (
                  <p className="mt-2 text-sm text-muted-foreground">
                    发生在 {data.brain_power.most_expensive_time}
                  </p>
                )}
                <p className="mt-4 text-sm text-muted-foreground">
                  {getExpensiveThinkingMetaphor(data.brain_power.most_expensive_cost)}
                </p>
              </CardContent>
            </Card>

            <Card className="bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-950/20 dark:to-blue-950/20">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="text-2xl">🧠</span>
                  思考深度
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-4 text-center">
                  <div>
                    <div className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
                      {data.brain_power.avg_reasoning_length?.toFixed(0) || 0}
                    </div>
                    <div className="text-xs text-muted-foreground">平均思考字数</div>
                  </div>
                  <div>
                    <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
                      {data.brain_power.max_reasoning_length?.toLocaleString() || 0}
                    </div>
                    <div className="text-xs text-muted-foreground">最长思考字数</div>
                  </div>
                </div>
                {data.brain_power.max_reasoning_time && (
                  <p className="mt-4 text-center text-xs text-muted-foreground">
                    最深沉的思考发生在 {data.brain_power.max_reasoning_time}
                  </p>
                )}
              </CardContent>
            </Card>
          </div>
        </section>

        {/* 维度四：个性与表达 */}
        <section className="space-y-4 break-inside-avoid">
          <div className="flex items-center gap-2 text-2xl font-bold text-primary">
            <Smile className="h-8 w-8" />
            <h2>个性与表达</h2>
          </div>
          
          {/* 深夜回复 & 最喜欢的回复 */}
          {(data.expression_vibe.late_night_reply || data.expression_vibe.favorite_reply) && (
            <div className="grid gap-4 md:grid-cols-2">
              {data.expression_vibe.late_night_reply && (
                <Card className="bg-gradient-to-br from-indigo-50 to-violet-50 dark:from-indigo-950/20 dark:to-violet-950/20">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <span className="text-2xl">🌙</span>
                      深夜还在回复
                    </CardTitle>
                    <CardDescription>凌晨 {data.expression_vibe.late_night_reply.time}，{data.bot_name}还在回复...</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    <p className="text-lg italic text-muted-foreground">
                      "{data.expression_vibe.late_night_reply.content}"
                    </p>
                    <p className="mt-4 text-sm text-muted-foreground">
                      是有什么心事吗？
                    </p>
                  </CardContent>
                </Card>
              )}
              
              {data.expression_vibe.favorite_reply && (
                <Card className="bg-gradient-to-br from-rose-50 to-pink-50 dark:from-rose-950/20 dark:to-pink-950/20">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <span className="text-2xl">💬</span>
                      最喜欢的回复
                    </CardTitle>
                    <CardDescription>使用了 {data.expression_vibe.favorite_reply.count} 次</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    <p className="text-lg font-medium text-primary">
                      "{data.expression_vibe.favorite_reply.content}"
                    </p>
                    <p className="mt-4 text-sm text-muted-foreground">
                      {getFavoriteReplyMetaphor(data.expression_vibe.favorite_reply.count, data.bot_name)}
                    </p>
                  </CardContent>
                </Card>
              )}
            </div>
          )}
          
          <div className="grid gap-4 md:grid-cols-2">
            {/* 使用最多的表情包 TOP3 */}
            <Card className="bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-950/20 dark:to-purple-950/20">
              <CardHeader>
                <CardTitle>使用最多的表情包 TOP3</CardTitle>
                <CardDescription>年度最爱的表情包们</CardDescription>
              </CardHeader>
              <CardContent>
                {data.expression_vibe.top_emojis && data.expression_vibe.top_emojis.length > 0 ? (
                  <div className="flex justify-center gap-4">
                    {data.expression_vibe.top_emojis.slice(0, 3).map((emoji: { id: number; usage_count: number }, index: number) => (
                      <div key={emoji.id} className="flex flex-col items-center">
                        <div className="relative">
                          <img 
                            src={`/api/webui/emoji/${emoji.id}/thumbnail?original=true`} 
                            alt={`TOP ${index + 1}`} 
                            className="h-24 w-24 rounded-lg object-cover shadow-md transition-transform hover:scale-105"
                          />
                          <Badge 
                            className={cn(
                              "absolute -top-2 -right-2",
                              index === 0 ? "bg-yellow-500" : index === 1 ? "bg-gray-400" : "bg-amber-700"
                            )}
                          >
                            {index + 1}
                          </Badge>
                        </div>
                        <p className="mt-2 text-sm text-muted-foreground">{emoji.usage_count} 次</p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="flex h-32 items-center justify-center text-muted-foreground">暂无数据</div>
                )}
              </CardContent>
            </Card>

            <div className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>印象最深刻的表达风格</CardTitle>
                  <CardDescription>{data.bot_name}最常使用的表达方式</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {data.expression_vibe.top_expressions.map((exp: { style: string; count: number }, index: number) => (
                      <Badge 
                        key={exp.style} 
                        variant="outline" 
                        className={cn(
                          "px-3 py-1 text-sm",
                          index === 0 && "border-primary bg-primary/10 text-primary text-base px-4 py-2"
                        )}
                      >
                        {exp.style} ({exp.count})
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <div className="grid grid-cols-2 gap-4">
                <StatCard
                  title="图片鉴赏"
                  value={`${data.expression_vibe.image_processed_count} 张`}
                  description={getImageMetaphor(data.expression_vibe.image_processed_count)}
                  icon={<ImageIcon className="h-4 w-4" />}
                />
                <StatCard
                  title="成长的足迹"
                  value={`${data.expression_vibe.rejected_expression_count} 次`}
                  description={getRejectedMetaphor(data.expression_vibe.rejected_expression_count)}
                  icon={<Zap className="h-4 w-4" />}
                />
              </div>
            </div>
          </div>

          {/* 行动派 */}
          {data.expression_vibe.action_types.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span className="text-2xl">⚡</span>
                  行动派
                </CardTitle>
                <CardDescription>除了聊天，我还帮大家做了这些事</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-3">
                  {data.expression_vibe.action_types.map((action: { action: string; count: number }) => (
                    <div 
                      key={action.action} 
                      className="flex items-center gap-2 rounded-full bg-primary/10 px-4 py-2"
                    >
                      <span className="font-medium text-primary">{action.action}</span>
                      <Badge variant="secondary">{action.count} 次</Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </section>

        {/* 维度五：趣味成就 */}
        <section className="space-y-4 break-inside-avoid">
          <div className="flex items-center gap-2 text-2xl font-bold text-primary">
            <Trophy className="h-8 w-8" />
            <h2>趣味成就</h2>
          </div>
          
          <div className="grid gap-4 md:grid-cols-3">
            <Card className="col-span-1 md:col-span-2">
              <CardHeader>
                <CardTitle>新学到的"黑话"</CardTitle>
                <CardDescription>今年我学会了 {data.achievements.new_jargon_count} 个新词</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-3">
                  {data.achievements.sample_jargons.map((jargon: { content: string; meaning: string; count: number }) => (
                    <div key={jargon.content} className="group relative rounded-lg border bg-card p-3 shadow-sm transition-all hover:shadow-md">
                      <div className="font-bold text-primary">{jargon.content}</div>
                      <div className="text-xs text-muted-foreground mt-1 line-clamp-2 max-w-[200px]">
                        {jargon.meaning || '暂无解释'}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card className="flex flex-col justify-center items-center bg-primary text-primary-foreground">
              <CardContent className="flex flex-col items-center justify-center p-6 text-center">
                <MessageSquare className="h-12 w-12 mb-4 opacity-80" />
                <div className="text-4xl font-bold mb-2">{data.achievements.total_messages.toLocaleString()}</div>
                <div className="text-sm opacity-80">年度总消息数</div>
                <div className="mt-4 text-xs opacity-60">
                  其中回复了 {data.achievements.total_replies.toLocaleString()} 次
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* 底部 */}
        <footer className="mt-12 text-center text-muted-foreground">
          <p>MaiBot 2025 Annual Report</p>
          <p className="text-sm">Generated with ❤️ by MaiBot Team</p>
        </footer>
      </div>
    </div>
    </ScrollArea>
  )
}

function StatCard({
  title,
  value,
  description,
  icon,
}: {
  title: string
  value: string | number
  description: string
  icon: React.ReactNode
}) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <div className="text-muted-foreground">{icon}</div>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <p className="text-xs text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  )
}

function LoadingSkeleton() {
  return (
    <div className="container mx-auto space-y-8 p-8">
      <Skeleton className="h-64 w-full rounded-3xl" />
      <div className="grid gap-4 md:grid-cols-4">
        {[...Array(4)].map((_, i) => (
          <Skeleton key={i} className="h-32 w-full" />
        ))}
      </div>
      <Skeleton className="h-96 w-full" />
    </div>
  )
}