"use client";

import { useEffect, useRef } from "react";
import { SectionShell } from "@/components/ui/SectionShell";
import { MonoTick } from "@/components/ui/MonoTick";
import { Reveal } from "@/components/ui/Reveal";
import { Video } from "@/components/ui/Video";
import { media } from "@/lib/assets";

/**
 * Form factor — the weight story on a white plate (the original's deliberate light
 * contrast against the black stage). Beyond 1 → a violet line sweeps left to right
 * → Beyond 2, then the footage, then the payoff line. The sweep replays whenever
 * the comparison re-enters view (it's a narrative, not a one-shot reveal).
 */
export function FormFactor() {
  const wrapRef = useRef<HTMLDivElement>(null);
  const leftRef = useRef<HTMLDivElement>(null);
  const lineRef = useRef<HTMLSpanElement>(null);
  const rightRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const wrap = wrapRef.current;
    const left = leftRef.current;
    const line = lineRef.current;
    const right = rightRef.current;
    if (!wrap || !left || !line || !right) return;

    const EASE = "cubic-bezier(0.16,1,0.3,1)";
    let timers: number[] = [];
    let cooldown = false;

    const reset = () => {
      timers.forEach(clearTimeout);
      timers = [];
      for (const el of [left, right]) {
        el.style.transition = "none";
        el.style.opacity = "0";
      }
      left.style.transform = "translateX(-16px)";
      right.style.transform = "translateX(16px)";
      line.style.transition = "none";
      line.style.transform = "scaleX(0)";
    };

    const play = () => {
      requestAnimationFrame(() =>
        requestAnimationFrame(() => {
          left.style.transition = `opacity 600ms ${EASE}, transform 600ms ${EASE}`;
          left.style.opacity = "1";
          left.style.transform = "none";
          timers.push(
            window.setTimeout(() => {
              line.style.transition = `transform 900ms ${EASE}`;
              line.style.transform = "scaleX(1)";
            }, 200),
          );
          timers.push(
            window.setTimeout(() => {
              right.style.transition = `opacity 600ms ${EASE}, transform 600ms ${EASE}`;
              right.style.opacity = "1";
              right.style.transform = "none";
            }, 1000),
          );
        }),
      );
    };

    reset();
    const io = new IntersectionObserver(
      (entries) => {
        if (cooldown) return;
        if (entries[0].isIntersecting) {
          play();
        } else {
          cooldown = true;
          reset();
          window.setTimeout(() => (cooldown = false), 400);
        }
      },
      { threshold: 0.6 },
    );
    io.observe(wrap);
    return () => {
      io.disconnect();
      timers.forEach(clearTimeout);
    };
  }, []);

  return (
    <SectionShell tone="paper">
      {/* weight comparison sweep */}
      <div ref={wrapRef} className="mx-auto max-w-5xl">
        <div className="flex items-end justify-between gap-6">
          <div ref={leftRef}>
            <MonoTick className="text-paper">BEYOND 1</MonoTick>
            <div className="mt-2 font-mono text-4xl text-paper/35 tabular-nums md:text-6xl">
              127g
            </div>
          </div>
          <div ref={rightRef} className="text-right">
            <MonoTick className="text-brand">BEYOND 2</MonoTick>
            <div className="mt-2 font-mono text-5xl text-paper tabular-nums md:text-7xl">
              107g
            </div>
          </div>
        </div>
        <div className="relative mt-6 h-px w-full bg-paper/10">
          <span
            ref={lineRef}
            className="absolute inset-y-0 left-0 block h-[2px] w-full origin-left -translate-y-px bg-brand"
          />
        </div>
      </div>

      {/* the footage */}
      <Reveal className="mx-auto mt-12 max-w-5xl overflow-hidden rounded-lg bg-off-white md:mt-16">
        <div className="aspect-[16/10] w-full">
          <Video webm={media.formFactorWebm} mp4={media.formFactorMp4} />
        </div>
      </Reveal>

      {/* the payoff */}
      <div className="mx-auto mt-12 grid max-w-5xl gap-8 md:mt-16 md:grid-cols-12">
        <Reveal as="h2" className="font-display text-[clamp(2rem,4.5vw,3.5rem)] font-medium leading-[1.04] tracking-[-0.02em] md:col-span-6">
          16% lighter than the original
        </Reveal>
        <Reveal className="md:col-span-6 md:pt-2" delayMs={100}>
          <p className="max-w-prose text-lg leading-relaxed text-paper/65">
            Bigscreen Beyond 2 weighs just 107 grams, compared to the 127 gram
            first-generation Beyond. This obsessive focus on weight and form factor
            delivers unbeatable comfort for long-duration virtual reality experiences.
          </p>
        </Reveal>
      </div>
    </SectionShell>
  );
}