import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Select, Table, Pagination, Statistic, Badge } from 'antd';
import { CaretRightOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import './RiskClassificationControl.less';

const { Option } = Select;

// 模拟风险等级数据
const riskLevelData = [
  { level: '极高风险', count: 35, color: '#ff4d4f', icon: '🔴' },
  { level: '高风险', count: 12, color: '#fa8c16', icon: '🟠' },
  { level: '中风险', count: 60, color: '#faad14', icon: '🟡' },
  { level: '低风险', count: 42, color: '#40a9ff', icon: '🔵' },
];

// 模拟风险评估分析数据
const riskAnalysisData = {
  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  极高风险: [12, 15, 10, 8, 14, 16, 9, 13, 11, 15, 14, 12],
  高风险: [8, 10, 12, 15, 14, 10, 8, 12, 14, 10, 8, 12],
  中风险: [18, 20, 22, 25, 24, 20, 18, 22, 24, 20, 18, 22],
  低风险: [15, 18, 20, 16, 14, 18, 20, 16, 14, 18, 20, 16],
};

// 模拟风险清单数据
const riskListData = [
  {
    key: '1',
    riskName: '化学品储存区窜雾风险',
    riskType: '设备设施',
    riskLevel: '极高风险',
    assessmentMethod: 'LEC分析',
    area: '生产罐区1',
    department: '设备部',
    responsiblePerson: '张明',
    monitoringFrequency: '每日',
    status: '整改',
    updateTime: '2025-03-01',
  },
  {
    key: '2',
    riskName: '化学品储存区泄漏风险',
    riskType: '设备设施',
    riskLevel: '高风险',
    assessmentMethod: 'LEC分析',
    area: '生产罐区1',
    department: '设备部',
    responsiblePerson: '张明',
    monitoringFrequency: '每日',
    status: '预警',
    updateTime: '2025-03-01',
  },
  {
    key: '3',
    riskName: '化学品储存区腐蚀风险',
    riskType: '设备设施',
    riskLevel: '中风险',
    assessmentMethod: 'LEC分析',
    area: '生产罐区1',
    department: '设备部',
    responsiblePerson: '张明',
    monitoringFrequency: '每日',
    status: '预警',
    updateTime: '2025-03-01',
  },
  {
    key: '4',
    riskName: '化学品储存区温湿度异常',
    riskType: '设备设施',
    riskLevel: '低风险',
    assessmentMethod: 'LEC分析',
    area: '生产罐区1',
    department: '设备部',
    responsiblePerson: '张明',
    monitoringFrequency: '每日',
    status: '正常',
    updateTime: '2025-03-01',
  },
  {
    key: '5',
    riskName: '化学品储存区通风不良',
    riskType: '设备设施',
    riskLevel: '低风险',
    assessmentMethod: 'LEC分析',
    area: '生产罐区1',
    department: '设备部',
    responsiblePerson: '张明',
    monitoringFrequency: '每日',
    status: '正常',
    updateTime: '2025-03-01',
  },
];

// 获取风险等级对应的标签样式
const getRiskLevelTag = (level) => {
  switch (level) {
    case '极高风险':
      return <Badge status="error" text="极高风险" />;
    case '高风险':
      return <Badge status="warning" text="高风险" />;
    case '中风险':
      return <Badge status="processing" text="中风险" />;
    case '低风险':
      return <Badge status="success" text="低风险" />;
    default:
      return level;
  }
};

// 获取状态对应的标签样式
const getStatusTag = (status) => {
  switch (status) {
    case '整改':
      return <Badge status="error" text="整改" />;
    case '预警':
      return <Badge status="warning" text="预警" />;
    case '正常':
      return <Badge status="success" text="正常" />;
    default:
      return status;
  }
};

const RiskClassificationControl = () => {
  const [selectedMonth, setSelectedMonth] = useState('月');
  const [selectedRiskLevel, setSelectedRiskLevel] = useState('全部风险等级');
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);

  // 风险评估分析图表配置
  const analysisChartOption = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['极高风险', '高风险', '中风险', '低风险'],
      bottom: 0,
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '15%',
      top: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: riskAnalysisData.xAxis,
    },
    yAxis: {
      type: 'value',
      min: 0,
    },
    series: [
      {
        name: '极高风险',
        type: 'line',
        data: riskAnalysisData.极高风险,
        smooth: false,
        symbolSize: 6,
        itemStyle: {
          color: '#ff4d4f',
        },
      },
      {
        name: '高风险',
        type: 'line',
        data: riskAnalysisData.高风险,
        smooth: false,
        symbolSize: 6,
        itemStyle: {
          color: '#fa8c16',
        },
      },
      {
        name: '中风险',
        type: 'line',
        data: riskAnalysisData.中风险,
        smooth: false,
        symbolSize: 6,
        itemStyle: {
          color: '#faad14',
        },
      },
      {
        name: '低风险',
        type: 'line',
        data: riskAnalysisData.低风险,
        smooth: false,
        symbolSize: 6,
        itemStyle: {
          color: '#40a9ff',
        },
      },
    ],
    // 移除了graphic配置，将使用React组件方式展示风险等级说明
  };

  // 风险四色图配置
  const colorChartOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: ['低风险', '中风险', '高风险', '极高风险'],
    },
    series: [
      {
        name: '风险类型',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 42, name: '低风险', itemStyle: { color: '#40a9ff' } },
          { value: 60, name: '中风险', itemStyle: { color: '#faad14' } },
          { value: 12, name: '高风险', itemStyle: { color: '#fa8c16' } },
          { value: 35, name: '极高风险', itemStyle: { color: '#ff4d4f' } },
        ],
      },
    ],
  };

  // 风险清单表格列配置
  const columns = [
    {
      title: '风险名称',
      dataIndex: 'riskName',
      key: 'riskName',
    },
    {
      title: '风险类别',
      dataIndex: 'riskType',
      key: 'riskType',
    },
    {
      title: '风险等级',
      dataIndex: 'riskLevel',
      key: 'riskLevel',
      render: (level) => getRiskLevelTag(level),
    },
    {
      title: '评估方法',
      dataIndex: 'assessmentMethod',
      key: 'assessmentMethod',
    },
    {
      title: '所在区域',
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '责任部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '责任人',
      dataIndex: 'responsiblePerson',
      key: 'responsiblePerson',
    },
    {
      title: '管控频次',
      dataIndex: 'monitoringFrequency',
      key: 'monitoringFrequency',
    },
    {
      title: '管控状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => getStatusTag(status),
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <a>
          查看详情 <CaretRightOutlined />
        </a>
      ),
    },
  ];

  return (
    <div className="risk-classification-container">
      {/* 风险等级统计 - 整体渐变背景 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col xs={24}>
          <Card 
            hoverable 
            style={{
              background: 'linear-gradient(to right, rgba(255, 245, 244, 1), rgba(240, 255, 250, 1))',
              border: '1px solid #e8f5fd'
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
              {/* 左侧标题 */}
              <div style={{ 
                fontSize: '20px', 
                fontWeight: 'bold', 
                color: '#333',
                padding: '16px',
                minWidth: 150,
                textAlign: 'center'
              }}>
                风险等级
              </div>
              
              {/* 右侧四个分散的分数 */}
              <div style={{ 
                display: 'flex', 
                flex: 1,
                justifyContent: 'space-around',
                flexWrap: 'wrap',
                gap: 16
              }}>
                {riskLevelData.map((item, index) => (
                  <div 
                    key={index}
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      padding: '16px',
                      backgroundColor: 'rgba(255, 255, 255, 0.7)',
                      borderRadius: 8,
                      minWidth: 120
                    }}
                  >
                    <div style={{ 
                      fontSize: '16px', 
                      fontWeight: 'bold', 
                      marginBottom: 8,
                      display: 'flex',
                      alignItems: 'center',
                      gap: 8
                    }}>
                      <span>{item.icon}</span>
                      <span style={{ color: item.color }}>{item.level}</span>
                    </div>
                    <Statistic
                      value={item.count}
                      valueStyle={{ color: item.color }}
                    />
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 风险评估分析和风险四色图 */}
      <style scoped>
        {`
          .risk-assessment-card .ant-card-head {
            background: linear-gradient(to bottom, rgba(255, 245, 244, 1), rgba(255, 250, 250, 1)) !important;
          }
          .risk-color-chart-card .ant-card-head {
            background: linear-gradient(to bottom left, rgba(255, 245, 244, 1), rgba(247, 250, 257, 1)) !important;
            backgroundSize: '100% 100%';
          }
        `}
      </style>
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col xs={24} lg={16} >
          <Card
            title="风险评估分析"
            className="risk-assessment-card"
            style={{
              background: 'linear-gradient(to bottom, rgba(255, 250, 250, 1), rgba(255, 255, 255, 1))',
              backgroundSize: '100% 100%',
            }}
            extra={
              <Select
                value={selectedMonth}
                style={{ width: 60 }}
                onChange={setSelectedMonth}
              >
                <Option value="月">月</Option>
                <Option value="季">季</Option>
                <Option value="年">年</Option>
              </Select>
            }>
            <Row gutter={16}>
              {/* 风险评估分析图表在左边 */}
              <Col xs={24} lg={16}>
                <div style={{ height: 400 }}>
                  <ReactECharts option={analysisChartOption} style={{ height: '100%' }} />
                </div>
              </Col>
              {/* 风险等级说明在右边 */}
              <Col xs={24} lg={8}>
                <div style={{ height: 400, padding: 12, borderRadius: 4, overflowY: 'auto' }}>
                  {/* <div style={{ fontSize: 14, fontWeight: 'bold', marginBottom: 12 }}>风险等级说明</div> */}
                  <div>
                    {[
                      { level: '极高风险', months: '4月、7月、10月、12月', color: '#ff4d4f', bgColor: '#fff0f0', borderColor: '#ff4d4f' },
                      { level: '高风险', months: '', color: '#fa8c16', bgColor: '#fff7e6', borderColor: '#fa8c16' },
                      { level: '中风险', months: '', color: '#faad14', bgColor: '#fffbe6', borderColor: '#faad14' },
                      { level: '低风险', months: '', color: '#40a9ff', bgColor: '#e6f7ff', borderColor: '#40a9ff' }
                    ].map((item, index) => (
                      <div
                        key={index}
                        style={{
                          marginBottom: index < 3 ? 12 : 0,
                          padding: 12,
                          backgroundColor: item.bgColor,
                          border: `1px solid ${item.borderColor}`,
                          borderRadius: 4,
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'space-between'
                        }}
                      >
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                          <div style={{
                            width: 8,
                            height: 8,
                            borderRadius: '50%',
                            backgroundColor: item.color,
                            marginRight: 8
                          }}></div>
                          <span style={{ fontWeight: 'bold', color: item.color }}>{item.level}</span>
                        </div>
                        {item.months && (
                          <div style={{ fontSize: 12, color: '#666' }}>{item.months}</div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card title="风险四色图" className="risk-color-chart-card"
                      style={{
              background: 'linear-gradient(to bottom, rgba(255, 245, 244, 1), rgba(240, 255, 250, 1))'
            }}
          extra={
            <Select
              value={selectedMonth}
              style={{ width: 60 }}
              onChange={setSelectedMonth}
            >
              <Option value="月">月</Option>
              <Option value="季">季</Option>
              <Option value="年">年</Option>
            </Select>
          }>
            <div style={{ height: 400 }}>
              <ReactECharts option={colorChartOption} style={{ height: '100%' }} />
            </div>
          </Card>
        </Col>
      </Row>

      {/* 风险清单 */}
      <Card title="风险清单" extra={
        <Select
          value={selectedRiskLevel}
          style={{ width: 150 }}
          onChange={setSelectedRiskLevel}
        >
          <Option value="全部风险等级">全部风险等级</Option>
          <Option value="极高风险">极高风险</Option>
          <Option value="高风险">高风险</Option>
          <Option value="中风险">中风险</Option>
          <Option value="低风险">低风险</Option>
        </Select>
      }>
        <Table
          columns={columns}
          dataSource={riskListData}
          pagination={false}
          scroll={{ x: 1300 }}
        />
        <div style={{ marginTop: 16, textAlign: 'right' }}>
          <Pagination
            current={currentPage}
            pageSize={pageSize}
            total={48}
            onChange={setCurrentPage}
            onShowSizeChange={(_, size) => setPageSize(size)}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `共 ${total} 条`}
          />
        </div>
      </Card>
    </div>
  );
};

export default RiskClassificationControl;