'use client'
// src/components/home/_MiniSceneClient.tsx
// Input: aucun
// Output: pont procédural r3f — scène animée pour le hero
// Rationale: chargé uniquement côté client via next/dynamic (@react-three/fiber SSR-unsafe)

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { SceneWrapper } from '@/components/three/SceneWrapper'

function SensorDot({
  position,
  color = '#34D399',
  phase = 0,
}: {
  position: [number, number, number]
  color?: string
  phase?: number
}) {
  const meshRef = useRef<THREE.Mesh>(null)
  const haloRef = useRef<THREE.Mesh>(null)

  useFrame(({ clock }) => {
    const t = clock.getElapsedTime() + phase
    const pulse = 0.85 + Math.sin(t * 2.5) * 0.15
    if (meshRef.current) {
      meshRef.current.scale.setScalar(pulse)
    }
    if (haloRef.current) {
      const haloOpacity = (Math.sin(t * 2.5) * 0.5 + 0.5) * 0.4
      ;(haloRef.current.material as THREE.MeshBasicMaterial).opacity = haloOpacity
      haloRef.current.scale.setScalar(1 + Math.sin(t * 2.5) * 0.4)
    }
  })

  return (
    <group position={position}>
      <mesh ref={haloRef}>
        <sphereGeometry args={[0.06, 8, 8]} />
        <meshBasicMaterial color={color} transparent opacity={0.3} />
      </mesh>
      <mesh ref={meshRef}>
        <sphereGeometry args={[0.04, 8, 8]} />
        <meshStandardMaterial
          color={color}
          emissive={color}
          emissiveIntensity={1.2}
          roughness={0.2}
          metalness={0.1}
        />
      </mesh>
    </group>
  )
}

function Cable({
  start,
  end,
  color = '#2D4058',
}: {
  start: [number, number, number]
  end: [number, number, number]
  color?: string
}) {
  const s = new THREE.Vector3(...start)
  const e = new THREE.Vector3(...end)
  const dir = new THREE.Vector3().subVectors(e, s)
  const length = dir.length()
  const mid = new THREE.Vector3().addVectors(s, e).multiplyScalar(0.5)

  const axis = new THREE.Vector3(0, 1, 0)
  const dirNorm = dir.clone().normalize()
  const quaternion = new THREE.Quaternion().setFromUnitVectors(axis, dirNorm)
  const euler = new THREE.Euler().setFromQuaternion(quaternion)

  return (
    <mesh position={[mid.x, mid.y, mid.z]} rotation={[euler.x, euler.y, euler.z]}>
      <cylinderGeometry args={[0.008, 0.008, length, 4]} />
      <meshStandardMaterial color={color} roughness={0.8} />
    </mesh>
  )
}

