"use client"

import {Card, Col, DatePicker, Row, Select, Space} from "antd"
import EChart from "@/components/echarts"
import {useState} from "react"

const { RangePicker } = DatePicker
const { Option } = Select

export default function HazardTreatmentStats() {
  const [timeRange, setTimeRange] = useState("month")

  // 隐患类型统计数据
  const hazardTypeData = [
    { type: "压力异常", count: 45, percentage: 28.8 },
    { type: "泄漏隐患", count: 38, percentage: 24.4 },
    { type: "设施损坏", count: 35, percentage: 22.4 },
    { type: "管道老化", count: 25, percentage: 16.0 },
    { type: "其他", count: 13, percentage: 8.3 },
  ]

  // 处理状态统计数据
  const statusData = [
    { status: "已完成", count: 88, color: "#52c41a" },
    { status: "处理中", count: 45, color: "#faad14" },
    { status: "待处理", count: 23, color: "#f5222d" },
  ]

  // 月度趋势数据
  const trendData = [
    { month: "2023-07", 新增: 12, 完成: 8, 处理中: 4 },
    { month: "2023-08", 新增: 15, 完成: 12, 处理中: 7 },
    { month: "2023-09", 新增: 18, 完成: 15, 处理中: 10 },
    { month: "2023-10", 新增: 22, 完成: 18, 处理中: 14 },
    { month: "2023-11", 新增: 20, 完成: 22, 处理中: 12 },
    { month: "2023-12", 新增: 16, 完成: 20, 处理中: 8 },
    { month: "2024-01", 新增: 25, 完成: 16, 处理中: 17 },
  ]

  // 处理效率数据
  const efficiencyData = [
    { department: "管网维护部", 平均处理天数: 8.5, 完成率: 92 },
    { department: "安全监察部", 平均处理天数: 12.3, 完成率: 88 },
    { department: "技术服务部", 平均处理天数: 6.8, 完成率: 95 },
    { department: "应急抢修部", 平均处理天数: 4.2, 完成率: 98 },
  ]

  const barOption = {
    title: { text: "隐患类型分布", left: "center" },
    tooltip: { trigger: "axis" },
    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
    xAxis: { type: "value" },
    yAxis: {
      type: "category",
      data: hazardTypeData.map((item) => item.type),
    },
    series: [
      {
        type: "bar",
        data: hazardTypeData.map((item) => item.count),
        itemStyle: {
          color: (params: any) => {
            const colors = ["#1890ff", "#52c41a", "#faad14", "#f5222d", "#722ed1"]
            return colors[params.dataIndex % colors.length]
          },
        },
      },
    ],
  }

  const pieOption = {
    title: { text: "处理状态分布", left: "center" },
    tooltip: { trigger: "item" },
    legend: { orient: "vertical", left: "left" },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: statusData.map((item) => ({
          value: item.count,
          name: item.status,
          itemStyle: { color: item.color },
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  }

  const lineOption = {
    title: { text: "隐患处理趋势", left: "center" },
    tooltip: { trigger: "axis" },
    legend: { data: ["新增", "完成", "处理中"] },
    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
    xAxis: {
      type: "category",
      data: trendData.map((item) => item.month),
    },
    yAxis: { type: "value" },
    series: [
      {
        name: "新增",
        type: "line",
        data: trendData.map((item) => item.新增),
        itemStyle: { color: "#1890ff" },
      },
      {
        name: "完成",
        type: "line",
        data: trendData.map((item) => item.完成),
        itemStyle: { color: "#52c41a" },
      },
      {
        name: "处理中",
        type: "line",
        data: trendData.map((item) => item.处理中),
        itemStyle: { color: "#faad14" },
      },
    ],
  }

  const efficiencyBarOption = {
    title: { text: "部门处理效率", left: "center" },
    tooltip: { trigger: "axis" },
    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
    xAxis: {
      type: "category",
      data: efficiencyData.map((item) => item.department),
    },
    yAxis: { type: "value", name: "平均处理天数" },
    series: [
      {
        type: "bar",
        data: efficiencyData.map((item) => item.平均处理天数),
        itemStyle: { color: "#722ed1" },
      },
    ],
  }

  return (
    <div className="p-6">
      <Card title="隐患治理统计分析">
        <div className="mb-6">
          <Space>
            <Select value={timeRange} onChange={setTimeRange} style={{ width: 120 }}>
              <Option value="week">本周</Option>
              <Option value="month">本月</Option>
              <Option value="quarter">本季度</Option>
              <Option value="year">本年</Option>
            </Select>
            <RangePicker />
          </Space>
        </div>

        {/* 统计概览 */}
        <Row gutter={16} className="mb-6">
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-blue-600">156</div>
                <div className="text-gray-600">隐患总数</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-green-600">88</div>
                <div className="text-gray-600">已完成</div>
                <div className="text-sm text-gray-500">完成率: 56.4%</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-orange-600">45</div>
                <div className="text-gray-600">处理中</div>
                <div className="text-sm text-gray-500">占比: 28.8%</div>
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <div className="text-center">
                <div className="text-2xl font-bold text-red-600">23</div>
                <div className="text-gray-600">待处理</div>
                <div className="text-sm text-gray-500">占比: 14.7%</div>
              </div>
            </Card>
          </Col>
        </Row>

        {/* 图表展示 */}
        <Row gutter={16} className="mb-6">
          <Col span={12}>
            <Card title="隐患类型分布" size="small">
              <EChart option={barOption} style={{ height: 300 }} />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="处理状态分布" size="small">
              <EChart option={pieOption} style={{ height: 300 }} />
            </Card>
          </Col>
        </Row>

        <Row gutter={16} className="mb-6">
          <Col span={24}>
            <Card title="隐患处理趋势" size="small">
              <EChart option={lineOption} style={{ height: 300 }} />
            </Card>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={12}>
            <Card title="部门处理效率" size="small">
              <EChart option={efficiencyBarOption} style={{ height: 300 }} />
            </Card>
          </Col>
          <Col span={12}>
            <Card title="处理效率统计" size="small">
              <div className="space-y-4">
                {efficiencyData.map((item, index) => (
                  <div key={index} className="flex justify-between items-center p-3 bg-gray-50 rounded">
                    <div>
                      <div className="font-medium">{item.department}</div>
                      <div className="text-sm text-gray-600">平均处理: {item.平均处理天数}天</div>
                    </div>
                    <div className="text-right">
                      <div className="text-lg font-bold text-green-600">{item.完成率}%</div>
                      <div className="text-sm text-gray-600">完成率</div>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </Col>
        </Row>
      </Card>
    </div>
  )
}