"use client";

import { VisitorMapStatCard } from "./index";

export interface DemoProps {
  title?: string;
  accentColor?: string;
  cellSize?: number;
  total?: number;
  trend?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ title = "Unique Visitors", accentColor = "#38BDF8", cellSize = 6, total = 148, trend = -3.1 }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <VisitorMapStatCard title={title} accentColor={accentColor} cellSize={cellSize} total={total} trend={trend} className="max-w-[720px]" />
    </div>
  );
}

1d:T3bcc, 1e:T35c4a,

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";

const props = withDefaults(
  defineProps<{
    title?: string;
    accentColor?: string;
    cellSize?: number;
    total?: number;
    trend?: number;
  }>(),
  { title: "Unique Visitors", accentColor: "#38BDF8", cellSize: 6, total: 148, trend: -3.1 },
);

interface RegionDef {
  id: string;
  name: string;
  share: number;
}
interface Cell {
  col: number;
  row: number;
}

const COLS = 50;
const ROWS = 20;
const GAP = 1;
const DIGIT_H = 34;
const NEGATIVE_COLOR = "#FB7185";
const NEUTRAL_COLOR = "#94A3B8";

const REGIONS: RegionDef[] = [
  { id: "N", name: "North America", share: 0.35 },
  { id: "E", name: "Europe", share: 0.26 },
  { id: "Z", name: "Asia", share: 0.21 },
  { id: "S", name: "South America", share: 0.09 },
  { id: "O", name: "Oceania", share: 0.05 },
  { id: "A", name: "Africa", share: 0.04 },
];

const BANDS: Record<string, [number, number, number, number][]> = {
  N: [
    [0, 2, 4, 11],
    [1, 5, 2, 15],
    [5, 8, 4, 13],
    [8, 10, 6, 12],
  ],
  S: [
    [9, 11, 9, 17],
    [11, 14, 10, 19],
    [14, 16, 11, 17],
    [16, 18, 12, 16],
    [18, 19, 13, 15],
  ],
  E: [[2, 6, 19, 26]],
  A: [
    [6, 8, 18, 28],
    [8, 12, 19, 30],
    [12, 15, 20, 28],
    [15, 17, 21, 26],
  ],
  Z: [
    [0, 2, 26, 41],
    [0, 3, 33, 46],
    [2, 8, 26, 45],
    [8, 12, 29, 43],
    [11, 13, 33, 40],
  ],
  O: [
    [13, 17, 37, 48],
    [17, 18, 39, 45],
  ],
};

function buildCellsByRegion(): Record<string, Cell[]> {
  const mask = new Map<string, string>();
  for (const region of REGIONS) {
    for (const [r0, r1, c0, c1] of BANDS[region.id] ?? []) {
      for (let r = r0; r < r1; r++) {
        for (let c = c0; c < c1; c++) {
          if (r >= 0 && r < ROWS && c >= 0 && c < COLS) mask.set(`${c}_${r}`, region.id);
        }
      }
    }
  }
  const out: Record<string, Cell[]> = {};
  for (const region of REGIONS) out[region.id] = [];
  mask.forEach((id, key) => {
    const [c, r] = key.split("_").map(Number);
    out[id]?.push({ col: c!, row: r! });
  });
  return out;
}
const CELLS_BY_REGION = buildCellsByRegion();

function bucketForShare(share: number, min: number, max: number): number {
  const t = (share - min) / (max - min || 1);
  return Math.min(4, Math.max(0, Math.floor(t * 5)));
}
const SHARES = REGIONS.map((r) => r.share);
const MIN_SHARE = Math.min(...SHARES);
const MAX_SHARE = Math.max(...SHARES);
const BUCKETS: Record<string, number> = {};
for (const region of REGIONS) BUCKETS[region.id] = bucketForShare(region.share, MIN_SHARE, MAX_SHARE);

