import { memo, useEffect, useRef, useState } from "react";

type Pick = {
  id: string;
  pickNumber: number;
  participant: { name: string };
  sport: { name: string };
  team: { name: string };
};

export const RecentPicksFeed = memo(function RecentPicksFeed({ picks }: { picks: Pick[] }) {
  const recentPicks = picks.slice(-3).reverse();
  const prevNewestIdRef = useRef<string | undefined>(picks.at(-1)?.id);
  const [animatingId, setAnimatingId] = useState<string | undefined>(undefined);

  useEffect(() => {
    const newest = recentPicks[0];
    if (newest && newest.id !== prevNewestIdRef.current) {
      prevNewestIdRef.current = newest.id;
      setAnimatingId(newest.id);
      const t = setTimeout(() => setAnimatingId(undefined), 450);
      return () => clearTimeout(t);
    }
  }, [recentPicks]);

  return (
    <div className="flex flex-col gap-1 px-3 pt-2 pb-1 overflow-hidden">
      <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 mb-0.5">Latest Picks</p>
      {picks.length === 0 ? (
        <p className="text-xs text-muted-foreground py-1">No picks yet</p>
      ) : (
        recentPicks.map((pick, index) => (
          <div
            key={pick.id}
            className={`w-full ${index === 0 && animatingId === pick.id ? "rpf-animate" : ""} bg-muted rounded-lg px-3 py-1.5 flex items-center gap-2`}
          >
            <span className="text-xs font-bold text-muted-foreground shrink-0 tabular-nums">
              #{pick.pickNumber}
            </span>
            <div className="flex flex-col flex-1 min-w-0">
              <span className="text-sm font-medium truncate">
                {pick.participant.name}
              </span>
              <span className="text-xs text-muted-foreground/70 truncate">
                {pick.sport.name}
              </span>
            </div>
            <span className="text-xs text-muted-foreground truncate max-w-[90px] text-right shrink-0">
              {pick.team.name}
            </span>
          </div>
        ))
      )}
    </div>
  );
});