// index.ts — App Entry Point
// run with: npm run dev
// compile with npx tsc --noEmit --pretty false --incremental false

import { loadPreferences, savePreferences } from "./preferences.js";
import "leaflet/dist/leaflet.css";
import { switchProvider } from "./provider/map-controller.js";
import { providerRegistry } from "./provider/provider-registry.js";
import { initLocales } from "./locale.js";
import { about } from "./context-menu.js";  
import "./importers/gpx";
// ---------------------------------------------------------
// 1. APP STATE
// ---------------------------------------------------------
let debugInfo = "";
const urlCode = window.location.pathname.replace("/", ""); // see if there's a code following the url

interface AppState {
  gridVisible: boolean;
  projection: "mercator" | "globe";
  mode: "2d" | "3d";
  basemap: string;
}

const defaults: AppState = {
  gridVisible: true,
  projection: "mercator",
  mode: "2d",
  basemap: "https://demotiles.maplibre.org/style.json"
};

const state: AppState = {
  ...defaults,
  ...loadPreferences()
};

// ---------------------------------------------------------
// 2. MAP INITIALISATION
// ---------------------------------------------------------

import { currentProvider } from "./provider/map-controller.js";
switchProvider("maplibre");

// ---------------------------------------------------------
// 3. UI CONTROLS
// ---------------------------------------------------------

function initUI() {
  const gridToggle = document.getElementById("grid-toggle")!;
  gridToggle.onclick = () => {
    state.gridVisible = !state.gridVisible;
    savePreferences(state);
    gridToggle.textContent = state.gridVisible ? "Grid: ON" : "Grid: OFF";
  };
}

const providerSelect = document.getElementById("provider-select") as HTMLSelectElement;
providerSelect.onchange = () => {
  const chosen = providerSelect.value as keyof typeof providerRegistry;
  switchProvider(chosen);               
};

currentProvider.on("load", () => {
  if (urlCode) {
    search(urlCode);
  }
});

const input = document.getElementById("grid-input") as HTMLInputElement;

import { search } from "./search.js";
input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    const value = input.value.trim();
    if (value !== "") {
      search(value);
    }
  }
});

const locateBtn = document.getElementById("locate-btn") as HTMLButtonElement;
import { zoomToLocation } from "./provider/map-controller";
locateBtn.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      const { latitude, longitude } = pos.coords;
      zoomToLocation(latitude, longitude); 
      // or mapController.zoomToBounds(...)
    },
    (err) => {
      console.warn("Geolocation error:", err);
    }
  );
});


const aboutBtn = document.getElementById("about-btn") as HTMLButtonElement;
aboutBtn.addEventListener("click", () => {
  about();
});
//initLocales();

window.addEventListener("load", () => {
  const splash = document.getElementById("splash");
  const logo = document.querySelector(".splash-logo") as HTMLElement;
  const arrow = document.querySelector(".arrow-logo") as HTMLElement;

  if (!splash || !logo || !arrow) return;

  // 1️⃣ Delay before fading out GRIDCODE logo
  setTimeout(() => {
    logo.style.opacity = "0";
  }, 1200); // adjust delay

  // 2️⃣ Fade in arrow
  setTimeout(() => {
    arrow.style.opacity = "1";
  }, 800); // delay + logo fade duration

  // 3️⃣ Fade out arrow
  setTimeout(() => {
    arrow.style.opacity = "0";
  }, 2300); // delay + fade + visible time

  // 4️⃣ Optional: remove splash container
  setTimeout(() => {
    splash.remove();
  }, 3000);
});