import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";

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

/* ─────────────────────────────────────────────────────────
 * COUNTER CURTAIN STORYBOARD
 *
 *  cover     the first paint is already the curtain. A tiny
 *            inline script decides before the page under it is
 *            drawn, so nothing flashes, even before React loads
 *  count     0 to 100, following the fonts and the hero's
 *            images. It never lands before minDuration, never
 *            waits past maxDuration, and creeps while it waits
 *            so it never looks stuck. A click, key or scroll
 *            hurries it along
 *  land      100 holds for a beat
 *  lift      the curtain slides off the page. Its counter sinks
 *            back as it goes, so the edge wipes it away instead
 *            of carrying it off
 *  rise      each line rises out of its mask as the edge
 *            uncovers it, on the same clock as the lift. Lines
 *            that sit together, like a headline, go in reading
 *            order, a beat apart
 *  settle    every animation is dropped and the hero is plain
 *            HTML again
 *
 *  The count writes straight to the DOM and everything that
 *  moves is a transform on the compositor, so the reveal stays
 *  smooth while React hydrates underneath it.
 * ───────────────────────────────────────────────────────── */

const CURTAIN = {
  count: [0.35, 0, 0.65, 1], // the count's shape on a fast connection, as a cubic-bezier
  speed: 3, // most of the count it covers in a second, when catching up with loading
  crawl: 0.85, // how far the count creeps by maxDuration while assets are still loading
  hurry: 0.3, // s left on the clock after a click, key or scroll
  hold: 0.1, // s at 100 before the lift; the lift's slow start adds to it
  lift: { duration: 0.9, ease: [0.6, 0, 0.15, 1] },
  sink: 0.4, // how far the counter falls back during the lift, as a share of the curtain
  // `lead`: s a line starts before the edge reaches its middle. `near`: how
  // close two lines sit, in line heights, to count as one block and rise in turn.
  rise: { duration: 1, ease: [0.16, 1, 0.3, 1], stagger: 0.08, lead: 0.06, near: 0.6 },
} as const;

// A line's resting place while the curtain is down. Keep it in step with the
// class on CounterCurtainLine's inner span.
const HIDDEN = "translateY(115%)";

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

type Plan = {
  once: boolean;
  key: string;
  min: number;
  max: number;
  fonts: boolean;
  images: boolean;
  direction: Direction;
  contained: boolean;
  skip: boolean;
  hidden: string;
  t: typeof CURTAIN;
};

type Handle = {
  revealed: boolean;
  on: (listener: () => void) => () => void;
  destroy: () => void;
};

type CurtainRoot = HTMLElement & { __counterCurtain?: Handle };

/**
 * The whole sequence, from the first count to the last line settling. It runs
 * as an inline <script> while the HTML is still parsing, so the count starts on
 * the first paint, and from an effect when the component mounts on the client.
 *
 * It's serialized with toString(), so it must stay self-contained: no outer
 * variables, no imports, nothing a compiler would turn into a helper (async,
 * object spread). State lives on the root as data-counter-curtain:
 * play, then done, or skip.
 */
