imetting/frontend/src/components/MeetingFormDrawer.jsx

import React, { useState, useEffect } from 'react';
import { Drawer, Form, Input, Button, DatePicker, Select, Space, App, Upload, Card, Progress, Typography } from 'antd';
import { SaveOutlined, UploadOutlined, DeleteOutlined, AudioOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import apiClient from '../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
import configService from '../utils/configService';
import { AUDIO_UPLOAD_ACCEPT, uploadMeetingAudio, validateMeetingAudioFile } from '../services/meetingAudioService';

const { Text } = Typography;

const MeetingFormDrawer = ({ open, onClose, onSuccess, meetingId = null }) => {
  const { message } = App.useApp();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [fetching, setFetching] = useState(false);
  const [users, setUsers] = useState([]);
  const [prompts, setPrompts] = useState([]);
  const [selectedAudioFile, setSelectedAudioFile] = useState(null);
  const [audioUploading, setAudioUploading] = useState(false);
  const [audioUploadProgress, setAudioUploadProgress] = useState(0);
  const [audioUploadMessage, setAudioUploadMessage] = useState('');
  const [maxAudioSize, setMaxAudioSize] = useState(100 * 1024 * 1024);

  const isEdit = Boolean(meetingId);

  useEffect(() => {
    if (!open) return;
    fetchOptions();
    loadAudioUploadConfig();
    if (isEdit) {
      fetchMeeting();
    } else {
      form.resetFields();
      form.setFieldsValue({ meeting_time: dayjs() });
      setSelectedAudioFile(null);
      setAudioUploading(false);
      setAudioUploadProgress(0);
      setAudioUploadMessage('');
    }
  }, [open, meetingId]);

  const fetchOptions = async () => {
    try {
      const [uRes, pRes] = await Promise.all([
        apiClient.get(buildApiUrl(API_ENDPOINTS.USERS.LIST)),
        apiClient.get(buildApiUrl(API_ENDPOINTS.PROMPTS.ACTIVE('MEETING_TASK'))),
      ]);
      setUsers(uRes.data.users || []);
      setPrompts(pRes.data.prompts || []);
    } catch {}
  };

  const loadAudioUploadConfig = async () => {
    try {
      const nextMaxAudioSize = await configService.getMaxAudioSize();
      setMaxAudioSize(nextMaxAudioSize || 100 * 1024 * 1024);
    } catch (error) {
      setMaxAudioSize(100 * 1024 * 1024);
    }
  };

  const fetchMeeting = async () => {
    setFetching(true);
    try {
      const res = await apiClient.get(buildApiUrl(API_ENDPOINTS.MEETINGS.DETAIL(meetingId)));
      const meeting = res.data;
      form.setFieldsValue({
        title: meeting.title,
        meeting_time: dayjs(meeting.meeting_time),
        attendee_ids: meeting.attendee_ids || meeting.attendees?.map((a) => a.user_id).filter(Boolean) || [],
        prompt_id: meeting.prompt_id,
        tags: meeting.tags?.map((t) => t.name) || [],
      });
    } catch {
      message.error('加载会议数据失败');
    } finally {
      setFetching(false);
    }
  };

  const handleAudioBeforeUpload = (file) => {
    const validationMessage = validateMeetingAudioFile(file, maxAudioSize, configService.formatFileSize.bind(configService));
    if (validationMessage) {
      message.warning(validationMessage);
      return Upload.LIST_IGNORE;
    }

    setSelectedAudioFile(file);
    return false;
  };

  const clearSelectedAudio = () => {
    setSelectedAudioFile(null);
    setAudioUploadProgress(0);
    setAudioUploadMessage('');
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      const payload = {
        ...values,
        meeting_time: values.meeting_time.format('YYYY-MM-DD HH:mm:ss'),
        attendee_ids: values.attendee_ids || [],
        tags: values.tags?.join(',') || '',
      };

      if (isEdit) {
        await apiClient.put(buildApiUrl(API_ENDPOINTS.MEETINGS.UPDATE(meetingId)), payload);
        message.success('会议更新成功');
      } else {
        const res = await apiClient.post(buildApiUrl(API_ENDPOINTS.MEETINGS.CREATE), payload);
        if (res.code === '200') {
          const newMeetingId = res.data.meeting_id;
          if (selectedAudioFile) {
            setAudioUploading(true);
            setAudioUploadProgress(0);
            setAudioUploadMessage('正在上传音频文件...');
            try {
              await uploadMeetingAudio({
                meetingId: newMeetingId,
                file: selectedAudioFile,
                promptId: values.prompt_id,
                onUploadProgress: (progressEvent) => {
                  if (progressEvent.total) {
                    setAudioUploadProgress(Math.min(100, Math.round((progressEvent.loaded * 100) / progressEvent.total)));
                  }
                  setAudioUploadMessage('正在上传音频文件...');
                },
              });
              setAudioUploadProgress(100);
              setAudioUploadMessage('上传完成，正在启动转录任务...');
              message.success('会议创建成功，音频已开始上传处理');
            } catch (uploadError) {
              message.warning(uploadError?.response?.data?.message || uploadError?.response?.data?.detail || '会议已创建，但音频上传失败，请在详情页重试');
            } finally {
              setAudioUploading(false);
            }
          } else {
            message.success('会议创建成功');
          }

          onSuccess?.(res.data.meeting_id);
          onClose();
          return;
        }
      }
      onSuccess?.();
      onClose();
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error?.response?.data?.message || error?.response?.data?.detail || '操作失败');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <Drawer
      title={isEdit ? '编辑会议' : '新建会议'}
      placement="right"
      width={560}
      open={open}
      onClose={onClose}
      destroyOnClose
      extra={
        <Space>
          <Button type="primary" icon={<SaveOutlined />} loading={loading || audioUploading} onClick={handleSubmit}>
            {isEdit ? '保存修改' : '创建会议'}
          </Button>
        </Space>
      }
    >
      <Form form={form} layout="vertical" initialValues={{ meeting_time: dayjs() }}>
        <Form.Item label="会议主题" name="title" rules={[{ required: true, message: '请输入会议主题' }]}>
          <Input placeholder="请输入会议主题..." />
        </Form.Item>

        <Form.Item label="开始时间" name="meeting_time" rules={[{ required: true }]}>
          <DatePicker showTime style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item label="使用总结模板" name="prompt_id">
          <Select allowClear placeholder="选择总结模版">
            {prompts.map((p) => (
              <Select.Option key={p.id} value={p.id}>{p.name}</Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item label="参会人员" name="attendee_ids" rules={[{ required: true, message: '请选择参会人员' }]}>
          <Select mode="multiple" placeholder="选择参会人">
            {users.map((u) => (
              <Select.Option key={u.user_id} value={u.user_id}>{u.caption}</Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item label="标签" name="tags">
          <Select mode="tags" placeholder="输入标签按回车" />
        </Form.Item>

        {!isEdit ? (
          <Form.Item label="会议音频">
            <Card
              variant="borderless"
              style={{
                borderRadius: 14,
                border: '1px solid #d9e2f2',
                background: selectedAudioFile ? 'linear-gradient(135deg, #f8fbff 0%, #ffffff 100%)' : '#fbfdff',
                boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.86)',
              }}
              styles={{ body: { padding: 18 } }}
            >
              <Space direction="vertical" size={14} style={{ width: '100%' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start' }}>
                  <div>
                    <Text type="secondary">
                      支持 {AUDIO_UPLOAD_ACCEPT.replace(/\./g, '').toUpperCase()}；
                      <br/>音频文件最大 {configService.formatFileSize(maxAudioSize)}。
                    </Text>
                  </div>
                  <Upload accept={AUDIO_UPLOAD_ACCEPT} showUploadList={false} beforeUpload={handleAudioBeforeUpload}>
                    <Button icon={<UploadOutlined />} disabled={audioUploading}>选择音频</Button>
                  </Upload>
                </div>

                {selectedAudioFile ? (
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      gap: 16,
                      padding: '12px 14px',
                      borderRadius: 12,
                      background: '#ffffff',
                      border: '1px solid #dbe7f5',
                    }}
                  >
                    <Space size={12}>
                      <div
                        style={{
                          width: 36,
                          height: 36,
                          borderRadius: 12,
                          display: 'grid',
                          placeItems: 'center',
                          background: '#edf4ff',
                          color: '#1d4ed8',
                        }}
                      >
                        <AudioOutlined />
                      </div>
                      <div>
                        <Text strong style={{ display: 'block' }}>{selectedAudioFile.name}</Text>
                        <Text type="secondary">{configService.formatFileSize(selectedAudioFile.size)}</Text>
                      </div>
                    </Space>
                    <Button type="text" icon={<DeleteOutlined />} onClick={clearSelectedAudio} disabled={audioUploading}>
                      移除
                    </Button>
                  </div>
                ) : (
                  <div
                    style={{
                      borderRadius: 12,
                      border: '1px dashed #c7d5ea',
                      padding: '18px 16px',
                      background: '#ffffff',
                      color: 'rgba(17, 43, 78, 0.66)',
                      textAlign: 'center',
                    }}
                  >
                    可在会议详情中补传。
                  </div>
                )}

                {audioUploading ? (
                  <div
                    style={{
                      padding: '12px 14px',
                      borderRadius: 12,
                      background: '#f0f7ff',
                      border: '1px solid #bfdbfe',
                    }}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                      <Text strong>音频上传中</Text>
                      <Text strong style={{ color: '#1677ff' }}>{audioUploadProgress}%</Text>
                    </div>
                    <Text type="secondary" style={{ display: 'block', marginBottom: 10 }}>
                      {audioUploadMessage || '正在上传音频文件...'}
                    </Text>
                    <Progress percent={audioUploadProgress} status="active" strokeColor={{ from: '#69b1ff', to: '#1677ff' }} />
                  </div>
                ) : null}
              </Space>
            </Card>
          </Form.Item>
        ) : null}
      </Form>
    </Drawer>
  );
};

export default MeetingFormDrawer;