"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { RotateCcw, Scissors } from "lucide-react";

import { cn } from "@/lib/utils";

/**
 * TearTicket — an event ticket whose perforated stub you physically tear off.
 *
 * Grab the stub and pull: the tear runs down the perforation as far as you
 * pull, the stub hinges on the paper that is still attached, and once the last
 * fibre lets go it flies off with your throw velocity. An ink stamp then lands
 * on the ticket. Stop halfway and the tear stays where you left it, like paper.
 *
 * Everything (physics, foil, stamp) runs on CSS variables and the Web
 * Animations API, so there is no animation library and no Tailwind plugin to
 * install. Keyboard: Enter/Space tears the stub, arrow keys tear it in steps.
 */

/* ───────────────────────────── Variants ───────────────────────────── */

const tearTicketVariants = cva("relative isolate w-full max-w-[560px] select-none", {
  variants: {
    variant: {
      holo: "",
      paper: "",
      gold: "",
    },
  },
  defaultVariants: {
    variant: "holo",
  },
});

type TicketVariant = NonNullable<VariantProps<typeof tearTicketVariants>["variant"]>;

interface Palette {
  body: string;
  stub: string;
  ink: string;
  muted: string;
  rule: string;
  accent: string;
  accentSoft: string;
  fiber: string;
  emblem: string;
  emblemInk: string;
  foil: string | null;
  foilBlend: React.CSSProperties["mixBlendMode"];
  stampBlend: React.CSSProperties["mixBlendMode"];
  grain: number;
  serif: boolean;
}

const svgUrl = (svg: string) => `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;

const GRAIN = svgUrl(
  "<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(#g)'/></svg>"
);

// Alpha mask that knocks small speckles out of the stamp, like a rubber stamp
// that didn't pick up ink evenly.
const INK = svgUrl(
  "<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120'><filter id='i'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -4 3'/></filter><rect width='100%' height='100%' filter='url(#i)'/></svg>"
);

// Security-print wave lines, the kind printed on banknotes and real tickets.
const guilloche = (color: string) =>
  svgUrl(
    `<svg xmlns='http://www.w3.org/2000/svg' width='160' height='28'><g fill='none' stroke='${color}' stroke-width='0.6'><path d='M0 14 C20 0 20 28 40 14 S60 0 80 14 S100 28 120 14 S140 0 160 14'/><path d='M0 14 C20 28 20 0 40 14 S60 28 80 14 S100 0 120 14 S140 28 160 14'/><path d='M0 4 C20 -6 20 16 40 4 S60 -6 80 4 S100 16 120 4 S140 -6 160 4' opacity='.55'/><path d='M0 24 C20 14 20 34 40 24 S60 14 80 24 S100 34 120 24 S140 14 160 24' opacity='.55'/></g></svg>`
  );

const PALETTES: Record<TicketVariant, Palette> = {
  holo: {
    body: "radial-gradient(130% 160% at 0% 0%, #23204a 0%, #0f0f1a 48%, #08080d 100%)",
    stub: "linear-gradient(160deg, #12121d 0%, #09090e 100%)",
    ink: "#f6f6f8",
    muted: "rgba(246,246,248,0.56)",
    rule: "rgba(255,255,255,0.11)",
    accent: "#7cf0c2",
    accentSoft: "rgba(124,240,194,0.12)",
    fiber: "rgba(255,255,255,0.9)",
    emblem:
      "conic-gradient(from calc(var(--tt-mx, 0.5) * 360deg), #ff7ad9, #a78bfa, #7dd3fc, #6ee7b7, #fde68a, #ff7ad9)",
    emblemInk: "#0b0b12",
    foil: "linear-gradient(115deg, transparent 22%, rgba(255,110,210,0.55) 32%, rgba(140,160,255,0.55) 41%, rgba(110,235,215,0.5) 50%, rgba(255,230,120,0.45) 59%, rgba(255,110,210,0.4) 67%, transparent 78%)",
    foilBlend: "color-dodge",
    stampBlend: "screen",
    grain: 0.16,
    serif: false,
  },
  paper: {
    body: "linear-gradient(180deg, #f8f1e2 0%, #efe3c9 100%)",
    stub: "linear-gradient(180deg, #f3e8d0 0%, #eadcbd 100%)",
    ink: "#2a1c13",
    muted: "rgba(42,28,19,0.62)",
    rule: "rgba(42,28,19,0.16)",
    accent: "#c3281d",
    accentSoft: "rgba(195,40,29,0.1)",
    fiber: "rgba(255,255,255,0.95)",
    emblem: "#c3281d",
    emblemInk: "#f8f1e2",
    foil: null,
    foilBlend: "normal",
    stampBlend: "multiply",
    grain: 0.32,
    serif: true,
  },
  gold: {
    body: "radial-gradient(130% 160% at 100% 0%, #2c2312 0%, #100d08 52%, #080705 100%)",
    stub: "linear-gradient(160deg, #15110a 0%, #0a0806 100%)",
    ink: "#f7e9c6",
    muted: "rgba(247,233,198,0.55)",
    rule: "rgba(226,184,74,0.22)",
    accent: "#e6bd52",
    accentSoft: "rgba(230,189,82,0.12)",
    fiber: "rgba(255,245,215,0.92)",
    emblem:
      "conic-gradient(from calc(var(--tt-mx, 0.5) * 360deg), #7a5a17, #f7e08f, #b8892c, #fff4cc, #9a7424, #7a5a17)",
    emblemInk: "#1a1408",
    foil: "linear-gradient(115deg, transparent 30%, rgba(255,226,150,0.45) 44%, rgba(255,255,255,0.6) 50%, rgba(255,226,150,0.45) 56%, transparent 70%)",
    foilBlend: "overlay",
    stampBlend: "screen",
    grain: 0.18,
    serif: false,
  },
};

/* ──────────────────────── Perforation geometry ─────────────────────── */

const NOTCH = 11; // radius of the half-moon cut at each end of the perforation
const TOOTH = 2; // depth of the perforation holes on each side of the line
const STUB_W = 132;
const STUB_W_COMPACT = 104;
const COMPACT_BELOW = 440;

/**
 * Masks one edge of a piece so it has half-moon notches at the corners and a
 * row of punched holes along the perforation. Holes are cut on both pieces, so
 * once torn each side keeps a ragged, toothed edge.
 */
function perforatedEdge(side: "left" | "right"): React.CSSProperties {
  const at = side === "right" ? "100%" : "0%";
  const image = [
    "repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 7px)",
    "linear-gradient(#000, #000)",
    `radial-gradient(circle at ${at} 0%, transparent ${NOTCH}px, #000 ${NOTCH + 0.5}px)`,
    `radial-gradient(circle at ${at} 100%, transparent ${NOTCH}px, #000 ${NOTCH + 0.5}px)`,
  ].join(", ");
  const size = [
    `${TOOTH}px calc(100% - ${NOTCH * 2 + 6}px)`,
    `calc(100% - ${TOOTH}px) 100%`,
    "100% 51%",
    "100% 51%",
  ].join(", ");
  const position = [
    `${side} center`,
    side === "right" ? "left top" : "right top",
    "top",
    "bottom",
  ].join(", ");
  return {
    maskImage: image,
    WebkitMaskImage: image,
    maskSize: size,
    WebkitMaskSize: size,
    maskPosition: position,
    WebkitMaskPosition: position,
    maskRepeat: "no-repeat",
    WebkitMaskRepeat: "no-repeat",
    // (holes ∪ (solid ∩ notches)) — composited bottom-up, layer by layer.
    maskComposite: "add, intersect, add, add",
    WebkitMaskComposite: "source-over, source-in, source-over, source-over",
  };
}

