"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 { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
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 {
  Zap,
  Play,
  Pause,
  Settings,
  Plus,
  CheckCircle2,
  Loader2,
  RefreshCw,
  Database,
  Edit,
  Trash2,
  AlertTriangle,
  FileCheck,
  Layers,
  ArrowRight,
  Sparkles,
} from "lucide-react"

// 清洗规则接口
interface CleaningRule {
  id: string
  name: string
  description: string
  field: string
  ruleType: 'format' | 'dedup' | 'enrich' | 'validate' | 'transform'
  ruleConfig: string
  enabled: boolean
  isDefault: boolean
}

// 清洗任务接口
interface CleaningTask {
  id: string
  name: string
  description: string
  sourceDb: string
  sourceCollection: string
  targetDb: string
  targetCollection: string
  rules: string[]  // 应用的规则ID
  status: 'idle' | 'running' | 'paused' | 'completed'
  progress: number
  stats: {
    totalRecords: number
    processedRecords: number
    cleanedRecords: number
    issuesFound: number
    issuesFixed: number
  }
}

// 默认清洗规则
const DEFAULT_RULES: CleaningRule[] = [
  {
    id: 'rule_phone',
    name: '手机号格式化',
    description: '将手机号格式化为标准11位格式',
    field: 'phone',
    ruleType: 'format',
    ruleConfig: `规则说明:
1. 去除空格、横杠、括号
2. 去除+86、0086前缀
3. 验证1[3-9]开头的11位数字
4. 无效手机号标记为null

示例:
+86 138-0000-8888 → 13800008888
086 13800008888 → 13800008888
12345678901 → null (无效)`,
    enabled: true,
    isDefault: true,
  },
  {
    id: 'rule_name',
    name: '姓名脱敏',
    description: '姓名中间字符用*替代',
    field: 'name',
    ruleType: 'transform',
    ruleConfig: `规则说明:
1. 保留第一个字（姓氏）
2. 中间名字用*替代
3. 保留最后一个字（可选）

示例:
张三 → 张*
王小明 → 王*明
欧阳修 → 欧*修`,
    enabled: true,
    isDefault: true,
  },
  {
    id: 'rule_province',
    name: '省份标准化',
    description: '将省份名称标准化',
    field: 'province',
    ruleType: 'format',
    ruleConfig: `规则说明:
1. 去除"省"、"市"、"自治区"后缀
2. 直辖市特殊处理
3. 自治区简称处理

示例:
福建省 → 福建
北京市 → 北京
内蒙古自治区 → 内蒙古
广西壮族自治区 → 广西`,
    enabled: true,
    isDefault: true,
  },
  {
    id: 'rule_dedup_phone',
    name: '手机号去重',
    description: '根据手机号去除重复记录',
    field: 'phone',
    ruleType: 'dedup',
    ruleConfig: `规则说明:
1. 以phone字段作为去重键
2. 保留最新的记录（按updated_at）
3. 合并其他记录的标签

去重策略:
- 主键: phone
- 保留策略: 最新记录
- 合并字段: tags, data_sources`,
    enabled: true,
    isDefault: true,
  },
  {
    id: 'rule_qq',
    name: 'QQ号格式化',
    description: 'QQ号格式化为纯数字',
    field: 'qq',
    ruleType: 'format',
    ruleConfig: `规则说明:
1. 去除空格
2. 提取纯数字
3. 验证5-11位数字

示例:
QQ: 12345678 → 12345678
12345678qq → 12345678
1234 → null (位数不足)`,
    enabled: true,
    isDefault: true,
  },
  {
    id: 'rule_validate_rfm',
    name: 'RFM评分验证',
    description: '验证RFM评分在有效范围内',
    field: 'rfm_score',
    ruleType: 'validate',
    ruleConfig: `规则说明:
1. RFM评分范围: 0-100
2. 超出范围的修正为边界值
3. 非数字值设为null

验证逻辑:
- rfm_score < 0 → 0
- rfm_score > 100 → 100
- 非数字 → null`,
    enabled: true,
    isDefault: true,
  },
  {
    id: 'rule_enrich_level',
    name: '用户等级计算',
    description: '根据RFM评分计算用户等级',
    field: 'user_level',
    ruleType: 'enrich',
    ruleConfig: `规则说明:
根据rfm_score计算user_level:

等级映射:
- rfm_score >= 90 → S级(钻石)
- rfm_score >= 80 → A级(黄金)
- rfm_score >= 60 → B级(白银)
- rfm_score >= 40 → C级(青铜)
- rfm_score < 40 → D级(潜力)`,
    enabled: true,
    isDefault: true,
  },
]

