/**
 * EventDetailModal - 事件详情弹窗组件
 * 用于展示某一天的所有投资事件
 * 使用 Ant Design 实现
 */

import React from 'react';
import { Modal, Space } from 'antd';
import type { Dayjs } from 'dayjs';

import { EventCard } from './EventCard';
import { EventEmptyState } from './EventEmptyState';
import type { InvestmentEvent } from '@/types';

/**
 * EventDetailModal Props
 */
export interface EventDetailModalProps {
  /** 是否打开 */
  isOpen: boolean;
  /** 关闭回调 */
  onClose: () => void;
  /** 选中的日期 */
  selectedDate: Dayjs | null;
  /** 选中日期的事件列表 */
  events: InvestmentEvent[];
  /** 边框颜色 */
  borderColor?: string;
  /** 次要文字颜色 */
  secondaryText?: string;
  /** 导航到计划列表 */
  onNavigateToPlan?: () => void;
  /** 导航到复盘列表 */
  onNavigateToReview?: () => void;
  /** 打开投资日历 */
  onOpenInvestmentCalendar?: () => void;
}

/**
 * EventDetailModal 组件
 */
export const EventDetailModal: React.FC<EventDetailModalProps> = ({
  isOpen,
  onClose,
  selectedDate,
  events,
  borderColor,
  secondaryText,
  onNavigateToPlan,
  onNavigateToReview,
  onOpenInvestmentCalendar,
}) => {
  return (
    <Modal
      open={isOpen}
      onCancel={onClose}
      title={`${selectedDate?.format('YYYY年MM月DD日') || ''} 的事件`}
      footer={null}
      width={600}
      maskClosable={false}
      keyboard={true}
      centered
      styles={{
        body: { paddingTop: 16, paddingBottom: 24 },
      }}
    >
      {events.length === 0 ? (
        <EventEmptyState
          onNavigateToPlan={() => {
            onClose();
            onNavigateToPlan?.();
          }}
          onNavigateToReview={() => {
            onClose();
            onNavigateToReview?.();
          }}
          onOpenInvestmentCalendar={() => {
            onClose();
            onOpenInvestmentCalendar?.();
          }}
        />
      ) : (
        <Space direction="vertical" size={12} style={{ width: '100%' }}>
          {events.map((event, idx) => (
            <EventCard
              key={idx}
              event={event}
              variant="detail"
              borderColor={borderColor}
              secondaryText={secondaryText}
            />
          ))}
        </Space>
      )}
    </Modal>
  );
};

export default EventDetailModal;