/* Foto Neon — VideoTile. A portfolio media tile that plays a real clip.
   Same visual language as the design-system PortfolioTile (dimmed behind a
   dark scrim until hovered, then a neon border blooms), but renders a <video>
   that plays on hover and resets on leave — the behaviour ported from the
   live site's VideoCard (foto-neon/app/page.tsx). Attaches to window.FNVideoTile
   so both HomePage and GalleryPage can compose it without duplication. */

function FNVideoTile({
  src,
  poster,
  alt = "",
  color = "pink",
  ratio = "4 / 3",
  autoPlayInView = false,
  className = "",
  style = {},
  children,
  ...rest
}) {
  const videoRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const [hover, setHover] = React.useState(false);
  const neon = `var(--neon-${color})`;

  const play = React.useCallback(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    const p = v.play();
    if (p && typeof p.catch === "function") p.catch(() => {});
  }, []);

  const stop = React.useCallback((reset) => {
    const v = videoRef.current;
    if (!v) return;
    v.pause();
    if (reset) { try { v.currentTime = 0; } catch (e) {} }
  }, []);

  const onEnter = () => { setHover(true); play(); };
  const onLeave = () => { setHover(false); stop(true); };

  // Touch devices have no hover: optionally autoplay the clip while it is
  // on screen (one IntersectionObserver per tile), pause when it scrolls away.
  React.useEffect(() => {
    if (!autoPlayInView) return;
    const isTouch = ("ontouchstart" in window) || navigator.maxTouchPoints > 0;
    if (!isTouch) return;
    const el = wrapRef.current;
    if (!el || !("IntersectionObserver" in window)) return;
    const io = new IntersectionObserver(
      ([entry]) => { if (entry && entry.isIntersecting) play(); else stop(false); },
      { threshold: 0.5 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [autoPlayInView, play, stop]);

  return (
    <div
      ref={wrapRef}
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      className={className}
      style={{
        position: "relative",
        overflow: "hidden",
        aspectRatio: ratio,
        background: "var(--surface-card-alt)",
        cursor: "pointer",
        borderRadius: 0,
        transition: "transform 0.5s ease",
        transform: hover ? "scale(1.01)" : "scale(1)",
        ...style,
      }}
      {...rest}
    >
      {src ? (
        <video
          ref={videoRef}
          poster={poster}
          aria-label={alt}
          muted
          loop
          playsInline
          preload="metadata"
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        >
          <source src={src} type="video/mp4" />
        </video>
      ) : (
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
          {children}
        </div>
      )}

      {/* Dark scrim, lifted on hover */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "rgba(5,5,8,0.4)",
          opacity: hover ? 0 : 1,
          transition: "opacity 0.3s ease",
          pointerEvents: "none",
        }}
      />

      {/* Neon border on hover */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          border: `2px solid ${neon}`,
          boxShadow: `inset 0 0 20px ${neon}44, 0 0 20px ${neon}44`,
          opacity: hover ? 1 : 0,
          transition: "opacity 0.3s ease",
          pointerEvents: "none",
        }}
      />
    </div>
  );
}

window.FNVideoTile = FNVideoTile;