// 地図の初期化
const map = L.map('map').setView([38.9122, 139.8360], 13);

// 国土地理院の地図タイルレイヤーを追加
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
    maxZoom: 18,
    minZoom: 5
}).addTo(map);

// ページ読み込み時に保存されたコメントを表示
window.addEventListener('load', loadSavedComments);

// マーカーを管理する配列
let markers = [];

// 地図をクリックしてマーカーと情報ウィンドウを追加
map.on('click', (e) => {
    const { lat, lng } = e.latlng;
    addMarker(lat, lng);
});

// マーカーとコメント入力ウィンドウを追加
function addMarker(lat, lng) {
    const marker = L.marker([lat, lng]).addTo(map);
    const popupContent = `
        <div class="info-window">
            <p>活動日記を入力してください:</p>
            <textarea id="comment" rows="3" style="width:100%;"></textarea>
            <button onclick="saveComment('${lat}', '${lng}')">保存</button>
        </div>
    `;
    marker.bindPopup(popupContent).openPopup();
}

// コメントを保存し、右側の履歴に追加
function saveComment(lat, lng) {
    const comment = document.getElementById("comment").value;
    const timestamp = new Date().toLocaleString();

    if (!comment.trim()) {
        alert("コメントを入力してください。");
        return;
    }

    const entry = { lat, lng, comment, timestamp };
    addCommentToHistory(entry); // 履歴に表示
    saveToLocalStorage(entry);  // ローカルストレージに保存
    const marker = L.marker([lat, lng]).addTo(map); // マーカーを追加
    markers.push(marker); // マーカーを配列に保存
    marker.bindPopup(`
        <div class="info-window">
            <p><strong>日時:</strong> ${timestamp}</p>
            <p><strong>コメント:</strong> ${comment}</p>
        </div>
    `);
}

// ローカルストレージにコメントを保存
function saveToLocalStorage(entry) {
    let comments = JSON.parse(localStorage.getItem('comments')) || [];
    comments.push(entry);
    localStorage.setItem('comments', JSON.stringify(comments));
}

// 保存されたコメントをロードして表示
function loadSavedComments() {
    const comments = JSON.parse(localStorage.getItem('comments')) || [];
    comments.forEach((entry, index) => {
        addCommentToHistory(entry, index);
        const marker = L.marker([entry.lat, entry.lng]).addTo(map);
        markers[index] = marker; // マーカーを管理
        marker.bindPopup(`
            <div class="info-window">
                <p><strong>日時:</strong> ${entry.timestamp}</p>
                <p><strong>コメント:</strong> ${entry.comment}</p>
            </div>
        `);
    });
}

// 履歴にコメントを追加（削除・編集ボタン付き）
function addCommentToHistory({ lat, lng, comment, timestamp }, index) {
    const commentEntry = `
        <div class="history-entry" data-index="${index}">
            <p><strong>日時:</strong> ${timestamp}</p>
            <p><strong>場所:</strong> 緯度 ${lat}, 経度 ${lng}</p>
            <p><strong>活動日記:</strong> 
                <span class="comment-text" contenteditable="true" onblur="updateComment(${index}, this)">
                    ${comment}
                </span>
            </p>
            <button onclick="deleteComment(${index})">削除</button>
        </div>
    `;
    document.getElementById("comments-list").innerHTML += commentEntry;
}

// コメントを削除（対応するマーカーも削除）
function deleteComment(index) {
    let comments = JSON.parse(localStorage.getItem('comments')) || [];
    
    // ローカルストレージのデータを削除
    comments.splice(index, 1); // 指定されたコメントを削除
    localStorage.setItem('comments', JSON.stringify(comments)); // 更新されたコメントリストを保存

    // 対応するマーカーを削除
    if (markers[index]) {
        map.removeLayer(markers[index]); // 地図から削除
    }

    // マーカー配列を更新
    markers.splice(index, 1); // 配列から削除

    // コメント履歴をリロード
    reloadComments();
}

// コメントを直接編集し保存する（直接編集時に保存）
function updateComment(index, element) {
    let comments = JSON.parse(localStorage.getItem('comments')) || [];
    const newComment = element.textContent.trim(); // 編集後の内容を取得（空白を除去）

    if (!newComment) {
        alert("コメントは空白にできません。元の内容に戻します。");
        element.textContent = comments[index].comment; // 元のコメントに戻す
        return;
    }

    // コメントを更新して保存
    comments[index].comment = newComment;
    localStorage.setItem('comments', JSON.stringify(comments)); // ローカルストレージを更新
    reloadComments(); // コメント履歴をリロード
}

// コメント履歴をリロード
function reloadComments() {
    document.getElementById("comments-list").innerHTML = ""; // 履歴をクリア
    markers.forEach(marker => map.removeLayer(marker)); // 地図上の全マーカーを削除
    markers = []; // マーカー配列をリセット
    loadSavedComments(); // 保存されたコメントを再ロード
}