polaris-task-force/src/components/frontend/blocks/XPDisplay.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item";
import { Progress } from "@/components/ui/progress";
import { SparkleIcon } from "lucide-react";
import type { ResolvedLevel } from "@/utils/xp/resolveLevel";
import { PROFILE_UPDATE_EVENT, type ProfileUpdateDetail } from "@/hooks/useGameTick";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

const XPDisplay = ({ xpLevel }: { xpLevel: ResolvedLevel }) => {
  const { levelName, levelDesc, progress, xp, nextLevelXP } = xpLevel;
  const [xpGain, setXpGain] = useState<number | null>(null);
  const [xpGainId, setXpGainId] = useState(0);
  const lastGainRef = useRef<{ amount: number; at: number } | null>(null);

  useEffect(() => {
    let clearTimer: ReturnType<typeof setTimeout> | null = null;

    const handleProfileUpdate = (event: Event) => {
      const detail = (event as CustomEvent<ProfileUpdateDetail>).detail;
      if (!detail || typeof detail.xpGained !== "number" || detail.xpGained <= 0) return;
      const now = Date.now();
      if (lastGainRef.current?.amount === detail.xpGained && now - lastGainRef.current.at < 500) {
        return;
      }
      lastGainRef.current = { amount: detail.xpGained, at: now };

      setXpGain(detail.xpGained);
      setXpGainId((id) => id + 1);
      if (clearTimer) clearTimeout(clearTimer);
      clearTimer = setTimeout(() => setXpGain(null), 1500);
    };

    window.addEventListener(PROFILE_UPDATE_EVENT, handleProfileUpdate);
    return () => {
      if (clearTimer) clearTimeout(clearTimer);
      window.removeEventListener(PROFILE_UPDATE_EVENT, handleProfileUpdate);
    };
  }, []);

  return (
    <Item>
      <ItemHeader>
        <ItemTitle className="flex justify-between items-center w-full">
          <SparkleIcon />
          <div className="flex flex-col items-end">
            <Tooltip>
              <TooltipTrigger>
                <span className="uppercase">{levelName}</span>
              </TooltipTrigger>
              <TooltipContent>
                <p>{levelDesc ?? "Missing content!"}</p>
              </TooltipContent>
            </Tooltip>
            <span className="relative text-2xl font-bold uppercase flex flex-row items-center">
              {xp.toLocaleString()}
              {xpGain !== null && (
                <span
                  key={`${xpGain}-${xpGainId}`}
                  className="pointer-events-none absolute right-full top-0 mr-2 whitespace-nowrap text-sm font-bold normal-case text-emerald-400 animate-[xp-gain_1.5s_ease-out_forwards]"
                  aria-live="polite"
                >
                  +{xpGain.toLocaleString()} XP
                </span>
              )}
            </span>
          </div>
        </ItemTitle>
      </ItemHeader>
      <ItemContent className="flex flex-col gap-1">
        <Progress value={progress} />
        {nextLevelXP !== null && (
          <span className="text-[10px] text-muted-foreground text-right">
            {Math.floor(progress)}% to next level
          </span>
        )}
      </ItemContent>
    </Item>
  );
};

export default XPDisplay;