"use client";

import { CrtTerminalStatic } from "./index";

export interface DemoProps {
  tint?: string;
  cellSize?: number;
  speed?: number;
  scanline?: number;
  glitch?: number;
  pointerGlow?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  tint = "#7CFF67",
  cellSize = 12,
  speed = 0.8,
  scanline = 0.4,
  glitch = 0.6,
  pointerGlow = true,
}: DemoProps) {
  return (
    <div className="h-full w-full">
      <CrtTerminalStatic tint={tint} cellSize={cellSize} speed={speed} scanline={scanline} glitch={glitch} pointerGlow={pointerGlow} />
    </div>
  );
}

1d:T2e2d, 1e:T276f0,

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

const props = withDefaults(
  defineProps<{
    tint?: string;
    cellSize?: number;
    speed?: number;
    scanline?: number;
    glitch?: number;
    pointerGlow?: boolean;
  }>(),
  { tint: "#7CFF67", cellSize: 12, speed: 0.8, scanline: 0.4, glitch: 0.6, pointerGlow: true },
);

const GLYPH_ROWS = 5;
const ROW_ALPHA = [0.16, 0.32, 0.52, 0.74, 1];
const BARREL_K = 0.16;
const BOOT_SPAN_MS = 1800;
const BOOT_FADE_MS = 160;
const ROLL_SIGMA = 2.4;
const ROLL_SPEED = 4.4;
const TEAR_DURATION_MS = 130;
const RIPPLE_LIFE_MS = 820;
const RIPPLE_INTERVAL_MS = 420;

interface Cell {
  gx: number;
  gy: number;
  cx: number;
  cy: number;
  delay: number;
}
interface Ripple {
  x: number;
  y: number;
  born: number;
}

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);

