"use client";

import { useCallback, useState } from "react";
import type { FlappyStats } from "@/app/(frontend)/flappy/actions";
import { useRealtimePresence } from "@/hooks/useRealtimePresence";
import { FlappyBird } from "./FlappyBird";
import { FlappyLeaderboard } from "./FlappyLeaderboard";

export function FlappyArena({
  initialStats,
  currentUserId,
}: {
  initialStats: FlappyStats;
  currentUserId: number | string;
}) {
  const [refreshKey, setRefreshKey] = useState(0);

  const [playing, setPlaying] = useState(false);
  const activePilots = useRealtimePresence("flappy", playing, true);
  const onPhaseChange = useCallback((phase: "ready" | "playing" | "over") => {
    setPlaying(phase === "playing");
  }, []);

  return (
    <div className="flex flex-col items-center gap-6">
      <FlappyBird initialStats={initialStats} onGameRecorded={() => setRefreshKey((k) => k + 1)} onPhaseChange={onPhaseChange} />
      <FlappyLeaderboard refreshKey={refreshKey} currentUserId={currentUserId} activePilots={activePilots} />
    </div>
  );
}