import React, { useState, useEffect } from "react";
import { useInfiniteScroll } from "./UseInfiniteScroll";
import { clientFetch } from "@/lib/restApiClient";
import type { GiftCardItem } from "@/types/api/gift/my-gift-cards";
const GiftCardList: React.FC = () => {
  // 初始化礼品卡数据
  //  {
  //     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",
  //   },
  // {
  //   expirationdate: "2026-07-04",
  //   formatted_remaining_giftcard_amount: "$30.00",
  //   giftcard_amount: "30.00",
  //   giftcard_number: "CFVG-RYUD-AOXF-GSLE",
  //   giftcard_status: "1",
  //   id: 7,
  //   remaining_giftcard_amount: "30.00",
  //   used_giftcard_amount: "0.00",
  // }
  const [giftCards, setGiftCards] = useState<GiftCardItem[]>([]);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    const load = async () => {
      const resp = await clientFetch("/api/gift/my-gift-cards");
      const dataObj = resp.data.data;
      setGiftCards((prev) => [...prev, ...dataObj]);
      console.log("完整返回：", dataObj);
    };

    load();
  }, []);
  // 加载更多礼品卡（模拟异步请求）
  const loadMoreGiftCards = async () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        if (giftCards.length >= 6) {
          setHasMore(false);
          resolve();
          return;
        }
        const newGiftCards = [
          {
            expirationdate: "2026-07-04",
            formatted_remaining_giftcard_amount: "$30.00",
            giftcard_amount: "30.00",
            giftcard_number: "CFVG-RYUD-AOXF-GSLE",
            giftcard_status: "1",
            id: 7,
            remaining_giftcard_amount: "30.00",
            used_giftcard_amount: "0.00",
          },
        ];
        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,index) => (
          <div
            key={index}
            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">${Number(item.giftcard_amount)} OFF</h3>
              <p className="text-sm mt-1">
                For All Products
              </p>
              <p className="text-xs mt-2 text-blue-500">{item.expirationdate}</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;
