//--------------------------------------------
// ① Supabase 設定（ここに自分の情報を入れる）
//--------------------------------------------
const supabaseUrl = "https://ogtlmtnjkpsxsqzqlacj.supabase.co";          // 例: https://abcxyz.supabase.co
const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9ndGxtdG5qa3BzeHNxenFsYWNqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjMyOTU3NjUsImV4cCI6MjA3ODg3MTc2NX0.JnCE7oUQwrSgGqiu-QRbwnaLBZrO8JX1_RUb37VIMFI";       // 例: eyJhbGciOiJI...
import { createClient } from "https://esm.sh/@supabase/supabase-js";

const supabase = createClient(supabaseUrl, supabaseKey);

//--------------------------------------------
// ② Leaflet 読み込み
//--------------------------------------------
import L from "https://esm.sh/leaflet";

//--------------------------------------------
// ③ メイン処理（即時実行）
//--------------------------------------------
(async function () {
    const params = new URLSearchParams(location.search);
    const GROUP = params.get("group");

    document.getElementById("groupName").textContent = GROUP;

    // 地図準備
    const map = L.map("map").setView([35.0, 135.0], 15);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© OpenStreetMap contributors"
    }).addTo(map);

    let userMarker = null;
    let otherMarkers = [];

    //--------------------------------------------
    // ④ 自分の位置を取得
    //--------------------------------------------
    navigator.geolocation.getCurrentPosition(async (pos) => {
        const lat = pos.coords.latitude;
        const lng = pos.coords.longitude;

        // 自分の位置マーカー
        userMarker = L.marker([lat, lng], { title: "自分" })
            .addTo(map)
            .bindPopup(`自分（グループ: ${GROUP}）`)
            .openPopup();

        // 自動で自分の位置へ移動
        map.setView([lat, lng], 15);

        // Supabase に保存
        await saveLocation(GROUP, lat, lng);

        // 他メンバー位置をロード
        loadOthers();
        setInterval(loadOthers, 3000);
    });
    

    //--------------------------------------------
    // ⑤ Supabaseへ位置を保存
    //--------------------------------------------
    async function saveLocation(group, lat, lng) {
        await supabase
            .from("locations")
            .insert({
                group_name: group,
                lat: lat,
                lng: lng
            });
    }

    //--------------------------------------------
    // ⑥ Supabaseから他ユーザーの位置を取得
    //--------------------------------------------
    async function loadOthers() {
        const { data } = await supabase
            .from("locations")
            .select("*")
            .eq("group_name", GROUP)
            .order("updated_at", { ascending: false });

        // 古いマーカー消す
        otherMarkers.forEach(m => map.removeLayer(m));
        otherMarkers = [];

        // 自分以外を表示
        data.forEach(item => {
            const marker = L.marker([item.lat, item.lng])
                .addTo(map)
                .bindPopup(`メンバー<br>グループ: ${item.group_name}`);
            otherMarkers.push(marker);
        });
    }
})();