import { createClient } from "https://esm.sh/@supabase/supabase-js";

// ====== 🔥 ここを書き換える場所 🔥 ======
const SUPABASE_URL = "https://ogtlmtnjkpsxsqzqlacj.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI";
// ======================================

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

(function () {
  const urlParams = new URLSearchParams(window.location.search);
  const groupName = urlParams.get("group");

  document.getElementById("groupNameDisplay").textContent =
    `グループ名：${groupName}`;

  const map = L.map("map").setView([35.0, 135.0], 5);

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

  let myMarker = null;

  // --- 現在地取得 ---
  navigator.geolocation.watchPosition(async (pos) => {
    const lat = pos.coords.latitude;
    const lng = pos.coords.longitude;

    if (!myMarker) {
      myMarker = L.marker([lat, lng], {
        title: `あなた（${groupName}）`,
      }).addTo(map);
      map.setView([lat, lng], 16);
    } else {
      myMarker.setLatLng([lat, lng]);
    }

    // --- Supabase に保存 ---
    await supabase.from("locations").insert({
      group_name: groupName,
      lat,
      lng,
    });

  });

  // --- 他メンバーの現在地を表示 ---
  setInterval(async () => {
    const { data } = await supabase
      .from("locations")
      .select("*")
      .eq("group_name", groupName)
      .order("updated_at", { ascending: false })
      .limit(20);

    data.forEach((row) => {
      L.circleMarker([row.lat, row.lng], {
        radius: 6,
        color: "#0984e3",
        fillColor: "#74b9ff",
        fillOpacity: 0.9,
      }).addTo(map);
    });
  }, 5000);

})();