"use client";

import React, { useEffect, useRef, useState } from "react";
import { motion, useInView, useReducedMotion } from "motion/react";

export interface SplitFlapProps {
  /** Text to display — flips character by character like a departure board. */
  text: string;
  /** Fixed cell count; text is padded/truncated so the board never resizes. */
  length?: number;
  /** Characters each cell cycles through, in order. */
  charset?: string;
  /** Duration of one flap in ms. */
  stepMs?: number;
  /** Cell height in px. */
  size?: number;
  /** Start when scrolled into view, or immediately on mount. */
  trigger?: "scroll" | "mount";
  className?: string;
  style?: React.CSSProperties;
}

const DEFAULT_CHARSET = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-'&";

// opaque face: page background with an ink tint, so flaps hide what's behind
const FACE_BG =
  "linear-gradient(rgba(var(--ink-rgb),0.08), rgba(var(--ink-rgb),0.08)) var(--background)";

/**
 * A split-flap departure board — each character is a mechanical flap module
 * that clatters forward through the alphabet until it lands on its target.
 * Changing `text` re-flips only the cells that differ.
 */
export function SplitFlap({
  text,
  length,
  charset = DEFAULT_CHARSET,
  stepMs = 48,
  size = 44,
  trigger = "scroll",
  className,
  style,
}: SplitFlapProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.5 });
  const reduced = useReducedMotion();
  const started = trigger === "mount" || inView;

  const upper = text.toUpperCase();
  const padded = length !== undefined ? upper.padEnd(length, " ").slice(0, length) : upper;
  const sanitized = padded
    .split("")
    .map((c) => (charset.includes(c) ? c : " "))
    .join("");
  const target = started ? sanitized : " ".repeat(sanitized.length);

  return (
    <span
      ref={ref}
      aria-label={sanitized.trimEnd() || "blank board"}
      className={["inline-flex", className].filter(Boolean).join(" ")}
      style={style}
    >
      <span aria-hidden="true" className="flex gap-[3px]">
        {sanitized.split("").map((_, i) => (
          <FlapCell
            key={i}
            target={target[i] ?? " "}
            charset={charset}
            delay={i * 34}
            stepMs={stepMs}
            size={size}
            reduced={!!reduced}
          />
        ))}
      </span>
    </span>
  );
}

function FlapCell({
  target,
  charset,
  delay,
  stepMs,
  size,
  reduced,
}: {
  target: string;
  charset: string;
  delay: number;
  stepMs: number;
  size: number;
  reduced: boolean;
}) {
  const [current, setCurrent] = useState(" ");
  const [next, setNext] = useState<string | null>(null);
  const startedRef = useRef(false);

  useEffect(() => {
    if (reduced) {
      setNext(null);
      setCurrent(target);
      return;
    }
    if (current === target || next !== null) return;
    const idx = charset.indexOf(current);
    const nx = charset[(idx + 1) % charset.length];
    if (!startedRef.current) {
      startedRef.current = true;
      const t = setTimeout(() => setNext(nx), delay);
      return () => clearTimeout(t);
    }
    setNext(nx);
  }, [current, target, next, reduced, charset, delay]);

  const half = size / 2;
  const width = Math.round(size * 0.72);
  const glyph = (c: string, shifted: boolean) => (
    <span
      className="block w-full text-center [font-family:var(--font-mono)] font-medium text-[var(--ink)]"
      style={{
        height: size,
        lineHeight: `${size}px`,
        fontSize: Math.round(size * 0.62),
        transform: shifted ? `translateY(-${half}px)` : undefined,
      }}
    >
      {c}
    </span>
  );

  return (
    <span
      className="relative block overflow-hidden rounded-[4px] border border-[var(--rule)]"
      style={{ width, height: size, perspective: 600, background: FACE_BG }}
    >
      {/* top static — during a flip, already shows the incoming character */}
      <span
        className="absolute inset-x-0 top-0 overflow-hidden"
        style={{ height: half, background: FACE_BG }}
      >
        {glyph(next ?? current, false)}
      </span>
      {/* bottom static — keeps the old character until the flap lands */}
      <span
        className="absolute inset-x-0 bottom-0 overflow-hidden"
        style={{ height: half, background: FACE_BG }}
      >
        {glyph(current, true)}
      </span>
      {/* falling flap */}
      {next !== null && !reduced && (
        <motion.span
          key={`${current}-${next}`}
          initial={{ rotateX: 0 }}
          animate={{ rotateX: -180 }}
          transition={{ duration: Math.max(stepMs, 30) / 1000, ease: "easeIn" }}
          onAnimationComplete={() => {
            setCurrent(next);
            setNext(null);
          }}
          className="absolute inset-x-0 top-0 z-10 block"
          style={{
            height: half,
            transformOrigin: "50% 100%",
            transformStyle: "preserve-3d",
          }}
        >
          <span
            className="absolute inset-0 overflow-hidden [backface-visibility:hidden]"
            style={{ background: FACE_BG }}
          >
            {glyph(current, false)}
          </span>
          <span
            className="absolute inset-0 overflow-hidden [backface-visibility:hidden]"
            style={{ background: FACE_BG, transform: "rotateX(180deg)" }}
          >
            {glyph(next, true)}
          </span>
        </motion.span>
      )}
      {/* hinge slit */}
      <span
        className="absolute inset-x-0 z-20 block bg-[rgba(var(--background-rgb),0.9)]"
        style={{ top: half - 0.5, height: 1 }}
      />
    </span>
  );
}

export default SplitFlap;