const stores = [
  { name: "かっぱ寿司 鶴岡店", lat: 38.735242, lng: 139.819540, url: "http://roy.e.koeki-u.ac.jp/~c123176/mycgi/table.html" },
  { name: "かっぱ寿司 酒田店", lat: 38.918944, lng: 139.855681, url: "http://roy.e.koeki-u.ac.jp/~c123176/mycgi/table.html" },
  { name: "かっぱ寿司 山形北店", lat: 38.290091, lng: 140.325267, url: "http://roy.e.koeki-u.ac.jp/~c123176/mycgi/table.html" },
  { name: "かっぱ寿司 山形嶋店", lat: 38.288041, lng: 140.310786, url: "http://roy.e.koeki-u.ac.jp/~c123176/mycgi/table.html" },
  { name: "かっぱ寿司 天童店", lat: 38.369121, lng: 140.375138, url: "http://roy.e.koeki-u.ac.jp/~c123176/mycgi/table.html" }
];
 
const maxDistance = 500;
let map;
let userMarker;
 
function initMap() {
  map = L.map('map').setView([38.5, 140.2], 9);
 
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
 
  const stamps = JSON.parse(localStorage.getItem("stamps") || "[]");
 
  stores.forEach(store => {
    const isStamped = stamps.includes(store.name);
 
    const marker = L.marker([store.lat, store.lng], {
      icon: L.icon({
        iconUrl: isStamped
          ? "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
          : "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      })
    }).addTo(map);
 
    const popupText = `
      <b>${store.name}</b><br>
      ${isStamped ? "✅ スタンプ獲得済み！" : "❌ スタンプ未獲得"}<br>
      <a href="${store.url}" target="_blank">店舗ページへ</a>
    `;
 
    marker.bindPopup(popupText);
  });
 
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
 
      userMarker = L.marker([lat, lng], {
        icon: L.icon({
          iconUrl: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
          iconSize: [32, 32],
          iconAnchor: [16, 32]
        })
      }).addTo(map).bindPopup("あなたの現在地").openPopup();
 
      map.setView([lat, lng], 13);
    }, () => {
      alert("現在地の取得に失敗しました。");
    });
  } else {
    alert("このブラウザでは位置情報が使えません。");
  }
}
 
document.getElementById("checkBtn").addEventListener("click", checkLocation);
 
function checkLocation() {
  if (!navigator.geolocation) {
    alert("位置情報が取得できません");
    return;
  }
 
  navigator.geolocation.getCurrentPosition(
    position => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
 
      if (userMarker) {
        userMarker.setLatLng([lat, lng]);
      }
 
      let resultHTML = "";
      stores.forEach(store => {
        const distance = getDistance(lat, lng, store.lat, store.lng);
        if (distance <= maxDistance) {
          resultHTML += `<p class="got">${store.name}のスタンプをゲット！（約${Math.round(distance)}m）</p>`;
          saveStamp(store.name);
        } else {
          resultHTML += `<p>${store.name}は近くにありません（約${Math.round(distance)}m）</p>`;
        }
      });
 
      document.getElementById("result").innerHTML = resultHTML;
      showStamps();
      initMap(); // マーカー再描画
    },
    () => {
      alert("現在地の取得に失敗しました。");
    }
  );
}
 
function getDistance(lat1, lng1, lat2, lng2) {
  const R = 6371000;
  const toRad = angle => angle * 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;
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c;
}
 
function saveStamp(storeName) {
  const stamps = JSON.parse(localStorage.getItem("stamps") || "[]");
  if (!stamps.includes(storeName)) {
    stamps.push(storeName);
    localStorage.setItem("stamps", JSON.stringify(stamps));
  }
}
 
function showStamps() {
  const stamps = JSON.parse(localStorage.getItem("stamps") || "[]");
  const list = document.getElementById("stampList");
  list.innerHTML = "";
  stamps.forEach(name => {
    const li = document.createElement("li");
    li.textContent = name;
    list.appendChild(li);
  });
}
 
initMap();
showStamps();