/* eslint-disable react/no-unknown-property */
'use client';

import React, { useRef, useMemo, useState, useEffect } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, PerspectiveCamera, Stars, Line } from '@react-three/drei';
import { EffectComposer, Bloom } from '@react-three/postprocessing';
import * as THREE from 'three';

// ═══════════════════════════════════════════════════════════════
//  CORE ALGORITHMS
// ═══════════════════════════════════════════════════════════════

// Deterministic hash
function sr(seed: number) {
  const x = Math.sin(seed * 127.1 + 311.7) * 43758.5453;
  return x - Math.floor(x);
}

// ── TERRAIN HEIGHT FUNCTION ──
// SINGLE SOURCE OF TRUTH for terrain elevation.
const TERRAIN_R = 400;
const TERRAIN_CURVATURE = 0.00012; // planetary curvature

function terrainY(x: number, z: number): number {
  const dist = Math.sqrt(x * x + z * z);
  const edge = Math.min(1, dist / TERRAIN_R);
  const h = Math.max(0, 1 - edge * 1.2);

  // Planetary curvature — drops off like the surface of a sphere
  const curvature = -dist * dist * TERRAIN_CURVATURE;

  // Multi-octave noise for rolling hills
  let y = 0;
  y += Math.sin(x * 0.025 + 1.2) * Math.cos(z * 0.02 + 0.8) * 3.5 * h;
  y += Math.sin(x * 0.05 + 3.0) * Math.cos(z * 0.04 + 2.0) * 1.8 * h;
  y += Math.sin(x * 0.1 + 5.0) * Math.cos(z * 0.08 + 4.0) * 0.6 * h;
  y += Math.sin(x * 0.015) * Math.cos(z * 0.018 + 6.0) * 4.0 * h;

  // Edge drop-off
  y -= edge * edge * 40;

  return y + curvature;
}

function onTerrain(x: number, z: number): THREE.Vector3 {
  return new THREE.Vector3(x, terrainY(x, z), z);
}

// ── CATENARY CABLE ──
function catenarySag(t: number): number {
  const u = t * 2 - 1;
  const cEdge = Math.cosh(2.5);
  return -(cEdge - Math.cosh(u * 2.5)) / (cEdge - 1);
}

function catenaryPoints(
  p1: THREE.Vector3, p2: THREE.Vector3,
  sag: number, segments: number = 20,
): THREE.Vector3[] {
  const pts: THREE.Vector3[] = [];
  for (let i = 0; i <= segments; i++) {
    const t = i / segments;
    pts.push(new THREE.Vector3(
      p1.x + (p2.x - p1.x) * t,
      p1.y + (p2.y - p1.y) * t + catenarySag(t) * sag,
      p1.z + (p2.z - p1.z) * t,
    ));
  }
  return pts;
}

// ── POISSON DISC SAMPLING ──
function poissonDisc(
  count: number, radius: number, bounds: number, seed: number,
  exclusions: THREE.Vector3[] = [], exRadius = 18,
): THREE.Vector3[] {
  const pts: THREE.Vector3[] = [];
  const attempts = count * 15;
  for (let i = 0; i < attempts && pts.length < count; i++) {
    const x = (sr(seed + i * 17) - 0.5) * bounds * 2;
    const z = (sr(seed + i * 23 + 1000) - 0.5) * bounds * 2;
    if (Math.sqrt(x * x + z * z) > TERRAIN_R * 0.7) continue;
    if (pts.some(p => Math.hypot(x - p.x, z - p.z) < radius)) continue;
    if (exclusions.some(p => Math.hypot(x - p.x, z - p.z) < exRadius)) continue;
    pts.push(onTerrain(x, z));
  }
  return pts;
}

function nearest(pt: THREE.Vector3, list: THREE.Vector3[]): THREE.Vector3 {
  let best = list[0], bestD = Infinity;
  for (const c of list) {
    const d = Math.hypot(pt.x - c.x, pt.z - c.z);
    if (d < bestD) { bestD = d; best = c; }
  }
  return best;
}

// ═══════════════════════════════════════════════════════════════
//  PROCEDURAL WORLD
// ═══════════════════════════════════════════════════════════════

// Hub substations — central distribution points
const HUBS = [onTerrain(-10, 20), onTerrain(60, -5)];

// Cities at the periphery with their substations
const CITY_DATA = [
  { city: onTerrain(150, -80), sub: onTerrain(125, -65) },
  { city: onTerrain(140, 85), sub: onTerrain(115, 70) },
  { city: onTerrain(-15, -150), sub: onTerrain(-12, -125) },
  { city: onTerrain(-140, 40), sub: onTerrain(-115, 35) },
  { city: onTerrain(30, 160), sub: onTerrain(28, 135) },
];

// Wind farm generation
type WindFarm = {
  sub: THREE.Vector3;
  turbines: THREE.Vector3[];
  chains: THREE.Vector3[][];
};