// Hides the part of the stub that swings behind the ticket while it is still attached.
const ATTACHED_CLIP = "polygon(0 -200%, 400% -200%, 400% 300%, -100% 300%, -100% 100%, 0 100%)";

/* ───────────────────────────── Physics ────────────────────────────── */

const SLACK = 8; // px of pull before the paper starts to give
const HOLES = 18; // perforation holes, one haptic tick each
const maxAngle = (p: number) => 1.2 + 11 * Math.pow(p, 1.6);
// A half-torn stub doesn't spring back flat; it keeps a little of its bend.
const restAngle = (p: number) => maxAngle(p) * 0.35 * Math.min(1, p * 3);
const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));

function buzz(pattern: number | number[]) {
  try {
    navigator.vibrate?.(pattern);
  } catch {
    // Vibration is a nicety; some browsers throw without user activation.
  }
}

type Phase = "attached" | "flying" | "torn";

interface Sim {
  phase: Phase;
  progress: number;
  angle: number;
  angleVel: number;
  tension: number;
  jitter: number;
  dragging: boolean;
  startX: number;
  startY: number;
  startProgress: number;
  lastHole: number;
  samples: { x: number; y: number; t: number }[];
  auto: { from: number; start: number; duration: number } | null;
  mx: number;
  my: number;
  tmx: number;
  tmy: number;
  glare: number;
  tGlare: number;
  rx: number;
  ry: number;
  trx: number;
  try: number;
  fx: number;
  fy: number;
  fr: number;
  fvx: number;
  fvy: number;
  fvr: number;
  flightStart: number;
  raf: number;
  lastT: number;
}

const createSim = (torn: boolean): Sim => ({
  phase: torn ? "torn" : "attached",
  progress: torn ? 1 : 0,
  angle: 0,
  angleVel: 0,
  tension: 0,
  jitter: 0,
  dragging: false,
  startX: 0,
  startY: 0,
  startProgress: 0,
  lastHole: 0,
  samples: [],
  auto: null,
  mx: 0.5,
  my: 0.5,
  tmx: 0.5,
  tmy: 0.5,
  glare: 0,
  tGlare: 0,
  rx: 0,
  ry: 0,
  trx: 0,
  try: 0,
  fx: 0,
  fy: 0,
  fr: 0,
  fvx: 0,
  fvy: 0,
  fvr: 0,
  flightStart: 0,
  raf: 0,
  lastT: 0,
});

/* ───────────────────────────── Pieces ─────────────────────────────── */

function Barcode({ value, color, height }: { value: string; color: string; height: number }) {
  const bars = React.useMemo(() => {
    let h = 2166136261;
    const out: number[] = [];
    for (let i = 0; i < 31; i++) {
      h ^= value.charCodeAt(i % Math.max(1, value.length)) + i * 31;
      h = Math.imul(h, 16777619);
      out.push(i % 2 === 0 ? ((h >>> 0) % 3) + 1 : ((h >>> 0) % 2) + 1);
    }
    return out;
  }, [value]);

  return (
    <div aria-hidden="true" className="flex items-stretch" style={{ height }}>
      {bars.map((w, i) => (
        <span key={i} style={{ width: w, background: i % 2 === 0 ? color : "transparent" }} />
      ))}
    </div>
  );
}

