'use client';

import { useEffect, useState } from 'react';
import io from 'socket.io-client';




export default function HomePage() {
  let baseUrl = "";
  if (typeof window !== "undefined") {
    baseUrl = `${window.location.protocol}//${window.location.hostname}`;
  }
  const backendUrl = `${baseUrl}:${process.env.NEXT_PUBLIC_API_BASE}`;
  const socket = io(`${backendUrl}`);

  const [time, setTime] = useState<Date>(new Date());
  
  const [currentPlayer, setCurrentPlayer] = useState<string | null>(null);

  const [gameStatus, setGameStatus] = useState<{ gameActive: boolean, players: any[] }>({
    gameActive: false,
    players: [],
  });

  useEffect(() => {
    socket.on('connect', () => {
      console.log('Connected to Socket.IO server');
    });

    socket.on('player_update', (data: { nextPlayer: string }) => {
      setCurrentPlayer(data.nextPlayer);
      fetchStatus();
    });

    return () => {
      socket.off('player_update');
    };
  }, []);

  const advanceTurn = async () => {
    await fetch(`${baseUrl}/next`); // triggers backend to emit event
  };

  const fetchStatus = async () => {
    try {
      const res = await fetch(`${backendUrl}/status`);
      const data = await res.json();
      setGameStatus(data);
    } catch (err) {
      console.error("Failed to fetch status", err);
    }
  };

  if (gameStatus.gameActive) {
    return (
      <main className="p-6">
        <h1 className="text-2xl font-bold mb-4">Game Turn Tracker</h1>

        <div className="mb-4">
          {currentPlayer ? (
            <p className="text-lg">
              🎯 Current Player: <strong>{currentPlayer.name} ({currentPlayer.group})</strong>
            </p>
          ) : (
            <p className="text-gray-500">Waiting for turn to start…</p>
          )}
        </div>

        <button
          onClick={advanceTurn}
          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
          Next Player
        </button>
      </main>
    );
  } else {
      return (
        <main className="p-6">
          {time.getTime()}
          This will show the time
        </main>
    );
  }

}