<script setup lang="ts">
import { ref } from 'vue'
import { motion } from 'motion-v'
import { AnimateNumber, Cursor } from 'motion-plus-vue'

const props = withDefaults(defineProps<{
  data: number[]
}>(), {
  data: () => [30, 8, 36, 29, 50, 78]
})

// Calculate points for the SVG path
const points = props.data.map((value, index) => ({
  x: 50 + index * 100,
  y: 250 - value * 2,
  value,
}))

const pathD = points.reduce(buildPath, "")

const hoveredPoint = ref(null)
const percentageChange = ref<number | null>(null)

const startHover = (index) => {
  hoveredPoint.value = index

  if (index > 0) {
    const currentValue = props.data[index]
    const previousValue = props.data[index - 1]
    const change = ((currentValue - previousValue) / previousValue) * 100
    percentageChange.value = change
  } else {
    percentageChange.value = null
  }
}

const endHover = () => {
  hoveredPoint.value = null
  percentageChange.value = null
}

/**
 * ==============   Utils   ================
 */

function buildPath(path, point, i) {
  if (i === 0) return `M ${point.x},${point.y}`
  return `${path} L ${point.x},${point.y}`
}
</script>

<template>
  <div class="container" @pointerleave="endHover">
    <svg width="600" height="300" class="svg-style">
      <defs>
        <linearGradient
          id="areaGradient"
          x1="0"
          x2="0"
          y1="0"
          y2="1"
        >
          <stop
            offset="0%"
            stop-color="#4ff0b7"
            stop-opacity="0.2"
          />
          <stop
            offset="100%"
            stop-color="#4ff0b7"
            stop-opacity="0"
          />
        </linearGradient>
      </defs>

      <!-- Background grid lines -->
      <motion.line
        v-for="y in [50, 100, 150, 200, 250]"
        :key="y"
        x1="50"
        :y1="y"
        x2="550"
        :y2="y"
        stroke="var(--border)"
        stroke-width="1"
        stroke-dasharray="5,5"
      />

      <!-- Area fill under the line -->
      <motion.path
        :d="`${pathD} L 550,250 L 50,250 Z`"
        fill="url(#areaGradient)"
      />

      <!-- Main graph line -->
      <motion.path
        :d="pathD"
        fill="none"
        stroke="#4ff0b7"
        stroke-width="2"
        :initial="{ pathLength: 0 }"
        :animate="{ pathLength: 1 }"
        :transition="{ duration: 1.5, ease: 'easeInOut' }"
      />

      <!-- Points -->
      <motion.g
        initial="hidden"
        animate="visible"
        :variants="{
          visible: {
            transition: {
              delayChildren: 0.1,
              staggerChildren: 1.5 / 6,
            },
          },
        }"
      >
        <g v-for="(point, index) in points" :key="index">
          <!-- Hit area -->
          <motion.rect
            :x="point.x - 50"
            y="0"
            width="100"
            height="300"
            fill="transparent"
            @hover-start="startHover(index)"
            :style="{ cursor: 'pointer' }"
          />
          <!-- Dot -->
          <motion.circle
            :cx="point.x"
            :cy="point.y"
            r="6"
            fill="var(--layer)"
            stroke="#4ff0b7"
            stroke-width="1"
            :animate="{ scale: hoveredPoint === index ? 1.5 : 1 }"
            :variants="{
              hidden: { scale: 0.5, opacity: 0 },
              visible: { scale: 1, opacity: 1 },
            }"
          />
        </g>
      </motion.g>
    </svg>
    
    <Cursor
      v-if="percentageChange !== null"
      :follow="true"
      :initial="{ opacity: 0, scale: 0.5 }"
      :offset="{ x: 20, y: 20 }"
      key="cursor"
    >
      <div class="number-container">
        <motion.div
          :initial="false"
          :animate="{
            rotate: percentageChange < 0 ? 180 : 0,
            color: percentageChange < 0 ? '#ff0088' : '#4ff0b7',
          }"
          :transition="{
            type: 'spring',
            visualDuration: 0.6,
            bounce: 0.2,
          }"
          class="arrow-style"
        >
          ↑
        </motion.div>
        <AnimateNumber
          :initial="false"
          :animate="{
            color: percentageChange < 0 ? '#ff0088' : '#4ff0b7',
          }"
          :transition="{
            type: 'spring',
            visualDuration: 0.6,
            bounce: 0.2,
          }"
          class="number-style"
          :format="{
            notation: 'compact',
            compactDisplay: 'short',
          }"
          suffix="%"
          :value="percentageChange"
        />
      </div>
    </Cursor>
  </div>
</template>

<style>
/**
 * ==============   Styles   ================
 */
.container {
  background-color: var(--layer);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.svg-style {
  overflow: visible;
}

.number-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--layer);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 40px;
  will-change: transform;
}

.number-style {
  font-size: 24px;
}

.arrow-style {
  font-size: 24px;
  font-weight: bold;
}
</style>