"use client";

import { useCallback, useState } from "react";
import { CustomMinesweeperBoard, type CustomMinefieldData } from "./CustomMinesweeperBoard";
import { CustomMinefieldLeaderboard } from "./CustomMinefieldLeaderboard";
import { ExposureRuleToggle } from "./ExposureRuleToggle";
import { useRealtimePresence } from "@/hooks/useRealtimePresence";
import { useSidebar } from "@/components/ui/sidebar";
import { useEffect } from "react";

export function CustomMinefieldArena({
  minefield,
  currentUserId,
  isAuthor,
}: {
  minefield: CustomMinefieldData;
  currentUserId: number | string;
  isAuthor: boolean;
}) {
  const [refreshKey, setRefreshKey] = useState(0);
  const [playing, setPlaying] = useState(false);
  const { isMobile, setOpenMobile } = useSidebar();
  const activeTeams = useRealtimePresence("eod", playing, true);
  const onPhaseChange = useCallback((phase: "ready" | "playing" | "over") => {
    setPlaying(phase === "playing");
  }, []);

  useEffect(() => {
    if (playing && isMobile) setOpenMobile(false);
  }, [isMobile, playing, setOpenMobile]);

  return (
    <div className="flex flex-col items-center gap-6">
      <CustomMinesweeperBoard
        minefield={minefield}
        onGameRecorded={() => setRefreshKey((key) => key + 1)}
        onPhaseChange={onPhaseChange}
      />
      {isAuthor && (
        <ExposureRuleToggle minefieldId={minefield.id} exposeEdgeMines={minefield.exposeEdgeMines} />
      )}
      <CustomMinefieldLeaderboard
        minefieldId={minefield.id}
        refreshKey={refreshKey}
        currentUserId={currentUserId}
      />
      {activeTeams.length > 0 && (
        <p className="text-xs text-muted-foreground">
          {activeTeams.length} operator{activeTeams.length === 1 ? "" : "s"} on site
        </p>
      )}
    </div>
  );
}