<template>
  <div>
    <LayoutsBreadcrumb />

    <section class="flex flex-col h-screen">
      <div class="mb-4 flex-shrink-0">
        <h3>Metabase</h3>
        <p>
          Metabase is a powerful data visualization and analytics tool that allows you to
          create and share dashboards, reports, and visualizations with your team.
        </p>
      </div>

      <div v-if="pending" class="flex justify-center items-center flex-1">
        <div class="text-lg">Loading Metabase dashboard...</div>
      </div>
      <div v-else-if="error" class="flex justify-center items-center flex-1">
        <div class="text-red-500">Error loading dashboard: {{ error.message }}</div>
      </div>
      <iframe
        v-else
        :src="iframeUrl"
        frameborder="0"
        width="100%"
        class="flex-1"
        allowtransparency
      />
    </section>
  </div>
</template>

<script setup>
// Fetch the JWT token from our server API
const { data: tokenData, pending, error } = await useFetch("/api/metabase/token");

const iframeUrl = computed(() => {
  if (tokenData.value?.token && tokenData.value?.siteUrl) {
    return (
      tokenData.value.siteUrl +
      "/embed/dashboard/" +
      tokenData.value.token +
      "#bordered=true&titled=true"
    );
  }
  return "";
});
</script>

<style lang="scss" scoped></style>
