"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import Marquee, { type Anchor } from "./Marquee";

export { geometry, type Edge, type Anchor } from "./Marquee";

/**
 * A real ticket is printed in whatever the press had: a fat condensed display
 * face, an engraved serif on the stub, a mono serial. Mixing them is the point.
 */
const FONTS = {
  display: 'Impact, Haettenschweiler, "Arial Narrow", sans-serif',
  serif: 'Georgia, "Times New Roman", Times, serif',
  mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
  sans: 'ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif',
};

export const TICKET = {
  green: "#3F5F4B",
  cream: "#F6F1E7",
  paper: "#FBF8F1",
  ink: "#242823",
  muted: "#74776E",
  orange: "#FF6400",
  black: "#0B0B0B",
  navy: "#1C2B4A",
  clay: "#9C3B1B",
};

/** One large bite at a ticket seam. */
const seamNotch = (
  x: string,
  y: "0" | "100%",
  h: number
): React.CSSProperties => {
  const r = Math.max(3, h * 0.085);
  const bite = `radial-gradient(circle ${r}px at ${x} ${y}, transparent 98%, #000 100%)`;
  return {
    height: "100%",
    width: "100%",
    maskImage: bite,
    WebkitMaskImage: bite,
    maskSize: "100% 100%",
    WebkitMaskSize: "100% 100%",
    maskRepeat: "no-repeat",
    WebkitMaskRepeat: "no-repeat",
  };
};

/** Small punched holes running down a tear line. */
const perforation = (x: string, h: number): React.CSSProperties => {
  const r = Math.max(1.5, h * 0.023);
  const pitch = Math.max(6, h * 0.125);
  const holes = `radial-gradient(circle ${r}px at ${x} ${
    pitch / 2
  }px, transparent 96%, #000 100%)`;
  return {
    height: "100%",
    width: "100%",
    maskImage: holes,
    WebkitMaskImage: holes,
    maskSize: `100% ${pitch}px`,
    WebkitMaskSize: `100% ${pitch}px`,
    maskRepeat: "repeat-y",
    WebkitMaskRepeat: "repeat-y",
  };
};

const TICKET_ASPECT = 3.75;
const CONTACT_WIDTH = 0.88;
/** Space between torn-off tickets, so each seam shows half a punched hole. */
const TICKET_GAP = 0.05;

/** Notches and punched holes ride on the ticket itself, so they travel with it. */
function TicketShape({
  h,
  width,
  gap,
  children,
}: {
  h: number;
  width: number;
  gap: number;
  children: React.ReactNode;
}) {
  const contactStart = `${width - h * CONTACT_WIDTH}px`;
  const seams = ["0px", contactStart, "100%"];
  const cuts = seams.flatMap((x) =>
    (["0", "100%"] as const).map((y) => ({ x, y }))
  );
  const notched = cuts.reduceRight<React.ReactNode>(
    (child, { x, y }) => (
      <div className="h-full w-full" style={seamNotch(x, y, h)}>
        {child}
      </div>
    ),
    children
  );
  const shaped = seams.reduceRight<React.ReactNode>(
    (child, x) => (
      <div className="h-full w-full" style={perforation(x, h)}>
        {child}
      </div>
    ),
    notched
  );

  return (
    <div
      data-ticket
      className="h-full shrink-0"
      style={{ width, marginRight: h * gap }}
    >
      {shaped}
    </div>
  );
}

/** Fixed, so SSR agrees. */
const BARS = [
  3, 1, 2, 4, 1, 1, 3, 2, 1, 4, 1, 2, 2, 1, 3, 1, 1, 2, 4, 1, 2, 3, 1, 1,
];

export type TicketFace = {
  title?: string;
  kicker?: string;
  /** Set in the ink block at the tear-off end. */
  stub?: string;
  /** Runs up the outer edge. */
  rail?: string;
  serial?: string;
  meta?: [string, string][];
};

const FACE: Required<TicketFace> = {
  title: "Admit One",
  kicker: "Hundred — interface components",
  stub: "hundred",
  rail: "Keep this stub",
  serial: "No. 0014 · MMXXVI",
  meta: [
    ["Series", "Interface"],
    ["Seat", "A–14"],
  ],
};

