/**
 * 5-Drone Formation Flight Simulator - Main Application Controller
 * Three.js 3D Environment, Mouse Raycasting Flight Control, WebSocket Telemetry Sync
 */

class DroneSimulatorApp {
    constructor() {
        this.container = document.getElementById("canvas-container");
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        this.clock = new THREE.Clock();

        this.droneModels = [];
        this.formationBeams = [];
        this.targetReticle = null;
        this.targetPillar = null;
        this.radar = null;

        // Mouse & Flight Target state
        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        this.flightPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -8.0);
        this.targetPos = new THREE.Vector3(0, 8.0, 0);
        this.targetAltitude = 8.0;
        this.isMouseDown = false;

        // Camera mode: 'ORBIT', 'CHASE', 'FPV', 'FORMATION'
        this.cameraMode = 'ORBIT';

        // WebSocket Client
        this.ws = null;
        this.wsConnected = false;
        this.lastTelemetry = null;

        this.initThree();
        this.initEnvironment();
        this.initDrones();
        this.initEventListeners();
        this.initWebSocket();
        this.initRadar();

        this.animate = this.animate.bind(this);
        requestAnimationFrame(this.animate);
    }

    initThree() {
        // Scene
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0x060a10);
        this.scene.fog = new THREE.FogExp2(0x060a10, 0.010);

        // Camera
        this.camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.2, 500);
        this.camera.position.set(0, 26, 38);

        // WebGL Renderer with Soft Shadows
        this.renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        this.renderer.toneMappingExposure = 1.1;
        this.container.appendChild(this.renderer.domElement);

        // Orbit Controls for Tactical Free Cam
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.05;
        this.controls.maxPolarAngle = Math.PI / 2 - 0.02;
        this.controls.minDistance = 4;
        this.controls.maxDistance = 160;
        this.controls.target.set(0, 6, 0);

        // Ambient & Directional Lighting
        const ambientLight = new THREE.AmbientLight(0x223344, 1.2);
        this.scene.add(ambientLight);

        const sunLight = new THREE.DirectionalLight(0xddeeff, 2.0);
        sunLight.position.set(40, 80, 30);
        sunLight.castShadow = true;
        sunLight.shadow.mapSize.width = 2048;
        sunLight.shadow.mapSize.height = 2048;
        sunLight.shadow.camera.near = 10;
        sunLight.shadow.camera.far = 200;
        sunLight.shadow.camera.left = -70;
        sunLight.shadow.camera.right = 70;
        sunLight.shadow.camera.top = 70;
        sunLight.shadow.camera.bottom = -70;
        sunLight.shadow.bias = -0.0005;
        this.scene.add(sunLight);

        // Cyber Accent Rim Lights
        const cyanRim = new THREE.DirectionalLight(0x00f0ff, 1.0);
        cyanRim.position.set(-60, 30, -50);
        this.scene.add(cyanRim);

        const pinkRim = new THREE.DirectionalLight(0xff0066, 0.8);
        pinkRim.position.set(60, 25, 60);
        this.scene.add(pinkRim);
    }

    initEnvironment() {
        // Ground Grid
        const gridHelper = new THREE.GridHelper(200, 100, 0x00f0ff, 0x0f2233);
        gridHelper.position.y = 0.01;
        this.scene.add(gridHelper);

        const subGrid = new THREE.GridHelper(200, 20, 0x00f0ff, 0x00f0ff);
        subGrid.position.y = 0.02;
        subGrid.material.opacity = 0.3;
        subGrid.material.transparent = true;
        this.scene.add(subGrid);

        // Ground Plane Mesh
        const groundGeo = new THREE.PlaneGeometry(400, 400);
        groundGeo.rotateX(-Math.PI / 2);
        const groundMat = new THREE.MeshStandardMaterial({
            color: 0x060a10,
            roughness: 0.85,
            metalness: 0.2
        });
        const groundMesh = new THREE.Mesh(groundGeo, groundMat);
        groundMesh.receiveShadow = true;
        this.scene.add(groundMesh);

        // Concentric Landing Rings
        const padGroup = new THREE.Group();
        const padRing1 = new THREE.Mesh(
            new THREE.RingGeometry(14, 14.5, 64),
            new THREE.MeshBasicMaterial({ color: 0x00f0ff, side: THREE.DoubleSide })
        );
        padRing1.rotateX(-Math.PI / 2);
        padRing1.position.y = 0.03;
        padGroup.add(padRing1);

        const padRing2 = new THREE.Mesh(
            new THREE.RingGeometry(28, 28.6, 64),
            new THREE.MeshBasicMaterial({ color: 0x00f0ff, side: THREE.DoubleSide, opacity: 0.4, transparent: true })
        );
        padRing2.rotateX(-Math.PI / 2);
        padRing2.position.y = 0.03;
        padGroup.add(padRing2);
        this.scene.add(padGroup);

        // 3D Target Reticle Marker
        this.targetReticle = new THREE.Group();
        const reticleRing = new THREE.Mesh(
            new THREE.RingGeometry(0.9, 1.15, 32),
            new THREE.MeshBasicMaterial({ color: 0x00f0ff, side: THREE.DoubleSide, transparent: true, opacity: 0.85 })
        );
        reticleRing.rotateX(-Math.PI / 2);
        this.targetReticle.add(reticleRing);

        const crossGeo = new THREE.BufferGeometry().setFromPoints([
            new THREE.Vector3(-1.6, 0, 0), new THREE.Vector3(1.6, 0, 0),
            new THREE.Vector3(0, 0, -1.6), new THREE.Vector3(0, 0, 1.6)
        ]);
        const crossMat = new THREE.LineBasicMaterial({ color: 0x00f0ff, opacity: 0.9, transparent: true });
        this.targetReticle.add(new THREE.LineSegments(crossGeo, crossMat));

        // Altitude Drop Pillar
        const pillarGeo = new THREE.BufferGeometry().setFromPoints([
            new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 8, 0)
        ]);
        this.targetPillar = new THREE.Line(pillarGeo, new THREE.LineDashedMaterial({
            color: 0x00f0ff,
            dashSize: 0.5,
            gapSize: 0.3,
            transparent: true,
            opacity: 0.6
        }));
        this.targetPillar.computeLineDistances();
        this.scene.add(this.targetPillar);
        this.scene.add(this.targetReticle);
    }

    initDrones() {
        // 5 Drone Configuration: Leader + 4 Wingmen
        const droneConfigs = [
            { id: "alpha_1", name: "VIPER-01 (Leader)",   color: 0x00f0ff, isLeader: true },
            { id: "alpha_2", name: "GHOST-02 (Wingman 1)", color: 0xff0055, isLeader: false },
            { id: "alpha_3", name: "PHANTOM-03 (Wingman 2)", color: 0x00ff88, isLeader: false },
            { id: "alpha_4", name: "SPECTER-04 (Wingman 3)", color: 0xffb700, isLeader: false },
            { id: "alpha_5", name: "SHADOW-05 (Wingman 4)", color: 0xb026ff, isLeader: false },
        ];

        this.droneModels = droneConfigs.map(cfg => {
            return new DroneModel(this.scene, {
                id: cfg.id,
                name: cfg.name,
                primaryColor: cfg.color,
                isLeader: cfg.isLeader
            });
        });

        // 4 Formation Laser Beams connecting Leader to each Wingman
        this.formationBeams = [];
        for (let i = 1; i < 5; i++) {
            const beamGeo = new THREE.BufferGeometry().setFromPoints([
                new THREE.Vector3(0, 8, 0),
                new THREE.Vector3(i * 3, 8, -i * 3)
            ]);
            const beamMat = new THREE.LineBasicMaterial({
                color: droneConfigs[i].color,
                transparent: true,
                opacity: 0.55,
                linewidth: 1.5
            });
            const beam = new THREE.Line(beamGeo, beamMat);
            this.scene.add(beam);
            this.formationBeams.push(beam);
        }
    }

    initRadar() {
        this.radar = new TacticalRadar("tactical-radar");
    }

    initWebSocket() {
        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
        const wsUrl = `${protocol}//${window.location.host}/ws`;

        const connect = () => {
            this.ws = new WebSocket(wsUrl);

            this.ws.onopen = () => {
                this.wsConnected = true;
                const statusDot = document.getElementById("connection-status-dot");
                const statusText = document.getElementById("connection-status-text");
                if (statusDot) statusDot.className = "status-dot";
                if (statusText) statusText.innerText = "ONLINE (5-DRONES 60Hz)";
            };

            this.ws.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    this.lastTelemetry = data;
                    this.updateUI(data);
                } catch (e) {
                    console.error("Telemetry error", e);
                }
            };

            this.ws.onclose = () => {
                this.wsConnected = false;
                const statusDot = document.getElementById("connection-status-dot");
                const statusText = document.getElementById("connection-status-text");
                if (statusDot) statusDot.className = "status-dot warning";
                if (statusText) statusText.innerText = "OFFLINE (RETRYING...)";
                setTimeout(connect, 2000);
            };
        };

        connect();
    }

    sendWsCommand(payload) {
        if (this.ws && this.wsConnected && this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(payload));
        }
    }

    initEventListeners() {
        window.addEventListener("resize", () => {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        });

        window.addEventListener("pointerdown", (e) => {
            if (e.target.closest(".side-panel, .top-nav, .bottom-bar")) return;
            this.isMouseDown = true;
            this.updateMouseTarget(e);
        });

        window.addEventListener("pointermove", (e) => {
            if (e.target.closest(".side-panel, .top-nav, .bottom-bar")) return;
            if (this.isMouseDown || e.buttons === 1) {
                this.updateMouseTarget(e);
            }
        });

        window.addEventListener("pointerup", () => {
            this.isMouseDown = false;
        });

        // Altitude Adjustment with Mouse Wheel
        window.addEventListener("wheel", (e) => {
            if (e.target.closest(".side-panel")) return;
            if (e.ctrlKey || e.altKey) return;

            const delta = e.deltaY > 0 ? -0.8 : 0.8;
            this.targetAltitude = Math.max(1.5, Math.min(35.0, this.targetAltitude + delta));
            this.flightPlane.constant = -this.targetAltitude;

            const altSlider = document.getElementById("altitude-slider");
            const altVal = document.getElementById("alt-value");
            if (altSlider) altSlider.value = this.targetAltitude;
            if (altVal) altVal.innerText = `${this.targetAltitude.toFixed(1)}m`;

            this.sendWsCommand({
                type: "SET_TARGET",
                x: this.targetPos.x,
                y: this.targetAltitude,
                z: this.targetPos.z
            });
        }, { passive: true });

        // Keyboard Controls
        window.addEventListener("keydown", (e) => {
            if (e.key === "w" || e.key === "W" || e.key === "ArrowUp") {
                this.targetAltitude = Math.min(35.0, this.targetAltitude + 1.0);
            } else if (e.key === "s" || e.key === "S" || e.key === "ArrowDown") {
                this.targetAltitude = Math.max(1.5, this.targetAltitude - 1.0);
            } else if (e.key === "1") {
                this.setCameraMode("ORBIT");
            } else if (e.key === "2") {
                this.setCameraMode("CHASE");
            } else if (e.key === "3") {
                this.setCameraMode("FPV");
            } else if (e.key === "4") {
                this.setCameraMode("FORMATION");
            } else if (e.key === "m" || e.key === "M") {
                this.toggleAudio();
            } else if (e.key === " ") {
                this.targetPos.set(0, this.targetAltitude, 0);
            }

            this.flightPlane.constant = -this.targetAltitude;
            this.sendWsCommand({
                type: "SET_TARGET",
                x: this.targetPos.x,
                y: this.targetAltitude,
                z: this.targetPos.z
            });
        });

        // Formation Mode Buttons
        document.querySelectorAll(".btn-formation").forEach(btn => {
            btn.addEventListener("click", () => {
                document.querySelectorAll(".btn-formation").forEach(b => b.classList.remove("active"));
                btn.classList.add("active");
                const mode = btn.dataset.mode;
                this.sendWsCommand({ type: "SET_FORMATION", mode: mode });
                if (window.droneAudio) window.droneAudio.playBeep(920, 0.06);
            });
        });

        // Sliders
        const distSlider = document.getElementById("formation-dist-slider");
        if (distSlider) {
            distSlider.addEventListener("input", (e) => {
                const dist = parseFloat(e.target.value);
                document.getElementById("dist-value").innerText = `${dist.toFixed(1)}m`;
                this.sendWsCommand({ type: "SET_FORMATION", distance: dist });
            });
        }

        const heightSlider = document.getElementById("formation-height-slider");
        if (heightSlider) {
            heightSlider.addEventListener("input", (e) => {
                const hOff = parseFloat(e.target.value);
                document.getElementById("height-value").innerText = `${hOff > 0 ? '+' : ''}${hOff.toFixed(1)}m`;
                this.sendWsCommand({ type: "SET_FORMATION", height_offset: hOff });
            });
        }

        const speedSlider = document.getElementById("speed-slider");
        if (speedSlider) {
            speedSlider.addEventListener("input", (e) => {
                const spd = parseFloat(e.target.value);
                document.getElementById("speed-value").innerText = `${spd.toFixed(1)}x`;
                this.sendWsCommand({ type: "SET_SPEED", speed: spd });
            });
        }

        const altSlider = document.getElementById("altitude-slider");
        if (altSlider) {
            altSlider.addEventListener("input", (e) => {
                this.targetAltitude = parseFloat(e.target.value);
                document.getElementById("alt-value").innerText = `${this.targetAltitude.toFixed(1)}m`;
                this.flightPlane.constant = -this.targetAltitude;
                this.sendWsCommand({
                    type: "SET_TARGET",
                    x: this.targetPos.x,
                    y: this.targetAltitude,
                    z: this.targetPos.z
                });
            });
        }

        const autoToggle = document.getElementById("auto-flight-toggle");
        const autoSelect = document.getElementById("auto-pattern-select");
        if (autoToggle) {
            autoToggle.addEventListener("change", (e) => {
                const enabled = e.target.checked;
                const pattern = autoSelect ? autoSelect.value : "FIGURE_EIGHT";
                this.sendWsCommand({ type: "SET_AUTONOMOUS", enabled: enabled, pattern: pattern });
                if (window.droneAudio) window.droneAudio.playBeep(enabled ? 1200 : 600, 0.1);
            });
        }
        if (autoSelect) {
            autoSelect.addEventListener("change", (e) => {
                const pattern = e.target.value;
                const enabled = autoToggle ? autoToggle.checked : false;
                this.sendWsCommand({ type: "SET_AUTONOMOUS", enabled: enabled, pattern: pattern });
            });
        }

        document.querySelectorAll(".btn-cam").forEach(btn => {
            btn.addEventListener("click", () => {
                this.setCameraMode(btn.dataset.cam);
            });
        });

        const resetBtn = document.getElementById("btn-reset");
        if (resetBtn) {
            resetBtn.addEventListener("click", () => {
                this.targetPos.set(0, 8.0, 0);
                this.targetAltitude = 8.0;
                this.flightPlane.constant = -8.0;
                this.sendWsCommand({ type: "RESET_POSITION" });
                if (window.droneAudio) window.droneAudio.playBeep(440, 0.15);
            });
        }

        const audioBtn = document.getElementById("btn-audio-toggle");
        if (audioBtn) {
            audioBtn.addEventListener("click", () => {
                this.toggleAudio();
            });
        }
    }

    toggleAudio() {
        if (!window.droneAudio) return;
        const active = window.droneAudio.toggle();
        const btn = document.getElementById("btn-audio-toggle");
        if (btn) {
            btn.innerText = active ? "🔊 SFX ON" : "🔇 SFX OFF";
            btn.style.borderColor = active ? "var(--color-cyan)" : "rgba(255,255,255,0.2)";
        }
    }

    setCameraMode(mode) {
        this.cameraMode = mode;
        document.querySelectorAll(".btn-cam").forEach(b => {
            b.classList.toggle("active", b.dataset.cam === mode);
        });

        if (mode === 'ORBIT') {
            this.controls.enabled = true;
        } else {
            this.controls.enabled = false;
        }
        if (window.droneAudio) window.droneAudio.playBeep(1050, 0.05);
    }

    updateMouseTarget(e) {
        this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

        this.raycaster.setFromCamera(this.mouse, this.camera);
        const intersectPoint = new THREE.Vector3();

        if (this.raycaster.ray.intersectPlane(this.flightPlane, intersectPoint)) {
            this.targetPos.x = intersectPoint.x;
            this.targetPos.y = this.targetAltitude;
            this.targetPos.z = intersectPoint.z;

            this.sendWsCommand({
                type: "SET_TARGET",
                x: this.targetPos.x,
                y: this.targetAltitude,
                z: this.targetPos.z
            });
        }
    }

    updateUI(telemetry) {
        if (!telemetry || !telemetry.drones) return;
        const drones = telemetry.drones;
        const formation = telemetry.formation;

        // Render each drone in the telemetry list dynamically
        drones.forEach((d, idx) => {
            const posEl = document.getElementById(`tele-d${idx}-pos`);
            const spdEl = document.getElementById(`tele-d${idx}-spd`);
            const altEl = document.getElementById(`tele-d${idx}-alt`);
            const batEl = document.getElementById(`tele-d${idx}-bat`);
            const barEl = document.getElementById(`bar-d${idx}-bat`);

            if (posEl) posEl.innerText = `${d.position.x}, ${d.position.y}, ${d.position.z}`;
            if (spdEl) spdEl.innerText = `${d.speed} km/h`;
            if (altEl) altEl.innerText = `${d.position.y.toFixed(1)}m`;
            if (batEl) batEl.innerText = `${d.battery}%`;
            if (barEl) barEl.style.width = `${d.battery}%`;
        });

        // Formation Card
        const gaugeDist = document.getElementById("gauge-dist-val");
        if (gaugeDist) gaugeDist.innerText = `${formation.distance.toFixed(1)}m`;

        const statMsg = document.getElementById("formation-status-msg");
        if (statMsg) statMsg.innerText = `5-DRONE SWARM: ${formation.mode}`;

        // Audio update (leader + wingman 1)
        if (window.droneAudio && drones.length >= 2) {
            window.droneAudio.updateMotors(drones[0].rotors[0], drones[1].rotors[0], drones[0].speed, drones[1].speed);
        }
    }

    updateCamera(dt) {
        if (!this.lastTelemetry || !this.lastTelemetry.drones) return;
        const leader = this.lastTelemetry.drones[0];
        const leaderPos = leader.position;
        const leaderYaw = THREE.MathUtils.degToRad(leader.rotation.yaw || 0);

        const lVec = new THREE.Vector3(leaderPos.x, leaderPos.y, leaderPos.z);

        if (this.cameraMode === 'CHASE') {
            const offset = new THREE.Vector3(-Math.sin(leaderYaw) * 18, 8.0, -Math.cos(leaderYaw) * 18);
            const targetCamPos = lVec.clone().add(offset);
            this.camera.position.lerp(targetCamPos, dt * 4.0);
            this.camera.lookAt(lVec.clone().add(new THREE.Vector3(0, 1.0, 0)));

        } else if (this.cameraMode === 'FPV') {
            this.camera.position.copy(lVec).add(new THREE.Vector3(0, -0.2, 0.8));
            const forward = new THREE.Vector3(Math.sin(leaderYaw), 0, Math.cos(leaderYaw));
            this.camera.lookAt(this.camera.position.clone().add(forward.multiplyScalar(20)));

        } else if (this.cameraMode === 'FORMATION') {
            // High angle side profile showing all 5 drones
            const sideOffset = new THREE.Vector3(26, 12, 0);
            this.camera.position.lerp(lVec.clone().add(sideOffset), dt * 3.0);
            this.camera.lookAt(lVec);

        } else {
            this.controls.update();
        }
    }

    animate() {
        requestAnimationFrame(this.animate);
        const dt = Math.min(0.05, this.clock.getDelta());

        // Update 3D Target Reticle & Pillar
        if (this.targetReticle) {
            this.targetReticle.position.set(this.targetPos.x, 0.04, this.targetPos.z);
            this.targetReticle.rotation.y += 0.02;

            const pPos = new Float32Array([
                this.targetPos.x, 0, this.targetPos.z,
                this.targetPos.x, this.targetAltitude, this.targetPos.z
            ]);
            this.targetPillar.geometry.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
            this.targetPillar.computeLineDistances();
        }

        // Render 5 Drones from Telemetry Stream
        if (this.lastTelemetry && this.lastTelemetry.drones) {
            const drones = this.lastTelemetry.drones;
            drones.forEach((d, idx) => {
                if (this.droneModels[idx]) {
                    this.droneModels[idx].update(d, dt);
                }
            });

            // Update 4 Formation Laser Beams from Leader to Wingmen
            const lp = drones[0].position;
            for (let i = 1; i < drones.length; i++) {
                if (this.formationBeams[i - 1]) {
                    const fp = drones[i].position;
                    const beamPoints = new Float32Array([
                        lp.x, lp.y, lp.z,
                        fp.x, fp.y, fp.z
                    ]);
                    this.formationBeams[i - 1].geometry.setAttribute('position', new THREE.BufferAttribute(beamPoints, 3));
                }
            }

            // Update 2D Tactical Radar HUD
            if (this.radar) {
                this.radar.render(drones);
            }
        }

        this.updateCamera(dt);
        this.renderer.render(this.scene, this.camera);
    }
}

window.addEventListener("DOMContentLoaded", () => {
    window.simApp = new DroneSimulatorApp();
});