function placeWindFarm(
  cx: number, cz: number,
  cols: number, rows: number,
  spacing: number,
  subOffX: number, subOffZ: number,
  rotDeg: number, seed: number,
): WindFarm {
  const rad = (rotDeg * Math.PI) / 180;
  const co = Math.cos(rad), si = Math.sin(rad);
  const grid: THREE.Vector3[][] = [];
  const turbines: THREE.Vector3[] = [];

  for (let r = 0; r < rows; r++) {
    const row: THREE.Vector3[] = [];
    for (let c = 0; c < cols; c++) {
      const lx = (c - (cols - 1) / 2) * spacing + (sr(seed + r * 10 + c) - 0.5) * 3;
      const lz = (r - (rows - 1) / 2) * spacing + (sr(seed + r * 10 + c + 50) - 0.5) * 3;
      const wx = cx + lx * co - lz * si;
      const wz = cz + lx * si + lz * co;
      const pos = onTerrain(wx, wz);
      turbines.push(pos);
      row.push(pos);
    }
    grid.push(row);
  }

  const sub = onTerrain(cx + subOffX, cz + subOffZ);
  const chains: THREE.Vector3[][] = grid.map(row => [...row, sub]);

  return { sub, turbines, chains };
}

const WIND_FARMS: WindFarm[] = [
  placeWindFarm(-120, 90, 4, 3, 16, 40, -15, 5, 101),
  placeWindFarm(25, 130, 3, 3, 15, -28, -20, 12, 201),
  placeWindFarm(-75, -35, 3, 3, 14, 28, 18, -8, 301),
  placeWindFarm(100, 75, 4, 2, 14, -30, -18, 3, 401),
  placeWindFarm(-150, -15, 3, 2, 16, 28, 10, 0, 501),
  placeWindFarm(130, -90, 3, 3, 14, -32, 15, -6, 601),
  placeWindFarm(-90, 140, 3, 2, 15, 24, -20, 18, 701),
  placeWindFarm(65, -120, 3, 3, 14, -22, 25, 0, 801),
  placeWindFarm(-40, 60, 2, 3, 14, 20, -16, 10, 901),
  placeWindFarm(170, 20, 3, 2, 15, -30, 12, -3, 1001),
];

// Solar parks with substations at edge
type SolarPark = { pos: THREE.Vector3; sub: THREE.Vector3; rows: number; cols: number };

const SOLAR_PARKS: SolarPark[] = [
  { pos: onTerrain(-170, -80), sub: onTerrain(-145, -70), rows: 7, cols: 10 },
  { pos: onTerrain(-155, -105), sub: onTerrain(-145, -70), rows: 6, cols: 8 },
  { pos: onTerrain(145, 28), sub: onTerrain(130, 20), rows: 6, cols: 9 },
  { pos: onTerrain(-70, -100), sub: onTerrain(-58, -85), rows: 5, cols: 7 },
  { pos: onTerrain(85, -30), sub: onTerrain(75, -20), rows: 6, cols: 8 },
  { pos: onTerrain(-125, 50), sub: onTerrain(-110, 42), rows: 5, cols: 6 },
  { pos: onTerrain(50, -170), sub: onTerrain(48, -148), rows: 5, cols: 7 },
  { pos: onTerrain(-30, -160), sub: onTerrain(-25, -138), rows: 6, cols: 8 },
];

// Deduplicated solar subs
const solarSubSet = new Set<string>();
const SOLAR_SUBS: THREE.Vector3[] = [];
SOLAR_PARKS.forEach(sp => {
  const k = `${sp.sub.x.toFixed(1)},${sp.sub.z.toFixed(1)}`;
  if (!solarSubSet.has(k)) { solarSubSet.add(k); SOLAR_SUBS.push(sp.sub); }
});

// Collect all generation subs and auto-route to hubs
const ALL_GEN_SUBS = [...WIND_FARMS.map(f => f.sub), ...SOLAR_SUBS];
const ALL_CITY_SUBS = CITY_DATA.map(c => c.sub);
const ALL_SUBS = [...ALL_GEN_SUBS, ...HUBS, ...ALL_CITY_SUBS];

// Tower routing
const TWR_H = 12;
function lerpRoute(from: THREE.Vector3, to: THREE.Vector3, n: number): THREE.Vector3[] {
  const pts = [from];
  for (let i = 1; i <= n; i++) {
    const t = i / (n + 1);
    pts.push(onTerrain(from.x + (to.x - from.x) * t, from.z + (to.z - from.z) * t));
  }
  pts.push(to);
  return pts;
}
function autoTowerCount(a: THREE.Vector3, b: THREE.Vector3) {
  return Math.max(2, Math.floor(Math.hypot(a.x - b.x, a.z - b.z) / 28));
}

const HSVL_ROUTES: THREE.Vector3[][] = [];
ALL_GEN_SUBS.forEach(sub => {
  const hub = nearest(sub, HUBS);
  HSVL_ROUTES.push(lerpRoute(sub, hub, autoTowerCount(sub, hub)));
});
HSVL_ROUTES.push(lerpRoute(HUBS[0], HUBS[1], autoTowerCount(HUBS[0], HUBS[1])));
CITY_DATA.forEach(cd => {
  const hub = nearest(cd.sub, HUBS);
  HSVL_ROUTES.push(lerpRoute(hub, cd.sub, autoTowerCount(hub, cd.sub)));
});

