/* assets/globe.js */
import { renderMarkdownHtml } from "/assets/markdown.js?v=1";

const MAPLIBRE_VERSION = "5.24.0";
const MAPLIBRE_BASE = `https://unpkg.com/maplibre-gl@${MAPLIBRE_VERSION}/dist`;

function ensureMapLibre() {
  if (typeof maplibregl !== "undefined") {
    return Promise.resolve();
  }
  if (window.__maplibreLoadPromise) {
    return window.__maplibreLoadPromise;
  }
  window.__maplibreLoadPromise = new Promise((resolve, reject) => {
    if (!document.querySelector('link[data-globe-maplibre-css="1"]')) {
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = `${MAPLIBRE_BASE}/maplibre-gl.css`;
      link.dataset.globeMaplibreCss = "1";
      document.head.appendChild(link);
    }

    const script = document.createElement("script");
    script.src = `${MAPLIBRE_BASE}/maplibre-gl.js`;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error("Failed to load MapLibre GL"));
    document.head.appendChild(script);
  });
  return window.__maplibreLoadPromise;
}

const GLOBE_DEFAULTS = {
  style: "https://tiles.openfreemap.org/styles/liberty",
  center: [0, 20],
  zoom: 1.5,
  minZoom: 0,
  maxZoom: 22,
  bearing: 0,
  pitch: 0,
  minPitch: 0,
  maxPitch: 85,
  projection: "globe",
  attributionControl: true,
  scrollZoom: true,
  dragRotate: true,
  dragPan: true,
  keyboard: true,
  doubleClickZoom: true,
  touchZoomRotate: true,
  interactive: true,
  showGeolocateControl: false,
  useCurrentLocation: false,
  geolocateZoom: 10,
  showUserLocation: true,
};

function parseBool(value, fallback) {
  if (value === undefined) return fallback;
  return value === "true" || value === "1";
}

function parseNumber(value, fallback) {
  if (value === undefined || value === "") return fallback;
  const n = Number(value);
  return Number.isFinite(n) ? n : fallback;
}

function parseCenter(value, fallback) {
  if (!value) return fallback;
  try {
    const parsed = JSON.parse(value);
    if (Array.isArray(parsed) && parsed.length === 2) return parsed;
  } catch {
    const parts = value.split(",").map((s) => Number(s.trim()));
    if (parts.length === 2 && parts.every(Number.isFinite)) return parts;
  }
  return fallback;
}

function readOptionsFromElement(el) {
  const d = el.dataset;
  return {
    style: d.style,
    center: parseCenter(d.center, undefined),
    zoom: parseNumber(d.zoom, undefined),
    minZoom: parseNumber(d.minZoom, undefined),
    maxZoom: parseNumber(d.maxZoom, undefined),
    bearing: parseNumber(d.bearing, undefined),
    pitch: parseNumber(d.pitch, undefined),
    minPitch: parseNumber(d.minPitch, undefined),
    maxPitch: parseNumber(d.maxPitch, undefined),
    projection: d.projection,
    attributionControl: parseBool(d.attributionControl, undefined),
    scrollZoom: parseBool(d.scrollZoom, undefined),
    dragRotate: parseBool(d.dragRotate, undefined),
    dragPan: parseBool(d.dragPan, undefined),
    keyboard: parseBool(d.keyboard, undefined),
    doubleClickZoom: parseBool(d.doubleClickZoom, undefined),
    touchZoomRotate: parseBool(d.touchZoomRotate, undefined),
    interactive: parseBool(d.interactive, undefined),
    showGeolocateControl: parseBool(d.showGeolocateControl, undefined),
    useCurrentLocation: parseBool(d.useCurrentLocation, undefined),
    geolocateZoom: parseNumber(d.geolocateZoom, undefined),
    showUserLocation: parseBool(d.showUserLocation, undefined),
  };
}

function mergeGlobeOptions(...sources) {
  const merged = { ...GLOBE_DEFAULTS };
  for (const source of sources) {
    if (!source) continue;
    for (const [key, value] of Object.entries(source)) {
      if (value !== undefined) merged[key] = value;
    }
  }
  return merged;
}

const HIGHLIGHT_SOURCE = "borderless-highlights";
const HIGHLIGHT_LAYER = "borderless-highlight-circles";

const DETAIL_SECTIONS = [
  ["why_recommended", "Why This Country Is Recommended"],
  ["feasible_methods", "Feasible Migration Methods"],
  ["procedure", "Step-by-Step Procedure"],
  ["requirements", "Requirements And Documents"],
  ["duration_costs_risks", "Duration, Costs, And Risks"],
  ["official_sources", "Official Sources"],
];

