// src/components/Satellite.jsx
import React, { useRef, useMemo, Suspense, useCallback } from 'react';
import { useFrame, useLoader } from '@react-three/fiber';
import { Html } from '@react-three/drei';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import * as THREE from 'three';

/**
 * Component สำหรับโมเดลดาวเทียมที่เคลื่อนที่รอบโลก
 *
 * @param {object} props
 * @param {string} props.id - ID ของดาวเทียม (สำหรับ key และการระบุตำแหน่ง)
 * @param {string} props.name - ชื่อของดาวเทียม
 * @param {string} [props.description] - รายละเอียดของดาวเทียม
 * @param {number} props.orbitRadius - รัศมีวงโคจรจากจุดศูนย์กลางโลก
 * @param {number} props.orbitSpeed - ความเร็วในการโคจร (radians per second)
 * @param {number} props.orbitTiltDeg - มุมเอียงของวงโคจรเทียบกับเส้นศูนย์สูตร (องศา)
 * @param {string} [props.color='#ffffff'] - สีของดาวเทียม (อาจไม่ใช้ถ้าโมเดลมีสีเอง)
 * @param {function} [props.onPositionUpdate] - Callback function (position: THREE.Vector3) => void
 */
export default function Satellite({
                                      id,
                                      name,
                                      description,
                                      orbitRadius,
                                      orbitSpeed,
                                      orbitTiltDeg,
                                      color = '#ffffff',
                                      onPositionUpdate
                                  }) {
    const satelliteRef = useRef();
    const angleRef = useRef(0);
    const gltf = useLoader(GLTFLoader, '/models/satellite.glb');

    const satelliteModel = useMemo(() => {
        const model = gltf.scene.clone();
        // *** ปรับขนาดดาวเทียม: จาก 0.005 เป็น 0.015 (ใหญ่ขึ้น 3 เท่า) ***
        model.scale.set(0.015, 0.015, 0.015);  // <<< ปรับตรงนี้
        model.traverse((obj) => {
            if (obj.isMesh) {
                if (!obj.material) {
                    obj.material = new THREE.MeshStandardMaterial({ color: new THREE.Color(color) });
                } else {
                    // obj.material.color.set(new THREE.Color(color));
                }
                obj.castShadow = true;
                obj.receiveShadow = true;
            }
        });
        return model;
    }, [gltf, color]);

    const orbitTiltRad = useMemo(() => THREE.MathUtils.degToRad(orbitTiltDeg), [orbitTiltDeg]);

    useFrame((state, delta) => {
        if (satelliteRef.current) {
            angleRef.current += orbitSpeed * delta;

            const x = orbitRadius * Math.cos(angleRef.current);
            const z = orbitRadius * Math.sin(angleRef.current);
            const y = 0; // ในระบบพิกัดของกลุ่มดาวเทียม เราจะให้ Y เป็น 0 เพื่อให้มันโคจรในระนาบ XY (หลังจากการ applyAxisAngle)

            const currentPosition = new THREE.Vector3(x, y, z);
            // การเอียงวงโคจร: หมุนรอบแกน X ของโลก
            currentPosition.applyAxisAngle(new THREE.Vector3(1, 0, 0), orbitTiltRad);

            satelliteRef.current.position.copy(currentPosition);

            if (onPositionUpdate) {
                onPositionUpdate(id, currentPosition);
            }
        }
    });

    const handleClick = useCallback((event) => {
        event.stopPropagation();
        console.log(`[Satellite ${id}] CLICKED!`);
    }, [id]);


    return (
        <group
            ref={satelliteRef}
            onClick={handleClick}
        >
            <primitive object={satelliteModel} />

            <Html
                // *** ปรับตำแหน่งกล่องข้อความให้ไปด้านข้างดาวเทียม ***
                // X: ขยับไปทางขวา (สัมพัทธ์กับดาวเทียม)
                // Y: ขยับขึ้น (สัมพัทธ์กับดาวเทียม)
                // Z: ไม่ต้องขยับ
                position={[0.05, 0.05, 0]}
                occlude={false} // คงไว้เป็น false เพื่อให้มองเห็นตลอดเวลา
                // ปรับ distanceFactor เพื่อควบคุมขนาดของกล่องข้อความ
                distanceFactor={4}
                className="
                    bg-black/70 backdrop-blur-sm p-1 rounded-md shadow-lg
                    text-white text-xs font-sans whitespace-normal
                    text-left pointer-events-none select-none
                "
                style={{
                    minWidth: '80px',
                    maxWidth: '150px',
                    fontSize: '10px',
                    lineHeight: '1.2',
                    visibility: 'visible !important',
                    opacity: 1,
                }}
            >
                <div className="font-bold text-xs mb-0.5">{name}</div>
                <div className="text-gray-300 text-xs leading-tight">{description || "No description available."}</div>
                <div className="text-gray-400 mt-1 text-xxs">Orbit Radius: {orbitRadius.toFixed(2)} units</div>
                <div className="text-gray-400 text-xxs">Orbit Tilt: {orbitTiltDeg.toFixed(1)}°</div>
            </Html>
        </group>
    );
}