// 预定义清洗任务
const DEFAULT_TASKS: CleaningTask[] = [
  {
    id: 'clean_1',
    name: 'QQ数据清洗',
    description: '清洗QQ库的手机号和地区数据',
    sourceDb: 'KR_腾讯',
    sourceCollection: 'qq_phone',
    targetDb: 'KR',
    targetCollection: '用户估值',
    rules: ['rule_phone', 'rule_province', 'rule_dedup_phone'],
    status: 'completed',
    progress: 100,
    stats: {
      totalRecords: 705000000,
      processedRecords: 705000000,
      cleanedRecords: 680000000,
      issuesFound: 25000000,
      issuesFixed: 24500000,
    },
  },
  {
    id: 'clean_2',
    name: '存客宝数据清洗',
    description: '清洗CRM数据，标准化字段格式',
    sourceDb: 'cunkebao_v3',
    sourceCollection: 'users',
    targetDb: 'KR_存客宝',
    targetCollection: '用户资产统一视图',
    rules: ['rule_phone', 'rule_name', 'rule_validate_rfm', 'rule_enrich_level'],
    status: 'running',
    progress: 45,
    stats: {
      totalRecords: 216000,
      processedRecords: 97200,
      cleanedRecords: 95000,
      issuesFound: 2200,
      issuesFixed: 2100,
    },
  },
]

