export const cellColors = {
    1: "#007B6C",
    2: "#D18B00",
    3: "#C75D00",
    4: "#0044CC",
    5: "#CC0000",
    6: "#CCCC00",
    7: "#008B8B",
    8: "#8B008B",
  };
  
  const sectionGrid = [
  [1, 1, 2, 2, 2, 3, 3, 3],
  [1, 1, 2, 2, 2, 3, 3, 3],
  [4, 1, 2, 2, 2, 3, 3, 3],
  [4, 1, 5, 5, 5, 5, 3, 3],
  [4, 1, 5, 5, 5, 5, 6, 6],
  [4, 5, 5, 7, 7, 6, 6, 6],
  [4, 8, 7, 7, 7, 6, 6, 6],
  [8, 8, 8, 7, 7, 6, 6, 6]
];
<!-- GridCell.vue -->
<script setup>
defineProps(["content", "color"]);
</script>

<template>
  <div class="cell" :style="{ backgroundColor: color }">
    <img v-if="content === 'queen'" src="@/assets/crown.png" class="queen" />
    <span v-if="content === 'marked'">×</span>
  </div>
</template>

<style scoped>
.cell {
  font-size: 24px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.queen {
  width: 24px;
  height: 24px;
}
</style>

<!-- GameBoard.vue -->
<script setup>
import GridCell from "@/features/game/components/GridCell.vue";
import { createGame } from "@/features/game/composables/createGame";
import WinMessage from "@/features/game/components/WinMessage.vue";
import AppButton from "@/components/AppButton.vue";
import { cellColors } from "@/features/game/data/cellColors.js";

const {
  boardState,
  gameWon,
  isValidQueen,
  toggleCell,
  clearBoard,
} = createGame();
</script>

<template>
  <div class="game-board">
    <template v-for="(row, rowIndex) in boardState">
      <GridCell
        v-for="(cell, cellIndex) in row"
        :key="`${rowIndex}-${cellIndex}`"
        :content="cell.content"
        :color="cellColors[cell.section]"
        :invalid="isValidQueen(rowIndex, cellIndex)"
        @click="toggleCell(rowIndex, cellIndex)"
      />
    </template>
  </div>
  <WinMessage v-if="gameWon" />
  <AppButton @click="clearBoard">Clear Board</AppButton>
</template>

<style scoped>
.game-board {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(8, 42px);
  grid-template-rows: repeat(8, 42px);
  border: 1px solid #000;
}
</style>

// composables/createGame.js
import { ref, computed } from 'vue'
import { sectionGrid } from '@/features/game/data/sectionGrid'

function createBoard() {
  return sectionGrid.map((row) =>
    row.map((section) => ({
      content: null,
      section
    }))
  )
}

export function createGame() {
  const boardState = ref(createBoard())
  const queens = ref([])

  function toggleCell(rowIndex, cellIndex) {
    const cell = boardState.value[rowIndex][cellIndex];
  
    if (!cell.content) {
      cell.content = 'marked';
    } else if (cell.content === 'marked') {
      cell.content = 'queen';
      queens.value.push({ row: rowIndex, col: cellIndex, valid: true });
    } else {
      cell.content = null;
      queens.value = queens.value.filter(
        (queen) => queen.row !== rowIndex || queen.col !== cellIndex
      );
    }
  
    validateBoard();
  }

  function validateBoard() {
    // TODO
  }

  function clearBoard() {
    boardState.value = boardState.value.map((row) =>
      row.map((cell) => ({ ...cell, content: null }))
    )
    queens.value = []
  }

  function isValidQueen(rowIndex, cellIndex) {
    return queens.value.some(
      (queen) => queen.row === rowIndex && queen.col === cellIndex && !queen.valid
    )
  }

  const gameWon = computed(() => {
    if (queens.value.length !== sectionGrid.length) {
      return false
    }

    return queens.value.every((queen) => queen.valid)
  })

  return {
    boardState,
    toggleCell,
    queens,
    isValidQueen,
    clearBoard,
    gameWon
  }
} 

// composables/createGame.js
// ... 

function validateBoard() {
  resetValidations()

  for (const queen of queens.value) {
    const { row, col } = queen
    const cell = boardState.value[row][col]
    const rowValid = validateRow(row)
    const columnValid = validateColumn(col)
    const sectionValid = validateSection(cell.section)
    const diagonalValid = checkDiagonalConflicts(queen)

    queen.valid = rowValid && columnValid && sectionValid && diagonalValid
  }
}

function resetValidations() {
  queens.value.forEach((queen) => (queen.valid = true))
}

function validateRow(rowIndex) {
  const queensInRow = queens.value.filter((queen) => queen.row === rowIndex)

  if (queensInRow.length > 1) {
    queensInRow.forEach((queen) => (queen.valid = false))
    return false
  }
  return true
}

function validateColumn(columnIndex) {
  // TODO
}

function validateSection(section) {
  // TODO
}
function checkDiagonalConflicts(queen) {
  // TODO
} 

<!-- AppTimer.vue -->
<template>
  <div class="timer">⏱ Time: {{ formattedTime }}</div>
</template>

<script setup>
import { useTimer } from "../composables/useTimer";

const { formattedTime } = useTimer();
</script>

<style scoped>
.timer {
  font-size: 13px;
  margin: 10px 0;
}
</style>

import { ref, computed } from 'vue'

const time = ref(0)

export function useTimer() {
  let timerInterval = null

  const startTimer = () => {
    if (timerInterval) return
    timerInterval = setInterval(() => {
      time.value++
    }, 1000)
  }

  const stopTimer = () => {
    clearInterval(timerInterval)
    timerInterval = null
  }

  const resetTimer = () => {
    time.value = 0
  }

  const formattedTime = computed(() => {
    const minutes = Math.floor(time.value / 60)
    const seconds = time.value % 60
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  })

  return {
    time,
    formattedTime,
    startTimer,
    stopTimer,
    resetTimer
  }
}

<script setup>
import { onMounted } from "vue";
import GridCell from "@/features/game/components/GridCell.vue";
import { createGame } from "@/features/game/composables/createGame";
import WinMessage from "@/features/game/components/WinMessage.vue";
import AppTimer from "@/features/timer/components/AppTimer.vue";
import { useTimer } from "@/features/timer/composables/useTimer";
import AppButton from "@/components/AppButton.vue";
import { cellColors } from "@/features/game/data/cellColors.js";

const {
  boardState,
  gameWon,
  isValidQueen,
  toggleCell,
  clearBoard,
} = createGame();

const { startTimer, stopTimer, resetTimer } = useTimer();

function handleToggleCell(rowIndex, cellIndex) {
  toggleCell(rowIndex, cellIndex);

  if (gameWon.value) {
    stopTimer();
  }
}

function resetGame() {
  clearBoard();
  resetTimer();
}

onMounted(() => {
  startTimer();
});
</script>

<template>
  <div class="game-board">
    <template v-for="(row, rowIndex) in boardState">
      <GridCell
        v-for="(cell, cellIndex) in row"
        :key="`${rowIndex}-${cellIndex}`"
        :content="cell.content"
        :color="cellColors[cell.section]"
        :invalid="isValidQueen(rowIndex, cellIndex)"
        @click="handleToggleCell(rowIndex, cellIndex)"
      />
    </template>
  </div>
  <WinMessage v-if="gameWon" />
  <AppTimer />
  <AppButton @click="resetGame">Reset Game</AppButton>
  <AppButton @click="clearBoard">Clear Board</AppButton>
</template>