function Field({
  label,
  value,
  palette,
  compact,
  className,
}: {
  label: string;
  value: string;
  palette: Palette;
  compact: boolean;
  className?: string;
}) {
  return (
    <div className={cn("min-w-0", className)}>
      <dt className="text-[9.5px] font-semibold uppercase tracking-[0.2em]" style={{ color: palette.muted }}>
        {label}
      </dt>
      <dd className={cn("mt-1 truncate font-medium", compact ? "text-xs" : "text-[13px]")}>{value}</dd>
    </div>
  );
}

/** Foil + glare overlays. They span the whole ticket so the sheen lines up across the perforation. */
function Sheen({ palette, piece }: { palette: Palette; piece: "body" | "stub" }) {
  const span: React.CSSProperties =
    piece === "body"
      ? { left: 0, width: "calc(100% + var(--tt-stub-w, 132px))" }
      : { right: 0, width: "calc(var(--tt-bw, 428) * 1px + 100%)" };
  return (
    <>
      {palette.foil && (
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-y-0"
          style={{
            ...span,
            backgroundImage: palette.foil,
            backgroundSize: "260% 260%",
            backgroundPosition:
              "calc(var(--tt-mx, 0.5) * 100%) calc(var(--tt-my, 0.5) * 100%)",
            mixBlendMode: palette.foilBlend,
            opacity: "calc(0.14 + var(--tt-g, 0) * 0.34)",
          }}
        />
      )}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-y-0"
        style={{
          ...span,
          backgroundImage:
            "radial-gradient(circle at calc(var(--tt-mx, 0.5) * 100%) calc(var(--tt-my, 0.5) * 100%), rgba(255,255,255,0.22), transparent 42%)",
          mixBlendMode: "soft-light",
          opacity: "var(--tt-g, 0)",
        }}
      />
    </>
  );
}

/* ──────────────────────────── Component ───────────────────────────── */

export interface TearTicketProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "children">,
    VariantProps<typeof tearTicketVariants> {
  /** Small brand line in the top-left corner, e.g. your product name. */
  issuer?: string;
  /** Headline printed on the ticket. */
  eventName?: string;
  /** Huge outlined watermark behind the content, e.g. "03" or "VIP". */
  edition?: string;
  /** One line under the headline. */
  tagline?: string;
  attendee?: string;
  date?: string;
  time?: string;
  venue?: string;
  /** Seat, gate or tier, printed on the stub. */
  seat?: string;
  ticketNumber?: string | number;
  /** Label at the top of the stub. */
  admitText?: string;
  /** Text of the ink stamp that lands once the stub is torn off. */
  stampText?: string;
  /** Instruction printed on the stub. */
  hint?: string;
  /** How far, in px, the stub has to be pulled to tear all the way through. */
  tearDistance?: number;
  /** Render as already redeemed: stub gone, stamp applied. */
  defaultTorn?: boolean;
  /** Stop the stub from being torn, e.g. before doors open. */
  disabled?: boolean;
  /** Fires once, the moment the stub fully separates. */
  onTear?: () => void;
  /** Show a "reissue" button after tearing that brings the stub back. Handy for demos. */
  reissuable?: boolean;
}

