<template>
  <Drawer
    :visible="sidebarState"
    :closeIcon="'pi pi-angle-right'"
    :modal="false"
    position="right"
    :dismissable="false"
    class="!w-[440px]"
    @hide="hide"
    @show="show"
  >
    <template #header>
      <p class="pl-2 text-base font-bold text-neutral-900">Summary</p>
    </template>
    <!-- header: summary -->
    <div v-if="primaryStatData && secondaryStatData" class="flex justify-start items-start">
      <!-- 001 -->
      <section class="w-[204px] box-border pr-4">
        <div class="mb-4">
          <p class="h2">File Name</p>
          <p
            class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis"
            :title="primaryStatData.name"
          >
            {{ primaryStatData.name }}
          </p>
        </div>
        <!-- Stats -->
        <ul class="pb-4 border-b border-neutral-300">
          <li>
            <p class="h2">Cases</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ primaryStatData.cases.count }} /
                  {{ primaryStatData.cases.total }}</span
                >
                <ProgressBar
                  :value="primaryValueCases"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
                ></ProgressBar>
              </div>
              <span
                class="block text-primary text-2xl text-right font-medium basis-28"
                >{{ primaryStatData.cases.ratio }}%</span
              >
            </div>
          </li>
          <li>
            <p class="h2">Traces</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ primaryStatData.traces.count }} /
                  {{ primaryStatData.traces.total }}</span
                >
                <ProgressBar
                  :value="primaryValueTraces"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
                ></ProgressBar>
              </div>
              <span
                class="block text-primary text-2xl text-right font-medium basis-28"
                >{{ primaryStatData.traces.ratio }}%</span
              >
            </div>
          </li>
          <li>
            <p class="h2">Activity Instances</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ primaryStatData.task_instances.count }} /
                  {{ primaryStatData.task_instances.total }}</span
                >
                <ProgressBar
                  :value="primaryValueTaskInstances"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
                ></ProgressBar>
              </div>
              <span
                class="block text-primary text-2xl text-right font-medium basis-28"
                >{{ primaryStatData.task_instances.ratio }}%</span
              >
            </div>
          </li>
          <li>
            <p class="h2">Activities</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ primaryStatData.tasks.count }} /
                  {{ primaryStatData.tasks.total }}</span
                >
                <ProgressBar
                  :value="primaryValueTasks"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"
                ></ProgressBar>
              </div>
              <span
                class="block text-primary text-2xl text-right font-medium basis-28"
                >{{ primaryStatData.tasks.ratio }}%</span
              >
            </div>
          </li>
        </ul>
        <!-- Log Timeframe -->
        <div class="pt-1 pb-4 border-b border-neutral-300">
          <p class="h2">Log Timeframe</p>
          <div class="space-y-2 text-sm text-center">
            <span class="block">{{ primaryStatData.started_at }}&nbsp;</span>
            <span class="block">~</span>
            <span class="block">&nbsp;{{ primaryStatData.completed_at }}</span>
          </div>
        </div>
        <!-- Case Duration -->
        <div class="pt-1 pb-4">
          <p class="h2">Case Duration</p>
          <ul class="space-y-1 text-sm">
            <li>
              <Tag
                value="MIN"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ primaryStatData.case_duration.min }}
            </li>
            <li>
              <Tag
                value="AVG"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ primaryStatData.case_duration.average }}
            </li>
            <li>
              <Tag
                value="MED"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ primaryStatData.case_duration.median }}
            </li>
            <li>
              <Tag
                value="MAX"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ primaryStatData.case_duration.max }}
            </li>
          </ul>
        </div>
      </section>
      <!-- 002 -->
      <section class="w-[204px] box-border pl-4">
        <div class="mb-4">
          <p class="h2">File Name</p>
          <p
            class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis"
            :title="secondaryStatData.name"
          >
            {{ secondaryStatData.name }}
          </p>
        </div>
        <!-- Stats -->
        <ul class="pb-4 border-b border-neutral-300">
          <li>
            <p class="h2">Cases</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ secondaryStatData.cases.count }} /
                  {{ secondaryStatData.cases.total }}</span
                >
                <ProgressBar
                  :value="secondaryValueTraces"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
                ></ProgressBar>
              </div>
              <span
                class="block text-secondary text-2xl text-right font-medium basis-28"
                >{{ secondaryStatData.cases.ratio }}%</span
              >
            </div>
          </li>
          <li>
            <p class="h2">Traces</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ secondaryStatData.traces.count }} /
                  {{ secondaryStatData.traces.total }}</span
                >
                <ProgressBar
                  :value="secondaryValueTraces"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
                ></ProgressBar>
              </div>
              <span
                class="block text-secondary text-2xl text-right font-medium basis-28"
                >{{ secondaryStatData.traces.ratio }}%</span
              >
            </div>
          </li>
          <li>
            <p class="h2">Activity Instances</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ secondaryStatData.task_instances.count }} /
                  {{ secondaryStatData.task_instances.total }}</span
                >
                <ProgressBar
                  :value="secondaryValueTaskInstances"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
                ></ProgressBar>
              </div>
              <span
                class="block text-secondary text-2xl text-right font-medium basis-28"
                >{{ secondaryStatData.task_instances.ratio }}%</span
              >
            </div>
          </li>
          <li>
            <p class="h2">Activities</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm"
                  >{{ secondaryStatData.tasks.count }} /
                  {{ secondaryStatData.tasks.total }}</span
                >
                <ProgressBar
                  :value="secondaryValueTasks"
                  :showValue="false"
                  class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"
                ></ProgressBar>
              </div>
              <span
                class="block text-secondary text-2xl text-right font-medium basis-28"
                >{{ secondaryStatData.tasks.ratio }}%</span
              >
            </div>
          </li>
        </ul>
        <!-- Log Timeframe -->
        <div class="pt-1 pb-4 border-b border-neutral-300">
          <p class="h2">Log Timeframe</p>
          <div class="space-y-2 text-sm text-center">
            <span class="block">{{ secondaryStatData.started_at }}&nbsp;</span>
            <span class="block">~</span>
            <span class="block"
              >&nbsp;{{ secondaryStatData.completed_at }}</span
            >
          </div>
        </div>
        <!-- Case Duration -->
        <div class="pt-1 pb-4">
          <p class="h2">Case Duration</p>
          <ul class="space-y-1 text-sm">
            <li>
              <Tag
                value="MIN"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ secondaryStatData.case_duration.min }}
            </li>
            <li>
              <Tag
                value="AVG"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ secondaryStatData.case_duration.average }}
            </li>
            <li>
              <Tag
                value="MED"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ secondaryStatData.case_duration.median }}
            </li>
            <li>
              <Tag
                value="MAX"
                class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
              ></Tag
              >{{ secondaryStatData.case_duration.max }}
            </li>
          </ul>
        </div>
      </section>
    </div>
  </Drawer>