function counterCurtain(root: HTMLElement, o: Plan): Handle {
  const t = o.t;
  const box = root as CurtainRoot;
  let listeners: Array<() => void> = [];
  let cleanups: Array<() => void> = [];
  let anims: Animation[] = [];
  let frame = 0;
  let timer = 0;

  const handle: Handle = {
    revealed: false,
    on(listener) {
      if (handle.revealed) listener();
      else listeners.push(listener);
      return () => {
        listeners = listeners.filter((l) => l !== listener);
      };
    },
    destroy() {
      cancelAnimationFrame(frame);
      clearTimeout(timer);
      release();
      anims.forEach((a) => a.cancel());
      anims = [];
      listeners = [];
    },
  };
  box.__counterCurtain = handle;

  const release = () => {
    cleanups.forEach((c) => c());
    cleanups = [];
  };
  const finish = () => {
    handle.revealed = true;
    const due = listeners;
    listeners = [];
    due.forEach((l) => l());
  };

  let seen = false;
  try {
    seen = o.once && sessionStorage.getItem(o.key) === "1";
  } catch {}
  if (
    o.skip ||
    seen ||
    typeof root.animate !== "function" ||
    matchMedia("(prefers-reduced-motion: reduce)").matches
  ) {
    root.setAttribute("data-counter-curtain", "skip");
    finish();
    return handle;
  }
  root.setAttribute("data-counter-curtain", "play");

  // Cubic-bezier helpers: the y for an x, and the x where y reaches a value.
  const axis = (a: number, b: number, s: number) =>
    3 * a * (1 - s) * (1 - s) * s + 3 * b * (1 - s) * s * s + s * s * s;
  const solve = (curve: readonly number[], v: number, from: number, to: number) => {
    let lo = 0;
    let hi = 1;
    for (let i = 0; i < 24; i++) {
      const mid = (lo + hi) / 2;
      if (axis(curve[from], curve[from + 2], mid) < v) lo = mid;
      else hi = mid;
    }
    return axis(curve[to], curve[to + 2], (lo + hi) / 2);
  };

  // The page is still parsing when this first runs, so the curtain may not
  // exist yet. Look again every frame until parsing is done.
  let cover: HTMLElement | null = null;
  let face: HTMLElement | null = null;
  let values: HTMLElement[] = [];
  let parsed = false;
  let value = -1;
  const find = () => {
    if (parsed) return;
    parsed = document.readyState !== "loading";
    cover = root.querySelector("[data-counter-curtain-cover]");
    face = cover && cover.querySelector("[data-counter-curtain-face]");
    const found = cover ? Array.from(cover.querySelectorAll<HTMLElement>("[data-counter-curtain-value]")) : [];
    if (found.length !== values.length) value = -1;
    values = found;
  };

  const listen = (target: EventTarget, type: string, fn: (event: Event) => void) => {
    target.addEventListener(type, fn, { passive: false });
    cleanups.push(() => target.removeEventListener(type, fn));
  };

  // Clock, in seconds of visible time: a backgrounded tab pauses the count
  // instead of jumping it to 100 when it comes back.
  let elapsed = 0;
  let last = 0;
  let end = o.min; // the count can't land before this
  let cap = Math.max(o.max, o.min); // nor wait for loading past this
  const max = cap; // the creep's pace, which a hurry doesn't change
  // Someone clicking or scrolling wants in: land soon, loaded or not.
  const hurry = () => {
    end = Math.min(end, elapsed + t.hurry);
    cap = Math.min(cap, elapsed + t.hurry);
  };

  if (o.contained) {
    listen(root, "pointerdown", hurry);
  } else {
    // Lock the page without touching its styles, so nothing shifts when the
    // scrollbar would otherwise come and go.
    const keys = [" ", "PageUp", "PageDown", "Home", "End", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
    const block = (event: Event) => {
      hurry();
      if (event.type !== "keydown" || keys.indexOf((event as KeyboardEvent).key) > -1) {
        event.preventDefault();
      }
    };
    listen(window, "wheel", block);
    listen(window, "touchmove", block);
    listen(window, "keydown", block);
    listen(window, "pointerdown", hurry);
  }

  // A curtain over part of the page waits until it's on screen.
  let started = !o.contained;
  if (!started) {
    const io = new IntersectionObserver(
      (entries) => {
        if (!entries[0].isIntersecting) return;
        started = true;
        io.disconnect();
      },
      { rootMargin: "0px 0px -15% 0px" },
    );
    io.observe(root);
    cleanups.push(() => io.disconnect());
  }

  // Loading: the fonts, plus every image in the visible part of the hero,
  // decoded so the first frame of the reveal doesn't stall on it.
  let total = 0;
  let loaded = 0;
  let scanned = false;
  const track = (promise: Promise<unknown>) => {
    total++;
    const done = () => {
      loaded++;
    };
    promise.then(done, done);
  };
  const scan = () => {
    scanned = true;
    if (o.fonts && document.fonts) track(document.fonts.ready);
    if (!o.images) return;
    const view = o.contained
      ? root.getBoundingClientRect()
      : { top: 0, left: 0, bottom: innerHeight, right: innerWidth };
    root.querySelectorAll("img").forEach((img) => {
      if (cover && cover.contains(img)) return;
      // An image in a line is pushed down out of its mask; where it shows is the mask.
      const r = (img.closest("[data-counter-curtain-line]") || img).getBoundingClientRect();
      if (r.bottom < view.top || r.top > view.bottom || r.right < view.left || r.left > view.right) return;
      track(img.decode());
    });
  };

  let goal = 0;
  let shown = 0;
  let marked = false; // remembered for the session, from the first counted frame
  const tick = (now: number) => {
    frame = requestAnimationFrame(tick);
    find();
    const dt = last ? Math.min(now - last, 100) / 1000 : 0;
    last = now;
    if (!started) return;
    if (!marked && o.once) {
      try {
        sessionStorage.setItem(o.key, "1");
      } catch {}
    }
    marked = true;
    elapsed += dt;
    if (parsed && !scanned) scan();

    // The count may not pass the clock, so it never lands before minDuration,
    // nor pass the loading, which creeps on its own so it never stalls.
    const real = scanned ? (total ? loaded / total : 1) : 0;
    const ready = (scanned && loaded >= total) || elapsed >= cap;
    const clock = elapsed >= end ? 1 : solve(t.count, elapsed / end, 0, 1);
    const creep = real + (1 - real) * t.crawl * (1 - Math.exp((-3 * elapsed) / max));
    goal = Math.max(goal, Math.min(clock, ready ? 1 : creep));
    shown = Math.min(goal, shown + dt * Math.max(t.speed, 3 / end));

    const next = Math.floor(shown * 100 + 1e-6);
    if (next !== value) {
      value = next;
      values.forEach((el) => {
        const text = String(next).padStart(Number(el.getAttribute("data-pad")) || 0, "0");
        const node = el.firstChild;
        if (node && node.nodeType === 3) (node as Text).data = text;
        else el.textContent = text;
      });
      if (cover) cover.style.setProperty("--counter-progress", String(next / 100));
    }
    if (next >= 100 && parsed) {
      cancelAnimationFrame(frame);
      timer = window.setTimeout(lift, t.hold * 1000);
    }
  };
  frame = requestAnimationFrame(tick);

  const lift = () => {
    release();
    finish();
    if (!cover) return settle();
    cover.style.pointerEvents = "none";

    const vertical = o.direction === "up" || o.direction === "down";
    const sign = o.direction === "up" || o.direction === "left" ? -1 : 1;
    const move = (share: number) => `translate${vertical ? "Y" : "X"}(${share * 100}%)`;
    const timing = (curve: readonly number[], duration: number, delay = 0): KeyframeAnimationOptions => ({
      duration: duration * 1000,
      delay: delay * 1000,
      easing: `cubic-bezier(${curve.join(",")})`,
      fill: "both",
    });

    anims.push(cover.animate([{ transform: "none" }, { transform: move(sign) }], timing(t.lift.ease, t.lift.duration)));
    if (face) {
      anims.push(face.animate([{ transform: "none" }, { transform: move(-sign * t.sink) }], timing(t.lift.ease, t.lift.duration)));
    }

    // Each line starts as the curtain's edge passes it. Lines that sit
    // together form a block and rise in reading order, a stagger apart, once
    // the edge reaches each of them: lines stacked in one column, like a
    // headline, or things of a size in one row, like a nav. A photo beside
    // the headline is its own block and rises when it's uncovered.
    const view = o.contained
      ? root.getBoundingClientRect()
      : { top: 0, left: 0, width: innerWidth, height: innerHeight };
    let previous = -Infinity; // when the line before starts
    let before: DOMRect | null = null; // the line before
    root.querySelectorAll<HTMLElement>("[data-counter-curtain-line]").forEach((mask) => {
      const line = mask.firstElementChild;
      if (!line || (cover && cover.contains(mask))) return;
      const r = mask.getBoundingClientRect();
      const across = vertical
        ? (r.top + r.height / 2 - view.top) / view.height
        : (r.left + Math.min(r.width, view.width) * 0.2 - view.left) / view.width;
      const reach = Math.min(1, Math.max(0, sign < 0 ? 1 - across : across));
      const at = solve(t.lift.ease, reach, 1, 0) * t.lift.duration - t.rise.lead;
      let block = false;
      if (before) {
        const dx = Math.max(r.left - before.right, before.left - r.right); // < 0 when they overlap
        const dy = Math.max(r.top - before.bottom, before.top - r.bottom);
        const small = Math.min(r.height, before.height);
        const big = Math.max(r.height, before.height);
        block = (dx < 0 && dy < big * t.rise.near) || (dy < 0 && big < small * 2);
      }
      const delay = Math.max(0, at, block ? previous + t.rise.stagger : 0);
      previous = delay;
      before = r;
      anims.push(line.animate([{ transform: o.hidden }, { transform: "none" }], timing(t.rise.ease, t.rise.duration, delay)));
    });

    Promise.all(anims.map((a) => a.finished)).then(settle, () => {});
  };

  const settle = () => {
    root.setAttribute("data-counter-curtain", "done");
    anims.forEach((a) => a.cancel());
    anims = [];
  };

  return handle;
}

const subscribe = () => () => {};

export interface CounterCurtainProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The hero. Mark its lines with CounterCurtainLine. */
  children?: React.ReactNode;
  /** Shortest the count can take, in seconds, even when everything is already loaded. */
  minDuration?: number;
  /** Longest it waits for loading, in seconds, before lifting anyway. */
  maxDuration?: number;
  /** Play once per browser session, so reloads and the back button go straight to the page. */
  once?: boolean;
  /** sessionStorage key that remembers it played. Give each curtain its own if there are several. */
  storageKey?: string;
  /** What the count waits for: web fonts, and the images in the visible part of the hero. */
  waitFor?: Array<"fonts" | "images">;
  /** The way the curtain leaves. */
  direction?: Direction;
  /** Cover this element instead of the screen, without locking the page's scroll. Starts once it's on screen. */
  contained?: boolean;
  /** What the curtain shows instead of the default counter. Put CounterCurtainValue where the number goes. */
  counter?: React.ReactNode;
  /** Called when the count reaches 100 and the curtain starts to lift, or right away when it's skipped. */
  onComplete?: () => void;
  /** Classes for the curtain, such as its color and font. */
  curtainClassName?: string;
}