// Distribution cables: solar→sub, sub→city
const DIST_CABLES: [THREE.Vector3, THREE.Vector3][] = [
  ...SOLAR_PARKS.map(sp => [sp.pos, sp.sub] as [THREE.Vector3, THREE.Vector3]),
  ...CITY_DATA.map(cd => [cd.sub, cd.city] as [THREE.Vector3, THREE.Vector3]),
];

// All infrastructure for exclusion zones
const ALL_INFRA: THREE.Vector3[] = [
  ...ALL_SUBS,
  ...CITY_DATA.map(c => c.city),
  ...WIND_FARMS.flatMap(f => f.turbines),
  ...SOLAR_PARKS.map(s => s.pos),
];

// Forest positions via Poisson disc
const FOREST_POSITIONS = poissonDisc(80, 22, 220, 5000, ALL_INFRA, 18);

// ═══════════════════════════════════════════════════════════════
//  TERRAIN MESH
// ═══════════════════════════════════════════════════════════════
const Terrain = () => {
  const geometry = useMemo(() => {
    const geo = new THREE.CircleGeometry(TERRAIN_R, 256);
    const pos = geo.attributes.position;
    for (let i = 0; i < pos.count; i++) {
      const x = pos.getX(i);
      const z = -pos.getY(i);
      pos.setX(i, x);
      pos.setY(i, terrainY(x, z));
      pos.setZ(i, z);
    }
    geo.computeVertexNormals();
    return geo;
  }, []);

  return (
    <group>
      <mesh geometry={geometry}>
        <meshStandardMaterial
          color="#010a18"
          roughness={0.92}
          metalness={0.08}
          envMapIntensity={0.3}
        />
      </mesh>
      <mesh geometry={geometry} position={[0, 0.08, 0]}>
        <meshBasicMaterial
          color="#0a3060"
          wireframe
          transparent
          opacity={0.06}
        />
      </mesh>
      {/* Subtle grid glow on terrain */}
      <mesh geometry={geometry} position={[0, 0.12, 0]}>
        <meshBasicMaterial
          color="#0055aa"
          wireframe
          transparent
          opacity={0.03}
        />
      </mesh>
    </group>
  );
};

// ═══════════════════════════════════════════════════════════════
//  COMPONENTS
// ═══════════════════════════════════════════════════════════════

// ── SOLAR FIELD ──
const SolarField = ({ position, rows = 5, cols = 7 }: { position: THREE.Vector3; rows?: number; cols?: number }) => (
  <group position={position}>
    {Array.from({ length: rows }).map((_, r) =>
      Array.from({ length: cols }).map((_, c) => (
        <group key={`${r}-${c}`} position={[c * 2.5 - (cols * 2.5) / 2, 0, r * 2.2 - (rows * 2.2) / 2]}>
          {/* Post */}
          <mesh position={[0, 0.4, 0]}>
            <cylinderGeometry args={[0.025, 0.025, 0.8, 4]} />
            <meshBasicMaterial color="#1a4a70" transparent opacity={0.4} />
          </mesh>
          {/* Panel */}
          <group position={[0, 0.8, 0]} rotation={[-Math.PI / 4.5, 0, 0]}>
            <mesh>
              <boxGeometry args={[2, 1.2, 0.04]} />
              <meshStandardMaterial
                color="#060e22"
                emissive="#003366"
                emissiveIntensity={0.5}
                metalness={0.95}
                roughness={0.05}
              />
            </mesh>
            {/* Grid lines on panel */}
            <mesh position={[0, 0, 0.025]}>
              <boxGeometry args={[2, 1.2, 0.01]} />
              <meshBasicMaterial
                color="#2288cc"
                wireframe
                transparent
                opacity={0.12}
                toneMapped={false}
              />
            </mesh>
            {/* Subtle blue reflection shine */}
            <mesh position={[0, 0, 0.03]}>
              <planeGeometry args={[1.8, 0.3]} />
              <meshBasicMaterial
                color="#4488ff"
                transparent
                opacity={0.08}
                toneMapped={false}
              />
            </mesh>
          </group>
        </group>
      ))
    )}
  </group>
);

// ── WIND TURBINE ──
const TURBINE_H = 8;
const BLADE_L = 4;

const WindTurbine = ({ position, seed = 0 }: { position: THREE.Vector3; seed?: number }) => {
  const bladesRef = useRef<THREE.Group>(null);
  const speed = 1.5 + sr(seed * 7) * 1.5;
  useFrame((s) => {
    if (bladesRef.current) bladesRef.current.rotation.z = s.clock.elapsedTime * speed;
  });

  return (
    <group position={position}>
      {/* Tower — tapered */}
      <mesh position={[0, TURBINE_H / 2, 0]}>
        <cylinderGeometry args={[0.08, 0.18, TURBINE_H, 6]} />
        <meshStandardMaterial
          color="#88bbdd"
          emissive="#2266aa"
          emissiveIntensity={0.15}
          metalness={0.7}
          roughness={0.3}
          transparent
          opacity={0.7}
        />
      </mesh>
      {/* Nacelle */}
      <mesh position={[0, TURBINE_H, -0.18]}>
        <boxGeometry args={[0.25, 0.22, 0.5]} />
        <meshStandardMaterial
          color="#aaddee"
          emissive="#3388bb"
          emissiveIntensity={0.2}
          metalness={0.6}
          roughness={0.4}
          transparent
          opacity={0.7}
        />
      </mesh>
      {/* Rotor hub + blades */}
      <group position={[0, TURBINE_H, 0.08]} ref={bladesRef}>
        <mesh>
          <sphereGeometry args={[0.12, 8, 8]} />
          <meshBasicMaterial color="#aaeeff" toneMapped={false} />
        </mesh>
        {[0, 1, 2].map(i => (
          <group key={i} rotation={[0, 0, (i * Math.PI * 2) / 3]}>
            <mesh position={[0, BLADE_L / 2 + 0.12, 0]}>
              <boxGeometry args={[0.14, BLADE_L, 0.025]} />
              <meshBasicMaterial
                color="#88ddff"
                transparent
                opacity={0.5}
                toneMapped={false}
              />
            </mesh>
          </group>
        ))}
      </group>
    </group>
  );
};

