import { initializeApp } from 'https://www.gstatic.com/firebasejs/11.10.0/firebase-app.js';
import { getDatabase, ref, get } from 'https://www.gstatic.com/firebasejs/11.10.0/firebase-database.js';

// Firebase 초기화
const app = initializeApp({
  apiKey: "AIzaSyB7Z2bAp5_M2l4w3szU8RYsMY5XvwLsu1E",
  authDomain: "blogger-dobae.firebaseapp.com",
  databaseURL: "https://blogger-dobae-default-rtdb.firebaseio.com",
  projectId: "blogger-dobae",
  storageBucket: "blogger-dobae.firebasestorage.app",
  messagingSenderId: "842454397432",
  appId: "1:842454397432:web:f2ecb9ef638e6562e0a60d",
  measurementId: "G-JB07QMVYS3"
});

const db = getDatabase(app);

let bucheonPosts = [];
let currentPage = 0; 
const pageSize = 6;

const container = document.getElementById('posts');
const btn = document.getElementById('loadMoreBtn');

// ==========================
// 모달 생성
// ==========================
const modal = document.createElement('div');
modal.id = 'postModal';
modal.style.cssText = `
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
`;
modal.innerHTML = `
  <div id="modalContent" style="background:#fff; max-width:800px; width:90%; padding:20px; border-radius:10px; max-height:90%; overflow:auto; position:relative;">
    <button id="closeModal" style="position:absolute; top:10px; right:10px; font-size:20px; cursor:pointer;">✖</button>
    <div id="modalInner"></div>
    <div id="modalImages" style="margin-top:15px; display:flex; justify-content:center; gap:10px; overflow-x:auto;"></div>
  </div>
`;
document.body.appendChild(modal);

// 모달 닫기
document.getElementById('closeModal').onclick = () => {
  modal.style.display = 'none';
  clearInterval(slideInterval);
};

// ==========================
// 이미지 슬라이드 변수
// ==========================
let slideIndex = 0;
let slideInterval;
const gwangmyeongDistricts = {
  '광명': [
    // 광명1동 ~ 광명7동
    '광명동','광명1동','광명2동','광명3동','광명4동','광명5동','광명6동','광명7동',
    '소하동','소하1동','소하2동','소하3동',
    '하안동','하안1동','하안2동','하안3동','하안4동','하안5동',
    '철산동','철산1동','철산2동','철산3동','철산4동','철산5동'
  ]
};
// ==========================
// 게시물 로드
// ==========================
const allDongs = [...new Set(gwangmyeongDistricts['광명'])];

async function loadBucheonPosts() {
  const snapshot = await get(ref(db, 'posts'));
  const posts = snapshot.val();
  if (!posts) return;

  bucheonPosts = Object.entries(posts)
    .filter(([key, payload]) => {
      const text = (payload.location || '') + ' ' + (payload.title || '');

       return (
        (text.includes('광명') || text.includes('광명시')) &&
        allDongs.some(dong =>
          text.includes(dong + ' ') || text.endsWith(dong)
        )
      );
    })
    .map(([key, payload]) => ({
      key,
      title: payload.title || '제목 없음',
      thumb: payload.thumb || (payload.images && payload.images[0]) || 'https://blogs.it.kr/images/24평시공전.webp',
      content: payload.content || "<p>내용이 없습니다.</p>",
      images: payload.images || []
    }));

  currentPage = 0;
  renderPosts();
}
// ==========================
// 게시물 렌더링
// ==========================
function renderPosts() {
  container.innerHTML = '';

  const start = currentPage * pageSize;
  const slice = bucheonPosts.slice(start, start + pageSize);

  slice.forEach(post => {
    const li = document.createElement('li');
    li.className = 'post-item';
    li.innerHTML = `
      <img src="${post.thumb}" alt="${post.title}" style="cursor:pointer;">
      <span>${post.title}</span>
    `;
li.querySelector('img').onclick = () => {
  const modalInner = document.getElementById('modalInner');
  const modalImages = document.getElementById('modalImages');

  // 모달 초기화
  modalImages.innerHTML = '';
  modalInner.innerHTML = '';
  const existingMain = document.getElementById('mainSlide');
  if (existingMain) existingMain.remove();
  clearInterval(slideInterval);

  // images 배열이 없으면 thumb 사용
  const imagesToShow = post.images.length > 0 ? post.images : [post.thumb];

  // 메인 이미지 생성
  const mainSlide = document.createElement('img');
  mainSlide.id = 'mainSlide';
  mainSlide.src = imagesToShow[0];
  mainSlide.style.width = '100%';
  mainSlide.style.height = 'auto';
  mainSlide.style.marginBottom = '10px';
  mainSlide.style.borderRadius = '5px';
  modalImages.parentNode.insertBefore(mainSlide, modalImages);

  // 썸네일 생성
  imagesToShow.forEach((imgUrl) => {
    const img = document.createElement('img');
    img.src = imgUrl;
    img.style.width = '120px';
    img.style.height = '80px';
    img.style.objectFit = 'cover';
    img.style.cursor = 'pointer';
    img.onclick = () => mainSlide.src = imgUrl;
    modalImages.appendChild(img);
  });

  // content를 이미지 아래에 추가
  modalImages.insertAdjacentElement('afterend', modalInner);
  modalInner.innerHTML = post.content;

  // 자동 슬라이드 (이미지 2개 이상일 때만)
  if (imagesToShow.length > 1) {
    slideIndex = 0;
    slideInterval = setInterval(() => {
      slideIndex = (slideIndex + 1) % imagesToShow.length;
      mainSlide.src = imagesToShow[slideIndex];
    }, 3000);
  }

  modal.style.display = 'flex';
};

    container.appendChild(li);
  });

  currentPage++;
  btn.style.display = currentPage * pageSize < bucheonPosts.length ? 'block' : 'none';
}

// 더보기 버튼
btn.onclick = renderPosts;

// 초기 실행
loadBucheonPosts();