import React from 'react';
import { Spin } from 'antd';

const ProjectWarningView = ({ projects = [], loading = false,onClick}) => {
    const warningFields = [
        { key: 'new_team', label: '新班组', message: '存在新班组，请做好班组入场管理。' },
        { key: 'new_homework_content', label: '新的作业内容', message: '存在新的作业内容，请加强现场管控。' },
        { key: 'change_homework_method', label: '改变作业方法', message: '存在改变作业方法，请及时核查施工方案编审、方案交底及人员、机具准备情况。' },
        { key: 'changes_geographical', label: '地理环境的变化', message: '存在作业环境的变化，请及时核查施工方案编审、方案交底及人员、机具准备情况。' },
        { key: 'changes_meteorological', label: '气象环境的变化', message: '存在气象预警，请关注天气变化，做好应对措施。' },
        { key: 'changes_social', label: '社会环境的变化', message: '存在社会环境变化，请合理安排作业计划，避免人员失控。' },
        { key: 'changes_management', label: '管理要求的变化', message: '存在管理要求的变化，请加强现场巡查力度，严防无计划作业。' },
        { key: 'changes_homework_plan', label: '作业计划的变化', message: '存在作业计划的变化，请做好施工力量配备。' },
        { key: 'changes_management_personnel', label: '管理人员的变化', message: '存在管理人员的变化，请加强现场管控。' },
    ];

    const hasWarnings = (item) => {
        if (typeof item !== 'object') return false;
        if (item.new_members || item.new_high_altitude || item.new_hired_general) return true;
        return warningFields.some(({ key }) => item[key]);
    };

    const filteredProjects = projects.filter(hasWarnings);

    return (
        <div
            className="project-warning-view"
        >
            <div
                style={{
                    padding: '16px 20px',
                    fontWeight: '700',
                    fontSize: '18px',
                    userSelect: 'none',
                    borderBottom: '1px solid var(--vscode-sidebar-border)'
                }}
            >
                工程预警
            </div>

            <div
                style={{
                    padding: '20px',
                    overflowY: 'auto',
                    flexGrow: 1,
                    maxHeight: '90%',
                    scrollbarWidth: 'thin',
                    scrollbarColor: '#c1c1c1 transparent',
                }}

            >
                <Spin spinning={loading} tip="加载中...">
                    {!loading && (
                        <>
                            {filteredProjects.length > 0 ? (
                                <div
                                    style={{
                                        display: 'grid',
                                        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
                                        gap: '24px',
                                    }}
                                >
                                    {filteredProjects.map((item, index) => (
                                        <div
                                            key={index}
                                            style={{
                                                border: '1px solid #ddd',

                                                borderRadius: '12px',
                                                padding: '20px',
                                                boxShadow: '0 6px 15px rgba(0,0,0,0.07)',
                                                transition: 'transform 0.3s ease, box-shadow 0.3s ease',
                                                cursor: 'pointer',
                                                display: 'flex',
                                                flexDirection: 'column',
                                                gap: '12px',
                                                userSelect: 'none',
                                            }}
                                            onClick={() => onClick(item)}
                                            onMouseEnter={(e) => {
                                                e.currentTarget.style.transform = 'translateY(-6px) scale(1.02)';
                                                e.currentTarget.style.boxShadow = '0 12px 24px rgba(0,0,0,0.15)';
                                            }}
                                            onMouseLeave={(e) => {
                                                e.currentTarget.style.transform = 'translateY(0) scale(1)';
                                                e.currentTarget.style.boxShadow = '0 6px 15px rgba(0,0,0,0.07)';
                                            }}
                                            title={typeof item === 'string' ? item : item.sub_project_name || '未命名项目'}
                                        >
                                            <div
                                                style={{
                                                    fontWeight: '700',
                                                    fontSize: '16px',
                                                    whiteSpace: 'nowrap',
                                                    overflow: 'hidden',
                                                    textOverflow: 'ellipsis',
                                                    maxWidth: '100%',
                                                }}
                                            >
                                                {typeof item === 'string' ? item : item.sub_project_name || '未命名项目'}
                                            </div>

                                            {(item.new_members || item.new_high_altitude || item.new_hired_general) && (
                                                <div
                                                    style={{
                                                        fontSize: '14px',
                                                        color: '#e64c3c',
                                                        fontWeight: '600',
                                                        borderLeft: '4px solid #e64c3c',
                                                        paddingLeft: '10px',
                                                    }}
                                                >
                                                    新人: 存在新人员，请做好人员“面对面”核实。
                                                </div>
                                            )}

                                            {warningFields.map(({key, label, message}) =>
                                                item[key] ? (
                                                    <div
                                                        key={key}
                                                        style={{
                                                            fontSize: '14px',
                                                            color: '#e64c3c',
                                                            fontWeight: '600',
                                                            borderLeft: '4px solid #e64c3c',
                                                            paddingLeft: '10px',
                                                        }}
                                                    >
                                                        {label}: {message}
                                                    </div>
                                                ) : null
                                            )}
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div
                                    style={{
                                        textAlign: 'center',
                                        color: '#aaa',
                                        fontSize: '15px',
                                        marginTop: '50px',
                                        userSelect: 'none',
                                    }}
                                >
                                    暂无项目预警
                                </div>
                            )}
                        </>
                    )}
                </Spin>
            </div>
        </div>
    );
};

export default ProjectWarningView;