function distributeCounts(total: number, regions: RegionDef[]): Record<string, number> {
  const raw = regions.map((r) => r.share * total);
  const floors = raw.map((v) => Math.floor(v));
  const remainder = Math.round(total) - floors.reduce((a, b) => a + b, 0);
  const order = raw.map((v, i) => ({ i, frac: v - floors[i]! })).sort((a, b) => b.frac - a.frac);
  const counts = [...floors];
  for (let k = 0; k < remainder && order.length; k++) counts[order[k % order.length]!.i]!++;
  const out: Record<string, number> = {};
  regions.forEach((r, i) => (out[r.id] = Math.max(0, counts[i] ?? 0)));
  return out;
}

function hexToHsl(hex: string): { h: number; s: number; l: number } {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  const n = m ? parseInt(m[1], 16) : 0x38bdf8;
  const r = ((n >> 16) & 255) / 255;
  const g = ((n >> 8) & 255) / 255;
  const b = (n & 255) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  if (max === min) return { h: 0, s: 0, l };
  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
  else if (max === g) h = (b - r) / d + 2;
  else h = (r - g) / d + 4;
  return { h: h * 60, s, l };
}
function hslToHex(h: number, s: number, l: number): string {
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
  const m = l - c / 2;
  let r = 0;
  let g = 0;
  let b = 0;
  if (h < 60) [r, g, b] = [c, x, 0];
  else if (h < 120) [r, g, b] = [x, c, 0];
  else if (h < 180) [r, g, b] = [0, c, x];
  else if (h < 240) [r, g, b] = [0, x, c];
  else if (h < 300) [r, g, b] = [x, 0, c];
  else [r, g, b] = [c, 0, x];
  const hx = (v: number) => Math.round((v + m) * 255).toString(16).padStart(2, "0");
  return `#${hx(r)}${hx(g)}${hx(b)}`;
}
function buildScaleSteps(accent: string): string[] {
  const top = hexToHsl(accent);
  const baseS = Math.max(top.s * 0.3, 0.14);
  const topL = Math.max(top.l, 0.5);
  return Array.from({ length: 5 }, (_, i) => {
    const t = i / 4;
    return hslToHex(top.h, baseS + (top.s - baseS) * t, 0.16 + (topL - 0.16) * t);
  });
}
function alpha(hex: string, a: number): string {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  const n = m ? parseInt(m[1], 16) : 0;
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}
function fmt(v: number): string {
  return Math.round(v).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

const prefersReduced = typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;

const hostRef = ref<HTMLDivElement | null>(null);
const hoveredId = ref<string | null>(null);
const pointerActive = ref(false);
const cursor = reactive({ x: 0, y: 0 });
const ready = ref(prefersReduced);
const entered = ref(prefersReduced);
let clearTimer: number | null = null;
let enterTimer: number | null = null;

onMounted(() => {
  if (!prefersReduced) {
    enterTimer = window.setTimeout(() => {
      ready.value = true;
      entered.value = true;
    }, 260);
  }
});
onBeforeUnmount(() => {
  if (clearTimer) window.clearTimeout(clearTimer);
  if (enterTimer) window.clearTimeout(enterTimer);
});

const steps = computed(() => buildScaleSteps(props.accentColor));
const counts = computed(() => distributeCounts(Math.round(props.total), REGIONS));
const avg = computed(() => props.total / REGIONS.length);
const W = computed(() => COLS * (props.cellSize + GAP) - GAP);
const H = computed(() => ROWS * (props.cellSize + GAP) - GAP);
const rx = computed(() => Math.min(2.6, props.cellSize * 0.32));

function cancelClear() {
  if (clearTimer) {
    window.clearTimeout(clearTimer);
    clearTimer = null;
  }
}
function scheduleClear() {
  cancelClear();
  clearTimer = window.setTimeout(() => {
    hoveredId.value = null;
    pointerActive.value = false;
  }, 380);
}
function onPointerMove(e: PointerEvent) {
  const target = e.target as (SVGElement & { dataset?: DOMStringMap }) | null;
  const region = target?.dataset?.region;
  const rect = hostRef.value?.getBoundingClientRect();
  if (rect) {
    cursor.x = e.clientX - rect.left;
    cursor.y = e.clientY - rect.top;
  }
  if (region) {
    cancelClear();
    pointerActive.value = true;
    hoveredId.value = region;
  } else if (hoveredId.value) {
    scheduleClear();
  }
}
function onPointerLeave() {
  if (hoveredId.value) scheduleClear();
}
function cycle(dir: number) {
  cancelClear();
  pointerActive.value = false;
  const n = REGIONS.length;
  const idx = hoveredId.value ? REGIONS.findIndex((r) => r.id === hoveredId.value) : -1;
  hoveredId.value = REGIONS[(idx + dir + n) % n]!.id;
}
function onKeyDown(e: KeyboardEvent) {
  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
    e.preventDefault();
    cycle(1);
  } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
    e.preventDefault();
    cycle(-1);
  } else if (e.key === "Escape") {
    cancelClear();
    hoveredId.value = null;
    pointerActive.value = false;
  }
}
function onBlur() {
  cancelClear();
  hoveredId.value = null;
  pointerActive.value = false;
}

