import L from "leaflet";

const DEFAULT_CENTER: L.LatLngTuple = [51.505, -0.09];
const DEFAULT_ZOOM = 13;
const STORAGE_KEY = "annotatemap-view";

let map: L.Map;

interface StoredView {
  lat: number;
  lng: number;
  zoom: number;
}

export function initMap(): L.Map {
  const saved = loadView();
  const center: L.LatLngTuple = saved ? [saved.lat, saved.lng] : DEFAULT_CENTER;
  const zoom = saved ? saved.zoom : DEFAULT_ZOOM;

  map = L.map("map").setView(center, zoom);

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 19,
  }).addTo(map);

  map.on("moveend", () => {
    const c = map.getCenter();
    saveView({ lat: c.lat, lng: c.lng, zoom: map.getZoom() });
  });

  return map;
}

function loadView(): StoredView | null {
  const raw = localStorage.getItem(STORAGE_KEY);
  if (!raw) return null;
  try {
    return JSON.parse(raw);
  } catch {
    return null;
  }
}

function saveView(view: StoredView): void {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(view));
}

export function getMap(): L.Map {
  return map;
}