// ── SUBSTATION ──
const Substation = ({ position, size = 'small' }: { position: THREE.Vector3; size?: 'small' | 'large' }) => {
  const s = size === 'large' ? 1.5 : 0.9;
  const pulseRef = useRef<THREE.Mesh>(null);
  useFrame((st) => {
    if (pulseRef.current) {
      const pulse = 1 + Math.sin(st.clock.elapsedTime * 3) * 0.2;
      pulseRef.current.scale.setScalar(pulse);
    }
  });

  return (
    <group position={position}>
      {/* Fenced area */}
      <mesh position={[0, 0.9 * s, 0]}>
        <boxGeometry args={[5 * s, 1.8 * s, 3.5 * s]} />
        <meshBasicMaterial
          color="#2288aa"
          wireframe
          transparent
          opacity={0.15}
          toneMapped={false}
        />
      </mesh>
      {/* Ground pad */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.05, 0]}>
        <planeGeometry args={[5 * s, 3.5 * s]} />
        <meshStandardMaterial
          color="#0a1825"
          roughness={0.9}
          metalness={0.1}
        />
      </mesh>
      {/* Transformers */}
      {[[-1 * s, -0.6 * s], [1 * s, -0.6 * s], [0, 0.7 * s]].map(([x, z], i) => (
        <group key={i} position={[x, 0, z]}>
          <mesh position={[0, 0.55 * s, 0]}>
            <boxGeometry args={[0.9 * s, 1.1 * s, 0.7 * s]} />
            <meshStandardMaterial
              color="#0c1e35"
              emissive="#0a2040"
              emissiveIntensity={0.4}
              metalness={0.7}
              roughness={0.3}
            />
          </mesh>
          {/* Wireframe overlay */}
          <mesh position={[0, 0.55 * s, 0]}>
            <boxGeometry args={[0.95 * s, 1.15 * s, 0.75 * s]} />
            <meshBasicMaterial
              color="#3399bb"
              wireframe
              transparent
              opacity={0.12}
              toneMapped={false}
            />
          </mesh>
          {/* Insulator */}
          <mesh position={[0, 1.2 * s, 0]}>
            <cylinderGeometry args={[0.04 * s, 0.07 * s, 0.35 * s, 4]} />
            <meshBasicMaterial
              color="#66ccee"
              transparent
              opacity={0.6}
              toneMapped={false}
            />
          </mesh>
        </group>
      ))}
      {/* Bus bar */}
      <mesh position={[0, 1.3 * s, -0.5 * s]} rotation={[0, 0, Math.PI / 2]}>
        <cylinderGeometry args={[0.03, 0.03, 3 * s, 4]} />
        <meshBasicMaterial
          color="#55ffaa"
          transparent
          opacity={0.4}
          toneMapped={false}
        />
      </mesh>
      {/* Pulsing energy indicator */}
      <mesh position={[0, 1.8 * s, 0]} ref={pulseRef}>
        <sphereGeometry args={[0.25 * s, 10, 10]} />
        <meshBasicMaterial color="#50ff88" toneMapped={false} />
      </mesh>
    </group>
  );
};

