import React from 'react';
import { useSelector } from 'react-redux';
import { Drawer } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { selectIsMobile } from '@store/slices/deviceSlice';
import DynamicNewsDetailPanel from '@components/EventDetailPanel';
import './EventDetailModal.less';

interface EventDetailModalProps {
  /** 是否打开弹窗 */
  open: boolean;
  /** 关闭弹窗回调 */
  onClose: () => void;
  /** 事件对象 */
  event: any; // TODO: 后续可替换为具体的 Event 类型
}

// 深色主题颜色 - 比背景亮，形成层次感（使用实色确保覆盖）
const GLASS_THEME = {
  bg: '#2D3748',
  headerBg: '#3D4A5C',
  borderColor: 'rgba(255, 255, 255, 0.12)',
  textColor: '#F7FAFC',
  secondaryText: '#CBD5E0',
};

/**
 * 事件详情抽屉组件（从底部弹出）- 深色毛玻璃风格
 */
const EventDetailModal: React.FC<EventDetailModalProps> = ({
  open,
  onClose,
  event,
}) => {
  const isMobile = useSelector(selectIsMobile);

  return (
    <Drawer
      open={open}
      onClose={onClose}
      placement="bottom"
      height={isMobile ? 'calc(100vh - 60px)' : 'calc(100vh - 100px)'}
      width={isMobile ? '100%' : '70vw'}
      title={event?.title || '事件详情'}
      destroyOnHidden
      rootClassName="event-detail-drawer event-detail-drawer-dark"
      closeIcon={null}
      extra={
        <CloseOutlined
          onClick={onClose}
          style={{ cursor: 'pointer', fontSize: 18, color: GLASS_THEME.textColor }}
        />
      }
      styles={{
        wrapper: isMobile ? {} : {
          maxWidth: 1400,
          margin: '0 auto',
        },
        mask: {
          background: 'rgba(0, 0, 0, 0.5)',
        },
        content: {
          borderRadius: '16px 16px 0 0',
          background: GLASS_THEME.bg,
          border: 'none',
        },
        header: {
          background: GLASS_THEME.headerBg,
          borderBottom: `1px solid ${GLASS_THEME.borderColor}`,
          borderRadius: '16px 16px 0 0',
        },
        body: {
          padding: 0,
          background: GLASS_THEME.bg,
        },
      }}
    >
      {event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
    </Drawer>
  );
};

export default EventDetailModal;