// ===================================
// Supabase 設定
// ===================================
const SUPABASE_URL = "https://ogtlmtnjkpsxsqzqlacj.supabase.co";
const SUPABASE_KEY =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI";

const supa = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

// ===================================
let deviceId = localStorage.getItem("deviceId");
if (!deviceId) {
  deviceId = crypto.randomUUID();
  localStorage.setItem("deviceId", deviceId);
}

let currentGroup = "";
let currentUser = "";

let map;
let selfMarker = null;
let otherMarkers = [];
let lastLat, lastLng;

const DEFAULT_LAT = 35.681236;
const DEFAULT_LNG = 139.767125;

// ===================================
function loadParams() {
  const p = new URLSearchParams(location.search);
  currentGroup = p.get("group");
  currentUser = p.get("user");

  document.getElementById("groupName").textContent = currentGroup;
  document.getElementById("userName").textContent = currentUser;
}

// ===================================
function createIcon(type) {
  return L.icon({
    iconUrl:
      type === "self"
        ? "https://maps.gstatic.com/mapfiles/kml/paddle/blu-stars.png"
        : "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
    iconSize: [40, 55],
    iconAnchor: [20, 50],
  });
}

// ===================================
function getPosition() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      pos => resolve(pos.coords),
      reject,
      { enableHighAccuracy: true }
    );
  });
}

// ===================================
function initMap(lat, lng) {
  map = L.map("map").setView([lat, lng], 15);

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
  }).addTo(map);
}

// ===================================
async function saveMyLocation(lat, lng) {
  await supa
    .from("locations")
    .delete()
    .eq("group_name", currentGroup)
    .eq("device_id", deviceId);

  await supa.from("locations").insert({
    group_name: currentGroup,
    user_name: currentUser,
    device_id: deviceId,
    lat,
    lng,
  });
}

// ===================================
function renderSelfMarker() {
  if (selfMarker) map.removeLayer(selfMarker);

  selfMarker = L.marker([lastLat, lastLng], {
    icon: createIcon("self")
  }).addTo(map);

  selfMarker.bindPopup(`<b>${currentUser}</b>（あなた）`);

  selfMarker.on("click", () => {
    map.setView(selfMarker.getLatLng(), 17, { animate: true });
    selfMarker.openPopup();
  });
}

// ===================================
function showMemberList(latest) {
  const list = document.getElementById("memberList");
  list.innerHTML = "";

  Object.values(latest).forEach(row => {
    const li = document.createElement("li");
    li.textContent = row.user_name;

    li.onclick = () => {
      if (row.device_id === deviceId) {
        selfMarker.fire("click");
      } else {
        const mk = otherMarkers.find(m => m._deviceId === row.device_id);
        if (mk) mk.fire("click");
      }
    };

    list.appendChild(li);
  });
}

// ===================================
async function showOtherUsers() {
  const { data } = await supa
    .from("locations")
    .select("*")
    .eq("group_name", currentGroup);

  const latest = {};
  data.forEach(row => {
    if (!latest[row.device_id]) latest[row.device_id] = row;
  });

  showMemberList(latest);

  otherMarkers.forEach(m => map.removeLayer(m));
  otherMarkers = [];

  Object.values(latest).forEach(row => {
    if (row.device_id === deviceId) return;

    const mk = L.marker([row.lat, row.lng], {
      icon: createIcon("other")
    }).addTo(map);

    mk._deviceId = row.device_id;

    mk.on("click", () => {
      map.setView([row.lat, row.lng], 17, { animate: true });
      mk.openPopup();
    });

    otherMarkers.push(mk);
  });
}

// ===================================
async function main() {
  loadParams();

  let lat = DEFAULT_LAT, lng = DEFAULT_LNG;
  try {
    const p = await getPosition();
    lat = p.latitude;
    lng = p.longitude;
  } catch {}

  lastLat = lat;
  lastLng = lng;

  initMap(lat, lng);
  renderSelfMarker();
  await saveMyLocation(lat, lng);

  await showOtherUsers();

  setInterval(async () => {
    try {
      const p = await getPosition();
      lastLat = p.latitude;
      lastLng = p.longitude;
      renderSelfMarker();
      await saveMyLocation(lastLat, lastLng);
    } catch {}
  }, 8000);

  setInterval(showOtherUsers, 2000);

  document.getElementById("exitBtn").onclick = () =>
    (location.href = "index.html");

  setTimeout(() => map.invalidateSize(), 300);
}

window.addEventListener("DOMContentLoaded", main);