/** Every measurement is a multiple of `h`, so one prop sizes the face. */
function Ticket({
  h,
  width,
  gap,
  color,
  ink,
  title,
  kicker,
  stub,
  rail,
  serial,
  meta,
}: Required<TicketFace> & {
  h: number;
  width: number;
  gap: number;
  color: string;
  ink: string;
}) {
  const px = (f: number) => `${h * f}px`;
  const caps = (f: number, tracking = "0.26em"): React.CSSProperties => ({
    fontSize: px(f),
    letterSpacing: tracking,
    textTransform: "uppercase",
    whiteSpace: "nowrap",
    lineHeight: 1.1,
  });
  const upright: React.CSSProperties = {
    writingMode: "vertical-rl",
    transform: "rotate(180deg)",
  };
  // Impact sets taller and narrower than the old stack, so the steps come down.
  const titleSize = title.length > 13 ? 0.2 : title.length > 9 ? 0.235 : 0.27;

  return (
    <TicketShape h={h} width={width} gap={gap}>
      <div
        className="flex h-full w-full items-stretch"
        style={{ background: color, color: ink }}
      >
        <div
          className="flex min-w-0 flex-1 overflow-hidden"
          style={{
            margin: `${px(0.075)} ${px(0.09)}`,
            border: `${Math.max(1, h * 0.022)}px solid currentColor`,
            borderRadius: px(0.09),
          }}
        >
          <div
            className="flex shrink-0 items-center justify-center"
            style={{ width: px(0.56), background: ink, color }}
          >
            <span
              style={{
                ...caps(0.115, "0.06em"),
                ...upright,
                fontFamily: FONTS.display,
              }}
            >
              {stub}
            </span>
          </div>

          <div
            className="flex min-w-0 flex-1 flex-col justify-center"
            style={{ paddingLeft: px(0.18), paddingRight: px(0.2) }}
          >
            <div
              className="overflow-hidden text-ellipsis"
              style={{
                ...caps(0.04, "0.24em"),
                fontFamily: FONTS.sans,
                opacity: 0.5,
              }}
            >
              {kicker}
            </div>
            <div
              className="overflow-hidden text-ellipsis"
              style={{
                fontFamily: FONTS.display,
                fontSize: px(titleSize),
                fontWeight: 800,
                letterSpacing: "0.005em",
                lineHeight: 1,
                marginTop: px(0.045),
                whiteSpace: "nowrap",
              }}
            >
              {title}
            </div>
            <div
              style={{
                height: 1,
                background: "currentColor",
                opacity: 0.25,
                marginTop: px(0.055),
              }}
            />
            <div className="flex" style={{ gap: px(0.26), marginTop: px(0.05) }}>
              {meta.map(([k, v]) => (
                <div key={k}>
                  <div
                    style={{
                      ...caps(0.038, "0.2em"),
                      fontFamily: FONTS.sans,
                      opacity: 0.48,
                    }}
                  >
                    {k}
                  </div>
                  <div
                    style={{
                      fontFamily: FONTS.serif,
                      fontSize: px(0.078),
                      letterSpacing: "0.01em",
                      whiteSpace: "nowrap",
                    }}
                  >
                    {v}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* The contact stub tears away along this punched seam. */}
        <div
          className="shrink-0"
          style={{
            width: 0,
            borderLeft: `${Math.max(1, h * 0.012)}px dashed currentColor`,
            opacity: 0.25,
            margin: `${px(0.12)} 0`,
          }}
        />

        <div className="flex shrink-0" style={{ width: px(CONTACT_WIDTH) }}>
          <div
            className="flex items-center justify-center"
            style={{ width: px(0.34) }}
          >
            <span
              style={{
                ...caps(0.082, "0.3em"),
                ...upright,
                fontFamily: FONTS.serif,
                opacity: 0.68,
              }}
            >
              {rail}
            </span>
          </div>

          <div
            className="flex items-center justify-center"
            style={{ width: px(0.54), gap: px(0.06) }}
          >
            <div
              className="flex flex-col justify-center"
              style={{ width: px(0.25), gap: px(0.018) }}
            >
              {BARS.map((w, i) => (
                <div
                  key={i}
                  style={{
                    height: px(0.014 * w),
                    background: "currentColor",
                  }}
                />
              ))}
            </div>
            <span
              style={{
                ...caps(0.05, "0.1em"),
                ...upright,
                fontFamily: FONTS.mono,
                opacity: 0.48,
              }}
            >
              {serial}
            </span>
          </div>
        </div>
      </div>
    </TicketShape>
  );
}

export type TicketMarqueeProps = TicketFace & {
  start: Anchor;
  /** Must not be the same point as `start`. */
  end: Anchor;
  direction?: "forward" | "reverse";
  /** Ticket thickness in px; every other measurement follows from it. */
  height?: number;
  /** Px per second, so a long strip and a short one read at the same pace. */
  speed?: number;
  delay?: number;
  layer?: number;
  /** Paper. */
  color?: string;
  /** Type, rules, and the tear-off block. */
  ink?: string;
  /** Space between tickets, as a multiple of `height`. 0 joins them up. */
  gap?: number;
};

/** A marquee whose tile is one tear-off ticket, sized by `height`. */
export default function TicketMarquee({
  start,
  end,
  direction = "forward",
  height = 84,
  speed = 90,
  delay = 0,
  layer = 0,
  color = TICKET.green,
  ink = TICKET.cream,
  gap = TICKET_GAP,
  ...face
}: TicketMarqueeProps) {
  const tile = height * TICKET_ASPECT;

  return (
    <Marquee
      start={start}
      end={end}
      direction={direction}
      thickness={height}
      tileWidth={tile + height * gap}
      speed={speed}
      delay={delay}
      layer={layer}
      tile={(i) => (
        <Ticket
          key={i}
          h={height}
          width={tile}
          gap={gap}
          color={color}
          ink={ink}
          {...FACE}
          {...face}
        />
      )}
    />
  );
}

/* ---------------------------------------------------------------- demo --- */

const SCHEMES = [
  { color: TICKET.orange, ink: TICKET.black },
  { color: TICKET.green, ink: TICKET.cream },
  { color: TICKET.black, ink: TICKET.orange },
  { color: TICKET.cream, ink: TICKET.green },
  { color: TICKET.navy, ink: TICKET.cream },
  { color: TICKET.cream, ink: TICKET.orange },
  { color: TICKET.clay, ink: TICKET.cream },
  { color: TICKET.paper, ink: TICKET.ink },
  { color: TICKET.ink, ink: TICKET.cream },
];

const SHOWS: TicketFace[] = [
  {},
  {
    title: "Second House",
    stub: "no. 02",
    rail: "Doors at seven",
    serial: "No. 0221 · MMXXVI",
    meta: [
      ["Hall", "West"],
      ["Row", "C"],
    ],
  },
  {
    title: "Late Session",
    stub: "after 9",
    rail: "Not transferable",
    serial: "No. 0907 · MMXXVI",
    meta: [
      ["Gate", "III"],
      ["Seat", "K–02"],
    ],
  },
  {
    title: "One Hundred",
    stub: "shelf",
    rail: "Take what you need",
    serial: "No. 0100 · MMXXVI",
    meta: [
      ["Series", "Interface"],
      ["Piece", "004"],
    ],
  },
  {
    title: "Standing Room",
    stub: "unres.",
    rail: "No re-entry",
    serial: "No. 0450 · MMXXVI",
    meta: [
      ["Floor", "Main"],
      ["Time", "20:30"],
    ],
  },
];

type ComposedStrip = {
  start: Anchor;
  end: Anchor;
  thick: number;
  pace: number;
  delay: number;
  direction: "forward" | "reverse";
  layer: number;
  scheme: number;
  show: number;
};

/** Composed paths, not random ones: two broad diagonals, then bridging runs. */
const COMPOSITION: ComposedStrip[] = [
  {
    start: { edge: "left", at: 0.24 },
    end: { edge: "right", at: 0.76 },
    thick: 0.12,
    pace: 0.14,
    delay: 0,
    direction: "forward",
    layer: 60,
    scheme: 0,
    show: 0,
  },
  {
    start: { edge: "bottom", at: 0.12 },
    end: { edge: "top", at: 0.78 },
    thick: 0.1,
    pace: 0.115,
    delay: 0.75,
    direction: "reverse",
    layer: 50,
    scheme: 1,
    show: 3,
  },
  {
    start: { edge: "left", at: 0.62 },
    end: { edge: "right", at: 0.3 },
    thick: 0.072,
    pace: 0.1,
    delay: 1.45,
    direction: "reverse",
    layer: 35,
    scheme: 2,
    show: 1,
  },
  {
    start: { edge: "top", at: 0.08 },
    end: { edge: "right", at: 0.72 },
    thick: 0.064,
    pace: 0.085,
    delay: 2.1,
    direction: "forward",
    layer: 20,
    scheme: 3,
    show: 2,
  },
  {
    start: { edge: "left", at: 0.08 },
    end: { edge: "bottom", at: 0.82 },
    thick: 0.055,
    pace: 0.075,
    delay: 2.75,
    direction: "reverse",
    layer: 10,
    scheme: 4,
    show: 4,
  },
  {
    start: { edge: "top", at: 0.43 },
    end: { edge: "bottom", at: 0.58 },
    thick: 0.06,
    pace: 0.082,
    delay: 3.4,
    direction: "forward",
    layer: 40,
    scheme: 5,
    show: 2,
  },
  {
    start: { edge: "bottom", at: 0.58 },
    end: { edge: "right", at: 0.08 },
    thick: 0.05,
    pace: 0.07,
    delay: 4.05,
    direction: "reverse",
    layer: 5,
    scheme: 6,
    show: 3,
  },
  {
    start: { edge: "left", at: 0.94 },
    end: { edge: "top", at: 0.62 },
    thick: 0.046,
    pace: 0.065,
    delay: 4.7,
    direction: "forward",
    layer: 15,
    scheme: 7,
    show: 1,
  },
  {
    start: { edge: "bottom", at: 0.9 },
    end: { edge: "left", at: 0.52 },
    thick: 0.048,
    pace: 0.07,
    delay: 5.35,
    direction: "reverse",
    layer: 30,
    scheme: 8,
    show: 4,
  },
];

/** `count` reveals paths in composed order; `seed` rotates faces, not geometry. */
export function TicketSwarm({ count = 9, seed = 12, gap = TICKET_GAP }) {
  const wrap = useRef<HTMLDivElement>(null);
  const [full, setFull] = useState(false);
  const [side, setSide] = useState(0);

  useEffect(() => {
    const sync = () => setFull(document.fullscreenElement === wrap.current);
    document.addEventListener("fullscreenchange", sync);
    return () => document.removeEventListener("fullscreenchange", sync);
  }, []);

  useEffect(() => {
    const el = wrap.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) =>
      setSide(Math.min(entry.contentRect.width, entry.contentRect.height))
    );
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const strips = useMemo(() => {
    const offset = ((seed - 12) % SHOWS.length + SHOWS.length) % SHOWS.length;
    return COMPOSITION.slice(0, Math.max(0, count)).map(
      ({ scheme, show, ...path }) => ({
        ...path,
        ...SCHEMES[(scheme + offset) % SCHEMES.length],
        ...SHOWS[(show + offset) % SHOWS.length],
      })
    );
  }, [count, seed]);

  const toggle = () => {
    if (full) document.exitFullscreen();
    else wrap.current?.requestFullscreen().catch(() => {});
  };

  return (
    <div
      ref={wrap}
      className={`relative w-full overflow-hidden ${
        full ? "h-full" : "aspect-[16/10] rounded-lg"
      }`}
      style={{ background: TICKET.paper }}
    >
      {side > 0
        ? strips.map(({ thick, pace, ...s }, i) => (
            <TicketMarquee
              key={i}
              {...s}
              height={Math.round(side * thick)}
              speed={side * pace}
              gap={gap}
            />
          ))
        : null}
      <button
        onClick={toggle}
        className="absolute right-3 top-3 z-[100] rounded-lg border border-neutral-900/15 bg-white/70 px-2.5 py-1.5 text-xs font-medium text-neutral-700 backdrop-blur transition-colors hover:bg-white"
      >
        {full ? "Exit fullscreen" : "Fullscreen"}
      </button>
    </div>
  );
}
Ticket Marquee
