<template>
  <Line ref="chart_ref" :options="chartOptions" :data="computedChartData" />
</template>

<script setup>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement,
  Tooltip,
  Filler,
} from "chart.js";
import { computed, useTemplateRef } from "vue";
import { Line } from "vue-chartjs";

// Register only essential components
ChartJS.register(
  CategoryScale,
  LinearScale,
  LineElement,
  PointElement,
  Tooltip,
  Filler,
);

const chart_ref = useTemplateRef(null);

const props = defineProps({
  // Essential data props
  data: {
    type: Array,
    required: true,
  },

  // Core styling
  lineColor: {
    type: String,
    default: "#1976D2",
  },
  fillColor: {
    type: String,
    default: "rgba(25, 118, 210, 0.1)",
  },

  // Optional display features
  showTooltip: {
    type: Boolean,
    default: true,
  },
  showPoints: {
    type: Boolean,
    default: false,
  },
});

const chartOptions = computed(() => ({
  responsive: true,
  maintainAspectRatio: false,

  plugins: {
    legend: {
      display: false, // Always hidden for mini charts
    },
    tooltip: {
      enabled: props.showTooltip,
      displayColors: false,
      callbacks: {
        label: (context) => `${context.raw}`,
      },
    },
  },

  scales: {
    x: {
      display: false,
      grid: { display: false },
    },
    y: {
      display: false,
      grid: { display: false },
      beginAtZero: true,
    },
  },

  elements: {
    line: {
      tension: 0.4,
      borderWidth: 2,
    },
    point: {
      radius: props.showPoints ? 3 : 0,
      hitRadius: 5,
      borderWidth: 0,
      backgroundColor: props.showPoints ? props.lineColor : "rgba(0,0,0,0)",
    },
  },

  animation: {
    duration: 750,
    easing: "easeOutQuad",
  },
}));

const computedChartData = computed(() => ({
  labels: Array(props.data.length).fill(""),
  datasets: [
    {
      data: props.data,
      borderColor: props.lineColor,
      backgroundColor: props.fillColor,
      fill: true,
    },
  ],
}));

defineExpose({
  chart_ref,
});
</script>
