import React from 'react';
import { Box, Center, Spinner, useColorModeValue } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { getPublicScoreboard, ScoreboardState } from '@/services/scoreboard';
import ScoreboardDisplay from '@/components/scoreboard/ScoreboardDisplay';

// Public overlay page intended for OBS/browser source.
// Minimal chrome, transparent-friendly background.
const OverlayScoreboardPage: React.FC = () => {
  const bg = useColorModeValue('transparent', 'transparent');
  const { data, isLoading } = useQuery<ScoreboardState>({
    queryKey: ['public-scoreboard'],
    queryFn: getPublicScoreboard,
    refetchInterval: 1000,
    staleTime: 3000,
  });

  return (
    <Box minH="100vh" bg={bg} display="flex" alignItems="center" justifyContent="center" p={4}>
      {isLoading || !data ? (
        <Center><Spinner /></Center>
      ) : (
        <ScoreboardDisplay state={data} />
      )}
    </Box>
  );
};

export default OverlayScoreboardPage;