// ===============================
// 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 currentGroup = "";

function loadGroup() {
  const params = new URLSearchParams(location.search);
  currentGroup = params.get("group") || "未指定";
  document.getElementById("groupName").textContent = currentGroup;
}

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

// ===============================
// 地図
// ===============================
let map;
let userMarker;
let otherMarkers = [];
let reloadTimer;

// 皇居をデフォルト位置
const DEFAULT_LAT = 35.685175;
const DEFAULT_LNG = 139.752799;

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);

  userMarker = L.marker([lat, lng]).addTo(map);
  userMarker.bindPopup("あなたの現在地");
}

// ===============================
// Supabase に保存
// ===============================
async function saveMyLocation(lat, lng) {
  if (currentGroup === "未指定") return;

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

// ===============================
// グループのピン表示
// ===============================
async function loadMarkers() {
  if (currentGroup === "未指定") return;

  const { data } = await supa
    .from("locations")
    .select("*")
    .eq("group_name", currentGroup)
    .order("updated_at", { ascending: false });

  // 古いピン削除
  otherMarkers.forEach((m) => map.removeLayer(m));
  otherMarkers = [];

  // 新しいピン
  data.forEach((row) => {
    const mk = L.marker([row.lat, row.lng]).addTo(map);
    mk.bindPopup(`更新: ${row.updated_at}`);
    otherMarkers.push(mk);
  });
}

// ===============================
// main
// ===============================
async function main() {
  loadGroup(); // グループ名読み込み

  let lat = DEFAULT_LAT;
  let lng = DEFAULT_LNG;

  try {
    const pos = await getPosition();
    lat = pos.latitude;
    lng = pos.longitude;
  } catch {
    console.warn("現在地取得に失敗。デフォルト表示。");
  }

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

  reloadTimer = setInterval(loadMarkers, 10000);
}

window.addEventListener("DOMContentLoaded", main);