import React, { useState, useEffect } from 'react';
import { Card, Button, Input, Space, Tag, message, Popconfirm, Typography, Row, Col, List, Badge, Empty, Skeleton, Tooltip, Radio, Pagination } from 'antd';
import { 
  PlusOutlined, DeleteOutlined, SearchOutlined, CheckCircleOutlined, 
  LoadingOutlined, UserOutlined, CalendarOutlined, PlayCircleOutlined, 
  TeamOutlined, ClockCircleOutlined, EditOutlined, RightOutlined,
  SyncOutlined, InfoCircleOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { getMeetingPage, deleteMeeting, MeetingVO, getMeetingProgress, MeetingProgress } from '../../api/business/meeting';
import dayjs from 'dayjs';

const { Text, Title } = Typography;

// 状态标签组件：集成进度背景
const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
  const [progress, setProgress] = useState<MeetingProgress | null>(null);

  useEffect(() => {
    if (meeting.status !== 1 && meeting.status !== 2) return;
    const fetchProgress = async () => {
      try {
        const res = await getMeetingProgress(meeting.id);
        if (res.data && res.data.data) setProgress(res.data.data);
      } catch (err) {}
    };
    fetchProgress();
    const timer = setInterval(fetchProgress, 3000);
    return () => clearInterval(timer);
  }, [meeting.id, meeting.status]);

  const statusConfig: Record<number, { text: string; color: string; bgColor: string }> = {
    0: { text: '排队中', color: '#8c8c8c', bgColor: '#f5f5f5' },
    1: { text: '识别中', color: '#1890ff', bgColor: '#e6f7ff' },
    2: { text: '总结中', color: '#faad14', bgColor: '#fff7e6' },
    3: { text: '已完成', color: '#52c41a', bgColor: '#f6ffed' },
    4: { text: '失败', color: '#ff4d4f', bgColor: '#fff1f0' }
  };

  const config = statusConfig[meeting.status] || statusConfig[0];
  const percent = progress?.percent || 0;
  const isProcessing = meeting.status === 1 || meeting.status === 2;

  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      padding: '2px 10px',
      borderRadius: 6,
      fontSize: 11,
      fontWeight: 600,
      color: config.color,
      background: config.bgColor,
      position: 'relative',
      overflow: 'hidden',
      border: `1px solid ${isProcessing ? 'transparent' : '#eee'}`,
      cursor: 'default',
      minWidth: 80,
      justifyContent: 'center'
    }}>
      {/* 进度填充背景 */}
      {isProcessing && percent > 0 && (
        <div style={{
          position: 'absolute',
          left: 0,
          top: 0,
          bottom: 0,
          width: `${percent}%`,
          background: meeting.status === 1 ? 'rgba(24, 144, 255, 0.2)' : 'rgba(250, 173, 20, 0.2)',
          transition: 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
          zIndex: 0
        }} />
      )}
      
      <span style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 4 }}>
        {isProcessing ? <SyncOutlined spin style={{ fontSize: 10 }} /> : null}
        {config.text}
        {isProcessing && <span style={{ fontFamily: 'monospace', marginLeft: 4 }}>{percent}%</span>}
      </span>
    </div>
  );
};

// 新增：提取进度信息 Hook 供卡片内部使用
const useMeetingProgress = (meeting: MeetingVO) => {
  const [progress, setProgress] = useState<MeetingProgress | null>(null);

  useEffect(() => {
    if (meeting.status !== 1 && meeting.status !== 2) return;
    const fetchProgress = async () => {
      try {
        const res = await getMeetingProgress(meeting.id);
        if (res.data && res.data.data) setProgress(res.data.data);
      } catch (err) {}
    };
    fetchProgress();
    const timer = setInterval(fetchProgress, 3000);
    return () => clearInterval(timer);
  }, [meeting.id, meeting.status]);

  return progress;
};

