menu.js

export const SPARQL_ENDPOINT = "https://sparql.vanderbilt.edu/sparql";


// Add filter menu options
// Example: wrap your SPARQL calls
// export async function getEventKeywords() {
//   return fetchWithCache('eventKeywords', async () => {
//     const response = await fetch('../menus/events.json');

//     if (!response.ok) throw new Error('Failed to load event keywords');
//     return response.json();
//   });
// }



export const getEventKeywords = () => `
  PREFIX swdt: <http://syriaca.org/prop/direct/>
  SELECT DISTINCT ?keyword
  FROM <https://spear-prosop.org>
  WHERE {
    ?event swdt:event-keyword ?keyword .
  }
  ORDER BY ?keyword
`;

export const getRelationshipOptions = () => `
  PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
  SELECT DISTINCT ?collectionType ?subject ?label
  WHERE {
    VALUES (?collection ?collectionType) {
      (<http://syriaca.org/taxonomy/directed-relations-collection> "directed")
      (<http://syriaca.org/taxonomy/mutual-relations-collection> "mutual")
    }
    ?collection skos:member ?subject .
    ?subject skos:prefLabel ?label .
  }
  ORDER BY ?collectionType ?label
`;

export const getEthnicityOptions = () => `
  PREFIX swdt: <http://syriaca.org/prop/direct/>
  SELECT DISTINCT ?ethnicity
  FROM <https://spear-prosop.org>
  WHERE {
    ?person swdt:ethnic-label ?ethnicity .
  }
  ORDER BY ?ethnicity
`;

export const getPlaceOptions = () => `
  PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
  PREFIX swdt: <http://syriaca.org/prop/direct/>
  SELECT DISTINCT ?place ?label
  FROM <http://syriaca.org/geo#graph>
  FROM <https://spear-prosop.org>
  WHERE {
    {
      ?person swdt:residence ?place .
    } UNION {
      ?person swdt:birth-place ?place .
    } UNION {
      ?person swdt:death-place ?place .
    } UNION {
      ?event swdt:event-place ?place .
    } UNION {
      ?person swdt:citizenship ?place .
    }
    ?place rdfs:label ?label .
    FILTER(LANG(?label) = "en")
  }
  ORDER BY ?label
`;

export const getEducationFieldsOfStudy = () => `
  PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
  SELECT DISTINCT ?subject ?label
  WHERE {
    <http://syriaca.org/taxonomy/fields-of-study-collection> skos:member ?subject .
    ?subject skos:prefLabel ?label .
  }
  ORDER BY ?label
`;
export const getOccupationOptions = () => `
  PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
  SELECT DISTINCT ?occupation ?label
  WHERE {
    <http://syriaca.org/taxonomy/occupations-collection> skos:member ?occupation .
    ?occupation skos:prefLabel ?label .
  }
  ORDER BY ?label
`;

/**
 * Populates a <select> element with options from a SPARQL query above
 * Results are cached for 24 hours to reduce server load
 */
export async function populateDropdown(query, dropdownId, labelField = "label", valueField = "value") {
  const cacheKey = `dropdown_${dropdownId}`;
  
  try {
    const data = await fetchWithCache(cacheKey, async () => {
      const res = await fetch(`${SPARQL_ENDPOINT}?query=${encodeURIComponent(query)}`, {
        headers: { Accept: 'application/sparql-results+json' }
      });
      return res.json();
    });
    
    const select = document.getElementById(dropdownId);
    if (!select) return;

    select.innerHTML = ''; // Clear existing options

    // Add a default "All" option
    const allOpt = document.createElement('option');
    allOpt.value = '';
    allOpt.textContent = 'All';
    select.appendChild(allOpt);

    data.results.bindings.forEach(binding => {
      const option = document.createElement("option");
      const label = binding[labelField]?.value || binding[valueField].value;
      option.value = binding[valueField].value;
      option.textContent = label;
      select.appendChild(option);
    });
  } catch (err) {
    console.error("Dropdown load failed:", err);
  }
}

