"use client";

import { scoresaberService } from "@/common/service/impl/scoresaber";
import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
import useWindowDimensions from "@/hooks/use-window-dimensions";
import { useQuery } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import Card from "../card";
import Pagination from "../input/pagination";
import LeaderboardScore from "./leaderboard-score";

type Props = {
  leaderboard: ScoreSaberLeaderboardToken;
};

export default function LeaderboardScores({ leaderboard }: Props) {
  const { width } = useWindowDimensions();

  const [currentPage, setCurrentPage] = useState(1);
  const [currentScores, setCurrentScores] = useState<
    ScoreSaberLeaderboardScoresPageToken | undefined
  >();

  const {
    data: scores,
    isError,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["playerScores", leaderboard.id, currentPage],
    queryFn: () =>
      scoresaberService.lookupLeaderboardScores(
        leaderboard.id + "",
        currentPage,
      ),
    staleTime: 30 * 1000, // Cache data for 30 seconds
  });

  useEffect(() => {
    if (scores) {
      setCurrentScores(scores);
    }
  }, [scores]);

  useEffect(() => {
    refetch();
  }, [leaderboard, currentPage, refetch]);

  if (currentScores === undefined) {
    return undefined;
  }

  return (
    <motion.div
      initial={{ opacity: 0, y: -50 }}
      exit={{ opacity: 0, y: -50 }}
      animate={{ opacity: 1, y: 0 }}
    >
      <Card className="flex gap-2 border border-input mt-2">
        <div className="text-center">
          {isError && <p>Oopsies! Something went wrong.</p>}
          {currentScores.scores.length === 0 && (
            <p>No scores found. Invalid Page?</p>
          )}
        </div>

        <div className="grid min-w-full grid-cols-1 divide-y divide-border">
          {currentScores.scores.map((playerScore, index) => (
            <LeaderboardScore
              key={index}
              score={playerScore}
              leaderboard={leaderboard}
            />
          ))}
        </div>

        <Pagination
          mobilePagination={width < 768}
          page={currentPage}
          totalPages={Math.ceil(
            currentScores.metadata.total / currentScores.metadata.itemsPerPage,
          )}
          loadingPage={isLoading ? currentPage : undefined}
          onPageChange={setCurrentPage}
        />
      </Card>
    </motion.div>
  );
}
