import React, { useState } from 'react';
import { Flex } from 'antd';
import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';
import BlueTable from '@/components/BlueTable';
import type { ColumnsType } from 'antd/es/table';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';

interface MaintenanceDataType {
  pipelineName: string;
  facilityName: string;
  planName: string;
  discoveryDate: string;
  maintenanceDate: string;
  operation: string;
}

interface RoutineDataType {
  pipelineName: string;
  objectName: string;
  objectCode: string;
  lastMaintenanceDate: string;
  maintenanceCycle: string;
  maintenanceResult: string;
  remark: string;
}

const PipelineMaintenance: React.FC = () => {
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs]>([
    dayjs().startOf('month'),
    dayjs().endOf('month')
  ]);
  const [facilityType, setFacilityType] = useState('all');
  const [activeTab, setActiveTab] = useState('daily');
  const { dispatch } = useGlobalModalServices();
  let isUsingValue = true;

  const columnsMaintenance: ColumnsType<MaintenanceDataType> = [
    {
      title: '管廊名称',
      dataIndex: 'pipelineName',
      key: 'pipelineName',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '病害设施设备名称',
      dataIndex: 'facilityName',
      key: 'facilityName',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '巡检计划名称',
      dataIndex: 'planName',
      key: 'planName',
      width: 300,
      className: styles.tableCell
    },
    {
      title: '病害发现日期',
      dataIndex: 'discoveryDate',
      key: 'discoveryDate',
      width: 250,
      className: styles.tableCell
    },
    {
      title: '维修截止日期',
      dataIndex: 'maintenanceDate',
      key: 'maintenanceDate',
      width: 250,
      className: styles.tableCell
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 120,
      render: () => (
        <span className={styles.operation} 
          onClick={() => {
            if (true) {
              dispatch.push('PipelineMaintenanceDetail', {
              });
            }
          }}>详情</span>
      )
    }
  ];

  const columnsRoutine: ColumnsType<RoutineDataType> = [
    {
      title: '管廊名称',
      dataIndex: 'pipelineName',
      key: 'pipelineName',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '保养对象名称',
      dataIndex: 'objectName',
      key: 'objectName',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '保养对象编码',
      dataIndex: 'objectCode',
      key: 'objectCode',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '上一次保养日期',
      dataIndex: 'lastMaintenanceDate',
      key: 'lastMaintenanceDate',
      width: 200,
      className: styles.tableCell
    },
    {
      title: '保养周期',
      dataIndex: 'maintenanceCycle',
      key: 'maintenanceCycle',
      width: 150,
      className: styles.tableCell
    },
    {
      title: '保养结果',
      dataIndex: 'maintenanceResult',
      key: 'maintenanceResult',
      width: 150,
      className: styles.tableCell
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 200,
      className: styles.tableCell
    }
  ];

  const mockMaintenanceData: MaintenanceDataType[] = isUsingValue
    ? Array.from({ length: 10 }, () => ({
        pipelineName: 'XXXXXXXX',
        facilityName: 'XXXXXXXXX',
        planName: 'XXXXXXXXX',
        discoveryDate: 'XXXXXXXX',
        maintenanceDate: 'XXXXXXXX',
        operation: '查看'
      }))
    : [];

  const mockRoutineData: RoutineDataType[] = isUsingValue
    ? Array.from({ length: 10 }, () => ({
        pipelineName: 'XXXXXXXX',
        objectName: 'XXXXXXXXX',
        objectCode: 'XXXXXXXXX',
        lastMaintenanceDate: 'XXXXXXXX',
        maintenanceCycle: 'XXXXXXXX',
        maintenanceResult: 'XXXXXXXX',
        remark: 'XXXXXXXX'
      }))
    : [];

  return (
    <div className={styles.container}>
      {/* 筛选条件区域 */}
      <div className={styles.filters}>
        <Flex gap={20} align="center">
          <span className={styles.label}>维护时间</span>
          <DatePicker.RangePicker
            value={dateRange}
            onChange={(dates) => {
              if (dates && dates[0] && dates[1]) {
                setDateRange([dates[0], dates[1]]);
              }
            }}
            format="YYYY年MM月DD日"
            className={styles.datePicker}
          />
          <span className={styles.label} style={{marginLeft: '40px'}}>维护设施类型</span>
          <div className={styles.facilityTabs}>
            <div 
              className={`${styles.facilityTab} ${facilityType === 'all' ? styles.active : ''}`}
              onClick={() => setFacilityType('all')}
            >
              全部
            </div>
            <div 
              className={`${styles.facilityTab} ${facilityType === 'main' ? styles.active : ''}`}
              onClick={() => setFacilityType('main')}
            >
              本体
            </div>
            <div 
              className={`${styles.facilityTab} ${facilityType === 'auxiliary' ? styles.active : ''}`}
              onClick={() => setFacilityType('auxiliary')}
            >
              附属设施
            </div>
          </div>
        </Flex>
      </div>

      {/* 统计数据区域 */}
      <Flex gap={40} className={styles.stats}>
        <div 
          className={`${styles.statsTab} ${activeTab === 'daily' ? styles.active : ''}`}
          onClick={() => setActiveTab('daily')}
        >
          日常维修 <span className={styles.count}>{42}</span> 处
        </div>
        <div 
          className={`${styles.statsTab} ${activeTab === 'routine' ? styles.active : ''}`}
          onClick={() => setActiveTab('routine')}
        >
          日常保养 <span className={styles.count}>{42}</span> 处
        </div>
      </Flex>

      {/* 表格区域 */}
      <BlueTable
        columns={activeTab === 'daily' ? columnsMaintenance : columnsRoutine}
        dataSource={activeTab === 'daily' ? mockMaintenanceData : mockRoutineData}
        scroll={{ y: 430 }}
        pagination={{
          total: 30,
          pageSize: 10,
        }}
      />
    </div>
  );
};

export default PipelineMaintenance; 