import { memo, useEffect, useRef, useState } from "react";
import { ChevronDown } from "lucide-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).toReversed();
  const prevNewestIdRef = useRef<string | undefined>(picks.at(-1)?.id);
  const [animatingId, setAnimatingId] = useState<string | undefined>(undefined);
  const [isExpanded, setIsExpanded] = useState(true);

  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 px-3 pt-2 pb-1 overflow-hidden border-b">
      <button
        className="flex items-center justify-between w-full mb-0.5 py-0.5"
        onClick={() => setIsExpanded((prev) => !prev)}
        aria-expanded={isExpanded}
        aria-label="Toggle latest picks"
      >
        <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">Latest Picks</p>
        <ChevronDown
          className={`h-3 w-3 text-muted-foreground/60 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}`}
        />
      </button>
      {isExpanded && (
        <div className="flex flex-col gap-1 mt-0.5">
          {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>
      )}
    </div>
  );
});