const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () => void }> = ({ item, config, fetchData }) => {
  const navigate = useNavigate();
  const progress = useMeetingProgress(item);
  const isProcessing = item.status === 1 || item.status === 2;

  return (
    <List.Item style={{ marginBottom: 24 }}>
      <Card 
        hoverable
        onClick={() => navigate(`/meetings/${item.id}`)}
        className="meeting-card"
        style={{ 
          borderRadius: 16, 
          border: 'none', 
          height: '220px',
          position: 'relative',
          boxShadow: '0 6px 16px rgba(0,0,0,0.04)',
          transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)'
        }}
        bodyStyle={{ padding: 0, display: 'flex', height: '100%' }}
      >
        {/* 左侧状态装饰条 - 增加分析中的呼吸灯效果 */}
        <div 
          className={isProcessing ? 'status-bar-active' : ''}
          style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px' }}
        ></div>
        
        <div style={{ flex: 1, padding: '20px 24px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
          
          {/* 右上角醒目图标 */}
          <div className="card-actions" style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }} onClick={e => e.stopPropagation()}>
            <Space size={8}>
              <Tooltip title="编辑">
                <div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}>
                  <EditOutlined />
                </div>
              </Tooltip>
              <Popconfirm title="确定删除？" onConfirm={() => deleteMeeting(item.id).then(fetchData)}>
                <Tooltip title="删除">
                  <div className="icon-btn delete">
                    <DeleteOutlined />
                  </div>
                </Tooltip>
              </Popconfirm>
            </Space>
          </div>

          {/* 内容排版 */}
          <div style={{ flex: 1 }}>
            <div style={{ marginBottom: 12 }}>
              <IntegratedStatusTag meeting={item} />
            </div>

            <div style={{ marginBottom: 16, paddingRight: 40, height: '44px', overflow: 'hidden' }}>
              <Text strong style={{ fontSize: 16, color: '#262626', lineHeight: '22px' }} ellipsis={{ tooltip: item.title }}>
                {item.title}
              </Text>
            </div>

            <Space direction="vertical" size={10} style={{ width: '100%' }}>
              <div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
                <CalendarOutlined style={{ marginRight: 10 }} />
                {dayjs(item.meetingTime).format('YYYY-MM-DD HH:mm')}
              </div>
              
              {isProcessing ? (
                <div style={{ 
                  fontSize: '12px', 
                  color: item.status === 1 ? '#1890ff' : '#faad14', 
                  display: 'flex', 
                  alignItems: 'center',
                  background: item.status === 1 ? '#e6f7ff' : '#fff7e6',
                  padding: '4px 8px',
                  borderRadius: 4,
                  marginTop: 2
                }}>
                  <InfoCircleOutlined style={{ marginRight: 6 }} />
                  <Text ellipsis style={{ color: 'inherit', fontSize: '12px' }}>
                    {progress?.message || '等待引擎调度...'}
                  </Text>
                </div>
              ) : (
                <div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
                  <TeamOutlined style={{ marginRight: 10 }} />
                  <Text type="secondary" ellipsis style={{ maxWidth: '85%' }}>{item.participants || '无参与人员'}</Text>
                </div>
              )}
            </Space>
          </div>

          {/* 底部详情提示 */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
            <div style={{ display: 'flex', gap: 4 }}>
              {item.tags?.split(',').slice(0, 2).map(t => (
                <Tag key={t} style={{ border: '1px solid #f0f0f0', backgroundColor: '#fff', fontSize: 10, margin: 0, borderRadius: 4 }}>{t}</Tag>
              ))}
            </div>
            <RightOutlined style={{ color: '#bfbfbf', fontSize: 12 }} />
          </div>
        </div>
      </Card>
    </List.Item>
  );
};