// ── CITY ──
const City = ({ position, seed = 0 }: { position: THREE.Vector3; seed?: number }) => {
  const buildings = useMemo(() => {
    const items = [];
    const count = 14 + Math.floor(sr(seed * 3) * 10);
    for (let i = 0; i < count; i++) {
      const angle = sr(seed * 100 + i * 17) * Math.PI * 2;
      const radius = 0.8 + sr(seed * 100 + i * 29) * 8;
      const height = 1.2 + sr(seed * 100 + i * 37) * 5;
      items.push({
        x: Math.cos(angle) * radius,
        z: Math.sin(angle) * radius,
        height,
        width: 0.5 + sr(seed * 100 + i * 43) * 1,
        depth: 0.5 + sr(seed * 100 + i * 47) * 0.8,
        rows: Math.max(1, Math.floor(height / 0.8)),
      });
    }
    return items;
  }, [seed]);

  return (
    <group position={position}>
      {buildings.map((b, i) => (
        <group key={i} position={[b.x, 0, b.z]}>
          {/* Building body */}
          <mesh position={[0, b.height / 2, 0]}>
            <boxGeometry args={[b.width, b.height, b.depth]} />
            <meshStandardMaterial
              color="#030810"
              emissive="#0a1830"
              emissiveIntensity={0.2}
              metalness={0.9}
              roughness={0.1}
            />
          </mesh>
          {/* Building edge glow */}
          <mesh position={[0, b.height / 2, 0]}>
            <boxGeometry args={[b.width + 0.02, b.height + 0.02, b.depth + 0.02]} />
            <meshBasicMaterial
              color="#1144aa"
              wireframe
              transparent
              opacity={0.06}
              toneMapped={false}
            />
          </mesh>
          {/* Windows — glowing */}
          {Array.from({ length: b.rows }).map((_, row) => {
            const wc = Math.max(1, Math.floor(b.width / 0.35));
            return Array.from({ length: wc }).map((_, col) => {
              if (sr(seed * 1000 + i * 100 + row * 10 + col) < 0.2) return null;
              const isWarm = sr(seed * 2000 + i * 50 + row + col) > 0.4;
              const color = isWarm ? '#ffcc33' : '#88ccff';
              const intensity = 0.6 + sr(seed * 3000 + i * 30 + row * 5 + col) * 0.4;
              const xP = wc > 1 ? (col / (wc - 1) - 0.5) * (b.width * 0.7) : 0;
              return (
                <group key={`w-${row}-${col}`}>
                  <mesh position={[xP, 0.4 + row * 0.8, b.depth / 2 + 0.01]}>
                    <planeGeometry args={[0.2, 0.26]} />
                    <meshBasicMaterial
                      color={color}
                      transparent
                      opacity={intensity}
                      toneMapped={false}
                    />
                  </mesh>
                  <mesh position={[xP, 0.4 + row * 0.8, -b.depth / 2 - 0.01]} rotation={[0, Math.PI, 0]}>
                    <planeGeometry args={[0.2, 0.26]} />
                    <meshBasicMaterial
                      color={color}
                      transparent
                      opacity={intensity * 0.8}
                      toneMapped={false}
                    />
                  </mesh>
                </group>
              );
            });
          })}
          {/* Rooftop light */}
          <mesh position={[0, b.height + 0.1, 0]}>
            <sphereGeometry args={[0.06, 4, 4]} />
            <meshBasicMaterial
              color="#ff3333"
              toneMapped={false}
            />
          </mesh>
        </group>
      ))}
      {/* City ambient glow */}
      <pointLight
        position={[0, 6, 0]}
        intensity={10}
        color="#ffaa44"
        distance={100}
        decay={2}
      />
      <pointLight
        position={[0, 2, 0]}
        intensity={5}
        color="#ffdd88"
        distance={40}
        decay={2}
      />
    </group>
  );
};

// ═══════════════════════════════════════════════════════════════
//  TRANSMISSION TOWER — lattice-style pylon
// ═══════════════════════════════════════════════════════════════
const TransmissionTower = ({ position }: { position: THREE.Vector3 }) => (
  <group position={position}>
    {/* Main tower body — tapered */}
    <mesh position={[0, TWR_H / 2, 0]}>
      <cylinderGeometry args={[0.18, 0.7, TWR_H, 4]} />
      <meshBasicMaterial
        color="#5599cc"
        transparent
        opacity={0.45}
        toneMapped={false}
      />
    </mesh>
    {/* Wireframe lattice overlay */}
    <mesh position={[0, TWR_H / 2, 0]}>
      <cylinderGeometry args={[0.22, 0.75, TWR_H, 4]} />
      <meshBasicMaterial
        color="#4488bb"
        wireframe
        transparent
        opacity={0.18}
        toneMapped={false}
      />
    </mesh>
    {/* Top cross-arm */}
    <mesh position={[0, TWR_H, 0]} rotation={[0, 0, Math.PI / 2]}>
      <cylinderGeometry args={[0.05, 0.05, 4.5, 4]} />
      <meshBasicMaterial
        color="#6699cc"
        transparent
        opacity={0.5}
        toneMapped={false}
      />
    </mesh>
    {/* Middle cross-arm */}
    <mesh position={[0, TWR_H * 0.72, 0]} rotation={[0, 0, Math.PI / 2]}>
      <cylinderGeometry args={[0.04, 0.04, 3.2, 4]} />
      <meshBasicMaterial
        color="#5588aa"
        transparent
        opacity={0.35}
        toneMapped={false}
      />
    </mesh>
    {/* Insulator tips */}
    {[-2, -0.8, 0.8, 2].map((xOff, i) => (
      <mesh key={i} position={[xOff, TWR_H - 0.3, 0]}>
        <cylinderGeometry args={[0.02, 0.05, 0.5, 4]} />
        <meshBasicMaterial
          color="#88ccee"
          transparent
          opacity={0.45}
          toneMapped={false}
        />
      </mesh>
    ))}
    {/* Aviation light */}
    <mesh position={[0, TWR_H + 0.4, 0]}>
      <sphereGeometry args={[0.12, 6, 6]} />
      <meshBasicMaterial
        color="#ff3333"
        toneMapped={false}
      />
    </mesh>
  </group>
);