</template>
<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Compare/SidebarStates Summary sidebar for
 *   the Compare view showing side-by-side statistics (cases,
 *   traces, activities, timeframes, durations) of two files.
 */

import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useCompareStore } from "@/stores/compare";
import { getTimeLabel } from "@/module/timeLabel.js";
import getMoment from "moment";

const props = defineProps({
  sidebarState: {
    type: Boolean,
    require: false,
  },
});

const route = useRoute();
const compareStore = useCompareStore();

const primaryValueCases = ref(0);
const primaryValueTraces = ref(0);
const primaryValueTaskInstances = ref(0);
const primaryValueTasks = ref(0);
const secondaryValueCases = ref(0);
const secondaryValueTraces = ref(0);
const secondaryValueTaskInstances = ref(0);
const secondaryValueTasks = ref(0);
const primaryStatData = ref(null);
const secondaryStatData = 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.
 */
const getPercentLabel = (val) => {
  if (Number((val * 100).toFixed(1)) >= 100) return 100;
  else return Number.parseFloat((val * 100).toFixed(1));
};

/**
 * Transforms raw API stats into display-ready stat data.
 * @param {Object} data - The raw stats from the API.
 * @param {string} fileName - The file name to display.
 * @returns {Object} The formatted stat data object.
 */
const getStatData = (data, fileName) => {
  return {
    name: fileName,
    cases: {
      count: data.cases.count.toLocaleString("en-US"),
      total: data.cases.total.toLocaleString("en-US"),
      ratio: getPercentLabel(data.cases.ratio),
    },
    traces: {
      count: data.traces.count.toLocaleString("en-US"),
      total: data.traces.total.toLocaleString("en-US"),
      ratio: getPercentLabel(data.traces.ratio),
    },
    task_instances: {
      count: data.task_instances.count.toLocaleString("en-US"),
      total: data.task_instances.total.toLocaleString("en-US"),
      ratio: getPercentLabel(data.task_instances.ratio),
    },
    tasks: {
      count: data.tasks.count.toLocaleString("en-US"),
      total: data.tasks.total.toLocaleString("en-US"),
      ratio: getPercentLabel(data.tasks.ratio),
    },
    started_at: getMoment(data.started_at).format("YYYY.MM.DD HH:mm"),
    completed_at: getMoment(data.completed_at).format("YYYY.MM.DD HH:mm"),
    case_duration: {
      min: getTimeLabel(data.case_duration.min, 2),
      max: getTimeLabel(data.case_duration.max, 2),
      average: getTimeLabel(data.case_duration.average, 2),
      median: getTimeLabel(data.case_duration.median, 2),
    },
  };
};

