match-vote-nextjs/src/app/exchange-points/page.js

"use client";

import Alert from "../ui/components/Alert";
import { fetchApi } from "../utils/fetch";
import ExchangeForm from "./ExchangeForm";
import { ChevronLeft, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const PAGE_SIZE = 10;

export default function ExchangePage() {
  const [items, setItems] = useState([]);
  const [selectedItem, setSelectedItem] = useState(null);
  const [alert, setAlert] = useState(null);

  const [exchanges, setExchanges] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [currentUser, setCurrentUser] = useState(null);
  const [isRulesOpen, setIsRulesOpen] = useState(false);

  const router = useRouter();

  useEffect(() => {
    fetchExchangeItems();
    const user = JSON.parse(localStorage.getItem("currentUser") || "null");
    setCurrentUser(user);
  }, []);

  useEffect(() => {
    loadExchanges();
  }, [currentUser?.id]);

  const loadExchanges = async () => {
    if (!currentUser) return;
    try {
      const data = await fetchApi(
        `/api/exchange-history?userId=${encodeURIComponent(
          currentUser.id
        )}&current=${page}&pageSize=${PAGE_SIZE}`
      );
      if (data.success) {
        setExchanges((prev) => [...prev, ...data.data]);
        setPage((prev) => prev + 1);
        setHasMore(data.data.length === PAGE_SIZE);
      } else {
        setAlert({ type: "error", message: data.error });
        console.error("Failed to fetch exchange history:", data.error);
      }
    } catch (error) {
      console.error("Error fetching exchange history:", error);
    }
  };

  const fetchExchangeItems = async () => {
    try {
      const data = await fetchApi("/api/exchange-items");
      if (data.success) {
        setItems(data.data);
      } else {
        setAlert({ type: "error", message: data.error });
        console.error("获取兑换项目失败:", data.message);
      }
    } catch (error) {
      console.error("获取兑换项目失败:", error);
    }
  };

  const handleExchange = (item) => {
    if (currentUser.points < item.points) {
      setAlert({ type: "error", message: "积分不足，无法兑换" });
      return;
    }
    setSelectedItem(item);
  };

  const Modal = ({ isOpen, onClose, children }) => {
    if (!isOpen) return null;

    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center">
        <div
          className="absolute inset-0 bg-black/50 backdrop-blur-sm"
          onClick={onClose}
        />

        <div className="relative bg-white rounded-lg w-full max-w-2xl m-4 p-6 shadow-xl max-h-[70vh] overflow-y-auto">
          <button
            onClick={onClose}
            className="absolute right-4 top-4 text-gray-500 hover:text-gray-700"
          >
            <X size={24} />
          </button>
          {children}
        </div>
      </div>
    );
  };

  const PointsRules = () => {
    return (
      <div className="space-y-4 text-gray-700">
        <h2 className="text-xl font-bold text-gray-900">积分兑换规则</h2>
        <section>
          <h3 className="font-medium text-lg text-gray-900 mb-3">
            1. 积分兑换规则
          </h3>
          <div className="space-y-2 pl-4">
            <p className="font-medium">兑换资格：</p>
            <p>用户必须拥有足够积分才能进行兑换。</p>

            <p className="font-medium mt-3">商品种类：</p>
            <p>积分可用于兑换以下几类商品：</p>
            <ul className="list-disc pl-6 space-y-1">
              <li>实物商品：如电子产品、生活用品等</li>
              <li>虚拟商品：如优惠券、抵用券、彩金等</li>
            </ul>
            <p className="text-gray-500 italic text-sm">
              （积分兑换商品会不定期更新，以显示为准）
            </p>
          </div>
        </section>

        <section>
          <h3 className="font-medium text-lg text-gray-900 mb-3">
            2. 兑换流程
          </h3>
          <ol className="list-decimal pl-6 space-y-2">
            <li>点击"兑换积分"按钮</li>
            <li>
              按需兑换商品，输入智博会员账号（输入错误会影响奖品发放）点击"确认兑换"
            </li>
            <li>兑换完成后需要等待审核，审核完成后会在3个工作日内自动派发</li>
            <li>实物商品类需要填写姓名，联系方式，地址，预计7个工作日到件</li>
          </ol>
        </section>

        <section>
          <h3 className="font-medium text-lg text-gray-900 mb-3">
            3. 兑换商品退换规则
          </h3>
          <ul className="list-disc pl-6 space-y-2">
            <li>实物商品，一旦兑换成功，概不退换</li>
            <li>虚拟商品（如优惠券、抵用券），一经兑换，不可折现</li>
          </ul>
        </section>

        <section>
          <h3 className="font-medium text-lg text-gray-900 mb-3">4. 解释权</h3>
          <p className="pl-4">平台对积分获取、使用及兑换规则保留最终解释权。</p>
        </section>

        <section>
          <h3 className="font-medium text-lg text-gray-900 mb-3">
            5. 常见问题
          </h3>
          <div className="space-y-4 pl-4">
            <div>
              <p className="font-medium">是否可以兑换多个商品？</p>
              <p className="text-gray-600">
                可以，但需满足商品兑换所需积分条件。
              </p>
            </div>
            <div>
              <p className="font-medium">积分是否可以转让给他人？</p>
              <p className="text-gray-600">积分不可转让或赠送。</p>
            </div>
            <div>
              <p className="font-medium">积分有效期是多久？</p>
              <p className="text-gray-600">积分有效期为1年，逾期作废。</p>
            </div>
          </div>
        </section>

        <p className="text-sm text-gray-500 italic mt-6">
          以上规则确保会员能够公平参与积分兑换活动，并提供了清晰的指引，保证平台和用户的权益。
        </p>
      </div>
    );
  };

  return (
    <div className="bg-blue-600 text-white min-h-screen">
      <div className="max-w-4xl mx-auto p-4">
        <div className="flex items-center mb-4">
          <ChevronLeft
            className="cursor-pointer hover:text-blue-200 transition-colors"
            onClick={() => router.back()}
            size={28}
          />
          <h1 className="text-xl font-bold ml-4">积分兑换</h1>
          <button
            onClick={() => setIsRulesOpen(true)}
            className="ml-auto px-4 py-2 font-bold bg-blue-500 hover:bg-blue-400 rounded-lg transition-colors"
          >
            兑换规则
          </button>
        </div>

        <div className="grid gap-4 sm:grid-cols-2">
          {items.map((item) => (
            <div
              key={item._id}
              className="bg-white text-black rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center flex-grow">
                  <img
                    src={item.logo}
                    // alt={item.title}
                    width={50}
                    height={50}
                    className="mr-4 flex-shrink-0"
                  />
                  <div>
                    <h2
                      className="text-lg font-bold"
                      dangerouslySetInnerHTML={{ __html: item.title }}
                    ></h2>
                    <p className="text-gray-600 text-sm">
                      所需积分: {item.points}
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => handleExchange(item)}
                  className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ml-4 flex-shrink-0"
                >
                  兑换
                </button>
              </div>
            </div>
          ))}
        </div>
        {/* 积分预测记录 */}
        <div className="bg-white text-black rounded-lg p-4 mb-4 mt-6">
          <h3 className="text-lg font-bold mb-2 text-blue-700">积分兑换记录</h3>
          <div
            id="exchangeScroll"
            style={{ height: "280px", overflow: "auto" }}
          >
            <InfiniteScroll
              dataLength={exchanges.length}
              next={loadExchanges}
              hasMore={hasMore}
              loader={<h4>Loading...</h4>}
              endMessage={
                <p className="text-center text-gray-500">没有更多记录了</p>
              }
              scrollableTarget="exchangeScroll"
            >
              {exchanges.map((exchange, index) => (
                <div key={exchange._id}>
                  <div className="flex items-start py-3">
                    <div className="flex-grow mr-4">
                      <p className="text-sm text-gray-500 mb-1">
                        {new Date(exchange.exchangeTime).toLocaleDateString()}{" "}
                        {new Date(exchange.exchangeTime).toLocaleTimeString(
                          [],
                          { hour: "2-digit", minute: "2-digit" }
                        )}
                      </p>
                      <p
                        className="font-medium text-gray-800 mb-1"
                        dangerouslySetInnerHTML={{
                          __html: exchange.item.title,
                        }}
                      ></p>
                      <p
                        className={`text-sm font-medium ${exchange.status === "待兑换已审核"
                            ? "text-blue-600"
                            : exchange.status === "待兑换未审核"
                              ? "text-gray-600"
                              : exchange.status === "已兑换"
                                ? "text-green-600"
                                : "text-gray-600"
                          }`}
                      >
                        {exchange.status}
                      </p>
                    </div>
                    <div className="flex-shrink-0 font-bold text-red-600 self-center">
                      -{exchange.item.points}
                    </div>
                  </div>
                  {index < exchanges.length - 1 && (
                    <div className="border-b border-gray-200"></div>
                  )}
                </div>
              ))}
            </InfiniteScroll>
          </div>
        </div>

        {/* 积分规则 */}
        <Modal isOpen={isRulesOpen} onClose={() => setIsRulesOpen(false)}>
          <PointsRules />
        </Modal>

        {selectedItem && (
          <ExchangeForm
            currentUser={currentUser}
            setCurrentUser={setCurrentUser}
            item={selectedItem}
            setAlert={setAlert}
            onClose={() => setSelectedItem(null)}
          />
        )}
        {alert && (
          <Alert
            message={alert.message}
            type={alert.type}
            onClose={() => setAlert(null)}
          />
        )}
      </div>
    </div>
  );
}