popup.js

const RECIPES_KEY = "savedRecipes";
const MAX_SUGGESTIONS = 5;
const SEASON_LABELS = {
  all: "Toutes saisons",
  winter: "Hiver",
  spring: "Printemps",
  summer: "Ete",
  autumn: "Automne"
};

const state = {
  recipes: [],
  activeTab: null,
  activeRecipePreview: null,
  selectedTab: "active"
};

const elements = {
  tabButtons: Array.from(document.querySelectorAll(".tab-button")),
  tabPanels: Array.from(document.querySelectorAll(".tab-panel")),
  saveButton: document.getElementById("save-current-recipe"),
  refreshSuggestionsButton: document.getElementById("refresh-suggestions"),
  activeTabStatus: document.getElementById("active-tab-status"),
  activeTabPreview: document.getElementById("active-tab-preview"),
  seasonFilter: document.getElementById("season-filter"),
  recipeCount: document.getElementById("recipe-count"),
  libraryCount: document.getElementById("library-count"),
  randomRecipes: document.getElementById("random-recipes"),
  allRecipes: document.getElementById("all-recipes"),
  cardTemplate: document.getElementById("recipe-card-template")
};

document.addEventListener("DOMContentLoaded", init);
for (const button of elements.tabButtons) {
  button.addEventListener("click", () => switchTab(button.dataset.tab));
}
elements.saveButton.addEventListener("click", handleSaveCurrentRecipe);
elements.refreshSuggestionsButton.addEventListener("click", renderSuggestions);
elements.seasonFilter.addEventListener("change", () => {
  renderSuggestions();
  renderAllRecipes();
});

async function init() {
  await Promise.all([loadRecipes(), inspectActiveTab()]);
  switchTab(state.selectedTab);
  renderSuggestions();
  renderAllRecipes();
}

async function loadRecipes() {
  state.recipes = await getFromStorage(RECIPES_KEY, []);
  elements.libraryCount.textContent = `${state.recipes.length} recette(s) uniques memorisee(s)`;
}

async function inspectActiveTab() {
  const [activeTab] = await queryActiveTab();
  state.activeTab = activeTab || null;
  state.activeRecipePreview = null;

  if (!activeTab?.id || !isJowRecipeUrl(activeTab.url || "")) {
    elements.saveButton.disabled = true;
    elements.activeTabStatus.textContent = "Aucune recette compatible active dans l'onglet courant.";
    elements.activeTabPreview.classList.add("hidden");
    return;
  }

  try {
    const response = await sendTabMessage(activeTab.id, { type: "extractRecipe" });
    if (!response?.ok || !response.recipe) {
      throw new Error(response?.error || "Impossible d'analyser cette page.");
    }

    state.activeRecipePreview = response.recipe;
    elements.saveButton.disabled = false;
    elements.activeTabStatus.textContent = "Recette detectee dans l'onglet courant.";
    renderActiveTabPreview(response.recipe);
  } catch (error) {
    elements.saveButton.disabled = true;
    elements.activeTabStatus.textContent = error.message;
    elements.activeTabPreview.classList.add("hidden");
  }
}

async function handleSaveCurrentRecipe() {
  if (!state.activeTab?.id) {
    return;
  }

  elements.saveButton.disabled = true;
  elements.activeTabStatus.textContent = "Enregistrement en cours...";

  try {
    const extracted = state.activeRecipePreview
      ? { ok: true, recipe: state.activeRecipePreview }
      : await sendTabMessage(state.activeTab.id, { type: "extractRecipe" });

    if (!extracted?.ok || !extracted.recipe) {
      throw new Error(extracted?.error || "Impossible d'extraire la recette.");
    }

    const saveResponse = await sendRuntimeMessage({
      type: "saveRecipe",
      tabId: state.activeTab.id,
      recipe: extracted.recipe
    });

    if (!saveResponse?.ok) {
      throw new Error(saveResponse?.error || "Erreur lors de la sauvegarde.");
    }

    state.activeRecipePreview = extracted.recipe;
    elements.activeTabStatus.textContent = saveResponse.alreadyTracked
      ? "Cette recette est deja suivie pour cet onglet."
      : "Recette enregistree. Sa date de fermeture sera memorisee quand l'onglet changera ou sera ferme.";

    await loadRecipes();
    renderSuggestions();
    renderAllRecipes();
  } catch (error) {
    elements.activeTabStatus.textContent = error.message;
  } finally {
    elements.saveButton.disabled = !state.activeRecipePreview;
  }
}

