<template>
  <section
    class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)] z-20"
  >
    <!-- status content -->
    <ul
      class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700"
      v-show="isPanel"
      v-if="statData"
    >
      <li class="bg-neutral-10 rounded p-3 w-full">
        <div class="flex justify-between items-center mb-5">
          <p class="font-bold text-sm leading-8">Cases</p>
        </div>
        <div class="flex justify-between items-center">
          <div class="mr-2 w-full">
            <span class="block text-sm mb-2"
              >{{ statData.cases.count }} / {{ statData.cases.total }}</span
            >
            <ProgressBar
              :value="statData.cases.ratio"
              :showValue="false"
              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
            ></ProgressBar>
          </div>
          <span class="block text-2xl font-medium"
            >{{ statData.cases.ratio }}%</span
          >
        </div>
      </li>
      <li class="bg-neutral-10 rounded p-3 w-full">
        <div class="flex justify-between items-center mb-5">
          <p class="font-bold text-sm leading-8">Traces</p>
        </div>
        <div class="flex justify-between items-center">
          <div class="mr-2 w-full">
            <span class="block text-sm mb-2"
              >{{ statData.traces.count }} / {{ statData.traces.total }}</span
            >
            <ProgressBar
              :value="statData.traces.ratio"
              :showValue="false"
              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
            ></ProgressBar>
          </div>
          <span class="block text-2xl font-medium"
            >{{ statData.traces.ratio }}%</span
          >
        </div>
      </li>
      <li class="bg-neutral-10 rounded p-3 w-full">
        <div class="flex justify-between items-center mb-5">
          <p class="font-bold text-sm leading-8">Activity Instances</p>
        </div>
        <div class="flex justify-between items-center">
          <div class="mr-2 w-full">
            <span class="block text-sm mb-2"
              >{{ statData.task_instances.count }} /
              {{ statData.task_instances.total }}</span
            >
            <ProgressBar
              :value="statData.task_instances.ratio"
              :showValue="false"
              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
            ></ProgressBar>
          </div>
          <span class="block text-2xl font-medium"
            >{{ statData.task_instances.ratio }}%</span
          >
        </div>
      </li>
      <li class="bg-neutral-10 rounded p-3 w-full">
        <div class="flex justify-between items-center mb-5">
          <p class="font-bold text-sm leading-8">Activities</p>
        </div>
        <div class="flex justify-between items-center">
          <div class="mr-2 w-full">
            <span class="block text-sm mb-2"
              >{{ statData.tasks.count }} / {{ statData.tasks.total }}</span
            >
            <ProgressBar
              :value="statData.tasks.ratio"
              :showValue="false"
              class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"
            ></ProgressBar>
          </div>
          <span class="block text-2xl font-medium"
            >{{ statData.tasks.ratio }}%</span
          >
        </div>
      </li>
      <li class="bg-neutral-10 rounded p-3 w-full">
        <p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
        <div class="px-2 space-y-2 min-w-[140px] h-[40px]">
          <span class="inline-block">{{ statData.started_at }}&nbsp;</span>
          <span class="inline-block">~&nbsp;{{ statData.completed_at }}</span>
        </div>
      </li>
      <li class="bg-neutral-10 rounded p-3 w-full">
        <p class="font-bold text-sm leading-8">Case Duration</p>
        <div class="flex justify-between items-center space-x-2 min-w-[272px]">
          <div class="space-y-2">
            <p>
              <Tag
                value="MAX"
                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
              ></Tag
              >{{ statData.case_duration.max }}
            </p>
            <p>
              <Tag
                value="MIN"
                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
              ></Tag
              >{{ statData.case_duration.min }}
            </p>
          </div>
          <div class="space-y-2">
            <p>
              <Tag
                value="MED"
                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
              ></Tag
              >{{ statData.case_duration.median }}
            </p>
            <p>
              <Tag
                value="AVG"
                class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"
              ></Tag
              >{{ statData.case_duration.average }}
            </p>
          </div>
        </div>
      </li>
    </ul>
    <!-- control button -->
    <div
      class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring"
      @click="isPanel = !isPanel"
    >
      <span class="material-symbols-outlined block px-8 !text-xs">{{
        isPanel ? "keyboard_double_arrow_up" : "keyboard_double_arrow_down"
      }}</span>
    </div>
  </section>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
/**
 * @module components/Discover/StatusBar Collapsible status bar
 *   showing dataset statistics (cases, traces, activities,
 *   timeframe, case duration) for the Discover page.
 */

import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useAllMapDataStore } from "@/stores/allMapData";
import { getTimeLabel } from "@/module/timeLabel.js";
import getMoment from "moment";

const route = useRoute();

const allMapDataStore = useAllMapDataStore();
const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);

const isPanel = ref(false);
const statData = ref(null);

/**
 * Converts a ratio (0–1) to a percentage number (0–100), capped at 100.
 * @param {number} val - The ratio value to convert.
 * @returns {number} The percentage value.
 */
function getPercentLabel(val) {
  if (Number((val * 100).toFixed(1)) >= 100) return 100;
  else return Number.parseFloat((val * 100).toFixed(1));
}

/** Transforms raw stats into display-ready format with localized numbers and time labels. */
function getStatData() {
  if (!stats.value) return;
  statData.value = {
    cases: {
      count: stats.value.cases.count.toLocaleString("en-US"),
      total: stats.value.cases.total.toLocaleString("en-US"),
      ratio: getPercentLabel(stats.value.cases.ratio),
    },
    traces: {
      count: stats.value.traces.count.toLocaleString("en-US"),
      total: stats.value.traces.total.toLocaleString("en-US"),
      ratio: getPercentLabel(stats.value.traces.ratio),
    },
    task_instances: {
      count: stats.value.task_instances.count.toLocaleString("en-US"),
      total: stats.value.task_instances.total.toLocaleString("en-US"),
      ratio: getPercentLabel(stats.value.task_instances.ratio),
    },
    tasks: {
      count: stats.value.tasks.count.toLocaleString("en-US"),
      total: stats.value.tasks.total.toLocaleString("en-US"),
      ratio: getPercentLabel(stats.value.tasks.ratio),
    },
    started_at: getMoment(stats.value.started_at).format("YYYY-MM-DD HH:mm"),
    completed_at: getMoment(stats.value.completed_at).format(
      "YYYY-MM-DD HH:mm",
    ),
    case_duration: {
      min: getTimeLabel(stats.value.case_duration.min),
      max: getTimeLabel(stats.value.case_duration.max),
      average: getTimeLabel(stats.value.case_duration.average),
      median: getTimeLabel(stats.value.case_duration.median),
    },
  };
}

onMounted(async () => {
  const params = route.params;
  const file = route.meta.file;
  const isCheckPage = route.name.includes("Check");

  switch (params.type) {
    case "log":
      logId.value = isCheckPage ? file.parent?.id : params.fileId;
      break;
    case "filter":
      createFilterId.value = isCheckPage ? file.parent?.id : params.fileId;
      break;
  }
  await allMapDataStore.getAllMapData();
  await getStatData();
  isPanel.value = false; // Collapsed by default
});
</script>
<style scoped>
@reference "../../assets/tailwind.css";
:deep(.p-progressbar .p-progressbar-value) {
  @apply bg-neutral-900;
}
</style>
