import React, { useState } from 'react';
import { Input, Button, Select, DatePicker, TimePicker, Checkbox, Steps } from 'antd';
import { BellOutlined, EditOutlined, EyeOutlined, CheckCircleOutlined, FolderOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './DutyHandover.less';

import iconDrill8 from '@/assets/business_Emergency/iconDrill8.svg';
import iconDrill9 from '@/assets/business_Emergency/iconDrill9.svg';
import iconDrill10 from '@/assets/business_Emergency/iconDrill10.svg';
import iconDrill11 from '@/assets/business_Emergency/iconDrill11.svg';
import iconDuty1 from '@/assets/business_Emergency/iconDuty1.svg';
import iconDuty2 from '@/assets/business_Emergency/iconDuty2.svg';
import iconDuty3 from '@/assets/business_Emergency/iconDuty3.svg';
import iconDuty4 from '@/assets/business_Emergency/iconDuty4.svg';
import iconDuty5 from '@/assets/business_Emergency/iconDuty5.svg';

const { TextArea } = Input;

const DutyHandover = () => {
    const [loading, setLoading] = useState(false);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 5,
        total: 48,
        showSizeChanger: false,
        showQuickJumper: false,
        showTotal: (total) => `共 ${total} 条`,
    });

    // 最近交接班记录数据
    const [dataSource] = useState([
        {
            key: '1',
            time: '2025-10-19 15:35:27',
            handoverPerson: '武今',
            receivePerson: '何永毅',
            status: '已确认',
        },
        {
            key: '2',
            time: '2025-10-15 13:44:41',
            handoverPerson: '钱佳乔',
            receivePerson: '郑雨元',
            status: '有疑问',
        },
        {
            key: '3',
            time: '2025-10-15 00:29:03',
            handoverPerson: '李宏涛',
            receivePerson: '周静',
            status: '已确认',
        },
        {
            key: '4',
            time: '2025-10-14 17:21:38',
            handoverPerson: '吴显德',
            receivePerson: '李卓俊',
            status: '已确认',
        },
        {
            key: '5',
            time: '2025-10-15 02:30:41',
            handoverPerson: '何伟李',
            receivePerson: '周国华',
            status: '已确认',
        },
    ]);

    // 表格列配置
    const columns = [
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            width: 220
        },
        {
            title: '交班人',
            dataIndex: 'handoverPerson',
            key: 'handoverPerson',
        },
        {
            title: '接班人',
            dataIndex: 'receivePerson',
            key: 'receivePerson',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status) => (
                <span className={status === '已确认' ? styles.statusSuccess : styles.statusWarning}>
                    {status}
                </span>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: () => (
                <Button type="link" size="small" className={styles.linkBtn}>
                    查看详情
                </Button>
            ),
        },
    ];

    // 分页处理
    const handleTableChange = (pagination) => {
        setPagination(pagination);
    };

    return (
        <div className={styles.pageWrapper}>
            {/* 第一行：交接提醒 */}
            <div className={styles.alertBar}>
                <img src={iconDrill8} alt="交接提醒" />
                <span style={{ color: '#FF8800', marginRight: '-5px' }}>交接提醒：</span>
                <span>距离下一班交接时间还有 2小时30分钟，请提前准备交班内容。</span>
            </div>

            {/* 第二行：主内容区域 */}
            <div className={styles.mainContent}>
                {/* A块：左侧区域 */}
                <div className={styles.leftArea}>
                    {/* a块：统计数据 */}
                    <div className={styles.statsBlock}>
                        <div className={styles.statItem}>
                            <div className={styles.statContent}>
                                <div className={styles.statLabel}>本月交接班次数</div>
                                <div className={styles.statValue}>24</div>
                            </div>
                            <img src={iconDrill9} alt="交接班次数" />
                        </div>
                        <div className={styles.statItem}>

                            <div className={styles.statContent}>
                                <div className={styles.statLabel}>交接班完成率</div>
                                <div className={styles.statValue}>98%</div>
                            </div>
                            <img src={iconDrill11} alt="交接班完成率" style={{ marginLeft: '15px' }} />
                        </div>
                        <div className={styles.statItem}>

                            <div className={styles.statContent}>
                                <div className={styles.statLabel}>待处理事项</div>
                                <div className={styles.statValue}>24</div>
                            </div>
                            <img src={iconDrill10} alt="待处理事项" style={{ marginLeft: '25px' }} />
                        </div>
                    </div>

                    {/* b块：交接班流程 */}
                    <div className={styles.flowBlock}>
                        <div className={styles.flowTitle}>交接班流程</div>
                        <div className={styles.flowContent}>
                            <Steps
                                current={1}
                                labelPlacement="vertical"
                                items={[
                                    {
                                        title: '系统提醒',
                                        description: '交班前30分钟，系统自动提醒交接班人员',
                                        status: 'finish',
                                        icon: <img src={iconDuty1} alt="系统提醒" />,
                                    },
                                    {
                                        title: '填写交班内容',
                                        description: '交班人员填写值班情况和重要事情，未完成任务等信息',
                                        status: 'process',
                                        icon: <img src={iconDuty2} alt="填写交班内容" />,
                                    },
                                    {
                                        title: '查看交班内容',
                                        description: '接班人员登录查看交班内容，全面了解值班情况',
                                        status: 'wait',
                                        icon: <img src={iconDuty3} alt="查看交班内容" />,
                                    },
                                    {
                                        title: '确认与签字',
                                        description: '双方确认系统填写信息认签字，完成交接',
                                        status: 'wait',
                                        icon: <img src={iconDuty4} alt="确认与签字" />,
                                    },
                                    {
                                        title: '记录存档',
                                        description: '系统自动对交接班记录进行存档，方便查询和审计',
                                        status: 'wait',
                                        icon: <img src={iconDuty5} alt="记录存档" />,
                                    },
                                ]}
                            />
                        </div>
                    </div>

                    {/* c块：最近交接班记录 */}
                    <div className={styles.tableBlock}>
                        <div className={styles.tableHeader}>
                            <span className={styles.tableTitle}>最近交接班记录</span>
                        </div>
                        <StandardTable
                            columns={columns}
                            data={{
                                list: dataSource,
                                pagination: pagination
                            }}
                            rowKey="key"
                            selectedRows={selectedRowKeys}
                            onSelectRow={setSelectedRowKeys}
                            onChange={handleTableChange}
                            loading={loading}
                        />
                    </div>
                </div>

                {/* B块：右侧区域 */}
                <div className={styles.rightArea}>
                    <div className={styles.formBlock}>
                        <div className={styles.formTitle}>交接班内容提醒</div>

                        {/* 交班人和接班人 */}
                        <div className={styles.formRow}>
                            <div className={styles.formItem}>
                                <label className={styles.formLabel}>交班人</label>
                                <Select
                                    placeholder="张小明"
                                    className={styles.formInput}
                                />
                            </div>
                            <div className={styles.formItem}>
                                <label className={styles.formLabel}>接班人</label>
                                <Select
                                    placeholder="李敏"
                                    className={styles.formInput}
                                />
                            </div>
                        </div>

                        {/* 日期和交班时间 */}
                        <div className={styles.formRow}>
                            <div className={styles.formItem}>
                                <label className={styles.formLabel}>日期</label>
                                <DatePicker
                                    placeholder="2025/10/16"
                                    className={styles.formInput}
                                />
                            </div>
                            <div className={styles.formItem}>
                                <label className={styles.formLabel}>交班时间</label>
                                <TimePicker
                                    placeholder="20:00"
                                    format="HH:mm"
                                    className={styles.formInput}
                                />
                            </div>
                        </div>

                        {/* 值班期间重要事件描述 */}
                        <div className={styles.formFullRow}>
                            <label className={styles.formLabel}>值班期间重要事件描述</label>
                            <div className={styles.eventList}>
                                <div className={styles.eventItem}>
                                    1. 10-23 接到火灾报警器误报，已进行本人员处理，11:45 修复完成。
                                    2. 10-24 进行了一起巡检交给本人，间题已解决。
                                </div>
                            </div>
                        </div>


                        <div className={styles.formFullRow}>
                            <label className={styles.formLabel}>未完成工作任务</label>
                            <div className={styles.eventList}>
                                <div className={styles.eventItem}>
                                    请列出尚未完成需要接班人员需要处理的工作任务...
                                </div>
                            </div>
                        </div>

                
                        <div className={styles.formFullRow}>
                            <label className={styles.formLabel}>设备运行状态</label>
                            <div className={styles.taskList}>
                                <Checkbox className={styles.taskCheckbox}>
                                    监控系统-运行正常
                                </Checkbox>
                                <Checkbox className={styles.taskCheckbox} >
                                    通讯设备-运行正常
                                </Checkbox>
                                <Checkbox className={styles.taskCheckbox} >
                                    应急电源-运行正常
                                </Checkbox>
                            </div>
                        </div>

                        {/* 按钮组 */}
                        <div className={styles.formActions}>
                            <Button className={styles.btnDefault}>保存草稿</Button>
                            <Button type="primary" className={styles.btnPrimary}>
                                提交交接班内容
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DutyHandover;

