"use client";

import { TileRevealSwap, type TileRevealPattern, type TileRevealTrigger } from "./index";

export interface DemoProps {
  tileSize?: number;
  pattern?: TileRevealPattern;
  duration?: number;
  spin?: number;
  trigger?: TileRevealTrigger;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  tileSize = 44,
  pattern = "center",
  duration = 520,
  spin = 90,
  trigger = "hover",
  accent = "#7C5CFF",
}: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <TileRevealSwap tileSize={tileSize} pattern={pattern} duration={duration} spin={spin} trigger={trigger} accent={accent} />
    </div>
  );
}

1d:T295a, 1e:T1fca2,

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

type Pattern = "random" | "center" | "edges" | "leftToRight" | "diagonal" | "spiral";
type Trigger = "hover" | "click";

const props = withDefaults(
  defineProps<{
    tileSize?: number;
    pattern?: Pattern;
    duration?: number;
    spin?: number;
    trigger?: Trigger;
    accent?: string;
  }>(),
  { tileSize: 44, pattern: "center", duration: 520, spin: 90, trigger: "hover", accent: "#7C5CFF" },
);

const MAX_TILES = 160;
const JITTER_SHARE = 0.12;

function hash01(seed: number): number {
  const x = Math.sin(seed * 12.9898 + 78.233) * 43758.5453;
  return x - Math.floor(x);
}

function patternDelay(pattern: Pattern, nx: number, ny: number, index: number): number {
  const dx = nx - 0.5;
  const dy = ny - 0.5;
  const dist = Math.min(1, Math.sqrt(dx * dx + dy * dy) / 0.7071);
  switch (pattern) {
    case "center":
      return dist;
    case "edges":
      return 1 - dist;
    case "leftToRight":
      return nx;
    case "diagonal":
      return (nx + ny) / 2;
    case "spiral": {
      const angle = (Math.atan2(dy, dx) + Math.PI) / (Math.PI * 2);
      return (dist * 0.6 + angle * 0.4) % 1;
    }
    default:
      return hash01(index + 1);
  }
}

interface Tile {
  col: number;
  row: number;
  nx: number;
  ny: number;
  spread: number;
}

const isOpen = ref(false);
const reducedMotion = ref(false);
const bodyEl = ref<HTMLDivElement | null>(null);
const size = reactive({ w: 320, h: 240 });

let mql: MediaQueryList | null = null;
function onMqlChange() {
  reducedMotion.value = mql?.matches ?? false;
}

let ro: ResizeObserver | null = null;
let timers: ReturnType<typeof setTimeout>[] = [];

onMounted(() => {
  mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mql.matches;
  mql.addEventListener("change", onMqlChange);
  if (bodyEl.value) {
    ro = new ResizeObserver((entries) => {
      const box = entries[0]?.contentRect;
      if (box && box.width > 0 && box.height > 0) {
        size.w = box.width;
        size.h = box.height;
      }
    });
    ro.observe(bodyEl.value);
  }
});

onBeforeUnmount(() => {
  mql?.removeEventListener("change", onMqlChange);
  ro?.disconnect();
  timers.forEach((t) => clearTimeout(t));
});

const grid = computed(() => {
  let cols = Math.max(1, Math.round(size.w / props.tileSize));
  let rows = Math.max(1, Math.round(size.h / props.tileSize));
  if (cols * rows > MAX_TILES) {
    const scale = Math.sqrt((cols * rows) / MAX_TILES);
    cols = Math.max(1, Math.round(cols / scale));
    rows = Math.max(1, Math.round(rows / scale));
  }
  const tileW = size.w / cols;
  const tileH = size.h / rows;
  const tiles: Tile[] = [];
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const nx = cols > 1 ? col / (cols - 1) : 0.5;
      const ny = rows > 1 ? row / (rows - 1) : 0.5;
      const index = row * cols + col;
      const delay = patternDelay(props.pattern, nx, ny, index);
      const jitter = hash01(index * 7 + 3);
      const spread = Math.max(0, delay * props.duration + (jitter - 0.5) * props.duration * JITTER_SHARE);
      tiles.push({ col, row, nx, ny, spread });
    }
  }
  return { cols, rows, tileW, tileH, cw: Math.ceil(tileW), ch: Math.ceil(tileH), tiles };
});

const flipDuration = computed(() => Math.min(460, Math.max(200, Math.round(props.duration * 0.4))));

const faces = ref<boolean[]>([]);
const ticks = ref<number[]>([]);
let prevOpen = isOpen.value;

function scheduleFlip() {
  if (reducedMotion.value) {
    faces.value = grid.value.tiles.map(() => isOpen.value);
    return;
  }
  const changed = prevOpen !== isOpen.value;
  prevOpen = isOpen.value;
  timers.forEach((t) => clearTimeout(t));
  if (!changed) {
    // Grid reshaped (resize) without the target actually changing: snap silently, no flourish.
    faces.value = grid.value.tiles.map(() => isOpen.value);
    ticks.value = grid.value.tiles.map(() => 0);
    timers = [];
    return;
  }
  const currentTicks = ticks.value;
  ticks.value = grid.value.tiles.map((_, i) => (currentTicks[i] ?? 0) + 1);
  const target = isOpen.value;
  timers = grid.value.tiles.map((tile, i) =>
    setTimeout(
      () => {
        const current = faces.value[i] ?? !target;
        if (current === target) return;
        const next = faces.value.slice();
        next[i] = target;
        faces.value = next;
      },
      tile.spread + flipDuration.value / 2,
    ),
  );
}

