"use client";

import { CurtainLineLoader, type CurtainDirection } from "./index";

export interface DemoProps {
  accent?: string;
  duration?: number;
  direction?: CurtainDirection;
  lineWidth?: number;
  loop?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF6A1F", duration = 900, direction = "right", lineWidth = 4, loop = true }: DemoProps) {
  return (
    <div className="w-full p-6">
      <CurtainLineLoader accent={accent} duration={duration} direction={direction} lineWidth={lineWidth} loop={loop} />
    </div>
  );
}

1d:T1eff, 1e:T180c7,

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

type Direction = "left" | "right" | "up" | "down";

const props = withDefaults(
  defineProps<{
    accent?: string;
    duration?: number;
    direction?: Direction;
    lineWidth?: number;
    loop?: boolean;
  }>(),
  { accent: "#FF6A1F", duration: 900, direction: "right", lineWidth: 4, loop: true },
);

const INITIAL_PAUSE_MS = 80;
const PAUSE_MS = 1000;
const HOLD_MS = 1500;
const LEAD = 0.14;
const STAGE_BG = "#0B0D10";
const AXIS: Record<Direction, { axis: "x" | "y"; sign: 1 | -1 }> = {
  right: { axis: "x", sign: 1 },
  left: { axis: "x", sign: -1 },
  down: { axis: "y", sign: 1 },
  up: { axis: "y", sign: -1 },
};

function clamp(value: number, min: number, max: number): number {
  return Math.min(max, Math.max(min, value));
}

const percent = ref(0);
const settled = ref(false);
const paused = ref(false);
const prefersReducedMotion = ref(false);
const token = ref(0);
let timeoutId: number | undefined;
let rafId: number | undefined;
let mql: MediaQueryList | undefined;

function clearTimers() {
  if (timeoutId !== undefined) window.clearTimeout(timeoutId);
  if (rafId !== undefined) cancelAnimationFrame(rafId);
  timeoutId = undefined;
  rafId = undefined;
}

function runCycle() {
  const myToken = (token.value += 1);
  clearTimers();
  percent.value = 0;
  settled.value = false;
  const reduced = prefersReducedMotion.value;
  const sweepMs = reduced ? 120 : Math.max(1, props.duration);
  const lead = reduced ? 0 : LEAD;

  function waitThen(delay: number, next: () => void) {
    const poll = () => {
      if (myToken !== token.value) return;
      if (paused.value) {
        timeoutId = window.setTimeout(poll, 50);
        return;
      }
      next();
    };
    timeoutId = window.setTimeout(poll, delay);
  }

  function sweep() {
    if (myToken !== token.value) return;
    if (paused.value) {
      timeoutId = window.setTimeout(sweep, 50);
      return;
    }
    const start = performance.now();
    let pausedTotal = 0;
    let pauseStart = 0;
    const tick = (now: number) => {
      if (myToken !== token.value) return;
      if (paused.value) {
        if (pauseStart === 0) pauseStart = now;
        rafId = requestAnimationFrame(tick);
        return;
      }
      if (pauseStart !== 0) {
        pausedTotal += now - pauseStart;
        pauseStart = 0;
      }
      const t = clamp((now - start - pausedTotal) / sweepMs, 0, 1);
      percent.value = t * 100 * (1 + lead);
      if (t < 1) {
        rafId = requestAnimationFrame(tick);
      } else {
        settled.value = true;
        if (props.loop) {
          waitThen(HOLD_MS, () => {
            settled.value = false;
            percent.value = 0;
            waitThen(PAUSE_MS, sweep);
          });
        }
      }
    };
    rafId = requestAnimationFrame(tick);
  }

  waitThen(INITIAL_PAUSE_MS, sweep);
}

function restart() {
  runCycle();
}

watch(() => [props.direction, props.duration, props.loop, prefersReducedMotion.value], runCycle);

function onMotionChange(event: MediaQueryListEvent) {
  prefersReducedMotion.value = event.matches;
}

onMounted(() => {
  mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  prefersReducedMotion.value = mql.matches;
  mql.addEventListener("change", onMotionChange);
  runCycle();
});

onBeforeUnmount(() => {
  token.value += 1;
  clearTimers();
  mql?.removeEventListener("change", onMotionChange);
});

