// mapping.jsの部分
const map = L.map('map').setView([39.0192, 139.7523], 11); //setview：開いたときに最初に表示される場所を指定する。

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

// location.jsの部分
let currentLocationMarker = null;
let geoErrorShown = false;

if (navigator.geolocation) {
  const ask = confirm("現在地を取得しますか？");

  if (ask) {
    navigator.geolocation.watchPosition(
      position => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        geoErrorShown = false;
        
        if(!currentLocationMarker) {
          currentLocationMarker = L.marker([lat, lng])
            .addTo(map)
            .bindPopup("現在地")
            .openPopup();
         
         map.setView([lat, lng], 16);
        } else {
           currentLocationMarker.setLatLng([lat, lng]);
         }
      },
   
      error => {
        if (!geoErrorShown) {
          alert("現在地が取得できませんでした");
          geoErrorShown = true;
        }
      },
	      
      {
        enableHighAccuracy: false,
        timeout: 10000,
        maximumAge: 30000
      }
    );
  }

} else {
    alert("このブラウザでは現在地取得が使えません");
  }
 
// OSRMルート表示用の変数
let routeLayer = null;

// 現在地からchten.csvの地点までのルートを引く関数
async function routeFromCurrentLocation(toLat, toLng) {
  //現在地が未取得の場合
  if (!currentLocationMarker) {
    alert("先に現在地を取得してください");
    return;
  }
  
  // 現在地の座標
  const from = currentLocationMarker.getLatLng();
  const fromLat = from.lat;
  const fromLng = from.lng;

  // OSRMのURL
  const url = `https://router.project-osrm.org/route/v1/driving/${fromLng},${fromLat};${toLng},${toLat}?overview=full&geometries=geojson`;

  // OSRMへアクセス
  const response = await fetch(url);
  const data = await response.json();

  if (!data.routes || data.routes.length === 0) {
    alert("ルートが見つかりません");
    return;
  }

  // ルート座標(lng,lat → lat,lngに変換)
  const routeCoords = data.routes[0].geometry.coordinates.map(c => [c[1], c[0]]);

  // 距離(km)と時間(分)
  const distance = (data.routes[0].distance / 1000).toFixed(2);
  const duration = (data.routes[0].duration / 60).toFixed(1);

  // 既存ルートを削除
  if (routeLayer) {
    map.removeLayer(routeLayer);
  }

  // ルート描画
  routeLayer = L.polyline(routeCoords, {
    weight: 5
  }).addTo(map);

  map.fitBounds(routeLayer.getBounds());

  alert(`距離：${distance} km\n時間：約${duration}分`);
}

// fetch.jsの部分(追加部分あり)
// CSV読み込み
fetch('uMap1.csv') //「chiten.csv」をください、とブラウザがサーバーに取りに行く命令
  .then(res => res.text()) //サーバーから返ってきたデータの"箱"の中身をテキストとして読み取る
  .then(text => {
    // fetchで読み込んだ直後のCSVは\nつきの1本の長い文字列なので行ごとに分ける
    const lines = text.split('\n');
    // 最初の行(i=0行目)はヘッダー(name,lat,lng)なのでスキップ
    for (let i = 1; i < lines.length; i++) {
      const line = lines[i].trim(); //i番目の行を取り出し、trim()で前後の空白を消す
      if (line === "") continue; // もし空行だったら次の行へ(スキップ)
      const [desc, name, lat, lng] = line.split(','); // カンマ(,)で分ける
      const latNum = parseFloat(lat); // 緯度・経度を数値に変換
      const lngNum = parseFloat(lng);
      const layer = ["菓子類","その他食料品","その他食料品・飲料","タバコ類","衣類","化粧品・香水","病院","クリニック","調剤薬局","ドラッグストア"];
      
      // マーカー(ピン)を追加
      if (isNaN(latNum) || isNaN(lngNum)) continue; //緯度か経度のどちらかが「数値」でなければ、次のcsvの行に行く
      //var ovlLayers  = {};
      var item = desc.split("\\n")[0];
      var url1 = desc.match(/\[\[(.+)\]\]/g)[0];
      var url = url1.substr(2, url1.indexOf(']]'));
      marker = L.marker([latNum, lngNum], {
        icon: L.divIcon({
          //html: '<a class="marker">あ</a>',
          className: 'marker1', 
          iconSize: [20, 20]
        }),
      }).addTo(map) //L.marker()で地図上にマーカーを立てるように指示 bindPopupはマーカーをクリックした時にふきだしを表示させる
        .bindPopup(`
          <b>${name}</b><br>${desc.replace(/\\n/g, '<br>').replace(/\[\[(.+)\]\]/g, `<a href=\"${url}\">${url}</a>`)}<br>
          <button onclick = "routeFromCurrentLocation(${latNum}, ${lngNum})">現在地からの道のりを見る</button> 
        `); //これを押すことにより、現在地から地点までのルートを計算して表示
      //ovlLayers[item] = {item : marker};
      //console.log(ovlLayers);
    }
});
//var baseLayers = {'OpenStreetMap': osmTile};
//   マーカーを2つオーバーレイレイヤに指定
//   ベースレイヤとオーバーレイレイヤをマップに追加
//L.control.layers(baseLayers, ovlLayers).addTo(map);