<template>
  <div class="chartCard">
    <div class="chartCard__header">
      <h2 class="chartCard__title">Token Usage Analytics</h2>
      <p class="chartCard__subtitle">
        Weekly input and output consumption (Mon - Sun)
      </p>
    </div>

    <div class="chartCard__chartContainer">
      <svg
        viewBox="0 0 100 40"
        preserveAspectRatio="none"
        class="lineChartSvg"
        @mousemove="handleMouseMove"
        @mouseleave="activePoint = null"
      >
        <g class="grid">
          <line
            v-for="i in 4"
            :key="'y' + i"
            x1="0"
            :y1="i * 10"
            x2="100"
            :y2="i * 10"
            class="gridLine"
          />
        </g>

        <path
          :d="getSmoothPath('input_tokens')"
          class="pathLine pathLine--blue"
        />

        <path
          :d="getSmoothPath('output_tokens')"
          class="pathLine pathLine--purple"
        />

        <line
          v-if="activePoint !== null"
          :x1="getX(activePoint)"
          y1="0"
          :x2="getX(activePoint)"
          y2="40"
          class="hoverGuide"
        />

        <g v-for="(day, i) in data" :key="'dots' + i">
          <circle
            :cx="getX(i)"
            :cy="getY(day.input_tokens)"
            r="0.7"
            class="dot dot--blue"
            :class="{ 'dot--active': activePoint === i }"
          />
          <circle
            :cx="getX(i)"
            :cy="getY(day.output_tokens)"
            r="0.7"
            class="dot dot--purple"
            :class="{ 'dot--active': activePoint === i }"
          />
        </g>
      </svg>

      <div class="xAxis">
        <span v-for="(day, i) in data" :key="i" class="xAxis__label">
          {{ day.day.substring(0, 3) }}
        </span>
      </div>

      <div
        v-if="activePoint !== null"
        class="chartTooltip"
        :style="tooltipStyle"
      >
        <div class="chartTooltip__title">{{ data[activePoint].day }}</div>
        <div class="chartTooltip__row">
          <span class="chartTooltip__row__indicator chartTooltip__row__indicator--blue"></span>
          Input:
          <strong>{{ data[activePoint].input_tokens.toLocaleString() }}</strong>
        </div>
        <div class="chartTooltip__row">
          <span class="chartTooltip__row__indicator chartTooltip__row__indicator--purple"></span>
          Output:
          <strong>{{
            data[activePoint].output_tokens.toLocaleString()
          }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: { type: Array, required: true },
  },
  data() {
    return { activePoint: null };
  },
  computed: {
    maxVal() {
      const vals = this.data.flatMap((d) => [d.input_tokens, d.output_tokens]);
      return Math.max(...vals, 1000) * 1.2;
    },
    totalInput() {
      return this.data.reduce((s, d) => s + d.input_tokens, 0);
    },
    totalOutput() {
      return this.data.reduce((s, d) => s + d.output_tokens, 0);
    },
    tooltipStyle() {
      if (this.activePoint === null) return {};
      const leftPos = (this.activePoint / (this.data.length - 1)) * 100;
      return {
        left: `${leftPos}%`,
        transform: `translateX(${leftPos > 50 ? "-110%" : "10%"})`,
      };
    },
  },
  methods: {
    getX(index) {
      return (index / (this.data.length - 1)) * 100;
    },
    getY(val) {
      return 38 - (val / this.maxVal) * 35;
    },
    getSmoothPath(key) {
      if (!this.data.length) return "";
      return this.data.reduce((path, d, i, arr) => {
        const x = this.getX(i);
        const y = this.getY(d[key]);
        if (i === 0) return `M ${x} ${y}`;

        const prevX = this.getX(i - 1);
        const prevY = this.getY(arr[i - 1][key]);
        const cpX = (prevX + x) / 2; // Control point mid-way
        return `${path} C ${cpX} ${prevY}, ${cpX} ${y}, ${x} ${y}`;
      }, "");
    },
    handleMouseMove(e) {
      const rect = e.currentTarget.getBoundingClientRect();
      const xPercent = (e.clientX - rect.left) / rect.width;
      this.activePoint = Math.round(xPercent * (this.data.length - 1));
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../styles/admin/elements/metrics/tokenLineChart.less";
</style>
