"use client"

import { useState, useEffect } 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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Database,
  Plus,
  Search,
  RefreshCw,
  Settings,
  CheckCircle2,
  Clock,
  Server,
  Globe,
  Webhook,
  MoreVertical,
  Eye,
  Loader2,
  ArrowRight,
  Zap,
  Target,
  FolderTree,
  ChevronRight,
} from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useRouter } from "next/navigation"

// 数据源接口
interface DataSource {
  id: string
  name: string
  nameCn: string
  description: string
  type: 'mongodb' | 'mysql' | 'api' | 'webhook'
  status: 'connected' | 'disconnected' | 'warning'
  host?: string
  database?: string
  endpoint?: string
  lastSync: string
  recordCount: number
  syncFrequency: string
  collections?: number
  tables?: number
  latency?: number
  dataCategory?: string
  targetCollection?: string
}

// 数据分类颜色映射
const CATEGORY_COLORS: Record<string, string> = {
  '用户画像': 'bg-blue-100 text-blue-700',
  '用户数据': 'bg-indigo-100 text-indigo-700',
  '社交数据': 'bg-pink-100 text-pink-700',
  '电商数据': 'bg-orange-100 text-orange-700',
  '私域数据': 'bg-purple-100 text-purple-700',
  '企业数据': 'bg-cyan-100 text-cyan-700',
  '金融数据': 'bg-green-100 text-green-700',
  '物流数据': 'bg-yellow-100 text-yellow-700',
  '消费数据': 'bg-red-100 text-red-700',
  '商业数据': 'bg-emerald-100 text-emerald-700',
  '其他': 'bg-gray-100 text-gray-700',
}

