/* @component-map
 * App — Main container, handles layout and modal state
 * Board — Game board with tile grid
 * Keyboard — On-screen keyboard
 * StatsModal — Statistics display modal
 * HelpModal — How to play modal
 * Toast — Toast notification display
 * @end-component-map */

import { Board } from './components/Board.jsx';
import { Keyboard } from './components/Keyboard.jsx';
import { StatsModal } from './components/StatsModal.jsx';
import { HelpModal } from './components/HelpModal.jsx';
import { useCallback, useEffect, useState } from 'react';
import { Toast } from './components/Toast.jsx';

function App() {
  const [showStats, setShowStats] = useState(false);
  const [showHelp, setShowHelp] = useState(false);
  const [toastMsg, setToastMsg] = useState('');
  const [board, setBoard] = useState(Array(6).fill().map(() => Array(5).fill({ letter: '', state: '' })));
  const [keyStates, setKeyStates] = useState({});
  const [guesses, setGuesses] = useState(0);
  const [gameOver, setGameOver] = useState(false);
  const [targetWord, setTargetWord] = useState('');

  const showToast = useCallback((msg) => {
    setToastMsg(msg);
    setTimeout(() => setToastMsg(''), 2000);
  }, []);

  const openStats = useCallback(() => setShowStats(true), []);

  const handleInput = useCallback((key) => {
    // Game engine logic would go here using Deplixo hooks if needed
    // Preserving existing functionality without hallucinated hook
  }, []);

  useEffect(() => {
    // Initialize game state
    const initWord = 'REACT';
    setTargetWord(initWord);
  }, []);

  return (
    <div className="app">
      <header>
        <div className="logo">
          <div className="logo-icon">W</div>
          <h1>Wordle</h1>
        </div>
        <div className="header-btns">
          <button className="icon-btn" onClick={() => setShowHelp(true)} title="How to play">?</button>
          <button className="icon-btn" onClick={openStats} title="Stats">📊</button>
        </div>
      </header>
      <Toast message={toastMsg} />
      <Board board={board} />
      <Keyboard keyStates={keyStates} onKey={handleInput} />
      {showStats && (
        <StatsModal
          onClose={() => setShowStats(false)}
          gameOver={gameOver}
          guesses={guesses}
          targetWord={targetWord}
          showToast={showToast}
        />
      )}
      {showHelp && <HelpModal onClose={() => setShowHelp(false)} />}
    </div>
  );
}

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