/**
 * 3D 地图模块 - 懒加载版本
 * 通过 IntersectionObserver 触发加载，避免阻塞首屏渲染
 */

let mapInitialized = false;

async function initMap3D() {
    if (mapInitialized) return;
    mapInitialized = true;

    const container = document.getElementById("map");
    if (!container) return;

    // 动态导入 Three.js 模块
    const threeModule = await import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js');
    const THREE = threeModule.default || threeModule;

    const [
        { OrbitControls },
        { CSS2DRenderer, CSS2DObject },
        { Line2 },
        { LineMaterial },
        { LineGeometry }
    ] = await Promise.all([
        import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
        import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
        import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
        import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
        import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
    ]);

    const scene = new THREE.Scene();

    const ambientLight = new THREE.AmbientLight(0xd4e7fd, 4);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xe8eaeb, 0.2);
    directionalLight.position.set(0, 10, 5);
    const directionalLight2 = directionalLight.clone();
    directionalLight2.position.set(0, 10, -5);
    const directionalLight3 = directionalLight.clone();
    directionalLight3.position.set(5, 10, 0);
    const directionalLight4 = directionalLight.clone();
    directionalLight4.position.set(-5, 10, 0);
    scene.add(directionalLight);
    scene.add(directionalLight2);
    scene.add(directionalLight3);
    scene.add(directionalLight4);

    container.style.position = "relative";

    const camera = new THREE.PerspectiveCamera(
        75,
        container.clientWidth / container.clientHeight,
        0.1,
        1000
    );

    camera.position.set(0, 100, 10);
    camera.lookAt(0, 0, 0);
    camera.up.set(0, 1, 0);

    const labelRenderer = new CSS2DRenderer();
    labelRenderer.domElement.style.position = "absolute";
    labelRenderer.domElement.style.top = "0px";
    labelRenderer.domElement.style.pointerEvents = "none";
    labelRenderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(labelRenderer.domElement);

    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio || 1);
    container.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableRotate = false;
    controls.enableZoom = false;
    controls.enablePan = false;
    controls.update();

    const highlightMeshes = [];
    const pulseRings = [];
    const lineMaterials = [];

    const tooltip = document.createElement("div");
    tooltip.style.cssText = "position:absolute;padding:6px 10px;background:rgba(24,118,242,0.92);color:#fff;font-size:13px;border-radius:6px;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,0.25);display:none;";
    container.appendChild(tooltip);

    const animate = () => {
        requestAnimationFrame(animate);
        const t = performance.now() * 0.001;
        pulseRings.forEach((mesh) => {
            const { minScale, maxScale, period, phase, baseOpacity } = mesh.userData;
            const progress = (t / period + phase) % 1;
            const eased = progress * progress * (3 - 2 * progress);
            const s = minScale + eased * (maxScale - minScale);
            mesh.scale.setScalar(s);
            const fadeIn = progress < 0.12 ? progress / 0.12 : 1.0;
            const fadeOut = progress > 0.7 ? Math.max(0.0, 1.0 - (progress - 0.7) / 0.3) : 1.0;
            const alpha = baseOpacity * Math.max(0.0, Math.min(1.0, fadeIn * fadeOut));
            if (mesh.material && mesh.material.uniforms && mesh.material.uniforms.opacity) {
                mesh.material.uniforms.opacity.value = alpha;
            }
        });
        controls.update();
        renderer.render(scene, camera);
        labelRenderer.render(scene, camera);
    };
    animate();

    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    let hoverMesh = null;
    const hoverColor = new THREE.Color().setHSL(210 / 360, 0.7, 0.55);

    const hideTooltip = () => { tooltip.style.display = "none"; };

    const applyHoverState = (mesh) => {
        if (hoverMesh && hoverMesh !== mesh) {
            if (hoverMesh.material && hoverMesh.userData.baseColor) {
                hoverMesh.material.color.copy(hoverMesh.userData.baseColor);
            }
        }
        hoverMesh = mesh;
        if (hoverMesh && hoverMesh.material) {
            hoverMesh.material.color.copy(hoverColor);
        }
    };

    const clearHoverState = () => {
        if (hoverMesh && hoverMesh.material && hoverMesh.userData.baseColor) {
            hoverMesh.material.color.copy(hoverMesh.userData.baseColor);
        }
        hoverMesh = null;
    };

    const handlePointerMove = (event) => {
        const rect = container.getBoundingClientRect();
        mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
        mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(highlightMeshes, false);
        if (intersects.length > 0) {
            applyHoverState(intersects[0].object);
        } else {
            clearHoverState();
            hideTooltip();
        }
    };

    container.addEventListener("mousemove", handlePointerMove);
    container.addEventListener("mouseleave", () => {
        clearHoverState();
        hideTooltip();
    });

    window.addEventListener("resize", () => {
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(container.clientWidth, container.clientHeight);
        labelRenderer.setSize(container.clientWidth, container.clientHeight);
        lineMaterials.forEach((m) => {
            if (m && m.resolution) {
                m.resolution.set(container.clientWidth, container.clientHeight);
                m.needsUpdate = true;
            }
        });
    });

    const offsetXY = d3.geoMercator();
    const highlightProvinces = ["山东省", "海南省", "天津市", "广东省", "浙江省", "江苏省", "北京市", "河北省", "辽宁省", "上海市"];
    const pulseProvinces = ["北京市", "上海市", "广东省"];

    const createPulseRings = (data, depth) => {
        const group = new THREE.Object3D();
        data.features.forEach((feature) => {
            const { centroid, center, name } = feature.properties;
            if (!pulseProvinces.includes(name)) return;
            const point = centroid || center || [0, 0];
            const [x, y] = offsetXY(point);
            const geometry = new THREE.RingGeometry(0.0, 18.0, 160);

            const makeMaterial = (colorCenterHex, colorEdgeHex, opacityVal, alphaInner = 0.45, alphaOuter = 1.0) => {
                return new THREE.ShaderMaterial({
                    transparent: true,
                    depthWrite: false,
                    depthTest: false,
                    side: THREE.DoubleSide,
                    uniforms: {
                        colorCenter: { value: new THREE.Color(colorCenterHex) },
                        colorEdge: { value: new THREE.Color(colorEdgeHex) },
                        opacity: { value: opacityVal },
                        innerRatio: { value: geometry.parameters.innerRadius / geometry.parameters.outerRadius },
                        alphaInner: { value: alphaInner },
                        alphaOuter: { value: alphaOuter },
                    },
                    vertexShader: `
                        varying vec2 vUv;
                        void main() {
                            vUv = uv;
                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                        }
                    `,
                    fragmentShader: `
                        varying vec2 vUv;
                        uniform vec3 colorCenter;
                        uniform vec3 colorEdge;
                        uniform float opacity;
                        uniform float innerRatio;
                        uniform float alphaInner;
                        uniform float alphaOuter;
                        void main() {
                            vec2 p = vUv - vec2(0.5);
                            float rawR = clamp(length(p) * 2.0, 0.0, 1.0);
                            float r = clamp((rawR - innerRatio) / max(1.0 - innerRatio, 0.0001), 0.0, 1.0);
                            float k = smoothstep(0.0, 1.0, r);
                            vec3 color = mix(colorEdge, colorCenter, 1.0 - k);
                            float alpha = opacity * mix(alphaInner, alphaOuter, k);
                            if (alpha < 0.01) discard;
                            gl_FragColor = vec4(color, alpha);
                        }
                    `,
                });
            };

            const baseRing = new THREE.Mesh(geometry.clone(), makeMaterial(0x31bbf7, 0x31bbf7, 0.1, 1.0, 1.0));
            baseRing.rotation.x = 0;
            baseRing.position.set(x, -y, depth + 0.02);
            baseRing.renderOrder = 10;
            group.add(baseRing);

            const pulseRing = new THREE.Mesh(geometry.clone(), makeMaterial(0x9fdcff, 0x31bbf7, 0.45, 0.35, 1.0));
            pulseRing.rotation.x = 0;
            pulseRing.position.set(x, -y, depth + 0.02);
            pulseRing.renderOrder = 11;
            pulseRing.userData = {
                minScale: 1.0,
                maxScale: 1.3,
                period: 3.0,
                phase: Math.random(),
                baseOpacity: 0.25,
            };
            pulseRings.push(pulseRing);
            group.add(pulseRing);
        });
        return group;
    };

    const createMap = (data, depth) => {
        const map = new THREE.Object3D();
        const center = data.features[0].properties.centroid;
        offsetXY.center(center).translate([0, 0]);
        data.features.forEach((feature) => {
            const unit = new THREE.Object3D();
            const { centroid, center, name } = feature.properties;
            const { coordinates, type } = feature.geometry;
            const point = centroid || center || [0, 0];

            let color;
            if (highlightProvinces.includes(name)) {
                color = 0x2658F7;
            } else {
                color = new THREE.Color().setHSL(233 / 360, 0, 1).getHex();
            }

            coordinates.forEach((coordinate) => {
                if (type === "MultiPolygon") coordinate.forEach((item) => fn(item));
                if (type === "Polygon") fn(coordinate);

                function fn(coordinate) {
                    unit.name = name;
                    unit.centroid = point;
                    const mesh = createMesh(coordinate, color, depth);
                    mesh.userData = { name, centroid: point, baseColor: new THREE.Color(color) };
                    if (highlightProvinces.includes(name)) {
                        highlightMeshes.push(mesh);
                    }
                    const line = createLine(coordinate, depth);
                    unit.add(mesh, ...line);
                }
            });
            map.add(unit);
            setCenter(map);
        });
        return map;
    };

    const createMesh = (data, color, depth) => {
        const shape = new THREE.Shape();
        data.forEach((item, idx) => {
            const [x, y] = offsetXY(item);
            if (idx === 0) shape.moveTo(x, -y);
            else shape.lineTo(x, -y);
        });

        const extrudeSettings = { depth: depth, bevelEnabled: false };
        const materialSettings = {
            color: color,
            emissive: 0x000000,
            roughness: 0.45,
            metalness: 0.8,
            transparent: true,
            side: THREE.DoubleSide,
        };
        const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
        const material = new THREE.MeshStandardMaterial(materialSettings);
        return new THREE.Mesh(geometry, material);
    };

    const createLine = (data, depth) => {
        const positions = [];
        let firstX = null, firstY = null;
        data.forEach((item, idx) => {
            const [x, y] = offsetXY(item);
            positions.push(x, -y, 0);
            if (idx === 0) { firstX = x; firstY = y; }
        });
        if (firstX !== null && firstY !== null) {
            positions.push(firstX, -firstY, 0);
        }

        const lineGeometry = new LineGeometry();
        lineGeometry.setPositions(positions);

        const lineMaterialSettings = {
            color: 0xffffff,
            linewidth: 0.5,
            dashed: false,
            transparent: true,
            opacity: 0.9,
        };
        const uplineMaterial = new LineMaterial(lineMaterialSettings);
        const downlineMaterial = new LineMaterial(lineMaterialSettings);

        uplineMaterial.resolution.set(container.clientWidth, container.clientHeight);
        downlineMaterial.resolution.set(container.clientWidth, container.clientHeight);

        lineMaterials.push(uplineMaterial, downlineMaterial);

        const upLine = new Line2(lineGeometry, uplineMaterial);
        const downLine = new Line2(lineGeometry.clone(), downlineMaterial);
        downLine.position.z = -0.0001;
        upLine.position.z = depth + 0.0001;
        return [upLine, downLine];
    };

    const setCenter = (map) => {
        map.rotation.x = -Math.PI / 2;
        const box = new THREE.Box3().setFromObject(map);
        const center = box.getCenter(new THREE.Vector3());
        const offset = [0, 0];
        map.position.x = map.position.x - center.x - offset[0];
        map.position.z = map.position.z - center.z - offset[1];
    };

    // 加载 GeoJSON 数据
    const url = "/assets/100000_full.json";
    try {
        const res = await fetch(url);
        const data = await res.json();
        const map = createMap(data, 0.05);
        map.add(createPulseRings(data, 0.05));
        scene.add(map);
    } catch (err) {
        console.error("Failed to load map data:", err);
    }
}

// 使用 IntersectionObserver 实现懒加载
function setupLazyMap() {
    const mapContainer = document.getElementById("map");
    if (!mapContainer) return;

    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                initMap3D();
                observer.disconnect();
            }
        }, {
            rootMargin: '200px' // 提前 200px 开始加载
        });
        observer.observe(mapContainer);
    } else {
        // 降级：直接加载
        initMap3D();
    }
}

// 页面加载完成后设置懒加载
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupLazyMap);
} else {
    setupLazyMap();
}