export default function DataCleaningPage() {
  const [tasks, setTasks] = useState<CleaningTask[]>(DEFAULT_TASKS)
  const [rules, setRules] = useState<CleaningRule[]>(DEFAULT_RULES)
  const [activeTab, setActiveTab] = useState("tasks")
  const [selectedTask, setSelectedTask] = useState<CleaningTask | null>(null)
  const [selectedRule, setSelectedRule] = useState<CleaningRule | null>(null)
  const [showCreateDialog, setShowCreateDialog] = useState(false)
  const [showRuleDialog, setShowRuleDialog] = useState(false)
  const [editingRuleConfig, setEditingRuleConfig] = useState('')

  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 getRuleTypeBadge = (type: string) => {
    switch (type) {
      case 'format': return <Badge className="bg-blue-100 text-blue-700">格式化</Badge>
      case 'dedup': return <Badge className="bg-purple-100 text-purple-700">去重</Badge>
      case 'enrich': return <Badge className="bg-green-100 text-green-700">补全</Badge>
      case 'validate': return <Badge className="bg-orange-100 text-orange-700">验证</Badge>
      case 'transform': return <Badge className="bg-pink-100 text-pink-700">转换</Badge>
      default: return <Badge>{type}</Badge>
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'completed':
        return <Badge className="bg-green-100 text-green-700"><CheckCircle2 className="h-3 w-3 mr-1" />已完成</Badge>
      case 'running':
        return <Badge className="bg-blue-100 text-blue-700"><Loader2 className="h-3 w-3 mr-1 animate-spin" />运行中</Badge>
      case 'paused':
        return <Badge className="bg-yellow-100 text-yellow-700"><Pause className="h-3 w-3 mr-1" />已暂停</Badge>
      default:
        return <Badge className="bg-gray-100 text-gray-700">待执行</Badge>
    }
  }

  // 模拟进度更新
  useEffect(() => {
    const interval = setInterval(() => {
      setTasks(prev => prev.map(t => {
        if (t.status === 'running' && t.progress < 100) {
          const newProgress = Math.min(t.progress + Math.random() * 3, 100)
          return {
            ...t,
            progress: newProgress,
            status: newProgress >= 100 ? 'completed' as const : t.status,
            stats: {
              ...t.stats,
              processedRecords: Math.floor(t.stats.totalRecords * newProgress / 100),
              cleanedRecords: Math.floor(t.stats.totalRecords * newProgress / 100 * 0.98),
              issuesFixed: Math.floor(t.stats.issuesFound * newProgress / 100 * 0.95),
            }
          }
        }
        return t
      }))
    }, 3000)
    return () => clearInterval(interval)
  }, [])

  const toggleRule = (ruleId: string) => {
    setRules(rules.map(r => r.id === ruleId ? { ...r, enabled: !r.enabled } : r))
  }

  const openRuleEditor = (rule: CleaningRule) => {
    setSelectedRule(rule)
    setEditingRuleConfig(rule.ruleConfig)
    setShowRuleDialog(true)
  }

  const saveRule = () => {
    if (selectedRule) {
      setRules(rules.map(r => r.id === selectedRule.id ? { ...r, ruleConfig: editingRuleConfig } : r))
      setShowRuleDialog(false)
    }
  }

  const runTask = (taskId: string) => {
    setTasks(tasks.map(t => t.id === taskId ? { ...t, status: 'running' as const } : t))
  }

  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 items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">AI数据清洗</h1>
            <p className="text-sm text-gray-500 mt-1">配置清洗规则，自动格式化、去重、补全数据</p>
          </div>
          <div className="flex items-center gap-3">
            <Button variant="outline">
              <RefreshCw className="h-4 w-4 mr-2" />
              刷新
            </Button>
            <Button onClick={() => setShowCreateDialog(true)}>
              <Plus className="h-4 w-4 mr-2" />
              新建任务
            </Button>
          </div>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-4 gap-4">
          <Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
            <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">{rules.filter(r => r.enabled).length}/{rules.length}</p>
                </div>
                <div className="p-3 rounded-xl bg-blue-100">
                  <FileCheck className="h-6 w-6 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
            <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">{formatNumber(tasks.reduce((sum, t) => sum + t.stats.cleanedRecords, 0))}</p>
                </div>
                <div className="p-3 rounded-xl bg-green-100">
                  <CheckCircle2 className="h-6 w-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
            <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-orange-600">{formatNumber(tasks.reduce((sum, t) => sum + t.stats.issuesFound, 0))}</p>
                </div>
                <div className="p-3 rounded-xl bg-orange-100">
                  <AlertTriangle className="h-6 w-6 text-orange-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80 backdrop-blur">
            <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-purple-600">{formatNumber(tasks.reduce((sum, t) => sum + t.stats.issuesFixed, 0))}</p>
                </div>
                <div className="p-3 rounded-xl bg-purple-100">
                  <Zap className="h-6 w-6 text-purple-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 标签页 */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="bg-white/80 backdrop-blur">
            <TabsTrigger value="tasks">清洗任务</TabsTrigger>
            <TabsTrigger value="rules">清洗规则</TabsTrigger>
          </TabsList>

          {/* 清洗任务 */}
          <TabsContent value="tasks" className="mt-4 space-y-3">
            {tasks.map(task => (
              <Card key={task.id} className="border-0 shadow-sm bg-white/80 backdrop-blur">
                <CardContent className="p-4">
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className="p-2.5 rounded-xl bg-gradient-to-r from-blue-500 to-purple-500">
                        <Zap className="h-5 w-5 text-white" />
                      </div>
                      <div>
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold text-gray-900">{task.name}</h3>
                          {getStatusBadge(task.status)}
                        </div>
                        <p className="text-sm text-gray-500">{task.description}</p>
                        <div className="flex items-center gap-2 text-xs text-gray-400 mt-1 font-mono">
                          <span>{task.sourceDb}.{task.sourceCollection}</span>
                          <ArrowRight className="h-3 w-3" />
                          <span>{task.targetDb}.{task.targetCollection}</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {task.status === 'idle' && (
                        <Button size="sm" onClick={() => runTask(task.id)}>
                          <Play className="h-4 w-4 mr-1" /> 执行
                        </Button>
                      )}
                      <Button variant="ghost" size="sm">
                        <Settings className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>

                  {/* 进度条 */}
                  <div className="mb-3">
                    <div className="flex items-center justify-between text-sm mb-1">
                      <span className="text-gray-500">处理进度</span>
                      <span className="font-medium">{task.progress.toFixed(0)}%</span>
                    </div>
                    <Progress value={task.progress} className="h-2" />
                  </div>

                  {/* 应用的规则 */}
                  <div className="flex flex-wrap gap-1 mb-3">
                    {task.rules.map(ruleId => {
                      const rule = rules.find(r => r.id === ruleId)
                      return rule ? (
                        <Badge key={ruleId} variant="secondary" className="text-xs">
                          {rule.name}
                        </Badge>
                      ) : null
                    })}
                  </div>

                  {/* 统计 */}
                  <div className="grid grid-cols-5 gap-4 text-sm pt-3 border-t">
                    <div>
                      <span className="text-gray-500">总记录:</span>
                      <span className="ml-2 font-medium">{formatNumber(task.stats.totalRecords)}</span>
                    </div>
                    <div>
                      <span className="text-gray-500">已处理:</span>
                      <span className="ml-2 font-medium text-blue-600">{formatNumber(task.stats.processedRecords)}</span>
                    </div>
                    <div>
                      <span className="text-gray-500">已清洗:</span>
                      <span className="ml-2 font-medium text-green-600">{formatNumber(task.stats.cleanedRecords)}</span>
                    </div>
                    <div>
                      <span className="text-gray-500">发现问题:</span>
                      <span className="ml-2 font-medium text-orange-600">{formatNumber(task.stats.issuesFound)}</span>
                    </div>
                    <div>
                      <span className="text-gray-500">已修复:</span>
                      <span className="ml-2 font-medium text-purple-600">{formatNumber(task.stats.issuesFixed)}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>

          {/* 清洗规则 */}
          <TabsContent value="rules" className="mt-4 space-y-3">
            {rules.map(rule => (
              <Card key={rule.id} className="border-0 shadow-sm bg-white/80 backdrop-blur">
                <CardContent className="p-4">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <Switch checked={rule.enabled} onCheckedChange={() => toggleRule(rule.id)} />
                      <div>
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold text-gray-900">{rule.name}</h3>
                          {getRuleTypeBadge(rule.ruleType)}
                          {rule.isDefault && <Badge variant="outline" className="text-xs">默认规则</Badge>}
                        </div>
                        <p className="text-sm text-gray-500">{rule.description}</p>
                        <p className="text-xs text-gray-400 mt-1">字段: <code className="bg-gray-100 px-1 rounded">{rule.field}</code></p>
                      </div>
                    </div>
                    <Button variant="outline" size="sm" onClick={() => openRuleEditor(rule)}>
                      <Edit className="h-4 w-4 mr-1" />
                      编辑规则
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>
        </Tabs>

        {/* 编辑规则弹窗 */}
        <Dialog open={showRuleDialog} onOpenChange={setShowRuleDialog}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>编辑清洗规则</DialogTitle>
              <DialogDescription>{selectedRule?.name}</DialogDescription>
            </DialogHeader>
            {selectedRule && (
              <div className="space-y-4 py-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>规则名称</Label>
                    <Input value={selectedRule.name} readOnly className="bg-gray-50" />
                  </div>
                  <div className="space-y-2">
                    <Label>目标字段</Label>
                    <Input value={selectedRule.field} readOnly className="bg-gray-50 font-mono" />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>规则类型</Label>
                  {getRuleTypeBadge(selectedRule.ruleType)}
                </div>
                <div className="space-y-2">
                  <Label>规则配置</Label>
                  <Textarea 
                    value={editingRuleConfig}
                    onChange={(e) => setEditingRuleConfig(e.target.value)}
                    rows={12}
                    className="font-mono text-sm"
                  />
                </div>
              </div>
            )}
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowRuleDialog(false)}>取消</Button>
              <Button onClick={saveRule}>
                <CheckCircle2 className="h-4 w-4 mr-2" />
                保存规则
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* 新建任务弹窗 */}
        <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>新建清洗任务</DialogTitle>
              <DialogDescription>配置数据源和清洗规则</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label>任务名称</Label>
                <Input placeholder="例如：用户数据清洗" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>源数据库</Label>
                  <Select>
                    <SelectTrigger><SelectValue placeholder="选择数据库" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="kr_tencent">KR_腾讯</SelectItem>
                      <SelectItem value="kr_weibo">KR_微博</SelectItem>
                      <SelectItem value="ckb">cunkebao_v3</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>目标数据库</Label>
                  <Select>
                    <SelectTrigger><SelectValue placeholder="选择目标" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="kr_valuation">KR.用户估值</SelectItem>
                      <SelectItem value="kr_ckb">KR_存客宝.用户资产统一视图</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="space-y-2">
                <Label>选择清洗规则</Label>
                <div className="space-y-2 max-h-[200px] overflow-y-auto">
                  {rules.map(rule => (
                    <div key={rule.id} className="flex items-center justify-between p-2 rounded-lg border">
                      <div className="flex items-center gap-2">
                        <Switch defaultChecked={rule.enabled} />
                        <span className="text-sm">{rule.name}</span>
                      </div>
                      {getRuleTypeBadge(rule.ruleType)}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
              <Button onClick={() => setShowCreateDialog(false)}>
                <Zap className="h-4 w-4 mr-2" />
                创建任务
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}