"use client"

import { useState } from "react"
import { Database, Plus, Settings, Play, Pause, RotateCcw, Brain, Zap, CheckCircle, AlertCircle } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
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 { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"

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

interface AIModel {
  id: string
  name: string
  type: string
  status: "training" | "ready" | "error"
  accuracy: number
  lastTrained: string
  parameters: Record<string, any>
}

export default function DataPlatformPage() {
  const [dataSources, setDataSources] = useState<DataSource[]>([
    {
      id: "ds_001",
      name: "微信用户数据库",
      type: "MySQL",
      status: "connected",
      lastSync: "2024-01-15T10:30:00Z",
      recordCount: 2500000000,
      description: "存储微信用户基础信息和行为数据",
    },
    {
      id: "ds_002",
      name: "流量关键词库",
      type: "PostgreSQL",
      status: "connected",
      lastSync: "2024-01-15T09:45:00Z",
      recordCount: 150000,
      description: "搜索引擎关键词和流量数据",
    },
    {
      id: "ds_003",
      name: "用户行为日志",
      type: "MongoDB",
      status: "syncing",
      lastSync: "2024-01-15T11:00:00Z",
      recordCount: 1500000000,
      description: "用户操作行为和交互记录",
    },
  ])

  const [aiModels, setAiModels] = useState<AIModel[]>([
    {
      id: "model_001",
      name: "用户价值预测模型",
      type: "Classification",
      status: "ready",
      accuracy: 0.92,
      lastTrained: "2024-01-14T15:30:00Z",
      parameters: {
        algorithm: "RandomForest",
        features: 25,
        epochs: 100,
        learningRate: 0.01,
      },
    },
    {
      id: "model_002",
      name: "流量趋势分析模型",
      type: "Regression",
      status: "training",
      accuracy: 0.87,
      lastTrained: "2024-01-15T08:00:00Z",
      parameters: {
        algorithm: "LSTM",
        features: 15,
        epochs: 200,
        learningRate: 0.001,
      },
    },
    {
      id: "model_003",
      name: "用户聚类模型",
      type: "Clustering",
      status: "ready",
      accuracy: 0.89,
      lastTrained: "2024-01-13T12:00:00Z",
      parameters: {
        algorithm: "KMeans",
        clusters: 8,
        features: 20,
        iterations: 300,
      },
    },
  ])

  const [isAddingDataSource, setIsAddingDataSource] = useState(false)
  const [isTrainingModel, setIsTrainingModel] = useState(false)
  const [newDataSource, setNewDataSource] = useState({
    name: "",
    type: "MySQL",
    host: "",
    port: "",
    database: "",
    username: "",
    password: "",
    description: "",
  })

  const [modelTrainingConfig, setModelTrainingConfig] = useState({
    modelId: "",
    algorithm: "RandomForest",
    features: 25,
    epochs: 100,
    learningRate: 0.01,
    validationSplit: 0.2,
    autoTune: true,
  })

  // 添加数据源
  const handleAddDataSource = async () => {
    try {
      const newSource: DataSource = {
        id: `ds_${Date.now()}`,
        name: newDataSource.name,
        type: newDataSource.type,
        status: "connected",
        lastSync: new Date().toISOString(),
        recordCount: 0,
        description: newDataSource.description,
      }

      setDataSources((prev) => [...prev, newSource])
      setIsAddingDataSource(false)
      setNewDataSource({
        name: "",
        type: "MySQL",
        host: "",
        port: "",
        database: "",
        username: "",
        password: "",
        description: "",
      })

      // 模拟数据导入
      setTimeout(() => {
        setDataSources((prev) =>
          prev.map((ds) =>
            ds.id === newSource.id
              ? { ...ds, recordCount: Math.floor(Math.random() * 1000000) + 10000, status: "connected" as const }
              : ds,
          ),
        )
      }, 2000)
    } catch (error) {
      console.error("添加数据源失败:", error)
    }
  }

  // 同步数据源
  const handleSyncDataSource = (id: string) => {
    setDataSources((prev) =>
      prev.map((ds) => (ds.id === id ? { ...ds, status: "syncing" as const, lastSync: new Date().toISOString() } : ds)),
    )

    // 模拟同步完成
    setTimeout(() => {
      setDataSources((prev) =>
        prev.map((ds) =>
          ds.id === id
            ? {
                ...ds,
                status: "connected" as const,
                recordCount: ds.recordCount + Math.floor(Math.random() * 10000),
                lastSync: new Date().toISOString(),
              }
            : ds,
        ),
      )
    }, 3000)
  }

  // 训练AI模型
  const handleTrainModel = async () => {
    if (!modelTrainingConfig.modelId) return

    setIsTrainingModel(true)

    // 更新模型状态为训练中
    setAiModels((prev) =>
      prev.map((model) =>
        model.id === modelTrainingConfig.modelId ? { ...model, status: "training" as const } : model,
      ),
    )

    // 模拟训练过程
    setTimeout(() => {
      setAiModels((prev) =>
        prev.map((model) =>
          model.id === modelTrainingConfig.modelId
            ? {
                ...model,
                status: "ready" as const,
                accuracy: Math.random() * 0.1 + 0.85,
                lastTrained: new Date().toISOString(),
                parameters: {
                  algorithm: modelTrainingConfig.algorithm,
                  features: modelTrainingConfig.features,
                  epochs: modelTrainingConfig.epochs,
                  learningRate: modelTrainingConfig.learningRate,
                },
              }
            : model,
        ),
      )
      setIsTrainingModel(false)
    }, 5000)
  }

  // 格式化数字
  const formatNumber = (num: number): string => {
    if (num >= 1000000000) {
      return `${(num / 1000000000).toFixed(1)}B`
    }
    if (num >= 1000000) {
      return `${(num / 1000000).toFixed(1)}M`
    }
    if (num >= 1000) {
      return `${(num / 1000).toFixed(1)}K`
    }
    return num.toString()
  }

  // 获取状态颜色
  const getStatusColor = (status: string) => {
    switch (status) {
      case "connected":
      case "ready":
        return "text-green-600 bg-green-50 border-green-200"
      case "syncing":
      case "training":
        return "text-yellow-600 bg-yellow-50 border-yellow-200"
      case "disconnected":
      case "error":
        return "text-red-600 bg-red-50 border-red-200"
      default:
        return "text-gray-600 bg-gray-50 border-gray-200"
    }
  }

  // 获取状态图标
  const getStatusIcon = (status: string) => {
    switch (status) {
      case "connected":
      case "ready":
        return <CheckCircle className="w-4 h-4" />
      case "syncing":
      case "training":
        return <Zap className="w-4 h-4 animate-pulse" />
      case "disconnected":
      case "error":
        return <AlertCircle className="w-4 h-4" />
      default:
        return <Database className="w-4 h-4" />
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
      <div className="container mx-auto px-4 py-8">
        {/* 页面标题 */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">数据中台</h1>
          <p className="text-gray-600">数据源管理与AI模型训练平台</p>
        </div>

        <Tabs defaultValue="datasources" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="datasources" className="flex items-center gap-2">
              <Database className="w-4 h-4" />
              数据源管理
            </TabsTrigger>
            <TabsTrigger value="aimodels" className="flex items-center gap-2">
              <Brain className="w-4 h-4" />
              AI模型
            </TabsTrigger>
          </TabsList>

          {/* 数据源管理 */}
          <TabsContent value="datasources" className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-semibold">数据源管理</h2>
              <Dialog open={isAddingDataSource} onOpenChange={setIsAddingDataSource}>
                <DialogTrigger asChild>
                  <Button className="flex items-center gap-2">
                    <Plus className="w-4 h-4" />
                    添加数据源
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-2xl">
                  <DialogHeader>
                    <DialogTitle>添加新数据源</DialogTitle>
                  </DialogHeader>
                  <div className="grid grid-cols-2 gap-4 py-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">数据源名称</Label>
                      <Input
                        id="name"
                        value={newDataSource.name}
                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, name: e.target.value }))}
                        placeholder="输入数据源名称"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="type">数据库类型</Label>
                      <Select
                        value={newDataSource.type}
                        onValueChange={(value) => setNewDataSource((prev) => ({ ...prev, type: value }))}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="MySQL">MySQL</SelectItem>
                          <SelectItem value="PostgreSQL">PostgreSQL</SelectItem>
                          <SelectItem value="MongoDB">MongoDB</SelectItem>
                          <SelectItem value="Redis">Redis</SelectItem>
                          <SelectItem value="ClickHouse">ClickHouse</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="host">主机地址</Label>
                      <Input
                        id="host"
                        value={newDataSource.host}
                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, host: e.target.value }))}
                        placeholder="localhost"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="port">端口</Label>
                      <Input
                        id="port"
                        value={newDataSource.port}
                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, port: e.target.value }))}
                        placeholder="3306"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="database">数据库名</Label>
                      <Input
                        id="database"
                        value={newDataSource.database}
                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, database: e.target.value }))}
                        placeholder="database_name"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="username">用户名</Label>
                      <Input
                        id="username"
                        value={newDataSource.username}
                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, username: e.target.value }))}
                        placeholder="username"
                      />
                    </div>
                    <div className="col-span-2 space-y-2">
                      <Label htmlFor="password">密码</Label>
                      <Input
                        id="password"
                        type="password"
                        value={newDataSource.password}
                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, password: e.target.value }))}
                        placeholder="password"
                      />
                    </div>
                    <div className="col-span-2 space-y-2">
                      <Label htmlFor="description">描述</Label>
                      <Textarea
                        id="description"
                        value={newDataSource.description}
                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, description: e.target.value }))}
                        placeholder="数据源描述信息"
                        rows={3}
                      />
                    </div>
                  </div>
                  <div className="flex justify-end gap-2">
                    <Button variant="outline" onClick={() => setIsAddingDataSource(false)}>
                      取消
                    </Button>
                    <Button onClick={handleAddDataSource}>连接并导入数据</Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
              {dataSources.map((source) => (
                <Card key={source.id} className="border-2 hover:shadow-lg transition-all duration-200">
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-lg">{source.name}</CardTitle>
                      <Badge className={`${getStatusColor(source.status)} border`}>
                        {getStatusIcon(source.status)}
                        <span className="ml-1 capitalize">{source.status}</span>
                      </Badge>
                    </div>
                    <p className="text-sm text-gray-600">{source.description}</p>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div>
                        <span className="text-gray-500">类型:</span>
                        <span className="ml-2 font-medium">{source.type}</span>
                      </div>
                      <div>
                        <span className="text-gray-500">记录数:</span>
                        <span className="ml-2 font-medium">{formatNumber(source.recordCount)}</span>
                      </div>
                    </div>

                    <div className="text-sm">
                      <span className="text-gray-500">最后同步:</span>
                      <span className="ml-2">{new Date(source.lastSync).toLocaleString()}</span>
                    </div>

                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleSyncDataSource(source.id)}
                        disabled={source.status === "syncing"}
                        className="flex-1"
                      >
                        {source.status === "syncing" ? (
                          <>
                            <RotateCcw className="w-3 h-3 mr-1 animate-spin" />
                            同步中
                          </>
                        ) : (
                          <>
                            <RotateCcw className="w-3 h-3 mr-1" />
                            同步数据
                          </>
                        )}
                      </Button>
                      <Button size="sm" variant="outline">
                        <Settings className="w-3 h-3" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* AI模型管理 */}
          <TabsContent value="aimodels" className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-semibold">AI模型管理</h2>
              <Dialog open={isTrainingModel} onOpenChange={setIsTrainingModel}>
                <DialogTrigger asChild>
                  <Button className="flex items-center gap-2">
                    <Brain className="w-4 h-4" />
                    重新训练模型
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-2xl">
                  <DialogHeader>
                    <DialogTitle>模型训练配置</DialogTitle>
                  </DialogHeader>
                  <div className="grid grid-cols-2 gap-4 py-4">
                    <div className="col-span-2 space-y-2">
                      <Label htmlFor="model">选择模型</Label>
                      <Select
                        value={modelTrainingConfig.modelId}
                        onValueChange={(value) => setModelTrainingConfig((prev) => ({ ...prev, modelId: value }))}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="选择要训练的模型" />
                        </SelectTrigger>
                        <SelectContent>
                          {aiModels.map((model) => (
                            <SelectItem key={model.id} value={model.id}>
                              {model.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="algorithm">算法</Label>
                      <Select
                        value={modelTrainingConfig.algorithm}
                        onValueChange={(value) => setModelTrainingConfig((prev) => ({ ...prev, algorithm: value }))}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="RandomForest">Random Forest</SelectItem>
                          <SelectItem value="XGBoost">XGBoost</SelectItem>
                          <SelectItem value="LSTM">LSTM</SelectItem>
                          <SelectItem value="KMeans">K-Means</SelectItem>
                          <SelectItem value="SVM">SVM</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="features">特征数量</Label>
                      <Input
                        id="features"
                        type="number"
                        value={modelTrainingConfig.features}
                        onChange={(e) =>
                          setModelTrainingConfig((prev) => ({ ...prev, features: Number.parseInt(e.target.value) }))
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="epochs">训练轮数</Label>
                      <Input
                        id="epochs"
                        type="number"
                        value={modelTrainingConfig.epochs}
                        onChange={(e) =>
                          setModelTrainingConfig((prev) => ({ ...prev, epochs: Number.parseInt(e.target.value) }))
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="learningRate">学习率</Label>
                      <Input
                        id="learningRate"
                        type="number"
                        step="0.001"
                        value={modelTrainingConfig.learningRate}
                        onChange={(e) =>
                          setModelTrainingConfig((prev) => ({
                            ...prev,
                            learningRate: Number.parseFloat(e.target.value),
                          }))
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="validationSplit">验证集比例</Label>
                      <Input
                        id="validationSplit"
                        type="number"
                        step="0.1"
                        min="0.1"
                        max="0.5"
                        value={modelTrainingConfig.validationSplit}
                        onChange={(e) =>
                          setModelTrainingConfig((prev) => ({
                            ...prev,
                            validationSplit: Number.parseFloat(e.target.value),
                          }))
                        }
                      />
                    </div>

                    <div className="col-span-2 flex items-center space-x-2">
                      <Switch
                        id="autoTune"
                        checked={modelTrainingConfig.autoTune}
                        onCheckedChange={(checked) =>
                          setModelTrainingConfig((prev) => ({ ...prev, autoTune: checked }))
                        }
                      />
                      <Label htmlFor="autoTune">自动调参</Label>
                    </div>
                  </div>
                  <div className="flex justify-end gap-2">
                    <Button variant="outline" onClick={() => setIsTrainingModel(false)}>
                      取消
                    </Button>
                    <Button onClick={handleTrainModel} disabled={!modelTrainingConfig.modelId}>
                      开始训练
                    </Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
              {aiModels.map((model) => (
                <Card key={model.id} className="border-2 hover:shadow-lg transition-all duration-200">
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-lg">{model.name}</CardTitle>
                      <Badge className={`${getStatusColor(model.status)} border`}>
                        {getStatusIcon(model.status)}
                        <span className="ml-1 capitalize">{model.status}</span>
                      </Badge>
                    </div>
                    <p className="text-sm text-gray-600">{model.type} 模型</p>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span className="text-gray-500">准确率</span>
                        <span className="font-medium">{(model.accuracy * 100).toFixed(1)}%</span>
                      </div>
                      <Progress value={model.accuracy * 100} className="h-2" />
                    </div>

                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div>
                        <span className="text-gray-500">算法:</span>
                        <span className="ml-2 font-medium">{model.parameters.algorithm}</span>
                      </div>
                      <div>
                        <span className="text-gray-500">特征数:</span>
                        <span className="ml-2 font-medium">{model.parameters.features}</span>
                      </div>
                    </div>

                    <div className="text-sm">
                      <span className="text-gray-500">最后训练:</span>
                      <span className="ml-2">{new Date(model.lastTrained).toLocaleString()}</span>
                    </div>

                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        disabled={model.status === "training"}
                        className="flex-1 bg-transparent"
                      >
                        {model.status === "training" ? (
                          <>
                            <Pause className="w-3 h-3 mr-1" />
                            训练中
                          </>
                        ) : (
                          <>
                            <Play className="w-3 h-3 mr-1" />
                            预测
                          </>
                        )}
                      </Button>
                      <Button size="sm" variant="outline">
                        <Settings className="w-3 h-3" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}