<template>
  <div class="page-wrapper">
    <Spinner :loading="loading" />
    <div v-html="output" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Spinner from '@/components/Spinner.vue';

const router = useRouter();

const loading = ref(true);
const output = ref('');

onMounted(async () => {
  try {
    const config = useRuntimeConfig();
    // fetch without forcing responseType to text, so it defaults to JSON if possible
    const res = await $fetch(`${config.public.apiUrl}/proxy`);

    if (typeof res === 'object') {
      if(res?.status === "not-found"){
        router.push('/login');
      }else{
        // pretty print JSON response
        output.value = `<pre>${JSON.stringify(res, null, 2)}</pre>`;
      }
    } else {
      // treat as plain text or HTML
      output.value = res;
    }
  } catch (error) {
    output.value = `<p style="color:red;">Container access failed.</p>`;
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.page-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px;
  margin: 0px;
  text-align: center;
}
</style>