watch([isOpen, grid, () => props.duration, flipDuration, reducedMotion], scheduleFlip, { immediate: true });

function setOpen(next: boolean) {
  isOpen.value = next;
}
function toggle() {
  isOpen.value = !isOpen.value;
}

function showBack(i: number): boolean {
  return faces.value[i] ?? isOpen.value;
}

const ariaLabel = computed(() => (isOpen.value ? "New arrivals just went live" : "Collection, 312 pieces on display"));
</script>

<template>
  <button
    type="button"
    class="trs-root"
    :aria-pressed="isOpen"
    :aria-label="ariaLabel"
    @click="toggle"
    @mouseenter="trigger === 'hover' ? setOpen(true) : undefined"
    @mouseleave="trigger === 'hover' ? setOpen(false) : undefined"
  >
    <div ref="bodyEl" class="trs-body">
      <template v-if="reducedMotion">
        <div class="trs-panel" :style="{ opacity: isOpen ? 0 : 1 }">
          <div class="trs-front" :style="{ width: size.w + 'px', height: size.h + 'px' }">
            <div class="trs-front-glow"></div>
            <div class="trs-eyebrow">Collection</div>
            <div class="trs-stat">
              <div class="trs-stat-num">312</div>
              <div class="trs-stat-label">pieces on display</div>
            </div>
          </div>
        </div>
        <div class="trs-panel" :style="{ opacity: isOpen ? 1 : 0 }">
          <div
            class="trs-back"
            :style="{
              width: size.w + 'px',
              height: size.h + 'px',
              background: `linear-gradient(155deg, ${accent}, color-mix(in srgb, ${accent} 65%, #05070a))`,
            }"
          >
            <div class="trs-back-shade"></div>
            <div class="trs-copy">New arrivals just went live.</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div
          v-for="(tile, i) in grid.tiles"
          :key="i"
          class="trs-tile"
          aria-hidden="true"
          :style="{ left: tile.col * grid.tileW + 'px', top: tile.row * grid.tileH + 'px', width: grid.cw + 'px', height: grid.ch + 'px' }"
        >
          <div
            :key="ticks[i] ?? 0"
            class="trs-flip"
            :class="{ 'trs-flip-anim': (ticks[i] ?? 0) > 0 }"
            :style="{ animationDelay: tile.spread + 'ms', animationDuration: flipDuration + 'ms', '--trs-spin': spin + 'deg' }"
          >
            <div
              class="trs-window"
              :style="{
                width: size.w + 'px',
                height: size.h + 'px',
                left: -(tile.col * grid.tileW) + 'px',
                top: -(tile.row * grid.tileH) + 'px',
              }"
            >
              <div
                v-if="showBack(i)"
                class="trs-back"
                :style="{
                  width: size.w + 'px',
                  height: size.h + 'px',
                  background: `linear-gradient(155deg, ${accent}, color-mix(in srgb, ${accent} 65%, #05070a))`,
                }"
              >
                <div class="trs-back-shade"></div>
                <div class="trs-copy">New arrivals just went live.</div>
              </div>
              <div v-else class="trs-front" :style="{ width: size.w + 'px', height: size.h + 'px' }">
                <div class="trs-front-glow"></div>
                <div class="trs-eyebrow">Collection</div>
                <div class="trs-stat">
                  <div class="trs-stat-num">312</div>
                  <div class="trs-stat-label">pieces on display</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </button>
</template>

<style scoped>
.trs-root {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.trs-root:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
  outline-offset: 2px;
}
.trs-body {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0b0d10;
  perspective: 640px;
}
.trs-panel {
  position: absolute;
  inset: 0;
  transition: opacity 160ms linear;
}
.trs-tile {
  position: absolute;
}
.trs-flip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0d10;
  transform-origin: center;
  animation-timing-function: ease-in-out;
}
.trs-flip-anim {
  animation-name: trs-flip;
}
.trs-window {
  position: absolute;
}
.trs-front {
  position: relative;
  background: #161a20;
}
.trs-front-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.07), transparent 55%);
}
.trs-eyebrow {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(255 255 255 / 0.45);
}
.trs-stat {
  position: absolute;
  left: 20px;
  bottom: 20px;
}
.trs-stat-num {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.trs-stat-label {
  margin-top: 4px;
  font-size: 11px;
  color: rgb(255 255 255 / 0.5);
}
.trs-back {
  position: relative;
}
.trs-back-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.28), transparent 58%);
}
.trs-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}
@keyframes trs-flip {
  0% {
    transform: rotateY(0deg) scaleX(1);
    inset: 0;
    border-radius: 0px;
  }
  15% {
    inset: 1px;
    border-radius: 5px;
  }
  50% {
    transform: rotateY(var(--trs-spin, 90deg)) scaleX(0.08);
    inset: 1px;
    border-radius: 5px;
  }
  85% {
    inset: 1px;
    border-radius: 5px;
  }
  100% {
    transform: rotateY(0deg) scaleX(1);
    inset: 0;
    border-radius: 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .trs-flip-anim {
    animation: none !important;
  }
}
</style>

Nearby