import React, { useState } from 'react';
import { Button, Form, Spinner, Card, Alert } from 'react-bootstrap';
import { toast } from 'react-toastify';
import './style.css';

const AudioUpload = ({ onAudioSelected }) => {
  const [audioFile, setAudioFile] = useState(null);
  const [loading, setLoading] = useState(false);
  const [audioFileName, setAudioFileName] = useState('');

  // 处理音频文件选择
  const handleAudioFileChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      // 检查文件类型
      if (!selectedFile.type.startsWith('audio/')) {
        toast.error('请选择有效的音频文件');
        e.target.value = '';
        return;
      }
      
      // 检查文件大小
      const maxSize = 512 * 1024 * 1024; // 512MB
      if (selectedFile.size > maxSize) {
        toast.error(`音频文件大小(${(selectedFile.size / (1024 * 1024)).toFixed(2)}MB)超过了512MB的限制，请选择较小的文件`);
        e.target.value = '';
        return;
      }
      
      setAudioFile(selectedFile);
      setAudioFileName(selectedFile.name);
      
      // 调用回调函数将音频文件传递给父组件
      if (typeof onAudioSelected === 'function') {
        onAudioSelected(selectedFile);
      }
      
      toast.success(`音频文件已选择，大小: ${(selectedFile.size / (1024 * 1024)).toFixed(2)}MB`);
    }
  };

  return (
    <div className="audio-upload-container">
      <Card>
        <Card.Header as="h5">上传音频（必选）</Card.Header>
        <Card.Body>
          <Alert variant="info">
            请上传项目需要的音频文件。音频和视频文件都是创建项目所必需的。
          </Alert>
          <Form>
            <Form.Group controlId="audioFile" className="mb-3">
              <Form.Label>选择音频文件</Form.Label>
              <div className="custom-file-upload">
                <input
                  type="file"
                  accept="audio/*"
                  onChange={handleAudioFileChange}
                  id="audio-file-input"
                  className="d-none"
                  required
                />
                <div className="file-upload-box">
                  <Button 
                    variant="outline-primary" 
                    onClick={() => document.getElementById('audio-file-input').click()}
                  >
                    选择音频
                  </Button>
                  <span className="ml-2">{audioFileName || '未选择音频文件'}</span>
                </div>
              </div>
              {!audioFile && (
                <Form.Text className="text-danger">
                  请上传音频文件，这是必选项
                </Form.Text>
              )}
              {audioFile && (
                <Form.Text className="text-success">
                  音频文件已选择 ✓
                </Form.Text>
              )}
              <Form.Text className="text-muted">
                支持的格式: MP3, WAV, OGG等常见音频格式，文件大小不能超过512MB
              </Form.Text>
            </Form.Group>
          </Form>
        </Card.Body>
      </Card>
    </div>
  );
};

export default AudioUpload; 