function BridgeMesh() {
  const DECK_LEN = 4.0
  const DECK_W = 0.5
  const DECK_H = 0.12
  const PYLON_H = 1.8
  const PYLON_W = 0.1

  const pylonX = 1.2
  const deckY = 0.0
  const pylonTopY = deckY + PYLON_H

  const deckSensors: Array<[number, number, number]> = [
    [-1.5, deckY + DECK_H / 2 + 0.04, 0],
    [-0.8, deckY + DECK_H / 2 + 0.04, 0],
    [0.0, deckY + DECK_H / 2 + 0.04, 0],
    [0.8, deckY + DECK_H / 2 + 0.04, 0],
    [1.5, deckY + DECK_H / 2 + 0.04, 0],
  ]

  const warningSensor: [number, number, number] = [0.4, deckY + DECK_H / 2 + 0.04, 0]

  const cables: Array<{ start: [number, number, number]; end: [number, number, number] }> = []
  const cableCount = 5
  for (let i = 0; i < cableCount; i++) {
    const t = i / (cableCount - 1)
    const xAnchor = -DECK_LEN / 2 + t * DECK_LEN
    cables.push({ start: [-pylonX, pylonTopY, 0], end: [xAnchor, deckY + DECK_H / 2, 0] })
    cables.push({ start: [pylonX, pylonTopY, 0], end: [xAnchor, deckY + DECK_H / 2, 0] })
  }

  return (
    <group position={[0, -0.3, 0]}>
      <mesh position={[0, deckY, 0]}>
        <boxGeometry args={[DECK_LEN, DECK_H, DECK_W]} />
        <meshStandardMaterial
          color="#0F1620"
          emissive="#3DB8E8"
          emissiveIntensity={0.03}
          roughness={0.7}
          metalness={0.3}
        />
      </mesh>
      <mesh position={[0, deckY - 0.15, 0]}>
        <boxGeometry args={[DECK_LEN * 0.98, 0.1, DECK_W * 0.6]} />
        <meshStandardMaterial color="#0D1520" roughness={0.8} metalness={0.2} />
      </mesh>
      <mesh position={[-pylonX, deckY + PYLON_H / 2, 0]}>
        <cylinderGeometry args={[PYLON_W * 0.6, PYLON_W, PYLON_H, 8]} />
        <meshStandardMaterial
          color="#172030"
          emissive="#3DB8E8"
          emissiveIntensity={0.04}
          roughness={0.5}
          metalness={0.4}
        />
      </mesh>
      <mesh position={[pylonX, deckY + PYLON_H / 2, 0]}>
        <cylinderGeometry args={[PYLON_W * 0.6, PYLON_W, PYLON_H, 8]} />
        <meshStandardMaterial
          color="#172030"
          emissive="#3DB8E8"
          emissiveIntensity={0.04}
          roughness={0.5}
          metalness={0.4}
        />
      </mesh>
      {[-0.3, 0.4, 0.9].map((yOffset, i) => (
        <mesh key={i} position={[-pylonX, deckY + yOffset + 0.05, 0]}>
          <boxGeometry args={[0.25, 0.04, PYLON_W * 1.2]} />
          <meshStandardMaterial color="#172030" roughness={0.6} metalness={0.3} />
        </mesh>
      ))}
      {[-0.3, 0.4, 0.9].map((yOffset, i) => (
        <mesh key={i} position={[pylonX, deckY + yOffset + 0.05, 0]}>
          <boxGeometry args={[0.25, 0.04, PYLON_W * 1.2]} />
          <meshStandardMaterial color="#172030" roughness={0.6} metalness={0.3} />
        </mesh>
      ))}
      {cables.map((c, i) => (
        <Cable key={i} start={c.start} end={c.end} color="#2D4058" />
      ))}
      {deckSensors.map((pos, i) => (
        <SensorDot key={i} position={pos} color="#34D399" phase={i * 0.7} />
      ))}
      <SensorDot position={warningSensor} color="#FBBF24" phase={1.3} />
      <SensorDot position={[-pylonX, deckY + PYLON_H * 0.5, 0]} color="#34D399" phase={2.1} />
      <SensorDot position={[pylonX, deckY + PYLON_H * 0.5, 0]} color="#34D399" phase={2.8} />
      <SensorDot position={[-pylonX, pylonTopY - 0.05, 0]} color="#34D399" phase={0.4} />
      <SensorDot position={[pylonX, pylonTopY - 0.05, 0]} color="#34D399" phase={1.1} />
      {([-1.5, -0.5, 0.5, 1.5] as number[]).map((x, i) => (
        <mesh key={i} position={[x, deckY - 0.5, 0]}>
          <cylinderGeometry args={[0.05, 0.07, 0.9, 6]} />
          <meshStandardMaterial color="#0D1520" roughness={0.8} metalness={0.2} />
        </mesh>
      ))}
      <mesh position={[-DECK_LEN / 2 - 0.1, deckY - 0.5, 0]}>
        <boxGeometry args={[0.35, 0.12, DECK_W * 1.2]} />
        <meshStandardMaterial color="#172030" roughness={0.9} />
      </mesh>
      <mesh position={[DECK_LEN / 2 + 0.1, deckY - 0.5, 0]}>
        <boxGeometry args={[0.35, 0.12, DECK_W * 1.2]} />
        <meshStandardMaterial color="#172030" roughness={0.9} />
      </mesh>
      <pointLight position={[0, 1.5, 1]} intensity={0.4} color="#3DB8E8" distance={6} />
      <pointLight position={[-1.5, 0.5, 0.5]} intensity={0.2} color="#34D399" distance={3} />
    </group>
  )
}

export function MiniSceneClient() {
  return (
    <SceneWrapper
      autoRotate
      autoRotateSpeed={0.6}
      enableInteraction={false}
      className="h-[320px] w-full rounded-lg overflow-hidden"
    >
      <BridgeMesh />
    </SceneWrapper>
  )
}