"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Database, Plus, RefreshCw, Settings, Brain, Play } from "lucide-react"
import BottomTabs from "@/components/nav/bottom-tabs"

interface DataSource {
  id: string
  name: string
  description: string
  type: string
  records: string
  lastSync: string
  status: "connected" | "disconnected" | "syncing"
}

interface AIModel {
  id: string
  name: string
  type: string
  accuracy: string
  algorithm: string
  features: number
  lastTrained: string
  status: "ready" | "training" | "error"
}

const mockDataSources: DataSource[] = [
  {
    id: "wechat-db",
    name: "微信用户数据库",
    description: "存储微信用户基础信息和行为数据",
    type: "MySQL",
    records: "2.5B",
    lastSync: "2024/1/15 18:30:00",
    status: "connected",
  },
  {
    id: "traffic-keywords",
    name: "流量关键词库",
    description: "搜索引擎关键词和流量数据",
    type: "PostgreSQL",
    records: "150.0K",
    lastSync: "2024/1/15 17:45:00",
    status: "connected",
  },
  {
    id: "user-behavior",
    name: "用户行为日志",
    description: "用户操作行为和交互记录",
    type: "MongoDB",
    records: "1.5B",
    lastSync: "2024/1/15 19:00:00",
    status: "syncing",
  },
]

const mockAIModels: AIModel[] = [
  {
    id: "user-value-prediction",
    name: "用户价值预测模型",
    type: "Classification",
    accuracy: "92.0%",
    algorithm: "RandomForest",
    features: 25,
    lastTrained: "2024/1/14 23:30:00",
    status: "ready",
  },
  {
    id: "traffic-trend-analysis",
    name: "流量趋势分析模型",
    type: "Regression",
    accuracy: "87.0%",
    algorithm: "LSTM",
    features: 15,
    lastTrained: "2024/1/15 16:00:00",
    status: "training",
  },
  {
    id: "user-clustering",
    name: "用户聚类模型",
    type: "Clustering",
    accuracy: "89.0%",
    algorithm: "KMeans",
    features: 20,
    lastTrained: "2024/1/13 20:00:00",
    status: "ready",
  },
]

