import React, {
    useRef,
    useEffect,
    useCallback,
    forwardRef,
    useImperativeHandle,
} from "react";
import { StyleSheet } from "react-native";
import { WebView } from "react-native-webview";
import { geocodeAddress, calculateRoute } from "../api/tomtom";

const TOMTOM_API_KEY = "MERY8I7LMeYVSLKO5WuV73W9rKJpBLoB";

export interface TomTomMarker {
    id: string;
    latitude: number;
    longitude: number;
    color: string;
    label?: string;
    description?: string;
    isSelected?: boolean;
}

export interface TomTomMapRef {
    fitAllMarkers: () => void;
    fitToCoordinates: (
        coords: { latitude: number; longitude: number }[],
    ) => void;
    calcRoute: (
        origin: { latitude: number; longitude: number },
        destination: { latitude: number; longitude: number },
    ) => void;
    calcRouteFromAddress: (
        origin: { latitude: number; longitude: number },
        address: string,
    ) => void;
    clearRoute: () => void;
}

interface TomTomMapProps {
    style?: any;
    markers?: TomTomMarker[];
    initialCenter?: { latitude: number; longitude: number };
    initialZoom?: number;
    onMarkerPress?: (markerId: string) => void;
}

const TomTomMap = forwardRef<TomTomMapRef, TomTomMapProps>(
    (
        {
            style,
            markers = [],
            initialCenter,
            initialZoom = 14,
            onMarkerPress,
        },
        ref,
    ) => {
        const webViewRef = useRef<WebView>(null);
        const isReady = useRef(false);
        const pendingMessages = useRef<string[]>([]);

        const sendMessage = useCallback((msg: object) => {
            const json = JSON.stringify(msg);
            if (isReady.current) {
                webViewRef.current?.injectJavaScript(
                    `(function(){ try { handleMessage(${json}); } catch(e) {} })(); true;`,
                );
            } else {
                pendingMessages.current.push(json);
            }
        }, []);

        useImperativeHandle(
            ref,
            () => ({
                fitAllMarkers: () => sendMessage({ type: "fitAll" }),
                fitToCoordinates: (coords) =>
                    sendMessage({ type: "fitCoords", coords }),
                clearRoute: () => sendMessage({ type: "clearRoute" }),
                calcRoute: (origin, dest) => {
                    calculateRoute(origin, dest).then((result) => {
                        if (result) {
                            sendMessage({
                                type: "drawRoute",
                                coordinates: result.route.coordinates,
                                destination: dest,
                            });
                        } else {
                            // Fallback: ligne droite
                            sendMessage({
                                type: "drawRoute",
                                coordinates: [origin, dest],
                                destination: dest,
                            });
                        }
                    }).catch(() => {
                        sendMessage({
                            type: "drawRoute",
                            coordinates: [origin, dest],
                            destination: dest,
                        });
                    });
                },
                calcRouteFromAddress: async (origin, address) => {
                    try {
                        const dest = await geocodeAddress(address);
                        if (!dest) return;
                        const result = await calculateRoute(origin, dest);
                        if (result) {
                            sendMessage({
                                type: "drawRoute",
                                coordinates: result.route.coordinates,
                                destination: dest,
                            });
                        } else {
                            sendMessage({
                                type: "drawRoute",
                                coordinates: [origin, dest],
                                destination: dest,
                            });
                        }
                    } catch {
                        /* silent */
                    }
                },
            }),
            [sendMessage],
        );

        useEffect(() => {
            sendMessage({ type: "updateMarkers", markers });
        }, [markers, sendMessage]);

        const onMessage = useCallback(
            (event: any) => {
                try {
                    const data = JSON.parse(event.nativeEvent.data);
                    if (data.type === "ready") {
                        isReady.current = true;
                        // Rejouer les messages en attente
                        const pending = pendingMessages.current.slice();
                        pendingMessages.current = [];
                        for (const msg of pending) {
                            webViewRef.current?.injectJavaScript(
                                `(function(){ try { handleMessage(${msg}); } catch(e) {} })(); true;`,
                            );
                        }
                        // Fit sur tous les markers après un court délai
                        setTimeout(() => {
                            webViewRef.current?.injectJavaScript(
                                `(function(){ try { handleMessage(${JSON.stringify({ type: "fitAll" })}); } catch(e) {} })(); true;`,
                            );
                        }, 500);
                    } else if (data.type === "markerPress" && onMarkerPress) {
                        onMarkerPress(data.id);
                    }
                } catch {
                    /* ignore */
                }
            },
            [onMarkerPress],
        );

        const center =
            initialCenter ||
            (markers.length > 0
                ? {
                      latitude: markers[0].latitude,
                      longitude: markers[0].longitude,
                  }
                : { latitude: 48.8566, longitude: 2.3522 });

        const html = buildHtml(center, initialZoom, TOMTOM_API_KEY);

        return (
            <WebView
                ref={webViewRef}
                style={[styles.map, style]}
                source={{ html, baseUrl: "https://api.tomtom.com" }}
                onMessage={onMessage}
                javaScriptEnabled
                domStorageEnabled
                scrollEnabled={false}
                bounces={false}
                originWhitelist={["*"]}
                mixedContentMode="always"
                allowFileAccessFromFileURLs
                allowUniversalAccessFromFileURLs
                androidLayerType="hardware"
            />
        );
    },
);

