script.js

const movieList = document.getElementById("movieList");
const searchInput = document.getElementById("searchInput");
const searchButton = document.getElementById("searchButton");
const modal = document.getElementById("modal");
const modalDetails = document.getElementById("modalDetails");
const closeModal = document.querySelector(".close");
const homeBtn = document.getElementById("homeBtn");
const bookmarkFilterBtn = document.getElementById("bookmarkFilterBtn");

const confirmModal = document.getElementById("confirmModal");
const confirmYes = document.getElementById("confirmYes");
const confirmNo = document.getElementById("confirmNo");

let bookmarks = JSON.parse(localStorage.getItem("bookmarks")) || [];
let pendingBookmark = null;

async function fetchMovies(query = "Harry potter") {
  try {
    const res = await fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&query=${query}`);
    const data = await res.json();
    renderMovies(data.results);
  } catch (err) {
    alert("영화 정보를 불러오는 데 실패했습니다.");
    console.error(err);
  }
}

async function fetchBookmarkedMovies() {
  try {
    const results = await Promise.all(
      bookmarks.map(async (id) => {
        const res = await fetch(`${BASE_URL}/movie/${id}?api_key=${API_KEY}`);
        return await res.json();
      })
    );
    renderMovies(results);
  } catch (err) {
    alert("북마크 영화 불러오기 실패");
    console.error(err);
  }
}

function renderMovies(movies) {
  movieList.innerHTML = "";
  movies.forEach(movie => {
    const isBookmarked = bookmarks.includes(String(movie.id));
    const card = document.createElement("div");
    card.classList.add("movie-card");
    card.dataset.id = movie.id;
    card.innerHTML = `
      <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" />
      <div class="movie-info">
        <h3>${movie.title}</h3>
        <p>⭐ ${movie.vote_average}</p>
        <button class="bookmark-btn ${isBookmarked ? "active" : ""}" data-id="${movie.id}">🔖</button>
      </div>
    `;
    movieList.appendChild(card);
  });
}

function debounce(func, delay = 500) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
}

const debouncedSearch = debounce(() => {
  const query = searchInput.value.trim();
  if (query) fetchMovies(query);
}, 500);

searchInput.addEventListener("input", debouncedSearch);
searchInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") fetchMovies(searchInput.value.trim());
});
searchButton.addEventListener("click", () => {
  fetchMovies(searchInput.value.trim());
});

homeBtn.addEventListener("click", () => {
  fetchMovies("Harry potter");
});

bookmarkFilterBtn.addEventListener("click", fetchBookmarkedMovies);

movieList.addEventListener("click", async (e) => {
  const card = e.target.closest(".movie-card");
  if (!card) return;

  if (e.target.classList.contains("bookmark-btn")) {
    pendingBookmark = {
      id: card.dataset.id,
      btn: e.target,
    };
    showConfirmModal();
    e.stopPropagation();
    return;
  }

  const movieId = card.dataset.id;
  const res = await fetch(`${BASE_URL}/movie/${movieId}?api_key=${API_KEY}`);
  const movie = await res.json();
  showModal(movie);
});

function showModal(movie) {
  modalDetails.innerHTML = `
    <h2>${movie.title}</h2>
    <p>${movie.overview}</p>
    <p><strong>개봉일:</strong> ${movie.release_date}</p>
  `;
  modal.classList.remove("hidden");
  history.pushState({ modal: true }, "", `#movie-${movie.id}`);
}

function hideModal() {
  modal.classList.add("hidden");
  if (location.hash.startsWith("#movie-")) {
    history.back();
  }
}

closeModal.addEventListener("click", hideModal);
window.addEventListener("popstate", () => {
  hideModal();
});

function showConfirmModal() {
  confirmModal.classList.remove("hidden");
}

function hideConfirmModal() {
  confirmModal.classList.add("hidden");
  pendingBookmark = null;
}

confirmYes.addEventListener("click", () => {
  if (pendingBookmark) {
    const { id, btn } = pendingBookmark;
    if (!bookmarks.includes(id)) {
      bookmarks.push(id);
      btn.classList.add("active");
      localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
    }
  }
  hideConfirmModal();
});

confirmNo.addEventListener("click", () => {
  hideConfirmModal();
});

fetchMovies();