"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { DashboardShell } from "@/components/dashboard-shell"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Overview } from "@/components/overview"
import { RecentActivity } from "@/components/recent-activity"
import { Brain, Music, Shirt, User, Database, Sparkles } from "lucide-react"
import { StatCard } from "@/components/stat-card"
import Link from "next/link"

export default function DashboardPage() {
  const router = useRouter()

  // 检查用户是否已登录
  // 在实际应用中，这里应该检查用户的会话或令牌
  useEffect(() => {
    try {
      // 模拟检查登录状态
      const isLoggedIn = localStorage.getItem("isLoggedIn")

      if (!isLoggedIn) {
        // 如果未登录，重定向到登录页面
        router.push("/login")
      }
    } catch (error) {
      console.error("登录状态检查失败:", error)
    }
  }, [router])

  return (
    <DashboardShell>
      <DashboardHeader heading="管理后台" text="洛天依APP管理系统">
        <Button
          className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg"
          asChild
        >
          <Link href="/settings">
            <Sparkles className="mr-2 h-4 w-4" />
            系统设置
          </Link>
        </Button>
      </DashboardHeader>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <StatCard
          title="总用户数"
          value="12,345"
          change="+180 来自上周"
          icon={<User className="h-5 w-5 text-pink-500" />}
          trend="up"
        />
        <StatCard
          title="活跃用户"
          value="5,732"
          change="+12% 来自上月"
          icon={<User className="h-5 w-5 text-purple-500" />}
          trend="up"
        />
        <StatCard
          title="卡牌激活"
          value="8,942"
          change="+24% 来自上月"
          icon={<Database className="h-5 w-5 text-blue-500" />}
          trend="up"
        />
        <StatCard
          title="对话次数"
          value="573,128"
          change="+19% 来自上月"
          icon={<Brain className="h-5 w-5 text-teal-500" />}
          trend="up"
        />
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        <Card className="col-span-4 border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
          <CardHeader>
            <CardTitle className="text-xl font-bold flex items-center">
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                系统概览
              </span>
              <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
            </CardTitle>
          </CardHeader>
          <CardContent className="pl-2">
            <Overview />
          </CardContent>
        </Card>

        <Card className="col-span-3 border-none shadow-lg bg-gradient-to-br from-white to-blue-50">
          <CardHeader>
            <CardTitle className="text-xl font-bold flex items-center">
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-600">最近活动</span>
              <div className="ml-2 h-1 w-10 bg-gradient-to-r from-blue-600 to-teal-600 rounded-full"></div>
            </CardTitle>
            <CardDescription>系统最近的操作记录</CardDescription>
          </CardHeader>
          <CardContent>
            <RecentActivity />
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mt-4">
        <Card className="border-none shadow-lg hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-white to-pink-50 overflow-hidden relative group">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <CardTitle className="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-purple-600">
              大模型管理
            </CardTitle>
            <div className="p-2 rounded-full bg-gradient-to-r from-pink-100 to-purple-100">
              <Brain className="h-6 w-6 text-pink-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid gap-2">
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/ai-model">大模型框架系统</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/ai-model/fine-tuning">大模型微调</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/ai-model/voice-clone">语音克隆与合成</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/ai-model/knowledge-base">知识库管理</Link>
              </Button>
            </div>
          </CardContent>
        </Card>

        <Card className="border-none shadow-lg hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-white to-purple-50 overflow-hidden relative group">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <CardTitle className="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600">
              卡牌管理
            </CardTitle>
            <div className="p-2 rounded-full bg-gradient-to-r from-purple-100 to-indigo-100">
              <Shirt className="h-6 w-6 text-purple-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid gap-2">
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/outfits">服装卡牌管理</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/props">道具卡牌管理</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/home-decor">家居装饰卡牌管理</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/food">食物卡牌管理</Link>
              </Button>
            </div>
          </CardContent>
        </Card>

        <Card className="border-none shadow-lg hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-white to-blue-50 overflow-hidden relative group">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <CardTitle className="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-600">
              内容管理
            </CardTitle>
            <div className="p-2 rounded-full bg-gradient-to-r from-blue-100 to-teal-100">
              <Music className="h-6 w-6 text-blue-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid gap-2">
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/songs">歌曲管理</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/dances">舞蹈管理</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/affinity">好感度系统</Link>
              </Button>
              <Button variant="outline" className="justify-start" asChild>
                <Link href="/achievements">成就系统</Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardShell>
  )
}