import React, { useState } from 'react';
import { Button } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import moment from 'moment';
import styles from './DutySchedule.less';

const DutySchedule = () => {
    // 当前周的起始日期
    const [currentWeekStart, setCurrentWeekStart] = useState(moment().startOf('week'));
    
    // 生成当前周的日期数组
    const getWeekDates = (startDate) => {
        const dates = [];
        for (let i = 0; i < 7; i++) {
            dates.push(moment(startDate).add(i, 'days'));
        }
        return dates;
    };
    
    const weekDates = getWeekDates(currentWeekStart);
    
    // 周导航
    const handlePrevWeek = () => {
        setCurrentWeekStart(moment(currentWeekStart).subtract(1, 'week'));
    };
    
    const handleNextWeek = () => {
        setCurrentWeekStart(moment(currentWeekStart).add(1, 'week'));
    };
    
    const handleThisWeek = () => {
        setCurrentWeekStart(moment().startOf('week'));
    };
    
    // 模拟排班数据
    const scheduleData = {
        '2023-10-16': {
            morning: [{ name: '何宇', status: 'onduty' }],
            middle: [],
            evening: [{ name: '何宇', status: 'leave' }]
        },
        '2023-10-17': {
            morning: [],
            middle: [{ name: '张三', status: 'onduty' }, { name: '李四', status: 'vacation' }],
            evening: []
        },
        '2023-10-18': {
            morning: [{ name: '王在在', status: 'onduty' }, { name: '李四', status: 'leave' }],
            middle: [],
            evening: [{ name: '王在在', status: 'onduty' }, { name: '李四', status: 'leave' }]
        },
        '2023-10-19': {
            morning: [],
            middle: [{ name: '何宇', status: 'onduty' }],
            evening: []
        },
        '2023-10-20': {
            morning: [],
            middle: [{ name: '何宇', status: 'onduty' }],
            evening: [{ name: '暂无', status: 'none' }, { name: '安排', status: 'none' }]
        },
        '2023-10-21': {
            morning: [{ name: '张三', status: 'onduty' }, { name: '李四', status: 'vacation' }],
            middle: [],
            evening: [{ name: '马婧', status: 'vacation' }, { name: '冯俊', status: 'leave' }]
        },
        '2023-10-22': {
            morning: [{ name: '暂无', status: 'none' }, { name: '安排', status: 'none' }],
            middle: [],
            evening: [{ name: '何宇', status: 'onduty' }]
        }
    };
    
    // 获取单元格数据
    const getCellData = (date, shift) => {
        const dateKey = date.format('YYYY-MM-DD');
        const data = scheduleData[dateKey];
        if (!data) return [];
        return data[shift] || [];
    };
    
    // 渲染单元格
    const renderCell = (date, shift) => {
        const cellData = getCellData(date, shift);
        
        if (cellData.length === 0) {
            return <div className={styles.emptyCell}></div>;
        }
        
        return (
            <div className={styles.cellContent}>
                {cellData.map((item, index) => (
                    <div key={index} className={styles.personItem}>
                        <div className={styles.personName}>{item.name}</div>
                        <div className={`${styles.statusTag} ${styles[item.status]}`}>
                            {item.status === 'onduty' && '在岗'}
                            {item.status === 'leave' && '休假'}
                            {item.status === 'vacation' && '请假'}
                            {item.status === 'none' && ''}
                        </div>
                    </div>
                ))}
            </div>
        );
    };
    
    // 获取单元格背景色类名
    const getCellClassName = (date, shift) => {
        const cellData = getCellData(date, shift);
        if (cellData.length === 0) return '';
        
        // 如果有多个人，取第一个人的状态
        const status = cellData[0].status;
        
        // 检查是否所有人状态相同
        const allSameStatus = cellData.every(item => item.status === status);
        
        if (allSameStatus) {
            return styles[`bg_${status}`];
        }
        
        // 如果状态不同，返回混合状态类名
        return styles.bg_mixed;
    };
    
    return (
        <div className={styles.container}>
            {/* 页面标题 */}
            <div className={styles.header}>
                <div className={styles.titleBar}></div>
                <h2 className={styles.title}>值班排班表</h2>
            </div>
            
            {/* 顶部控制栏 */}
            <div className={styles.toolbar}>
                <div className={styles.toolbarLeft}>
                    <div className={styles.legend}>
                        <span className={styles.legendItem}>
                            <span className={`${styles.legendDot} ${styles.onduty}`}></span>
                            在岗
                        </span>
                        <span className={styles.legendItem}>
                            <span className={`${styles.legendDot} ${styles.leave}`}></span>
                            休假
                        </span>
                        <span className={styles.legendItem}>
                            <span className={`${styles.legendDot} ${styles.vacation}`}></span>
                            请假
                        </span>
                        <span className={styles.legendItem}>
                            <span className={`${styles.legendDot} ${styles.none}`}></span>
                            暂无安排
                        </span>
                    </div>
                </div>
                
                <div className={styles.toolbarRight}>
                    <span className={styles.dateRange}>
                        {currentWeekStart.format('YYYY-MM-DD')} 至 {moment(currentWeekStart).add(6, 'days').format('YYYY-MM-DD')}
                    </span>
                    <div className={styles.weekNav}>
                        <Button onClick={handlePrevWeek} size="small" className={styles.navButton}>
                            上周
                        </Button>
                        <Button onClick={handleThisWeek} size="small" type="primary" className={styles.navButtonActive}>
                            本周
                        </Button>
                        <Button onClick={handleNextWeek} size="small" className={styles.navButton}>
                            下周
                        </Button>
                    </div>
                </div>
            </div>
            
            {/* 排班表格 */}
            <div className={styles.scheduleTable}>
                <table className={styles.table}>
                    <thead>
                        <tr>
                            <th className={styles.shiftHeader}>日期/班次</th>
                            <th className={styles.dayHeader}>
                                <div className={styles.dayName}>周一</div>
                                <div className={styles.dayDate}>{weekDates[0].format('MM/DD')}</div>
                            </th>
                            <th className={styles.dayHeader}>
                                <div className={styles.dayName}>周二</div>
                                <div className={styles.dayDate}>{weekDates[1].format('MM/DD')}</div>
                            </th>
                            <th className={styles.dayHeader}>
                                <div className={styles.dayName}>周三</div>
                                <div className={styles.dayDate}>{weekDates[2].format('MM/DD')}</div>
                            </th>
                            <th className={styles.dayHeader}>
                                <div className={styles.dayName}>周四</div>
                                <div className={styles.dayDate}>{weekDates[3].format('MM/DD')}</div>
                            </th>
                            <th className={styles.dayHeader}>
                                <div className={styles.dayName}>周五</div>
                                <div className={styles.dayDate}>{weekDates[4].format('MM/DD')}</div>
                            </th>
                            <th className={styles.dayHeader}>
                                <div className={styles.dayName}>周六</div>
                                <div className={styles.dayDate}>{weekDates[5].format('MM/DD')}</div>
                            </th>
                            <th className={styles.dayHeader}>
                                <div className={styles.dayName}>周日</div>
                                <div className={styles.dayDate}>{weekDates[6].format('MM/DD')}</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* 早班 */}
                        <tr>
                            <td className={styles.shiftCell}>
                                <div className={styles.shiftName}>早班</div>
                                <div className={styles.shiftTime}>08:00-16:00</div>
                            </td>
                            {weekDates.map((date, index) => (
                                <td key={index} className={`${styles.scheduleCell} ${getCellClassName(date, 'morning')}`}>
                                    {renderCell(date, 'morning')}
                                </td>
                            ))}
                        </tr>
                        
                        {/* 中班 */}
                        <tr>
                            <td className={styles.shiftCell}>
                                <div className={styles.shiftName}>中班</div>
                                <div className={styles.shiftTime}>16:00-24:00</div>
                            </td>
                            {weekDates.map((date, index) => (
                                <td key={index} className={`${styles.scheduleCell} ${getCellClassName(date, 'middle')}`}>
                                    {renderCell(date, 'middle')}
                                </td>
                            ))}
                        </tr>
                        
                        {/* 晚班 */}
                        <tr>
                            <td className={styles.shiftCell}>
                                <div className={styles.shiftName}>晚班</div>
                                <div className={styles.shiftTime}>00:00-08:00</div>
                            </td>
                            {weekDates.map((date, index) => (
                                <td key={index} className={`${styles.scheduleCell} ${getCellClassName(date, 'evening')}`}>
                                    {renderCell(date, 'evening')}
                                </td>
                            ))}
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default DutySchedule;