const hovered = computed(() => (hoveredId.value ? REGIONS.find((r) => r.id === hoveredId.value) : undefined));
const displayValue = computed(() => (!ready.value ? 0 : hovered.value ? (counts.value[hovered.value.id] ?? 0) : Math.round(props.total)));
const caption = computed(() => (hovered.value ? hovered.value.name : "All regions"));
const standing = computed(() => (hovered.value ? (((counts.value[hovered.value.id] ?? 0) - avg.value) / (avg.value || 1)) * 100 : props.trend));
const onPar = computed(() => !!hovered.value && Math.abs(standing.value) < 5);
const positive = computed(() => standing.value >= 0);
const pillColor = computed(() => (onPar.value ? NEUTRAL_COLOR : positive.value ? props.accentColor : NEGATIVE_COLOR));
const digits = computed(() => String(Math.max(0, Math.round(displayValue.value))).split(""));
const liveText = computed(() =>
  hovered.value
    ? `${caption.value}, ${fmt(counts.value[hovered.value.id] ?? 0)} visitors, ${onPar.value ? "on par with average" : `${positive.value ? "above" : "below"} average by ${Math.abs(standing.value).toFixed(0)} percent`}`
    : `${caption.value}, ${fmt(Math.round(props.total))} visitors, trend ${positive.value ? "up" : "down"} ${Math.abs(props.trend).toFixed(1)} percent`,
);
const ariaLabel = computed(() => `${props.title}. ${liveText.value}. Use arrow keys to browse regions, escape to reset.`);

function fillFor(id: string): string {
  const count = counts.value[id] ?? 0;
  if (count <= 0) return "var(--vmsc-ink)";
  const bucket = BUCKETS[id] ?? 0;
  const isHot = hoveredId.value === id;
  return steps.value[isHot ? Math.min(4, bucket + 1) : bucket]!;
}
</script>

