<script setup lang="ts">
import { fetchWithCache } from '~/utils/cacheUtil';

const data = ref<ProgressType | null>(null);
const loading = ref<boolean>(true);
const error = ref<string | null>(null);

const fetchMyData = async () => {
    try {
        loading.value = true;

        // Use the caching utility
        data.value = await fetchWithCache<ProgressType>(
              'Progress',
              async () => {
                const response = await fetch('https://proxy.rbwr.dk/progress');
                if (!response.ok) throw new Error('API fetch failed');
                return (await response.json()) as ProgressType;
            },
            5 // Cache max age in seconds
        );
    } catch (err) {
        error.value = (err as Error).message;
    } finally {
        loading.value = false;
    }
};

fetchMyData();

</script>

<template>
  <div class="h-screen grid place-items-center">
    <div v-if="data">
      <table class="table-auto border-gray-300">
        <thead>
        <tr>
          <th class="px-4 py-2">Metric</th>
          <th class="px-4 py-2">Value</th>
        </tr>
        </thead>

        <tbody >
        <tr>
          <td class="px-4 py-2">Percentage of Ipv4 scanned</td>
          <td class="px-4 py-2">{{data.percentageOfIpv4Scanned}}</td>
        </tr>
        <tr>
          <td class="px-4 py-2">Total filtered</td>
          <td class="px-4 py-2">{{data.totalFiltered}}</td>
        </tr>
        <tr>
          <td class="px-4 py-2">Total Discarded</td>
          <td class="px-4 py-2">{{data.totalDiscarded}}</td>
        </tr>
        <tr>
          <td class="px-4 py-2">Amount of Ipv4 left</td>
          <td class="px-4 py-2">{{data.amountOfIpv4Left}}</td>
        </tr>
        <tr>
          <td class="px-4 py-2">Discarded db size</td>
          <td class="px-4 py-2">{{data.discardedDbSize}}</td>
        </tr>
        <tr>
          <td class="px-4 py-2">Filtered db size</td>
          <td class="px-4 py-2">{{data.filteredDbSize}}</td>
        </tr>
        <tr>
          <td class="px-4 py-2">Unfiltered db size</td>
          <td class="px-4 py-2">{{data.myDbSize}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>

</style>