import React, { useMemo, useState } from 'react';
import { Button, message, Popconfirm, Select, Space, Table } from 'antd';
import {
  DeleteOutlined,
  DownloadOutlined,
  EditOutlined,
  PlusOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import styles from './nyfl.less';
import Component1 from '@/assets/basic_data/Component1.svg';
import Component2 from '@/assets/basic_data/Component2.svg';
import Component3 from '@/assets/basic_data/Component3.svg';

const Nhtjcs = () => {
  const [activeEnergyKey, setActiveEnergyKey] = useState('electric');
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [filterA, setFilterA] = useState(undefined);
  const [filterB, setFilterB] = useState(undefined);

  const energyTypes = useMemo(
    () => [
      { key: 'electric', label: '电能', icon: Component1 },
      { key: 'water', label: '水', icon: Component2 },
      { key: 'gas', label: '天然气', icon: Component3 },
    ],
    [],
  );

  const [rows, setRows] = useState(() => [
    {
      id: 1,
      energyKey: 'electric',
      powerType: '泵类系统',
      deviceCount: 28,
      statisticMethod: '智能电表',
      usageDesc: '用于油品输送的各类泵设备的耗电量。',
    },
    {
      id: 2,
      energyKey: 'electric',
      powerType: '加热保温系统',
      deviceCount: 23,
      statisticMethod: '智能电表',
      usageDesc: '用于油罐加热和管道保温的电加热设备的耗电量。',
    },
    {
      id: 3,
      energyKey: 'electric',
      powerType: '照明系统',
      deviceCount: 55,
      statisticMethod: '手动抄表',
      usageDesc: '油库区域内照明设备的耗电量，包括室内照明和室外照明。',
    },
    {
      id: 4,
      energyKey: 'electric',
      powerType: '生活用电系统',
      deviceCount: 21,
      statisticMethod: '手动抄表',
      usageDesc: '油库工作人员生活区的用电，如宿舍、办公区等的耗电量。',
    },
  ]);

  const scopedRows = useMemo(() => {
    return rows.filter((row) => row.energyKey === activeEnergyKey);
  }, [activeEnergyKey, rows]);

  const selectOptionsA = useMemo(() => {
    const values = Array.from(new Set(scopedRows.map((r) => r.powerType).filter(Boolean)));
    return values.map((value) => ({ label: value, value }));
  }, [scopedRows]);

  const selectOptionsB = useMemo(() => {
    const values = Array.from(new Set(scopedRows.map((r) => r.statisticMethod).filter(Boolean)));
    return values.map((value) => ({ label: value, value }));
  }, [scopedRows]);

  const tableData = useMemo(() => {
    return scopedRows
      .filter((row) => (filterA ? row.powerType === filterA : true))
      .filter((row) => (filterB ? row.statisticMethod === filterB : true));
  }, [filterA, filterB, scopedRows]);

  const handleAdd = () => message.info('新增');
  const handleUpload = () => message.info('上传');
  const handleBatchDownload = () => message.info('批量下载');
  const handleQuery = () => message.info('查询');

  const handleEdit = (record) => message.info(`编辑：${record.powerType}`);
  const handleDelete = (record) => message.success(`已删除：${record.powerType}`);

  const columns = useMemo(
    () => [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 70,
        align: 'center',
      },
      {
        title: '耗电类型',
        dataIndex: 'powerType',
        key: 'powerType',
        width: 180,
      },
      {
        title: '设备数量',
        dataIndex: 'deviceCount',
        key: 'deviceCount',
        width: 120,
        align: 'center',
      },
      {
        title: '统计方式',
        dataIndex: 'statisticMethod',
        key: 'statisticMethod',
        width: 140,
      },
      {
        title: '用途描述',
        dataIndex: 'usageDesc',
        key: 'usageDesc',
        ellipsis: true,
      },
      {
        title: '操作',
        key: 'action',
        width: 120,
        align: 'center',
        render: (_, record) => (
          <Space size={14}>
            <Button
              className={styles.actionIconBtn}
              type="text"
              icon={<EditOutlined />}
              onClick={() => handleEdit(record)}
            />
            <Popconfirm
              title="删除确认"
              okText="确定"
              cancelText="取消"
              onConfirm={() => handleDelete(record)}
            >
              <Button className={styles.actionIconBtnDanger} type="text" icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        ),
      },
    ],
    [],
  );

  return (
    <div className={styles.container}>
      <div className={styles.leftPanel}>
        <div className={styles.leftTitle}>能源类型</div>

        <div className={styles.leftList}>
          {energyTypes.map((item) => {
            const isActive = item.key === activeEnergyKey;
            return (
              <Button
                key={item.key}
                className={`${styles.leftItemBtn} ${isActive ? styles.leftItemActive : ''}`}
                onClick={() => {
                  setActiveEnergyKey(item.key);
                  setFilterA(undefined);
                  setFilterB(undefined);
                }}
              >
                <span className={styles.leftIconCircle}>
                  <img className={styles.leftIconImg} src={item.icon} alt={item.label} />
                </span>
                <span className={styles.leftItemText}>{item.label}</span>
              </Button>
            );
          })}

          <Button className={styles.leftAddBtn} disabled icon={<PlusOutlined />}>
            添加分类
          </Button>
        </div>
      </div>

      <div className={styles.rightPanel}>
        <div className={styles.toolbar}>
          <div className={styles.toolbarLeft}>
            <Space size={12}>
              <Button
                className={styles.primaryBtn}
                type="primary"
                icon={<PlusOutlined />}
                onClick={handleAdd}
              >
                新增
              </Button>
              <Button className={styles.ghostBtn} icon={<UploadOutlined />} onClick={handleUpload}>
                上传
              </Button>
              <Button className={styles.ghostBtn} icon={<DownloadOutlined />} onClick={handleBatchDownload}>
                批量下载
              </Button>


            </Space>
          </div>
          <div className={styles.toolbarRight}>
            <div className={styles.filterLabel}>筛选条件</div>
            <Space size={10}>
              <Select
                className={styles.filterSelect}
                placeholder="请选择"
                options={selectOptionsA}
                value={filterA}
                allowClear
                onChange={setFilterA}
              />
              <Select
                className={styles.filterSelect}
                placeholder="请选择"
                options={selectOptionsB}
                value={filterB}
                allowClear
                onChange={setFilterB}
              />
              <Button className={styles.queryBtn} onClick={handleQuery}>
                查询
              </Button>
            </Space>
          </div>
        </div>

        <div className={styles.tableWrap}>
          <Table
            rowKey="id"
            columns={columns}
            dataSource={tableData}
            size="middle"
            pagination={{
              current: 1,
              pageSize: 10,
              total: tableData.length,
              showSizeChanger: true,
              showQuickJumper: false,
            }}
            rowSelection={{
              selectedRowKeys,
              onChange: (keys) => setSelectedRowKeys(keys),
              columnWidth: 44,
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default Nhtjcs;
