// src/components/GiftCardList.tsx
import React, { useState } from 'react';
import { useInfiniteScroll } from './useInfiniteScroll';

// 礼品卡数据类型
interface GiftCardItem {
  id: number;
  amount: string; // 礼品卡金额
  status: string; // 状态
  valid: string; // 有效期
}

const GiftCardList: React.FC = () => {
  // 初始化礼品卡数据
  const [giftCards, setGiftCards] = useState<GiftCardItem[]>([
    { id: 1, amount: '$50 Gift Card', status: 'Unused', valid: 'Valid:6/2/2026-12/31/2026' },
    { id: 2, amount: '$100 Gift Card', status: 'Unused', valid: 'Valid:6/2/2026-12/31/2026' },
  ]);
  const [hasMore, setHasMore] = useState(true);

  // 加载更多礼品卡（模拟异步请求）
  const loadMoreGiftCards = async () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        if (giftCards.length >= 6) {
          setHasMore(false);
          resolve();
          return;
        }
        const newGiftCards = [
          { 
            id: giftCards.length + 1, 
            amount: `$${(giftCards.length + 1) * 50} Gift Card`, 
            status: 'Unused', 
            valid: 'Valid:6/2/2026-12/31/2026' 
          },
        ];
        setGiftCards(prev => [...prev, ...newGiftCards]);
        resolve();
      }, 800);
    });
  };

  // 复用懒加载Hook
  const { containerRef, isLoading } = useInfiniteScroll({
    loadMore: loadMoreGiftCards,
    hasMore,
  });

  return (
    <div 
      ref={containerRef}
      className="h-[calc(100vh-80px)] overflow-auto px-2 py-4"
    >
      {/* 礼品卡列表 */}
      <div className="space-y-4">
        {giftCards.map((item) => (
          <div 
            key={item.id}
            className="flex items-center bg-blue-100 rounded-lg overflow-hidden"
          >
            {/* 礼品卡信息区 */}
            <div className="flex-1 p-4 text-blue-600">
              <h3 className="text-2xl font-bold">{item.amount}</h3>
              <p className="text-sm mt-1">{item.status}</p>
              <p className="text-xs mt-2 text-blue-500">{item.valid}</p>
            </div>
            {/* 分割线 */}
            <div className="w-0.5 bg-blue-300 h-16 relative">
              <div className="absolute top-0 left-[-4px] w-2 h-2 bg-white border border-blue-300 rounded-full"></div>
              <div className="absolute bottom-0 left-[-4px] w-2 h-2 bg-white border border-blue-300 rounded-full"></div>
            </div>
            {/* 使用按钮区 */}
            <div className="px-6 py-4 font-bold text-black">
              Use Now
            </div>
          </div>
        ))}
      </div>

      {/* 加载状态/无更多提示 */}
      <div className="text-center mt-4 text-gray-400 text-sm">
        {isLoading ? 'Loading...' : hasMore ? '' : 'No More Data'}
      </div>
    </div>
  );
};

export default GiftCardList;