<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import axios from "axios";




const POLL_INTERVAL_MS = 30000
const MAX_POINTS = 10

interface AreaChartItem {
  date: string
  value: number
  pinned: number
}

const cpuLoadData = ref<AreaChartItem[]>([])
const cpuClockData = ref<AreaChartItem[]>([])
const cpuTempData = ref<AreaChartItem[]>([])
const ramLoadData = ref<AreaChartItem[]>([])


let intervalId: number | undefined
let isUpdating = false



async function updateMetrics() {
  if (isUpdating) return
  isUpdating = true
  try {



    const token = useCookie('token').value
    const response = await axios.post('/api/getMetrics', { token })

    const load = response.data.cpu?.load || 0
    const curClock = response.data.cpu?.currentClock || 0
    const maxClock = response.data.cpu?.maxClock || 0


    const cpuTemp = response.data.cpu?.temp || 0



    const ramLoad = response.data.ram?.used || 0
    const ramTotal = response.data.ram?.total || 0



    const now = new Date().toLocaleTimeString()
    cpuLoadData.value = [...cpuLoadData.value, { date: now, value: load, pinned: 100 }].slice(-MAX_POINTS)
    cpuClockData.value = [...cpuClockData.value, { date: now, value: curClock, pinned: maxClock }].slice(-MAX_POINTS)
    cpuTempData.value = [...cpuTempData.value, { date: now, value: cpuTemp, pinned: 100 }].slice(-MAX_POINTS)
    ramLoadData.value = [...ramLoadData.value, { date: now, value: ramLoad, pinned: ramTotal }].slice(-MAX_POINTS)
  } finally {
    isUpdating = false
  }
}

onMounted(() => {
  const empty1 = Array(MAX_POINTS).fill({ date: '', value: 0, pinned: 100 })
  //cpuLoadData.value = [...empty1]
  updateMetrics()
  setTimeout(() => {
    updateMetrics(); // Second call after 2 seconds
  }, 1010);
  intervalId = window.setInterval(updateMetrics, POLL_INTERVAL_MS)
})

onUnmounted(() => {
  if (intervalId) clearInterval(intervalId)
})






const chartDataCpuUsage = computed(() => cpuLoadData.value)
const chartCategoriesCpuUsage = computed(() => ({
  value: { name: 'CPU Load (%)', color: '#863bf6' },
  pinned: { name: 'Limit (100%)', color: 'rgba(0,0,0,0.01)' },
}))
const xFormatterCpuUsage = (i: number) => chartDataCpuUsage.value[i]?.date || ''




const chartDataCpuClock = computed(() => cpuClockData.value)
const chartCategoriesCpuClock = computed(() => ({
  value: { name: 'CPU Clock (Ghz)', color: '#9cf63b' },
  pinned: { name: 'CPU Max Clock (Ghz)', color: 'rgba(0,0,0,0.01)' },
}))
const xFormatterCpuClock = (i: number) => chartDataCpuClock.value[i]?.date || ''

const chartDataCpuTemp = computed(() => cpuTempData.value)
const chartCategoriesCpuTemp = computed(() => ({
  value: { name: 'CPU Temp (°C)', color: '#f63b3b' },
  pinned: { name: 'Max Temp (°C)', color: 'rgba(0,0,0,0.01)' },
}))
const xFormatterCpuTemp = (i: number) => chartDataCpuTemp.value[i]?.date || ''




const chartDataRamUsage = computed(() => ramLoadData.value)
const chartCategoriesRamUsage = computed(() => ({
  value: { name: 'RAM Used (Gb)', color: '#f63b6d' },
  pinned: { name: 'RAM Total (Gb)', color: 'rgba(0,0,0,0.01)' },
}))
const xFormatterRamUsage = (i: number) => chartDataRamUsage.value[i]?.date || ''




</script>


