document.addEventListener('DOMContentLoaded', () => {
  const map = L.map('map').setView([38.855235, 139.910744], 16);

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

  // CSV読み込み
  Papa.parse("shonai_tiiki_map.csv", {
    download: true,
    header: true,
    complete: function(results) {
      results.data.forEach(row => {
        if (row.緯度 && row.経度) {
          const lat = parseFloat(row.緯度);
          const lng = parseFloat(row.経度);

          // 説明1～説明9を動的にまとめてポップアップ用HTML生成
          const descriptions = Array.from({ length: 9 }, (_, i) => row[`説明${i + 1}`])
            .filter(desc => desc && desc.trim() !== "")
            .map(desc => `<p>${desc}</p>`)
            .join("");

          // 画像処理（空欄は無視、クリックでモーダル表示）
          let images = "";
          if (row.画像1 && row.画像1.trim() !== "") {
            images += `<img src="${row.画像1}" width="106" height="73" onclick="openModal('${row.画像1}')" style="cursor:pointer;">`;
          }
          if (row.画像2 && row.画像2.trim() !== "") {
            images += `<img src="${row.画像2}" width="106" height="73" onclick="openModal('${row.画像2}')" style="cursor:pointer;">`;
          }

          // ポップアップ内容
          const popupContent = `
            <div class="popup-content">
              <h3>${row.名前}</h3>
              ${descriptions}
              ${images}
            </div>
          `;

          // アイコン設定。CSVのアイコンが空ならデフォルト
          const iconUrl = row.アイコン && row.アイコン.trim() !== "" ? row.アイコン : "images/defaultpin.png";
          const customIcon = L.icon({
            iconUrl: iconUrl,
            iconSize: [32, 32],
            iconAnchor: [16, 32],
            popupAnchor: [0, -32]
          });

          // マーカー追加してポップアップをバインド
          L.marker([lat, lng], { icon: customIcon }).addTo(map).bindPopup(popupContent);
        }
      });
    }
  });

  // モーダル表示関数
  window.openModal = function(imageSrc) {
    const modal = document.getElementById('image-modal');
    const modalImage = document.getElementById('modal-image');
    modalImage.src = imageSrc;
    modal.style.display = 'block';
  };

  // モーダル非表示関数
  window.closeModal = function() {
    const modal = document.getElementById('image-modal');
    modal.style.display = 'none';
  };

  // モーダル外クリックで閉じる
  window.onclick = function(event) {
    const modal = document.getElementById('image-modal');
    if (event.target === modal) {
      modal.style.display = 'none';
    }
  };
});