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

// ===================================
// デバイスID
// ===================================
let deviceId = localStorage.getItem("deviceId");
if (!deviceId) {
  deviceId = crypto.randomUUID();
  localStorage.setItem("deviceId", deviceId);
}

// ===================================
// 変数
// ===================================
let allMembers = []; // ← 一度参加したメンバーは全員ここに保存
let currentGroup = "";
let currentUser = "";
let map;
let selfMarker = null;
let otherMarkers = [];
let latestByDevice = {};
let lastLat = null;
let lastLng = null;

let isHost = false; // ← Supabase で判定する本物のホスト判定

// 駅関連
let stationMarkers = [];

// 目的地共有関連
let targetMarker = null;
let targetLat = null;
let targetLng = null;
let arrived = false;
let lastShownDistance = null;

// デフォルト（皇居）
const DEFAULT_LAT = 35.681236;
const DEFAULT_LNG = 139.767125;

// ===================================
// アイコン
// ===================================
const stationIcon = L.icon({
  iconUrl:
    "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png",
  shadowUrl:
    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
});

const targetIcon = L.icon({
  iconUrl:
    "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
  shadowUrl:
    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
});

// ===================================
// URL のグループ / ユーザー読み込み
// ===================================
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;
}

// ===================================
// 本物のホスト判定（Supabase groups.host_name）
// ===================================
async function decideHost() {
  const { data, error } = await supa
    .from("groups")
    .select("host_name")
    .eq("group_name", currentGroup)
    .maybeSingle();

  if (error) {
    console.error("ホスト情報の取得に失敗:", error);
    isHost = false;
  } else if (data && data.host_name) {
    isHost = data.host_name === currentUser;
  } else {
    isHost = false;
  }

  // 画面表示へ反映
  const hostLabel = document.getElementById("hostStatus");
  if (hostLabel)
    hostLabel.textContent = isHost ? "あなたはホストです" : "一般メンバーです";
}

// ===================================
// 小型ピン
// ===================================
function createLabeledMarker(lat, lng, name, isSelf) {
  const pinUrl = isSelf
    ? "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png"
    : "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png";

  const html = `
    <div class="pin-wrapper">
      <img src="${pinUrl}" class="pin-img">
      <div class="pin-label">${name}</div>
    </div>
  `;

  return L.marker([lat, lng], {
    icon: L.divIcon({
      className: "custom-pin",
      html: html,
      iconSize: [32, 32],
      iconAnchor: [16, 32],
    }),
  });
}

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

// ===================================
// マップ初期化（正しい構造版）
// ===================================
function initMap(lat, lng) {
  map = L.map("map").setView([lat, lng], 16);

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

  // ★目的地設定（ホストのみ）
  map.on("click", async (e) => {
    if (!isHost) {
      alert("目的地を設定できるのはホストだけです！");
      return;
    }

    const newLat = e.latlng.lat;
    const newLng = e.latlng.lng;

    // すでに目的地がある場合＝再設定確認
    if (targetLat !== null && targetLng !== null) {
      const confirmReset = confirm("目的地を再設定しますか？");
      if (!confirmReset) return;
    }

    // ▼到着通知の初期化
    arrived = false;
    lastShownDistance = null;

    const box = document.getElementById("targetInfo");
    box.style.background = "";
    box.style.borderLeft = "";
    box.textContent = "目的地を設定中…";

    // ▼目的地更新
    targetLat = newLat;
    targetLng = newLng;

    if (targetMarker) map.removeLayer(targetMarker);
    targetMarker = L.marker([targetLat, targetLng], { icon: targetIcon }).addTo(map);

    // ▼Supabaseへ保存
    await supa.from("shared_target").upsert({
      group_name: currentGroup,
      lat: targetLat,
      lng: targetLng
    });

    box.textContent = "目的地をグループに共有しました！";
  });
}

// ===================================
// 自分の位置保存
// ===================================
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 = createLabeledMarker(lastLat, lastLng, currentUser, true);
  selfMarker.addTo(map);
}
// ===================================
// メンバー一覧（永続保持版・チカチカゼロ）
// ===================================
function showMemberList(latestByDevice) {
  const list = document.getElementById("memberList");

  // ① 新しい人を allMembers に追加（順番は固定）
  Object.values(latestByDevice).forEach(row => {
    if (!allMembers.some(m => m.device_id === row.device_id)) {
      allMembers.push({
        device_id: row.device_id,
        user_name: row.user_name
      });
    }
  });

  // ② allMembers の順番で表示する（位置が変わらない！）
  allMembers.forEach(member => {
    let li = list.querySelector(`li[data-id="${member.device_id}"]`);

    // 初登場なら li を作成
    if (!li) {
      li = document.createElement("li");
      li.dataset.id = member.device_id;

      li.innerHTML = `
        <div class="member-icon"></div>
        <span class="member-name"></span>
        <span class="member-status"></span>
      `;
      list.appendChild(li);
    }

    // オンライン判定（いない場合はオフライン扱い）
    const row = latestByDevice[member.device_id];
    const online =
      row &&
      (Date.now() - new Date(row.updated_at)) / 1000 < 6;

    // テキスト更新
    li.querySelector(".member-name").textContent = member.user_name;

    // 色（自分は緑、他人は黄）
    const iconColor =
      member.device_id === deviceId ? "#58c16b" : "#FFD700";
    li.querySelector(".member-icon").style.background = iconColor;

    li.querySelector(".member-status").textContent =
      online ? "🟢" : "🔴";

    li.classList.toggle("online", online);
    li.classList.toggle("offline", !online);
  });
}

