dawarich/app/javascript/maps_maplibre/layers/routes_layer.js

import { BaseLayer } from './base_layer'

/**
 * Routes layer showing travel paths
 * Connects points chronologically with solid color
 */
export class RoutesLayer extends BaseLayer {
  constructor(map, options = {}) {
    super(map, { id: 'routes', ...options })
    this.maxGapHours = options.maxGapHours || 5 // Max hours between points to connect
    this.hoverSourceId = 'routes-hover-source'
  }

  getSourceConfig() {
    return {
      type: 'geojson',
      data: this.data || {
        type: 'FeatureCollection',
        features: []
      }
    }
  }

  /**
   * Override add() to create both main and hover sources
   */
  add(data) {
    this.data = data

    // Add main source
    if (!this.map.getSource(this.sourceId)) {
      this.map.addSource(this.sourceId, this.getSourceConfig())
    }

    // Add hover source (initially empty)
    if (!this.map.getSource(this.hoverSourceId)) {
      this.map.addSource(this.hoverSourceId, {
        type: 'geojson',
        data: { type: 'FeatureCollection', features: [] }
      })
    }

    // Add layers
    const layers = this.getLayerConfigs()
    layers.forEach(layerConfig => {
      if (!this.map.getLayer(layerConfig.id)) {
        this.map.addLayer(layerConfig)
      }
    })

    this.setVisibility(this.visible)
  }

  getLayerConfigs() {
    return [
      {
        id: this.id,
        type: 'line',
        source: this.sourceId,
        layout: {
          'line-join': 'round',
          'line-cap': 'round'
        },
        paint: {
          // Use color from feature properties if available, otherwise default blue
          'line-color': [
            'case',
            ['has', 'color'],
            ['get', 'color'],
            '#0000ff'  // Default blue color (matching v1)
          ],
          'line-width': 3,
          'line-opacity': 0.8
        }
      },
      {
        id: 'routes-hover',
        type: 'line',
        source: this.hoverSourceId,
        layout: {
          'line-join': 'round',
          'line-cap': 'round'
        },
        paint: {
          'line-color': '#ffff00',  // Yellow highlight
          'line-width': 8,
          'line-opacity': 1.0
        }
      }
      // Note: routes-hit layer is added separately in LayerManager after points layer
      // for better interactivity (see _addRoutesHitLayer method)
    ]
  }

  /**
   * Override setVisibility to also control routes-hit layer
   * @param {boolean} visible - Show/hide layer
   */
  setVisibility(visible) {
    // Call parent to handle main routes and routes-hover layers
    super.setVisibility(visible)

    // Also control routes-hit layer if it exists
    if (this.map.getLayer('routes-hit')) {
      const visibility = visible ? 'visible' : 'none'
      this.map.setLayoutProperty('routes-hit', 'visibility', visibility)
    }
  }

  /**
   * Update hover layer with route geometry
   * @param {Object|null} feature - Route feature, FeatureCollection, or null to clear
   */
  setHoverRoute(feature) {
    const hoverSource = this.map.getSource(this.hoverSourceId)
    if (!hoverSource) return

    if (feature) {
      // Handle both single feature and FeatureCollection
      if (feature.type === 'FeatureCollection') {
        hoverSource.setData(feature)
      } else {
        hoverSource.setData({
          type: 'FeatureCollection',
          features: [feature]
        })
      }
    } else {
      hoverSource.setData({ type: 'FeatureCollection', features: [] })
    }
  }

  /**
   * Override remove() to clean up hover source and hit layer
   */
  remove() {
    // Remove layers
    this.getLayerIds().forEach(layerId => {
      if (this.map.getLayer(layerId)) {
        this.map.removeLayer(layerId)
      }
    })

    // Remove routes-hit layer if it exists
    if (this.map.getLayer('routes-hit')) {
      this.map.removeLayer('routes-hit')
    }

    // Remove main source
    if (this.map.getSource(this.sourceId)) {
      this.map.removeSource(this.sourceId)
    }

    // Remove hover source
    if (this.map.getSource(this.hoverSourceId)) {
      this.map.removeSource(this.hoverSourceId)
    }

    this.data = null
  }

