<template>
  <div class="rounded-xl border border-surface-border bg-white p-3 dark:bg-slate-900/60">
    <ClientOnly>
      <ApexChart
        :key="`bar-${isDark ? 'dark' : 'light'}`"
        type="bar"
        height="240"
        :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>
</template>

<script setup lang="ts">
const props = defineProps<{
  items: Array<{ label: string; value: number }>;
}>();
const { isDark } = useTheme();

const chartSeries = computed(() => [
  {
    name: "Score",
    data: props.items.map((item) => item.value)
  }
]);

const chartOptions = computed(() => {
  return {
    chart: {
      type: "bar",
      toolbar: { show: false },
      background: isDark.value ? "#0F172A" : "#FFFFFF",
      foreColor: isDark.value ? "#94A3B8" : "#64748B",
      parentHeightOffset: 0,
      animations: { enabled: true, easing: "easeinout", speed: 700 }
    },
    plotOptions: {
      bar: {
        borderRadius: 8,
        columnWidth: "46%"
      }
    },
    colors: ["#4F8CFF"],
    dataLabels: { enabled: false },
    grid: {
      borderColor: isDark.value ? "#334155" : "#E5EEF9",
      strokeDashArray: 4,
      padding: { top: 0, right: 8, bottom: 0, left: 8 }
    },
    xaxis: {
      categories: props.items.map((item) => item.label),
      labels: {
        style: {
          colors: isDark.value ? "#94A3B8" : "#6B7280",
          fontSize: "11px"
        }
      }
    },
    yaxis: {
      labels: {
        style: {
          colors: isDark.value ? "#94A3B8" : "#6B7280",
          fontSize: "11px"
        }
      }
    },
    tooltip: {
      theme: isDark.value ? "dark" : "light"
    },
    theme: {
      mode: isDark.value ? "dark" : "light",
      monochrome: { enabled: false }
    },
    legend: { show: false }
  };
});
</script>