const curtainStyle = computed(() => {
  const min = clamp(percent.value, 0, 100);
  if (prefersReducedMotion.value) {
    return { top: "0", right: "0", bottom: "0", left: "0", background: STAGE_BG, opacity: String(1 - min / 100) };
  }
  const { axis, sign } = AXIS[props.direction];
  if (axis === "x") {
    return sign > 0
      ? { top: "0", bottom: "0", left: `${min}%`, right: "0", background: STAGE_BG }
      : { top: "0", bottom: "0", left: "0", right: `${min}%`, background: STAGE_BG };
  }
  return sign > 0
    ? { left: "0", right: "0", top: `${min}%`, bottom: "0", background: STAGE_BG }
    : { left: "0", right: "0", top: "0", bottom: `${min}%`, background: STAGE_BG };
});

const lineStyle = computed(() => {
  const { axis, sign } = AXIS[props.direction];
  const p = percent.value;
  const coord = sign > 0 ? p : 100 - p;
  const falloff = Math.max(16, props.lineWidth * 3);
  const thickness = props.lineWidth + falloff;
  const fadeAt = (falloff / thickness) * 100;
  const towards = axis === "x" ? "right" : "bottom";
  const background =
    sign > 0
      ? `linear-gradient(to ${towards}, transparent 0%, ${props.accent} ${fadeAt}%, ${props.accent} 100%)`
      : `linear-gradient(to ${towards}, ${props.accent} 0%, ${props.accent} ${100 - fadeAt}%, transparent 100%)`;
  const base = { position: "absolute" as const, background, boxShadow: `0 0 10px -2px ${props.accent}` };
  return axis === "x"
    ? { ...base, top: "0", bottom: "0", width: `${thickness}px`, left: sign > 0 ? `calc(${coord}% - ${thickness}px)` : `${coord}%` }
    : { ...base, left: "0", right: "0", height: `${thickness}px`, top: sign > 0 ? `calc(${coord}% - ${thickness}px)` : `${coord}%` };
});

const contentStyle = computed(() => ({
  transform: `scale(${settled.value ? 1 : 1.035})`,
  transition: prefersReducedMotion.value ? "none" : "transform 260ms cubic-bezier(0.16, 1, 0.3, 1)",
}));

const barHeights = [6, 12, 8, 15, 10];
</script>

<template>
  <button
    type="button"
    class="curtain-loader"
    aria-label="Replay reveal"
    @click="restart"
    @pointerenter="paused = true"
    @pointerleave="paused = false"
  >
    <div class="curtain-loader__content" :style="contentStyle">
      <div class="curtain-loader__head">
        <span class="curtain-loader__kicker">Components shipped</span>
        <svg width="42" height="20" viewBox="0 0 42 20" aria-hidden="true" focusable="false">
          <rect
            v-for="(h, i) in barHeights"
            :key="i"
            :x="i * 8.5"
            :y="20 - h"
            width="5"
            :height="h"
            rx="1.5"
            :fill="accent"
            :opacity="0.35 + i * 0.12"
          />
        </svg>
      </div>
      <div>
        <div class="curtain-loader__figure">1,248</div>
        <p class="curtain-loader__caption">Builders published new pieces across every workspace this week.</p>
      </div>
    </div>
    <div class="curtain-loader__curtain" :style="curtainStyle" aria-hidden="true" />
    <div v-if="!prefersReducedMotion" class="curtain-loader__line" :style="lineStyle" aria-hidden="true" />
  </button>
</template>

<style scoped>
.curtain-loader {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #12151a;
  padding: 0;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.curtain-loader:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px rgb(255 255 255 / 0.8);
}
.curtain-loader__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background: linear-gradient(155deg, #161a22 0%, #1c212b 100%);
}
.curtain-loader__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.curtain-loader__kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(255 255 255 / 0.45);
}
.curtain-loader__figure {
  font-size: 2.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.curtain-loader__caption {
  margin: 0.5rem 0 0;
  max-width: 220px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.6);
}
.curtain-loader__curtain {
  position: absolute;
  pointer-events: none;
}
.curtain-loader__line {
  position: absolute;
  pointer-events: none;
}
</style>

Nearby