<template>
  <div class="chartCard">
    <h2 class="chartCard__title">Token Distribution</h2>
    <div class="chartCard__container">
      <div class="customPie" :style="pieStyle">
        <div class="customPie__hole"></div>
      </div>
      <div class="customPie__legend">
        <div class="customPie__legendItem">
          <span class="customPie__dot customPie__dot--blue"></span>
          <span>Input ({{ inputPercent }}%)</span>
        </div>
        <div class="customPie__legendItem">
          <span class="customPie__dot customPie__dot--purple"></span>
          <span>Output ({{ outputPercent }}%)</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TokenPieChart",
  props: {
    inputTokens: { type: Number, default: 0 },
    outputTokens: { type: Number, default: 0 },
    total: { type: Number, default: 0 },
  },
  computed: {
    inputPercent() {
      if (!this.total) return 0;
      return Math.round((this.inputTokens / this.total) * 100);
    },
    outputPercent() {
      if (!this.total) return 0;
      return Math.round((this.outputTokens / this.total) * 100);
    },
    pieStyle() {
      // Conic gradient creates the segments based on percentages
      return {
        background: `conic-gradient(
                    #3b82f6 0% ${this.inputPercent}%,
                    #8b5cf6 ${this.inputPercent}% 100%
                )`,
      };
    },
  },
};
</script>

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