/**
 * A full-screen curtain that counts to 100 while the page loads, then lifts,
 * and the hero's lines rise in as it uncovers them. Reads its props once, on
 * mount; change its `key` to play it again.
 */
export function CounterCurtain({
  children,
  minDuration = 0.8,
  maxDuration = 3,
  once = true,
  storageKey = "counter-curtain",
  waitFor = ["fonts", "images"],
  direction = "up",
  contained = false,
  counter,
  onComplete,
  curtainClassName,
  className,
  nonce,
  ...props
}: CounterCurtainProps) {
  const ref = React.useRef<HTMLDivElement>(null);
  // True while rendering on the server and hydrating that HTML, where the
  // inline script has already run. False when mounting on the client.
  const hydrating = React.useSyncExternalStore(subscribe, () => false, () => true);
  const [server] = React.useState(hydrating);

  const plan: Plan = {
    once,
    key: storageKey,
    min: minDuration,
    max: maxDuration,
    fonts: waitFor.includes("fonts"),
    images: waitFor.includes("images"),
    direction,
    contained,
    skip: false,
    hidden: HIDDEN,
    t: CURTAIN,
  };
  const planRef = React.useRef(plan);
  const completeRef = React.useRef(onComplete);
  React.useLayoutEffect(() => {
    completeRef.current = onComplete;
  });

  React.useLayoutEffect(() => {
    const root = ref.current as CurtainRoot | null;
    if (!root) return;
    // Server HTML without a handle means the script was blocked, by a Content
    // Security Policy without this nonce. Skip rather than cover a page
    // that's already been seen.
    const handle =
      root.__counterCurtain ?? counterCurtain(root, { ...planRef.current, skip: server });
    const off = handle.on(() => completeRef.current?.());
    return () => {
      off();
      // Strict Mode runs effects twice on a node that stays in the page.
      queueMicrotask(() => {
        if (!root.isConnected) handle.destroy();
      });
    };
  }, [server]);

  return (
    <div
      ref={ref}
      suppressHydrationWarning
      className={cn(contained && "relative isolate", className)}
      {...props}
    >
      {server ? (
        <script
          nonce={nonce}
          suppressHydrationWarning
          dangerouslySetInnerHTML={{
            __html: `(${counterCurtain})(document.currentScript.parentElement,${JSON.stringify(plan).replace(/</g, "\\u003c")})`,
          }}
        />
      ) : null}
      <div
        aria-hidden
        className={cn(
          "pointer-events-none inset-0 z-[100] hidden overflow-hidden in-data-[counter-curtain=play]:block",
          contained ? "absolute" : "fixed",
        )}
      >
        <div
          data-counter-curtain-cover=""
          suppressHydrationWarning
          className={cn(
            "@container pointer-events-auto absolute inset-0 overflow-hidden bg-zinc-950 text-zinc-50 dark:bg-zinc-900",
            curtainClassName,
          )}
        >
          <div data-counter-curtain-face="" className="absolute inset-0">
            {counter ?? <DefaultCounter />}
          </div>
        </div>
      </div>
      {children}
    </div>
  );
}