function renderActiveTabPreview(recipe) {
  elements.activeTabPreview.innerHTML = "";
  elements.activeTabPreview.classList.remove("hidden");
  elements.activeTabPreview.appendChild(createRecipeCard(recipe, { compact: true }));
}

function switchTab(tabId) {
  state.selectedTab = tabId;

  for (const button of elements.tabButtons) {
    button.classList.toggle("is-active", button.dataset.tab === tabId);
  }

  for (const panel of elements.tabPanels) {
    panel.classList.toggle("hidden", panel.dataset.panel !== tabId);
  }
}

function renderSuggestions() {
  const season = elements.seasonFilter.value;
  const pool = getFilteredRecipes(season);
  const picked = shuffle(pool).slice(0, MAX_SUGGESTIONS);
  elements.recipeCount.textContent = `${pool.length} recette(s) disponible(s) pour ${SEASON_LABELS[season].toLowerCase()}`;

  renderRecipeList(elements.randomRecipes, picked, {
    emptyMessage:
      season === "all"
        ? "Aucune recette enregistree pour le moment."
        : `Aucune recette n'a encore ete enregistree pour ${SEASON_LABELS[season].toLowerCase()}.`
  });
}

function renderAllRecipes() {
  const recipes = [...state.recipes].sort((left, right) => {
    return getLastOccurrenceTimestamp(right) - getLastOccurrenceTimestamp(left);
  });

  renderRecipeList(elements.allRecipes, recipes, {
    emptyMessage: "Aucune recette enregistree pour le moment."
  });
}

function renderRecipeList(container, recipes, { emptyMessage }) {
  container.innerHTML = "";

  if (recipes.length === 0) {
    const emptyState = document.createElement("p");
    emptyState.className = "empty-state";
    emptyState.textContent = emptyMessage;
    container.appendChild(emptyState);
    return;
  }

  for (const recipe of recipes) {
    container.appendChild(createRecipeCard(recipe));
  }
}

function createRecipeCard(recipe, options = {}) {
  const template = elements.cardTemplate.content.firstElementChild.cloneNode(true);
  const img = template.querySelector("img");
  const title = template.querySelector("h3");
  const description = template.querySelector(".recipe-description");
  const meta = template.querySelector(".recipe-meta");
  const seasonPill = template.querySelector(".pill-season");
  const countPill = template.querySelector(".pill-count");
  const chips = template.querySelector(".chips");
  const link = template.querySelector(".recipe-link");

  const lastOccurrence = getLastOccurrence(recipe);
  const lastDate = lastOccurrence?.closedAt || lastOccurrence?.savedAt || recipe.updatedAt || recipe.createdAt;
  const lastSeason = lastDate ? getSeasonFromDate(lastDate) : "all";
  const occurrenceCount = Array.isArray(recipe.occurrences) ? recipe.occurrences.length : 0;

  if (recipe.imageUrl) {
    img.src = recipe.imageUrl;
    img.alt = recipe.title;
  } else {
    template.querySelector(".recipe-card-media").classList.add("hidden");
    template.style.gridTemplateColumns = "1fr";
  }

  title.textContent = recipe.title || "Recette sans titre";
  description.textContent = recipe.description || "Aucune description disponible.";
  seasonPill.textContent = `Derniere saison: ${SEASON_LABELS[lastSeason]}`;
  countPill.textContent = occurrenceCount > 1 ? `${occurrenceCount} passages` : "1 passage";
  meta.textContent = buildMetaText(recipe, lastOccurrence);

  if (recipe.canonicalUrl && !options.compact) {
    link.href = recipe.canonicalUrl;
    link.classList.remove("hidden");
  }

  const ingredientNames = (recipe.ingredients || [])
    .map((ingredient) => ingredient.name || ingredient.raw)
    .filter(Boolean)
    .slice(0, options.compact ? 3 : 4);

  for (const ingredientName of ingredientNames) {
    const chip = document.createElement("span");
    chip.className = "chip";
    chip.textContent = ingredientName;
    chips.appendChild(chip);
  }

  if (ingredientNames.length === 0) {
    chips.remove();
  }

  if (options.compact) {
    description.remove();
  }

  return template;
}

