"use client";

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Bot, Cpu, MessageSquare, FileText, Sparkles } from "lucide-react";

const modelGroups = [
  {
    title: "对话模型",
    description: "用于智能对话、公文写作、政策分析等核心功能",
    icon: MessageSquare,
    models: [
      { name: "qwen-plus", displayName: "通义千问-Plus", provider: "阿里云百炼", type: "对话", status: "active", desc: "主力模型，适用于复杂推理和长文本生成" },
      { name: "qwen-turbo", displayName: "通义千问-Turbo", provider: "阿里云百炼", type: "对话", status: "active", desc: "快速响应模型，适用于简单对话和问答" },
      { name: "qwen-max", displayName: "通义千问-Max", provider: "阿里云百炼", type: "对话", status: "standby", desc: "旗舰模型，适用于高精度分析场景" },
      { name: "qwen-long", displayName: "通义千问-Long", provider: "阿里云百炼", type: "对话", status: "standby", desc: "长上下文模型，支持百万Token输入" },
    ],
  },
  {
    title: "向量模型",
    description: "用于知识库文档检索和语义搜索",
    icon: Cpu,
    models: [
      { name: "text-embedding-v3", displayName: "通义文本向量V3", provider: "阿里云百炼", type: "嵌入", status: "active", desc: "1024维向量，高精度语义匹配" },
    ],
  },
  {
    title: "文档理解",
    description: "用于长文档分析、政策解读等场景",
    icon: FileText,
    models: [
      { name: "qwen-plus", displayName: "通义千问-Plus", provider: "阿里云百炼", type: "文档", status: "active", desc: "支持文档理解和内容提取" },
    ],
  },
];

const statusConfig: Record<string, { label: string; variant: "default" | "secondary" | "outline" }> = {
  active: { label: "运行中", variant: "default" },
  standby: { label: "待启用", variant: "secondary" },
  inactive: { label: "未配置", variant: "outline" },
};

export default function ModelsPage() {
  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">模型管理</h1>
          <p className="text-sm text-muted-foreground mt-1">当前使用阿里云百炼平台（DashScope）提供的通义千问系列模型</p>
        </div>
        <div className="flex items-center gap-2">
          <Sparkles className="h-4 w-4 text-orange-500" />
          <Badge variant="secondary" className="gap-1">全部国产模型</Badge>
        </div>
      </div>

      <div className="space-y-4">
        {modelGroups.map((group) => (
          <Card key={group.title}>
            <CardHeader className="pb-3">
              <div className="flex items-center gap-2">
                <group.icon className="h-4 w-4 text-muted-foreground" />
                <CardTitle className="text-base">{group.title}</CardTitle>
              </div>
              <CardDescription>{group.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="border rounded-lg overflow-hidden">
                <table className="w-full text-sm">
                  <thead className="bg-muted/50">
                    <tr>
                      <th className="text-left p-3">模型</th>
                      <th className="text-left p-3">服务商</th>
                      <th className="text-left p-3">用途</th>
                      <th className="text-left p-3">说明</th>
                      <th className="text-left p-3">状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    {group.models.map((model) => {
                      const st = statusConfig[model.status] || statusConfig.inactive;
                      return (
                        <tr key={model.name + model.type} className="border-t">
                          <td className="p-3">
                            <div className="font-medium">{model.displayName}</div>
                            <div className="text-xs text-muted-foreground font-mono">{model.name}</div>
                          </td>
                          <td className="p-3 text-muted-foreground">{model.provider}</td>
                          <td className="p-3">
                            <Badge variant="outline">{model.type}</Badge>
                          </td>
                          <td className="p-3 text-muted-foreground text-xs max-w-xs">{model.desc}</td>
                          <td className="p-3">
                            <Badge variant={st.variant}>{st.label}</Badge>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <Card className="mt-4">
        <CardContent className="pt-6">
          <div className="grid sm:grid-cols-3 gap-4 text-sm">
            <div className="p-3 rounded-lg bg-muted/40">
              <div className="text-muted-foreground">API 接入点</div>
              <div className="font-mono text-xs mt-1">dashscope.aliyuncs.com</div>
            </div>
            <div className="p-3 rounded-lg bg-muted/40">
              <div className="text-muted-foreground">接口协议</div>
              <div className="font-mono text-xs mt-1">OpenAI Compatible</div>
            </div>
            <div className="p-3 rounded-lg bg-muted/40">
              <div className="text-muted-foreground">数据安全</div>
              <div className="text-xs mt-1 text-green-600 font-medium">境内部署，数据不出境</div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}