const Meetings: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<MeetingVO[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const [size, setSize] = useState(8);
  const [searchTitle, setSearchTitle] = useState('');
  const [viewType, setViewType] = useState<'all' | 'created' | 'involved'>('all');

  useEffect(() => {
    fetchData();
  }, [current, size, searchTitle, viewType]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await getMeetingPage({ current, size, title: searchTitle, viewType });
      if (res.data && res.data.data) {
        setData(res.data.data.records);
        setTotal(res.data.data.total);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const statusConfig: Record<number, { text: string; color: string; bgColor: string }> = {
    0: { text: '排队中', color: '#8c8c8c', bgColor: '#f5f5f5' },
    1: { text: '识别中', color: '#1890ff', bgColor: '#e6f7ff' },
    2: { text: '总结中', color: '#faad14', bgColor: '#fff7e6' },
    3: { text: '已完成', color: '#52c41a', bgColor: '#f6ffed' },
    4: { text: '失败', color: '#ff4d4f', bgColor: '#fff1f0' }
  };

  return (
    <div style={{ 
      height: 'calc(100vh - 64px)', 
      display: 'flex', 
      flexDirection: 'column',
      backgroundColor: '#f4f7f9', 
      padding: '24px',
      overflow: 'hidden' 
    }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
        
        {/* 固定头部 - 极简白卡 */}
        <Card bordered={false} style={{ marginBottom: 20, borderRadius: 16, flexShrink: 0, boxShadow: '0 4px 12px rgba(0,0,0,0.03)' }} bodyStyle={{ padding: '16px 28px' }}>
          <Row justify="space-between" align="middle">
            <Col>
              <Space size={12}>
                <div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div>
                <Title level={4} style={{ margin: 0 }}>会议中心</Title>
              </Space>
            </Col>
            <Col>
              <Space size={16}>
                <Radio.Group value={viewType} onChange={e => { setViewType(e.target.value); setCurrent(1); }} buttonStyle="solid">
                  <Radio.Button value="all">全部</Radio.Button>
                  <Radio.Button value="created">我发起</Radio.Button>
                  <Radio.Button value="involved">我参与</Radio.Button>
                </Radio.Group>
                <Input 
                  placeholder="搜索会议标题" 
                  prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} 
                  allowClear 
                  onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} 
                  style={{ width: 220, borderRadius: 8 }} 
                />
                <Button 
                  type="primary" 
                  icon={<PlusOutlined />} 
                  onClick={() => navigate('/meeting-create')}
                  style={{ borderRadius: 8, height: 36, fontWeight: 500 }}
                >
                  新会议
                </Button>
              </Space>
            </Col>
          </Row>
        </Card>

        {/* 列表区 */}
        <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 8px 4px 4px' }}>
          <Skeleton loading={loading} active paragraph={{ rows: 10 }}>
            <List
              grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
              dataSource={data}
              renderItem={(item) => {
                const config = statusConfig[item.status] || statusConfig[0];
                return <MeetingCardItem item={item} config={config} fetchData={fetchData} />;
              }}
              locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }}
            />
          </Skeleton>
        </div>

        {/* 分页 */}
        {total > 0 && (
          <div style={{ flexShrink: 0, display: 'flex', justifyContent: 'center', padding: '16px 0 8px 0' }}>
            <Pagination
              current={current}
              pageSize={size}
              total={total}
              onChange={(p, s) => { setCurrent(p); setSize(s); }}
              showTotal={(total) => <Text type="secondary" size="small">为您找到 {total} 场会议</Text>}
              size="small"
            />
          </div>
        )}
      </div>
      <style>{`
        .meeting-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
        }
        .status-bar-active {
          animation: statusBreathing 2s infinite ease-in-out;
        }
        @keyframes statusBreathing {
          0% { opacity: 1; }
          50% { opacity: 0.4; }
          100% { opacity: 1; }
        }
        .icon-btn {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: rgba(255,255,255,0.9);
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 0 2px 6px rgba(0,0,0,0.1);
          transition: all 0.2s;
          color: #8c8c8c;
        }
        .icon-btn:hover {
          transform: scale(1.1);
        }
        .icon-btn.edit:hover {
          color: #1890ff;
          background: #e6f7ff;
        }
        .icon-btn.delete:hover {
          color: #ff4d4f;
          background: #fff1f0;
        }
        .card-actions {
          opacity: 0.6;
          transition: opacity 0.3s;
        }
        .meeting-card:hover .card-actions {
          opacity: 1;
        }
      `}</style>
    </div>
  );
};

export default Meetings;