import React, { useMemo, useState } from 'react';
import { Button, message, Popconfirm, Select, Space, Switch, 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 Nyfl = () => {
  const [activeEnergyKey, setActiveEnergyKey] = useState('electric');
  const [filterUnit, setFilterUnit] = useState(undefined);
  const [filterCollection, setFilterCollection] = useState(undefined);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

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

  const unitOptions = useMemo(
    () => [
      { label: 'kWh', value: 'kWh' },
      { label: 'm³', value: 'm³' },
      { label: 't', value: 't' },
    ],
    [],
  );

  const collectionOptions = useMemo(
    () => [
      { label: '市电', value: '市电' },
      { label: '光伏发电', value: '光伏发电' },
      { label: '自备发电', value: '自备发电' },
    ],
    [],
  );

  const [rows, setRows] = useState(() => [
    {
      id: 1,
      energyKey: 'electric',
      energyType: '电能',
      unit: 'kWh',
      collectionType: '市电',
      enabled: true,
      latestUpdateTime: '2025-12-02 03:56:02',
    },
    {
      id: 2,
      energyKey: 'electric',
      energyType: '电能',
      unit: 'kWh',
      collectionType: '光伏发电',
      enabled: false,
      latestUpdateTime: '2025-11-22 11:56:50',
    },
    {
      id: 3,
      energyKey: 'electric',
      energyType: '电能',
      unit: 'kWh',
      collectionType: '自备发电',
      enabled: true,
      latestUpdateTime: '2025-12-04 21:12:20',
    },
    {
      id: 4,
      energyKey: 'electric',
      energyType: '电能',
      unit: 'kWh',
      collectionType: 'xxxxxx',
      enabled: false,
      latestUpdateTime: '2025-11-26 10:28:20',
    },
    {
      id: 5,
      energyKey: 'water',
      energyType: '水',
      unit: 'm³',
      collectionType: '市政供水',
      enabled: true,
      latestUpdateTime: '2025-12-06 09:12:10',
    },
    {
      id: 6,
      energyKey: 'gas',
      energyType: '天然气',
      unit: 'm³',
      collectionType: '管网供气',
      enabled: true,
      latestUpdateTime: '2025-12-01 16:08:45',
    },
  ]);

  const tableData = useMemo(() => {
    return rows
      .filter((row) => row.energyKey === activeEnergyKey)
      .filter((row) => (filterUnit ? row.unit === filterUnit : true))
      .filter((row) => (filterCollection ? row.collectionType === filterCollection : true));
  }, [activeEnergyKey, filterCollection, filterUnit, rows]);

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

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

  const columns = useMemo(
    () => [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 70,
        align: 'center',
      },
      {
        title: '能源类型',
        dataIndex: 'energyType',
        key: 'energyType',
        width: 120,
      },
      {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        width: 120,
      },
      {
        title: '采集类型',
        dataIndex: 'collectionType',
        key: 'collectionType',
        width: 180,
      },
      {
        title: '状态',
        dataIndex: 'enabled',
        key: 'enabled',
        width: 120,
        align: 'center',
        render: (value, record) => (
          <Switch
            size="small"
            checked={Boolean(value)}
            onChange={(checked) => {
              setRows((prev) =>
                prev.map((item) => (item.id === record.id ? { ...item, enabled: checked } : item)),
              );
              message.success(checked ? '已启用' : '已停用');
            }}
          />
        ),
      },
      {
        title: '最后更新时间',
        dataIndex: 'latestUpdateTime',
        key: 'latestUpdateTime',
        width: 200,
      },
      {
        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)}
              >
                <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={unitOptions}
                value={filterUnit}
                allowClear
                onChange={setFilterUnit}
              />
              <Select
                className={styles.filterSelect}
                placeholder="请选择"
                options={collectionOptions}
                value={filterCollection}
                allowClear
                onChange={setFilterCollection}
              />
              <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 Nyfl;
