users/app/data-integration/page.tsx

"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Database, Server, Link, Plus, FileText, RefreshCw } from "lucide-react"

export default function DataIntegrationPage() {
  const [activeTab, setActiveTab] = useState("data-sources")
  const [isDialogOpen, setIsDialogOpen] = useState(false)

  return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">数据中台</h1>
          <p className="text-muted-foreground">管理数据源和API接口</p>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full max-w-md grid-cols-2">
          <TabsTrigger value="data-sources">数据集成</TabsTrigger>
          <TabsTrigger value="api-management">API管理</TabsTrigger>
        </TabsList>

        <TabsContent value="data-sources" className="space-y-6">
          <DataSourcesTab setIsDialogOpen={setIsDialogOpen} />
          <div className="mt-4">
            <Button variant="outline" asChild>
              <a href="/database-structure">
                <Database className="mr-2 h-4 w-4" />
                查看数据库结构
              </a>
            </Button>
          </div>
        </TabsContent>

        <TabsContent value="api-management" className="space-y-6">
          <ApiManagementTab />
        </TabsContent>
      </Tabs>

      <AddDataSourceDialog isOpen={isDialogOpen} setIsOpen={setIsDialogOpen} />
    </div>
  )
}

// 数据源管理标签页
function DataSourcesTab({ setIsDialogOpen }: { setIsDialogOpen: (open: boolean) => void }) {
  // 模拟数据源列表
  const dataSources = [
    {
      id: "1",
      name: "用户数据库",
      type: "MySQL",
      host: "db.example.com",
      status: "connected",
      lastSync: "2023-07-20 15:30",
      tables: 24,
      records: 156789,
    },
    {
      id: "2",
      name: "订单系统",
      type: "PostgreSQL",
      host: "orders.example.com",
      status: "connected",
      lastSync: "2023-07-19 12:45",
      tables: 18,
      records: 89456,
    },
    {
      id: "3",
      name: "内容库",
      type: "MongoDB",
      host: "content.example.com",
      status: "error",
      lastSync: "2023-07-15 09:20",
      tables: 12,
      records: 45678,
    },
    {
      id: "4",
      name: "用户行为分析",
      type: "ClickHouse",
      host: "analytics.example.com",
      status: "connected",
      lastSync: "2023-07-20 10:15",
      tables: 8,
      records: 2345678,
    },
    {
      id: "5",
      name: "CRM系统",
      type: "Oracle",
      host: "crm.example.com",
      status: "pending",
      lastSync: "等待连接",
      tables: 0,
      records: 0,
    },
  ]

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">数据源管理</h2>
        <Button onClick={() => setIsDialogOpen(true)}>
          <Plus className="mr-2 h-4 w-4" />
          添加数据源
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>已连接的数据源</CardTitle>
          <CardDescription>管理和监控所有数据源连接</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>数据源名称</TableHead>
                <TableHead>类型</TableHead>
                <TableHead>主机地址</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>最后同步</TableHead>
                <TableHead>表数量</TableHead>
                <TableHead>记录数</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {dataSources.map((source) => (
                <TableRow key={source.id}>
                  <TableCell>
                    <div className="flex items-center">
                      <Database className="h-4 w-4 mr-2 text-muted-foreground" />
                      <span className="font-medium">{source.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{source.type}</TableCell>
                  <TableCell>{source.host}</TableCell>
                  <TableCell>
                    <Badge
                      className={
                        source.status === "connected"
                          ? "bg-green-100 text-green-800"
                          : source.status === "error"
                            ? "bg-red-100 text-red-800"
                            : "bg-yellow-100 text-yellow-800"
                      }
                    >
                      {source.status === "connected" ? "已连接" : source.status === "error" ? "错误" : "等待中"}
                    </Badge>
                  </TableCell>
                  <TableCell>{source.lastSync}</TableCell>
                  <TableCell>{source.tables}</TableCell>
                  <TableCell>{source.records.toLocaleString()}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm">
                        <Link className="h-4 w-4 mr-1" />
                        查看
                      </Button>
                      <Button size="sm">
                        <RefreshCw className="h-4 w-4 mr-1" />
                        同步
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>数据源类型</CardTitle>
          <CardDescription>支持的数据库和数据源类型</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <Database className="h-8 w-8 mb-2 text-blue-500" />
              <span className="font-medium">MySQL</span>
              <span className="text-xs text-muted-foreground">关系型数据库</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <Database className="h-8 w-8 mb-2 text-blue-500" />
              <span className="font-medium">PostgreSQL</span>
              <span className="text-xs text-muted-foreground">关系型数据库</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <Database className="h-8 w-8 mb-2 text-green-500" />
              <span className="font-medium">MongoDB</span>
              <span className="text-xs text-muted-foreground">文档型数据库</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <Database className="h-8 w-8 mb-2 text-yellow-500" />
              <span className="font-medium">ClickHouse</span>
              <span className="text-xs text-muted-foreground">列式数据库</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <Database className="h-8 w-8 mb-2 text-red-500" />
              <span className="font-medium">Oracle</span>
              <span className="text-xs text-muted-foreground">关系型数据库</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <Database className="h-8 w-8 mb-2 text-purple-500" />
              <span className="font-medium">SQL Server</span>
              <span className="text-xs text-muted-foreground">关系型数据库</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <Server className="h-8 w-8 mb-2 text-gray-500" />
              <span className="font-medium">Redis</span>
              <span className="text-xs text-muted-foreground">键值存储</span>
            </div>
            <div className="flex flex-col items-center p-4 border rounded-lg">
              <FileText className="h-8 w-8 mb-2 text-gray-500" />
              <span className="font-medium">CSV/Excel</span>
              <span className="text-xs text-muted-foreground">文件导入</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

// API管理标签页
function ApiManagementTab() {
  // 模拟API接口数据
  const apiEndpoints = [
    {
      id: "1",
      name: "用户数据API",
      endpoint: "/api/users",
      method: "GET",
      category: "用户画像",
      status: "active",
      calls: 12567,
      lastCalled: "2023-07-20 16:45",
    },
    {
      id: "2",
      name: "用户标签API",
      endpoint: "/api/users/tags",
      method: "GET",
      category: "用户画像",
      status: "active",
      calls: 8945,
      lastCalled: "2023-07-20 15:30",
    },
    {
      id: "3",
      name: "流量池数据API",
      endpoint: "/api/traffic-pools",
      method: "GET",
      category: "流量池",
      status: "active",
      calls: 5678,
      lastCalled: "2023-07-20 14:20",
    },
    {
      id: "4",
      name: "AI分析API",
      endpoint: "/api/ai/analyze",
      method: "POST",
      category: "AI分析",
      status: "active",
      calls: 3456,
      lastCalled: "2023-07-20 13:15",
    },
    {
      id: "5",
      name: "数据同步API",
      endpoint: "/api/sync",
      method: "POST",
      category: "数据集成",
      status: "maintenance",
      calls: 2345,
      lastCalled: "2023-07-19 10:30",
    },
  ]

  // 模拟API密钥数据
  const apiKeys = [
    {
      id: "1",
      name: "Web应用",
      key: "sk_web_*************",
      created: "2023-05-15",
      lastUsed: "2023-07-20",
      status: "active",
    },
    {
      id: "2",
      name: "移动应用",
      key: "sk_mobile_*************",
      created: "2023-06-10",
      lastUsed: "2023-07-19",
      status: "active",
    },
    {
      id: "3",
      name: "第三方集成",
      key: "sk_partner_*************",
      created: "2023-04-20",
      lastUsed: "2023-07-18",
      status: "active",
    },
  ]

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">API接口管理</h2>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          创建新API
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>API接口列表</CardTitle>
          <CardDescription>所有可用的API接口</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>API名称</TableHead>
                <TableHead>接口地址</TableHead>
                <TableHead>方法</TableHead>
                <TableHead>分类</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>调用次数</TableHead>
                <TableHead>最后调用</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {apiEndpoints.map((api) => (
                <TableRow key={api.id}>
                  <TableCell className="font-medium">{api.name}</TableCell>
                  <TableCell>
                    <code className="bg-muted px-1 py-0.5 rounded text-sm">{api.endpoint}</code>
                  </TableCell>
                  <TableCell>
                    <Badge
                      className={
                        api.method === "GET"
                          ? "bg-blue-100 text-blue-800"
                          : api.method === "POST"
                            ? "bg-green-100 text-green-800"
                            : api.method === "PUT"
                              ? "bg-yellow-100 text-yellow-800"
                              : "bg-red-100 text-red-800"
                      }
                    >
                      {api.method}
                    </Badge>
                  </TableCell>
                  <TableCell>{api.category}</TableCell>
                  <TableCell>
                    <Badge
                      className={
                        api.status === "active" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                      }
                    >
                      {api.status === "active" ? "正常" : "维护中"}
                    </Badge>
                  </TableCell>
                  <TableCell>{api.calls.toLocaleString()}</TableCell>
                  <TableCell>{api.lastCalled}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm">
                        文档
                      </Button>
                      <Button size="sm">测试</Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>API密钥管理</CardTitle>
          <CardDescription>管理API访问密钥</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>应用名称</TableHead>
                <TableHead>密钥</TableHead>
                <TableHead>创建时间</TableHead>
                <TableHead>最后使用</TableHead>
                <TableHead>状态</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {apiKeys.map((key) => (
                <TableRow key={key.id}>
                  <TableCell className="font-medium">{key.name}</TableCell>
                  <TableCell>
                    <code className="bg-muted px-1 py-0.5 rounded text-sm">{key.key}</code>
                  </TableCell>
                  <TableCell>{key.created}</TableCell>
                  <TableCell>{key.lastUsed}</TableCell>
                  <TableCell>
                    <Badge className="bg-green-100 text-green-800">{key.status === "active" ? "有效" : "已禁用"}</Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="outline" size="sm">
                        重置
                      </Button>
                      <Button variant="outline" size="sm" className="text-red-500">
                        撤销
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>API使用统计</CardTitle>
          <CardDescription>API调用量和性能统计</CardDescription>
        </CardHeader>
        <CardContent className="h-80 flex items-center justify-center">
          <div className="text-center text-muted-foreground">
            <p>API调用统计图表</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

// 添加数据源对话框
function AddDataSourceDialog({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: (open: boolean) => void }) {
  const [dbType, setDbType] = useState("mysql")

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <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="db-type" className="text-right">
              数据库类型
            </Label>
            <Select value={dbType} onValueChange={setDbType} className="col-span-3">
              <SelectTrigger id="db-type">
                <SelectValue placeholder="选择数据库类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="mysql">MySQL</SelectItem>
                <SelectItem value="postgresql">PostgreSQL</SelectItem>
                <SelectItem value="mongodb">MongoDB</SelectItem>
                <SelectItem value="clickhouse">ClickHouse</SelectItem>
                <SelectItem value="oracle">Oracle</SelectItem>
                <SelectItem value="sqlserver">SQL Server</SelectItem>
                <SelectItem value="redis">Redis</SelectItem>
                <SelectItem value="file">CSV/Excel文件</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              数据源名称
            </Label>
            <Input id="name" placeholder="给数据源起个名字" 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" placeholder="例如: db.example.com" 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"
              placeholder={dbType === "mysql" ? "3306" : dbType === "postgresql" ? "5432" : "27017"}
              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" placeholder="数据库名称" 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" placeholder="数据库用户名" 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" placeholder="数据库密码" className="col-span-3" />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            取消
          </Button>
          <Button type="submit">测试连接</Button>
          <Button type="submit">保存</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}