import { DashboardShell } from "@/components/dashboard-shell"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Brain, Mic, Database, Plus, Sparkles, Edit, Play, Sliders, User } from "lucide-react"

export default function AIModelPage() {
  return (
    <DashboardShell>
      <DashboardHeader heading="大模型管理" text="管理洛天依的AI模型、语音和知识库">
        <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">
          <Plus className="mr-2 h-4 w-4" />
          添加新模型
        </Button>
      </DashboardHeader>

      <Tabs defaultValue="framework" className="space-y-4">
        <TabsList className="bg-white p-1 shadow-md rounded-lg border">
          <TabsTrigger
            value="framework"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            大模型框架
          </TabsTrigger>
          <TabsTrigger
            value="finetune"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            模型微调
          </TabsTrigger>
          <TabsTrigger
            value="voice"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            语音合成
          </TabsTrigger>
          <TabsTrigger
            value="knowledge"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            知识库
          </TabsTrigger>
        </TabsList>

        <TabsContent value="framework" className="space-y-4">
          <Card className="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>
              <CardDescription>管理洛天依使用的大语言模型框架</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                <Card className="border-2 border-pink-500 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden relative group">
                  <div className="absolute inset-0 bg-gradient-to-r from-pink-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">当前使用模型</CardTitle>
                    <div className="p-1.5 rounded-full bg-pink-100">
                      <Brain className="h-5 w-5 text-pink-600" />
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-purple-600">
                      GPT-4o
                    </div>
                    <p className="text-xs text-muted-foreground">版本: 2.0 | 上次更新: 2024-03-15</p>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full border-pink-200 hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
                    >
                      查看详情
                    </Button>
                  </CardFooter>
                </Card>

                <Card className="shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">备用模型</CardTitle>
                    <div className="p-1.5 rounded-full bg-purple-100">
                      <Brain className="h-5 w-5 text-purple-600" />
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="text-xl font-bold">Claude 3</div>
                    <p className="text-xs text-muted-foreground">版本: 1.5 | 上次更新: 2024-02-20</p>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
                    >
                      设为主要
                    </Button>
                  </CardFooter>
                </Card>

                <Card className="shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">备用模型</CardTitle>
                    <div className="p-1.5 rounded-full bg-blue-100">
                      <Brain className="h-5 w-5 text-blue-600" />
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="text-xl font-bold">Llama 3</div>
                    <p className="text-xs text-muted-foreground">版本: 1.0 | 上次更新: 2024-01-10</p>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full hover:bg-blue-50 hover:text-blue-700 transition-all duration-200"
                    >
                      设为主要
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </CardContent>
            <CardFooter>
              <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">
                <Plus className="mr-2 h-4 w-4" />
                添加新模型
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="finetune" className="space-y-4">
          <Card className="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>
              <CardDescription>管理洛天依的人格和行为特征</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4">
                <Card className="shadow-md hover:shadow-lg transition-all duration-300">
                  <CardHeader>
                    <CardTitle className="text-sm flex items-center">
                      <Sparkles className="h-4 w-4 mr-2 text-pink-500" />
                      人格设定
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-1 bg-pink-50 p-3 rounded-lg">
                          <p className="text-sm font-medium text-pink-700">性格特点</p>
                          <p className="text-sm text-gray-600">活泼、开朗、善良、有音乐天赋</p>
                        </div>
                        <div className="space-y-1 bg-purple-50 p-3 rounded-lg">
                          <p className="text-sm font-medium text-purple-700">语言风格</p>
                          <p className="text-sm text-gray-600">亲切、自然、略带俏皮</p>
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-1 bg-blue-50 p-3 rounded-lg">
                          <p className="text-sm font-medium text-blue-700">兴趣爱好</p>
                          <p className="text-sm text-gray-600">唱歌、跳舞、与用户交流</p>
                        </div>
                        <div className="space-y-1 bg-teal-50 p-3 rounded-lg">
                          <p className="text-sm font-medium text-teal-700">背景设定</p>
                          <p className="text-sm text-gray-600">虚拟歌手、16岁、身高158cm</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
                    >
                      <Edit className="h-4 w-4 mr-2" />
                      编辑人格设定
                    </Button>
                  </CardFooter>
                </Card>

                <Card className="shadow-md hover:shadow-lg transition-all duration-300">
                  <CardHeader>
                    <CardTitle className="text-sm flex items-center">
                      <Database className="h-4 w-4 mr-2 text-purple-500" />
                      微调数据集
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between p-2 rounded-lg bg-gradient-to-r from-pink-50 to-purple-50">
                        <p className="text-sm font-medium">基础对话数据集</p>
                        <p className="text-sm text-pink-600 font-medium">10,000 条对话</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">歌曲相关对话</p>
                        <p className="text-sm text-purple-600 font-medium">2,500 条对话</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">舞蹈相关对话</p>
                        <p className="text-sm text-blue-600 font-medium">1,800 条对话</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">服装相关对话</p>
                        <p className="text-sm text-teal-600 font-medium">3,200 条对话</p>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button
                      variant="outline"
                      size="sm"
                      className="hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
                    >
                      查看数据集
                    </Button>
                    <Button
                      size="sm"
                      className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300"
                    >
                      添加新数据
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="voice" className="space-y-4">
          <Card className="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>
              <CardDescription>管理洛天依的语音模型</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <Card className="shadow-md hover:shadow-lg transition-all duration-300">
                  <CardHeader>
                    <CardTitle className="text-sm flex items-center">
                      <Mic className="h-4 w-4 mr-2 text-pink-500" />
                      语音模型
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between p-2 rounded-lg bg-gradient-to-r from-pink-50 to-purple-50">
                        <p className="text-sm font-medium">当前模型</p>
                        <p className="text-sm text-pink-600 font-medium">洛天依官方语音 v3.0</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">采样率</p>
                        <p className="text-sm text-gray-600">48kHz</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">音质</p>
                        <p className="text-sm text-gray-600">高清 (24bit)</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">上次更新</p>
                        <p className="text-sm text-gray-600">2024-03-01</p>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
                    >
                      <Play className="h-4 w-4 mr-2" />
                      试听示例
                    </Button>
                  </CardFooter>
                </Card>

                <Card className="shadow-md hover:shadow-lg transition-all duration-300">
                  <CardHeader>
                    <CardTitle className="text-sm flex items-center">
                      <Sliders className="h-4 w-4 mr-2 text-purple-500" />
                      语音参数
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">音调</p>
                        <p className="text-sm text-gray-600">标准 (0)</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">语速</p>
                        <p className="text-sm text-gray-600">中等 (1.0x)</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">情感强度</p>
                        <p className="text-sm text-gray-600">中等 (0.7)</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">音量</p>
                        <p className="text-sm text-gray-600">标准 (1.0)</p>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
                    >
                      调整参数
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
                上传新语音样本
              </Button>
              <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">
                更新语音模型
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="knowledge" className="space-y-4">
          <Card className="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>
              <CardDescription>管理用户信息和洛天依的知识库</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <Card className="shadow-md hover:shadow-lg transition-all duration-300">
                  <CardHeader>
                    <CardTitle className="text-sm flex items-center">
                      <User className="h-4 w-4 mr-2 text-pink-500" />
                      用户模型
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between p-2 rounded-lg bg-gradient-to-r from-pink-50 to-purple-50">
                        <p className="text-sm font-medium">活跃用户模型</p>
                        <p className="text-sm text-pink-600 font-medium">5,732 个</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">平均模型大小</p>
                        <p className="text-sm text-gray-600">2.4 MB</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">上次更新</p>
                        <p className="text-sm text-gray-600">今天 08:45</p>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
                    >
                      查看用户模型
                    </Button>
                  </CardFooter>
                </Card>

                <Card className="shadow-md hover:shadow-lg transition-all duration-300">
                  <CardHeader>
                    <CardTitle className="text-sm flex items-center">
                      <Database className="h-4 w-4 mr-2 text-purple-500" />
                      基础知识库
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">洛天依相关知识</p>
                        <p className="text-sm text-purple-600 font-medium">1,200 条</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">歌曲知识</p>
                        <p className="text-sm text-blue-600 font-medium">850 条</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">舞蹈知识</p>
                        <p className="text-sm text-teal-600 font-medium">320 条</p>
                      </div>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
                        <p className="text-sm font-medium">通用知识</p>
                        <p className="text-sm text-gray-600">5,000+ 条</p>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
                    >
                      编辑知识库
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
                导入知识
              </Button>
              <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">
                更新知识库
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </DashboardShell>
  )
}