export function TearTicket({
  className,
  variant,
  issuer,
  eventName = "Admission",
  edition,
  tagline,
  attendee,
  date,
  time,
  venue,
  seat,
  ticketNumber = "0001",
  admitText = "Admit one",
  stampText = "Admitted",
  hint = "Pull to tear",
  tearDistance = 190,
  defaultTorn = false,
  disabled = false,
  onTear,
  reissuable = false,
  style,
  onPointerMove,
  onPointerLeave,
  ...props
}: TearTicketProps) {
  const palette = PALETTES[variant ?? "holo"];
  const number = String(ticketNumber);

  const [phase, setPhase] = React.useState<Phase>(defaultTorn ? "torn" : "attached");
  const [compact, setCompact] = React.useState(false);

  const rootRef = React.useRef<HTMLDivElement>(null);
  const tiltRef = React.useRef<HTMLDivElement>(null);
  const bodyRef = React.useRef<HTMLDivElement>(null);
  const stubRef = React.useRef<HTMLDivElement>(null);
  const stampRef = React.useRef<HTMLDivElement>(null);
  const sim = React.useRef<Sim>(createSim(defaultTorn));
  const stepRef = React.useRef<(now: number) => void>(() => {});
  const reducedRef = React.useRef(false);
  const reissuedRef = React.useRef(false);
  const latest = React.useRef({ onTear, tearDistance });

  React.useEffect(() => {
    latest.current = { onTear, tearDistance };
  });

  /** Push the simulation into CSS variables. No React render per frame. */
  const paint = React.useCallback(() => {
    const root = rootRef.current;
    if (!root) return;
    const s = sim.current;
    root.style.setProperty("--tt-p", s.progress.toFixed(4));
    root.style.setProperty("--tt-a", (s.angle + s.jitter).toFixed(3));
    root.style.setProperty("--tt-k", s.tension.toFixed(3));
    root.style.setProperty("--tt-mx", s.mx.toFixed(4));
    root.style.setProperty("--tt-my", s.my.toFixed(4));
    root.style.setProperty("--tt-g", s.glare.toFixed(3));
    if (tiltRef.current) {
      tiltRef.current.style.transform = `perspective(1100px) rotateX(${s.rx.toFixed(3)}deg) rotateY(${s.ry.toFixed(3)}deg)`;
    }
  }, []);

  const kick = React.useCallback(() => {
    const s = sim.current;
    if (!s.raf) s.raf = requestAnimationFrame((t) => stepRef.current(t));
  }, []);

  const crossHoles = React.useCallback(() => {
    const s = sim.current;
    const hole = Math.floor(s.progress * HOLES);
    if (hole > s.lastHole) {
      s.lastHole = hole;
      s.jitter = (Math.random() - 0.5) * 0.9; // tiny stutter as each hole rips
      buzz(5);
    }
  }, []);

  const detach = React.useCallback(
    (vx: number, vy: number) => {
      const s = sim.current;
      if (s.phase !== "attached") return;
      const a = s.angle + s.jitter;
      const stub = stubRef.current;
      if (stub) {
        // The stub was rotating about its bottom-left corner (the last fibre).
        // Re-express that as rotation about its centre plus an offset, so the
        // throw continues without a jump and spins naturally.
        const w = stub.offsetWidth;
        const h = stub.offsetHeight;
        const th = (a * Math.PI) / 180;
        const ox = -w / 2;
        const oy = h / 2;
        s.fx = ox - (ox * Math.cos(th) - oy * Math.sin(th)) + s.tension * 3;
        s.fy = oy - (ox * Math.sin(th) + oy * Math.cos(th));
        stub.getAnimations().forEach((anim) => anim.cancel());
        stub.style.transformOrigin = "50% 50%";
        stub.style.transform = `translate3d(${s.fx}px, ${s.fy}px, 0) rotate(${a}deg)`;
        stub.style.filter = "drop-shadow(0 18px 24px rgba(0,0,0,0.35))";
      }
      s.phase = "flying";
      s.dragging = false;
      s.auto = null;
      s.progress = 1;
      s.fr = a;
      s.fvx = clamp(vx, 3, 28);
      s.fvy = clamp(vy, -20, 6) - 4;
      s.fvr = 1.6 + s.fvx * 0.22;
      s.flightStart = performance.now();
      s.tension = 0;
      s.jitter = 0;
      buzz([14, 40, 22]);
      setPhase("flying");
      latest.current.onTear?.();
      kick();
    },
    [kick]
  );

  const step = React.useCallback(
    (now: number) => {
      const s = sim.current;
      s.raf = 0;
      const dt = s.lastT ? Math.min(3, (now - s.lastT) / 16.667) : 1;
      s.lastT = now;
      const ease = (rate: number) => 1 - Math.pow(1 - rate, dt);
      let busy = false;

      // Hover: tilt, foil position, glare.
      s.mx += (s.tmx - s.mx) * ease(0.14);
      s.my += (s.tmy - s.my) * ease(0.14);
      s.glare += (s.tGlare - s.glare) * ease(0.1);
      s.rx += (s.trx - s.rx) * ease(0.12);
      s.ry += (s.try - s.ry) * ease(0.12);
      if (
        Math.abs(s.tmx - s.mx) + Math.abs(s.tmy - s.my) + Math.abs(s.tGlare - s.glare) > 0.002 ||
        Math.abs(s.trx - s.rx) + Math.abs(s.try - s.ry) > 0.01
      ) {
        busy = true;
      }

      if (s.phase === "attached") {
        if (s.auto) {
          // Keyboard / programmatic tear: run the perforation out on a curve.
          const t = Math.min(1, (now - s.auto.start) / s.auto.duration);
          const e = t * t * (3 - 2 * t);
          s.progress = s.auto.from + (1 - s.auto.from) * e;
          s.tension = Math.sin((t * Math.PI) / 2) * 0.9;
          s.angle = Math.max(restAngle(s.progress), maxAngle(s.progress) * 0.85 * s.tension);
          crossHoles();
          busy = true;
          if (t >= 1) detach(9, -7);
        } else if (!s.dragging) {
          // Let go: the stub springs back to its resting bend with a little wobble.
          const rest = restAngle(s.progress);
          s.angleVel += ((rest - s.angle) * 0.16 - s.angleVel * 0.3) * dt;
          s.angle += s.angleVel * dt;
          s.tension *= Math.pow(0.82, dt);
          s.jitter *= Math.pow(0.7, dt);
          if (
            Math.abs(rest - s.angle) > 0.005 ||
            Math.abs(s.angleVel) > 0.005 ||
            s.tension > 0.003 ||
            Math.abs(s.jitter) > 0.003
          ) {
            busy = true;
          } else {
            s.angle = rest;
            s.angleVel = 0;
            s.tension = 0;
            s.jitter = 0;
          }
        } else {
          s.jitter *= Math.pow(0.7, dt);
          if (Math.abs(s.jitter) > 0.003) busy = true;
        }
      } else if (s.phase === "flying") {
        const stub = stubRef.current;
        const age = now - s.flightStart;
        if (stub && !reducedRef.current) {
          s.fvy += 0.65 * dt;
          s.fvx *= Math.pow(0.992, dt);
          s.fx += s.fvx * dt;
          s.fy += s.fvy * dt;
          s.fr += s.fvr * dt;
          stub.style.transform = `translate3d(${s.fx}px, ${s.fy}px, 0) rotate(${s.fr}deg)`;
        }
        const fadeAfter = reducedRef.current ? 0 : 620;
        const fade = age < fadeAfter ? 1 : Math.max(0, 1 - (age - fadeAfter) / 420);
        if (stub) stub.style.opacity = String(fade);
        if (fade > 0) {
          busy = true;
        } else {
          s.phase = "torn";
          setPhase("torn");
        }
      }

      paint();
      if (busy) kick();
      else s.lastT = 0;
    },
    [crossHoles, detach, kick, paint]
  );

  React.useEffect(() => {
    stepRef.current = step;
  }, [step]);

  const nudge = React.useCallback(() => {
    const s = sim.current;
    const stub = stubRef.current;
    if (!stub || s.phase !== "attached" || s.dragging || s.auto || s.progress > 0) return;
    if (reducedRef.current || stub.getAnimations().length > 0) return;
    const o = "0% 100%";
    stub.animate(
      [
        { transform: "rotate(0deg)", transformOrigin: o },
        { transform: "translateX(1px) rotate(2.6deg)", transformOrigin: o, offset: 0.3 },
        { transform: "rotate(-0.8deg)", transformOrigin: o, offset: 0.6 },
        { transform: "rotate(0.3deg)", transformOrigin: o, offset: 0.82 },
        { transform: "rotate(0deg)", transformOrigin: o },
      ],
      { duration: 900, easing: "ease-in-out" }
    );
  }, []);

  const autoTear = React.useCallback(() => {
    const s = sim.current;
    if (s.phase !== "attached" || s.auto || s.dragging) return;
    stubRef.current?.getAnimations().forEach((anim) => anim.cancel());
    s.auto = { from: s.progress, start: performance.now(), duration: 520 + (1 - s.progress) * 380 };
    kick();
  }, [kick]);

  const reissue = React.useCallback(() => {
    const s = sim.current;
    Object.assign(s, {
      phase: "attached",
      progress: 0,
      angle: 0,
      angleVel: 0,
      tension: 0,
      jitter: 0,
      lastHole: 0,
      auto: null,
      dragging: false,
    } satisfies Partial<Sim>);
    reissuedRef.current = true;
    paint();
    setPhase("attached");
  }, [paint]);

  /* ── Effects ── */

  React.useEffect(() => {
    reducedRef.current = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
    paint();
    const s = sim.current;
    const id = window.setTimeout(nudge, 1100);
    return () => {
      window.clearTimeout(id);
      if (s.raf) cancelAnimationFrame(s.raf);
      s.raf = 0;
    };
  }, [nudge, paint]);

  React.useEffect(() => {
    const root = rootRef.current;
    const body = bodyRef.current;
    if (!root || typeof ResizeObserver === "undefined") return;
    const measure = () => {
      setCompact(root.offsetWidth < COMPACT_BELOW);
      if (body) root.style.setProperty("--tt-bw", String(body.offsetWidth));
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(root);
    if (body) ro.observe(body);
    return () => ro.disconnect();
  }, []);

  // Stamp slam + a small jolt through the ticket when it lands.
  React.useEffect(() => {
    if (phase !== "flying") return;
    const stamp = stampRef.current;
    const body = bodyRef.current;
    if (reducedRef.current) {
      stamp?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200, fill: "backwards" });
      return;
    }
    stamp?.animate(
      [
        { transform: "rotate(-12deg) scale(2.3)", opacity: 0, filter: "blur(5px)" },
        { transform: "rotate(-12deg) scale(0.93)", opacity: 1, filter: "blur(0px)", offset: 0.62 },
        { transform: "rotate(-12deg) scale(1.03)", opacity: 1, filter: "blur(0px)", offset: 0.82 },
        { transform: "rotate(-12deg) scale(1)", opacity: 1, filter: "blur(0px)" },
      ],
      { duration: 480, delay: 200, easing: "cubic-bezier(.2,.7,.3,1)", fill: "backwards" }
    );
    body?.animate(
      [
        { transform: "none" },
        { transform: "translate(1.5px, 1px) scale(0.994)" },
        { transform: "translate(-1px, 0)" },
        { transform: "none" },
      ],
      { duration: 240, delay: 490, easing: "ease-out" }
    );
  }, [phase]);

  // Stub slides back in after a reissue.
  React.useEffect(() => {
    if (phase !== "attached" || !reissuedRef.current) return;
    reissuedRef.current = false;
    const o = "0% 100%";
    stubRef.current?.animate(
      [
        { opacity: 0, transform: "translate3d(28px, -12px, 0) rotate(9deg)", transformOrigin: o },
        { opacity: 1, transform: "none", transformOrigin: o },
      ],
      { duration: 560, easing: "cubic-bezier(.2,.9,.25,1.15)" }
    );
  }, [phase]);

  const fadeInRef = React.useCallback((el: HTMLButtonElement | null) => {
    el?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, delay: 150, fill: "backwards" });
  }, []);

  /* ── Pointer handling ── */

  const handleRootPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    onPointerMove?.(e);
    const root = rootRef.current;
    if (!root) return;
    const s = sim.current;
    const r = root.getBoundingClientRect();
    s.tmx = clamp((e.clientX - r.left) / r.width, 0, 1);
    s.tmy = clamp((e.clientY - r.top) / r.height, 0, 1);
    s.tGlare = 1;
    const tilt = e.pointerType === "mouse" && !s.dragging && !s.auto && !reducedRef.current;
    s.trx = tilt ? (0.5 - s.tmy) * 9 : 0;
    s.try = tilt ? (s.tmx - 0.5) * 11 : 0;
    kick();
  };

  const handleRootPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
    onPointerLeave?.(e);
    const s = sim.current;
    if (s.dragging) return;
    s.tmx = 0.5;
    s.tmy = 0.5;
    s.tGlare = 0;
    s.trx = 0;
    s.try = 0;
    kick();
  };

  const handleStubPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
    const s = sim.current;
    if (s.phase !== "attached" || s.auto) return;
    if (e.pointerType === "mouse" && e.button !== 0) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    stubRef.current?.getAnimations().forEach((anim) => anim.cancel());
    s.dragging = true;
    s.startX = e.clientX;
    s.startY = e.clientY;
    s.startProgress = s.progress;
    s.samples = [{ x: e.clientX, y: e.clientY, t: performance.now() }];
    s.angleVel = 0;
    s.trx = 0;
    s.try = 0;
    kick();
  };

  const handleStubPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    const s = sim.current;
    if (!s.dragging) return;
    const dx = e.clientX - s.startX;
    const dy = e.clientY - s.startY;
    // Pulling away from the ticket (right) tears fastest; up/down helps too.
    const pull = Math.max(0, dx) + Math.abs(dy) * 0.5;
    const target =
      s.startProgress + Math.max(0, pull - SLACK) / Math.max(40, latest.current.tearDistance);
    if (target > s.progress) {
      s.progress = Math.min(1, target);
      crossHoles();
    }
    s.tension = Math.tanh(pull / 70);
    s.angle = Math.max(restAngle(s.progress), maxAngle(s.progress) * Math.tanh(pull / 55));

    const now = performance.now();
    s.samples.push({ x: e.clientX, y: e.clientY, t: now });
    if (s.samples.length > 6) s.samples.shift();

    if (s.progress >= 1) {
      const first = s.samples[0] ?? { x: e.clientX, y: e.clientY, t: now - 16 };
      const span = Math.max(8, now - first.t);
      try {
        e.currentTarget.releasePointerCapture(e.pointerId);
      } catch {
        // Capture may already be gone.
      }
      detach(((e.clientX - first.x) / span) * 16.667, ((e.clientY - first.y) / span) * 16.667);
      return;
    }
    kick();
  };

  const handleStubPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
    const s = sim.current;
    if (!s.dragging) return;
    s.dragging = false;
    const moved = Math.abs(e.clientX - s.startX) + Math.abs(e.clientY - s.startY);
    if (moved < 4 && s.progress === 0) nudge(); // a tap shows which way to pull
    kick();
  };

  const handleStubKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    const s = sim.current;
    if (s.phase !== "attached" || s.dragging || s.auto) return;
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      autoTear();
    } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
      e.preventDefault();
      s.progress = Math.min(1, s.progress + 0.15);
      s.tension = 0.6;
      s.angleVel += 1.4;
      crossHoles();
      if (s.progress >= 1) detach(8, -6);
      else kick();
    }
  };

  /* ── Render ── */

  const stubW = compact ? STUB_W_COMPACT : STUB_W;
  const hasFields = Boolean(attendee || date || time);
  const isTorn = phase !== "attached";

  return (
    <div
      ref={rootRef}
      className={cn(tearTicketVariants({ variant }), className)}
      style={{ ...style, "--tt-stub-w": `${stubW}px` } as React.CSSProperties}
      onPointerMove={handleRootPointerMove}
      onPointerLeave={handleRootPointerLeave}
      {...props}
    >
      {/* Slides the ticket back to centre once the stub is gone. */}
      <div
        style={{
          transform: isTorn ? "translateX(calc(var(--tt-stub-w) / 2))" : "translateX(0px)",
          transition: "transform 700ms cubic-bezier(.2,.8,.2,1) 120ms",
        }}
      >
        <div
          ref={tiltRef}
          className="relative flex w-full items-stretch"
          style={{
            color: palette.ink,
            minHeight: compact ? 184 : 208,
            filter: "drop-shadow(0 22px 28px rgba(0,0,0,0.22)) drop-shadow(0 2px 4px rgba(0,0,0,0.18))",
            willChange: "transform",
          }}
        >
          {/* ── Body ── */}
          <div
            ref={bodyRef}
            className="relative min-w-0 flex-1 overflow-hidden rounded-l-[18px]"
            style={{ background: palette.body, ...perforatedEdge("right") }}
          >
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-0"
              style={{
                backgroundImage: guilloche(palette.rule),
                backgroundSize: "160px 28px",
                maskImage: "linear-gradient(100deg, transparent 15%, #000 85%)",
                WebkitMaskImage: "linear-gradient(100deg, transparent 15%, #000 85%)",
              }}
            />
            {edition && (
              <span
                aria-hidden="true"
                className={cn(
                  "pointer-events-none absolute right-3 font-black leading-none tracking-tighter",
                  compact ? "-bottom-4 text-[96px]" : "-bottom-7 text-[150px]"
                )}
                style={{ color: "transparent", WebkitTextStroke: `1px ${palette.rule}` }}
              >
                {edition}
              </span>
            )}
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-0"
              style={{ backgroundImage: GRAIN, opacity: palette.grain, mixBlendMode: "overlay" }}
            />
            <Sheen palette={palette} piece="body" />

            <div className={cn("relative flex h-full flex-col", compact ? "gap-3 p-4 pr-5" : "gap-5 p-6 pr-7")}>
              <div className="flex items-center justify-between gap-3">
                <div className="flex min-w-0 items-center gap-2.5">
                  <span
                    aria-hidden="true"
                    className="grid h-7 w-7 shrink-0 place-items-center rounded-[9px] text-[13px] font-black"
                    style={{
                      background: palette.emblem,
                      color: palette.emblemInk,
                      boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.28), 0 4px 14px rgba(0,0,0,0.25)",
                    }}
                  >
                    ✦
                  </span>
                  {issuer && (
                    <span
                      className="truncate text-[11px] font-semibold uppercase tracking-[0.24em]"
                      style={{ color: palette.muted }}
                    >
                      {issuer}
                    </span>
                  )}
                </div>
                {venue && !compact && (
                  <span
                    className="truncate font-mono text-[10px] uppercase tracking-[0.16em]"
                    style={{ color: palette.muted }}
                  >
                    {venue}
                  </span>
                )}
              </div>

              <div className="min-w-0">
                <h3
                  className={cn(
                    "font-semibold leading-[1.04] tracking-tight",
                    palette.serif && "font-serif",
                    compact ? "text-[22px]" : "text-[30px]"
                  )}
                >
                  {eventName}
                </h3>
                {tagline && (
                  <p
                    className={cn("mt-1.5 leading-snug", compact ? "text-xs" : "text-[13px]")}
                    style={{ color: palette.muted }}
                  >
                    {tagline}
                  </p>
                )}
              </div>

              {hasFields && (
                <dl
                  className={cn(
                    "mt-auto grid gap-x-3 gap-y-2.5 border-t pt-3.5",
                    compact ? "grid-cols-2" : "grid-cols-3"
                  )}
                  style={{ borderColor: palette.rule }}
                >
                  {attendee && (
                    <Field
                      label="Attendee"
                      value={attendee}
                      palette={palette}
                      compact={compact}
                      className={compact ? "col-span-2" : undefined}
                    />
                  )}
                  {date && <Field label="Date" value={date} palette={palette} compact={compact} />}
                  {time && <Field label="Time" value={time} palette={palette} compact={compact} />}
                </dl>
              )}
            </div>

            {/* Exposed paper fibres along the torn part of the perforation. */}
            <div
              aria-hidden="true"
              className="pointer-events-none absolute right-0 top-0 w-1"
              style={{
                height: isTorn ? "100%" : "calc(var(--tt-p, 0) * 100%)",
                background: `linear-gradient(to left, ${palette.fiber}, transparent)`,
              }}
            />
            {/* Stress whitening at the tip of the tear. */}
            {!isTorn && (
              <div
                aria-hidden="true"
                className="pointer-events-none absolute -right-2.5 h-5 w-5 rounded-full"
                style={{
                  top: "calc(var(--tt-p, 0) * 100% - 10px)",
                  background: `radial-gradient(circle, ${palette.fiber}, transparent 65%)`,
                  opacity: "calc(var(--tt-k, 0) * 0.9)",
                }}
              />
            )}

            {isTorn && (
              <div
                aria-hidden="true"
                className="pointer-events-none absolute inset-0 z-10 flex items-center justify-end pr-[9%]"
              >
                <div
                  ref={stampRef}
                  className="rounded-lg p-[3px] font-mono uppercase"
                  style={{
                    transform: "rotate(-12deg)",
                    color: palette.accent,
                    border: `3px solid ${palette.accent}`,
                    mixBlendMode: palette.stampBlend,
                    maskImage: INK,
                    WebkitMaskImage: INK,
                    textShadow: `0 0 1px ${palette.accent}`,
                  }}
                >
                  <div
                    className={cn("rounded-[5px] text-center", compact ? "px-2 py-1" : "px-3 py-1.5")}
                    style={{ border: `1px solid ${palette.accent}` }}
                  >
                    <div
                      className={cn(
                        "font-black leading-none tracking-[0.16em]",
                        compact ? "text-base" : "text-[22px]"
                      )}
                    >
                      {stampText}
                    </div>
                    <div className="mt-1 text-[8.5px] font-semibold tracking-[0.28em] opacity-85">
                      No. {number}
                      {date ? ` · ${date}` : ""}
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* ── Stub ── */}
          <div
            className="relative shrink-0"
            style={{ width: "var(--tt-stub-w)", clipPath: isTorn ? undefined : ATTACHED_CLIP }}
          >
            {phase !== "torn" && (
              <div
                ref={stubRef}
                className="absolute inset-0 z-10"
                style={{
                  transformOrigin: "0 calc(var(--tt-p, 0) * 100%)",
                  transform:
                    "translate3d(calc(var(--tt-k, 0) * 3px), 0, 0) rotate(calc(var(--tt-a, 0) * 1deg))",
                  filter:
                    "drop-shadow(calc(var(--tt-k, 0) * 4px) calc(var(--tt-k, 0) * 9px) calc(var(--tt-k, 0) * 12px) rgba(0,0,0,0.3))",
                  willChange: "transform",
                }}
              >
                <div
                  className="relative h-full overflow-hidden rounded-r-[18px]"
                  style={{ background: palette.stub, ...perforatedEdge("left") }}
                >
                  <div
                    aria-hidden="true"
                    className="pointer-events-none absolute inset-0"
                    style={{ backgroundImage: GRAIN, opacity: palette.grain, mixBlendMode: "overlay" }}
                  />
                  <Sheen palette={palette} piece="stub" />
                  {/* Light catching the flap as it lifts. */}
                  <div
                    aria-hidden="true"
                    className="pointer-events-none absolute inset-0"
                    style={{
                      background:
                        "linear-gradient(to bottom, rgba(255,255,255,calc(var(--tt-k, 0) * 0.06)), transparent calc(var(--tt-p, 0) * 100%))",
                    }}
                  />
                  <div
                    aria-hidden="true"
                    className="pointer-events-none absolute left-0 top-0 w-1"
                    style={{
                      height: "calc(var(--tt-p, 0) * 100%)",
                      background: `linear-gradient(to right, ${palette.fiber}, transparent)`,
                    }}
                  />
                  <span
                    aria-hidden="true"
                    className="pointer-events-none absolute left-[7px] top-1/2 whitespace-nowrap text-[6px] font-semibold uppercase tracking-[0.32em]"
                    style={{
                      color: palette.muted,
                      opacity: 0.55,
                      writingMode: "vertical-rl",
                      transform: "translateY(-50%) rotate(180deg)",
                    }}
                  >
                    Valid for one entry · Non-transferable
                  </span>

                  <div
                    className={cn(
                      "relative flex h-full flex-col items-center justify-between text-center",
                      compact ? "gap-2 py-4 pl-4 pr-2" : "gap-3 py-5 pl-5 pr-3"
                    )}
                  >
                    <span
                      className={cn(
                        "whitespace-nowrap font-semibold uppercase",
                        compact ? "text-[8.5px] tracking-[0.16em]" : "text-[9.5px] tracking-[0.3em]"
                      )}
                      style={{ color: palette.muted }}
                    >
                      {admitText}
                    </span>
                    <div>
                      <div
                        className="font-mono text-[9px] uppercase tracking-[0.24em]"
                        style={{ color: palette.muted }}
                      >
                        No.
                      </div>
                      <div
                        className={cn(
                          "font-mono font-semibold tabular-nums leading-tight",
                          compact ? "text-base" : "text-xl"
                        )}
                      >
                        {number}
                      </div>
                    </div>
                    <Barcode value={number} color={palette.ink} height={compact ? 26 : 34} />
                    {seat && (
                      <span
                        className={cn(
                          "font-mono uppercase leading-tight",
                          compact ? "text-[8px] tracking-[0.04em]" : "text-[9px] tracking-[0.14em]"
                        )}
                        style={{ color: palette.muted }}
                      >
                        {seat}
                      </span>
                    )}
                    {!disabled && (
                      <span
                        className={cn(
                          "inline-flex items-center gap-1 whitespace-nowrap rounded-full py-[3px] font-semibold uppercase",
                          compact ? "px-1.5 text-[8px] tracking-[0.06em]" : "px-2 text-[9px] tracking-[0.12em]"
                        )}
                        style={{
                          color: palette.accent,
                          background: palette.accentSoft,
                          opacity: "calc(1 - var(--tt-p, 0) * 5)",
                        }}
                      >
                        {!compact && <Scissors aria-hidden="true" className="h-3 w-3" />}
                        {hint}
                      </span>
                    )}
                  </div>
                </div>
              </div>
            )}

            {phase === "attached" && (
              <div
                role="button"
                tabIndex={disabled ? -1 : 0}
                aria-disabled={disabled || undefined}
                aria-label={`Tear off the stub to redeem ticket ${number}`}
                className={cn(
                  "absolute inset-0 z-20 touch-none rounded-r-[18px] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                  disabled ? "cursor-not-allowed" : "cursor-grab active:cursor-grabbing"
                )}
                onPointerDown={disabled ? undefined : handleStubPointerDown}
                onPointerMove={disabled ? undefined : handleStubPointerMove}
                onPointerUp={disabled ? undefined : handleStubPointerUp}
                onPointerCancel={disabled ? undefined : handleStubPointerUp}
                onPointerEnter={disabled ? undefined : (e) => e.pointerType === "mouse" && nudge()}
                onKeyDown={disabled ? undefined : handleStubKeyDown}
              />
            )}

            {phase === "torn" && reissuable && (
              <button
                ref={fadeInRef}
                type="button"
                onClick={reissue}
                title="Reissue ticket"
                className="absolute z-20 grid h-8 w-8 place-items-center rounded-full border bg-background text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                style={{ left: "25%", top: "50%", transform: "translate(-50%, -50%)" }}
              >
                <RotateCcw aria-hidden="true" className="h-3.5 w-3.5" />
                <span className="sr-only">Reissue ticket</span>
              </button>
            )}
          </div>
        </div>
      </div>

      <span className="sr-only" aria-live="polite">
        {isTorn ? `${stampText}. Ticket ${number} redeemed.` : ""}
      </span>
    </div>
  );
}

export { tearTicketVariants };
Tear-off Ticket

Launch Week

Launch Week
