import React, { useState, useEffect, useRef } from 'react';
import { Select, Button, Table, Input, Space, Tooltip, message } from 'antd';
import { SearchOutlined, PlusOutlined, FileTextOutlined, DeleteOutlined, EditOutlined, MoreOutlined, RobotOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import StandardTable from '@/components/StandardTable';
import styles from './PollutionSourceManagement.less';

const { Option } = Select;

const PollutionSourceManagement = () => {
    const [loading, setLoading] = useState(false);
    const [tableData, setTableData] = useState({
        list: [],
        pagination: {
            current: 1,
            pageSize: 5,
            total: 85
        }
    });

    // 污染物排放统计图表配置
    const pollutantEmissionOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
            name: '污染物排放',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [
                { value: 62, name: '超标污染物数量', itemStyle: { color: '#ff6b6b' } },
                { value: 38, name: '正常污染物数量', itemStyle: { color: '#4ecdc4' } }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    const pollutantTypeOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
            name: '污染物种类',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [
                { value: 25, name: '超标污染物种类', itemStyle: { color: '#a8e6cf' } },
                { value: 75, name: '正常污染物种类', itemStyle: { color: '#ffd3a5' } }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    // 超标排放统计图表配置
    const exceedanceOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                const data = params[0];
                const exceedanceData = [
                    { name: '污染物1', status: '轻微超标', exceedance: '15%' },
                    { name: '污染物2', status: '严重超标', exceedance: '66%' },
                    { name: '污染物3', status: '轻微超标', exceedance: '8%' },
                    { name: '污染物4', status: '正常', exceedance: '0%' },
                    { name: '污染物5', status: '轻微超标', exceedance: '12%' }
                ];
                const item = exceedanceData[data.dataIndex];
                return `
                    <div style="padding: 10px; background: rgba(0,0,0,0.8); color: white; border-radius: 8px;">
                        <div style="font-weight: 600; margin-bottom: 5px;">${data.name}</div>
                        <div style="color: #ff6b6b; margin-bottom: 3px;">${item.status}</div>
                        <div style="color: #ffd93d; margin-bottom: 3px;">超标 ${item.exceedance}</div>
                        <div style="color: #a8e6cf; font-size: 11px;">大气环境特征污染物</div>
                    </div>
                `;
            }
        },
        grid: {
            left: '20%',
            right: '10%',
            top: '10%',
            bottom: '10%'
        },
        xAxis: {
            type: 'value',
            max: 100,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['污染物1', '污染物2', '污染物3', '污染物4', '污染物5'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#666',
                fontSize: 12
            }
        },
        series: [{
            type: 'bar',
            data: [45, 66, 32, 28, 38],
            itemStyle: {
                color: '#ff6b6b',
                borderRadius: [0, 4, 4, 0]
            },
            barWidth: '60%'
        }]
    };

    // 表格列定义
    const columns = [
        {
            title: '生产工艺设备',
            dataIndex: 'equipment',
            key: 'equipment',
            width: 120,
        },
        {
            title: '原材料产品',
            dataIndex: 'material',
            key: 'material',
            width: 150,
        },
        {
            title: '污染物排放处理设施',
            dataIndex: 'facility',
            key: 'facility',
            width: 180,
        },
        {
            title: '污染物排放种类',
            dataIndex: 'type',
            key: 'type',
            width: 150,
            render: (text) => (
                <Space>
                    {text}
                    <SearchOutlined style={{ color: '#1890ff', cursor: 'pointer' }} />
                </Space>
            ),
        },
        {
            title: '排放数量',
            dataIndex: 'quantity',
            key: 'quantity',
            width: 100,
        },
        {
            title: '数量单位',
            dataIndex: 'unit',
            key: 'unit',
            width: 100,
        },
        {
            title: '排放方式',
            dataIndex: 'method',
            key: 'method',
            width: 100,
        },
        {
            title: '趋向',
            dataIndex: 'trend',
            key: 'trend',
            width: 200,
            ellipsis: true,
        },
        {
            title: '操作',
            key: 'action',
            width: 80,
            render: (_, record) => (
                <Space size="middle">
                    <Tooltip title="删除">
                        <DeleteOutlined 
                            style={{ color: '#ff4d4f', cursor: 'pointer' }} 
                            onClick={() => handleDelete(record)}
                        />
                    </Tooltip>
                </Space>
            ),
        },
    ];

    // 模拟表格数据
    const mockTableData = [
        {
            key: '1',
            equipment: '比亚迪',
            material: '丁硼乳膏(雅皓)',
            facility: '净水设备234',
            type: '种类1',
            quantity: 47,
            unit: 'm³',
            method: '方式1',
            trend: '近3年下达中央预算内投'
        },
        {
            key: '2',
            equipment: '荣威',
            material: '东方活血膏(明仁)',
            facility: '净水设备234',
            type: '种类1',
            quantity: 34,
            unit: 'm³',
            method: '方式1',
            trend: '近3年下达中央预算内投'
        },
        {
            key: '3',
            equipment: '现代',
            material: '骨友灵搽剂(太极)',
            facility: '净水设备234',
            type: '种类1',
            quantity: 45,
            unit: 'm³',
            method: '方式1',
            trend: '刘某及同伴三人前往该射'
        },
        {
            key: '4',
            equipment: '日产',
            material: '对乙酰氨基酚栓',
            facility: '净水设备234',
            type: '种类1',
            quantity: 55,
            unit: 'm³',
            method: '方式1',
            trend: '一到假期,大量"xx暑假'
        },
        {
            key: '5',
            equipment: '北汽',
            material: '对乙酰氨基酚片(必理通)',
            facility: '净水设备234',
            type: '种类1',
            quantity: 22,
            unit: 'm³',
            method: '方式1',
            trend: '近日,陕西延安培文实验'
        }
    ];

    useEffect(() => {
        setTableData({
            list: mockTableData,
            pagination: {
                current: 6,
                pageSize: 5,
                total: 85
            }
        });
    }, []);

    // 处理删除操作
    const handleDelete = (record) => {
        message.success(`删除 ${record.equipment} 成功`);
    };

    // 处理新增操作
    const handleAdd = () => {
        message.info('新增功能开发中');
    };

    // 处理生成报表操作
    const handleGenerateReport = () => {
        message.info('生成报表功能开发中');
    };

    // 处理表格变化
    const handleTableChange = (pagination) => {
        setTableData(prev => ({
            ...prev,
            pagination: {
                ...prev.pagination,
                current: pagination.current,
                pageSize: pagination.pageSize
            }
        }));
    };


    return (
        <div className={styles.pollutionDashboard}>
            {/* 顶部统计区域 */}
            <div className={styles.statsSection}>
                {/* 污染物排放统计 */}
                <div className={styles.statsCard}>
                    <div className={styles.cardTitle}>
                        <span>污染物排放统计</span>
                        <div className={styles.cardHeader}>
                            <Select defaultValue="今日" className={styles.timeFilter}>
                                <Option value="今日">今日</Option>
                                <Option value="本周">本周</Option>
                                <Option value="本月">本月</Option>
                            </Select>
                            <Select defaultValue="所有名录" className={styles.categoryFilter}>
                                <Option value="所有名录">所有名录</Option>
                                <Option value="大气环境">大气环境</Option>
                                <Option value="水环境">水环境</Option>
                            </Select>
                        </div>
                    </div>
                    <div className={styles.chartsContainer}>
                        <div className={styles.pieChartContainer}>
                            <div className={styles.chartTitle}>超标污染物数量</div>
                            <ReactECharts 
                                option={pollutantEmissionOption} 
                                style={{ height: '120px', width: '100%' }}
                                opts={{ renderer: 'canvas' }}
                            />
                            <div className={styles.chartValue}>62%</div>
                        </div>
                        <div className={styles.pieChartContainer}>
                            <div className={styles.chartTitle}>超标污染物种类</div>
                            <ReactECharts 
                                option={pollutantTypeOption} 
                                style={{ height: '120px', width: '100%' }}
                                opts={{ renderer: 'canvas' }}
                            />
                            <div className={styles.chartValue}>25%</div>
                        </div>
                    </div>
                </div>

                {/* 超标排放统计 */}
                <div className={styles.statsCard}>
                    <div className={styles.cardTitle}>超标排放统计</div>
                    <div className={styles.cardHeader}>
                        <Select defaultValue="今日" className={styles.timeFilter}>
                            <Option value="今日">今日</Option>
                            <Option value="本周">本周</Option>
                            <Option value="本月">本月</Option>
                        </Select>
                        <Select defaultValue="所有名录" className={styles.categoryFilter}>
                            <Option value="所有名录">所有名录</Option>
                            <Option value="大气环境">大气环境</Option>
                            <Option value="水环境">水环境</Option>
                        </Select>
                    </div>
                    <div className={styles.barChartContainer}>
                        <ReactECharts 
                            option={exceedanceOption} 
                            style={{ height: '100px', width: '100%' }}
                            opts={{ renderer: 'canvas' }}
                        />
                    </div>
                </div>

                {/* 环境分类卡片 */}
                <div className={styles.environmentalCategories}>
                    <div className={styles.categoryCard}>
                        <div className={styles.categoryContent}>
                            <div className={styles.categoryInfo}>
                                <div className={styles.categoryTitle}>大气环境</div>
                                <div className={styles.categorySubtitle}>特征污染物名录库</div>
                            </div>
                            <div className={styles.categoryIcon}>
                                <div className={styles.factoryIcon}>🏭</div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.categoryCard}>
                        <div className={styles.categoryContent}>
                            <div className={styles.categoryInfo}>
                                <div className={styles.categoryTitle}>水环境</div>
                                <div className={styles.categorySubtitle}>特征污染物名录库</div>
                            </div>
                            <div className={styles.categoryIcon}>
                                <div className={styles.waterIcon}>💧</div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.categoryCard}>
                        <div className={styles.categoryContent}>
                            <div className={styles.categoryInfo}>
                                <div className={styles.categoryTitle}>土壤及地下水</div>
                                <div className={styles.categorySubtitle}>特征污染物名录库</div>
                            </div>
                            <div className={styles.categoryIcon}>
                                <div className={styles.soilIcon}>🌱</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* 污染源管理表格区域 */}
            <div className={styles.tableCard}>
                <div className={styles.cardTitle}>污染源管理</div>
                <div className={styles.tableHeader}>
                    <div className={styles.searchSection}>
                        <Input
                            placeholder="搜索污染源..."
                            prefix={<SearchOutlined />}
                            className={styles.searchInput}
                        />
                        <Button icon={<RobotOutlined />} className={styles.aiButton}>
                            AI
                        </Button>
                        <Button icon={<EditOutlined />} className={styles.editButton}>
                            编辑
                        </Button>
                        <Button icon={<MoreOutlined />} className={styles.moreButton}>
                            ...
                        </Button>
                    </div>
                    <div className={styles.actionButtons}>
                        <Button 
                            type="primary" 
                            icon={<PlusOutlined />} 
                            onClick={handleAdd}
                            className={styles.addButton}
                        >
                            新增
                        </Button>
                        <Button 
                            icon={<FileTextOutlined />} 
                            onClick={handleGenerateReport}
                            className={styles.reportButton}
                        >
                            生成报表
                        </Button>
                    </div>
                </div>
                
                <StandardTable
                    columns={columns}
                    data={tableData}
                    onChange={handleTableChange}
                    rowKey="key"
                    size="small"
                    scroll={{ x: 1200 }}
                />
            </div>
        </div>
    );
};

export default PollutionSourceManagement;

