<template>
  <div class="app-container">
    <!-- Header Section -->
    <header class="header">
      <h1>Home Monitor</h1>
    </header>

    <!-- Main Content Section -->
    <div class="main-content">
      <!-- Left Sidebar with Controls -->
      <div class="sidebar">
        <ControlPanel
          :show-temperature.sync="showTemperature"
          :show-humidity.sync="showHumidity"
          @add-temperature="addTemperature"
          @refresh="refreshData"
        />
      </div>

      <!-- Right Side Chart Area -->
      <div class="chart-area">
        <ChartComponent
          :series="series"
          :show-temperature="showTemperature"
          :show-humidity="showHumidity"
          :loading="loading"
          :error="error"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ChartComponent from "./components/ChartComponent.vue";
import ControlPanel from "./components/ControlPanel.vue";
import { HttpClient } from "./Services/HttpClient";
import { TimeSeriesManager } from "./TimeSeriesManager";
import { URL, USERNAME, PASSWORD, USER, ROOM, DEVICE, APP_NAME } from "./const";
import { Serie } from "./Measures/Serie";

let httpClient = new HttpClient(URL, USERNAME, PASSWORD);
let manager = new TimeSeriesManager(httpClient);

export default defineComponent({
  name: APP_NAME,
  components: {
    ChartComponent,
    ControlPanel,
  },
  data() {
    return {
      manager,
      series: [] as any[],
      loading: true,
      error: undefined as string | undefined,
      showTemperature: true,
      showHumidity: true,
    };
  },
  methods: {
    addTemperature() {
      // Implement your functionality here
      console.log("Add temperature clicked");
    },

    refreshData() {
      console.log("Refreshing data...");
      this.fetchData();
    },

    fetchData() {
      this.loading = true;
      this.error = undefined;

      manager
        .getTimeSeriesData(USER, ROOM, DEVICE)
        .then((result) => {
          this.series = result;
          this.loading = false;
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
          this.error = "Failed to load data. Please try again later.";
          this.loading = false;
        });
    },
  },
  mounted() {
    // Fetch data when component is mounted
    this.fetchData();
  },
});
</script>

<style>
.app-container {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.header {
  padding: 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.main-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  height: 100%;
  overflow: hidden;
}

.sidebar {
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
  padding: 1.25rem;
  overflow-y: auto;
}

.chart-area {
  padding: 1.5rem;
  height: 100%;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
  }
}
</style>
