// app.js
import { 
  commentsCollection, addDoc, query, orderBy, onSnapshot 
} from "./firebase.js";

// Leafletマップ初期化
const map = L.map("map").setView([35.681236, 139.767125], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
}).addTo(map);

const markers = [];

// コメント履歴表示関数
function addCommentToHistory({ comment, timestamp, docId }) {
  const list = document.getElementById("comments-list");
  if (!list) return;

  // 既に表示済みならスキップ（重複防止）
  if (list.querySelector(`[data-doc-id="${docId}"]`)) return;

  const entry = document.createElement("div");
  entry.className = "history-entry";
  entry.dataset.docId = docId;
  entry.innerHTML = `
    <p><strong>日時:</strong> ${timestamp?.toDate().toLocaleString() || "読み込み中..."}</p>
    <p class="comment-text">${comment}</p>
  `;
  list.appendChild(entry);
}

// Firestoreのコメントをリアルタイム取得して地図・履歴に表示
function loadComments() {
  const commentsList = document.getElementById("comments-list");
  if (commentsList) commentsList.innerHTML = "";

  markers.forEach(m => map.removeLayer(m));
  markers.length = 0;

  const q = query(commentsCollection, orderBy("timestamp", "asc"));

  onSnapshot(q, (snapshot) => {
    snapshot.docChanges().forEach(change => {
      const data = change.doc.data();
      const docId = change.doc.id;

      if (change.type === "added") {
        addCommentToHistory({ ...data, docId });

        const marker = L.marker([data.lat, data.lng]).addTo(map);
        marker.docId = docId;
        markers.push(marker);

        marker.bindPopup(`
          <div class="info-window">
            <p><strong>日時:</strong> ${data.timestamp?.toDate().toLocaleString()}</p>
            <p><strong>コメント:</strong> ${data.comment}</p>
          </div>
        `);
      }
      // 変更や削除処理も必要ならここで実装可
    });
  });
}

// コメント送信処理
document.getElementById("comment-form").addEventListener("submit", async e => {
  e.preventDefault();

  const form = e.target;
  const lat = parseFloat(form.lat.value);
  const lng = parseFloat(form.lng.value);
  const comment = form.comment.value.trim();
  if (!lat || !lng || !comment) {
    alert("全ての項目を正しく入力してください。");
    return;
  }

  const timestamp = new Date();

  try {
    await addDoc(commentsCollection, { lat, lng, comment, timestamp });
    alert("コメントを保存しました！");
    form.reset();
  } catch (err) {
    console.error(err);
    alert("コメントの保存に失敗しました。");
  }
});

window.addEventListener("load", () => {
  loadComments();
});