// Distribui `n` colunas por breakpoint — mesmo padrão de hook usado em NavBar/ComboBanner/
// SuperBanner (window.innerWidth + listener de resize), só que com mais de um corte.
function useDriftColumns() {
  const calc = () => {
    if (typeof window === 'undefined') return 6;
    const w = window.innerWidth;
    if (w < 560) return 2;
    if (w < 860) return 3;
    if (w < 1180) return 4;
    return 6;
  };
  const [n, setN] = React.useState(calc);
  React.useEffect(() => {
    const on = () => setN(calc());
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return n;
}

// Multiplicador de velocidade pseudo-aleatório por coluna (mesma ideia do componente original:
// um número determinístico entre `1-variance` e `1+variance`, sem precisar de Math.random —
// determinístico evita o "flash" de recalcular no re-render).
function columnSpeedFactor(index, variance) {
  const pseudo = ((index * 0.6180339887 + 0.35) % 1) * 2 - 1;
  return 1 + variance * pseudo;
}

// Cicla algumas proporções pra as fileiras não ficarem todas do mesmo tamanho — dá o ar
// "mosaico" do mural em vez de uma grade batida.
const HEIGHT_CYCLE = [1, 1.35, 0.85, 1.15, 1.4, 0.95];

/**
 * Sexy Geek DS — Drift Wall — mural de fotos em colunas que derivam devagar (loop infinito,
 * cada coluna numa velocidade/direção diferente), escurecidas e dessaturadas em repouso,
 * reveladas em cor e nitidez no hover (que também pausa só aquela coluna). Reimplementação
 * autoral da técnica do componente de mesmo nome do reactbits.dev — ver geek-fx.css pro CSS
 * (`.dw-*`) e o comentário lá por que não é o pacote deles instalado (projeto sem bundler).
 * Tem a mesma perspectiva 3D do original: inclinação fixa (`tilt`/`turn`) + parallax que
 * acompanha o mouse (`parallax`, 0 desliga).
 */
function DriftWall({
  items = [], height = 440, tileHeight = 130, gap = 14, baseSpeed = 34, variance = 0.4,
  perspective = 1200, tilt = 14, turn = -12, parallax = 0.5, onOpen,
}) {
  const columns = useDriftColumns();
  const ref = React.useRef(null);
  const [pointer, setPointer] = React.useState({ x: 0, y: 0 });

  const onMouseMove = React.useCallback((e) => {
    if (!parallax || !ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
    const y = ((e.clientY - rect.top) / rect.height) * 2 - 1;
    setPointer({ x, y });
  }, [parallax]);
  const onMouseLeave = React.useCallback(() => setPointer({ x: 0, y: 0 }), []);

  if (!items || items.length === 0) return null;

  const cols = Array.from({ length: columns }, (_, c) => items.filter((_, i) => i % columns === c));
  const rotateX = tilt - pointer.y * parallax * 10;
  const rotateY = turn + pointer.x * parallax * 10;

  return (
    <div className="dw-viewport" style={{ perspective }}>
      <div
        ref={ref}
        className="dw-wall"
        onMouseMove={onMouseMove}
        onMouseLeave={onMouseLeave}
        style={{ height, gap, transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }}
      >
        {cols.map((colItems, c) => {
          if (colItems.length === 0) return null;
          const factor = columnSpeedFactor(c, variance);
          const duration = Math.max(10, baseSpeed * factor);
          const direction = c % 2 === 0 ? 'dw-col-up' : 'dw-col-down';
          // Duplica a coluna pra dar loop sem costura via translateY(-50%) — a segunda metade é
          // idêntica à primeira, então o corte não se nota.
          const looped = [...colItems, ...colItems];
          return (
            <div key={c} className={`dw-col ${direction}`} style={{ gap, animationDuration: `${duration}s` }}>
              {looped.map((item, i) => {
                const mult = HEIGHT_CYCLE[i % HEIGHT_CYCLE.length];
                return (
                  <div
                    key={`${item.id}-${i}`}
                    className="dw-tile gx-pixel-corners-sm"
                    style={{ height: Math.round(tileHeight * mult) }}
                    onClick={() => onOpen && onOpen(item)}
                  >
                    <img src={item.imgSrc} alt={item.name || ''} loading="lazy" />
                    {item.name && <div className="dw-tile-label">{item.name}</div>}
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.SexyGeekDS = window.SexyGeekDS || {};
window.SexyGeekDS.DriftWall = DriftWall;