window.BorderlessGlobe = {
  map: null,
  markers: [],
  markerRecords: [],
  lastVersion: -1,
  lastDetailsVersion: -1,
  pendingState: null,
  rootElement: null,
  countryDetails: {},
  detailModalBackdrop: null,
  detailModalTitle: null,
  detailModalPathway: null,
  detailModalBody: null,

  shell() {
    return this.rootElement?.querySelector(".globe-shell") ?? null;
  },

  updateShellState(hasMarkers) {
    const shell = this.shell();
    if (!shell) return;
    shell.classList.toggle("has-markers", Boolean(hasMarkers));
  },

  clearMarkers() {
    for (const marker of this.markers) {
      marker.remove();
    }
    this.markers = [];
    this.markerRecords = [];
  },

  clearHighlights() {
    if (!this.map) return;
    if (this.map.getLayer(HIGHLIGHT_LAYER)) {
      this.map.removeLayer(HIGHLIGHT_LAYER);
    }
    if (this.map.getSource(HIGHLIGHT_SOURCE)) {
      this.map.removeSource(HIGHLIGHT_SOURCE);
    }
  },

  resolveMarkerDetail(marker) {
    if (marker.detail) return marker.detail;
    if (marker.iso2 && this.countryDetails[marker.iso2]) {
      return this.countryDetails[marker.iso2];
    }
    if (marker.name && this.countryDetails[marker.name]) {
      return this.countryDetails[marker.name];
    }
    return null;
  },

  ensureDetailModal() {
    if (this.detailModalBackdrop) return;

    const backdrop = document.createElement("div");
    backdrop.className = "globe-detail-backdrop";
    backdrop.hidden = true;

    const dialog = document.createElement("div");
    dialog.className = "globe-detail-dialog";
    dialog.setAttribute("role", "dialog");
    dialog.setAttribute("aria-modal", "true");

    const header = document.createElement("div");
    header.className = "globe-detail-dialog-header";

    const titleWrap = document.createElement("div");
    titleWrap.className = "globe-detail-dialog-heading";

    const titleEl = document.createElement("h2");
    titleEl.className = "globe-detail-dialog-title";

    const pathwayEl = document.createElement("p");
    pathwayEl.className = "globe-detail-dialog-pathway";

    titleWrap.appendChild(titleEl);
    titleWrap.appendChild(pathwayEl);

    const closeBtn = document.createElement("button");
    closeBtn.type = "button";
    closeBtn.className = "globe-detail-dialog-close";
    closeBtn.setAttribute("aria-label", "Close country details");
    closeBtn.textContent = "×";
    closeBtn.addEventListener("click", () => this.closeCountryDetailModal());

    header.appendChild(titleWrap);
    header.appendChild(closeBtn);

    const body = document.createElement("div");
    body.className = "globe-detail-dialog-body markdown-body";

    dialog.appendChild(header);
    dialog.appendChild(body);
    backdrop.appendChild(dialog);

    backdrop.addEventListener("click", (event) => {
      if (event.target === backdrop) {
        this.closeCountryDetailModal();
      }
    });

    this._detailModalKeyHandler = (event) => {
      if (event.key === "Escape" && !backdrop.hidden) {
        this.closeCountryDetailModal();
      }
    };
    document.addEventListener("keydown", this._detailModalKeyHandler);

    document.body.appendChild(backdrop);
    this.detailModalBackdrop = backdrop;
    this.detailModalTitle = titleEl;
    this.detailModalPathway = pathwayEl;
    this.detailModalBody = body;
  },

  async openCountryDetailModal(detail) {
    if (!detail?.sections) return;
    this.ensureDetailModal();

    this.detailModalTitle.textContent = detail.country || "Country details";
    this.detailModalPathway.textContent = detail.pathway || "";
    this.detailModalPathway.hidden = !detail.pathway;

    const parts = [];
    for (const [key, heading] of DETAIL_SECTIONS) {
      const content = detail.sections[key];
      if (content) {
        parts.push(`### ${heading}\n\n${content}`);
      }
    }

    const markdown = parts.join("\n\n");
    this.detailModalBody.innerHTML = await renderMarkdownHtml(markdown);
    for (const link of this.detailModalBody.querySelectorAll("a")) {
      link.target = "_blank";
      link.rel = "noopener noreferrer";
    }

    this.detailModalBackdrop.hidden = false;
  },

  closeCountryDetailModal() {
    if (this.detailModalBackdrop) {
      this.detailModalBackdrop.hidden = true;
    }
  },

  buildPopupElement(marker) {
    const detail = this.resolveMarkerDetail(marker);
    const status = detail?.status || "pending";
    const container = document.createElement("div");
    container.className = `globe-marker-popup globe-marker-popup--${status}`;

    const title = document.createElement("h4");
    title.className = "globe-marker-popup-title";
    title.textContent = detail?.country || marker.name || marker.iso2 || "Country";
    container.appendChild(title);

    if (detail?.pathway) {
      const pathwayEl = document.createElement("p");
      pathwayEl.className = "globe-marker-popup-pathway";
      pathwayEl.textContent = detail.pathway;
      container.appendChild(pathwayEl);
    }

    if (status === "researching") {
      const statusBadge = document.createElement("p");
      statusBadge.className = "globe-marker-popup-status";
      statusBadge.textContent = "Research in progress";
      container.appendChild(statusBadge);

      const activity = document.createElement("p");
      activity.className = "globe-marker-popup-activity";
      activity.textContent = `Researching: ${
        detail?.current_activity || "Gathering official immigration sources…"
      }`;
      container.appendChild(activity);

      if (detail?.activities?.length > 1) {
        const list = document.createElement("ul");
        list.className = "globe-marker-popup-activities";
        for (const item of detail.activities.slice(-3)) {
          const listItem = document.createElement("li");
          listItem.textContent = item;
          list.appendChild(listItem);
        }
        container.appendChild(list);
      }
    } else if (status === "complete") {
      if (detail?.preview) {
        const preview = document.createElement("p");
        preview.className = "globe-marker-popup-preview";
        preview.textContent = detail.preview;
        container.appendChild(preview);
      }

      if (detail?.sections && Object.keys(detail.sections).length) {
        const viewBtn = document.createElement("button");
        viewBtn.type = "button";
        viewBtn.className = "globe-marker-popup-view-details";
        viewBtn.textContent = "View details";
        viewBtn.addEventListener("click", (event) => {
          event.preventDefault();
          event.stopPropagation();
          void this.openCountryDetailModal(detail);
        });
        container.appendChild(viewBtn);
      }
    } else if (status === "incomplete") {
      const incomplete = document.createElement("p");
      incomplete.className = "globe-marker-popup-incomplete";
      incomplete.textContent =
        detail?.preview ||
        "Research did not produce verified findings for this country.";
      container.appendChild(incomplete);
    } else {
      const waiting = document.createElement("p");
      waiting.className = "globe-marker-popup-waiting";
      waiting.textContent = "Waiting for research to start…";
      container.appendChild(waiting);
    }

    const hint = document.createElement("p");
    hint.className = "globe-marker-popup-hint";
    if (status === "researching") {
      hint.textContent = "Live tool activity from the country researcher.";
    } else if (status === "complete") {
      hint.textContent = "Verify key requirements on official immigration sites.";
    } else if (status === "incomplete") {
      hint.textContent = "Open the parallel research panel in chat for tool logs.";
    } else {
      hint.textContent = "Details appear as each country research completes.";
    }
    container.appendChild(hint);

    return container;
  },

  createMarkerPopup(marker) {
    const popupNode = this.buildPopupElement(marker);
    const popup = new maplibregl.Popup({
      offset: 24,
      closeButton: true,
      closeOnClick: true,
      maxWidth: "360px",
      className: "borderless-country-popup",
    }).setDOMContent(popupNode);

    return popup;
  },

  addMarkers(markers) {
    if (!this.map || !markers?.length) return;
    markers.forEach((marker) => {
      const popup = this.createMarkerPopup(marker);
      const instance = new maplibregl.Marker({ color: "#f59e0b" })
        .setLngLat([marker.lng, marker.lat])
        .setPopup(popup)
        .addTo(this.map);

      instance.getElement()?.classList.add("globe-country-marker");
      instance.getElement()?.setAttribute("role", "button");
      instance.getElement()?.setAttribute(
        "aria-label",
        `View migration details for ${marker.name || marker.iso2}`,
      );

      this.markers.push(instance);
      this.markerRecords.push({ marker, popup, instance });
    });
  },

  updateMarkerPopups(countryDetails) {
    this.countryDetails = countryDetails || {};
    for (const record of this.markerRecords) {
      const mergedMarker = {
        ...record.marker,
        detail: this.resolveMarkerDetail(record.marker),
      };
      record.marker = mergedMarker;
      const popupNode = this.buildPopupElement(mergedMarker);
      record.popup.setDOMContent(popupNode);
    }
  },

  addHighlights(highlights) {
    if (!this.map || !highlights?.length) return;
    const features = highlights.map((item) => ({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [item.lng, item.lat],
      },
      properties: {
        iso2: item.iso2,
      },
    }));

    this.map.addSource(HIGHLIGHT_SOURCE, {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features,
      },
    });

    this.map.addLayer({
      id: HIGHLIGHT_LAYER,
      type: "circle",
      source: HIGHLIGHT_SOURCE,
      paint: {
        "circle-radius": [
          "interpolate",
          ["linear"],
          ["zoom"],
          1,
          18,
          4,
          28,
          8,
          42,
        ],
        "circle-color": "#f59e0b",
        "circle-opacity": 0.28,
        "circle-stroke-width": 2,
        "circle-stroke-color": "#fbbf24",
        "circle-stroke-opacity": 0.9,
      },
    });
  },

  applyFlyTo(flyTo) {
    if (!this.map || !flyTo) return;
    if (flyTo.bounds) {
      this.map.fitBounds(flyTo.bounds, {
        padding: flyTo.padding ?? 80,
        duration: 1800,
        essential: true,
      });
      return;
    }
    if (flyTo.center) {
      this.map.flyTo({
        center: flyTo.center,
        zoom: flyTo.zoom ?? 4,
        duration: 1800,
        essential: true,
      });
    }
  },

  applyState(state) {
    if (!state) return;
    this.pendingState = state;
    if (!this.map) return;

    const versionChanged = state.version !== this.lastVersion;
    const detailsChanged =
      (state.details_version || 0) !== this.lastDetailsVersion;

    if (!versionChanged && !detailsChanged) return;

    this.countryDetails = state.country_details || {};

    if (versionChanged) {
      this.lastVersion = state.version;
      this.clearMarkers();
      this.clearHighlights();
      this.addMarkers(state.markers || []);
      this.addHighlights(state.highlights || []);
      this.updateShellState(Boolean(state.markers?.length || state.highlights?.length));
      this.applyFlyTo(state.fly_to);
    } else if (detailsChanged) {
      this.updateMarkerPopups(this.countryDetails);
    }

    this.lastDetailsVersion = state.details_version || 0;
  },

  onMapReady() {
    if (this.pendingState) {
      this.applyState(this.pendingState);
    }
  },
};