function hexToRgb(hex: string): [number, number, number] {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  const n = m ? Number.parseInt(m[1], 16) : 0x7cff67;
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

function hash01(gx: number, gy: number): number {
  let h = (gx * 374761393 + gy * 668265263) ^ 0x9e3779b9;
  h = Math.imul(h ^ (h >>> 13), 1274126177);
  h ^= h >>> 16;
  return (h >>> 0) / 4294967296;
}

function fieldNoise(gx: number, gy: number, t: number): number {
  const n =
    Math.sin(gx * 0.17 + t * 0.55) * Math.cos(gy * 0.14 - t * 0.4) +
    Math.sin((gx - gy) * 0.1 + t * 0.8) * 0.6 +
    Math.sin(gx * 0.06 + gy * 0.11 - t * 0.28) * 0.5;
  return clamp01((n + 2.1) / 4.2);
}

function wrapDist(a: number, b: number, span: number): number {
  const d = Math.abs(a - b) % span;
  return Math.min(d, span - d);
}

function buildGrid(width: number, height: number, cellSize: number): { cells: Cell[]; rows: number } {
  const cols = Math.max(1, Math.ceil(width / cellSize) + 1);
  const rows = Math.max(1, Math.ceil(height / cellSize) + 1);
  const halfW = width / 2;
  const halfH = height / 2;
  const cells: Cell[] = [];
  for (let gy = 0; gy < rows; gy++) {
    for (let gx = 0; gx < cols; gx++) {
      const px = gx * cellSize + cellSize / 2;
      const py = gy * cellSize + cellSize / 2;
      const nx = halfW ? (px - halfW) / halfW : 0;
      const ny = halfH ? (py - halfH) / halfH : 0;
      const f = 1 + BARREL_K * (nx * nx + ny * ny);
      cells.push({ gx, gy, cx: halfW + nx * f * halfW, cy: halfH + ny * f * halfH, delay: hash01(gx, gy) * BOOT_SPAN_MS });
    }
  }
  return { cells, rows };
}

const hostEl = ref<HTMLDivElement | null>(null);
const canvasEl = ref<HTMLCanvasElement | null>(null);
let stop: (() => void) | null = null;

function start(): (() => void) | null {
  const host = hostEl.value;
  const canvas = canvasEl.value;
  if (!host || !canvas) return null;
  const ctx = canvas.getContext("2d");
  if (!ctx) return null;

  const cellSize = props.cellSize;
  const speed = props.speed;
  const scanline = props.scanline;
  const glitch = props.glitch;
  const pointerGlow = props.pointerGlow;
  const [tr, tg, tb] = hexToRgb(props.tint);
  const rgba = (a: number) => `rgba(${tr}, ${tg}, ${tb}, ${a})`;
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  let width = Math.max(1, host.clientWidth);
  let height = Math.max(1, host.clientHeight);
  let { cells, rows } = buildGrid(width, height, cellSize);
  let poolRadius = Math.min(160, Math.max(70, Math.min(width, height) * 0.16));

  const pad = Math.max(1, cellSize * 0.12);
  const rowGap = Math.max(0.6, cellSize * 0.06);
  const rowH = (cellSize - pad * 2) / GLYPH_ROWS;
  const half = cellSize / 2;

  let poolX = width / 2;
  let poolY = height / 2;
  let poolTargetX = poolX;
  let poolTargetY = poolY;
  let poolStrength = 0;
  let poolTarget = 0;
  let lastRippleAt = 0;
  const ripples: Ripple[] = [];

  let tearActive = false;
  let tearStart = 0;
  let tearBandStart = 0;
  let tearBandCount = 0;
  let tearShift = 0;
  let nextTearAt = reduced || glitch <= 0 ? Infinity : performance.now() + 900 + Math.random() * 900;

  const mountedAt = performance.now();
  let bootDone = reduced;

  const onMove = (event: PointerEvent) => {
    const r = host.getBoundingClientRect();
    poolTargetX = event.clientX - r.left;
    poolTargetY = event.clientY - r.top;
    poolTarget = 1;
    const now = performance.now();
    if (now - lastRippleAt > RIPPLE_INTERVAL_MS) {
      lastRippleAt = now;
      ripples.push({ x: poolTargetX, y: poolTargetY, born: now });
      if (ripples.length > 5) ripples.shift();
    }
  };
  const onLeave = () => {
    poolTarget = 0;
  };
  if (pointerGlow) {
    host.addEventListener("pointermove", onMove, { passive: true });
    host.addEventListener("pointerleave", onLeave, { passive: true });
  }

  const resize = () => {
    const rect = host.getBoundingClientRect();
    width = Math.max(1, Math.round(rect.width));
    height = Math.max(1, Math.round(rect.height));
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas.width = Math.round(width * dpr);
    canvas.height = Math.round(height * dpr);
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const built = buildGrid(width, height, cellSize);
    cells = built.cells;
    rows = built.rows;
    poolRadius = Math.min(160, Math.max(70, Math.min(width, height) * 0.16));
  };
  const observer = new ResizeObserver(resize);
  observer.observe(host);
  resize();

  let elapsed = 0;
  let raf = 0;
  let running = false;
  let last = performance.now();
  const buckets: Path2D[] = [];

  const step = (dt: number, now: number) => {
    elapsed += dt * speed;
    poolX += (poolTargetX - poolX) * Math.min(1, dt * 8);
    poolY += (poolTargetY - poolY) * Math.min(1, dt * 8);
    poolStrength += (poolTarget - poolStrength) * Math.min(1, dt * 6);

    if (!bootDone && now - mountedAt > BOOT_SPAN_MS + BOOT_FADE_MS) bootDone = true;

    if (!tearActive && now >= nextTearAt) {
      tearActive = true;
      tearStart = now;
      tearBandCount = 2 + Math.floor(Math.random() * 5);
      tearBandStart = Math.floor(Math.random() * Math.max(1, rows - tearBandCount));
      tearShift = (Math.random() < 0.5 ? -1 : 1) * cellSize * (1.2 + glitch * 2.6);
    }
    let tearGain = 1;
    let tearShiftNow = 0;
    if (tearActive) {
      const age = now - tearStart;
      if (age >= TEAR_DURATION_MS) {
        tearActive = false;
        const interval = 3400 - glitch * 2000;
        nextTearAt = reduced || glitch <= 0 ? Infinity : now + interval * (0.7 + Math.random() * 0.6);
      } else {
        const p = age / TEAR_DURATION_MS;
        const env = 1 - Math.abs(p * 2 - 1);
        tearGain = 1 - 0.55 * glitch * env;
        tearShiftNow = tearShift * env;
      }
    }

    const scanRow = rows + 6 - ((elapsed * ROLL_SPEED) % (rows + 6));

    ctx.clearRect(0, 0, width, height);
    for (let i = 0; i < GLYPH_ROWS; i++) buckets[i] = new Path2D();

    for (const cell of cells) {
      let bootMul = 1;
      let individual = false;
      if (!bootDone) {
        const age = now - mountedAt - cell.delay;
        if (age < 0) continue;
        if (age < BOOT_FADE_MS) {
          bootMul = age / BOOT_FADE_MS;
          individual = true;
        }
      }

      let b = fieldNoise(cell.gx, cell.gy, elapsed) ** 1.7 * 1.2;
      if (!reduced && scanline > 0) {
        const d = wrapDist(cell.gy, scanRow, rows + 6);
        b += Math.exp(-(d * d) / (2 * ROLL_SIGMA * ROLL_SIGMA)) * scanline * 0.9;
      }
      if (pointerGlow && poolStrength > 0.003) {
        const dx = cell.cx - poolX;
        const dy = cell.cy - poolY;
        b += Math.exp(-(dx * dx + dy * dy) / (2 * poolRadius * poolRadius)) * poolStrength * 0.85;
      }
      b *= tearGain;

      const litRows = Math.round(clamp01(b) * GLYPH_ROWS);
      if (litRows <= 0) continue;

      const inBand = tearActive && cell.gy >= tearBandStart && cell.gy < tearBandStart + tearBandCount;
      const x = (inBand ? cell.cx + tearShiftNow : cell.cx) - half + pad;
      const yTop = cell.cy - half + pad;
      const w = cellSize - pad * 2;
      const h = rowH - rowGap;

      for (let i = GLYPH_ROWS - litRows; i < GLYPH_ROWS; i++) {
        const y = yTop + i * rowH;
        if (individual) {
          ctx.fillStyle = rgba(ROW_ALPHA[i] * bootMul);
          ctx.fillRect(x, y, w, h);
        } else {
          buckets[i].rect(x, y, w, h);
        }
      }
    }

    for (let i = 0; i < GLYPH_ROWS; i++) {
      ctx.fillStyle = rgba(ROW_ALPHA[i]);
      ctx.fill(buckets[i]);
    }

    if (pointerGlow && poolStrength > 0.02) {
      const grad = ctx.createRadialGradient(poolX, poolY, 0, poolX, poolY, poolRadius * 1.15);
      grad.addColorStop(0, rgba(0.1 * poolStrength));
      grad.addColorStop(1, rgba(0));
      ctx.globalCompositeOperation = "lighter";
      ctx.fillStyle = grad;
      ctx.fillRect(poolX - poolRadius * 1.15, poolY - poolRadius * 1.15, poolRadius * 2.3, poolRadius * 2.3);
      ctx.globalCompositeOperation = "source-over";
    }

    for (let i = ripples.length - 1; i >= 0; i--) {
      const ring = ripples[i];
      const age = now - ring.born;
      if (age > RIPPLE_LIFE_MS) {
        ripples.splice(i, 1);
        continue;
      }
      const p = age / RIPPLE_LIFE_MS;
      ctx.beginPath();
      ctx.arc(ring.x, ring.y, poolRadius * 0.25 + p * poolRadius * 0.85, 0, Math.PI * 2);
      ctx.strokeStyle = rgba((1 - p) * 0.5);
      ctx.lineWidth = 1.5;
      ctx.stroke();
    }
  };

  const loop = (now: number) => {
    raf = requestAnimationFrame(loop);
    const dt = Math.min((now - last) / 1000, 0.05);
    last = now;
    step(dt, now);
  };
  const startLoop = () => {
    if (running) return;
    running = true;
    last = performance.now();
    raf = requestAnimationFrame(loop);
  };
  const stopLoop = () => {
    running = false;
    cancelAnimationFrame(raf);
  };

  const io = new IntersectionObserver(
    (entries) => {
      if (entries[0]?.isIntersecting) startLoop();
      else stopLoop();
    },
    { threshold: 0.01 },
  );
  io.observe(host);
  const onVisibility = () => (document.hidden ? stopLoop() : startLoop());
  document.addEventListener("visibilitychange", onVisibility);

  return () => {
    stopLoop();
    io.disconnect();
    observer.disconnect();
    document.removeEventListener("visibilitychange", onVisibility);
    host.removeEventListener("pointermove", onMove);
    host.removeEventListener("pointerleave", onLeave);
  };
}

function restart() {
  stop?.();
  stop = start();
}

onMounted(restart);
watch(() => [props.tint, props.cellSize, props.speed, props.scanline, props.glitch, props.pointerGlow], restart);
onBeforeUnmount(() => {
  stop?.();
  stop = null;
});
</script>

<template>
  <div ref="hostEl" aria-hidden="true" class="crt-terminal-static">
    <canvas ref="canvasEl" class="crt-terminal-static__canvas"></canvas>
    <div class="crt-terminal-static__vignette"></div>
    <div class="crt-terminal-static__scan" :style="{ backgroundImage: `repeating-linear-gradient(to bottom, ${'rgba(' + hexToRgb(props.tint).join(', ') + ', 0.8)'} 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px)` }"></div>
  </div>
</template>

<style scoped>
.crt-terminal-static {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 160px;
  overflow: hidden;
  background: #0b0d10;
}
.crt-terminal-static__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.crt-terminal-static__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.crt-terminal-static__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
}
</style>

Nearby