<script setup lang="ts">
import { ref } from 'vue';
import DigitalTwin from './components/DigitalTwin.vue'
import BuildingInfoCanvas from './components/BuildingInfoCanvas.vue'
import TimeControls from './components/TimeControls.vue'
import SettingsModal from './components/SettingsModal.vue'
import AddBuildingModal from './components/AddBuildingModal.vue'

const isSettingsOpen = ref(false);
const isAddBuildingOpen = ref(false);
</script>

<template>
  <DigitalTwin />
  <BuildingInfoCanvas />
  <TimeControls />
  
  <button class="settings-btn" @click="isSettingsOpen = true">
    ⚙ Settings
  </button>

  <button class="add-building-btn" @click="isAddBuildingOpen = true">
    + Add Building
  </button>
  
  <SettingsModal :isOpen="isSettingsOpen" @close="isSettingsOpen = false" />
  <AddBuildingModal :isOpen="isAddBuildingOpen" @close="isAddBuildingOpen = false" />
</template>

<style>
/* CSS Reset / Base styles */
html, body, #app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.settings-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 8px 12px;
    background: #000;
    color: white;
    border: 2px solid #FFD700;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    transition: all 0.1s;
}

.settings-btn:hover {
    background: #111;
    color: #FFD700;
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}

.settings-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.add-building-btn {
    position: absolute;
    top: 20px;
    right: 160px; /* Positioned to the left of Settings */
    z-index: 1000;
    padding: 8px 12px;
    background: #000;
    color: white;
    border: 2px solid #00FF00; /* Green accent */
    font-family: 'Courier New', monospace;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    transition: all 0.1s;
}

.add-building-btn:hover {
    background: #111;
    color: #00FF00;
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}

.add-building-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}
</style>