// ═══════════════════════════════════════════════════════════════
//  CABLE NETWORK
// ═══════════════════════════════════════════════════════════════
const CableNetwork = () => {
  const cables = useMemo(() => {
    const result: { points: THREE.Vector3[]; color: string; width: number; opacity: number }[] = [];

    // HSVL cables: tower-top to tower-top with catenary sag
    HSVL_ROUTES.forEach(route => {
      for (let i = 1; i < route.length; i++) {
        const a = route[i - 1].clone(); a.y += TWR_H;
        const b = route[i].clone(); b.y += TWR_H;
        result.push({
          points: catenaryPoints(a, b, 3, 24),
          color: '#5599cc', width: 1.5, opacity: 0.35,
        });
      }
    });

    // Distribution cables
    DIST_CABLES.forEach(([from, to]) => {
      const a = from.clone(); a.y += 6;
      const b = to.clone(); b.y += 6;
      result.push({
        points: catenaryPoints(a, b, 2, 18),
        color: '#44bb88', width: 1.2, opacity: 0.3,
      });
    });

    // Wind farm internal chains
    WIND_FARMS.forEach(farm => {
      farm.chains.forEach(chain => {
        for (let i = 1; i < chain.length; i++) {
          const a = chain[i - 1].clone(); a.y += 0.4;
          const b = chain[i].clone(); b.y += 0.4;
          result.push({
            points: catenaryPoints(a, b, 0.4, 10),
            color: '#30ee70', width: 0.8, opacity: 0.18,
          });
        }
      });
    });

    return result;
  }, []);

  const towers = useMemo(() => {
    const pts: THREE.Vector3[] = [];
    HSVL_ROUTES.forEach(route => {
      for (let i = 1; i < route.length - 1; i++) pts.push(route[i]);
    });
    return pts;
  }, []);

  return (
    <group>
      {towers.map((pos, i) => <TransmissionTower key={`t-${i}`} position={pos} />)}
      {cables.map((c, i) => (
        <Line
          key={`c-${i}`}
          points={c.points}
          color={c.color}
          lineWidth={c.width}
          transparent
          opacity={c.opacity}
        />
      ))}
    </group>
  );
};

// ═══════════════════════════════════════════════════════════════
//  FOREST
// ═══════════════════════════════════════════════════════════════
const Forest = ({ position, seed = 0, count = 30 }: { position: THREE.Vector3; seed?: number; count?: number }) => {
  const trees = useMemo(() => {
    const items = [];
    for (let i = 0; i < count; i++) {
      const angle = sr(seed * 200 + i * 11) * Math.PI * 2;
      const radius = sr(seed * 200 + i * 23) * 18;
      const wx = position.x + Math.cos(angle) * radius;
      const wz = position.z + Math.sin(angle) * radius;
      if (ALL_INFRA.some(p => Math.hypot(wx - p.x, wz - p.z) < 12)) continue;
      if (Math.sqrt(wx * wx + wz * wz) > TERRAIN_R * 0.68) continue;

      const localY = terrainY(wx, wz) - position.y;
      const trunkH = 0.5 + sr(seed * 200 + i * 31) * 1.2;
      const canopyH = 0.8 + sr(seed * 200 + i * 37) * 2;
      const canopyR = 0.25 + sr(seed * 200 + i * 43) * 0.5;
      const shade = sr(seed * 200 + i * 47);
      items.push({
        x: Math.cos(angle) * radius,
        y: localY,
        z: Math.sin(angle) * radius,
        trunkH, canopyH, canopyR, shade,
        brightness: 0.15 + sr(seed * 200 + i * 41) * 0.25,
      });
    }
    return items;
  }, [seed, count, position]);

  return (
    <group position={position}>
      {trees.map((t, i) => (
        <group key={i} position={[t.x, t.y, t.z]}>
          {/* Trunk */}
          <mesh position={[0, t.trunkH / 2, 0]}>
            <cylinderGeometry args={[0.035, 0.07, t.trunkH, 4]} />
            <meshBasicMaterial
              color="#0f2a1e"
              transparent
              opacity={0.5}
            />
          </mesh>
          {/* Lower canopy */}
          <mesh position={[0, t.trunkH + t.canopyH / 2, 0]}>
            <coneGeometry args={[t.canopyR, t.canopyH, 5]} />
            <meshBasicMaterial
              color={t.shade > 0.6 ? '#12aa40' : t.shade > 0.3 ? '#159050' : '#0d7545'}
              transparent
              opacity={t.brightness}
              toneMapped={false}
            />
          </mesh>
          {/* Upper canopy layer */}
          <mesh position={[0, t.trunkH + t.canopyH * 0.7, 0]}>
            <coneGeometry args={[t.canopyR * 0.55, t.canopyH * 0.45, 5]} />
            <meshBasicMaterial
              color={t.shade > 0.5 ? '#1cc855' : '#15b048'}
              transparent
              opacity={t.brightness * 0.6}
              toneMapped={false}
            />
          </mesh>
        </group>
      ))}
    </group>
  );
};

