'use client';

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

const socket = io('http://localhost:8080');

export default function HomePage() {
  const [currentPlayer, setCurrentPlayer] = useState<string | null>(null);

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

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

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

  const advanceTurn = async () => {
    await fetch('http://localhost:8080/next'); // triggers backend to emit event
  };




  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}</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>
  );
}