function buildMetaText(recipe, lastOccurrence) {
  const parts = [];

  if (lastOccurrence?.closedAt) {
    parts.push(`Derniere fermeture: ${formatDate(lastOccurrence.closedAt)}`);
  } else if (lastOccurrence?.savedAt) {
    parts.push(`Sauvegardee le: ${formatDate(lastOccurrence.savedAt)}`);
  }

  if (recipe.canonicalUrl) {
    try {
      const domain = new URL(recipe.canonicalUrl).hostname.replace(/^www\./, "");
      parts.push(domain);
    } catch (_error) {
      // Ignore malformed URLs in the UI.
    }
  }

  return parts.join(" | ");
}

function getFilteredRecipes(season) {
  if (season === "all") {
    return [...state.recipes];
  }

  return state.recipes.filter((recipe) => {
    return (recipe.occurrences || []).some((occurrence) => {
      const referenceDate = occurrence.closedAt || occurrence.savedAt;
      return referenceDate && getSeasonFromDate(referenceDate) === season;
    });
  });
}

function getLastOccurrence(recipe) {
  return [...(recipe.occurrences || [])].sort((left, right) => {
    return getOccurrenceTimestamp(right) - getOccurrenceTimestamp(left);
  })[0];
}

function getLastOccurrenceTimestamp(recipe) {
  return getOccurrenceTimestamp(getLastOccurrence(recipe));
}

function getOccurrenceTimestamp(occurrence) {
  if (!occurrence) {
    return 0;
  }

  const value = occurrence.closedAt || occurrence.savedAt;
  return value ? new Date(value).getTime() : 0;
}

function getSeasonFromDate(value) {
  const date = new Date(value);
  const month = date.getMonth();

  if ([11, 0, 1].includes(month)) {
    return "winter";
  }
  if ([2, 3, 4].includes(month)) {
    return "spring";
  }
  if ([5, 6, 7].includes(month)) {
    return "summer";
  }
  return "autumn";
}

function formatDate(value) {
  const date = new Date(value);

  return new Intl.DateTimeFormat("fr-FR", {
    day: "2-digit",
    month: "short",
    year: "numeric"
  }).format(date);
}

function isJowRecipeUrl(url) {
  return /https:\/\/(?:www\.)?jow\.(?:fr|com)\/(?:[a-z]{2}\/)?recipes?\//i.test(url);
}

function shuffle(items) {
  const copy = [...items];
  for (let index = copy.length - 1; index > 0; index -= 1) {
    const swapIndex = Math.floor(Math.random() * (index + 1));
    [copy[index], copy[swapIndex]] = [copy[swapIndex], copy[index]];
  }
  return copy;
}

function queryActiveTab() {
  return new Promise((resolve, reject) => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message));
        return;
      }
      resolve(tabs);
    });
  });
}

function sendTabMessage(tabId, message) {
  return new Promise((resolve, reject) => {
    chrome.tabs.sendMessage(tabId, message, (response) => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message));
        return;
      }
      resolve(response);
    });
  });
}

function sendRuntimeMessage(message) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage(message, (response) => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message));
        return;
      }
      resolve(response);
    });
  });
}

function getFromStorage(key, fallbackValue) {
  return new Promise((resolve, reject) => {
    chrome.storage.local.get(key, (result) => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message));
        return;
      }
      resolve(result[key] ?? fallbackValue);
    });
  });
}