function DefaultCounter() {
  return (
    <div className="flex h-full flex-col justify-end p-5 sm:p-8">
      <div className="flex items-end justify-between gap-4">
        <CounterCurtainValue className="text-[clamp(4.5rem,26cqw,15rem)] leading-[0.74] font-medium tracking-[-0.06em]" />
        <span className="pb-1 text-xs tracking-[0.2em] uppercase opacity-50">Loading</span>
      </div>
      <div className="mt-5 h-px bg-current/15 sm:mt-7">
        <div className="h-full origin-left scale-x-[var(--counter-progress,0)] bg-current" />
      </div>
    </div>
  );
}

export interface CounterCurtainLineProps extends React.HTMLAttributes<HTMLSpanElement> {
  children?: React.ReactNode;
}

/**
 * A line of the hero that rises out of a clipped mask as the curtain lifts.
 * Block by default; it can hold any element, not only text.
 */
export function CounterCurtainLine({ className, children, ...props }: CounterCurtainLineProps) {
  return (
    <span
      data-counter-curtain-line=""
      // The padding keeps descenders and accents inside the mask; the
      // negative margin takes the room back.
      className={cn("-my-[0.12em] block overflow-hidden py-[0.12em]", className)}
      {...props}
    >
      <span className="block in-data-[counter-curtain=play]:[transform:translateY(115%)]">
        {children}
      </span>
    </span>
  );
}

export interface CounterCurtainValueProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Pad the number with zeros to this many digits, like 007. */
  pad?: number;
}

/** The live number, for a custom `counter`. */
export function CounterCurtainValue({ pad = 0, className, ...props }: CounterCurtainValueProps) {
  return (
    <span
      data-counter-curtain-value=""
      data-pad={pad || undefined}
      suppressHydrationWarning
      className={cn("tabular-nums", className)}
      {...props}
    >
      {"0".padStart(pad, "0")}
    </span>
  );
}