/* ============================================================
   Direction A — Wireframe 3D isométrique
   Immeuble en fil de fer, signaux qui circulent, halo lumineux
   ============================================================ */

// React hooks accessed via React.* to avoid scope collisions across babel scripts

/* ---------- Building 3D wireframe (CSS transforms) ---------- */
const { useState: useStateA, useEffect: useEffectA } = React;

function Building3D({ rotation = 0, height = 460 }) {
  // 4 floors, isometric look via CSS 3D
  const floors = [0, 1, 2, 3];
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        height: height,
        perspective: 1400,
        perspectiveOrigin: '50% 40%',
      }}
    >
      <div
        style={{
          position: 'absolute',
          inset: 0,
          transformStyle: 'preserve-3d',
          transform: `rotateX(58deg) rotateZ(${rotation}deg)`,
          transition: 'transform 0.6s cubic-bezier(.22,.61,.36,1)',
        }}
      >
        {floors.map((f) => (
          <Floor key={f} index={f} total={floors.length} />
        ))}
        {/* Vertical riser (signal column) */}
        <Riser floors={floors.length} />
        {/* Roof signal hub */}
        <SignalHub floors={floors.length} />
      </div>
    </div>
  );
}

function Floor({ index, total }) {
  const floorH = 80;
  const floorW = 320;
  const floorD = 220;
  const z = index * floorH;
  const apartments = [0, 1, 2, 3];
  return (
    <div
      style={{
        position: 'absolute',
        left: '50%',
        top: '50%',
        width: floorW,
        height: floorD,
        marginLeft: -floorW / 2,
        marginTop: -floorD / 2,
        transformStyle: 'preserve-3d',
        transform: `translateZ(${z}px)`,
      }}
    >
      {/* Floor slab outline */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          border: '1px solid rgba(34,211,164,0.55)',
          boxShadow: '0 0 24px rgba(34,211,164,0.15) inset, 0 0 24px rgba(34,211,164,0.08)',
        }}
      />
      {/* Apartment grid lines */}
      {apartments.slice(1).map((a) => (
        <div
          key={'v' + a}
          style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: (floorW / apartments.length) * a,
            width: 1,
            background: 'rgba(34,211,164,0.25)',
          }}
        />
      ))}
      <div
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          top: '50%',
          height: 1,
          background: 'rgba(34,211,164,0.20)',
        }}
      />
      {/* Walls (4 sides) */}
      {[
        { side: 'front', t: `rotateX(-90deg) translateZ(${floorD / 2}px)`, w: floorW, h: floorH },
        { side: 'back',  t: `rotateX(90deg) translateZ(${floorD / 2}px) rotateZ(180deg)`, w: floorW, h: floorH },
        { side: 'left',  t: `rotateY(90deg) rotateX(90deg) translateZ(${floorW / 2}px)`, w: floorD, h: floorH },
        { side: 'right', t: `rotateY(-90deg) rotateX(90deg) translateZ(${floorW / 2}px)`, w: floorD, h: floorH },
      ].map((w) => (
        <div
          key={w.side}
          style={{
            position: 'absolute',
            left: '50%',
            top: '50%',
            width: w.w,
            height: w.h,
            marginLeft: -w.w / 2,
            marginTop: -w.h / 2,
            transformOrigin: 'center',
            transform: w.t,
            border: '1px solid rgba(245,242,235,0.18)',
            background:
              'linear-gradient(180deg, rgba(34,211,164,0.04) 0%, rgba(34,211,164,0) 100%)',
          }}
        >
          {/* windows */}
          <div style={{
            position: 'absolute', inset: '20% 15% 25% 15%',
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
          }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{
                border: '1px solid rgba(245,242,235,0.22)',
                background: i === index ? 'rgba(34,211,164,0.18)' : 'transparent',
                boxShadow: i === index ? '0 0 12px rgba(34,211,164,0.4)' : 'none',
                transition: 'all 0.4s',
              }} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function Riser({ floors }) {
  const totalH = floors * 80;
  return (
    <div
      style={{
        position: 'absolute',
        left: '50%',
        top: '50%',
        width: 4,
        height: totalH,
        marginLeft: -2,
        marginTop: -totalH / 2 + totalH / 2,
        transform: `translateZ(${totalH / 2}px)`,
        background: 'linear-gradient(180deg, rgba(34,211,164,0.6) 0%, rgba(34,211,164,0.2) 100%)',
        boxShadow: '0 0 16px rgba(34,211,164,0.6)',
        borderRadius: 2,
      }}
    >
      {/* Pulsing signals traveling up */}
      <div className="signal-pulse" style={{
        position: 'absolute', left: -3, width: 10, height: 10,
        borderRadius: '50%', background: '#22D3A4',
        boxShadow: '0 0 16px #22D3A4, 0 0 30px #22D3A4',
      }} />
    </div>
  );
}

function SignalHub({ floors }) {
  const z = floors * 80 + 20;
  return (
    <div
      style={{
        position: 'absolute',
        left: '50%',
        top: '50%',
        width: 60,
        height: 60,
        marginLeft: -30,
        marginTop: -30,
        transform: `translateZ(${z}px)`,
        borderRadius: '50%',
        border: '1px solid rgba(34,211,164,0.6)',
        background: 'radial-gradient(circle, rgba(34,211,164,0.25) 0%, transparent 70%)',
        boxShadow: '0 0 40px rgba(34,211,164,0.4)',
      }}
    >
      <div style={{
        position: 'absolute', inset: 18,
        borderRadius: '50%', border: '1px solid rgba(34,211,164,0.8)',
        background: '#22D3A4',
        boxShadow: '0 0 20px #22D3A4',
      }} />
    </div>
  );
}

/* ---------- Direction A artboard ---------- */
function DirAWireframe({ bare = false } = {}) {
  const [rotation, setRotation] = useStateA(35);
  const [phase, setPhase] = useStateA(0);

  useEffectA(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const t = (now - start) / 1000;
      setRotation(35 + Math.sin(t * 0.3) * 8);
      setPhase((t * 0.4) % 1);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div style={{
      position: 'relative',
      width: '100%',
      height: '100%',
      background: 'radial-gradient(ellipse at 50% 30%, #1B2347 0%, #0B1129 60%, #060920 100%)',
      overflow: 'hidden',
      fontFamily: '"Inter", system-ui, sans-serif',
      color: '#F5F2EB',
    }}>
      {/* grid floor */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(245,242,235,0.04) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(245,242,235,0.04) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(circle at 50% 60%, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(circle at 50% 60%, black 30%, transparent 75%)',
      }} />
      {/* halo */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '45%',
        width: 700, height: 700,
        marginLeft: -350, marginTop: -350,
        background: 'radial-gradient(circle, rgba(34,211,164,0.18) 0%, transparent 60%)',
        filter: 'blur(30px)',
      }} />

      {/* Building */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        width: 600, height: 500,
        marginLeft: -300, marginTop: -250,
      }}>
        <Building3D rotation={rotation} />
      </div>

      {/* Annotations */}
      {!bare && <>
        <Annotation x="14%" y="22%" label="App résident" desc="iOS · Android" delay={0.2} />
        <Annotation x="80%" y="28%" label="Cloud Neolia" desc="API · Décomptes" delay={0.4} right />
        <Annotation x="10%" y="62%" label="Interphonie SIP" desc="Vidéo HD · PoE" delay={0.6} />
        <Annotation x="82%" y="68%" label="Sous-comptage" desc="M-Bus · Modbus" delay={0.8} right />
      </>}

      {/* Title overlay */}
      {!bare && <div style={{
        position: 'absolute', left: 40, top: 40,
        fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'rgba(34,211,164,0.9)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 6, height: 6, background: '#22D3A4', borderRadius: '50%', boxShadow: '0 0 8px #22D3A4' }} />
        Architecture · Vue isométrique
      </div>}

      {!bare && <div style={{
        position: 'absolute', right: 40, bottom: 40,
        fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
        letterSpacing: '0.15em', textTransform: 'uppercase',
        color: 'rgba(245,242,235,0.4)',
      }}>
        15 logements · 4 niveaux
      </div>}

      <style>{`
        @keyframes pulseTravel {
          0% { top: 100%; opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 1; }
          100% { top: 0%; opacity: 0; }
        }
        .signal-pulse {
          animation: pulseTravel 2.4s linear infinite;
        }
      `}</style>
    </div>
  );
}

function Annotation({ x, y, label, desc, delay = 0, right = false }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: right ? 'translate(-100%, -50%)' : 'translate(0, -50%)',
      animation: `fadeIn 0.8s ${delay}s both`,
      textAlign: right ? 'right' : 'left',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        flexDirection: right ? 'row-reverse' : 'row',
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%',
          background: '#22D3A4',
          boxShadow: '0 0 12px #22D3A4',
        }} />
        <div style={{
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase',
          color: 'rgba(245,242,235,0.5)',
        }}>{desc}</div>
      </div>
      <div style={{
        marginTop: 4,
        fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em',
        color: '#F5F2EB',
      }}>{label}</div>
      {/* connecting line */}
      <div style={{
        position: 'absolute',
        [right ? 'left' : 'right']: 0,
        top: '50%',
        width: 60, height: 1,
        background: 'linear-gradient(90deg, rgba(34,211,164,0.6), transparent)',
        transform: right ? 'translateX(100%)' : 'translateX(100%)',
      }} />
    </div>
  );
}

window.DirAWireframe = DirAWireframe;