"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Database, Server, Link, RefreshCw, Download, Mail, FileText } from "lucide-react"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { DataSourceList } from "@/components/data-integration/data-source-list"
import { DataFieldMapping } from "@/components/data-integration/data-field-mapping"
import { DataCollectionSettings } from "@/components/data-integration/data-collection-settings"
import { ApiDocumentation } from "@/components/data-integration/api-documentation"

interface DataSource {
  id: string
  name: string
  type: "mysql" | "postgresql" | "mongodb" | "oracle" | "sqlserver" | "api" | "file"
  status: "connected" | "disconnected" | "error"
  lastSync: string
  tables: number
  records: number
}

export default function DataPlatformPage() {
  const [activeTab, setActiveTab] = useState("data-integration")
  const [selectedUserSegment, setSelectedUserSegment] = useState("")
  const [analysisPrompt, setAnalysisPrompt] = useState("")
  const [selectedEmail, setSelectedEmail] = useState("")
  const [isAddingDataSource, setIsAddingDataSource] = useState(false)

  // 数据源列表
  const dataSources: DataSource[] = [
    {
      id: "1",
      name: "用户数据库",
      type: "mysql",
      status: "connected",
      lastSync: "2023-07-21 15:30",
      tables: 12,
      records: 1250000,
    },
    {
      id: "2",
      name: "交易系统",
      type: "postgresql",
      status: "connected",
      lastSync: "2023-07-21 14:45",
      tables: 8,
      records: 3450000,
    },
    {
      id: "3",
      name: "用户行为数据",
      type: "mongodb",
      status: "connected",
      lastSync: "2023-07-21 13:20",
      tables: 5,
      records: 7800000,
    },
    {
      id: "4",
      name: "CRM系统",
      type: "oracle",
      status: "error",
      lastSync: "2023-07-20 09:15",
      tables: 15,
      records: 2100000,
    },
  ]

  // 用户画像分群列表
  const userSegments = [
    { id: "high-value", name: "高价值用户", count: 12500 },
    { id: "new-users", name: "新注册用户", count: 45600 },
    { id: "inactive", name: "非活跃用户", count: 28900 },
    { id: "potential", name: "潜在高转化用户", count: 18700 },
    { id: "loyal", name: "忠诚用户", count: 9800 },
    { id: "risk", name: "流失风险用户", count: 15400 },
  ]

  // 邮箱列表
  const emailList = [
    { id: "1", email: "marketing@company.com", name: "营销团队" },
    { id: "2", email: "sales@company.com", name: "销售团队" },
    { id: "3", email: "product@company.com", name: "产品团队" },
    { id: "4", email: "executive@company.com", name: "管理层" },
  ]

  const getDataSourceIcon = (type: DataSource["type"]) => {
    switch (type) {
      case "mysql":
      case "postgresql":
      case "oracle":
      case "sqlserver":
        return <Database className="h-8 w-8 text-blue-500" />
      case "mongodb":
        return <Server className="h-8 w-8 text-green-500" />
      case "api":
      case "file":
        return <Link className="h-8 w-8 text-purple-500" />
    }
  }

  const getDataSourceTypeName = (type: DataSource["type"]) => {
    switch (type) {
      case "mysql":
        return "MySQL"
      case "postgresql":
        return "PostgreSQL"
      case "mongodb":
        return "MongoDB"
      case "oracle":
        return "Oracle"
      case "sqlserver":
        return "SQL Server"
      case "api":
        return "API"
      case "file":
        return "文件"
    }
  }

  const getStatusBadge = (status: DataSource["status"]) => {
    switch (status) {
      case "connected":
        return <Badge className="bg-green-100 text-green-800">已连接</Badge>
      case "disconnected":
        return <Badge className="bg-gray-100 text-gray-800">未连接</Badge>
      case "error":
        return <Badge className="bg-red-100 text-red-800">错误</Badge>
    }
  }

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold">数据中台</h1>
          <p className="text-muted-foreground mt-1">数据集成、API管理与数据采集</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="icon">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出数据
          </Button>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid grid-cols-4 w-full max-w-2xl">
          <TabsTrigger value="data-integration">数据集成</TabsTrigger>
          <TabsTrigger value="data-collection">数据采集</TabsTrigger>
          <TabsTrigger value="data-mapping">数据映射</TabsTrigger>
          <TabsTrigger value="api-management">API管理</TabsTrigger>
        </TabsList>

        {/* 数据集成标签页 */}
        <TabsContent value="data-integration" className="space-y-4">
          <Card className="border shadow-md">
            <CardHeader>
              <CardTitle>数据源管理</CardTitle>
              <CardDescription>管理和查看已连接的数据源</CardDescription>
            </CardHeader>
            <CardContent>
              <DataSourceList />
            </CardContent>
          </Card>

          <Card className="border shadow-md">
            <CardHeader>
              <CardTitle>数据整合概览</CardTitle>
              <CardDescription>基于ID、手机号、身份证号和IMEI设备号的数据整合</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <Card className="border shadow-sm">
                    <CardContent className="p-4 flex flex-col items-center justify-center">
                      <div className="bg-blue-100 p-3 rounded-full mb-2">
                        <Database className="h-6 w-6 text-blue-600" />
                      </div>
                      <h3 className="font-medium text-center">用户ID</h3>
                      <p className="text-sm text-muted-foreground text-center">1,245,678 条记录</p>
                    </CardContent>
                  </Card>
                  <Card className="border shadow-sm">
                    <CardContent className="p-4 flex flex-col items-center justify-center">
                      <div className="bg-green-100 p-3 rounded-full mb-2">
                        <FileText className="h-6 w-6 text-green-600" />
                      </div>
                      <h3 className="font-medium text-center">手机号</h3>
                      <p className="text-sm text-muted-foreground text-center">987,543 条记录</p>
                    </CardContent>
                  </Card>
                  <Card className="border shadow-sm">
                    <CardContent className="p-4 flex flex-col items-center justify-center">
                      <div className="bg-purple-100 p-3 rounded-full mb-2">
                        <FileText className="h-6 w-6 text-purple-600" />
                      </div>
                      <h3 className="font-medium text-center">身份证号</h3>
                      <p className="text-sm text-muted-foreground text-center">654,321 条记录</p>
                    </CardContent>
                  </Card>
                  <Card className="border shadow-sm">
                    <CardContent className="p-4 flex flex-col items-center justify-center">
                      <div className="bg-orange-100 p-3 rounded-full mb-2">
                        <Server className="h-6 w-6 text-orange-600" />
                      </div>
                      <h3 className="font-medium text-center">IMEI设备号</h3>
                      <p className="text-sm text-muted-foreground text-center">789,456 条记录</p>
                    </CardContent>
                  </Card>
                </div>

                <div className="flex justify-between items-center">
                  <div>
                    <h3 className="font-medium">数据整合状态</h3>
                    <p className="text-sm text-muted-foreground">最后更新: 2023-07-21 16:30</p>
                  </div>
                  <Button>
                    <RefreshCw className="mr-2 h-4 w-4" />
                    刷新数据
                  </Button>
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">用户数据整合率</span>
                    <span className="text-green-600 font-medium">87%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "87%" }}></div>
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">数据质量评分</span>
                    <span className="text-blue-600 font-medium">92/100</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: "92%" }}></div>
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">数据重复率</span>
                    <span className="text-yellow-600 font-medium">5.2%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: "5.2%" }}></div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 数据采集标签页 */}
        <TabsContent value="data-collection" className="space-y-4">
          <DataCollectionSettings />
        </TabsContent>

        {/* 数据映射标签页 */}
        <TabsContent value="data-mapping" className="space-y-4">
          <DataFieldMapping />
        </TabsContent>

        {/* API管理标签页 */}
        <TabsContent value="api-management" className="space-y-4">
          <ApiDocumentation />
        </TabsContent>
      </Tabs>

      {/* 添加数据源对话框 */}
      <Dialog open={isAddingDataSource} onOpenChange={setIsAddingDataSource}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>添加新数据源</DialogTitle>
            <DialogDescription>选择数据源类型并填写连接信息</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="datasource-type" className="text-right">
                数据源类型
              </Label>
              <Select>
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="选择数据源类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="mysql">MySQL</SelectItem>
                  <SelectItem value="postgresql">PostgreSQL</SelectItem>
                  <SelectItem value="mongodb">MongoDB</SelectItem>
                  <SelectItem value="oracle">Oracle</SelectItem>
                  <SelectItem value="sqlserver">SQL Server</SelectItem>
                  <SelectItem value="api">API</SelectItem>
                  <SelectItem value="file">文件</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="name" className="text-right">
                数据源名称
              </Label>
              <Input id="name" className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="host" className="text-right">
                主机地址
              </Label>
              <Input id="host" className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="port" className="text-right">
                端口
              </Label>
              <Input id="port" className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="username" className="text-right">
                用户名
              </Label>
              <Input id="username" className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="password" className="text-right">
                密码
              </Label>
              <Input id="password" type="password" className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="database" className="text-right">
                数据库名
              </Label>
              <Input id="database" className="col-span-3" />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddingDataSource(false)}>
              取消
            </Button>
            <Button onClick={() => setIsAddingDataSource(false)}>测试连接</Button>
            <Button onClick={() => setIsAddingDataSource(false)}>保存</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* AI数据分析对话框 */}
      <Dialog>
        <DialogTrigger asChild>
          <Button className="hidden">打开AI数据分析</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>AI数据分析</DialogTitle>
            <DialogDescription>选择用户分群并输入分析需求</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="space-y-2">
              <Label>选择用户分群</Label>
              <Select value={selectedUserSegment} onValueChange={setSelectedUserSegment}>
                <SelectTrigger>
                  <SelectValue placeholder="选择用户分群" />
                </SelectTrigger>
                <SelectContent>
                  {userSegments.map((segment) => (
                    <SelectItem key={segment.id} value={segment.id}>
                      {segment.name} ({segment.count.toLocaleString()}人)
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>分析需求</Label>
              <Textarea
                placeholder="例如：分析该用户群体的消费习惯和偏好"
                value={analysisPrompt}
                onChange={(e) => setAnalysisPrompt(e.target.value)}
                rows={3}
              />
            </div>
            <div className="space-y-2">
              <Label>发送分析报告至</Label>
              <Select value={selectedEmail} onValueChange={setSelectedEmail}>
                <SelectTrigger>
                  <SelectValue placeholder="选择接收邮箱" />
                </SelectTrigger>
                <SelectContent>
                  {emailList.map((item) => (
                    <SelectItem key={item.id} value={item.id}>
                      {item.name} ({item.email})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="schedule" />
              <Label htmlFor="schedule">定期发送分析报告</Label>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline">取消</Button>
            <Button>
              <Mail className="mr-2 h-4 w-4" />
              生成分析并发送
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}