function buildHtml(
    center: { latitude: number; longitude: number },
    zoom: number,
    apiKey: string,
) {
    return `<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.0/maps/maps.css">
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.0/maps/maps-web.min.js"></script>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body, #map { width: 100%; height: 100%; overflow: hidden; }
  .marker-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.8);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  .marker-dot.selected {
    width: 36px; height: 36px;
    border: 3px solid #7c3aed;
    box-shadow: 0 0 12px rgba(124,58,237,0.6);
  }
  .dest-marker {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = tt.map({
  key: '${apiKey}',
  container: 'map',
  center: [${center.longitude}, ${center.latitude}],
  zoom: ${zoom},
  stylesVisibility: { trafficFlow: false, trafficIncidents: false }
});

var markerObjects = {};
var destMarker = null;
var ROUTE_SOURCE = 'tt-route-src';
var ROUTE_LAYER  = 'tt-route-lyr';

// File d'attente pour les messages reçus avant que le style soit chargé
var pendingRouteData = null;
var styleLoaded = false;

function clearRoute() {
  try { if (map.getLayer(ROUTE_LAYER))  map.removeLayer(ROUTE_LAYER); } catch(e) {}
  try { if (map.getSource(ROUTE_SOURCE)) map.removeSource(ROUTE_SOURCE); } catch(e) {}
  if (destMarker) { destMarker.remove(); destMarker = null; }
}

function drawRoute(coordinates, destination) {
  clearRoute();
  if (!destination) return;

  // Marker destination (pin rouge)
  var pin = document.createElement('div');
  pin.className = 'dest-marker';
  pin.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24"><path fill="#ef4444" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5" fill="white"/></svg>';
  destMarker = new tt.Marker({ element: pin })
    .setLngLat([destination.longitude, destination.latitude])
    .addTo(map);

  if (!coordinates || coordinates.length < 2) {
    map.flyTo({ center: [destination.longitude, destination.latitude], zoom: 15 });
    return;
  }

  // Convertir les coords { latitude, longitude } en [lng, lat] pour GeoJSON
  var lngLat = coordinates.map(function(c) {
    return [c.longitude, c.latitude];
  });

  try {
    map.addSource(ROUTE_SOURCE, {
      type: 'geojson',
      data: {
        type: 'Feature',
        properties: {},
        geometry: { type: 'LineString', coordinates: lngLat }
      }
    });
    map.addLayer({
      id: ROUTE_LAYER,
      type: 'line',
      source: ROUTE_SOURCE,
      layout: { 'line-join': 'round', 'line-cap': 'round' },
      paint: { 'line-color': '#4285F4', 'line-width': 6, 'line-opacity': 0.9 }
    });
    var bounds = new tt.LngLatBounds();
    lngLat.forEach(function(c) { bounds.extend(c); });
    map.fitBounds(bounds, { padding: 60, maxZoom: 16, duration: 800 });
  } catch(e) {}
}
}

function handleMessage(data) {
  if (data.type === 'updateMarkers') {
    Object.values(markerObjects).forEach(function(m) { m.remove(); });
    markerObjects = {};
    (data.markers || []).forEach(function(m) {
      var el = document.createElement('div');
      el.className = 'marker-dot' + (m.isSelected ? ' selected' : '');
      el.style.backgroundColor = m.color || '#7c3aed';
      el.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="white"><circle cx="12" cy="12" r="8"/></svg>';
      el.addEventListener('click', function() {
        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'markerPress', id: m.id }));
      });
      var popup = new tt.Popup({ offset: 20, closeButton: false })
        .setHTML('<div style="padding:4px 8px;font-size:12px;"><b>' + (m.label || m.id) + '</b>' + (m.description ? '<br>' + m.description : '') + '</div>');
      var marker = new tt.Marker({ element: el })
        .setLngLat([m.longitude, m.latitude])
        .setPopup(popup)
        .addTo(map);
      markerObjects[m.id] = marker;
    });
  }

  if (data.type === 'drawRoute') {
    if (!styleLoaded) {
      pendingRouteData = data;
    } else {
      drawRoute(data.coordinates, data.destination);
    }
  }

  if (data.type === 'clearRoute') {
    pendingRouteData = null;
    clearRoute();
  }

  if (data.type === 'fitAll') {
    var all = Object.values(markerObjects);
    if (all.length > 0) {
      var bounds = new tt.LngLatBounds();
      all.forEach(function(m) { bounds.extend(m.getLngLat()); });
      if (destMarker) bounds.extend(destMarker.getLngLat());
      map.fitBounds(bounds, { padding: 60, maxZoom: 15, duration: 800 });
    }
  }

  if (data.type === 'fitCoords') {
    if (data.coords && data.coords.length > 0) {
      var bounds = new tt.LngLatBounds();
      data.coords.forEach(function(c) { bounds.extend([c.longitude, c.latitude]); });
      map.fitBounds(bounds, { padding: 80, maxZoom: 15, duration: 800 });
    }
  }
}

map.on('load', function() {
  styleLoaded = true;
  if (pendingRouteData) {
    drawRoute(pendingRouteData.coordinates, pendingRouteData.destination);
    pendingRouteData = null;
  }
  window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'ready' }));
});
</script>
</body>
</html>`;
}

const styles = StyleSheet.create({
    map: { flex: 1 },
});

export default TomTomMap;