'use client';

import { useEffect, useRef, useState } from 'react';
import * as maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import pkg from '../package.json';

const EUROPE_CENTER: [number, number] = [10, 52];
const INITIAL_ZOOM = 4;
// Flat 2D view only. Max zoom ≈ ~100 km across a typical desktop viewport width at
// European latitudes (~47 m/px at z11, 52°N); street-level zoom has no gameplay value.
export const MIN_ZOOM = 3;
export const MAX_ZOOM = 11;
const OPENFREEMAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';

function escapeHtml(s: string): string {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

export default function Map() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [airportCount, setAirportCount] = useState<number | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Bundlers (Turbopack) break MapLibre's derived worker URL, so point it at a
    // route that serves the worker script (and its relative imports) from node_modules.
    maplibregl.setWorkerUrl('/api/mlworker/maplibre-gl-worker.mjs');

    const map = new maplibregl.Map({
      container: containerRef.current,
      style: OPENFREEMAP_STYLE,
      center: EUROPE_CENTER,
      zoom: INITIAL_ZOOM,
      minZoom: MIN_ZOOM,
      maxZoom: MAX_ZOOM,
    });
    // Dev/e2e hook so tests can project coordinates to screen space.
    (window as unknown as Record<string, unknown>).__flightMap = map;

    // Airports are GeoJSON, so they don't depend on basemap tiles: initialize as soon
    // as the style is applied ('styledata') rather than waiting for 'load', which also
    // requires all tile sources to finish.
    let initialized = false;
    const init = async () => {
      if (initialized) return;
      initialized = true;
      try {
        const res = await fetch('/api/airports');
        if (!res.ok) return;
        const data = (await res.json()) as { features: unknown[] };
        setAirportCount(data.features.length);

        map.addSource('airports', { type: 'geojson', data });
        map.addLayer({
          id: 'airports-circles',
          type: 'circle',
          source: 'airports',
          paint: {
            'circle-radius': 3,
            'circle-color': '#e11d48',
            'circle-stroke-width': 1,
            'circle-stroke-color': '#ffffff',
          },
        });

        map.on('click', 'airports-circles', (e) => {
          const f = e.features?.[0];
          if (!f) return;
          const p = f.properties as { name: string; icao: string };
          new maplibregl.Popup({ offset: 10 })
            .setLngLat(f.geometry.coordinates as [number, number])
            .setHTML(
              `<div data-testid="airport-popup"><strong>${escapeHtml(p.name)}</strong><br/>${escapeHtml(p.icao)}</div>`,
            )
            .addTo(map);
        });
      } catch (err) {
        console.error('failed to initialize map layers', err);
      }
    };

    if (map.isStyleLoaded()) void init();
    else map.on('styledata', () => void init());

    return () => {
      delete (window as unknown as Record<string, unknown>).__flightMap;
      map.remove();
    };
  }, []);

  return (
    <div className="map-wrap">
      <header data-testid="app-header" className="app-header">
        <h1>Flight Ops</h1>
        <small>v{pkg.version}</small>
        <span data-testid="airport-count">
          {airportCount === null ? 'loading airports…' : `${airportCount} EU airports`}
        </span>
      </header>
      <div ref={containerRef} data-testid="map" className="map-container" />
    </div>
  );
}