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

const statusMeta = {
    ongoing: { label: '进行中', ribbon: '#20c997' },
    published: { label: '已发布', ribbon: '#20c997' },
    finished: { label: '已结束', ribbon: '#fa8c16' },
    archived: { label: '已归档', ribbon: '#999999' },
};

const sampleFiles = [
    { type: 'pdf', name: '总结.pdf', icon: <FilePdfOutlined /> },
    { type: 'word', name: '方案.docx', icon: <FileWordOutlined /> },
    { type: 'img', name: '活动图片', icon: <PictureOutlined /> },
    { type: 'img', name: '活动图片', icon: <PictureOutlined /> },
    { type: 'img', name: '活动图片', icon: <PictureOutlined /> },
];

const activities = [
    {
        id: 'a1',
        title: '2024-01环境应急演练',
        participants: 98,
        duration: 'xxxxxxxx',
        owner: 'xxxxxxxx',
        attachments: sampleFiles,
        attachmentCount: 15,
        status: 'published',
        creator: '张三',
    },
    {
        id: 'a2',
        title: '2024-01环境应急演练',
        participants: 98,
        duration: 'xxxxxxxx',
        owner: 'xxxxxxxx',
        attachments: sampleFiles,
        attachmentCount: 15,
        status: 'finished',
        creator: '李四',
    },
    {
        id: 'a3',
        title: '2024-01环境应急演练',
        participants: 98,
        duration: 'xxxxxxxx',
        owner: 'xxxxxxxx',
        attachments: sampleFiles,
        attachmentCount: 15,
        status: 'archived',
        creator: '张三',
    },
    {
        id: 'a4',
        title: '2024-01环境应急演练',
        participants: 98,
        duration: 'xxxxxxxx',
        owner: 'xxxxxxxx',
        attachments: sampleFiles,
        attachmentCount: 15,
        status: 'published',
        creator: '李四',
    },
];

const ActivityManagement = () => {
    const [selectedStatuses, setSelectedStatuses] = useState(Object.keys(statusMeta));
    const [creator, setCreator] = useState('all');

    const creators = useMemo(() => ['全部', '张三', '李四'], []);

    const filteredActivities = useMemo(
        () => activities.filter((item) => selectedStatuses.includes(item.status)
            && (creator === 'all' || item.creator === creator)),
        [selectedStatuses, creator]
    );

    const handleStatusChange = (checkedValues) => {
        setSelectedStatuses(checkedValues);
    };

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

    return (
        <div className={styles.container}>
            <div className={styles.toolbar}>
                <Button type="primary" icon={<PlusOutlined />} className={styles.createButton}>
                    新建活动
                </Button>
                <div className={styles.filters}>
                    <div className={styles.filterGroup}>
                        <span className={styles.filterLabel}>活动状态</span>
                        <Checkbox.Group
                            options={statusOptions}
                            value={selectedStatuses}
                            onChange={handleStatusChange}
                            className={styles.statusGroup}
                        />
                    </div>
                    <div className={styles.filterGroup}>
                        <span className={styles.filterLabel}>创建人</span>
                        <Select
                            value={creator}
                            onChange={setCreator}
                            className={styles.creatorSelect}
                            options={creators.map((item, index) => ({ value: index === 0 ? 'all' : item, label: item }))}
                        />
                    </div>
                </div>
            </div>

            <div className={styles.grid}>
                {filteredActivities.map((item) => {
                    const status = statusMeta[item.status];
                    return (
                        <div key={item.id} className={styles.card}>
                            <div className={styles.ribbon} style={{ background: status.ribbon }}>
                                {status.label}
                            </div>
                            <div className={styles.cardBody}>
                                <div className={styles.titleRow}>
                                    <div className={styles.title}>{item.title}</div>
                                </div>
                                <div className={styles.metaRow}>
                                    <div>参与人数 <span className={styles.emphasis}>{item.participants}</span></div>
                                    <div>活动时长 <span className={styles.muted}>{item.duration}</span></div>
                                    <div>负责人 <span className={styles.muted}>{item.owner}</span></div>
                                </div>
                                <div className={styles.metaRow}>
                                    <div>附件数量 <span className={styles.emphasis}>{item.attachmentCount}</span></div>
                                </div>
                                <div className={styles.files}>
                                    {item.attachments.map((file, idx) => (
                                        <div key={`${item.id}-${idx}`} className={styles.fileChip}>
                                            {file.icon}
                                            <span>{file.name}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            <div className={styles.actions}>
                                <Button type="link" className={styles.view}>查看</Button>
                                <Button type="link" className={styles.copy}>复用</Button>
                                <Button type="link" className={styles.archive}>归档</Button>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default ActivityManagement;