  /**
   * Calculate haversine distance between two points in kilometers
   * @param {number} lat1 - First point latitude
   * @param {number} lon1 - First point longitude
   * @param {number} lat2 - Second point latitude
   * @param {number} lon2 - Second point longitude
   * @returns {number} Distance in kilometers
   */
  static haversineDistance(lat1, lon1, lat2, lon2) {
    const R = 6371 // Earth's radius in kilometers
    const dLat = (lat2 - lat1) * Math.PI / 180
    const dLon = (lon2 - lon1) * Math.PI / 180
    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
              Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
              Math.sin(dLon / 2) * Math.sin(dLon / 2)
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
    return R * c
  }

  /**
   * Convert points to route LineStrings with splitting
   * Matches V1's route splitting logic for consistency
   * Also handles International Date Line (IDL) crossings
   * @param {Array} points - Points from API
   * @param {Object} options - Splitting options
   * @returns {Object} GeoJSON FeatureCollection
   */
  static pointsToRoutes(points, options = {}) {
    if (points.length < 2) {
      return { type: 'FeatureCollection', features: [] }
    }

    // Default thresholds (matching V1 defaults from polylines.js)
    // Note: V1 has a unit mismatch bug where it compares km to meters directly
    // We replicate this behavior for consistency with V1
    const distanceThresholdKm = options.distanceThresholdMeters || 500
    const timeThresholdMinutes = options.timeThresholdMinutes || 60

    // Sort by timestamp
    const sorted = points.slice().sort((a, b) => a.timestamp - b.timestamp)

    // Split into segments based on distance and time gaps (like V1)
    const segments = []
    let currentSegment = [sorted[0]]

    for (let i = 1; i < sorted.length; i++) {
      const prev = sorted[i - 1]
      const curr = sorted[i]

      // Calculate distance between consecutive points
      const distance = this.haversineDistance(
        prev.latitude, prev.longitude,
        curr.latitude, curr.longitude
      )

      // Calculate time difference in minutes
      const timeDiff = (curr.timestamp - prev.timestamp) / 60

      // Split if any threshold is exceeded
      if (distance > distanceThresholdKm || timeDiff > timeThresholdMinutes) {
        if (currentSegment.length > 1) {
          segments.push(currentSegment)
        }
        currentSegment = [curr]
      } else {
        currentSegment.push(curr)
      }
    }

    if (currentSegment.length > 1) {
      segments.push(currentSegment)
    }

    // Convert segments to LineStrings
    const features = segments.map(segment => {
      // Unwrap coordinates to handle International Date Line (IDL) crossings
      // This ensures routes draw the short way across IDL instead of wrapping around globe
      const coordinates = []
      let offset = 0 // Cumulative longitude offset for unwrapping

      for (let i = 0; i < segment.length; i++) {
        const point = segment[i]
        let lon = point.longitude + offset

        // Check for IDL crossing between consecutive points
        if (i > 0) {
          const prevLon = coordinates[i - 1][0]
          const lonDiff = lon - prevLon

          // If longitude jumps more than 180°, we crossed the IDL
          if (lonDiff > 180) {
            // Crossed from east to west (e.g., 170° to -170°)
            // Subtract 360° to make it continuous (e.g., 170° to -170° becomes 170° to -170°-360° = -530°)
            offset -= 360
            lon -= 360
          } else if (lonDiff < -180) {
            // Crossed from west to east (e.g., -170° to 170°)
            // Add 360° to make it continuous (e.g., -170° to 170° becomes -170° to 170°+360° = 530°)
            offset += 360
            lon += 360
          }
        }

        coordinates.push([lon, point.latitude])
      }

      // Calculate total distance for the segment
      let totalDistance = 0
      for (let i = 0; i < segment.length - 1; i++) {
        totalDistance += this.haversineDistance(
          segment[i].latitude, segment[i].longitude,
          segment[i + 1].latitude, segment[i + 1].longitude
        )
      }

      return {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates
        },
        properties: {
          pointCount: segment.length,
          startTime: segment[0].timestamp,
          endTime: segment[segment.length - 1].timestamp,
          distance: totalDistance
        }
      }
    })

    return {
      type: 'FeatureCollection',
      features
    }
  }
}