import { Card, Table, Button, Input, Space, Popconfirm, message, Form, Select, DatePicker, Modal } from 'antd';
import { SearchOutlined, BellOutlined, CheckOutlined, ExclamationOutlined, ClockCircleOutlined, FileTextOutlined, BarChartOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { Row, Col, List, Avatar, Empty, Badge, Tag } from 'antd';
import './SafeTrainingList.less';
import ReactECharts from 'echarts-for-react';

const { Column } = Table;

// 数据统计模拟数据
const statsData = [
  {
    title: '年度计划',
    count: 126,
    completed: 25,
    icon: <FileTextOutlined />,
  },
  {
    title: '季度计划',
    count: 14,
    completed: 10,
    icon: <FileTextOutlined />,
  },
  {
    title: '月度计划',
    count: 32,
    completed: 3,
    icon: <FileTextOutlined />,
  },
  {
    title: '进行中的计划',
    count: 16,
    status: '进行中',
    icon: <ClockCircleOutlined />,
  },
];

// 系统通知模拟数据
const notifications = [
  {
    title: '技术团队转胎前培训即将开始',
    time: '培训时间：2023-08-05，请提前准备相关材料',
    duration: '55分钟前',
  },
  {
    title: '新功能上线：培训计划模板已更新',
    time: '新增5个行业特色培训模板，查看者使用',
    duration: '295分钟前',
  },
  {
    title: '新功能上线：培训计划模板已更新',
    time: '新增5个行业特色培训模板，查看者使用',
    duration: '309分钟前',
  },
];

// 待审批模拟数据
const pendingApprovals = [
  {
    id: '1',
    title: '销售团队能力培训计划',
    submitter: '张经理',
    time: '2023-08-28',
    status: '通过',
  },
  {
    id: '2',
    title: '产品知识更新培训',
    submitter: '李总监',
    time: '2023-08-29',
    status: '通过',
  },
  {
    id: '3',
    title: '销售团队能力培训计划',
    submitter: '张经理',
    time: '2023-08-28',
    status: '通过',
  },
  {
    id: '4',
    title: '销售团队能力培训计划',
    submitter: '张经理',
    time: '2023-08-28',
    status: '通过',
  },
];

// 培训完成情况分析数据
const trainingCompletionData = {
  title: {
    text: '培训完成情况分析',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    data: ['完成率'],
    bottom: 0,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['新员工培训', '新员工培训', '新员工培训', '新员工培训', '新员工培训'],
  },
  yAxis: {
    type: 'value',
    max: 100,
  },
  series: [
    {
      name: '完成率',
      type: 'bar',
      data: [90, 70, 95, 75, 85],
      itemStyle: {
        color: '#3F8600',
      },
    },
  ],
};

// 满意度评分数据
const satisfactionData = {
  title: {
    text: '满意度评分',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['非常满意', '满意', '一般', '不满意'],
  },
  series: [
    {
      name: '满意度',
      type: 'pie',
      radius: '60%',
      data: [
        {
          value: 60,
          name: '非常满意',
          itemStyle: {
            color: '#1890ff',
          },
        },
        {
          value: 20,
          name: '满意',
          itemStyle: {
            color: '#52c41a',
          },
        },
        {
          value: 15,
          name: '一般',
          itemStyle: {
            color: '#faad14',
          },
        },
        {
          value: 5,
          name: '不满意',
          itemStyle: {
            color: '#f5222d',
          },
        },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

// 近期培训计划数据
const recentTrainingData = [
  {
    id: '1',
    name: '新员工入职培训-Q3',
    target: '全厂员工',
    type: '线上直播',
    date: '2023-08-10至2023-08-15',
    progress: '20%',
    status: '进行中',
  },
  {
    id: '2',
    name: '新员工入职培训-Q3',
    target: '全厂员工',
    type: '线上直播',
    date: '2023-08-10至2023-08-15',
    progress: '40%',
    status: '已完成',
  },
  {
    id: '3',
    name: '新员工入职培训-Q3',
    target: '全厂员工',
    type: '线上直播',
    date: '2023-08-10至2023-08-15',
    progress: '20%',
    status: '待审核',
  },
  {
    id: '4',
    name: '新员工入职培训-Q3',
    target: '全厂员工',
    type: '线上直播',
    date: '2023-08-10至2023-08-15',
    progress: '20%',
    status: '待审核',
  },
  {
    id: '5',
    name: '新员工入职培训-Q3',
    target: '全厂员工',
    type: '线上直播',
    date: '2023-08-10至2023-08-15',
    progress: '20%',
    status: '待审核',
  },
];

const SafeTrainingList = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);

  // 处理状态标签颜色
  const getStatusTag = (status) => {
    switch (status) {
      case '进行中':
        return <Tag color="processing">进行中</Tag>;
      case '已完成':
        return <Tag color="success">已完成</Tag>;
      case '待审核':
        return <Tag color="warning">待审核</Tag>;
      case '通过':
        return <Tag color="success">通过</Tag>;
      default:
        return <Tag>{status}</Tag>;
    }
  };

  // 处理操作按钮
  const handleViewDetails = (record) => {
    // 查看详情逻辑
    console.log('查看详情:', record);
  };

  // 处理审批操作
  const handleApprove = (id) => {
    // 审批逻辑
    console.log('审批通过:', id);
  };

  // 处理驳回操作
  const handleReject = (id) => {
    // 驳回逻辑
    console.log('驳回:', id);
  };

  return (
    <div className="safe-training-container">
      {/* 统计数据卡片 */}
      <Row gutter={[16, 16]} className="stats-row">
        {statsData.map((item, index) => (
          <Col xs={24} sm={12} md={6} key={index}>
            <Card className="stat-card">
              <div className="stat-content">
                <div className="stat-icon">{item.icon}</div>
                <div className="stat-info">
                  <div className="stat-title">{item.title}</div>
                  <div className="stat-count">{item.count}</div>
                  {item.completed !== undefined && (
                    <div className="stat-completed">已完成 {item.completed} 项</div>
                  )}
                  {item.status && (
                    <div className="stat-status">{item.status}</div>
                  )}
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      {/* 第二行：系统通知、图表区域 */}
      <Row gutter={[16, 16]} className="second-row">
        {/* 系统通知 */}
        <Col xs={24} md={6}>
          <Card title="系统通知" className="notification-card">
            <List
              className="notification-list"
              dataSource={notifications}
              renderItem={(item) => (
                <List.Item className="notification-item">
                  <Badge status="default" className="notification-dot" />
                  <List.Item.Meta
                    title={<span className="notification-title">{item.title}</span>}
                    description={
                      <>
                        <span className="notification-time">{item.time}</span>
                        <span className="notification-duration">{item.duration}</span>
                      </>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 培训完成情况分析图表 */}
        <Col xs={24} md={9}>
          <Card title="培训完成情况分析" className="chart-card">
            <ReactECharts option={trainingCompletionData} style={{ height: '250px' }} />
          </Card>
        </Col>

        {/* 满意度评分图表 */}
        <Col xs={24} md={9}>
          <Card title="满意度评分" className="chart-card">
            <ReactECharts option={satisfactionData} style={{ height: '250px' }} />
          </Card>
        </Col>
      </Row>

      {/* 第三行：待审批、近期培训计划 */}
      <Row gutter={[16, 16]} className="third-row">
        {/* 待审批 */}
        <Col xs={24} md={6}>
          <Card title="待审批" className="approval-card">
            <List
              className="approval-list"
              dataSource={pendingApprovals}
              renderItem={(item) => (
                <List.Item className="approval-item">
                  <Badge status="default" className="approval-dot" />
                  <List.Item.Meta
                    title={<span className="approval-title">{item.title}</span>}
                    description={
                      <div className="approval-meta">
                        <span className="approval-submitter">提交人：{item.submitter}</span>
                        <span className="approval-time">提交时间：{item.time}</span>
                      </div>
                    }
                  />
                  <div className="approval-actions">
                    <Button type="text" size="small" className="approve-btn">
                      {item.status === '通过' ? '通过' : '批准'}
                    </Button>
                    <Button type="text" size="small" className="reject-btn">
                      驳回
                    </Button>
                  </div>
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 近期培训计划 */}
        <Col xs={24} md={18}>
          <Card title="近期培训计划" className="training-plan-card">
            <Table
              dataSource={recentTrainingData}
              pagination={{
                current: currentPage,
                pageSize: pageSize,
                total: recentTrainingData.length,
                showSizeChanger: true,
                showTotal: (total, range) =>
                  `共 ${total} 条 ${range[0]}-${range[1]}`
              }}
              rowKey="id"
              size="small"
              className="training-plan-table"
            >
              <Column title="培训名称" dataIndex="name" key="name" />
              <Column title="培训对象" dataIndex="target" key="target" />
              <Column title="培训形式" dataIndex="type" key="type" />
              <Column title="日期" dataIndex="date" key="date" />
              <Column title="进度" dataIndex="progress" key="progress" />
              <Column
                title="状态"
                dataIndex="status"
                key="status"
                render={(status) => getStatusTag(status)}
              />
              <Column
                title="操作"
                key="action"
                render={() => (
                  <Button type="text" size="small" className="view-btn">
                    查看
                  </Button>
                )}
              />
            </Table>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default SafeTrainingList;