<template>
  <div class="flex flex-col items-center justify-center py-16 px-6">
    <div class="grid md:grid-cols-3 gap-6 w-full max-w-5xl mb-8">

      <div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
        <h2 class="text-xl font-bold text-center">CPU Info</h2>
        <div class="mt-4 text-sm">
          <p><strong>Manufacturer:</strong> cpuInfo.manufacturer</p>
          <p><strong>Model:</strong> cpuInfo.model</p>
          <p><strong>Core Count:</strong> cpuInfo.cores</p>
          <p><strong>Speed:</strong> puInfo.speed GHz</p>
          <p><strong>Main Temp:</strong> cpuInfo.mainTemp °C</p>
          <p><strong>Max Temp:</strong> cpuInfo.maxTemp °C</p>
        </div>
      </div>

      <div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
        <h2 class="text-xl font-bold text-center">CPU Info</h2>
        <div class="mt-4 text-sm">
          <p><strong>Manufacturer:</strong> cpuInfo.manufacturer</p>
          <p><strong>Model:</strong> cpuInfo.model</p>
          <p><strong>Core Count:</strong> cpuInfo.cores</p>
          <p><strong>Speed:</strong> puInfo.speed GHz</p>
          <p><strong>Main Temp:</strong> cpuInfo.mainTemp °C</p>
          <p><strong>Max Temp:</strong> cpuInfo.maxTemp °C</p>
        </div>
      </div>

      <div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
        <h2 class="text-xl font-bold text-center">CPU Info</h2>
        <div class="mt-4 text-sm">
          <p><strong>Manufacturer:</strong> cpuInfo.manufacturer</p>
          <p><strong>Model:</strong> cpuInfo.model</p>
          <p><strong>Core Count:</strong> cpuInfo.cores</p>
          <p><strong>Speed:</strong> puInfo.speed GHz</p>
          <p><strong>Main Temp:</strong> cpuInfo.mainTemp °C</p>
          <p><strong>Max Temp:</strong> cpuInfo.maxTemp °C</p>
        </div>
      </div>




      <div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
        <h2 class="text-xl font-bold text-center">CPU Usage</h2>
        <LineChart
            :data="chartDataCpuUsage"
            data-key-x="date"
            data-key-y="value"
            :height="250"
            :categories="chartCategoriesCpuUsage"
            :x-formatter="xFormatterCpuUsage"
            :curve-type="CurveType.MonotoneX"
            :legend-position="LegendPosition.Top"
            :hide-legend="true"
            :y-min="0"
            :y-max="100"

            :x-num-ticks='5'
            :y-num-ticks='5'

            :x-grid-line='false'
            :y-grid-line='false'

            :x-domain-line='true'
            :y-domain-line='true'


            :x-tick-line='false'
            :y-tick-line='true'
        />
      </div>

      <div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
        <h2 class="text-xl font-bold text-center">CPU Clock</h2>
        <LineChart
            :data="chartDataCpuClock"
            data-key-x="date"
            data-key-y="value"
            :height="250"
            :categories="chartCategoriesCpuClock"
            :x-formatter="xFormatterCpuClock"
            :curve-type="CurveType.MonotoneX"
            :legend-position="LegendPosition.Top"
            :hide-legend="true"
            :y-min="0"
            :y-max="100"

            :x-num-ticks='5'
            :y-num-ticks='5'

            :x-grid-line='false'
            :y-grid-line='false'

            :x-domain-line='true'
            :y-domain-line='true'


            :x-tick-line='false'
            :y-tick-line='true'
        />
      </div>
      <div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
        <h2 class="text-xl font-bold text-center">CPU Temp</h2>
        <LineChart
            :data="chartDataCpuTemp"
            data-key-x="date"
            data-key-y="value"
            :height="250"
            :categories="chartCategoriesCpuTemp"
            :x-formatter="xFormatterCpuTemp"
            :curve-type="CurveType.MonotoneX"
            :legend-position="LegendPosition.Top"
            :hide-legend="true"
            :y-min="0"
            :y-max="100"

            :x-num-ticks='5'
            :y-num-ticks='5'

            :x-grid-line='false'
            :y-grid-line='false'

            :x-domain-line='true'
            :y-domain-line='true'


            :x-tick-line='false'
            :y-tick-line='true'
        />
      </div>
      <div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
        <h2 class="text-xl font-bold text-center">Ram Usage</h2>
        <LineChart
            :data="chartDataRamUsage"
            data-key-x="date"
            data-key-y="value"
            :height="250"
            :categories="chartCategoriesRamUsage"
            :x-formatter="xFormatterRamUsage"
            :curve-type="CurveType.MonotoneX"
            :legend-position="LegendPosition.Top"
            :hide-legend="true"
            :y-min="0"
            :y-max="100"

            :x-num-ticks='5'
            :y-num-ticks='5'

            :x-grid-line='false'
            :y-grid-line='false'

            :x-domain-line='true'
            :y-domain-line='true'


            :x-tick-line='false'
            :y-tick-line='true'
        />
      </div>



    </div>
  </div>
</template>


