import React, { useState, useEffect } from 'react';
import { 
  Card, Form, Input, Button, DatePicker, Select, Space, 
  Typography, App, Divider, Row, Col
} from 'antd';
import { 
  ArrowLeftOutlined, TeamOutlined, SaveOutlined, 
  VideoCameraAddOutlined, TagOutlined
} from '@ant-design/icons';
import { useNavigate, useParams } from 'react-router-dom';
import dayjs from 'dayjs';
import apiClient from '../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';

const { Title } = Typography;
const { TextArea } = Input;

const EditMeeting = ({ user }) => {
  const { meeting_id } = useParams();
  const navigate = useNavigate();
  const { message } = App.useApp();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [fetching, setFetching] = useState(true);
  const [users, setUsers] = useState([]);
  const [prompts, setPrompts] = useState([]);

  useEffect(() => {
    fetchData();
  }, [meeting_id]);

  const fetchData = async () => {
    try {
      const [uRes, pRes, mRes] = await Promise.all([
        apiClient.get(buildApiUrl(API_ENDPOINTS.USERS.LIST)),
        apiClient.get(buildApiUrl(API_ENDPOINTS.PROMPTS.ACTIVE('MEETING_TASK'))),
        apiClient.get(buildApiUrl(API_ENDPOINTS.MEETINGS.DETAIL(meeting_id)))
      ]);
      
      setUsers(uRes.data.users || []);
      setPrompts(pRes.data.prompts || []);
      
      const meeting = mRes.data;
      form.setFieldsValue({
        ...meeting,
        meeting_time: dayjs(meeting.meeting_time),
        attendees: meeting.attendees.map(a => typeof a === 'string' ? a : a.caption),
        tags: meeting.tags?.map(t => t.name) || []
      });
    } catch (e) {
      message.error('加载会议数据失败');
    } finally {
      setFetching(false);
    }
  };

  const onFinish = async (values) => {
    setLoading(true);
    try {
      const payload = {
        ...values,
        meeting_time: values.meeting_time.format('YYYY-MM-DD HH:mm:ss'),
        attendees: values.attendees.join(','),
        tags: values.tags?.join(',') || ''
      };
      await apiClient.put(buildApiUrl(API_ENDPOINTS.MEETINGS.UPDATE(meeting_id)), payload);
      message.success('会议更新成功');
      navigate(`/meetings/${meeting_id}`);
    } catch (error) {
      message.error('更新失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="edit-meeting-modern" style={{ maxWidth: 800, margin: '0 auto', padding: '24px 0' }}>
      <Card bordered={false} loading={fetching} style={{ borderRadius: 16, boxShadow: '0 4px 20px rgba(0,0,0,0.05)' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 32 }}>
          <Button icon={<ArrowLeftOutlined />} shape="circle" onClick={() => navigate(-1)} style={{ marginRight: 16 }} />
          <Title level={3} style={{ margin: 0 }}>编辑会议信息</Title>
        </div>

        <Form form={form} layout="vertical" onFinish={onFinish}>
          <Form.Item label="会议主题" name="title" rules={[{ required: true, message: '请输入会议主题' }]}>
            <Input size="large" prefix={<VideoCameraAddOutlined />} placeholder="请输入会议主题..." />
          </Form.Item>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="开始时间" name="meeting_time" rules={[{ required: true }]}>
                <DatePicker showTime size="large" style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="使用总结模板" name="prompt_id">
                <Select size="large" placeholder="选择总结模版">
                  {prompts.map(p => <Select.Option key={p.id} value={p.id}>{p.name}</Select.Option>)}
                </Select>
              </Form.Item>
            </Col>
          </Row>

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

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

          <Form.Item label="会议备注" name="description">
            <TextArea rows={4} placeholder="添加会议背景或说明..." />
          </Form.Item>

          <Divider />

          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" icon={<SaveOutlined />} loading={loading} block style={{ height: 50, fontSize: 16, borderRadius: 8 }}>
              保存修改
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default EditMeeting;