<template>
  <div class="rounded-xl border border-surface-border bg-white p-3 dark:bg-slate-900/60">
    <div class="mb-3 flex items-center justify-between">
      <p class="text-xs text-text-secondary">Last 4 weeks activity</p>
      <div class="flex items-center gap-1.5 text-[11px] text-text-secondary">
        <span>Low</span>
        <span class="h-2.5 w-2.5 rounded bg-slate-200 dark:bg-slate-700"></span>
        <span class="h-2.5 w-2.5 rounded bg-brand-100"></span>
        <span class="h-2.5 w-2.5 rounded bg-brand-300"></span>
        <span class="h-2.5 w-2.5 rounded bg-brand-500"></span>
        <span>High</span>
      </div>
    </div>
    <ClientOnly>
      <ApexChart
        :key="`heat-${isDark ? 'dark' : 'light'}`"
        type="heatmap"
        height="240"
        :options="chartOptions"
        :series="heatSeries"
      />
      <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 = withDefaults(defineProps<{
  values: number[];
  columns?: number;
}>(), {
  columns: 7
});
const { isDark } = useTheme();

const heatSeries = computed(() => {
  const weekCount = Math.ceil(props.values.length / props.columns);
  return Array.from({ length: weekCount }, (_, weekIndex) => {
    const start = weekIndex * props.columns;
    const row = props.values.slice(start, start + props.columns);
    return {
      name: `Week ${weekIndex + 1}`,
      data: row.map((value, dayIndex) => ({
        x: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][dayIndex] || `D${dayIndex + 1}`,
        y: value
      }))
    };
  });
});

const chartOptions = computed(() => {
  return {
    chart: {
      toolbar: { show: false },
      background: isDark.value ? "#0F172A" : "#FFFFFF",
      foreColor: isDark.value ? "#94A3B8" : "#64748B",
      parentHeightOffset: 0,
      animations: { enabled: true, easing: "easeinout", speed: 500 }
    },
    dataLabels: { enabled: false },
    legend: { show: false },
    xaxis: {
      labels: { show: false },
      axisTicks: { show: false },
      axisBorder: { show: false }
    },
    yaxis: {
      labels: {
        style: {
          colors: isDark.value ? "#94A3B8" : "#6B7280",
          fontSize: "11px"
        }
      }
    },
    tooltip: {
      theme: isDark.value ? "dark" : "light",
      y: {
        formatter: (val: number) => `${val}% activity`
      }
    },
    plotOptions: {
      heatmap: {
        shadeIntensity: 0.2,
        radius: 6,
        distributed: false,
        colorScale: {
          ranges: [
            { from: 0, to: 20, color: isDark.value ? "#1E293B" : "#E2E8F0" },
            { from: 21, to: 40, color: isDark.value ? "#334155" : "#DBEAFE" },
            { from: 41, to: 60, color: "#93C5FD" },
            { from: 61, to: 80, color: "#60A5FA" },
            { from: 81, to: 100, color: "#3B82F6" }
          ]
        }
      }
    },
    grid: {
      borderColor: isDark.value ? "#334155" : "#E5EEF9",
      strokeDashArray: 4,
      padding: { top: 0, right: 4, bottom: 0, left: 4 }
    },
    theme: {
      mode: isDark.value ? "dark" : "light",
      monochrome: { enabled: false }
    }
  };
});
</script>
