script.js

let allShows = [];
let allEpisodes = [];
let currentShowId = null;

const cache = {
  shows: null,
  episodesByShowId: {},
};

function setup() {
  loadShows();
}

function renderShows(showList) {
  const root = document.getElementById("root");
  root.innerHTML = "";

  const title = document.createElement("h1");
  title.textContent = "TV Shows";

  const showSelect = document.createElement("select");

  const defaultOption = document.createElement("option");
  defaultOption.value = "";
  defaultOption.textContent = "Select a show...";
  showSelect.appendChild(defaultOption);

  allShows.forEach((show) => {
    const option = document.createElement("option");
    option.value = show.id;
    option.textContent = show.name;
    showSelect.appendChild(option);
  });

  showSelect.addEventListener("change", () => {
    const selectedId = showSelect.value;
    if (!selectedId) return;

    currentShowId = selectedId;
    renderEpisodesView();
    loadEpisodesForShow(selectedId);
  });

  const searchInput = document.createElement("input");
  searchInput.placeholder = "Search shows...";
  
  const count = document.createElement("p");

  const container = document.createElement("div");
  container.id = "shows-container";

  function renderShowCards(showList) {
    container.innerHTML = "";

    showList.forEach((show) => {
      const card = document.createElement("article");
      card.className = "show-card";

      card.innerHTML = `
        <h2>${show.name}</h2>
        <img src="${show.image?.medium || ""}" alt="${show.name}">
        <div>${show.summary || ""}</div>
        <p><strong>Genres:</strong> ${show.genres.join(", ")}</p>
        <p><strong>Status:</strong> ${show.status}</p>
        <p><strong>Rating:</strong> ${show.rating?.average || "N/A"}</p>
        <p><strong>Runtime:</strong> ${show.runtime || "N/A"} mins</p>
      `;

      card.addEventListener("click", () => {
        currentShowId = show.id;
        renderEpisodesView();
        loadEpisodesForShow(show.id);
      });

      container.appendChild(card);
    });

    count.textContent = `Showing ${showList.length} / ${allShows.length} shows`;
  }

  searchInput.addEventListener("input", () => {
    const term = searchInput.value.toLowerCase();

    const filtered = allShows.filter((show) =>
      show.name.toLowerCase().includes(term) ||
      show.genres.join(" ").toLowerCase().includes(term) ||
      (show.summary || "").toLowerCase().includes(term)
    );

    renderShowCards(filtered);
  });

  renderShowCards(allShows);

  root.append(title, showSelect, searchInput, count, container);
}


function renderEpisodesView() {
  const root = document.getElementById("root");
  root.innerHTML = "";

  const backBtn = document.createElement("button");
  backBtn.textContent = "← Back to Shows";
  backBtn.addEventListener("click", () => {
    renderShows(allShows);
  });

  const controls = document.createElement("div");

  const episodeSelect = document.createElement("select");
  episodeSelect.id = "episode-select";

  const searchInput = document.createElement("input");
  searchInput.id = "search-input";
  searchInput.placeholder = "Search episodes...";

  const countDisplay = document.createElement("p");
  countDisplay.id = "count-display";

  const statusMessage = document.createElement("p");
  statusMessage.id = "status-message";

  const container = document.createElement("div");
  container.id = "episodes-container";

  controls.append(episodeSelect, searchInput, countDisplay);

  root.append(backBtn, controls, statusMessage, container);

  episodeSelect.addEventListener("change", updateDisplay);
  searchInput.addEventListener("input", updateDisplay);
}

function loadShows() {
  if (cache.shows) {
    allShows = cache.shows;
    renderShows(allShows);
    return;
  }

  fetch("https://api.tvmaze.com/shows")
    .then((res) => res.json())
    .then((data) => {
      allShows = data.sort((a, b) =>
        a.name.localeCompare(b.name, undefined, { sensitivity: "base" })
      );

      cache.shows = allShows;
      renderShows();
    })
    .catch((err) => console.error(err));
}

function loadEpisodesForShow(showId) {
  const status = document.getElementById("status-message");

  if (cache.episodesByShowId[showId]) {

    const status = document.getElementById("status-message");

    allEpisodes = cache.episodesByShowId[showId];
    populateEpisodeSelector();
    updateDisplay();
    return;
  }

  status.textContent = "Loading episodes...";

  fetch(`https://api.tvmaze.com/shows/${showId}/episodes`)
    .then((res) => res.json())
    .then((data) => {
      cache.episodesByShowId[showId] = data;
      allEpisodes = data;

      status.textContent = "";
      populateEpisodeSelector();
      updateDisplay();
    })
    .catch(() => {
      status.textContent = "Error loading episodes";
    });
}

function populateEpisodeSelector() {
  const select = document.getElementById("episode-select");
  select.innerHTML = "";

  const allOpt = document.createElement("option");
  allOpt.value = "all";
  allOpt.textContent = "All episodes";
  select.appendChild(allOpt);

  allEpisodes.forEach((ep) => {
    const opt = document.createElement("option");
    opt.value = ep.id;
    opt.textContent = `${getEpisodeCode(ep)} - ${ep.name}`;
    select.appendChild(opt);
  });
}

function updateDisplay() {
  const term = document
    .getElementById("search-input")
    .value.toLowerCase();

  const selected = document.getElementById("episode-select").value;

  let filtered = allEpisodes.filter((ep) => {
    const summary = ep.summary ? ep.summary.toLowerCase() : "";
    return (
      ep.name.toLowerCase().includes(term) ||
      summary.includes(term)
    );
  });

  if (selected !== "all") {
    filtered = filtered.filter((ep) => String(ep.id) === selected);
  }

  renderEpisodes(filtered);
  updateCount(filtered.length, allEpisodes.length);
}

function renderEpisodes(list) {
  const container = document.getElementById("episodes-container");
  container.innerHTML = "";

  list.forEach((ep) => {
    const card = document.createElement("article");

    card.innerHTML = `
      <h2>${ep.name} - ${getEpisodeCode(ep)}</h2>
      <img src="${ep.image?.medium || ""}" alt="${ep.name}">
      <div>${ep.summary || ""}</div>
    `;

    container.appendChild(card);
  });
}

function updateCount(current, total) {
  document.getElementById(
    "count-display"
  ).textContent = `Displaying ${current}/${total} episodes`;
}

function getEpisodeCode(ep) {
  const s = String(ep.season).padStart(2, "0");
  const n = String(ep.number).padStart(2, "0");
  return `S${s}E${n}`;
}

window.onload = setup;