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


// ===============================
// URL パラメータ
// ===============================
const p = new URLSearchParams(location.search);
const currentGroup = p.get("group");

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


// ===============================
// グループ情報読み込み（ホスト名表示）
// ===============================
async function loadGroup() {
  const { data } = await supa
    .from("groups")
    .select("*")
    .eq("group_name", currentGroup)
    .maybeSingle();

  if (!data) {
    alert("このグループは存在しません");
    location.href = "index.html";
    return;
  }

  // active チェック
  if (data.is_active === true) {
    alert("このグループはまだ解散されていません。");
    location.href = "map4.html?group=" + currentGroup;
    return;
  }

  document.getElementById("hostName").textContent = data.host_name;
}


// ===============================
// 地図初期化
// ===============================
let map;
function initMap() {
  map = L.map("map").setView([35.681236, 139.767125], 13);

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


// ===============================
// メンバー最後の位置取得
// ===============================
async function loadLastLocations() {
  const list = document.getElementById("memberList");
  list.innerHTML = "";

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

  const latestByDevice = {};
  (data || []).forEach((r) => {
    if (!latestByDevice[r.device_id]) latestByDevice[r.device_id] = r;
  });

  Object.values(latestByDevice).forEach((row) => {
    const li = document.createElement("li");
    li.textContent = `${row.user_name}（${row.lat.toFixed(5)}, ${row.lng.toFixed(5)}）`;
    list.appendChild(li);

    L.marker([row.lat, row.lng]).addTo(map).bindPopup(row.user_name);
  });
}


// ===============================
// 最後の待ち合わせ場所
// ===============================
async function loadLastTarget() {
  const box = document.getElementById("lastTarget");

  const { data } = await supa
    .from("shared_target")
    .select("*")
    .eq("group_name", currentGroup)
    .maybeSingle();

  if (!data) {
    box.textContent = "記録なし";
    return;
  }

  box.innerHTML =
    `緯度：${data.lat}<br>経度：${data.lng}`;

  L.marker([data.lat, data.lng], {
    icon: L.icon({
      iconUrl:
        "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png",
      shadowUrl:
        "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
      iconSize: [25, 41],
      iconAnchor: [12, 41],
    }),
  })
    .addTo(map)
    .bindPopup("待ち合わせ場所");
}


// ===============================
// チャット履歴読み込み
// ===============================
async function loadChat() {
  const box = document.getElementById("chatList");

  const { data } = await supa
    .from("messages")
    .select("*")
    .eq("group_name", currentGroup)
    .order("created_at", { ascending: true });

  box.innerHTML = data
    .map(
      (m) =>
        `<div><strong>${m.user_name}:</strong> ${m.message}</div>`
    )
    .join("");
}


// ===============================
// メイン
// ===============================
async function main() {
  await loadGroup();
  initMap();
  await loadLastLocations();
  await loadLastTarget();
  await loadChat();

  // 戻る
  document.getElementById("backBtn").onclick = () =>
    (location.href = "index.html");
}

window.addEventListener("DOMContentLoaded", main);