/* eslint-disable */
const { useState, useEffect, useRef } = React;

const GAMES = [
  { id: "venge", title: "Venge.io", developer: "Cem Demir", url: "https://venge.io/" },
  { id: "smashkarts", title: "SmashKarts.io", developer: "Tall Team", url: "https://smashkarts.io/" },
  { id: "shellshock", title: "ShellShock.io", developer: "Blue Wizard Digital", url: "https://shellshock.io/" },
  { id: "zombs", title: "ZombsRoyale.io", developer: "End Game", url: "https://zombsroyale.io/" },
  { id: "skribbl", title: "Skribbl.io", developer: "ticedev", url: "https://skribbl.io/" },
  { id: "ev", title: "Ev.io", developer: "Addicting Games", url: "https://ev.io/" },
  { id: "1v1", title: "1v1.lol", developer: "Lior Alterman", url: "https://1v1.lol/" },
  { id: "justbuild", title: "JustBuild.lol", developer: "Lior Alterman", url: "https://justbuild.lol/" }
];

const App = () => {
  const [currentGame, setCurrentGame] = useState(null);
  const iframeRef = useRef(null);

  useEffect(() => {
    shuffleGame();
  }, []);

  const shuffleGame = () => {
    let newGame;
    do {
      newGame = GAMES[Math.floor(Math.random() * GAMES.length)];
    } while (currentGame && newGame.id === currentGame.id && GAMES.length > 1);
    setCurrentGame(newGame);
  };

  if (!currentGame) return null;

  return (
    <div className="app-container">
      <div className="game-overlay-bar">
        <div className="game-overlay-info">
          <a href="index.html" className="overlay-back-btn" aria-label="Back to Garv">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <line x1="19" y1="12" x2="5" y2="12"></line>
              <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
          </a>
          <div>
            <div className="overlay-title">Playing: {currentGame.title}</div>
            <div className="overlay-credit">Developed by {currentGame.developer}</div>
          </div>
        </div>
        <div className="game-overlay-actions">
          <button className="shuffle-btn" onClick={shuffleGame}>
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M16 3h5v5"></path>
              <path d="M4 20L21 3"></path>
              <path d="M21 16v5h-5"></path>
              <path d="M15 15l6 6"></path>
              <path d="M4 4l5 5"></path>
            </svg>
            Shuffle Game
          </button>
          <button
            className="fullscreen-btn"
            onClick={() => {
              if (iframeRef.current && iframeRef.current.requestFullscreen) {
                iframeRef.current.requestFullscreen();
              }
            }}
            aria-label="Fullscreen"
          >
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="15 3 21 3 21 9"></polyline>
              <polyline points="9 21 3 21 3 15"></polyline>
              <line x1="21" y1="3" x2="14" y2="10"></line>
              <line x1="3" y1="21" x2="10" y2="14"></line>
            </svg>
          </button>
        </div>
      </div>

      <div className="game-frame-wrapper visible">
        <iframe
          ref={iframeRef}
          src={currentGame.url}
          className="game-iframe"
          title={currentGame.title}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        ></iframe>
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);