import { createGameState, saveGameState, loadGameState, resetGameState } from './state.js';
import { renderScene } from './renderer.js';

let gameState = loadGameState(); // Load state on initialization

const updateAndRender = (newState) => {
  Object.assign(gameState, newState);
  saveGameState(gameState); // Save automatically after each update
  renderScene(gameState, updateAndRender);
};

document.addEventListener('DOMContentLoaded', () => {
  const app = document.getElementById('app');

  app.innerHTML = '';

  const controls = document.createElement('div');
  controls.id = 'controls';

  const saveButton = document.createElement('button');
  saveButton.textContent = 'Save Progress';
  saveButton.onclick = () => saveGameState(gameState);

  const loadButton = document.createElement('button');
  loadButton.textContent = 'Load Progress';
  loadButton.onclick = () => {
    const loadedState = loadGameState();
    updateAndRender(loadedState);
  };

  const resetButton = document.createElement('button');
  resetButton.textContent = 'Reset Game';
  resetButton.onclick = () => {
    if (confirm('Are you sure you want to reset the game? This will erase all progress.')) {
      gameState = resetGameState(); // Clear state and reset game
      updateAndRender(gameState);
    }
  };

  controls.appendChild(saveButton);
  controls.appendChild(loadButton);
  controls.appendChild(resetButton);

  app.appendChild(controls);

  updateAndRender(gameState);
});