import React from 'react';
import { tokenPacks, TokenPack } from '../../constants/tokenPacks';
import styles from './TokenPacksModal.module.css';
import TokenPacksList from './TokenPacksList';

interface TokenPacksModalProps {
  isVisible: boolean;
  onClose: () => void;
  onShowAllPacks: () => void;
  missingTokens: number;
  onBuyPack: (packId: string) => void;
}

const TokenPacksModal: React.FC<TokenPacksModalProps> = ({
  isVisible,
  onClose,
  onShowAllPacks,
  missingTokens,
  onBuyPack
}) => {
  if (!isVisible) return null;

  // Находим минимальный пакет, который покроет недостающие токены
  const recommendedPack = tokenPacks.find(pack =>
    (pack.tokens + pack.bonusTokens) >= missingTokens
  ) || tokenPacks[0];

  // Отображаем рекомендованный пакет и следующие два
  const startIndex = Math.max(
    0,
    tokenPacks.findIndex(pack => pack.id === recommendedPack.id)
  );
  const displayPacks = tokenPacks.slice(startIndex, startIndex + 3);

  return (
    <div className={styles.overlay} onClick={onClose}>
      <div className={styles.modal} onClick={e => e.stopPropagation()}>
        <h2 className={styles.title}>Недостаточно токенов для генерации</h2>

        <TokenPacksList
          onBuyPack={onBuyPack}
          compact={true}
        />

       <button
          className={styles.showAllButton}
          onClick={(e) => {
            e.stopPropagation();
            onClose();
            onShowAllPacks();
          }}
        >
          Показать все пакеты
        </button>

        <button
          className={styles.closeButton}
          onClick={(e) => {
            e.stopPropagation();
            onClose();
          }}
        >
          ×
        </button>
      </div>
    </div>
  );
};

export default TokenPacksModal;