import React, { useState, useEffect } from 'react';
import { Card, Button, Form, Input, Space, Select, Tag, message, Typography, Divider, Row, Col, DatePicker, Upload, Progress, Tooltip, Avatar } from 'antd';
import { 
  AudioOutlined, CheckCircleOutlined, UserOutlined, CloudUploadOutlined, 
  LeftOutlined, SettingOutlined, QuestionCircleOutlined, InfoCircleOutlined,
  CalendarOutlined, TeamOutlined, RobotOutlined, RocketOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import { createMeeting, uploadAudio } from '../../api/business/meeting';
import { getAiModelPage, getAiModelDefault, AiModelVO } from '../../api/business/aimodel';
import { getPromptPage, PromptTemplateVO } from '../../api/business/prompt';
import { getHotWordPage, HotWordVO } from '../../api/business/hotword';
import { listUsers } from '../../api';
import { SysUser } from '../../types';

const { Title, Text } = Typography;
const { Dragger } = Upload;
const { Option } = Select;

const MeetingCreate: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [submitLoading, setSubmitLoading] = useState(false);
  
  const [asrModels, setAsrModels] = useState<AiModelVO[]>([]);
  const [llmModels, setLlmModels] = useState<AiModelVO[]>([]);
  const [prompts, setPrompts] = useState<PromptTemplateVO[]>([]);
  const [hotwordList, setHotwordList] = useState<HotWordVO[]>([]);
  const [userList, setUserList] = useState<SysUser[]>([]);
  
  const [fileList, setFileList] = useState<any[]>([]);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [audioUrl, setAudioUrl] = useState('');

  useEffect(() => {
    loadInitialData();
  }, []);

  const loadInitialData = async () => {
    try {
      const [asrRes, llmRes, promptRes, hotwordRes, users] = await Promise.all([
        getAiModelPage({ current: 1, size: 100, type: 'ASR' }),
        getAiModelPage({ current: 1, size: 100, type: 'LLM' }),
        getPromptPage({ current: 1, size: 100 }),
        getHotWordPage({ current: 1, size: 1000 }),
        listUsers()
      ]);

      setAsrModels(asrRes.data.data.records.filter(m => m.status === 1));
      setLlmModels(llmRes.data.data.records.filter(m => m.status === 1));
      setPrompts(promptRes.data.data.records.filter(p => p.status === 1));
      setHotwordList(hotwordRes.data.data.records.filter(h => h.status === 1));
      setUserList(users || []);

      const defaultAsr = await getAiModelDefault('ASR');
      const defaultLlm = await getAiModelDefault('LLM');

      form.setFieldsValue({
        asrModelId: defaultAsr.data.data?.id,
        summaryModelId: defaultLlm.data.data?.id,
        meetingTime: dayjs()
      });
    } catch (err) {}
  };

  const customUpload = async (options: any) => {
    const { file, onSuccess, onError } = options;
    setUploadProgress(0);
    try {
      const interval = setInterval(() => {
        setUploadProgress(prev => (prev < 95 ? prev + 5 : prev));
      }, 300);
      const res = await uploadAudio(file);
      clearInterval(interval);
      setUploadProgress(100);
      setAudioUrl(res.data.data);
      onSuccess(res.data.data);
      message.success('录音上传成功');
    } catch (err) {
      onError(err);
      message.error('文件上传失败');
    }
  };

  const onFinish = async (values: any) => {
    if (!audioUrl) {
      message.error('请先上传录音文件');
      return;
    }
    setSubmitLoading(true);
    try {
      await createMeeting({
        ...values,
        meetingTime: values.meetingTime.format('YYYY-MM-DD HH:mm:ss'),
        audioUrl,
        participants: values.participants?.join(','),
        tags: values.tags?.join(',')
      });
      message.success('会议发起成功');
      navigate('/meetings');
    } catch (err) {
      console.error(err);
    } finally {
      setSubmitLoading(false);
    }
  };

  return (
    <div style={{ 
      height: 'calc(100vh - 64px)', 
      backgroundColor: '#f4f7f9', 
      padding: '20px 24px', 
      overflow: 'hidden', 
      display: 'flex', 
      flexDirection: 'column' 
    }}>
      <div style={{ maxWidth: 1300, margin: '0 auto', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
        
        {/* 头部导航 - 紧凑化 */}
        <div style={{ marginBottom: 16, flexShrink: 0 }}>
          <Button icon={<LeftOutlined />} onClick={() => navigate('/meetings')} type="link" style={{ padding: 0, fontSize: '13px' }}>返回列表</Button>
          <div style={{ display: 'flex', alignItems: 'center', marginTop: 4 }}>
            <Title level={4} style={{ margin: 0 }}>发起新会议分析</Title>
            <Text type="secondary" size="small" style={{ marginLeft: 12 }}>请配置录音文件及 AI 模型参数</Text>
          </div>
        </div>

        <Form form={form} layout="vertical" onFinish={onFinish} style={{ flex: 1, minHeight: 0 }}>
          <Row gutter={24} style={{ height: '100%' }}>
            {/* 左侧：文件与基础信息 */}
            <Col span={14} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
              <Space direction="vertical" size={16} style={{ width: '100%', flex: 1, overflowY: 'auto', paddingRight: 8 }}>
                
                <Card size="small" title={<Space><AudioOutlined /> 录音上传</Space>} bordered={false} style={{ borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.03)' }}>
                  <Dragger
                    accept=".mp3,.wav,.m4a"
                    fileList={fileList}
                    customRequest={customUpload}
                    onChange={info => setFileList(info.fileList.slice(-1))}
                    maxCount={1}
                    style={{ borderRadius: 8, padding: '16px 0' }}
                  >
                    <p className="ant-upload-drag-icon" style={{ marginBottom: 4 }}><CloudUploadOutlined style={{ fontSize: 32 }} /></p>
                    <p className="ant-upload-text" style={{ fontSize: 14 }}>点击或拖拽录音文件</p>
                    {uploadProgress > 0 && uploadProgress < 100 && <Progress percent={uploadProgress} size="small" style={{ width: '60%', margin: '0 auto' }} />}
                    {audioUrl && <Tag color="success" style={{ marginTop: 4 }} size="small">就绪: {audioUrl.split('/').pop()}</Tag>}
                  </Dragger>
                </Card>

                <Card size="small" title={<Space><InfoCircleOutlined /> 基础信息</Space>} bordered={false} style={{ borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.03)' }}>
                  <Form.Item name="title" label="会议标题" rules={[{ required: true }]} style={{ marginBottom: 12 }}>
                    <Input placeholder="输入标题" />
                  </Form.Item>
                  <Row gutter={12}>
                    <Col span={12}>
                      <Form.Item name="meetingTime" label="会议时间" rules={[{ required: true }]} style={{ marginBottom: 12 }}>
                        <DatePicker showTime style={{ width: '100%' }} />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item name="tags" label="会议标签" style={{ marginBottom: 12 }}>
                        <Select mode="tags" placeholder="输入标签" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Form.Item name="participants" label="参会人员" style={{ marginBottom: 0 }}>
                    <Select mode="multiple" placeholder="选择人员" showSearch optionFilterProp="children">
                      {userList.map(u => (
                        <Option key={u.userId} value={u.displayName || u.username}>
                          <Space><Avatar size="small" icon={<UserOutlined />} />{u.displayName || u.username}</Space>
                        </Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Card>
              </Space>
            </Col>

            {/* 右侧：AI 配置 - 固定且不滚动 */}
            <Col span={10} style={{ height: '100%' }}>
              <Card 
                size="small" 
                title={<Space><SettingOutlined /> AI 分析配置</Space>} 
                bordered={false} 
                style={{ borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column', boxShadow: '0 2px 8px rgba(0,0,0,0.03)' }}
                bodyStyle={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '16px 20px' }}
              >
                <div style={{ flex: 1 }}>
                  <Form.Item name="asrModelId" label="语音识别 (ASR)" rules={[{ required: true }]} style={{ marginBottom: 16 }}>
                    <Select placeholder="选择 ASR 模型">
                      {asrModels.map(m => (
                        <Option key={m.id} value={m.id}>{m.modelName} {m.isDefault === 1 && <Tag color="gold" size="small">默认</Tag>}</Option>
                      ))}
                    </Select>
                  </Form.Item>

                  <Form.Item name="summaryModelId" label="内容总结 (LLM)" rules={[{ required: true }]} style={{ marginBottom: 16 }}>
                    <Select placeholder="选择总结模型">
                      {llmModels.map(m => (
                        <Option key={m.id} value={m.id}>{m.modelName} {m.isDefault === 1 && <Tag color="gold" size="small">默认</Tag>}</Option>
                      ))}
                    </Select>
                  </Form.Item>

                  <Form.Item name="promptId" label="总结模板" rules={[{ required: true }]} style={{ marginBottom: 16 }}>
                    <Select placeholder="选择模板">
                      {prompts.map(p => (
                        <Option key={p.id} value={p.id}>{p.templateName}</Option>
                      ))}
                    </Select>
                  </Form.Item>

                  <Form.Item 
                    name="hotWords" 
                    label={<span>纠错热词 <Tooltip title="不选默认应用全部启用热词"><QuestionCircleOutlined /></Tooltip></span>}
                    style={{ marginBottom: 16 }}
                  >
                    <Select mode="multiple" placeholder="可选热词" allowClear maxTagCount="responsive">
                      {hotwordList.map(h => <Option key={h.word} value={h.word}>{h.word}</Option>)}
                    </Select>
                  </Form.Item>
                </div>

                <div style={{ flexShrink: 0 }}>
                  <div style={{ backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', padding: '10px 12px', borderRadius: 8, marginBottom: 16 }}>
                    <Text type="secondary" style={{ fontSize: '12px' }}>
                      <CheckCircleOutlined style={{ color: '#52c41a', marginRight: 6 }} />
                      系统将自动执行：转录固化 + 智能总结。
                    </Text>
                  </div>

                  <Button 
                    type="primary" 
                    size="large" 
                    block 
                    icon={<RocketOutlined />} 
                    htmlType="submit"
                    loading={submitLoading}
                    style={{ height: 48, borderRadius: 8, fontSize: 16, fontWeight: 600, boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)' }}
                  >
                    开始智能分析
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  );
};

export default MeetingCreate;
