import React, { useRef, useEffect } from 'react';

/**
 * 文件上传模态框组件
 */
const FileUploadModal = ({
    show,
    newFile,
    fileErrors,
    isSubmitting,
    onClose,
    onDescriptionChange,
    onFileChange,
    onFileDrop,
    onDragOver,
    onUploadAreaClick,
    onUpload,
}) => {
    const fileInputRef = useRef(null);
    const modalRef = useRef(null);

    // 处理上传区域点击事件
    const handleUploadAreaClick = () => {
        fileInputRef.current?.click();
    };

    // 处理拖拽事件
    const handleDragOver = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onDragOver?.(e);
    };

    const handleDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onFileDrop?.(e);
    };

    // 清理函数
    useEffect(() => {
        return () => {
            // 确保在组件卸载时清理所有引用
            if (fileInputRef.current) {
                fileInputRef.current.value = '';
            }
            if (modalRef.current) {
                modalRef.current = null;
            }
        };
    }, []);

    if (!show) return null;

    return (
        <div
            ref={modalRef}
            className='modal-backdrop'
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 1050,
            }}
        >
            <div
                className='modal-content bg-white rounded shadow'
                style={{
                    width: '500px',
                    maxWidth: '90%',
                    padding: '20px',
                }}
            >
                <div className='modal-header d-flex justify-content-between align-items-center mb-3'>
                    <h5 className='modal-title m-0'>上传文件</h5>
                    <button type='button' className='btn-close' onClick={onClose} aria-label='Close'></button>
                </div>
                <div className='modal-body'>
                    <div
                        className={`mb-3 p-4 border rounded text-center ${
                            fileErrors.file ? 'border-danger' : 'border-dashed'
                        }`}
                        style={{ cursor: 'pointer' }}
                        onClick={handleUploadAreaClick}
                        onDrop={handleDrop}
                        onDragOver={handleDragOver}
                    >
                        <input
                            type='file'
                            ref={fileInputRef}
                            className='d-none'
                            onChange={onFileChange}
                            accept='.pdf,.docx,.txt,.csv'
                        />
                        {newFile.file ? (
                            <div>
                                <p className='mb-1'>已选择文件：</p>
                                <p className='fw-bold mb-0'>{newFile.file.name}</p>
                            </div>
                        ) : (
                            <div>
                                <p className='mb-1'>点击或拖拽文件到此处上传</p>
                                <p className='text-muted small mb-0'>支持 PDF, DOCX, TXT, CSV 等格式</p>
                            </div>
                        )}
                        {fileErrors.file && <div className='text-danger mt-2'>{fileErrors.file}</div>}
                    </div>
                    <div className='mb-3'>
                        <label htmlFor='fileDescription' className='form-label'>
                            文件描述
                        </label>
                        <textarea
                            className='form-control'
                            id='fileDescription'
                            rows='3'
                            value={newFile.description}
                            onChange={onDescriptionChange}
                            placeholder='请输入文件描述（可选）'
                        ></textarea>
                    </div>
                </div>
                <div className='modal-footer gap-2'>
                    <button type='button' className='btn btn-secondary' onClick={onClose}>
                        取消
                    </button>
                    <button
                        type='button'
                        className='btn btn-dark'
                        onClick={onUpload}
                        disabled={!newFile.file || isSubmitting}
                    >
                        {isSubmitting ? (
                            <>
                                <span
                                    className='spinner-border spinner-border-sm me-2'
                                    role='status'
                                    aria-hidden='true'
                                ></span>
                                上传中...
                            </>
                        ) : (
                            '上传'
                        )}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default FileUploadModal;