// ═══════════════════════════════════════════════════════════════
//  ENERGY PARTICLES — flow along all cables
// ═══════════════════════════════════════════════════════════════
const EnergyParticles = () => {
  const meshRef = useRef<THREE.InstancedMesh>(null);
  const dummy = useMemo(() => new THREE.Object3D(), []);

  const curves = useMemo(() => {
    const all: THREE.CatmullRomCurve3[] = [];
    // HSVL
    HSVL_ROUTES.forEach(route => {
      for (let i = 1; i < route.length; i++) {
        const a = route[i - 1].clone(); a.y += TWR_H;
        const b = route[i].clone(); b.y += TWR_H;
        all.push(new THREE.CatmullRomCurve3(catenaryPoints(a, b, 3, 14)));
      }
    });
    // Distribution
    DIST_CABLES.forEach(([from, to]) => {
      const a = from.clone(); a.y += 6;
      const b = to.clone(); b.y += 6;
      all.push(new THREE.CatmullRomCurve3(catenaryPoints(a, b, 2, 12)));
    });
    // Farm chains
    WIND_FARMS.forEach(farm => {
      farm.chains.forEach(chain => {
        for (let i = 1; i < chain.length; i++) {
          const a = chain[i - 1].clone(); a.y += 0.4;
          const b = chain[i].clone(); b.y += 0.4;
          all.push(new THREE.CatmullRomCurve3(catenaryPoints(a, b, 0.4, 8)));
        }
      });
    });
    return all;
  }, []);

  const perCurve = 5;
  const total = curves.length * perCurve;
  const data = useMemo(() => {
    const items = [];
    for (let c = 0; c < curves.length; c++)
      for (let p = 0; p < perCurve; p++)
        items.push({
          curve: c,
          t: p / perCurve,
          speed: 0.25 + sr(c * 100 + p * 7) * 0.4,
          phase: sr(c * 100 + p * 13) * Math.PI * 2,
        });
    return items;
  }, [curves]);

  useFrame((state, delta) => {
    if (!meshRef.current) return;
    data.forEach((d, i) => {
      d.t += delta * d.speed;
      if (d.t > 1) d.t -= 1;
      const p = curves[d.curve].getPointAt(d.t);
      dummy.position.copy(p);
      const pulse = 0.4 + Math.sin(state.clock.elapsedTime * 8 + d.phase) * 0.35;
      dummy.scale.setScalar(pulse);
      dummy.updateMatrix();
      meshRef.current!.setMatrixAt(i, dummy.matrix);
    });
    meshRef.current.instanceMatrix.needsUpdate = true;
  });

  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, total]}>
      <sphereGeometry args={[0.2, 8, 8]} />
      <meshBasicMaterial
        color="#70ffaa"
        toneMapped={false}
      />
    </instancedMesh>
  );
};

// ═══════════════════════════════════════════════════════════════
//  AMBIENT ENERGY MOTES
// ═══════════════════════════════════════════════════════════════
const AmbientMotes = () => {
  const meshRef = useRef<THREE.InstancedMesh>(null);
  const count = 350;
  const dummy = useMemo(() => new THREE.Object3D(), []);
  const motes = useMemo(() =>
    Array.from({ length: count }, (_, i) => ({
      x: (sr(i * 7 + 1) - 0.5) * 320,
      y: 4 + sr(i * 13 + 2) * 25,
      z: (sr(i * 19 + 3) - 0.5) * 320,
      speed: 0.08 + sr(i * 23 + 4) * 0.25,
      phase: sr(i * 29 + 5) * Math.PI * 2,
    })), []);

  useFrame((state) => {
    if (!meshRef.current) return;
    motes.forEach((m, i) => {
      dummy.position.set(
        m.x + Math.sin(state.clock.elapsedTime * m.speed + m.phase) * 4,
        m.y + Math.sin(state.clock.elapsedTime * m.speed * 0.6 + m.phase) * 3,
        m.z + Math.cos(state.clock.elapsedTime * m.speed + m.phase) * 4,
      );
      const s = 0.25 + Math.sin(state.clock.elapsedTime * 2.5 + m.phase) * 0.2;
      dummy.scale.setScalar(s);
      dummy.updateMatrix();
      meshRef.current!.setMatrixAt(i, dummy.matrix);
    });
    meshRef.current.instanceMatrix.needsUpdate = true;
  });

  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <sphereGeometry args={[0.07, 5, 5]} />
      <meshBasicMaterial
        color="#40ff90"
        transparent
        opacity={0.3}
        toneMapped={false}
      />
    </instancedMesh>
  );
};

// ═══════════════════════════════════════════════════════════════
//  GROUND FOG PARTICLES — atmospheric haze near terrain
// ═══════════════════════════════════════════════════════════════
const GroundFog = () => {
  const meshRef = useRef<THREE.InstancedMesh>(null);
  const count = 120;
  const dummy = useMemo(() => new THREE.Object3D(), []);
  const particles = useMemo(() =>
    Array.from({ length: count }, (_, i) => {
      const x = (sr(i * 31 + 100) - 0.5) * TERRAIN_R * 1.6;
      const z = (sr(i * 37 + 200) - 0.5) * TERRAIN_R * 1.6;
      return {
        x,
        y: terrainY(x, z) + 0.5 + sr(i * 43 + 300) * 3,
        z,
        scale: 8 + sr(i * 47 + 400) * 15,
        speed: 0.02 + sr(i * 53 + 500) * 0.04,
        phase: sr(i * 59 + 600) * Math.PI * 2,
      };
    }), []);

  useFrame((state) => {
    if (!meshRef.current) return;
    particles.forEach((p, i) => {
      dummy.position.set(
        p.x + Math.sin(state.clock.elapsedTime * p.speed + p.phase) * 5,
        p.y,
        p.z + Math.cos(state.clock.elapsedTime * p.speed + p.phase) * 5,
      );
      dummy.scale.setScalar(p.scale);
      dummy.updateMatrix();
      meshRef.current!.setMatrixAt(i, dummy.matrix);
    });
    meshRef.current.instanceMatrix.needsUpdate = true;
  });

  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <sphereGeometry args={[1, 6, 6]} />
      <meshBasicMaterial
        color="#051828"
        transparent
        opacity={0.15}
        depthWrite={false}
      />
    </instancedMesh>
  );
};