export default function DataSourcesPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [dataSources, setDataSources] = useState<DataSource[]>([])
  const [loading, setLoading] = useState(true)
  const [summary, setSummary] = useState({
    total: 0,
    connected: 0,
    warning: 0,
    totalRecords: 0,
    latency: 0
  })

  // 新数据源表单
  const [newSource, setNewSource] = useState({
    type: 'mongodb',
    name: '',
    nameCn: '',
    description: '',
    host: '',
    database: '',
    username: '',
    password: '',
    targetCollection: 'KR.用户估值',
    syncFrequency: 'realtime'
  })

  // 加载数据源
  useEffect(() => {
    loadDataSources()
  }, [])

  const loadDataSources = async () => {
    setLoading(true)
    try {
      const res = await fetch('/api/data-sources')
      const data = await res.json()
      if (data.success) {
        setDataSources(data.sources)
        setSummary(data.summary)
      }
    } catch (error) {
      console.error('加载数据源失败:', error)
    } finally {
      setLoading(false)
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "connected":
        return <Badge className="bg-green-100 text-green-700 border-0">已连接</Badge>
      case "warning":
        return <Badge className="bg-yellow-100 text-yellow-700 border-0">待配置</Badge>
      case "disconnected":
        return <Badge className="bg-red-100 text-red-700 border-0">未连接</Badge>
      default:
        return <Badge variant="secondary">未知</Badge>
    }
  }

  const getTypeIcon = (type: string) => {
    switch (type) {
      case "mongodb":
        return <Database className="h-5 w-5 text-green-600" />
      case "mysql":
        return <Server className="h-5 w-5 text-blue-600" />
      case "api":
        return <Globe className="h-5 w-5 text-purple-600" />
      case "webhook":
        return <Webhook className="h-5 w-5 text-orange-600" />
      default:
        return <Database className="h-5 w-5 text-gray-500" />
    }
  }

  const formatNumber = (num: number): string => {
    if (num >= 1000000000) return `${(num / 1000000000).toFixed(2)}B`
    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
    if (num >= 1000) return `${(num / 1000).toFixed(0)}K`
    return num.toLocaleString()
  }

  // 筛选数据源
  const filteredSources = dataSources.filter((source) => {
    if (activeTab !== "all" && source.type !== activeTab) return false
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      return (
        source.name.toLowerCase().includes(query) ||
        source.nameCn?.toLowerCase().includes(query) ||
        source.description?.toLowerCase().includes(query) ||
        source.dataCategory?.toLowerCase().includes(query)
      )
    }
    return true
  })

  // 按分类分组
  const groupedSources = filteredSources.reduce((acc, source) => {
    const category = source.dataCategory || '其他'
    if (!acc[category]) acc[category] = []
    acc[category].push(source)
    return acc
  }, {} as Record<string, DataSource[]>)

  // 测试连接
  const handleTestConnection = async () => {
    // TODO: 实现连接测试
    alert('连接测试功能开发中')
  }

  // 添加数据源
  const handleAddSource = async () => {
    // TODO: 实现添加数据源
    setShowAddDialog(false)
    loadDataSources()
  }

  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">
              管理所有数据接入源，支持MongoDB、MySQL、API、Webhook等多种数据源
            </p>
          </div>
          <div className="flex items-center gap-3">
            <Button variant="outline" onClick={loadDataSources} disabled={loading}>
              <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
              刷新
            </Button>
            <Button onClick={() => setShowAddDialog(true)}>
              <Plus className="h-4 w-4 mr-2" />
              添加数据源
            </Button>
          </div>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">数据源总数</p>
                  <p className="text-2xl font-bold text-gray-900">{summary.total}</p>
                </div>
                <div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
                  <Database className="h-6 w-6 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">已连接</p>
                  <p className="text-2xl font-bold text-green-600">{summary.connected}</p>
                </div>
                <div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
                  <CheckCircle2 className="h-6 w-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">总数据量</p>
                  <p className="text-2xl font-bold text-gray-900">{formatNumber(summary.totalRecords)}</p>
                </div>
                <div className="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center">
                  <FolderTree className="h-6 w-6 text-purple-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="bg-white/80 backdrop-blur border-0 shadow-sm">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">平均延迟</p>
                  <p className="text-2xl font-bold text-gray-900">{summary.latency}ms</p>
                </div>
                <div className="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center">
                  <Zap className="h-6 w-6 text-orange-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 搜索和筛选 */}
        <div className="flex flex-col md:flex-row gap-4">
          <div className="relative flex-1">
            <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 bg-white"
            />
          </div>
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="bg-white">
              <TabsTrigger value="all">全部</TabsTrigger>
              <TabsTrigger value="mongodb">MongoDB</TabsTrigger>
              <TabsTrigger value="mysql">MySQL</TabsTrigger>
              <TabsTrigger value="api">API</TabsTrigger>
              <TabsTrigger value="webhook">Webhook</TabsTrigger>
            </TabsList>
          </Tabs>
        </div>

        {/* 加载状态 */}
        {loading ? (
          <div className="flex items-center justify-center py-20">
            <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
            <span className="ml-3 text-gray-500">加载数据源...</span>
          </div>
        ) : (
          /* 按分类分组显示 */
          <div className="space-y-6">
            {Object.entries(groupedSources).map(([category, sources]) => (
              <div key={category}>
                <div className="flex items-center gap-2 mb-3">
                  <Badge className={CATEGORY_COLORS[category] || CATEGORY_COLORS['其他']}>
                    {category}
                  </Badge>
                  <span className="text-sm text-gray-500">{sources.length} 个数据源</span>
                </div>
                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
                  {sources.map((source) => (
                    <Card 
                      key={source.id} 
                      className="bg-white/80 backdrop-blur border-0 shadow-sm hover:shadow-md transition-all cursor-pointer group"
                      onClick={() => router.push(`/data-ingestion/sources/${source.id}`)}
                    >
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between mb-2">
                          <div className="flex items-start gap-3">
                            <div className="p-2 rounded-xl bg-gray-50 group-hover:bg-blue-50 transition-colors">
                              {getTypeIcon(source.type)}
                            </div>
                            <div>
                              <div className="flex items-center gap-2">
                                <h3 className="font-semibold text-gray-900">{source.nameCn || source.name}</h3>
                                {getStatusBadge(source.status)}
                              </div>
                              <p className="text-xs text-gray-500 font-mono">{source.name}</p>
                            </div>
                          </div>
                          <ChevronRight className="h-4 w-4 text-gray-300 group-hover:text-blue-500 transition-colors" />
                        </div>
                        
                        {/* 描述 */}
                        <p className="text-sm text-gray-600 mb-2 line-clamp-1">
                          {source.description}
                        </p>
                        
                        {/* 统计信息 */}
                        <div className="flex items-center justify-between text-xs text-gray-500">
                          <div className="flex items-center gap-2">
                            {source.collections !== undefined && (
                              <Badge variant="outline" className="text-xs h-5">{source.collections} 集合</Badge>
                            )}
                            {source.tables !== undefined && source.tables > 0 && (
                              <Badge variant="outline" className="text-xs h-5">{source.tables} 表</Badge>
                            )}
                          </div>
                          <span className="font-semibold text-gray-900">
                            {formatNumber(source.recordCount)}
                          </span>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* 添加数据源弹窗 */}
        <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>添加数据源</DialogTitle>
              <DialogDescription>
                配置新的数据源，数据将通过清洗规则处理后同步到指定的数据中台集合
              </DialogDescription>
            </DialogHeader>
            
            <div className="space-y-6 py-4">
              {/* 数据源类型 */}
              <div className="grid grid-cols-4 gap-3">
                {[
                  { type: "mongodb", label: "MongoDB", icon: Database, desc: "文档数据库" },
                  { type: "mysql", label: "MySQL", icon: Server, desc: "关系型数据库" },
                  { type: "api", label: "REST API", icon: Globe, desc: "HTTP接口" },
                  { type: "webhook", label: "Webhook", icon: Webhook, desc: "实时推送" },
                ].map((item) => (
                  <button
                    key={item.type}
                    onClick={() => setNewSource({ ...newSource, type: item.type })}
                    className={`p-4 rounded-xl border-2 text-center transition-all ${
                      newSource.type === item.type
                        ? "border-blue-500 bg-blue-50"
                        : "border-gray-200 hover:border-gray-300"
                    }`}
                  >
                    <item.icon className={`h-6 w-6 mx-auto mb-2 ${newSource.type === item.type ? "text-blue-500" : "text-gray-400"}`} />
                    <p className="font-medium text-sm text-gray-900">{item.label}</p>
                    <p className="text-xs text-gray-500">{item.desc}</p>
                  </button>
                ))}
              </div>

              {/* 基本信息 */}
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>数据源标识 *</Label>
                  <Input
                    placeholder="例如：user_db_prod"
                    value={newSource.name}
                    onChange={(e) => setNewSource({ ...newSource, name: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>中文名称 *</Label>
                  <Input
                    placeholder="例如：用户生产库"
                    value={newSource.nameCn}
                    onChange={(e) => setNewSource({ ...newSource, nameCn: e.target.value })}
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label>功能描述</Label>
                <Textarea
                  placeholder="简要描述该数据源的数据内容和用途..."
                  value={newSource.description}
                  onChange={(e) => setNewSource({ ...newSource, description: e.target.value })}
                />
              </div>

              {/* 连接信息 */}
              {(newSource.type === 'mongodb' || newSource.type === 'mysql') && (
                <div className="space-y-4 p-4 rounded-lg bg-gray-50">
                  <h4 className="font-medium text-gray-900">连接配置</h4>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>主机地址</Label>
                      <Input
                        placeholder="localhost:27017"
                        value={newSource.host}
                        onChange={(e) => setNewSource({ ...newSource, host: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>数据库名</Label>
                      <Input
                        placeholder="数据库名称"
                        value={newSource.database}
                        onChange={(e) => setNewSource({ ...newSource, database: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>用户名</Label>
                      <Input
                        placeholder="用户名"
                        value={newSource.username}
                        onChange={(e) => setNewSource({ ...newSource, username: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>密码</Label>
                      <Input
                        type="password"
                        placeholder="密码"
                        value={newSource.password}
                        onChange={(e) => setNewSource({ ...newSource, password: e.target.value })}
                      />
                    </div>
                  </div>
                </div>
              )}

              {/* 数据中台配置 */}
              <div className="space-y-4 p-4 rounded-lg bg-purple-50">
                <h4 className="font-medium text-gray-900 flex items-center gap-2">
                  <Target className="h-4 w-4 text-purple-500" />
                  数据中台配置
                </h4>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>目标集合</Label>
                    <Select
                      value={newSource.targetCollection}
                      onValueChange={(v) => setNewSource({ ...newSource, targetCollection: v })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="KR.用户估值">KR.用户估值（统一画像）</SelectItem>
                        <SelectItem value="KR_存客宝.用户资产统一视图">KR_存客宝.用户资产统一视图</SelectItem>
                        <SelectItem value="KR_点了码.用户资产统一视图">KR_点了码.用户资产统一视图</SelectItem>
                        <SelectItem value="custom">自定义集合...</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label>同步频率</Label>
                    <Select
                      value={newSource.syncFrequency}
                      onValueChange={(v) => setNewSource({ ...newSource, syncFrequency: v })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="realtime">实时同步</SelectItem>
                        <SelectItem value="5min">每5分钟</SelectItem>
                        <SelectItem value="1hour">每小时</SelectItem>
                        <SelectItem value="daily">每天</SelectItem>
                        <SelectItem value="manual">手动触发</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <p className="text-xs text-gray-500">
                  数据将通过清洗规则处理后，按照神射手用户资产数字化格式写入目标集合
                </p>
              </div>
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={() => setShowAddDialog(false)}>
                取消
              </Button>
              <Button variant="outline" onClick={handleTestConnection}>
                测试连接
              </Button>
              <Button onClick={handleAddSource}>
                保存并同步
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}