let markers = []; // マーカー配列
let currentRouteLayer = null; // 現在のルートライン

document.getElementById('loadCsv').addEventListener('click', function () {
    const regionSelect = document.getElementById('regionSelect');
    if (!regionSelect) {
        console.error("regionSelect要素が見つかりません");
        return;
    }

    const selectedValue = regionSelect.value;
    if (!selectedValue) {
        alert("地域を選択してください！");
        return;
    }

    console.log("選択した地域の値: " + selectedValue);

    // 既存のマーカー削除
    markers.forEach(marker => map.removeLayer(marker));
    markers = [];
    if (currentRouteLayer) {
        map.removeLayer(currentRouteLayer);
        currentRouteLayer = null;
    }

    const csvFilePath = 'csv/iti.csv';

    fetch(csvFilePath)
        .then(response => {
            if (!response.ok) {
                throw new Error('ネットワークエラーが発生しました。');
            }
            return response.text();
        })
        .then(data => {
            const rows = data.split('\n').map(row => row.trim()).filter(row => row.length > 0);
            const regionRanges = {
                '0': [1, 96],
                '1': [1, 5],
                '2': [5, 8],
                '3': [8, 13],
                '4': [13, 15],
                '5': [15, 18],
                '6': [18, 19],
                '7': [19, 22],
                '8': [22, 27],
                '9': [27, 31],
                '10': [31, 33],
                '11': [33, 36],
                '12': [36, 38],
                '13': [38, 40],
                '14': [40, 43],
                '15': [43, 45],
                '16': [45, 48],
                '17': [48, 52],
                '18': [52, 53],
                '19': [53, 55],
                '20': [55, 56],
                '21': [56, 57],
                '22': [57, 59],
                '23': [59, 61],
                '24': [61, 66],
                '25': [66, 68],
                '26': [68, 71],
                '27': [71, 75],
                '28': [75, 76],
                '29': [76, 81],
                '30': [81, 83],
                '31': [83, 87],
                '32': [87, 88],
                '33': [88, 89],
                '34': [89, 95],
                '35': [95, 96],
            };

            if (!regionRanges[selectedValue]) {
                alert("選択された地域は未対応です。");
                return;
            }

            const [startRow, endRow] = regionRanges[selectedValue];
            for (let i = startRow; i < endRow; i++) {
                const cells = rows[i].split(',');
                const name = cells[0]?.toUpperCase();
                const longitude = parseFloat(cells[1]);
                const latitude = parseFloat(cells[2]);

                if (!name || isNaN(longitude) || isNaN(latitude)) continue;

                const marker = L.marker([latitude, longitude]).addTo(map);
                marker.bindPopup(`
                    <h3>${name}</h3>
                    <button class="routeBtn">ここまで行く</button>
                    <button class="resetBtn">リセット</button>
                `);

                // ↓↓↓ ポップアップが開いた時にボタンイベントを登録
                marker.on('popupopen', function () {
                    const routeBtn = document.querySelector('.routeBtn');
                    const resetBtn = document.querySelector('.resetBtn');

                    // 既存のイベントが複数登録されないように一度クリア（安全対策）
                    routeBtn?.replaceWith(routeBtn.cloneNode(true));
                    resetBtn?.replaceWith(resetBtn.cloneNode(true));

                    const newRouteBtn = document.querySelector('.routeBtn');
                    const newResetBtn = document.querySelector('.resetBtn');

                    if (newRouteBtn) {
                        newRouteBtn.addEventListener('click', function () {
                            if (currentRouteLayer) {
                                map.removeLayer(currentRouteLayer);
                            }

                            navigator.geolocation.getCurrentPosition(function (position) {
                                const userLatLng = L.latLng(position.coords.latitude, position.coords.longitude);
                                const destLatLng = marker.getLatLng();

                                currentRouteLayer = L.polyline([userLatLng, destLatLng], { color: 'blue' }).addTo(map);
                                map.fitBounds([userLatLng, destLatLng]);
                            }, function (error) {
                                alert("現在地を取得できませんでした: " + error.message);
                            });
                        });
                    }

                    if (newResetBtn) {
                        newResetBtn.addEventListener('click', function () {
                            if (currentRouteLayer) {
                                map.removeLayer(currentRouteLayer);
                                currentRouteLayer = null;
                            }
                        });
                    }
                });

                markers.push(marker);
            }
        })
        .catch(error => {
            console.error('エラー:', error);
        });
});