<template>
  <div ref="hostRef" class="vmsc" :style="{ aspectRatio: `${W} / ${H}` }">
    <svg
      :viewBox="`0 0 ${W} ${H}`"
      preserveAspectRatio="none"
      role="img"
      tabindex="0"
      :aria-label="ariaLabel"
      class="vmsc__svg"
      @pointermove="onPointerMove"
      @pointerleave="onPointerLeave"
      @keydown="onKeyDown"
      @blur="onBlur"
    >
      <g
        v-for="(region, i) in REGIONS"
        :key="region.id"
        class="vmsc__group"
        :class="{ 'vmsc__group--in': entered }"
        :style="{ transitionDelay: prefersReduced ? '0s' : `${0.1 + i * 0.09}s`, transitionDuration: prefersReduced ? '0s' : '0.6s' }"
      >
        <rect
          v-for="(cell, ci) in CELLS_BY_REGION[region.id]"
          :key="ci"
          :data-region="region.id"
          :x="cell.col * (cellSize + GAP)"
          :y="cell.row * (cellSize + GAP)"
          :width="cellSize"
          :height="cellSize"
          :rx="rx"
          :fill="fillFor(region.id)"
          :fill-opacity="(counts[region.id] ?? 0) > 0 ? 1 : 0.12"
          :stroke="hoveredId === region.id ? '#fff' : 'none'"
          :stroke-opacity="hoveredId === region.id ? 0.85 : 0"
          :stroke-width="hoveredId === region.id ? Math.max(0.5, cellSize * 0.14) : 0"
        />
      </g>
    </svg>

    <div
      v-if="pointerActive && hovered"
      class="vmsc__tooltip"
      :style="{ left: cursor.x + 12 + 'px', top: cursor.y - 10 + 'px', borderColor: alpha(accentColor, 0.4) }"
    >
      <span class="vmsc__tooltip-name">{{ hovered.name }}</span>
      <span class="vmsc__tooltip-count">{{ fmt(counts[hovered.id] ?? 0) }}</span>
    </div>

    <div class="vmsc__header">
      <div aria-hidden="true">
        <div class="vmsc__title">{{ title }}</div>
        <div class="vmsc__value">
          <span v-for="(d, i) in digits" :key="i" class="vmsc__digit">
            <span
              class="vmsc__digit-strip"
              :style="{ transform: `translateY(${-Number(d) * DIGIT_H}px)`, transitionDuration: prefersReduced ? '0s' : undefined }"
            >
              <span v-for="n in 10" :key="n" class="vmsc__digit-n">{{ n - 1 }}</span>
            </span>
          </span>
        </div>
        <div class="vmsc__caption">{{ caption }}</div>
      </div>
      <span class="vmsc__pill" :style="{ color: pillColor, background: alpha(pillColor, 0.14) }" aria-hidden="true">
        <svg v-if="!onPar" width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" :style="{ transform: positive ? undefined : 'rotate(180deg)' }">
          <path d="M12 19.5V5" />
          <path d="M5.5 11.5 12 5l6.5 6.5" />
        </svg>
        {{ onPar ? "On par" : `${positive ? "+" : "-"}${Math.abs(standing).toFixed(1)}%` }}
      </span>
    </div>

    <span class="vmsc__sr" aria-live="polite">{{ ready ? liveText : "" }}</span>
  </div>
</template>

<style scoped>
.vmsc {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #fff;
  color: #0f172a;
  --vmsc-surface: #ffffff;
  --vmsc-ink: #0f172a;
}
@media (prefers-color-scheme: dark) {
  .vmsc {
    border-color: rgb(255 255 255 / 0.1);
    background: #12161a;
    color: #fff;
    --vmsc-surface: #12161a;
    --vmsc-ink: #ffffff;
  }
}
.vmsc__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}
.vmsc__svg:focus-visible {
  box-shadow: inset 0 0 0 2px var(--vmsc-ink);
}
.vmsc__group {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.vmsc__group--in {
  opacity: 1;
}
.vmsc__tooltip {
  position: absolute;
  z-index: 20;
  transform: translateY(-100%);
  pointer-events: none;
  border-radius: 6px;
  border: 1px solid;
  background: var(--vmsc-surface);
  color: var(--vmsc-ink);
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.35);
}
.vmsc__tooltip-name {
  font-weight: 600;
}
.vmsc__tooltip-count {
  margin-left: 6px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.vmsc__header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  padding: 16px 16px 32px;
  background: linear-gradient(180deg, var(--vmsc-surface) 0%, color-mix(in srgb, var(--vmsc-surface) 75%, transparent) 55%, transparent 100%);
}
.vmsc__title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vmsc-ink) 55%, transparent);
}
.vmsc__value {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--vmsc-ink);
}
.vmsc__digit {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 0.6em;
  overflow: hidden;
  vertical-align: top;
}
.vmsc__digit-strip {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vmsc__digit-n {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
}
.vmsc__caption {
  margin-top: 4px;
  font-size: 11px;
  color: color-mix(in srgb, var(--vmsc-ink) 55%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vmsc__pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vmsc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
</style>

Nearby