// Tiny canvas-2d "fake 3D" placeholders so the wireframes feel alive without
// pulling in real Three.js for every variant. They communicate the IDEA of the
// 3D piece — once a direction is picked we'll build the real WebGL version.

const FakeRecursiveSquares = ({ animated = true }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const draw = (t) => {
      const { width: W, height: H } = canvas;
      ctx.clearRect(0, 0, W, H);
      ctx.save();
      ctx.translate(W / 2, H / 2);
      const rot = animated ? t * 0.0001 : 0;
      ctx.rotate(rot);
      ctx.strokeStyle = 'rgba(21,20,15,0.35)';
      ctx.lineWidth = 1;
      const recurse = (size, depth) => {
        if (depth <= 0 || size < 4) return;
        ctx.strokeRect(-size / 2, -size / 2, size, size);
        ctx.save();
        ctx.rotate(0.12 + (animated ? Math.sin(t * 0.0005) * 0.05 : 0));
        recurse(size * 0.78, depth - 1);
        ctx.restore();
      };
      recurse(Math.min(W, H) * 0.85, 14);
      ctx.restore();
      if (animated) raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
      ctx.scale(2, 2);
    };
    resize();
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, [animated]);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const FakeParticleField = ({ count = 80 }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const pts = Array.from({ length: count }, () => ({
      x: Math.random(), y: Math.random(),
      vx: (Math.random() - 0.5) * 0.0002,
      vy: (Math.random() - 0.5) * 0.0002,
    }));
    const draw = () => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = 'rgba(21,20,15,0.55)';
      pts.forEach(p => {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0 || p.x > 1) p.vx *= -1;
        if (p.y < 0 || p.y > 1) p.vy *= -1;
        ctx.beginPath();
        ctx.arc(p.x * W, p.y * H, 1.2, 0, Math.PI * 2);
        ctx.fill();
      });
      // connections
      ctx.strokeStyle = 'rgba(21,20,15,0.08)';
      for (let i = 0; i < pts.length; i++) {
        for (let j = i + 1; j < pts.length; j++) {
          const dx = (pts[i].x - pts[j].x) * W;
          const dy = (pts[i].y - pts[j].y) * H;
          const d = Math.sqrt(dx * dx + dy * dy);
          if (d < 80) {
            ctx.globalAlpha = 1 - d / 80;
            ctx.beginPath();
            ctx.moveTo(pts[i].x * W, pts[i].y * H);
            ctx.lineTo(pts[j].x * W, pts[j].y * H);
            ctx.stroke();
          }
        }
      }
      ctx.globalAlpha = 1;
      raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    draw();
    return () => cancelAnimationFrame(raf);
  }, [count]);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const FakeWireSculpture = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    // tetrahedron-ish vertices
    const verts = [
      [1, 1, 1], [-1, -1, 1], [-1, 1, -1], [1, -1, -1],
    ];
    const edges = [[0,1],[0,2],[0,3],[1,2],[1,3],[2,3]];
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      const cx = W / 2, cy = H / 2, s = Math.min(W, H) * 0.28;
      const a = t * 0.0004, b = t * 0.0003;
      const proj = verts.map(([x, y, z]) => {
        // rotate y
        let x1 = x * Math.cos(a) - z * Math.sin(a);
        let z1 = x * Math.sin(a) + z * Math.cos(a);
        // rotate x
        let y1 = y * Math.cos(b) - z1 * Math.sin(b);
        let z2 = y * Math.sin(b) + z1 * Math.cos(b);
        const f = 1.6 / (2.5 + z2);
        return [cx + x1 * s * f, cy + y1 * s * f];
      });
      ctx.strokeStyle = 'rgba(21,20,15,0.7)';
      ctx.lineWidth = 1;
      edges.forEach(([i, j]) => {
        ctx.beginPath();
        ctx.moveTo(...proj[i]);
        ctx.lineTo(...proj[j]);
        ctx.stroke();
      });
      // vertex dots
      ctx.fillStyle = 'rgba(21,20,15,0.9)';
      proj.forEach(([x, y]) => {
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, Math.PI * 2);
        ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

const FakeLattice = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    const draw = (t) => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);
      const cols = 14, rows = 10;
      const dx = W / cols, dy = H / rows;
      ctx.strokeStyle = 'rgba(21,20,15,0.25)';
      ctx.lineWidth = 0.8;
      for (let i = 0; i <= cols; i++) {
        for (let j = 0; j <= rows; j++) {
          const wave = Math.sin(t * 0.001 + i * 0.4 + j * 0.3) * 4;
          ctx.beginPath();
          ctx.arc(i * dx + wave, j * dy + wave, 1, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(21,20,15,0.5)';
          ctx.fill();
          if (i < cols) {
            ctx.beginPath();
            ctx.moveTo(i * dx + wave, j * dy + wave);
            const wave2 = Math.sin(t * 0.001 + (i+1) * 0.4 + j * 0.3) * 4;
            ctx.lineTo((i+1) * dx + wave2, j * dy + wave2);
            ctx.stroke();
          }
          if (j < rows) {
            ctx.beginPath();
            ctx.moveTo(i * dx + wave, j * dy + wave);
            const wave2 = Math.sin(t * 0.001 + i * 0.4 + (j+1) * 0.3) * 4;
            ctx.lineTo(i * dx + wave2, (j+1) * dy + wave2);
            ctx.stroke();
          }
        }
      }
      raf = requestAnimationFrame(draw);
    };
    const resize = () => {
      canvas.width = canvas.offsetWidth * 2;
      canvas.height = canvas.offsetHeight * 2;
    };
    resize();
    draw(0);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas ref={ref} style={{ width: '100%', height: '100%', display: 'block' }} />;
};

Object.assign(window, {
  FakeRecursiveSquares, FakeParticleField, FakeWireSculpture, FakeLattice,
});