"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 { Input } from "@/components/ui/input"
import {
  GitBranch,
  Search,
  ZoomIn,
  ZoomOut,
  Maximize2,
  Database,
  Table,
  ArrowRight,
  Filter,
  Download,
} from "lucide-react"

// 第二部分：数据接入 - 数据血缘
export default function DataLineagePage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedNode, setSelectedNode] = useState<string | null>(null)

  // 数据血缘节点
  const lineageNodes = [
    // 数据源层
    { id: "source-1", type: "source", name: "存客宝-MySQL", level: 0, x: 50, y: 100 },
    { id: "source-2", type: "source", name: "触客宝-MySQL", level: 0, x: 50, y: 200 },
    { id: "source-3", type: "source", name: "数智员工-API", level: 0, x: 50, y: 300 },
    // 原始表层
    { id: "raw-1", type: "table", name: "raw_users", level: 1, x: 250, y: 100 },
    { id: "raw-2", type: "table", name: "raw_transactions", level: 1, x: 250, y: 200 },
    { id: "raw-3", type: "table", name: "raw_behaviors", level: 1, x: 250, y: 300 },
    // 清洗层
    { id: "clean-1", type: "table", name: "clean_users", level: 2, x: 450, y: 150 },
    { id: "clean-2", type: "table", name: "clean_transactions", level: 2, x: 450, y: 250 },
    // 标签层
    { id: "tag-1", type: "table", name: "user_tags", level: 3, x: 650, y: 150 },
    { id: "tag-2", type: "table", name: "user_portraits", level: 3, x: 650, y: 250 },
    // 输出层
    { id: "output-1", type: "output", name: "流量包-高价值用户", level: 4, x: 850, y: 150 },
    { id: "output-2", type: "output", name: "API-用户画像", level: 4, x: 850, y: 250 },
  ]

  // 血缘关系
  const lineageEdges = [
    { from: "source-1", to: "raw-1" },
    { from: "source-1", to: "raw-2" },
    { from: "source-2", to: "raw-3" },
    { from: "source-3", to: "raw-1" },
    { from: "raw-1", to: "clean-1" },
    { from: "raw-2", to: "clean-2" },
    { from: "raw-3", to: "clean-1" },
    { from: "clean-1", to: "tag-1" },
    { from: "clean-2", to: "tag-1" },
    { from: "clean-1", to: "tag-2" },
    { from: "tag-1", to: "output-1" },
    { from: "tag-2", to: "output-2" },
  ]

  const getNodeColor = (type: string) => {
    switch (type) {
      case "source":
        return "bg-blue-100 border-blue-300 text-blue-700"
      case "table":
        return "bg-green-100 border-green-300 text-green-700"
      case "output":
        return "bg-purple-100 border-purple-300 text-purple-700"
      default:
        return "bg-gray-100 border-gray-300 text-gray-700"
    }
  }

  const getNodeIcon = (type: string) => {
    switch (type) {
      case "source":
        return <Database className="h-4 w-4" />
      case "table":
        return <Table className="h-4 w-4" />
      case "output":
        return <ArrowRight className="h-4 w-4" />
      default:
        return <GitBranch className="h-4 w-4" />
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20">
      <div className="p-6 space-y-6">
        {/* 顶部标题 */}
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">数据血缘</h1>
            <p className="text-sm text-gray-500 mt-1">可视化展示数据从源头到输出的完整流转路径</p>
          </div>
          <div className="flex items-center gap-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="搜索表名或数据源..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9 w-64 bg-white"
              />
            </div>
            <Button variant="outline">
              <Filter className="h-4 w-4 mr-2" />
              筛选
            </Button>
            <Button variant="outline">
              <Download className="h-4 w-4 mr-2" />
              导出
            </Button>
          </div>
        </div>

        {/* 图例 */}
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-blue-100 border border-blue-300" />
            <span className="text-sm text-gray-600">数据源</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-green-100 border border-green-300" />
            <span className="text-sm text-gray-600">数据表</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 rounded bg-purple-100 border border-purple-300" />
            <span className="text-sm text-gray-600">输出服务</span>
          </div>
        </div>

        {/* 血缘图 */}
        <Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-base font-semibold">血缘关系图</CardTitle>
              <div className="flex items-center gap-2">
                <Button variant="outline" size="icon">
                  <ZoomOut className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="icon">
                  <ZoomIn className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="icon">
                  <Maximize2 className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="relative h-[500px] bg-gray-50 rounded-lg overflow-hidden">
              {/* SVG连线 */}
              <svg className="absolute inset-0 w-full h-full pointer-events-none">
                {lineageEdges.map((edge, index) => {
                  const fromNode = lineageNodes.find((n) => n.id === edge.from)
                  const toNode = lineageNodes.find((n) => n.id === edge.to)
                  if (!fromNode || !toNode) return null
                  return (
                    <line
                      key={index}
                      x1={fromNode.x + 80}
                      y1={fromNode.y + 20}
                      x2={toNode.x}
                      y2={toNode.y + 20}
                      stroke="#94a3b8"
                      strokeWidth="2"
                      markerEnd="url(#arrowhead)"
                    />
                  )
                })}
                <defs>
                  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8" />
                  </marker>
                </defs>
              </svg>

              {/* 节点 */}
              {lineageNodes.map((node) => (
                <div
                  key={node.id}
                  className={`absolute px-3 py-2 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md ${getNodeColor(node.type)} ${
                    selectedNode === node.id ? "ring-2 ring-blue-500 ring-offset-2" : ""
                  }`}
                  style={{ left: node.x, top: node.y }}
                  onClick={() => setSelectedNode(node.id)}
                >
                  <div className="flex items-center gap-2">
                    {getNodeIcon(node.type)}
                    <span className="text-sm font-medium whitespace-nowrap">{node.name}</span>
                  </div>
                </div>
              ))}

              {/* 层级标签 */}
              {[
                { label: "数据源", x: 50 },
                { label: "原始层", x: 250 },
                { label: "清洗层", x: 450 },
                { label: "标签层", x: 650 },
                { label: "输出层", x: 850 },
              ].map((level, index) => (
                <div
                  key={index}
                  className="absolute top-2 text-xs text-gray-400 font-medium"
                  style={{ left: level.x }}
                >
                  {level.label}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 节点详情 */}
        {selectedNode && (
          <Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-semibold">
                节点详情 - {lineageNodes.find((n) => n.id === selectedNode)?.name}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-2">上游依赖</h4>
                  <div className="space-y-2">
                    {lineageEdges
                      .filter((e) => e.to === selectedNode)
                      .map((edge, index) => (
                        <Badge key={index} variant="secondary" className="mr-2">
                          {lineageNodes.find((n) => n.id === edge.from)?.name}
                        </Badge>
                      ))}
                    {lineageEdges.filter((e) => e.to === selectedNode).length === 0 && (
                      <span className="text-sm text-gray-400">无上游依赖</span>
                    )}
                  </div>
                </div>
                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-2">下游影响</h4>
                  <div className="space-y-2">
                    {lineageEdges
                      .filter((e) => e.from === selectedNode)
                      .map((edge, index) => (
                        <Badge key={index} variant="secondary" className="mr-2">
                          {lineageNodes.find((n) => n.id === edge.to)?.name}
                        </Badge>
                      ))}
                    {lineageEdges.filter((e) => e.from === selectedNode).length === 0 && (
                      <span className="text-sm text-gray-400">无下游影响</span>
                    )}
                  </div>
                </div>
                <div>
                  <h4 className="text-sm font-medium text-gray-500 mb-2">更新信息</h4>
                  <p className="text-sm text-gray-700">最后更新：2分钟前</p>
                  <p className="text-sm text-gray-700">记录数：1,234,567</p>
                </div>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}