function globeRootElement() {
  if (typeof element !== "undefined") {
    return element;
  }
  return document.querySelector(".globe-root");
}

async function initGlobe(options = {}) {
  const root = globeRootElement();
  if (!root) {
    return;
  }

  try {
    await ensureMapLibre();
  } catch (err) {
    console.error("Globe failed to load MapLibre GL:", err);
    root.querySelector(".globe-shell")?.classList.remove("is-loading");
    return;
  }

  const container = root.querySelector(".globe-map");
  if (!container || container.dataset.mapInit) return;
  container.dataset.mapInit = "1";

  const opts = mergeGlobeOptions(readOptionsFromElement(container), options);
  const {
    projection,
    attributionControl,
    scrollZoom,
    dragRotate,
    dragPan,
    keyboard,
    doubleClickZoom,
    touchZoomRotate,
    interactive,
    showGeolocateControl,
    useCurrentLocation,
    geolocateZoom,
    showUserLocation,
    ...mapOptions
  } = opts;

  const map = new maplibregl.Map({
    container,
    attributionControl,
    scrollZoom,
    dragRotate,
    dragPan,
    keyboard,
    doubleClickZoom,
    touchZoomRotate,
    interactive,
    ...mapOptions,
  });

  window.BorderlessGlobe.map = map;
  window.BorderlessGlobe.rootElement = root;

  let userMarker = null;

  if (showGeolocateControl) {
    map.addControl(
      new maplibregl.GeolocateControl({
        positionOptions: { enableHighAccuracy: true },
        trackUserLocation: false,
        showUserLocation,
        showAccuracyCircle: false,
      }),
      "top-right"
    );
  }

  function flyToCurrentLocation() {
    if (!navigator.geolocation) return;
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const center = [pos.coords.longitude, pos.coords.latitude];
        map.flyTo({
          center,
          zoom: geolocateZoom,
          essential: true,
        });
        if (showUserLocation) {
          if (!userMarker) {
            userMarker = new maplibregl.Marker({ color: "#3b82f6" })
              .setLngLat(center)
              .addTo(map);
          } else {
            userMarker.setLngLat(center);
          }
        }
      },
      (err) => console.warn("Geolocation failed:", err.message),
      { enableHighAccuracy: true }
    );
  }

  map.on("style.load", () => {
    map.setProjection({ type: projection });
    map.resize();
  });

  map.on("load", () => {
    root.querySelector(".globe-shell")?.classList.remove("is-loading");
    root.querySelector(".globe-shell")?.classList.add("is-ready");
    map.resize();
    if (useCurrentLocation && !window.BorderlessGlobe.pendingState?.fly_to) {
      flyToCurrentLocation();
    }
    window.BorderlessGlobe.onMapReady();
  });

  window.addEventListener("resize", () => map.resize());

  return map;
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => initGlobe());
} else {
  initGlobe();
}