match-vote-nextjs/src/app/ui/FootballMatch.jsx

"use client";

import React, { useState, useEffect } from "react";
import Alert from "./components/Alert";
import { useRouter } from "next/navigation";

import { format } from "date-fns";
import zhCN from "date-fns/locale/zh-CN";
import { fetchApi } from "../utils/fetch";

import { Minus, Plus, Play, X, Check, Clock, User } from "lucide-react";

const no_goal_logo = "/images/no_goal_logo.png";

const FootballMatch = ({ selectedDayMatches, currentUser }) => {
  const router = useRouter();

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [alert, setAlert] = useState(null);

  const [selectedMatchId, setSelectedMatchId] = useState(null);
  const [selectedMatch, setSelectedMatch] = useState(null);

  const [selectedWinTeams, setSelectedWinTeams] = useState({}); // ["home", "away", "draw"]

  const [totalGoalCountOfMatch, setTotalGoalCountOfMatch] = useState({});

  const [selectedFirstTeamToScoreOfMatch, setSelectedFirstTeamToScoreOfMatch] =
    useState({});

  const [predictions, setPredictions] = useState([]);

  const [selectedFirstTeamToScore, setSelectedFirstTeamToScore] = useState(""); // ["home", "away", "no_goal"]

  const selectedWinTeam = selectedWinTeams[selectedMatchId] || "";

  const predictionMap = predictions.reduce((map, prediction) => {
    map[prediction.matchId] = prediction;
    return map;
  }, {});

  useEffect(() => {
    const fetchPredictions = async () => {
      try {
        const res = await fetchApi(
          `/api/prediction?username=${currentUser?.username || ""}`
        );
        if (res.success) {
          setPredictions(res.data);
        } else {
          setAlert({ type: "error", message: res.error });
        }
      } catch (err) {
        setAlert({ type: "error", message: err });
      }
    };
    if (currentUser?.id) {
      fetchPredictions();
    }
  }, [currentUser]);

  useEffect(() => {
    if (selectedMatchId !== null) {
      handleSubmitPredictions();
    }
  }, [
    selectedWinTeams,
    totalGoalCountOfMatch,
    selectedFirstTeamToScoreOfMatch,
  ]);

  const incrementGoal = (matchId, whoWillWin, totalGoals, matchStatus) => {
    if (checkUserLogin()) {
      return;
    }
    if (matchStatus === "进行中") {
      setAlert({ type: "error", message: "比赛已开始，无法提交预测" });
      return;
    }
    setSelectedMatchId(matchId);
    if (!selectedWinTeams[matchId] && whoWillWin == null) {
      setAlert({ type: "error", message: "请先选择球队" });
      return;
    }
    setTotalGoalCountOfMatch((prev) => {
      const currentGoals = prev[matchId] !== undefined ? prev[matchId] : -1;
      const baseGoals =
        currentGoals === -1 && totalGoals !== null && totalGoals !== undefined
          ? totalGoals
          : currentGoals;
      return {
        ...prev,
        [matchId]: Math.min(baseGoals + 1, 20),
      };
    });

    setTimeout(() => {
      setAlert({ type: "success", message: "预测提交成功" });
    }, 1000);
  };

  const decrementGoal = (matchId, whoWillWin, totalGoals, matchStatus) => {
    if (checkUserLogin()) {
      return;
    }
    if (matchStatus === "进行中") {
      setAlert({ type: "error", message: "比赛已开始，无法提交预测" });
      return;
    }
    setSelectedMatchId(matchId);
    if (!selectedWinTeams[matchId] && whoWillWin == null) {
      setAlert({ type: "error", message: "请先选择球队" });
      return;
    }
    setTotalGoalCountOfMatch((prev) => {
      const currentGoals = prev[matchId] !== undefined ? prev[matchId] : -1;
      const baseGoals =
        currentGoals === -1 && totalGoals !== null && totalGoals !== undefined
          ? totalGoals
          : currentGoals;
      return {
        ...prev,
        [matchId]: Math.max(baseGoals - 1, 0),
      };
    });
    setTimeout(() => {
      setAlert({ type: "success", message: "预测提交成功" });
    }, 1000);
  };

  // 选择who wins
  const handleWinTeamSelect = (matchId, selectedTeam, matchStatus) => {
    if (checkUserLogin()) {
      return;
    }
    if (matchStatus === "进行中") {
      setAlert({ type: "error", message: "比赛已开始，无法提交预测" });
      return;
    }
    console.log("selectedWhoWinTeam", matchId, selectedTeam);
    setSelectedMatchId(matchId);
    setSelectedWinTeams((prevState) => ({
      ...prevState,
      [matchId]: selectedTeam,
    }));
  };

  // 选择 FirstScoreTeam
  const handleFirstScoreTeamSelect = (matchId, selectedTeam) => {
    console.log("selectedFirstScoreTeam", matchId, selectedTeam);
    setSelectedMatchId(matchId);
    setSelectedFirstTeamToScore(selectedTeam?.type);
    setSelectedFirstTeamToScoreOfMatch((prevState) => ({
      ...prevState,
      [matchId]: selectedTeam,
    }));
    setIsModalOpen(false);
  };

  // 打开 FirstScoreTeam 选择框
  const openSelectFirstTeamModal = (match, whoWillWin, firstTeamToScore) => {
    if (checkUserLogin()) {
      return;
    }
    if (match.status === "进行中") {
      setAlert({ type: "error", message: "比赛已开始，无法提交预测" });
      return;
    }
    const matchId = match._id;
    setSelectedMatchId(matchId);
    firstTeamToScore
      ? setSelectedFirstTeamToScore(firstTeamToScore)
      : setSelectedFirstTeamToScore("");
    if (!selectedWinTeams[matchId] && whoWillWin == null) {
      setAlert({ type: "error", message: "请先选择球队" });
      return;
    }
    setSelectedMatch(match);
    setIsModalOpen(true);
  };

  // 提交预测
  const handleSubmitPredictions = async () => {
    console.log(
      totalGoalCountOfMatch,
      selectedWinTeams,
      selectedFirstTeamToScoreOfMatch
    );
    // 格式化单个预测数据的辅助函数
    const formatPrediction = (matchId, existingPrediction = null) => {
      return {
        type: "football",
        matchId,
        football: {
          whoWillWin: {
            prediction:
              selectedWinTeams[matchId] ||
              existingPrediction?.football?.whoWillWin?.prediction ||
              null,
          },
          firstTeamToScore: {
            prediction:
              selectedFirstTeamToScoreOfMatch?.[matchId]?.type ||
              existingPrediction?.football?.firstTeamToScore?.prediction ||
              null,
            firstTeamToScoreLogo:
              selectedFirstTeamToScoreOfMatch?.[matchId]?.logo ||
              existingPrediction?.football?.firstTeamToScore
                ?.firstTeamToScoreLogo ||
              null,
          },
          totalGoals: {
            prediction:
              typeof totalGoalCountOfMatch[matchId] === "number"
                ? totalGoalCountOfMatch[matchId]
                : existingPrediction?.football?.totalGoals?.prediction || null,
          },
        },
      };
    };

    // 生成预测数据数组
    const prediction =
      Object.keys(selectedWinTeams).length > 0
        ? Object.keys(selectedWinTeams).map((matchId) =>
            formatPrediction(matchId)
          )
        : (() => {
            const existingPrediction = predictions.find(
              (prediction) => prediction.matchId === selectedMatchId
            );
            return existingPrediction
              ? [formatPrediction(selectedMatchId, existingPrediction)]
              : [];
          })();

    try {
      const res = await fetchApi("/api/prediction", {
        method: "POST",
        body: JSON.stringify({
          userId: currentUser?.id,
          predictions: prediction,
        }),
      });
      if (res.success) {
        setAlert({ type: "success", message: "预测提交成功" });
      } else {
        setAlert({ type: "error", message: res.error });
      }
    } catch (error) {
      console.error("Error submitting predictions:", error);
    }
  };

  const checkUserLogin = () => {
    if (!currentUser) {
      setAlert({ type: "error", message: "请先登录" });
      return true;
    }
    return false;
  };

  return (
    <div className="bg-blue-600 text-white p-4 max-w-md mx-auto  min-h-screen">
      <div>
        {selectedDayMatches.map((match) => {
          const formattedDate = format(new Date(match.date), "MM月dd日EEEE", {
            locale: zhCN,
          });

          const prediction = predictionMap[match._id];
          const whoWillWin = prediction
            ? prediction.football?.whoWillWin.prediction
            : null;
          const totalGoals = prediction
            ? prediction.football?.totalGoals.prediction
            : null;
          const firstTeamToScore = prediction
            ? prediction.football?.firstTeamToScore.prediction
            : null;
          const firstTeamToScoreLogo = prediction
            ? prediction.football?.firstTeamToScore.firstTeamToScoreLogo
            : null;

          return (
            <div key={match._id} className="bg-blue-900 rounded-lg">
              <div className="flex justify-between items-center bg-blue-800 text-white py-2 px-4 rounded-t-lg">
                <div className="flex items-center">
                  <span className="text-sm">{formattedDate}</span>
                </div>
                <div className="flex-grow text-center">
                  <span className="font-bold text-base">{match.league}</span>
                </div>
                <div className="flex items-center">
                  {match.status === "未开始" ? (
                    <>
                      <Clock className="w-5 h-5 mr-1" />
                      <span className="font-bold text-lg">{match.time}</span>
                    </>
                  ) : match.status === "进行中" ? (
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
                      <span className="text-gray-200">进行中</span>
                    </div>
                  ) : (
                    <span className="text-gray-200">{match.status}</span>
                  )}
                </div>
              </div>

              <h2 className="text-center text-xl font-bold my-4">
                谁将获胜？
                <span className="text-sm font-normal ml-2 text-yellow-300">
                  (猜对可得 {match.football.pointRewards.whoWillWin} 积分)
                </span>
              </h2>

              <div className="flex justify-between mb-6 gap-2 px-4">
                <div className="flex-1">
                  <TeamCard
                    logoUrl={match.homeTeam.logo}
                    name={match.homeTeam.name}
                    selected={
                      selectedWinTeams.hasOwnProperty(match._id)
                        ? "home" == selectedWinTeams[match._id]
                        : "home" == whoWillWin
                    }
                    onClick={() =>
                      handleWinTeamSelect(match._id, "home", match.status)
                    }
                  />
                </div>

                <div
                  className="flex flex-col items-center  flex-1 pt-2 bg-[hsla(0,0%,100%,0.1)] rounded-md relative"
                  onClick={() =>
                    handleWinTeamSelect(match._id, "draw", match.status)
                  }
                >
                  <div className="w-10 h-10 mb-2">
                    <img
                      src="/images/draw_flag.png"
                      width={40}
                      height={40}
                      alt="平局"
                    />
                  </div>

                  <span className="text-sm py-2">平局</span>
                  <div
                    className={`w-6 h-6 rounded-full  ${
                      (
                        selectedWinTeams.hasOwnProperty(match._id)
                          ? "draw" == selectedWinTeams[match._id]
                          : "draw" == whoWillWin
                      )
                        ? "bg-red-500"
                        : "border-2 border-red-500  bg-white"
                    } flex items-center justify-center mt-2 absolute bottom-0 transform translate-y-1/3`}
                  >
                    <span className="text-white text-xs">
                      {(
                        selectedWinTeams.hasOwnProperty(match._id)
                          ? "draw" == selectedWinTeams[match._id]
                          : "draw" == whoWillWin
                      )
                        ? "✓"
                        : ""}
                    </span>
                  </div>
                </div>

                <div className="flex-1">
                  <TeamCard
                    logoUrl={match.awayTeam.logo}
                    name={match.awayTeam.name}
                    selected={
                      selectedWinTeams.hasOwnProperty(match._id)
                        ? "away" == selectedWinTeams[match._id]
                        : "away" == whoWillWin
                    }
                    onClick={() =>
                      handleWinTeamSelect(match._id, "away", match.status)
                    }
                  />
                </div>
              </div>

              <div className="px-3 bg-blue-800 rounded-bl-lg rounded-br-lg">
                <div className="flex justify-between items-center h-12 bg-blue-800 border-b border-[#f2f2f2]">
                  <span className="text-sm">
                    首先进球的球队
                    <span className="text-xs text-yellow-300 ml-2">
                      (猜对可得 {match.football.pointRewards.firstTeamToScore}{" "}
                      积分)
                    </span>
                  </span>
                  {selectedFirstTeamToScoreOfMatch[match._id] ||
                  firstTeamToScore ? (
                    <img
                      src={
                        selectedFirstTeamToScoreOfMatch[match._id]?.logo ||
                        firstTeamToScoreLogo
                      }
                      width={32}
                      height={32}
                      onClick={() =>
                        openSelectFirstTeamModal(
                          match,
                          whoWillWin,
                          firstTeamToScore
                        )
                      }
                    />
                  ) : (
                    <button
                      className="bg-red-500 w-6 h-6 rounded-full flex items-center justify-center"
                      onClick={() =>
                        openSelectFirstTeamModal(
                          match,
                          whoWillWin,
                          firstTeamToScore
                        )
                      }
                    >
                      <span className="text-2xl">+</span>
                    </button>
                  )}
                </div>

                <div className="flex justify-between items-center mb-4 bg-blue-800  h-12">
                  <span className="text-sm">
                    比赛总进球数
                    <span className="text-xs text-yellow-300 ml-2">
                      (猜对可得 {match.football.pointRewards.totalGoals} 积分)
                    </span>
                  </span>
                  <div
                    className={`flex items-center ${
                      totalGoalCountOfMatch[match._id] != null
                        ? "bg-blue-900"
                        : ""
                    } rounded-full`}
                  >
                    {(totalGoalCountOfMatch[match._id] != null ||
                      totalGoals != null) && (
                      <button
                        className="bg-red-500 w-6 h-6 rounded-full flex items-center justify-center"
                        onClick={() =>
                          decrementGoal(
                            match._id,
                            whoWillWin,
                            totalGoals,
                            match.status
                          )
                        }
                      >
                        <Minus size={20} />
                      </button>
                    )}
                    <span className="text-xl mx-3 font-bold">
                      {totalGoalCountOfMatch[match._id] >= 0
                        ? totalGoalCountOfMatch[match._id]
                        : totalGoals}
                    </span>
                    <button
                      className="bg-red-500 w-6 h-6 rounded-full flex items-center justify-center"
                      onClick={() =>
                        incrementGoal(
                          match._id,
                          whoWillWin,
                          totalGoals,
                          match.status
                        )
                      }
                    >
                      <Plus size={20} />
                    </button>
                  </div>
                </div>
              </div>
              {alert && (
                <Alert
                  message={alert.message}
                  type={alert.type}
                  onClose={() => setAlert(null)}
                />
              )}
            </div>
          );
        })}
      </div>

      {isModalOpen && (
        <FirstTeamToScoreModal
          onClose={() => setIsModalOpen(false)}
          onSelectFirstScoreTeam={handleFirstScoreTeamSelect}
          selectedFirstTeamToScore={
            selectedFirstTeamToScoreOfMatch[selectedMatchId]?.type ||
            selectedFirstTeamToScore
          }
          selectedMatch={selectedMatch}
        />
      )}
    </div>
  );
};

