import React, { useMemo, useState } from 'react';
import { Select, Tree, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ReactComponent as Icon1 } from '@/assets/business_basic/icon1.svg';
import { ReactComponent as Icon2 } from '@/assets/business_basic/icon2.svg';
import StandardTable from '@/components/StandardTable';
import styles from './ChangeRecord.less';

const buildingOptions = [
    { label: '工厂建筑', value: 'plant' },
    { label: '仓储设施', value: 'warehouse' },
];

const factoryOptions = [
    { label: '全部工厂', value: 'all' },
    { label: '上海油库', value: 'shanghai' },
    { label: '南京油库', value: 'nanjing' },
];

const rawTreeData = [
    {
        title: '上海油库',
        key: 'shanghai',
        tag: { label: '工厂', type: 'depot' },
        children: [
            {
                title: '汽油罐区',
                key: 'gasoline-area',
                tag: { label: '罐区', type: 'area' },
                children: [
                    {
                        title: '汽油调合罐组',
                        key: 'blend-group',
                        tag: { label: '罐组', type: 'group' },
                        children: [
                            {
                                title: 'T-101 汽油储罐',
                                key: 't101',
                                tag: { label: '储罐', type: 'tank' },
                                children: [
                                    {
                                        title: 'LT-101 液位变送器',
                                        key: 'lt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'TT-101 温度变送器',
                                        key: 'tt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'PT-101 压力变送器',
                                        key: 'pt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'P-101A 输送泵',
                                        key: 'p101a',
                                        tag: { label: '设备', type: 'device' },
                                    },
                                    {
                                        title: 'P-101B 输送泵',
                                        key: 'p101b',
                                        tag: { label: '设备', type: 'device' },
                                    },
                                    {
                                        title: 'SP-101 密度计',
                                        key: 'sp101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                ],
                            },
                            {
                                title: 'T-102 汽油储罐',
                                key: 't102',
                                tag: { label: '储罐', type: 'tank' },
                            },
                            {
                                title: 'T-103 汽油储罐',
                                key: 't103',
                                tag: { label: '储罐', type: 'tank' },
                            },
                        ],
                    },
                ],
            },
            {
                title: '柴油罐区',
                key: 'diesel-area',
                tag: { label: '罐区', type: 'area' },
            },
            {
                title: '化危品库',
                key: 'hazard',
                tag: { label: '库区', type: 'depot' },
            },
        ],
    },
];

const TreeNodeTitle = ({ text, tag }) => (
    <span className={styles.treeNodeTitle}>
        <span className={styles.nodeText}>{text}</span>
        {tag ? (
            <span className={`${styles.nodeTag} ${styles[`tag-${tag.type}`] || ''}`}>
                {tag.label}
            </span>
        ) : null}
    </span>
);

const formatTreeNodes = data =>
    data.map(item => ({
        key: item.key,
        title: <TreeNodeTitle text={item.title} tag={item.tag} />,
        children: item.children ? formatTreeNodes(item.children) : undefined,
    }));

const tableColumns = [
    {
        title: '变更 ID',
        dataIndex: 'changeId',
        key: 'changeId',
        width: 140,
        align: 'center',
    },
    {
        title: '变更内容',
        dataIndex: 'content',
        key: 'content',
        align: 'center',
    },
    {
        title: '申请人',
        dataIndex: 'applicant',
        key: 'applicant',
        width: 100,
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        align: 'center',
    },
    {
        title: '申请时间',
        dataIndex: 'appliedAt',
        key: 'appliedAt',
        width: 180,
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        width: 140,
        align: 'center',
        render: () => <a style={{ color: '#006665' }}>查看详情</a>,
    },
];

const tableDataSource = [
    {
        id: 1,
        changeId: 'MOC-2023-0568',
        content: '更新安全阀位参数，从85%调整为90%',
        applicant: '钱筠泽',
        status: '审批中',
        appliedAt: '2025-10-25 22:30:16',
    },
    {
        id: 2,
        changeId: 'MOC-2023-0492',
        content: '新增液位变送器LT-101A作为备用',
        applicant: '孙小权',
        status: '已批准',
        appliedAt: '2025-10-25 10:28:14',
    },
    {
        id: 3,
        changeId: 'MOC-2023-0387',
        content: '更新容积表数据，修正温度补偿系数',
        applicant: '何引琪',
        status: '已关闭',
        appliedAt: '2025-10-23 20:58:24',
    },
    {
        id: 4,
        changeId: 'MOC-2023-0256',
        content: '修改罐组用途，从成品油罐组调整为调合罐组',
        applicant: '钱菲霖',
        status: '已拒绝',
        appliedAt: '2025-10-23 04:59:13',
    },
    {
        id: 5,
        changeId: 'MOC-2023-0319',
        content: '更新容积表数据，修正温度补偿系数',
        applicant: '李昭',
        status: '已批准',
        appliedAt: '2025-10-22 03:03:13',
    },
];

const ChangeReCord = () => {
    const [buildingType, setBuildingType] = useState('plant');
    const [factory, setFactory] = useState('all');
    const [selectedKeys, setSelectedKeys] = useState(['t101']);
    const [checkedKeys, setCheckedKeys] = useState(['t101']);

    const treeData = useMemo(() => formatTreeNodes(rawTreeData), []);

    const tableData = useMemo(
        () => ({
            list: tableDataSource,
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: tableDataSource.length,
            },
        }),
        [],
    );

    return (
        <div className={styles.container}>
            <section className={styles.leftPanel}>
                <div className={styles.blockHeader}>
                    <span className={styles.titleIcon} />
                    <span className={styles.blockTitle}>工厂层级结构</span>
                </div>
                <div className={styles.filters}>
                    <Select
                        value={buildingType}
                        onChange={setBuildingType}
                        options={buildingOptions}
                        className={styles.filterSelect}
                        dropdownMatchSelectWidth={false}
                        size="small"
                    />
                    <Select
                        value={factory}
                        onChange={setFactory}
                        options={factoryOptions}
                        className={styles.filterSelect}
                        dropdownMatchSelectWidth={false}
                        size="small"
                    />
                </div>
                <div className={styles.treeWrapper}>
                    <Tree
                        showIcon={false}
                        showLine={{ showLeafIcon: false }}
                        defaultExpandAll
                        checkable
                        selectable
                        treeData={treeData}
                        checkedKeys={checkedKeys}
                        selectedKeys={selectedKeys}
                        onCheck={keys => setCheckedKeys(keys.checked || keys)}
                        onSelect={keys => setSelectedKeys(keys)}
                        className={styles.tree}
                        virtual={false}
                        switcherIcon={nodeProps =>
                            nodeProps.expanded ? (
                                <Icon2 width={14} height={14} />
                            ) : (
                                <Icon1 width={14} height={14} />
                            )
                        }
                    />
                </div>
            </section>

            <section className={styles.rightPanel}>
                <div className={styles.blockHeader}>
                    <span className={styles.titleIcon} />
                    <span className={styles.blockTitle}>变更记录</span>
                    <div className={styles.headerAction}>
                        <Button
                            className={styles.addLevelButton}
                            icon={<PlusOutlined />}
                            size="small"
                        >
                            发起变更
                        </Button>
                    </div>
                </div>
                <div className={styles.tableWrapper}>
                    <StandardTable
                        columns={tableColumns}
                        data={tableData}
                        rowKey="id"
                        isshowAlert={false}
                        pagination={{ pageSize: 10 }}
                        size="small"
                    />
                </div>
            </section>
        </div>
    );
};

export default ChangeReCord;

