import { startShootingGame } from './shooter.js';

document.addEventListener("DOMContentLoaded", () => {
    const mapContainer = document.getElementById("map");
    const gameContainer = document.getElementById("game-container");
    const statusText = document.getElementById("status");
    const cheatButton = document.getElementById("toggle-cheat");

    let isCheatMode = false;
    let completedPins = 0;

    // マップの初期化
    const mymap = L.map("map").setView([38.898, 139.824], 14);
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);

    // ピンの位置とオプション
    const pins = [
        { marker: [38.898999, 139.818379], options: { title: "その1" }, background: 'background1.jpg', completed: false },
        { marker: [38.902560, 139.838504], options: { title: "その2" }, background: 'background2.jpg', completed: false },
        { marker: [38.891517, 139.852012], options: { title: "その3" }, background: 'background3.jpg', completed: false },
        { marker: [38.923071, 139.843187], options: { title: "その4" }, background: 'background4.jpg', completed: false }
    ];

    // 各ピンをマップに追加
    pins.forEach((pin, index) => {
        const marker = L.marker(pin.marker, pin.options).addTo(mymap);
        pin.markerInstance = marker;

        marker.on('click', () => {
            if (pin.completed) return; // クリア済みなら無視

            mapContainer.style.display = 'none';
            gameContainer.style.display = 'block';

            startShootingGame(pin.background).then(() => {
                pin.completed = true;
                completedPins++;
                statusText.textContent = `クリア済みのピン: ${completedPins}`;

                marker.setIcon(L.icon({
                    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41]
                }));

                gameContainer.style.display = 'none';
                mapContainer.style.display = 'block';

                marker.off('click'); // クリック不可にする
                checkCompletion();
            });
        });
    });

    // 距離計算関数 (地球半径を用いた計算)
    function calculateDistance(lat1, lng1, lat2, lng2) {
        const R = 6371e3; // 地球の半径 (メートル)
        const φ1 = lat1 * Math.PI / 180;
        const φ2 = lat2 * Math.PI / 180;
        const Δφ = (lat2 - lat1) * Math.PI / 180;
        const Δλ = (lng2 - lng1) * Math.PI / 180;

        const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
                  Math.cos(φ1) * Math.cos(φ2) *
                  Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

        return R * c; // メートルでの距離
    }

    // プレイヤーの現在地を取得してピンの有効範囲を更新
    function updatePinAvailability() {
        navigator.geolocation.getCurrentPosition((position) => {
            const playerLat = position.coords.latitude;
            const playerLng = position.coords.longitude;

            pins.forEach(pin => {
                const distance = calculateDistance(playerLat, playerLng, pin.marker[0], pin.marker[1]);
                if (!pin.completed) {
                    if (isCheatMode || distance <= 50) {
                        pin.markerInstance.bindPopup(pin.options.title);
                    } else {
                        pin.markerInstance.unbindPopup();
                    }
                }
            });
        }, onError);
    }

    // チートモードの切り替え
    cheatmode.addEventListener('click', () => {
        isCheatMode = !isCheatMode;
        cheatmode.textContent = isCheatMode ? "チートモード: ON" : "チートモード: OFF";
        updatePinAvailability();
    });

    // 全てのピンがクリアされたか確認
    function checkCompletion() {
        if (completedPins === pins.length) {
            alert("おめでとうございます！全てのピンをクリアしました！");
        }
    }

    // エラーハンドリング
    function onError(error) {
        console.error("位置情報の取得に失敗しました", error);
    }

    // 定期的にピンの有効性を更新
    setInterval(updatePinAvailability, 3000); // 3秒ごとに更新
});

