import React, { useMemo, useEffect } from 'react';
import { useActivity } from '../context/ActivityContext';
import { AwardListViewProps, PrizeItem } from '../types';
import AwardItemView from './AwardItemView';
import '../styles/index.css';

// 独立的奖励列表组件（不依赖 context）
const StandaloneAwardListView = ({
  activityInfo,
  customRedeem,
  callbackPoints,
  className = 'award-list-container',
  style,
  emptyClassName = 'award-empty',
  itemsClassName = 'award-items',
  emptyText = '暂无奖品'
}: AwardListViewProps): React.ReactElement => {
  // 获取奖励活动数据
  const awardActivity = activityInfo?.awardActivity;
  const prizes: PrizeItem[] = awardActivity?.items || [];
  const userInfo = activityInfo?.userInfo;

  // 需要奖励类型过滤 抽奖装扮 和 定时抽奖 不展示
  const filteredPrizes = useMemo(() => {
    return prizes.filter(prize => prize.type !== 'SLOT_DRESSING' && prize.type !== 'SLOT_SCHEDULED');
  }, [prizes]);

  if (!awardActivity || filteredPrizes.length === 0) {
    return (
      <div className={className} style={style}>
        <div className={emptyClassName}>{emptyText}</div>
      </div>
    );
  }

  return (
    <div className={className} style={style}>
      {/* 奖品网格列表 */}
      <div className={`${itemsClassName} award-grid`}>
        {filteredPrizes.map(prize => (
          <AwardItemView
            key={prize.itemCode}
            prize={prize}
            activityInfo={activityInfo}
            customRedeem={customRedeem}
          />
        ))}
      </div>
    </div>
  );
};

// 依赖 context 的奖励列表组件
const ContextAwardListView = ({
  customRedeem,
  callbackPoints,
  className = 'award-list-container',
  style,
  loadingClassName = 'award-loading',
  errorClassName = 'award-error',
  emptyClassName = 'award-empty',
  itemsClassName = 'award-items',
  loadingText = '加载中...',
  errorText = '加载失败',
  emptyText = '暂无奖品'
}: Omit<AwardListViewProps, 'activityInfo'>): React.ReactElement => {
  const {
    activityInfo: contextActivityInfo,
    loading,
    error,
    userInfo
  } = useActivity();

  // 获取奖励活动数据
  const awardActivity = contextActivityInfo?.awardActivity;
  const prizes: PrizeItem[] = awardActivity?.items || [];

  // 需要奖励类型过滤 抽奖装扮 和 定时抽奖 不展示
  const filteredPrizes = useMemo(() => {
    return prizes.filter(prize => prize.type !== 'SLOT_DRESSING' && prize.type !== 'SLOT_SCHEDULED');
  }, [prizes]);

  useEffect(() => {
    if (userInfo?.points && callbackPoints) {
      callbackPoints(userInfo.points);
    }
  }, [userInfo, callbackPoints]);

  if (loading) {
    return (
      <div className={className} style={style}>
        <div className={loadingClassName}>{loadingText}</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={className} style={style}>
        <div className={errorClassName}>{errorText}: {error}</div>
      </div>
    );
  }

  if (!awardActivity || filteredPrizes.length === 0) {
    return (
      <div className={className} style={style}>
        <div className={emptyClassName}>{emptyText}</div>
      </div>
    );
  }

  return (
    <div className={className} style={style}>
      {/* 奖品网格列表 */}
      <div className={`${itemsClassName} award-grid`}>
        {filteredPrizes.map(prize => (
          <AwardItemView
            key={prize.itemCode}
            prize={prize}
            activityInfo={contextActivityInfo}
            customRedeem={customRedeem}
          />
        ))}
      </div>

      {/* 活动信息 */}
      {awardActivity.isEndingSoon && awardActivity.isEndingSoon() && (
        <div className="ending-soon-notice">
          ⚠️ 活动即将结束，请及时兑换！
        </div>
      )}
    </div>
  );
};

// 主组件：根据是否有 activityInfo 选择使用哪个子组件
const AwardListView = (props: AwardListViewProps): React.ReactElement => {
  // 如果传入了 activityInfo，使用独立组件（不会触发 useActivity）
  if (props.activityInfo) {
    return <StandaloneAwardListView {...props} />;
  }

  // 否则使用依赖 context 的组件
  return <ContextAwardListView {...props} />;
};

export default AwardListView;