// ===================================
// 他ユーザー取得
// ===================================
async function showOtherUsers() {
  const { data } = await supa
    .from("locations")
    .select("*")
    .eq("group_name", currentGroup)
    .order("updated_at", { ascending: false });

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

  showMemberList(latestByDevice);

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

  Object.values(latestByDevice).forEach((row) => {
    if (row.device_id === deviceId) return;
    const mk = createLabeledMarker(row.lat, row.lng, row.user_name, false);
    mk.addTo(map);
    otherMarkers.push(mk);
  });
}

// ===================================
// 距離計算
// ===================================
function distanceMeters(lat1, lng1, lat2, lng2) {
  const R = 6371000;
  const toRad = (deg) => deg * Math.PI / 180;

  const dLat = toRad(lat2 - lat1);
  const dLng = toRad(lng2 - lng1);

  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(toRad(lat1)) *
    Math.cos(toRad(lat2)) *
    Math.sin(dLng / 2) ** 2;

  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}

// ===================================
// 到着判定（OKボタン付き）
// ===================================
function checkArrival() {
  if (targetLat === null || targetLng === null) return;

  const d = distanceMeters(lastLat, lastLng, targetLat, targetLng);
  const km = (d / 1000).toFixed(2);
  const box = document.getElementById("targetInfo");

  // ▼50m以上変わったときだけ更新
  if (lastShownDistance === null || Math.abs(d - lastShownDistance) > 50) {
    box.style.background = "";
    box.style.borderLeft = "";
    box.innerHTML = `目的地まで 約 ${km} km`;
    lastShownDistance = d;
  }

  // ▼到着判定（初回のみ）
  if (d < 120 && !arrived) {
    arrived = true;

    box.style.background = "#ffe4e1";
    box.style.borderLeft = "5px solid #ff4d6d";

    // OK ボタン付き表示
    box.innerHTML = `
      🎉 目的地に到着しました！ 🎉<br>
      <button id="okArrivalBtn" style="
        margin-top:8px;
        padding:6px 12px;
        border-radius:6px;
        background:#ff6b8c;
        color:white;
        border:none;
        cursor:pointer;
      ">OK！</button>
    `;

    // ボタンクリックで状態をリセット
    setTimeout(() => {
      const btn = document.getElementById("okArrivalBtn");
      if (btn) {
        btn.onclick = () => {
          arrived = false;
          lastShownDistance = null;
          box.style.background = "";
          box.style.borderLeft = "";
          box.textContent = "目的地情報を待っています…";
        };
      }
    }, 100);
  }
}

// ===================================
// 駅取得
// ===================================
async function fetchStationsAround(lat, lng) {
  const query = `
    [out:json];
    node["railway"="station"](around:5000,${lat},${lng});
    out;
  `;
  const url =
    "https://overpass-api.de/api/interpreter?data=" +
    encodeURIComponent(query);
  const res = await fetch(url);
  const json = await res.json();
  return json.elements || [];
}

// ===================================
async function loadStations() {
  const box = document.getElementById("nearestBox");

  try {
    const stations = await fetchStationsAround(lastLat, lastLng);

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

    if (stations.length === 0) {
      box.textContent = "駅が見つかりませんでした。";
      return;
    }

    let nearest = null;
    let nearestDist = Infinity;

    stations.forEach((st) => {
      const sLat = st.lat;
      const sLng = st.lon;
      const name = st.tags?.name || "駅名不明";

      const d = distanceMeters(lastLat, lastLng, sLat, sLng);
      if (d < nearestDist) {
        nearest = { name, lat: sLat, lng: sLng };
        nearestDist = d;
      }

      const mk = L.marker([sLat, sLng], { icon: stationIcon }).addTo(map);
      mk.bindPopup(name + "駅");
      stationMarkers.push(mk);
    });

    box.textContent =
      "最寄り駅：" +
      nearest.name +
      "（約 " +
      (nearestDist / 1000).toFixed(2) +
      " km）";
  } catch {
    box.textContent = "駅情報を取得できませんでした。";
  }
}

// ===================================
// 共有目的地の読込
// ===================================
async function loadSharedTarget() {
  const { data } = await supa
    .from("shared_target")
    .select("*")
    .eq("group_name", currentGroup)
    .maybeSingle();

  if (!data) return;

  if (targetLat === data.lat && targetLng === data.lng) return;

  targetLat = data.lat;
  targetLng = data.lng;
  arrived = false;
  lastShownDistance = null;

  if (targetMarker) map.removeLayer(targetMarker);
  targetMarker = L.marker([targetLat, targetLng], {
    icon: targetIcon,
  }).addTo(map);

  document.getElementById("targetInfo").textContent =
    "目的地が共有されました！距離計算中…";
}

// ===================================
// main
// ===================================
async function main() {
  loadParams();
  await decideHost(); // ← 本物のホスト判定！

  let lat = DEFAULT_LAT;
  let lng = DEFAULT_LNG;

  try {
    const pos = await getPosition();
    lat = pos.latitude;
    lng = pos.longitude;
  } catch {}

  lastLat = lat;
  lastLng = lng;

  initMap(lat, lng);
  renderSelfMarker();

  await saveMyLocation(lat, lng);
  await showOtherUsers();

  loadStations();
  loadSharedTarget();

  setInterval(async () => {
    try {
      const pos = await getPosition();
      lastLat = pos.latitude;
      lastLng = pos.longitude;

      renderSelfMarker();
      await saveMyLocation(lastLat, lastLng);
      checkArrival();
    } catch {}
  }, 2000);

  setInterval(showOtherUsers, 1000);
  setInterval(loadSharedTarget, 10000); // ← 上書きしない安全な更新

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

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

window.addEventListener("DOMContentLoaded", main);