import React, { useMemo, useState } from 'react';
import { Button, message, Popconfirm, Select, Space, Table } from 'antd';
import { DeleteOutlined, DownloadOutlined, EditOutlined, FileTextOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import styles from './jgfx.less';

const Jgfx = () => {
  const [filterA, setFilterA] = useState(undefined);
  const [filterB, setFilterB] = useState(undefined);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });

  const selectOptionsA = useMemo(
    () => [
      { label: '千瓦时(kWh)', value: '千瓦时(kWh)' },
      { label: '立方米(m³)', value: '立方米(m³)' },
      { label: '吨(t)', value: '吨(t)' },
      { label: 'kWh', value: 'kWh' },
    ],
    [],
  );

  const selectOptionsB = useMemo(
    () => [
      { label: '电能', value: '电能' },
      { label: '燃气', value: '燃气' },
      { label: '水', value: '水' },
      { label: '汽油', value: '汽油' },
    ],
    [],
  );

  const rows = useMemo(
    () => [
      {
        id: 1,
        energyType: '电能',
        unit: '千瓦时(kWh)',
        unitPrice: 0.5,
        priceUnit: '元',
        scope: 'xxxx',
        pricingUnit: 'xxxxxx',
        latestUpdateTime: '2025-12-02 03:56:02',
      },
      {
        id: 2,
        energyType: '燃气',
        unit: '立方米(m³)',
        unitPrice: 2.5,
        priceUnit: '元',
        scope: 'xxxx',
        pricingUnit: 'xxxxxx',
        latestUpdateTime: '2025-11-22 11:56:50',
      },
      {
        id: 3,
        energyType: '水',
        unit: '吨(t)',
        unitPrice: 1.2,
        priceUnit: '元',
        scope: 'xxxx',
        pricingUnit: 'xxxxxx',
        latestUpdateTime: '2025-12-04 21:12:20',
      },
      {
        id: 4,
        energyType: '汽油',
        unit: 'kWh',
        unitPrice: 1.5,
        priceUnit: '元',
        scope: 'xxxx',
        pricingUnit: 'xxxxxx',
        latestUpdateTime: '2025-11-26 10:28:20',
      },
    ],
    [],
  );

  const tableData = useMemo(() => {
    return rows
      .filter((r) => (filterA ? r.unit === filterA : true))
      .filter((r) => (filterB ? r.energyType === filterB : true));
  }, [filterA, filterB, rows]);

  const pagedData = useMemo(() => {
    const start = (pagination.current - 1) * pagination.pageSize;
    return tableData.slice(start, start + pagination.pageSize);
  }, [pagination.current, pagination.pageSize, tableData]);

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

  const handleEdit = (record) => message.info(`编辑：${record.energyType}`);
  const handleView = (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: 160,
      },
      {
        title: '单价',
        dataIndex: 'unitPrice',
        key: 'unitPrice',
        width: 110,
      },
      {
        title: '价格单位',
        dataIndex: 'priceUnit',
        key: 'priceUnit',
        width: 120,
      },
      {
        title: '适用范围',
        dataIndex: 'scope',
        key: 'scope',
        width: 120,
      },
      {
        title: '定价单位',
        dataIndex: 'pricingUnit',
        key: 'pricingUnit',
        width: 140,
      },
      {
        title: '最后更新时间',
        dataIndex: 'latestUpdateTime',
        key: 'latestUpdateTime',
        width: 210,
      },
      {
        title: '操作',
        key: 'action',
        width: 140,
        align: 'center',
        render: (_, record) => (
          <Space size={14}>
            <Button
              className={styles.actionIconBtn}
              type="text"
              icon={<EditOutlined />}
              onClick={() => handleEdit(record)}
            />
            <Button
              className={styles.actionIconBtnInfo}
              type="text"
              icon={<FileTextOutlined />}
              onClick={() => handleView(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.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={pagedData}
          size="middle"
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: tableData.length,
            showSizeChanger: true,
            showQuickJumper: false,
            showTotal: (total) => `共 ${total} 条`,
            position: ['bottomRight'],
            onChange: (current, pageSize) => setPagination({ current, pageSize }),
          }}
          rowSelection={{
            selectedRowKeys,
            onChange: (keys) => setSelectedRowKeys(keys),
            columnWidth: 44,
          }}
        />
      </div>
    </div>
  );
};

export default Jgfx;
