<script setup lang="ts">
import { ref } from "vue";
import GameHistory from "./components/GameHistory.vue";
import GameReview from "./components/GameReview.vue";
import type { GameHistoryItem } from "./types/timeline";

// Current view state
const currentView = ref<"history" | "review">("history");
const selectedGame = ref<GameHistoryItem | null>(null);

// Navigate to review view
function openReview(game: GameHistoryItem) {
  selectedGame.value = game;
  currentView.value = "review";
}

// Navigate back to history
function closeReview() {
  currentView.value = "history";
  selectedGame.value = null;
}
</script>

<template>
  <div class="app">
    <GameHistory 
      v-if="currentView === 'history'" 
      @open-review="openReview"
    />
    <GameReview
      v-else-if="currentView === 'review' && selectedGame"
      :game="selectedGame"
      @back="closeReview"
    />
  </div>
</template>

<style>
/* Global styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.app {
  min-height: 100vh;
  background: #0a0a13;
}
</style>
