// フレーム内でのデバイスモード選択の位置調整スクリプト
document.addEventListener('DOMContentLoaded', () => {
  if (window !== window.top) {
    const modal = document.querySelector('.device-mode-modal-wrapper');
    if (modal) {
      modal.style.left = '39%';
    }
  }
});


// ✕ボタンとオーバーレイをクリックしてモーダルを閉じる
document.addEventListener('DOMContentLoaded', () => {
  const closeButton = document.querySelector('.modal-batsu-button');
  const overlay = document.querySelector('.device-mode-modal-overlay');

  const modal = document.getElementById('deviceModeSelectModal');

  // ✕ボタン
  if (closeButton) {
    closeButton.addEventListener('click', () => {
      if (modal) modal.style.display = 'none';
      if (overlay) overlay.style.display = 'none';
    });
  }

  // オーバーレイ
  if (overlay) {
    overlay.addEventListener('click', () => {
      if (modal) modal.style.display = 'none';
      overlay.style.display = 'none';
    });
  }
});


// デバイスモードセレクトボタンのクリックイベント
document.addEventListener('DOMContentLoaded', () => {
    // デバイスモードセレクトボタンを取得
    const deviceModeButton = document.querySelector('.device-mode-switch-btn');
    const [deviceModeButtonPC, deviceModeButtonSP] = document.querySelectorAll('.device-mode-btn');
    const modalWrapper = document.querySelector('.device-mode-modal-wrapper');
    const modal = document.getElementById('deviceModeSelectModal');
    const overlay = document.querySelector('.device-mode-modal-overlay');
    const deviceModeSave = document.getElementById("deviceModeSavePreference");



    // モーダル表示ボタンのクリックイベント
    if (deviceModeButton) {
        deviceModeButton.addEventListener('click', () => {
            console.log('モーダル表示ボタンがクリックされました。');
            if (modalWrapper) modalWrapper.style.display = 'block'; // これを必ず追加！
            if (modal) modal.style.display = 'block';
            if (overlay) overlay.style.display = 'block';
        });
    }

    // ボタン1のクリックイベント
    if (deviceModeButtonPC) {
        deviceModeButtonPC.addEventListener('click', () => {
            console.log('PCモードボタンがクリックされました。');
            setMultiDeviceCookie('0', deviceModeSave.checked); // クッキーを設定
            const url = new URL(window.location.href);
            if (url.pathname === '/') {
                // トップページ
                window.top.location.href = '/';
            } else if(url.pathname.startsWith('/areatop/')) {
                // areatop
                window.top.location.href = url.href;
            } else{
                // URLからパラメータを取得
                bkparams = url.pathname.split('/');
                //bkparamsからacodeを取得
                let acode = null;
                for (let i = 0; i < bkparams.length; i++) {
                    if (bkparams[i].startsWith('acode=')) {
                        acode = bkparams[i].split('=')[1];
                        break;
                    }
                }
                if (acode) {
                    // acodeが存在する場合は、acodeを含むURLにリダイレクト
                    redirectUrl = '/areatop/acode=' + acode + '/url=' + encodeURIComponent(url.pathname);
                    window.top.location.href = redirectUrl;
                } else {
                    redirectUrl = '/areatop/acode=3/url=' + encodeURIComponent(url.pathname);
                    window.top.location.href = redirectUrl;
                }
            }
        });
    }

    // ボタン2のクリックイベント
    if (deviceModeButtonSP) {
        deviceModeButtonSP.addEventListener('click', () => {
            console.log('SPモードボタンがクリックされました。');
            setMultiDeviceCookie('1', deviceModeSave.checked); // クッキーを設定
            if(window === window.top) {
                window.location.reload();
            }
            window.top.location=window.location; // ページをリロードしてモードを反映
        });
    }
});

// 対象機種（iPadPro;"Macintosh"+"touchend"あり）でクッキーがない場合はいきなりモーダルダイアログを表示
document.addEventListener('DOMContentLoaded', () => {
    const userAgent = navigator.userAgent.toLowerCase();
    const isMultiDevice = /macintosh/.test(userAgent) && 'ontouchend' in document;
    if(document.cookie.indexOf('multi_device=') === -1 && isMultiDevice) {
        // マルチデバイスのクッキーが存在しない場合、モーダルを表示
        const modalWrapper = document.querySelector('.device-mode-modal-wrapper');
        const modal = document.getElementById('deviceModeSelectModal');
        const overlay = document.querySelector('.device-mode-modal-overlay');
        if (modalWrapper) modalWrapper.style.display = 'block';
        if (modal) modal.style.display = 'block';
        if (overlay) overlay.style.display = 'block';
    }
});

// マルチデバイス選択クッキー
function setMultiDeviceCookie(value, mode) {
    if (mode) {
        // mode=trueだと永続クッキー
        document.cookie = `multi_device=${value}; path=/; max-age=31536000; SameSite=Lax`;
    } else {
        // mode=falseだとセッションクッキー
        document.cookie = `multi_device=${value}; path=/; SameSite=Lax`;
    }
}