document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("gpsmap").setView([38.929707, 139.859449], 16); // 初期位置を指定
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);

    var pin1LatLng = L.latLng([38.929707, 139.859449]);
    var pin2LatLng = L.latLng([38.934472, 139.843791]);

    var pins = [
        { name: "町田商店", coordinates: pin1LatLng },
        { name: "ラーメン大", coordinates: pin2LatLng }
    ];

    var pinIndex = null;
    var lastClickedPin = null;
    var gpsmarker = L.marker([0, 0]).addTo(mymap); // 初期値を[0, 0]に設定
    gpsmarker.bindPopup("現在の位置").openPopup();

    var watchId = null;
    var nTrial = 100;

    function stopGPS() {
        console.log("Stopping GPS");
        navigator.geolocation.clearWatch(watchId);
        document.getElementById("title").textContent = "stop";
        gpsmarker.setPopupContent("停めました");
        watchId = null;
    }

    function tryWatchGPS() {
        stopGPS();
        nTrial = 100;
        pinIndex = null;

        // 2つのピンを表示
        var pin1 = L.marker(pin1LatLng).addTo(mymap).bindPopup("町田商店");
        var pin2 = L.marker(pin2LatLng).addTo(mymap).bindPopup("ラーメン大");

        // クリックしたピンの情報を保存
        pin1.on('click', function () {
            lastClickedPin = pins[0];
        });

        pin2.on('click', function () {
            lastClickedPin = pins[1];
        });

        // 現在の位置をピンとして設定
        navigator.geolocation.getCurrentPosition((pos) => {
            var currentLatLng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
            mymap.panTo(currentLatLng);
            gpsmarker.setLatLng(currentLatLng).setPopupContent("現在の位置").openPopup();
        });

        // ピン情報を表示
        document.getElementById("pin-info").textContent = `Pin 1: ${pins[0].name}, Pin 2: ${pins[1].name}`;
        watchId = navigator.geolocation.watchPosition(
            onSuccess, onError, { maximumAge: 0, timeout: 3000, enableHighAccuracy: true });
        document.getElementById("title").textContent = "START!!";
    }

    function onSuccess(pos) {
        var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
        mymap.panTo(latlng);
        console.log(latlng);

        if (pinIndex !== null) {
            var pinCoordinates = pins[pinIndex].coordinates;
            var pinLatLng = L.latLng(pinCoordinates);
            var distance = latlng.distanceTo(pinLatLng);

            gpsmarker.setLatLng(latlng).setPopupContent(
                `距離: ${distance.toFixed(2)} メートル`
            ).openPopup();
        }
    }

    function onError(err) {
        var restN = "あと" + (--nTrial) + "回試行します。";
        gpsmarker.setPopupContent("捕捉失敗:" + restN).openPopup();
        if (nTrial <= 0) {
            navigator.geolocation.clearWatch(watchId);
        }
    }

    function finishGame() {
        if (lastClickedPin !== null) {
            stopGPS();
            var pinCoordinates = lastClickedPin.coordinates;
            var pinLatLng = L.latLng(pinCoordinates);
            var distance = mymap.getCenter().distanceTo(pinLatLng);
            var resultMessage = distance < 50 ? "正解！" : "不正解";
            alert(`ゲーム終了！\n${lastClickedPin.name}への距離: ${distance.toFixed(2)} メートル\n${resultMessage}`);
        } else {
            alert("まずはSTARTボタンを押してゲームを始めてください！");
        }
    }

    // 初回の位置取得
    navigator.geolocation.getCurrentPosition((pos) => {
        var currentLatLng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
        mymap.setView(currentLatLng, 16);
        gpsmarker.setLatLng(currentLatLng).setPopupContent("現在の位置").openPopup();
    });

    document.getElementById("start").addEventListener("click", tryWatchGPS);
    document.getElementById("stop").addEventListener("click", stopGPS);
    document.getElementById("finish").addEventListener("click", finishGame);

});