export default function DataPlatformPage() {
  const [activeTab, setActiveTab] = useState("datasource")
  const [dataSources, setDataSources] = useState<DataSource[]>(mockDataSources)
  const [aiModels, setAIModels] = useState<AIModel[]>(mockAIModels)
  const [syncing, setSyncing] = useState<string | null>(null)
  const [training, setTraining] = useState<string | null>(null)
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newDataSource, setNewDataSource] = useState({
    name: "",
    description: "",
    type: "MySQL",
    host: "",
    port: "",
    database: "",
    username: "",
    password: "",
  })

  const handleSync = async (sourceId: string) => {
    setSyncing(sourceId)
    setTimeout(() => {
      setSyncing(null)
      setDataSources((prev) =>
        prev.map((source) =>
          source.id === sourceId ? { ...source, lastSync: new Date().toLocaleString("zh-CN") } : source,
        ),
      )
    }, 2000)
  }

  const handleRetrain = async (modelId: string) => {
    setTraining(modelId)
    setTimeout(() => {
      setTraining(null)
      setAIModels((prev) =>
        prev.map((model) =>
          model.id === modelId ? { ...model, lastTrained: new Date().toLocaleString("zh-CN") } : model,
        ),
      )
    }, 3000)
  }

  const handleAddDataSource = () => {
    const newSource: DataSource = {
      id: `datasource-${Date.now()}`,
      name: newDataSource.name,
      description: newDataSource.description,
      type: newDataSource.type,
      records: "0",
      lastSync: "从未同步",
      status: "disconnected",
    }
    setDataSources((prev) => [...prev, newSource])
    setNewDataSource({
      name: "",
      description: "",
      type: "MySQL",
      host: "",
      port: "",
      database: "",
      username: "",
      password: "",
    })
    setShowAddDialog(false)
  }

  const getStatusBadge = (status: DataSource["status"]) => {
    switch (status) {
      case "connected":
        return <Badge className="bg-green-100 text-green-800 border-green-200">Connected</Badge>
      case "disconnected":
        return <Badge variant="destructive">Disconnected</Badge>
      case "syncing":
        return <Badge className="bg-blue-100 text-blue-800 border-blue-200">Syncing</Badge>
      default:
        return <Badge variant="secondary">Unknown</Badge>
    }
  }

  const getModelStatusBadge = (status: AIModel["status"]) => {
    switch (status) {
      case "ready":
        return <Badge className="bg-green-100 text-green-800 border-green-200">Ready</Badge>
      case "training":
        return <Badge className="bg-yellow-100 text-yellow-800 border-yellow-200">Training</Badge>
      case "error":
        return <Badge variant="destructive">Error</Badge>
      default:
        return <Badge variant="secondary">Unknown</Badge>
    }
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white border-b">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">数据中台</h1>
              <p className="text-gray-600 mt-1">数据源管理与AI模型训练平台</p>
            </div>
            {activeTab === "datasource" ? (
              <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
                <DialogTrigger asChild>
                  <Button className="flex items-center gap-2">
                    <Plus className="w-4 h-4" />
                    添加数据源
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[425px]">
                  <DialogHeader>
                    <DialogTitle>添加新数据源</DialogTitle>
                  </DialogHeader>
                  <div className="grid gap-4 py-4">
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="name" className="text-right">
                        名称
                      </Label>
                      <Input
                        id="name"
                        value={newDataSource.name}
                        onChange={(e) => setNewDataSource({ ...newDataSource, name: e.target.value })}
                        className="col-span-3"
                      />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="description" className="text-right">
                        描述
                      </Label>
                      <Input
                        id="description"
                        value={newDataSource.description}
                        onChange={(e) => setNewDataSource({ ...newDataSource, description: e.target.value })}
                        className="col-span-3"
                      />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="type" className="text-right">
                        类型
                      </Label>
                      <Select
                        value={newDataSource.type}
                        onValueChange={(value) => setNewDataSource({ ...newDataSource, type: value })}
                      >
                        <SelectTrigger className="col-span-3">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="MySQL">MySQL</SelectItem>
                          <SelectItem value="PostgreSQL">PostgreSQL</SelectItem>
                          <SelectItem value="MongoDB">MongoDB</SelectItem>
                          <SelectItem value="Redis">Redis</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="host" className="text-right">
                        主机
                      </Label>
                      <Input
                        id="host"
                        value={newDataSource.host}
                        onChange={(e) => setNewDataSource({ ...newDataSource, host: e.target.value })}
                        className="col-span-3"
                        placeholder="localhost"
                      />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="port" className="text-right">
                        端口
                      </Label>
                      <Input
                        id="port"
                        value={newDataSource.port}
                        onChange={(e) => setNewDataSource({ ...newDataSource, port: e.target.value })}
                        className="col-span-3"
                        placeholder="3306"
                      />
                    </div>
                  </div>
                  <div className="flex justify-end gap-2">
                    <Button variant="outline" onClick={() => setShowAddDialog(false)}>
                      取消
                    </Button>
                    <Button onClick={handleAddDataSource} disabled={!newDataSource.name || !newDataSource.type}>
                      添加
                    </Button>
                  </div>
                </DialogContent>
              </Dialog>
            ) : (
              <Button className="flex items-center gap-2" onClick={() => handleRetrain("all")}>
                <RefreshCw className="w-4 h-4" />
                重新训练模型
              </Button>
            )}
          </div>

          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="datasource" className="flex items-center gap-2">
                <Database className="w-4 h-4" />
                数据源管理
              </TabsTrigger>
              <TabsTrigger value="aimodel" className="flex items-center gap-2">
                <Brain className="w-4 h-4" />
                AI模型
              </TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
      </div>

      <div className="container mx-auto px-4 py-6">
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsContent value="datasource" className="space-y-4">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-xl font-semibold">数据源管理</h2>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {dataSources.map((source) => (
                <Card key={source.id} className="bg-white">
                  <CardHeader className="pb-4">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <CardTitle className="text-lg font-semibold mb-2">{source.name}</CardTitle>
                        <p className="text-gray-600 text-sm mb-3">{source.description}</p>
                        <div className="space-y-1 text-sm text-gray-500">
                          <div>
                            类型：<span className="font-medium">{source.type}</span>
                          </div>
                          <div>
                            记录数：<span className="font-medium">{source.records}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        {getStatusBadge(syncing === source.id ? "syncing" : source.status)}
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <div className="space-y-3">
                      <div className="text-sm text-gray-500">最后同步：{source.lastSync}</div>
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleSync(source.id)}
                          disabled={syncing === source.id}
                          className="flex items-center gap-2 flex-1"
                        >
                          <RefreshCw className={`w-4 h-4 ${syncing === source.id ? "animate-spin" : ""}`} />
                          {syncing === source.id ? "同步中" : "同步数据"}
                        </Button>
                        <Button variant="ghost" size="sm">
                          <Settings className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="aimodel" className="space-y-4">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-xl font-semibold">AI模型管理</h2>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {aiModels.map((model) => (
                <Card key={model.id} className="bg-white">
                  <CardHeader className="pb-4">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <CardTitle className="text-lg font-semibold mb-2">{model.name}</CardTitle>
                        <p className="text-gray-600 text-sm mb-3">{model.type} 模型</p>

                        <div className="mb-3">
                          <div className="flex justify-between text-sm mb-1">
                            <span>准确率</span>
                            <span className="font-medium">{model.accuracy}</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div className="bg-gray-900 h-2 rounded-full" style={{ width: model.accuracy }}></div>
                          </div>
                        </div>

                        <div className="space-y-1 text-sm text-gray-500">
                          <div>
                            算法：<span className="font-medium">{model.algorithm}</span>
                          </div>
                          <div>
                            特征数：<span className="font-medium">{model.features}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        {getModelStatusBadge(training === model.id ? "training" : model.status)}
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <div className="space-y-3">
                      <div className="text-sm text-gray-500">最后训练：{model.lastTrained}</div>
                      <div className="flex items-center gap-2">
                        {model.status === "ready" ? (
                          <Button variant="outline" size="sm" className="flex items-center gap-2 flex-1 bg-transparent">
                            <Play className="w-4 h-4" />
                            预测
                          </Button>
                        ) : model.status === "training" ? (
                          <Button
                            variant="outline"
                            size="sm"
                            disabled
                            className="flex items-center gap-2 flex-1 bg-transparent"
                          >
                            <RefreshCw className="w-4 h-4 animate-spin" />
                            训练中
                          </Button>
                        ) : (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleRetrain(model.id)}
                            disabled={training === model.id}
                            className="flex items-center gap-2 flex-1"
                          >
                            <RefreshCw className={`w-4 h-4 ${training === model.id ? "animate-spin" : ""}`} />
                            重新训练
                          </Button>
                        )}
                        <Button variant="ghost" size="sm">
                          <Settings className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </div>

      <BottomTabs />
    </div>
  )
}