<template>
  <div class="rounded-xl border border-surface-border bg-white p-3 dark:bg-slate-900/60">
    <ClientOnly>
      <ApexChart
        :key="`line-${isDark ? 'dark' : 'light'}`"
        type="area"
        height="100%"
        :options="chartOptions"
        :series="chartSeries"
      />
      <template #fallback>
        <div class="h-[220px] animate-pulse rounded-lg bg-brand-50 dark:bg-slate-800"></div>
      </template>
    </ClientOnly>
    <div class="mt-1 grid gap-1 text-center text-[11px] text-text-secondary" :style="{ gridTemplateColumns: `repeat(${labels.length}, minmax(0, 1fr))` }">
      <span v-for="label in labels" :key="label">
        {{ label }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  values: number[];
  labels: string[];
}>();
const { isDark } = useTheme();
const chartSeries = computed(() => [
  {
    name: "Productivity",
    data: props.values
  }
]);

const chartOptions = computed(() => {
  return {
    chart: {
      type: "area",
      toolbar: { show: false },
      zoom: { enabled: false },
      sparkline: { enabled: false },
      background: isDark.value ? "#0F172A" : "#FFFFFF",
      foreColor: isDark.value ? "#94A3B8" : "#64748B",
      parentHeightOffset: 0,
      animations: { enabled: true, easing: "easeinout", speed: 650 }
    },
    dataLabels: { enabled: false },
    stroke: {
      curve: "smooth",
      width: 3
    },
    colors: ["#4F8CFF"],
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 0.2,
        opacityFrom: 0.36,
        opacityTo: 0.03,
        stops: [0, 100]
      }
    },
    grid: {
      borderColor: isDark.value ? "#334155" : "#E5EEF9",
      strokeDashArray: 4,
      padding: { top: 4, right: 8, bottom: 0, left: 8 },
      xaxis: { lines: { show: false } }
    },
    xaxis: {
      categories: props.labels,
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false }
    },
    yaxis: {
      labels: { show: false }
    },
    tooltip: {
      theme: isDark.value ? "dark" : "light"
    },
    theme: {
      mode: isDark.value ? "dark" : "light",
      monochrome: { enabled: false }
    },
    legend: { show: false }
  };
});
</script>
