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("cheat-mode");

    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.markerInstance.getPopup() || pin.completed) return;
        });
    });

    // プレイヤーの現在地を取得してピンの有効範囲を更新
    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(`
                            <div>
                                <p>${pin.options.title}</p>
                                <button id="start-game-${pin.options.title}" class="start-game-btn">ゲームを開始する</button>
                            </div>
                        `);
                    } else {
                        pin.markerInstance.unbindPopup();
                    }
                }
            });
        }, onError);
    }

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

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

    // 距離計算関数 (地球半径を用いた計算)
    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 onError(error) {
        console.error("位置情報の取得に失敗しました", error);
    }

    // イベントリスナー: ポップアップ内のボタンでゲームを開始
    mymap.on('popupopen', (event) => {
        const popupContent = event.popup.getContent();
        const startGameButton = document.querySelector('.start-game-btn');

        if (startGameButton) {
            startGameButton.addEventListener('click', () => {
                mapContainer.style.display = 'none';
                gameContainer.style.display = 'block';

                const pin = pins.find(pin => pin.options.title === startGameButton.id.split('-')[2]);
                startShootingGame(pin.background).then(() => {
                    pin.completed = true;
                    completedPins++;
                    statusText.textContent = `クリア済みのピン: ${completedPins}`;

                    pin.markerInstance.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';

                    pin.markerInstance.off('click');
                    checkCompletion();
                });
            });
        }
    });

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