const FirstTeamToScoreModal = ({
  onClose,
  onSelectFirstScoreTeam,
  selectedFirstTeamToScore,
  selectedMatch,
}) => {
  const handleSelect = (selectedTeam) => {
    onSelectFirstScoreTeam(selectedMatch._id, selectedTeam);
  };

  const homeLogo = selectedMatch.homeTeam.logo;
  const awayLogo = selectedMatch.awayTeam.logo;

  return (
    <div className="fixed inset-x-0 bottom-0 bg-white text-black rounded-t-3xl shadow-lg z-50">
      <div className="p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-bold text-purple-800">
            首先进球的球队是？
          </h2>
          <button onClick={onClose} className="text-gray-500">
            <X size={24} />
          </button>
        </div>
        <p className="text-gray-600 mb-6">赢取额外积分</p>

        <div className="space-y-3">
          <TeamOption
            logoUrl={homeLogo}
            name={selectedMatch.homeTeam.name}
            isSelected={selectedFirstTeamToScore === "home"}
            onSelect={() =>
              handleSelect({
                ...selectedMatch.homeTeam,
                type: "home",
              })
            }
          />
          <TeamOption
            logoUrl={no_goal_logo}
            name="无进球"
            isSelected={selectedFirstTeamToScore === "no_goal"}
            onSelect={() =>
              handleSelect({
                name: "无进球",
                logo: no_goal_logo,
                type: "no_goal",
              })
            }
          />
          <TeamOption
            logoUrl={awayLogo}
            name={selectedMatch.awayTeam.name}
            isSelected={selectedFirstTeamToScore === "away"}
            onSelect={() =>
              handleSelect({
                ...selectedMatch.awayTeam,
                type: "away",
              })
            }
          />
        </div>
      </div>
      <button
        className="w-full bg-blue-500 text-white py-4 text-center font-bold"
        onClick={onClose}
      >
        关闭
      </button>
    </div>
  );
};

