import React, { useMemo, useState } from 'react';
import { Button, Checkbox, Select } from 'antd';
import {
    PlusOutlined,
} from '@ant-design/icons';
import styles from './EventReport.less';

const statusMeta = {
    pending: { label: '待处理', ribbon: '#12c48b', action: '立案', actionColor: '#12c48b' },
    awaiting: { label: '待接收', ribbon: '#fa8c16', action: '催办', actionColor: '#fa8c16' },
    processing: { label: '处理中', ribbon: '#8aa4beff', action: '不予立案', actionColor: '#3b9cff' },
    finished: { label: '已结束', ribbon: '#9a7bff', action: '查看报告', actionColor: '#3b82f6' },
};

const stats = [
    { title: '事件总数', value: 163, time: '2025-09-11 07:35' },
    { title: '待处理', value: 13, time: '2025-09-11 07:35' },
    { title: '处理中', value: 13, time: '2025-09-11 07:35' },
    { title: '待接收', value: 63, time: '2025-09-11 07:35' },
    { title: '已结束', value: 16, time: '2025-09-11 07:35' },
];

const events = [
    {
        id: 'e1',
        code: 'EVT-006 废水排放异常 (06-05)',
        status: 'pending',
        reporter: '98',
        assignTo: 'xxxxxxxxxx',
        response: 'xxxxxxxxxx',
        description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
        id: 'e2',
        code: 'EVT-006 废水排放异常 (06-05)',
        status: 'awaiting',
        reporter: '98',
        assignTo: 'xxxxxxxxxx',
        response: 'xxxxxxxxxx',
        description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
        id: 'e3',
        code: 'EVT-006 废水排放异常 (06-05)',
        status: 'finished',
        reporter: '98',
        assignTo: 'xxxxxxxxxx',
        response: 'xxxxxxxxxx',
        description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
        id: 'e4',
        code: 'EVT-006 废水排放异常 (06-05)',
        status: 'pending',
        reporter: '98',
        assignTo: 'xxxxxxxxxx',
        response: 'xxxxxxxxxx',
        description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
        id: 'e5',
        code: 'EVT-006 废水排放异常 (06-05)',
        status: 'awaiting',
        reporter: '98',
        assignTo: 'xxxxxxxxxx',
        response: 'xxxxxxxxxx',
        description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
        id: 'e6',
        code: 'EVT-006 废水排放异常 (06-05)',
        status: 'finished',
        reporter: '98',
        assignTo: 'xxxxxxxxxx',
        response: 'xxxxxxxxxx',
        description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
];

const EventReport = () => {
    const [selectedStatuses, setSelectedStatuses] = useState(Object.keys(statusMeta));
    const [reporterFilter, setReporterFilter] = useState('全部');

    const statusOptions = useMemo(
        () => Object.keys(statusMeta).map((key) => ({ label: statusMeta[key].label, value: key })),
        []
    );

    const filteredEvents = useMemo(
        () => events.filter((item) => selectedStatuses.includes(item.status)),
        [selectedStatuses]
    );

    return (
        <div className={styles.container}>
            <div className={styles.statsRow}>
                {stats.map((item) => (
                    <div key={item.title} className={styles.statCard}>
                        <div className={styles.statTitle}>{item.title}</div>
                        <div className={styles.statValue}>{item.value}</div>
                        <div className={styles.statTime}>{item.time}</div>
                    </div>
                ))}
            </div>

            <div className={styles.filterRow}>
                <Button type="primary" icon={<PlusOutlined />} className={styles.reportButton}>
                    上报事件
                </Button>
                <div className={styles.filters}>
                    <span className={styles.filterTitle}>事件状态</span>
                    <Checkbox.Group
                        options={statusOptions}
                        value={selectedStatuses}
                        onChange={setSelectedStatuses}
                        className={styles.statusGroup}
                    />
                    <div className={styles.rightFilters}>
                        <span className={styles.filterLabel}>举报类型</span>
                        <Select
                            value={reporterFilter}
                            onChange={setReporterFilter}
                            className={styles.select}
                            options={['全部', '匿名', '公众'].map((item) => ({ value: item, label: item }))}
                        />
                    </div>
                </div>
            </div>

            <div className={styles.grid}>
                {filteredEvents.map((item) => {
                    const meta = statusMeta[item.status];
                    return (
                        <div key={item.id} className={styles.card}>
                            <div className={styles.ribbon} style={{ background: meta.ribbon }}>
                                {meta.label}
                            </div>
                            <div className={styles.cardHeader}>
                                <span className={styles.cardTitle}>{item.code}</span>
                            </div>
                            <div className={styles.cardBody}>
                                <div className={styles.row}>事件地点 <span className={styles.emphasis}>{item.reporter}</span> <span className={styles.muted}>报警时间</span> <span className={styles.muted}>2025-02-05</span></div>
                                <div className={styles.row}>报警人 <span className={styles.muted}>{item.assignTo}</span></div>
                                <div className={styles.row}>报警方式 <span className={styles.muted}>{item.response}</span></div>
                                <div className={styles.row}>事件描述 <span className={styles.description}>{item.description}</span></div>
                            </div>
                            <div className={styles.cardFooter}>
                                <Button type="link" style={{ color: meta.actionColor }}>{meta.action}</Button>
                                <Button type="link" className={styles.secondaryAction}>不予立案</Button>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default EventReport;
