/**
 * EventEmptyState - 事件空状态组件
 * 用于展示日历无事件时的引导提示
 * 使用 Ant Design 实现
 */

import React from 'react';
import { Typography, Space, Empty } from 'antd';
import { CalendarOutlined } from '@ant-design/icons';

const { Text, Link } = Typography;

/**
 * EventEmptyState Props
 */
export interface EventEmptyStateProps {
  /** 空状态提示文字 */
  message?: string;
  /** 导航到计划列表 */
  onNavigateToPlan?: () => void;
  /** 导航到复盘列表 */
  onNavigateToReview?: () => void;
  /** 打开投资日历 */
  onOpenInvestmentCalendar?: () => void;
}

/**
 * EventEmptyState 组件
 */
export const EventEmptyState: React.FC<EventEmptyStateProps> = ({
  message = '当天暂无事件',
  onNavigateToPlan,
  onNavigateToReview,
  onOpenInvestmentCalendar,
}) => {
  // 是否显示引导链接
  const showGuide = onNavigateToPlan || onNavigateToReview || onOpenInvestmentCalendar;

  // 渲染描述内容
  const renderDescription = () => {
    if (!showGuide) {
      return <Text type="secondary">{message}</Text>;
    }

    return (
      <Space direction="vertical" size={4} style={{ textAlign: 'center' }}>
        <Text type="secondary">{message}</Text>
        <Text type="secondary" style={{ fontSize: 12 }}>
          可在
          {onNavigateToPlan && (
            <Link
              style={{ margin: '0 4px', color: '#8B5CF6' }}
              onClick={onNavigateToPlan}
            >
              计划
            </Link>
          )}
          {onNavigateToPlan && onNavigateToReview && '或'}
          {onNavigateToReview && (
            <Link
              style={{ margin: '0 4px', color: '#38A169' }}
              onClick={onNavigateToReview}
            >
              复盘
            </Link>
          )}
          添加
          {onOpenInvestmentCalendar && (
            <>
              ，或关注
              <Link
                style={{ margin: '0 4px', color: '#3182CE' }}
                onClick={onOpenInvestmentCalendar}
              >
                投资日历
              </Link>
              中的未来事件
            </>
          )}
        </Text>
      </Space>
    );
  };

  return (
    <Empty
      image={<CalendarOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />}
      imageStyle={{ height: 60 }}
      description={renderDescription()}
    />
  );
};

export default EventEmptyState;
