import React, { useMemo } from 'react';
import { Button, Checkbox, Select } from 'antd';
import ReactECharts from 'echarts-for-react';
import styles from './StatisticsAnalysis.less';

const statusOptions = [
    { label: '环保活动', value: 'env' },
    { label: '环保事件', value: 'event' },
    { label: '环保事件', value: 'incident' },
];

const StatisticsAnalysis = () => {
    const activityTypeOption = useMemo(
        () => ({
            color: ['#6abdfc', '#a585ff', '#fa8c16', '#ff6b6b'],
            tooltip: { trigger: 'item' },
            legend: { orient: 'vertical', left: '70%' },
            series: [
                {
                    type: 'pie',
                    radius: ['30%', '60%'],
                    center: ['35%', '50%'],
                    label: { formatter: '{b}: {d}%' },
                    data: [
                        { value: 30, name: '培训' },
                        { value: 15, name: '演练' },
                        { value: 10, name: '其他' },
                        { value: 45, name: '宣传' },
                    ],
                },
            ],
        }),
        []
    );

    const participationOption = useMemo(
        () => ({
            color: ['#6ee7d8', '#8fd0ff'],
            tooltip: { trigger: 'axis' },
            grid: { left: 80, right: 30, top: 30, bottom: 30 },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.1],
                axisLine: { lineStyle: { color: '#d8dfe6' } },
            },
            yAxis: {
                type: 'category',
                data: ['xxx部门', 'xxx部门', 'xxx部门', 'xxx部门', 'xxx部门', 'xxx部门'],
                axisLine: { lineStyle: { color: '#d8dfe6' } },
            },
            series: [
                {
                    name: '参与率',
                    type: 'bar',
                    barWidth: 16,
                    data: [92, 88, 74, 56, 48, 30],
                    label: { show: false },
                },
            ],
        }),
        []
    );

    const incidentTypeOption = useMemo(
        () => ({
            color: ['#4b7bff', '#5fd6f1', '#2fd192', '#ff9f7f', '#e85d8b', '#5e6ce6'],
            tooltip: { trigger: 'item' },
            legend: { orient: 'vertical', right: 10, top: 'middle' },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '65%'],
                    center: ['40%', '50%'],
                    label: { formatter: '{b} {d}%' },
                    data: [
                        { value: 45, name: 'xxx2' },
                        { value: 10, name: 'xxx3' },
                        { value: 9, name: 'xxx5' },
                        { value: 13, name: 'xxx4' },
                        { value: 15, name: 'xxx3' },
                        { value: 8, name: 'xxx6' },
                    ],
                },
            ],
        }),
        []
    );

    const trendOption = useMemo(
        () => ({
            color: ['#6abdfc', '#f7a35c'],
            tooltip: { trigger: 'axis' },
            grid: { left: 50, right: 50, top: 30, bottom: 40 },
            xAxis: [{ type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }],
            yAxis: [
                { type: 'value', name: '活动数', axisLine: { lineStyle: { color: '#d8dfe6' } } },
                { type: 'value', name: '参与率', axisLine: { lineStyle: { color: '#d8dfe6' } } },
            ],
            series: [
                {
                    name: '活动数',
                    type: 'bar',
                    data: [8, 18, 12, 10, 13, 9, 11, 10, 12, 16, 9, 14],
                    barWidth: 14,
                },
                {
                    name: '参与率',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [55, 60, 58, 63, 60, 62, 65, 63, 64, 68, 66, 70],
                    smooth: true,
                },
            ],
        }),
        []
    );

    const departmentOption = useMemo(
        () => ({
            color: ['#6abdfc', '#63e2b7'],
            tooltip: { trigger: 'axis' },
            legend: { top: 0 },
            grid: { left: 50, right: 20, top: 40, bottom: 30 },
            xAxis: [{ type: 'category', data: ['生产部', '运营部', '安全部', '后勤部', '质检部', '供应部'] }],
            yAxis: [{ type: 'value' }],
            series: [
                { name: '事件总数', type: 'bar', barWidth: 12, data: [35, 22, 28, 18, 20, 25] },
                { name: '处置完成', type: 'bar', barWidth: 12, data: [28, 18, 20, 14, 16, 19] },
            ],
        }),
        []
    );

    return (
        <div className={styles.container}>
            <div className={styles.toolbar}>
                <Button type="primary">导出PDF</Button>
                <div className={styles.toolbarFilters}>
                    <span className={styles.filterLabel}>事件状态</span>
                    <Checkbox.Group options={statusOptions} value={statusOptions.map((item) => item.value)} />
                    <span className={styles.filterLabel}>统计周期</span>
                    <Select defaultValue="2024年上半年" className={styles.select} options={[{ value: '2024H1', label: '2024年上半年' }, { value: '2024H2', label: '2024年下半年' }]} />
                    <span className={styles.filterLabel}>对比周期</span>
                    <Select defaultValue="去年同期" className={styles.select} options={[{ value: 'lastYear', label: '去年同期' }, { value: '去年全年', label: '去年全年' }]} />
                </div>
            </div>

            <div className={styles.rowThree}>
                <div className={styles.card}>
                    <div className={styles.cardTitle}>活动类型分布</div>
                    <ReactECharts option={activityTypeOption} style={{ height: 240 }} />
                </div>
                <div className={styles.card}>
                    <div className={styles.cardTitle}>活动参与热度</div>
                    <ReactECharts option={participationOption} style={{ height: 240 }} />
                </div>
                <div className={styles.card}>
                    <div className={styles.cardTitle}>事件类型分布</div>
                    <ReactECharts option={incidentTypeOption} style={{ height: 240 }} />
                </div>
            </div>

            <div className={styles.rowTwo}>
                <div className={styles.cardWide}>
                    <div className={styles.cardTitle}>月度活动趋势</div>
                    <ReactECharts option={trendOption} style={{ height: 240 }} />
                </div>
                <div className={styles.card}>
                    <div className={styles.cardTitle}>事件部门分布</div>
                    <ReactECharts option={departmentOption} style={{ height: 240 }} />
                </div>
            </div>
        </div>
    );
};

export default StatisticsAnalysis;
