// src/components/ConnectionLines.jsx
import React, { useMemo } from 'react';
import { Line } from '@react-three/drei';
import { Vector3, CatmullRomCurve3 } from 'three';
import { latLonToCartesian } from '../utils/threeHelpers';

export default function ConnectionLines({ connections }) {
    const linePoints = useMemo(() => {
        const points = [];
        connections.forEach(conn => {
            const start = latLonToCartesian(conn.startLat, conn.startLon, 1.001);
            const end = latLonToCartesian(conn.endLat, conn.endLon, 1.001);

            const startV = new Vector3(...start);
            const endV = new Vector3(...end);

            // สร้างจุดกลางเพื่อให้เกิดเส้นโค้งที่ยกขึ้น
            const midV = startV.clone().lerp(endV, 0.5); // จุดกลางระหว่างสองจุด
            midV.normalize().multiplyScalar(1.2); // ดันจุดกลางให้สูงขึ้นเพื่อสร้างเส้นโค้ง

            const curve = new CatmullRomCurve3([startV, midV, endV]);
            points.push(...curve.getPoints(30)); // แบ่งเส้นโค้งเป็น 30 จุด
        });
        return points;
    }, [connections]);

    if (linePoints.length === 0) return null; // ไม่ต้อง render ถ้าไม่มีจุด

    return (
        <Line
            points={linePoints}
            color="#ff00ff" // สีม่วง Magenta
            lineWidth={1}
            dashed={false}
            segments // สำคัญสำหรับ line ที่มาจากจุด array
        />
    );
}