// ═══════════════════════════════════════════════════════════════
//  SCENE
// ═══════════════════════════════════════════════════════════════
const Scene = () => (
  <>
    <PerspectiveCamera makeDefault position={[0, 110, 180]} fov={48} near={0.5} far={600} />
    <OrbitControls
      enableZoom={false}
      enablePan={false}
      autoRotate
      autoRotateSpeed={0.25}
      maxPolarAngle={Math.PI / 2.2}
      minPolarAngle={Math.PI / 6}
    />

    {/* Lighting */}
    <ambientLight intensity={0.25} color="#88aacc" />
    <directionalLight position={[80, 120, 60]} intensity={1.8} color="#aaddff" />
    <directionalLight position={[-60, 80, -40]} intensity={0.6} color="#4466aa" />
    <pointLight position={[-80, 50, -60]} intensity={3} color="#40ff80" distance={200} decay={2} />
    <pointLight position={[80, 40, 70]} intensity={2} color="#2060ff" distance={180} decay={2} />
    <pointLight position={[0, 60, 0]} intensity={1.5} color="#0044aa" distance={250} decay={2} />

    {/* Starfield */}
    <Stars
      radius={380}
      depth={120}
      count={22000}
      factor={5}
      saturation={0.1}
      fade
      speed={0.2}
    />

    {/* Atmospheric fog */}
    <fog attach="fog" args={['#020e1e', 60, 280]} />

    <Terrain />
    <GroundFog />

    {/* Solar parks */}
    {SOLAR_PARKS.map((sp, i) => (
      <SolarField key={`sp-${i}`} position={sp.pos} rows={sp.rows} cols={sp.cols} />
    ))}

    {/* Wind farms */}
    {WIND_FARMS.flatMap((farm, fi) =>
      farm.turbines.map((pos, ti) => (
        <WindTurbine key={`wt-${fi}-${ti}`} position={pos} seed={fi * 100 + ti} />
      ))
    )}

    {/* Substations */}
    {WIND_FARMS.map((f, i) => <Substation key={`ws-${i}`} position={f.sub} size="small" />)}
    {SOLAR_SUBS.map((s, i) => <Substation key={`ss-${i}`} position={s} size="small" />)}
    {HUBS.map((h, i) => <Substation key={`hub-${i}`} position={h} size="large" />)}
    {CITY_DATA.map((cd, i) => <Substation key={`cs-${i}`} position={cd.sub} size="small" />)}

    {/* Cities */}
    {CITY_DATA.map((cd, i) => <City key={`city-${i}`} position={cd.city} seed={i + 1} />)}

    {/* Cable network with towers */}
    <CableNetwork />

    {/* Forests */}
    {FOREST_POSITIONS.map((pos, i) => (
      <Forest
        key={`f-${i}`}
        position={pos}
        seed={i + 1}
        count={25 + Math.floor(sr(i * 61 + 700) * 30)}
      />
    ))}

    {/* Energy flow */}
    <EnergyParticles />
    <AmbientMotes />

    {/* Post-processing */}
    <EffectComposer>
      <Bloom
        luminanceThreshold={0.15}
        mipmapBlur
        intensity={4}
        luminanceSmoothing={0.7}
      />
    </EffectComposer>
  </>
);

// ═══════════════════════════════════════════════════════════════
export default function HeroIllustration() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => { setMounted(true); }, []); // eslint-disable-line react-hooks/set-state-in-effect
  if (!mounted) return null;

  return (
    <div className="absolute inset-0 z-0 w-full h-full cursor-grab active:cursor-grabbing"
      style={{
        background: 'linear-gradient(180deg, #010810 0%, #041830 35%, #0a2a55 65%, #0d3568 100%)',
      }}
    >
      <Canvas
        gl={{
          antialias: true,
          alpha: false,
          powerPreference: 'high-performance',
          toneMapping: THREE.ACESFilmicToneMapping,
          toneMappingExposure: 1.2,
        }}
      >
        <Scene />
      </Canvas>
      {/* Cinematic vignette overlay */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: 'radial-gradient(ellipse at center, transparent 25%, rgba(0,20,50,0.4) 70%, rgba(0,10,30,0.7) 100%)',
        }}
      />
      {/* Bottom fade into page */}
      <div
        className="absolute bottom-0 left-0 right-0 h-32 pointer-events-none"
        style={{
          background: 'linear-gradient(to top, #002b49, transparent)',
        }}
      />
    </div>
  );
}