/* eslint-disable */
/* Shared wireframe primitives v2 — clean, client-readable. */

const { useState, useEffect, useMemo, useRef, useCallback } = React;

/* --------- Placeholder (video / image) --------- */
function Placeholder({ x, y, w, h, label, desc, tag, style, bleed }) {
  return (
    <div
      className={"placeholder" + (bleed ? " bleed" : "")}
      style={{ left: x, top: y, width: w, height: h, ...(style || {}) }}
    >
      {tag ? <div className="ph-tag">{tag}</div> : null}
      {!bleed && <div className="ph-label">{label}</div>}
      {!bleed && desc ? <div className="ph-desc">{desc}</div> : null}
    </div>
  );
}

/* --------- Wireframe Button --------- */
function WfBtn({ children, primary, ghost, icon, lg, x, y, w, h, onClick, style }) {
  const cls = ["wf-btn"];
  if (primary) cls.push("primary");
  if (ghost) cls.push("ghost");
  if (icon) cls.push("icon");
  if (lg) cls.push("lg");
  const pos = x !== undefined ? { position: "absolute", left: x, top: y, width: w, height: h } : {};
  return (
    <button className={cls.join(" ")} style={{ ...pos, ...(style || {}) }} onClick={onClick}>
      {children}
    </button>
  );
}

/* --------- Generic Popup --------- */
function Popup({ x, y, w, h, eyebrow, title, children, onClose, style }) {
  return (
    <div className="popup" style={{ left: x, top: y, width: w, height: h, ...(style || {}) }}>
      <button className="close" onClick={onClose}>×</button>
      {eyebrow ? <div className="popup-eyebrow">{eyebrow}</div> : null}
      {title ? <div className="wf-title" style={{ fontSize: 24, marginBottom: 12, paddingRight: 32 }}>{title}</div> : null}
      {children}
    </div>
  );
}

/* --------- Bottom navigation Next/Back — disabled per user request --------- */
function SceneNav() {
  return null;
}

/* --------- Draggable horizontal slider --------- */
function HSlider({ x, y, w, value, onChange, ticks }) {
  const trackRef = useRef(null);
  const draggingRef = useRef(false);

  const setFromEvent = (e) => {
    const track = trackRef.current;
    if (!track) return;
    const r = track.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const v = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
    onChange(v);
  };

  const onPointerDown = (e) => {
    draggingRef.current = true;
    setFromEvent(e);
    e.preventDefault();
  };
  useEffect(() => {
    const move = (e) => { if (draggingRef.current) setFromEvent(e); };
    const up = () => { draggingRef.current = false; };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", move, { passive: false });
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", move);
      window.removeEventListener("touchend", up);
    };
  });

  return (
    <div
      className="h-slider"
      style={{ left: x, top: y, width: w }}
      onMouseDown={onPointerDown}
      onTouchStart={onPointerDown}
      ref={trackRef}
    >
      <div className="track"></div>
      <div className="track-fill" style={{ width: `${value * 100}%`, top: "calc(50% - 2px)" }}></div>
      {(ticks || []).map((t, i) => (
        <div key={i} className="tick" style={{ left: `${t * 100}%` }}></div>
      ))}
      <div className="handle" style={{ left: `${value * 100}%` }}>⇆</div>
    </div>
  );
}

/* --------- Draggable vertical slider --------- */
function VSlider({ x, y, h, value, onChange }) {
  const trackRef = useRef(null);
  const draggingRef = useRef(false);

  const setFromEvent = (e) => {
    const track = trackRef.current;
    if (!track) return;
    const r = track.getBoundingClientRect();
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    const v = Math.max(0, Math.min(1, (clientY - r.top) / r.height));
    onChange(v);
  };
  const onPointerDown = (e) => {
    draggingRef.current = true;
    setFromEvent(e);
    e.preventDefault();
  };
  useEffect(() => {
    const move = (e) => { if (draggingRef.current) setFromEvent(e); };
    const up = () => { draggingRef.current = false; };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", move, { passive: false });
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", move);
      window.removeEventListener("touchend", up);
    };
  });

  return (
    <div
      className="v-slider"
      style={{ left: x, top: y, height: h }}
      onMouseDown={onPointerDown}
      onTouchStart={onPointerDown}
      ref={trackRef}
    >
      <div className="track"></div>
      <div className="track-fill" style={{ height: `${value * 100}%`, top: 0 }}></div>
      <div className="handle" style={{ top: `${value * 100}%` }}>⇅</div>
    </div>
  );
}

/* --------- Text placeholder bars --------- */
function TxtBars({ x, y, w, lines = 3, style }) {
  return (
    <div style={{
      position: "absolute", left: x, top: y, width: w,
      display: "flex", flexDirection: "column", gap: 7,
      ...(style || {}),
    }}>
      {Array.from({ length: lines }).map((_, i) => (
        <div
          key={i}
          className="txt-bar"
          style={{ width: i === lines - 1 ? "60%" : "100%" }}
        ></div>
      ))}
    </div>
  );
}

Object.assign(window, {
  Placeholder, WfBtn, Popup, SceneNav, HSlider, VSlider, TxtBars,
});