const TeamCard = ({ logoUrl, name, selected, onClick }) => {
  return (
    <div
      className="flex flex-col items-center bg-white text-black text-sm rounded-md px-2 py-2 relative"
      onClick={onClick}
    >
      <div className="w-10 h-10">
        <img src={logoUrl} width={40} height={40} className="mb-2" />
      </div>
      <span className="font-bold mb-1 pt-4 pb-6">{name}</span>
      <div
        className={`w-6 h-6 rounded-full absolute bottom-0 transform translate-y-1/3 ${
          selected
            ? "bg-red-500 flex items-center justify-center"
            : "border-2 border-red-500 bg-white "
        }`}
      >
        {selected && <span className="text-white text-sm">✓</span>}
      </div>
    </div>
  );
};

const TeamOption = ({ logoUrl, name, isSelected, onSelect }) => (
  <div
    className={`flex items-center justify-between p-4  cursor-pointer ${
      isSelected ? "bg-blue-500 text-white" : "bg-gray-100"
    }`}
    onClick={onSelect}
  >
    <div className="flex items-center">
      <img
        src={logoUrl}
        width={30}
        height={30}
        className="mr-3"
        onClick={onSelect}
      />
      <span>{name}</span>
    </div>
    {isSelected && <Check size={24} />}
  </div>
);

export default FootballMatch;