La-Fabrik/src/pathfinding/GPSMinimap.tsx

import React, { useRef, useEffect, useState, useMemo } from "react";
import * as THREE from "three";
import { useGPS } from "./useGPS";
import type { WorldBounds } from "./useGPS";

// ==========================================
// 1. Premium 2D HUD GPS Overlay Component
// ==========================================

export interface GPSMinimapHUDProps {
  bwMaskUrl: string;
  colorMapUrl: string;
  gridWidth: number;
  gridHeight: number;
  worldBounds: WorldBounds;
  playerPos: { x: number; z: number };
  destPos?: { x: number; z: number };
  size?: number; // Size of HUD in pixels
}

/**
 * A beautiful, glassmorphic 2D HUD overlay that renders the GPS Minimap
 * in the corner of the screen.
 */
export const GPSMinimapHUD: React.FC<GPSMinimapHUDProps> = ({
  bwMaskUrl,
  colorMapUrl,
  gridWidth,
  gridHeight,
  worldBounds,
  playerPos,
  destPos,
  size = 200,
}) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  const gpsOptions = useMemo(
    () => ({
      bwMaskUrl,
      colorMapUrl,
      gridWidth,
      gridHeight,
      worldBounds,
    }),
    [bwMaskUrl, colorMapUrl, gridWidth, gridHeight, worldBounds],
  );

  const { calculateWorldPath, renderGPSToCanvas, loading, error } =
    useGPS(gpsOptions);

  useEffect(() => {
    if (loading || error || !canvasRef.current) return;

    // Calculate A* path in world coordinates
    const path = destPos ? calculateWorldPath(playerPos, destPos) : [];

    // Render path onto HUD canvas
    renderGPSToCanvas(canvasRef.current, path, playerPos, destPos, {
      pathColor: "#3b82f6", // Premium vibrant blue
      pathWidth: 5,
      playerColor: "#ef4444", // Hot red for player
      playerSize: 6,
      destColor: "#10b981", // Emerald green for destination
      destSize: 6,
    });
  }, [
    playerPos,
    destPos,
    loading,
    error,
    calculateWorldPath,
    renderGPSToCanvas,
  ]);

  return (
    <div style={hudStyles.container(size)}>
      {loading && <div style={hudStyles.statusText}>Initializing GPS...</div>}
      {error && (
        <div style={{ ...hudStyles.statusText, color: "#ef4444" }}>
          GPS Error: {error}
        </div>
      )}

      {!loading && !error && (
        <canvas
          ref={canvasRef}
          width={size * 2} // Double size for retina/high-DPI screens
          height={size * 2}
          style={hudStyles.canvas(size)}
        />
      )}
    </div>
  );
};

// ==========================================
// 2. 3D Handlebar Screen Mesh Component (R3F)
// ==========================================

export interface GPSBikeScreenProps {
  bwMaskUrl: string;
  colorMapUrl: string;
  gridWidth: number;
  gridHeight: number;
  worldBounds: WorldBounds;
  playerPos: { x: number; z: number };
  destPos?: { x: number; z: number };
  width?: number; // 3D Plane Width
  height?: number; // 3D Plane Height
}

/**
 * A Three.js 3D plane mesh that renders the GPS dynamically as a CanvasTexture.
 * This can be directly attached to the bike's handlebars in your 3D world.
 */
export const GPSBikeScreen: React.FC<GPSBikeScreenProps> = ({
  bwMaskUrl,
  colorMapUrl,
  gridWidth,
  gridHeight,
  worldBounds,
  playerPos,
  destPos,
  width = 0.4,
  height = 0.4,
}) => {
  // Offscreen canvas to render the GPS texture onto
  const [offscreenCanvas] = useState(() => {
    const canvas = document.createElement("canvas");
    canvas.width = 512;
    canvas.height = 512;
    return canvas;
  });

  const textureRef = useRef<THREE.CanvasTexture | null>(null);

  const gpsOptions = useMemo(
    () => ({
      bwMaskUrl,
      colorMapUrl,
      gridWidth,
      gridHeight,
      worldBounds,
    }),
    [bwMaskUrl, colorMapUrl, gridWidth, gridHeight, worldBounds],
  );

  const { calculateWorldPath, renderGPSToCanvas, loading } = useGPS(gpsOptions);

  useEffect(() => {
    if (loading) return;

    // Calculate A* path
    const path = destPos ? calculateWorldPath(playerPos, destPos) : [];

    // Render path onto our offscreen canvas
    renderGPSToCanvas(offscreenCanvas, path, playerPos, destPos, {
      pathColor: "#60a5fa", // Bright neon blue
      pathWidth: 8,
      playerColor: "#ff0055", // Neon pink-red for bike
      playerSize: 10,
      destColor: "#00ffcc", // Vibrant cyan for target
      destSize: 10,
    });

    // Notify Three.js that the texture needs an update
    if (textureRef.current) {
      textureRef.current.needsUpdate = true;
    }
  }, [
    playerPos,
    destPos,
    loading,
    calculateWorldPath,
    renderGPSToCanvas,
    offscreenCanvas,
  ]);

  return (
    <mesh castShadow receiveShadow>
      <planeGeometry args={[width, height]} />
      <meshBasicMaterial toneMapped={false}>
        <canvasTexture
          ref={textureRef}
          attach="map"
          image={offscreenCanvas}
          minFilter={THREE.LinearFilter}
          magFilter={THREE.LinearFilter}
        />
      </meshBasicMaterial>
    </mesh>
  );
};

// ==========================================
// Styles for HUD (Premium Glassmorphism)
// ==========================================

const hudStyles = {
  container: (size: number): React.CSSProperties => ({
    position: "absolute",
    bottom: "24px",
    right: "24px",
    width: `${size}px`,
    height: `${size}px`,
    borderRadius: "24px",
    overflow: "hidden",
    border: "1px solid rgba(255, 255, 255, 0.15)",
    boxShadow:
      "0 8px 32px 0 rgba(0, 0, 0, 0.37), 0 0 15px rgba(59, 130, 246, 0.2)",
    backdropFilter: "blur(8px)",
    WebkitBackdropFilter: "blur(8px)",
    background: "rgba(15, 23, 42, 0.6)", // Sleek dark slate
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    zIndex: 1000,
    pointerEvents: "none",
    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
  }),
  canvas: (size: number): React.CSSProperties => ({
    width: `${size}px`,
    height: `${size}px`,
    display: "block",
  }),
  statusText: {
    color: "#94a3b8",
    fontFamily:
      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    fontSize: "12px",
    fontWeight: 500,
    letterSpacing: "0.05em",
  } as React.CSSProperties,
};