import React, { useState } from 'react';
import { Card, Form, Input, Button, Upload, message, Progress, Select, Row, Col } from 'antd';
import { InboxOutlined, AudioOutlined, UserAddOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { api } from '../api';
import PageHeader from '../components/PageHeader/PageHeader';

const { Dragger } = Upload;
const { Option } = Select;

const MeetingLive: React.FC = () => {
  const [form] = Form.useForm();
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const navigate = useNavigate();

  const handleCreate = async (values: any) => {
    try {
      const res = await api.createMeeting(values);
      message.success('会议创建成功');
      navigate(`/meeting/history/${res.meeting_id}`);
    } catch (error) {
      console.error(error);
      message.error('创建失败');
    }
  };

  const handleUpload = async (file: File) => {
    setUploading(true);
    setProgress(0);
    try {
      // Mock progress since fetch doesn't support it easily without XHR
      const timer = setInterval(() => {
        setProgress((prev) => {
          if (prev >= 90) {
            clearInterval(timer);
            return 90;
          }
          return prev + 10;
        });
      }, 500);

      const res = await api.uploadMeetingAudio(file);
      clearInterval(timer);
      setProgress(100);
      message.success('上传成功，开始转译');
      // Assuming upload returns meeting_id or we navigate to list
      if (res && res.meeting_id) {
        navigate(`/meeting/history/${res.meeting_id}`);
      } else {
        navigate('/meeting/history');
      }
    } catch (error) {
      console.error(error);
      message.error('上传失败');
      setUploading(false);
    }
    return false; // Prevent default upload behavior
  };

  return (
    <div style={{ padding: 24 }}>
      <PageHeader 
        title="新建会议" 
        description="创建实时会议或上传音频文件进行转写" 
      />
      
      <Row gutter={[24, 24]}>
        <Col span={12}>
          <Card title="创建实时会议" bordered={false} hoverable>
            <Form form={form} layout="vertical" onFinish={handleCreate}>
              <Form.Item name="title" label="会议标题" rules={[{ required: true }]}>
                <Input placeholder="请输入会议标题" prefix={<AudioOutlined />} />
              </Form.Item>
              <Form.Item name="participants" label="参会人">
                <Select mode="tags" placeholder="请输入参会人姓名" open={false}>
                </Select>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" icon={<UserAddOutlined />} block>
                  开始会议
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        
        <Col span={12}>
          <Card title="上传录音文件" variant="borderless" hoverable>
            <Dragger 
              name="file" 
              multiple={false} 
              beforeUpload={handleUpload}
              showUploadList={false}
              accept="audio/*,video/*"
              disabled={uploading}
            >
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
              <p className="ant-upload-hint">
                支持 MP3, WAV, M4A 等常见音频格式
              </p>
            </Dragger>
            {uploading && (
              <div style={{ marginTop: 16 }}>
                <Progress percent={progress} status={progress === 100 ? 'success' : 'active'} />
                <div style={{ textAlign: 'center', marginTop: 8 }}>
                  {progress === 100 ? '上传完成，正在处理...' : '上传中...'}
                </div>
              </div>
            )}
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default MeetingLive;