/** Populates progress bar values when the sidebar is shown. */
const show = () => {
  if (!primaryStatData.value || !secondaryStatData.value) return;
  primaryValueCases.value = primaryStatData.value.cases.ratio;
  primaryValueTraces.value = primaryStatData.value.traces.ratio;
  primaryValueTaskInstances.value = primaryStatData.value.task_instances.ratio;
  primaryValueTasks.value = primaryStatData.value.tasks.ratio;
  secondaryValueCases.value = secondaryStatData.value.cases.ratio;
  secondaryValueTraces.value = secondaryStatData.value.traces.ratio;
  secondaryValueTaskInstances.value =
    secondaryStatData.value.task_instances.ratio;
  secondaryValueTasks.value = secondaryStatData.value.tasks.ratio;
};

/** Resets all progress bar values to zero when the sidebar is hidden. */
const hide = () => {
  primaryValueCases.value = 0;
  primaryValueTraces.value = 0;
  primaryValueTaskInstances.value = 0;
  primaryValueTasks.value = 0;
  secondaryValueCases.value = 0;
  secondaryValueTraces.value = 0;
  secondaryValueTaskInstances.value = 0;
  secondaryValueTasks.value = 0;
};

onMounted(async () => {
  const routeParams = route.params;
  const primaryType = routeParams.primaryType;
  const secondaryType = routeParams.secondaryType;
  const primaryId = routeParams.primaryId;
  const secondaryId = routeParams.secondaryId;
  const primaryData = await compareStore.getStateData(primaryType, primaryId);
  const secondaryData = await compareStore.getStateData(
    secondaryType,
    secondaryId,
  );

  const primaryFileName = await compareStore.getFileName(primaryId);
  const secondaryFileName = await compareStore.getFileName(secondaryId);
  primaryStatData.value = await getStatData(primaryData, primaryFileName);
  secondaryStatData.value = await getStatData(secondaryData, secondaryFileName);
});
</script>
<style scoped>
:deep(.p-progressbar .p-progressbar-value) {
  background-color: var(--bg-color);
}
.progressbar-primary {
  --bg-color: #0099ff;
}
.progressbar-secondary {
  --bg-color: #ffaa44;
}
</style>
