"use client"

import { Textarea } from "@/components/ui/textarea"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Separator } from "@/components/ui/separator"
import { AlertTriangle, CheckCircle, Bell, RefreshCw, Filter, Download, Search, Clock } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

interface DataQualityIssue {
  id: string
  type: string
  description: string
  affectedRecords: number
  affectedFields: string[]
  severity: "high" | "medium" | "low"
  status: "open" | "in_progress" | "resolved"
  createdAt: string
  dataSource: string
}

interface DataQualityRule {
  id: string
  name: string
  description: string
  type: string
  enabled: boolean
  severity: "high" | "medium" | "low"
  dataSource: string
  lastRun: string
  issuesDetected: number
}

export function DataQualityMonitor() {
  const [activeTab, setActiveTab] = useState("issues")
  const [selectedIssueId, setSelectedIssueId] = useState<string | null>(null)
  const [isAddingRule, setIsAddingRule] = useState(false)
  const [filterSeverity, setFilterSeverity] = useState<string>("all")
  const [filterStatus, setFilterStatus] = useState<string>("all")

  // 模拟数据质量问题
  const [dataQualityIssues, setDataQualityIssues] = useState<DataQualityIssue[]>([
    {
      id: "issue-1",
      type: "缺失值",
      description: "用户表中存在大量手机号字段为空的记录",
      affectedRecords: 1250,
      affectedFields: ["phoneNumber"],
      severity: "high",
      status: "open",
      createdAt: "2023-07-20 10:15",
      dataSource: "CRM系统",
    },
    {
      id: "issue-2",
      type: "格式错误",
      description: "部分用户的身份证号格式不正确",
      affectedRecords: 458,
      affectedFields: ["identityNumber"],
      severity: "medium",
      status: "in_progress",
      createdAt: "2023-07-19 15:30",
      dataSource: "用户数据库",
    },
    {
      id: "issue-3",
      type: "重复数据",
      description: "存在多条使用相同手机号的用户记录",
      affectedRecords: 789,
      affectedFields: ["userId", "phoneNumber"],
      severity: "medium",
      status: "open",
      createdAt: "2023-07-18 09:45",
      dataSource: "交易系统",
    },
    {
      id: "issue-4",
      type: "异常值",
      description: "部分用户的年龄字段值异常（超过150岁）",
      affectedRecords: 23,
      affectedFields: ["age"],
      severity: "low",
      status: "resolved",
      createdAt: "2023-07-17 14:20",
      dataSource: "用户数据库",
    },
    {
      id: "issue-5",
      type: "不一致数据",
      description: "用户在不同系统中的姓名不一致",
      affectedRecords: 567,
      affectedFields: ["fullName"],
      severity: "high",
      status: "open",
      createdAt: "2023-07-16 11:05",
      dataSource: "多系统",
    },
  ])

  // 模拟数据质量规则
  const [dataQualityRules, setDataQualityRules] = useState<DataQualityRule[]>([
    {
      id: "rule-1",
      name: "手机号格式检查",
      description: "检查手机号是否符合中国大陆手机号格式",
      type: "格式验证",
      enabled: true,
      severity: "high",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 458,
    },
    {
      id: "rule-2",
      name: "身份证号验证",
      description: "验证身份证号的格式和校验码",
      type: "格式验证",
      enabled: true,
      severity: "high",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 789,
    },
    {
      id: "rule-3",
      name: "必填字段检查",
      description: "检查关键字段是否有值",
      type: "完整性检查",
      enabled: true,
      severity: "medium",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 1250,
    },
    {
      id: "rule-4",
      name: "重复数据检测",
      description: "检测并标记重复的用户记录",
      type: "唯一性检查",
      enabled: true,
      severity: "medium",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 567,
    },
    {
      id: "rule-5",
      name: "数据一致性检查",
      description: "检查用户在不同系统中的数据是否一致",
      type: "一致性检查",
      enabled: true,
      severity: "high",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 567,
    },
  ])

  // 模拟数据质量统计
  const qualityStats = {
    totalIssues: 3087,
    openIssues: 2606,
    resolvedIssues: 481,
    highSeverity: 1245,
    mediumSeverity: 1356,
    lowSeverity: 486,
    dataQualityScore: 87,
    completenessScore: 92,
    accuracyScore: 85,
    consistencyScore: 88,
    validityScore: 84,
  }

  const getSeverityBadge = (severity: string) => {
    switch (severity) {
      case "high":
        return <Badge className="bg-red-100 text-red-800">高</Badge>
      case "medium":
        return <Badge className="bg-yellow-100 text-yellow-800">中</Badge>
      case "low":
        return <Badge className="bg-green-100 text-green-800">低</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "open":
        return <Badge className="bg-red-100 text-red-800">未解决</Badge>
      case "in_progress":
        return <Badge className="bg-yellow-100 text-yellow-800">处理中</Badge>
      case "resolved":
        return <Badge className="bg-green-100 text-green-800">已解决</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "open":
        return <AlertTriangle className="h-5 w-5 text-red-500" />
      case "in_progress":
        return <RefreshCw className="h-5 w-5 text-yellow-500" />
      case "resolved":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      default:
        return <AlertTriangle className="h-5 w-5" />
    }
  }

  const filteredIssues = dataQualityIssues.filter((issue) => {
    if (filterSeverity !== "all" && issue.severity !== filterSeverity) return false
    if (filterStatus !== "all" && issue.status !== filterStatus) return false
    return true
  })

  const selectedIssue = selectedIssueId ? dataQualityIssues.find((issue) => issue.id === selectedIssueId) : null

  const updateIssueStatus = (id: string, status: "open" | "in_progress" | "resolved") => {
    setDataQualityIssues(
      dataQualityIssues.map((issue) => {
        if (issue.id === id) {
          return { ...issue, status }
        }
        return issue
      }),
    )
  }

  const toggleRuleStatus = (id: string) => {
    setDataQualityRules(
      dataQualityRules.map((rule) => {
        if (rule.id === id) {
          return { ...rule, enabled: !rule.enabled }
        }
        return rule
      }),
    )
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">数据质量监控</h2>
        <div className="flex items-center gap-2">
          <Button variant="outline">
            <Bell className="mr-2 h-4 w-4" />
            通知设置
          </Button>
          <Button>
            <RefreshCw className="mr-2 h-4 w-4" />
            运行检查
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">数据质量评分</p>
              <div className="flex items-end justify-between">
                <h3 className="text-2xl font-bold">{qualityStats.dataQualityScore}/100</h3>
              </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: `${qualityStats.dataQualityScore}%` }}
                ></div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">未解决问题</p>
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold">{qualityStats.openIssues}</h3>
                <AlertTriangle className="h-5 w-5 text-red-500" />
              </div>
              <p className="text-xs text-muted-foreground">其中高严重性: {qualityStats.highSeverity} 个问题</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">处理中问题</p>
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold">
                  {dataQualityIssues.filter((issue) => issue.status === "in_progress").length}
                </h3>
                <RefreshCw className="h-5 w-5 text-yellow-500" />
              </div>
              <p className="text-xs text-muted-foreground">正在处理中的数据质量问题</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">已解决问题</p>
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold">{qualityStats.resolvedIssues}</h3>
                <CheckCircle className="h-5 w-5 text-green-500" />
              </div>
              <p className="text-xs text-muted-foreground">
                解决率: {((qualityStats.resolvedIssues / qualityStats.totalIssues) * 100).toFixed(1)}%
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList>
          <TabsTrigger value="issues">数据问题</TabsTrigger>
          <TabsTrigger value="rules">质量规则</TabsTrigger>
          <TabsTrigger value="metrics">质量指标</TabsTrigger>
          <TabsTrigger value="reports">质量报告</TabsTrigger>
        </TabsList>

        <TabsContent value="issues" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>数据质量问题</CardTitle>
                <div className="flex items-center gap-2">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input type="text" placeholder="搜索问题..." className="pl-8 w-[200px]" />
                  </div>
                  <Select value={filterSeverity} onValueChange={setFilterSeverity}>
                    <SelectTrigger className="w-[130px]">
                      <Filter className="mr-2 h-4 w-4" />
                      <SelectValue placeholder="严重性" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">所有严重性</SelectItem>
                      <SelectItem value="high">高</SelectItem>
                      <SelectItem value="medium">中</SelectItem>
                      <SelectItem value="low">低</SelectItem>
                    </SelectContent>
                  </Select>
                  <Select value={filterStatus} onValueChange={setFilterStatus}>
                    <SelectTrigger className="w-[130px]">
                      <Filter className="mr-2 h-4 w-4" />
                      <SelectValue placeholder="状态" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">所有状态</SelectItem>
                      <SelectItem value="open">未解决</SelectItem>
                      <SelectItem value="in_progress">处理中</SelectItem>
                      <SelectItem value="resolved">已解决</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-[50px]">状态</TableHead>
                      <TableHead>问题类型</TableHead>
                      <TableHead>描述</TableHead>
                      <TableHead>影响记录数</TableHead>
                      <TableHead>严重性</TableHead>
                      <TableHead>数据源</TableHead>
                      <TableHead>发现时间</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredIssues.map((issue) => (
                      <TableRow key={issue.id}>
                        <TableCell>{getStatusIcon(issue.status)}</TableCell>
                        <TableCell className="font-medium">{issue.type}</TableCell>
                        <TableCell>{issue.description}</TableCell>
                        <TableCell>{issue.affectedRecords.toLocaleString()}</TableCell>
                        <TableCell>{getSeverityBadge(issue.severity)}</TableCell>
                        <TableCell>{issue.dataSource}</TableCell>
                        <TableCell>{issue.createdAt}</TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm" onClick={() => setSelectedIssueId(issue.id)}>
                            查看详情
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="rules" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>数据质量规则</CardTitle>
                <Button onClick={() => setIsAddingRule(true)}>添加规则</Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <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>
                    {dataQualityRules.map((rule) => (
                      <TableRow key={rule.id}>
                        <TableCell className="font-medium">{rule.name}</TableCell>
                        <TableCell>{rule.type}</TableCell>
                        <TableCell>{getSeverityBadge(rule.severity)}</TableCell>
                        <TableCell>{rule.dataSource}</TableCell>
                        <TableCell>{rule.lastRun}</TableCell>
                        <TableCell>{rule.issuesDetected.toLocaleString()}</TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-2">
                            <Switch
                              checked={rule.enabled}
                              onCheckedChange={() => toggleRuleStatus(rule.id)}
                              aria-label="Toggle rule"
                            />
                            <span>{rule.enabled ? "启用" : "禁用"}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end space-x-2">
                            <Button variant="ghost" size="sm">
                              编辑
                            </Button>
                            <Button variant="ghost" size="sm">
                              运行
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="metrics" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>数据完整性</CardTitle>
                <CardDescription>数据字段的完整性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体完整性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.completenessScore}/100</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: `${qualityStats.completenessScore}%` }}
                    ></div>
                  </div>

                  <div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">关键字段完整性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户ID</span>
                        <span className="text-sm">100%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "100%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">手机号</span>
                        <span className="text-sm">87%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "87%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">身份证号</span>
                        <span className="text-sm">72%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "72%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">IMEI设备号</span>
                        <span className="text-sm">68%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "68%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>数据准确性</CardTitle>
                <CardDescription>数据值的准确性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体准确性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.accuracyScore}/100</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: `${qualityStats.accuracyScore}%` }}
                    ></div>
                  </div>

                  <div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">字段准确性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">手机号格式</span>
                        <span className="text-sm">92%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "92%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">身份证号格式</span>
                        <span className="text-sm">85%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "85%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">年龄范围</span>
                        <span className="text-sm">95%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "95%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">邮箱格式</span>
                        <span className="text-sm">78%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "78%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>数据一致性</CardTitle>
                <CardDescription>跨系统数据一致性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体一致性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.consistencyScore}/100</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: `${qualityStats.consistencyScore}%` }}
                    ></div>
                  </div>

                  <div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">系统间一致性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">CRM与交易系统</span>
                        <span className="text-sm">90%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "90%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户数据库与行为分析</span>
                        <span className="text-sm">85%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "85%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">交易系统与设备管理</span>
                        <span className="text-sm">78%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "78%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>数据有效性</CardTitle>
                <CardDescription>数据业务规则有效性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体有效性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.validityScore}/100</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: `${qualityStats.validityScore}%` }}
                    ></div>
                  </div>

                  <div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">业务规则有效性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户注册规则</span>
                        <span className="text-sm">92%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "92%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">交易记录规则</span>
                        <span className="text-sm">88%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "88%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户行为规则</span>
                        <span className="text-sm">75%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "75%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="reports" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>数据质量报告</CardTitle>
                <div className="flex items-center gap-2">
                  <Select defaultValue="weekly">
                    <SelectTrigger className="w-[150px]">
                      <Clock className="mr-2 h-4 w-4" />
                      <SelectValue placeholder="报告频率" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="daily">每日报告</SelectItem>
                      <SelectItem value="weekly">每周报告</SelectItem>
                      <SelectItem value="monthly">每月报告</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button variant="outline">
                    <Download className="mr-2 h-4 w-4" />
                    导出报告
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>报告名称</TableHead>
                      <TableHead>生成时间</TableHead>
                      <TableHead>质量评分</TableHead>
                      <TableHead>问题数量</TableHead>
                      <TableHead>严重问题</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell className="font-medium">每周数据质量报告</TableCell>
                      <TableCell>2023-07-21</TableCell>
                      <TableCell>87/100</TableCell>
                      <TableCell>156</TableCell>
                      <TableCell>23</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell className="font-medium">每周数据质量报告</TableCell>
                      <TableCell>2023-07-14</TableCell>
                      <TableCell>85/100</TableCell>
                      <TableCell>178</TableCell>
                      <TableCell>31</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell className="font-medium">每周数据质量报告</TableCell>
                      <TableCell>2023-07-07</TableCell>
                      <TableCell>82/100</TableCell>
                      <TableCell>203</TableCell>
                      <TableCell>45</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell className="font-medium">每月数据质量报告</TableCell>
                      <TableCell>2023-06-30</TableCell>
                      <TableCell>80/100</TableCell>
                      <TableCell>245</TableCell>
                      <TableCell>52</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 问题详情对话框 */}
      <Dialog open={!!selectedIssueId} onOpenChange={(open) => !open && setSelectedIssueId(null)}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>问题详情</DialogTitle>
            <DialogDescription>查看和处理数据质量问题</DialogDescription>
          </DialogHeader>
          {selectedIssue && (
            <div className="space-y-4 py-4">
              <div className="flex items-center gap-4">
                {getStatusIcon(selectedIssue.status)}
                <div>
                  <h3 className="font-medium text-lg">{selectedIssue.type}</h3>
                  <p className="text-sm text-muted-foreground">{selectedIssue.description}</p>
                </div>
              </div>

              <Separator />

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-sm text-muted-foreground">严重性</Label>
                  <p className="font-medium">{getSeverityBadge(selectedIssue.severity)}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">状态</Label>
                  <p className="font-medium">{getStatusBadge(selectedIssue.status)}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">数据源</Label>
                  <p className="font-medium">{selectedIssue.dataSource}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">发现时间</Label>
                  <p className="font-medium">{selectedIssue.createdAt}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">影响记录数</Label>
                  <p className="font-medium">{selectedIssue.affectedRecords.toLocaleString()}</p>
                </div>
              </div>

              <div>
                <Label className="text-sm text-muted-foreground">影响字段</Label>
                <div className="flex flex-wrap gap-2 mt-1">
                  {selectedIssue.affectedFields.map((field, index) => (
                    <Badge key={index} variant="outline">
                      {field}
                    </Badge>
                  ))}
                </div>
              </div>

              <Separator />

              <div className="space-y-2">
                <Label>处理状态</Label>
                <Select
                  value={selectedIssue.status}
                  onValueChange={(value) =>
                    updateIssueStatus(selectedIssue.id, value as "open" | "in_progress" | "resolved")
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="选择状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="open">未解决</SelectItem>
                    <SelectItem value="in_progress">处理中</SelectItem>
                    <SelectItem value="resolved">已解决</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label>处理备注</Label>
                <Textarea placeholder="输入处理备注..." rows={3} />
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setSelectedIssueId(null)}>
              关闭
            </Button>
            <Button onClick={() => setSelectedIssueId(null)}>保存更改</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 添加规则对话框 */}
      <Dialog open={isAddingRule} onOpenChange={setIsAddingRule}>
        <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="rule-name" className="text-right">
                规则名称
              </Label>
              <Input id="rule-name" className="col-span-3" placeholder="例如：手机号格式检查" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-type" className="text-right">
                规则类型
              </Label>
              <Select>
                <SelectTrigger id="rule-type" className="col-span-3">
                  <SelectValue placeholder="选择规则类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="format">格式验证</SelectItem>
                  <SelectItem value="completeness">完整性检查</SelectItem>
                  <SelectItem value="uniqueness">唯一性检查</SelectItem>
                  <SelectItem value="consistency">一致性检查</SelectItem>
                  <SelectItem value="range">范围检查</SelectItem>
                  <SelectItem value="custom">自定义规则</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-severity" className="text-right">
                严重性
              </Label>
              <Select>
                <SelectTrigger id="rule-severity" className="col-span-3">
                  <SelectValue placeholder="选择严重性" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="high">高</SelectItem>
                  <SelectItem value="medium">中</SelectItem>
                  <SelectItem value="low">低</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-datasource" className="text-right">
                数据源
              </Label>
              <Select>
                <SelectTrigger id="rule-datasource" className="col-span-3">
                  <SelectValue placeholder="选择数据源" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有数据源</SelectItem>
                  <SelectItem value="crm">CRM系统</SelectItem>
                  <SelectItem value="transaction">交易系统</SelectItem>
                  <SelectItem value="user-db">用户数据库</SelectItem>
                  <SelectItem value="behavior">行为分析平台</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-start gap-4">
              <Label htmlFor="rule-description" className="text-right pt-2">
                规则描述
              </Label>
              <Textarea
                id="rule-description"
                className="col-span-3"
                placeholder="描述规则的用途和检查内容..."
                rows={3}
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <div className="text-right">
                <Label htmlFor="rule-enabled">启用规则</Label>
              </div>
              <div className="flex items-center space-x-2 col-span-3">
                <Switch id="rule-enabled" defaultChecked />
                <Label htmlFor="rule-enabled">立即启用此规则</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddingRule(false)}>
              取消
            </Button>
            <Button onClick={() => setIsAddingRule(false)}>创建规则</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}