/**
 * Renders a scrollable <ul> list from a SPARQL query for keywords, used by relationships menu
 * Calls `onSelect(uri)` when a user clicks an item, also see `renderKeywordPrettyList` for a more generic version
 * Results are cached for 24 hours to reduce server load
 * @param {string} query - SPARQL query to fetch keywords
 * @param {string} itemsId - ID of the <ul> element to populate
 * @param {string} listId - ID of the container for scroll listener
 * @param {string} labelField - Field to use for display label (default "label")
 * @param {string} valueField - Field to use for value (default "value")
 * @param {function} onSelect - Callback function to call with the selected URI
 * @returns {Promise<void>}
 */
export async function renderKeywordList(query, itemsId, listId, labelField = "label", valueField = "value", onSelect) {
  const listEl = document.getElementById(itemsId);
  const container = document.getElementById(listId);
  if (!listEl || !container) return;

  // Cache key is derived from the unique target element id, not the query text.
  // The previous approach (first 20 chars of btoa(query)) collided across queries
  // sharing a leading PREFIX (e.g. occupations, relationships, fields-of-study),
  // causing one list to overwrite another. The "V2" prefix bypasses those stale
  // collided entries left in localStorage by the old version.
  const cacheKey = `keywordListV2_${itemsId}`;
  
  try {
    const data = await fetchWithCache(cacheKey, async () => {
      const res = await fetch(`${SPARQL_ENDPOINT}?query=${encodeURIComponent(query)}`, {
        headers: { Accept: 'application/sparql-results+json' }
      });
      return res.json();
    });

    const results = data.results.bindings;

    // Render all results at once since we're caching
    results.forEach(binding => {
      const uri = binding[valueField]?.value || "";
      const label = binding[labelField]?.value || uri;

      const li = document.createElement("li");
      li.textContent = label;
      li.style.marginBottom = "0.5rem";
      li.style.fontFamily = "Georgia, serif";
      li.style.fontSize = ".78rem";
      li.style.cursor = "pointer";
      li.style.padding = "0.4rem";
      li.style.borderBottom = "1px solid #eee";

      li.addEventListener("click", () => {
        onSelect(uri);
      });

      listEl.appendChild(li);
    });
  } catch (err) {
    console.error("Failed to load keyword list:", err);
  }
}
const CACHE_TTL_HOURS = 24; // or 0 if you want once per session

export async function fetchWithCache(key, fetchFn) {
  const now = Date.now();

  // Check cache
  const cached = localStorage.getItem(key);
  const cacheTime = localStorage.getItem(key + '_time');

  if (cached && cacheTime && (now - Number(cacheTime)) < CACHE_TTL_HOURS * 3600 * 1000) {
    console.log(`[CACHE] Using cached data for ${key}`);
    return JSON.parse(cached);
  }

  // If not cached or expired, fetch fresh
  console.log(`[CACHE] Fetching new data for ${key}`);
  const data = await fetchFn();

  // Store cache
  localStorage.setItem(key, JSON.stringify(data));
  localStorage.setItem(key + '_time', now.toString());

  return data;
}

/**
 * Clears all cached menu data from localStorage
 * Call this function to force fresh data on next load
 */
export function clearMenuCache() {
  const prefixes = [
    'dropdown_',          // populateDropdown
    'keywordList_',       // legacy (pre-V2) renderKeywordList entries
    'keywordListV2_',     // renderKeywordList (menu.js)
    'keywordPrettyV1_',   // renderKeywordPrettyList (list.js)
    'eventFactoidsV1_',   // fetchEventFactoids (event/search.js)
  ];
  const keys = Object.keys(localStorage);
  keys.forEach(key => {
    if (prefixes.some(p => key.startsWith(p))) {
      localStorage.removeItem(key);
      localStorage.removeItem(key + '_time');
    }
  });
  console.log('Menu cache cleared');
}