script.js

// Variable globale pour stocker les initialisations de carte différées
const pendingMapInits = [];
// Variable globale pour stocker le nom de base du fichier RDF (sans extension)
let rdfBaseName = "";
// Chargement des données RDF
let rdfData = {};

// Filtres & recherche
let activeFilters = {
  types: new Set(),       // types sélectionnés (intersection)
  onlyWithImage: false,
};
let currentSearch = "";   // texte de recherche

// Langues
let activeLang = 'all'; // 'all' pour tout afficher, sinon code langue (ex: 'en', 'el', 'fr')

function parseLiteral(item) {
  // Supporte {value, lang}, {"@value","@language"}, {"@value","@lang"}, {"value","xml:lang"} ou "texte@en"
  if (item && typeof item === 'object') {
    const val = item.value ?? item['@value'] ?? item.literal ?? '';
    const lang = item.lang ?? item['@language'] ?? item['@lang'] ?? item['xml:lang'] ?? null;
    return { text: String(val), lang: lang ? String(lang).toLowerCase() : null };
  }
  const str = String(item ?? '');
  const m = str.match(/^(.*)@([a-zA-Z]{2}(?:-[a-zA-Z]{2})?)$/);
  if (m) return { text: m[1], lang: m[2].toLowerCase() };
  return { text: str, lang: null };
}

function collectAvailableLangs() {
  const langs = new Set();
  for (const obj of Object.values(rdfData)) {
    for (const [key, raw] of Object.entries(obj)) {
      // Prefer the backend structures
      if (key.endsWith('__byLang') && typeof raw === 'object') {
        Object.keys(raw).forEach(k => {
          if (k && k !== 'undefined' && k.trim() !== '') langs.add(String(k).toLowerCase());
        });
        continue;
      }
      if (key.endsWith('__detailed') && Array.isArray(raw)) {
        raw.forEach(d => {
          if (d && d.lang && String(d.lang).trim() !== '') langs.add(String(d.lang).toLowerCase());
        });
        continue;
      }
      // Legacy paths: take only explicit languages (no heuristic on characters)
      const keyLang = parseLangFromKey(key);
      if (keyLang) langs.add(keyLang);
      const arr = Array.isArray(raw) ? raw : [raw];
      for (const it of arr) {
        const { lang } = parseLiteral(it);
        if (lang) langs.add(lang);
      }
    }
  }
  // Only actually present languages (no baseline/defaults, no empty)
  return Array.from(langs).sort();
}

// Helper pour extraire la langue d'une clé de propriété (ex: rdfs:label@en)
function parseLangFromKey(key) {
  const m = key.match(/@([a-zA-Z]{2}(?:-[a-zA-Z]{2})?)$/);
  return m ? m[1].toLowerCase() : null;
}

// Return values for a predicate using backend language structures when available
function getValuesForLang(obj, pred, lang) {
  const byLangKey = `${pred}__byLang`;
  const detailedKey = `${pred}__detailed`;
  const raw = obj[pred];

  // 1) Fast path: __byLang map
  const byLang = obj[byLangKey];
  if (byLang && typeof byLang === 'object') {
    if (lang === 'all') {
      // flatten all languages
      return Object.values(byLang).flat();
    }
    const exact = byLang[lang];
    if (exact && exact.length) return exact;
    const neutral = byLang[''];
    if (neutral && neutral.length) return neutral;
    if (lang === 'el') {
      // heuristique grec si pas de clé
      const all = Object.values(byLang).flat();
      const greekLike = all.filter(t => typeof t === 'string' && /[\u0370-\u03FF\u1F00-\u1FFF]/.test(t));
      if (greekLike.length) return greekLike;
    }
    return [];
  }

  // 2) Detailed list {text, lang}
  const det = obj[detailedKey];
  if (Array.isArray(det)) {
    if (lang === 'all') return det.map(d => d.text);
    const exact = det.filter(d => (d.lang || '').toLowerCase() === lang.toLowerCase()).map(d => d.text);
    if (exact.length) return exact;
    const neutral = det.filter(d => !d.lang).map(d => d.text);
    if (neutral.length) return neutral;
    if (lang === 'el') {
      const greekLike = det.filter(d => !d.lang && /[\u0370-\u03FF\u1F00-\u1FFF]/.test(d.text)).map(d => d.text);
      if (greekLike.length) return greekLike;
    }
    return [];
  }

  // 3) Legacy array of strings
  if (Array.isArray(raw)) return filterByActiveLang(raw).map(x => parseLiteral(x).text);
  return [];
}

function filterByActiveLang(values) {
  if (!Array.isArray(values)) return [];
  if (activeLang === 'all') return values;

  const exact = values.filter(v => (parseLiteral(v).lang || '').toLowerCase() === activeLang.toLowerCase());
  if (exact.length) return exact;

  // accept neutral if no exact match
  const neutral = values.filter(v => !parseLiteral(v).lang);
  if (neutral.length) return neutral;

  // heuristic for Greek text without explicit lang
  if (activeLang.toLowerCase() === 'el') {
    const greekLike = values.filter(v => {
      const { text, lang } = parseLiteral(v);
      return !lang && typeof text === 'string' && /[\u0370-\u03FF\u1F00-\u1FFF]/.test(text);
    });
    if (greekLike.length) return greekLike;
  }
  return [];
}


function pickBestLabel(values) {
  if (!Array.isArray(values) || values.length === 0) return null;

  // Souple: when a language is selected, prefer that lang, else accept no-lang
  if (activeLang !== 'all') {
    const exact = values.find(v => (parseLiteral(v).lang || '').toLowerCase() === activeLang.toLowerCase());
    if (exact) return parseLiteral(exact).text;
    const neutral = values.find(v => !parseLiteral(v).lang);
    if (neutral) return parseLiteral(neutral).text;
    // small heuristic: if el is selected and text is Greek but no lang
    if (activeLang.toLowerCase() === 'el') {
      const greekLike = values.find(v => {
        const { text, lang } = parseLiteral(v);
        return !lang && typeof text === 'string' && /[\u0370-\u03FF\u1F00-\u1FFF]/.test(text);
      });
      if (greekLike) return parseLiteral(greekLike).text;
    }
  }

  // Fallback preferences when showing all languages
  const pref = ['fr','en','el',''];
  for (const p of pref) {
    const hit = values.find(v => (parseLiteral(v).lang || '') === p);
    if (hit) return parseLiteral(hit).text;
  }
  return parseLiteral(values[0]).text;
}

function objectHasLang(obj, lang) {
  if (!obj || !lang || lang === 'all') return true;
  const PREF_IRI = "http://www.w3.org/2004/02/skos/core#prefLabel";
  const RDFS_IRI = "http://www.w3.org/2000/01/rdf-schema#label";

  const hitPref = getValuesForLang(obj, PREF_IRI, lang);
  if (hitPref && hitPref.length) return true;
  const hitRdfs = getValuesForLang(obj, RDFS_IRI, lang);
  if (hitRdfs && hitRdfs.length) return true;

  // Any other label-like key
  for (const key of Object.keys(obj)) {
    const keyLc = key.toLowerCase();
    if (keyLc.endsWith('#label') || keyLc.endsWith('#preflabel') || keyLc.includes('label')) {
      const vals = getValuesForLang(obj, key, lang);
      if (vals && vals.length) return true;
    }
  }
  return false;
}

// Assure la présence d'une colonne de filtres à gauche
function ensureFiltersSidebar() {
  const main = document.querySelector('.main-layout');
  if (!main) return;
  if (!document.getElementById('filters-container')) {
    const filters = document.createElement('div');
    filters.id = 'filters-container';
    filters.className = 'filters-container';
    filters.style.width = '260px';
    filters.style.flexShrink = '0';
    filters.style.paddingRight = '20px';
    filters.style.overflowY = 'auto';
    filters.innerHTML = `
      <div style="position:sticky; top:0; background:#fff8ef; padding:12px; border-radius:8px; border:1px solid #e6dac5;">
        <h3 style="margin-top:0">Filters</h3>
        <div style="margin:10px 0">
          <label style="display:block; font-weight:600; margin-bottom:6px;">Language</label>
          <select id="lang-select" style="width:100%; padding:6px; border-radius:6px; border:1px solid #e6dac5; background:#fff;">
            <option value="all">All languages</option>
          </select>
        </div>
        <div id="filter-types"></div>
        <div style="margin:10px 0">
          <label style="display:flex;align-items:center;gap:8px;">
            <input type="checkbox" id="filter-has-image" />
            <span>With image</span>
          </label>
        </div>
        <button id="filter-clear-btn">Reset</button>
      </div>`;
    // insérer en premier enfant (colonne gauche)
    main.insertBefore(filters, main.firstElementChild);
  }
}

function collectAvailableTypes() {
  const set = new Set();
  const EXCLUDE = new Set([
    'http://www.w3.org/2002/07/owl#Class',
    'http://www.w3.org/2002/07/owl#ObjectProperty',
    'http://www.w3.org/2002/07/owl#DatatypeProperty'
  ]);
  for (const obj of Object.values(rdfData)) {
    const types = obj['http://www.w3.org/1999/02/22-rdf-syntax-ns#type'] || [];
    types.forEach(t => { if (!EXCLUDE.has(t)) set.add(t); });
  }
  return Array.from(set).sort();
}

function buildFiltersUI() {
  ensureFiltersSidebar();
  const typesDiv = document.getElementById('filter-types');
  if (!typesDiv) return;
  const types = collectAvailableTypes();
  if (types.length === 0) {
    typesDiv.innerHTML = '<em>ANo type detected</em>';
  } else {
    typesDiv.innerHTML = '<strong>Types</strong>'; 
    const list = document.createElement('div');
    list.style.maxHeight = '260px';
    list.style.overflowY = 'auto';
    list.style.marginTop = '6px';
    types.forEach(t => {
      const id = `type-${btoa(t).replace(/[^a-z0-9]/gi,'')}`;
      const wrap = document.createElement('label');
      wrap.style.display = 'flex';
      wrap.style.alignItems = 'center';
      wrap.style.gap = '8px';
      wrap.style.margin = '4px 0';
      wrap.innerHTML = `<input type="checkbox" id="${id}" data-type="${t}"><span>${shortenURI(t)}</span>`;
      list.appendChild(wrap);
    });
    typesDiv.appendChild(list);

    // listeners
    list.querySelectorAll('input[type="checkbox"]').forEach(cb => {
      cb.addEventListener('change', (e) => {
        const t = e.target.getAttribute('data-type');
        if (e.target.checked) activeFilters.types.add(t); else activeFilters.types.delete(t);
        renderAll();
      });
    });
  }
  // Lang selector
  const langSelect = document.getElementById('lang-select');
  if (langSelect) {
    const langs = collectAvailableLangs();
    const previous = activeLang;
    // Reset options (keep the first "all")
    langSelect.querySelectorAll('option:not([value="all"])').forEach(o => o.remove());
    langs.forEach(l => {
      const opt = document.createElement('option');
      opt.value = l; opt.textContent = l;
      langSelect.appendChild(opt);
    });
    // Restore selection if available, else default to 'all'
    langSelect.value = langs.includes(previous) ? previous : 'all';
    activeLang = langSelect.value;
    langSelect.onchange = () => { activeLang = langSelect.value; renderAll(); displayHierarchy(); };
  }
  const imgCb = document.getElementById('filter-has-image');
  if (imgCb) {
    imgCb.checked = activeFilters.onlyWithImage;
    imgCb.onchange = () => { activeFilters.onlyWithImage = imgCb.checked; renderAll(); };
  }
  const clearBtn = document.getElementById('filter-clear-btn');
  if (clearBtn) {
    clearBtn.onclick = () => {
      activeFilters.types.clear();
      activeFilters.onlyWithImage = false;
      // reset UI
      document.querySelectorAll('#filters-container input[type="checkbox"]').forEach(cb => { cb.checked = false; });
      renderAll();
    };
  }
}

function applyFilters(objects) {
  const entries = Object.entries(objects);
  const hasTypeFilter = activeFilters.types.size > 0;
  const typesFilter = activeFilters.types;
  const onlyWithImage = activeFilters.onlyWithImage;
  const terms = currentSearch.toLowerCase().split(/\s+/).filter(Boolean);

  const filtered = entries.filter(([id, obj]) => {
    // Exclusions déjà présentes dans renderCards
    const types = obj['http://www.w3.org/1999/02/22-rdf-syntax-ns#type'] || [];
    const isDefinedBy = obj['http://www.w3.org/2000/01/rdf-schema#isDefinedBy'] || [];
    if (isDefinedBy.includes('http://www.ontologia.fr/OTB/otv.rdf')) return false;
    if (types.includes('http://www.w3.org/2002/07/owl#Class')) {
      if (activeLang === 'all') return false; // hide classes in "all" view
      // when a language is selected, allow classes but they must pass the lang check below
    }
    if (types.includes('http://www.w3.org/2002/07/owl#ObjectProperty') || types.includes('http://www.w3.org/2002/07/owl#DatatypeProperty')) return false;

    // Filtre langue strict: ne garder que les objets ayant au moins un label dans la langue sélectionnée
    if (activeLang !== 'all') {
      if (!objectHasLang(obj, activeLang)) return false;
    }

    // Filtre types (intersection au moins 1)
    if (hasTypeFilter) {
      const ok = types.some(t => typesFilter.has(t));
      if (!ok) return false;
    }

    // Filtre image
    if (onlyWithImage) {
      const img = getImage(obj);
      if (!img) return false;
    }

    // Filtre recherche plein texte
    if (terms.length) {
      const label = getLabel(obj).toLowerCase();
      const attrText = Object.values(obj).flat().join(' ').toLowerCase();
      const ok = terms.every(term => label.includes(term) || attrText.includes(term));
      if (!ok) return false;
    }

    return true;
  });
  return Object.fromEntries(filtered);
}

function renderAll() {
  const filteredObjects = applyFilters(rdfData);
  renderCards(filteredObjects);
}

// Hiérarchie des types (remplie lors du chargement des données)
let typeHierarchy = {};

// Affiche un message lorsqu'aucun fichier RDF n'est chargé
function showEmptyMessage() {
    const appContainer = document.getElementById('app');
    appContainer.innerHTML = '<p class="empty-message">No RDF file loaded. Please import one.</p>';
    // Ajoute le bouton Vue SPARQL même sans fichier RDF
    ensureFiltersSidebar();
    const hierarchyContainer = document.getElementById('hierarchy-container');
    if (hierarchyContainer) hierarchyContainer.innerHTML = '';
    const toggleBtn = document.getElementById('toggle-container');
    if (toggleBtn) {
        toggleBtn.innerHTML = `
    <button id="map-view-btn">Map View</button>
    <button id="sparql-view-btn">SPARQL Endpoint</button>
  `;
        document.getElementById('map-view-btn').onclick = renderMapView;
        document.getElementById('sparql-view-btn').onclick = renderSPARQLView;
    }
}

// Affiche le message au chargement initial
showEmptyMessage();
ensureFiltersSidebar();

rdfData = {};

// Fonction pour créer les cartes
function renderCards(objects) {
    const appContainer = document.getElementById('app');
    appContainer.innerHTML = '';
    appContainer.removeAttribute('style');
    const fragment = document.createDocumentFragment();

    Object.entries(objects).forEach(([id, obj]) => {
        const label = getLabel(obj);
        // Filtre les objets dont le type est ObjectProperty ou DatatypeProperty
        const types = obj["http://www.w3.org/1999/02/22-rdf-syntax-ns#type"] || [];
        // Ajout du filtre pour exclure les concepts ayant une propriété isDefinedBy égale à http://www.ontologia.fr/OTB/otv.rdf
        const isDefinedBy = obj["http://www.w3.org/2000/01/rdf-schema#isDefinedBy"] || [];
        if (isDefinedBy.includes("http://www.ontologia.fr/OTB/otv.rdf")) return;
        // Ajout du filtre pour exclure owl#Class (concepts) selon la langue active
        if (types.includes("http://www.w3.org/2002/07/owl#Class")) {
            if (activeLang === 'all') return; // keep hiding in "all" view to avoid clutter
            // else, allow classes to be displayed (language filter already enforced upstream)
        }
        if (
            types.includes("http://www.w3.org/2002/07/owl#ObjectProperty") ||
            types.includes("http://www.w3.org/2002/07/owl#DatatypeProperty")
        ) {
            return;
        }
        if (label === "Unknown Object") return;

        const card = document.createElement('div');
        card.className = 'card';
        card.onclick = () => openModal(label, obj);

        const imageUrl = getImage(obj);
        if (imageUrl) {
            const img = document.createElement('img');
            img.src = imageUrl;
            img.alt = label;
            card.appendChild(img);
        }

        const title = document.createElement('h2');
        title.textContent = label;
        card.appendChild(title);

        fragment.appendChild(card);
    });

    appContainer.appendChild(fragment);
    // Réinitialise le bouton Vue Carte et ajoute Vue SPARQL après l'affichage des cartes
    const toggleBtn = document.getElementById('toggle-container');
    if (toggleBtn) {
        toggleBtn.innerHTML = `
          <button id="map-view-btn">Map View</button>
          <button id="sparql-view-btn">SPARQL Endpoint</button>
        `;
        document.getElementById('map-view-btn').onclick = renderMapView;
        document.getElementById('sparql-view-btn').onclick = renderSPARQLView;
    }
}

// Affichage de la vue carte
function renderMapView() {
    if (Object.keys(rdfData).length === 0) {
        alert("Please import a file before using the map.");
        return;
    }
    console.log("renderMapView() activated");

    const appContainer = document.getElementById('app');
    appContainer.innerHTML = '';
    appContainer.removeAttribute('style');

    const mapContainer = document.createElement('div');
    mapContainer.id = 'map-container';
    mapContainer.style.height = '600px';
    mapContainer.style.border = 'none';
    mapContainer.style.background = 'lightgray';
    mapContainer.style.width = '100%';
    appContainer.appendChild(mapContainer);

    setTimeout(() => {
        if (typeof L === "undefined") {
            console.error("Leaflet is not loaded.");
            return;
        }

        const map = L.map('map-container').setView([48.85, 2.35], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        const bounds = [];

        // Définition des clés dynamiques pour ce fichier RDF
        const pleiadesKey = `http://www.ontologia.fr/OTB/${rdfBaseName}#pleiadesCoordinates`;
        const latKey = `http://www.ontologia.fr/OTB/${rdfBaseName}#latitude`;
        const lonKey = `http://www.ontologia.fr/OTB/${rdfBaseName}#longitude`;

        Object.entries(rdfData).forEach(([uri, obj]) => {
            let coords = null;
            if (obj[pleiadesKey]) {
                coords = obj[pleiadesKey];
            } else if (obj[latKey] && obj[lonKey]) {
                coords = [`${obj[latKey][0]},${obj[lonKey][0]}`];
            }
            if (!coords) return;

            if (typeof coords === "string") {
                try {
                    coords = JSON.parse(coords);
                } catch (e) {
                    coords = [coords];
                }
            }

            if (!Array.isArray(coords)) return;
            const [lat, lon] = coords[0].split(',').map(Number);
            if (isNaN(lat) || isNaN(lon)) return;

            const label = getLabel(obj);
            const marker = L.marker([lat, lon]).addTo(map);
            const popupContent = `<span style="color:blue; cursor:pointer;" onclick="handleDetailClick('${uri.replace(/'/g, "\\'")}'); event.stopPropagation();">${label}</span>`;
            marker.bindPopup(popupContent);
            bounds.push([lat, lon]);
        });

        if (bounds.length > 0) {
            map.fitBounds(bounds, { padding: [30, 30] });
        }

        map.invalidateSize();
        console.log("Map with markers displayed.");
    }, 300);

    // Réinitialise le bouton Vue Grille après l'affichage de la carte
    const toggleBtn = document.getElementById('toggle-container');
    if (toggleBtn) {
        toggleBtn.innerHTML = `<button id="grid-view-btn">Grid View</button>`;
        document.getElementById('grid-view-btn').onclick = () => {
            closeModal();
            renderCards(rdfData);
        };
    }
}

function getLabel(obj) {
  if (!obj) return "Unknown Object";
  const PREF_IRI = "http://www.w3.org/2004/02/skos/core#prefLabel";
  const RDFS_IRI = "http://www.w3.org/2000/01/rdf-schema#label";

  // Try prefLabel then rdfs:label using new backend shape
  const lang = activeLang;
  let candidates = getValuesForLang(obj, PREF_IRI, lang);
  if (!candidates || candidates.length === 0) candidates = getValuesForLang(obj, RDFS_IRI, lang);

  // If still nothing, fall back to any label-like key
  if (!candidates || candidates.length === 0) {
    const all = [];
    for (const [key, _] of Object.entries(obj)) {
      const keyLc = key.toLowerCase();
      if (keyLc.endsWith('#label') || keyLc.endsWith('#preflabel') || keyLc.includes('label')) {
        all.push(...getValuesForLang(obj, key, lang));
      }
    }
    candidates = all;
  }

  if (!candidates || candidates.length === 0) return "Unknown Object";
  return String(candidates[0]);
}

function getImage(obj) {
    const images = obj["http://xmlns.com/foaf/0.1/depiction"] || [];
    return images.length > 0 ? images[0] : null;
}

function openModal(label, obj) {
    const modal = document.getElementById('modal');
    const modalTitle = document.getElementById('modal-title');
    const modalDescription = document.getElementById('modal-description');

    modalTitle.textContent = label;
    modalDescription.innerHTML = getDetails(obj);
    setTimeout(() => {
        pendingMapInits.forEach(init => init());
        pendingMapInits.length = 0;
    }, 100);
    modal.style.display = 'block';
}

function getDetails(obj) {
    const imageUrl = getImage(obj);
    let imageHtml = '';
    if (imageUrl) {
        imageHtml = `
            <div class="detail-item detail-image">
                <a href="${imageUrl}" target="_blank">
                    <img src="${imageUrl}" alt="Image">
                </a>
            </div>
        `;
    }
    // Définition des clés dynamiques selon rdfBaseName
    const pleiadesKey = `http://www.ontologia.fr/OTB/${rdfBaseName}#pleiadesCoordinates`;
    const latKey = `http://www.ontologia.fr/OTB/${rdfBaseName}#latitude`;
    const lonKey = `http://www.ontologia.fr/OTB/${rdfBaseName}#longitude`;
    return imageHtml + Object.entries(obj)
        .map(([key, value]) => {
            if (key === "http://xmlns.com/foaf/0.1/depiction") return '';
            // Gérer la détection dynamique des coordonnées
            if (
                key === pleiadesKey ||
                (key === latKey && obj[lonKey])
            ) {
                let lat, lon;
                if (key === latKey) {
                    lat = parseFloat(value[0]);
                    lon = parseFloat(obj[lonKey][0]);
                } else {
                    [lat, lon] = value[0].split(',').map(Number);
                }
                const mapId = `map-${lat}-${lon}-${Math.random().toString(36).substring(2, 8)}`;
                pendingMapInits.push(() => {
                    const map = L.map(mapId).setView([lat, lon], 10);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; OpenStreetMap contributors'
                    }).addTo(map);
                    L.marker([lat, lon]).addTo(map);
                });
                // Affiche la carte ET la propriété classique (latitude ou pleiadesCoordinates)
                return `
                    <div class="detail-item">
                        <strong>Location</strong>:
                        <div class="modal-map" id="${mapId}"></div>
                    </div>
                    <div class="detail-item">
                        <strong>${shortenURI(key)}</strong>:
                        <ul><li>${value[0]}</li></ul>
                    </div>
                `;
            }
            // Filtrage par langue via backend (__byLang / __detailed) si dispo
            let values = [];
            if (activeLang === 'all') {
                const byLang = obj[`${key}__byLang`];
                if (byLang) {
                    values = Object.values(byLang).flat();
                } else {
                    const det = obj[`${key}__detailed`];
                    values = Array.isArray(det) ? det.map(d => d.text) : (Array.isArray(value) ? value : [value]);
                }
            } else {
                values = getValuesForLang(obj, key, activeLang);
                if (!values || values.length === 0) return '';
            }
            return `
            <div class="detail-item">
                <strong>${shortenURI(key)}</strong>:
                <ul>
                    ${values.map(item => {
                        const parsed = parseLiteral(item);
                        const text = parsed.text;
                        const langBadge = parsed.lang ? ` <span style="opacity:.7;font-size:12px;">(${parsed.lang})</span>` : '';
                        const label = shortenURI(text);
                        if (rdfData[text]) {
                            return `<li class="detail-link" onclick="event.stopPropagation(); handleDetailClick('${text.replace(/'/g, "\\'")}')">${label}${langBadge}</li>`;
                        } else if (/^https?:\/\/(?!www\.w3\.org)[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,}(\/\S*)?$/.test(text)) {
                            return `<li class="detail-ext-link"><a href="${text}" target="_blank">${label}</a>${langBadge}</li>`;
                        } else {
                            return `<li>${label}${langBadge}</li>`;
                        }
                    }).join('')}
                </ul>
            </div>
            `;
        })
        .join('');
}

function handleDetailClick(uri) {
    const obj = rdfData[uri];
    if (obj) {
        const label = getLabel(obj);
        openModal(label, obj);
    } else {
        // On cherche par label s'il n'existe pas d'objet direct à cet URI
        for (const [id, candidate] of Object.entries(rdfData)) {
            if (getLabel(candidate) === uri) {
                openModal(uri, candidate);
                break;
            }
        }
    }
}

function closeModal() {
    document.getElementById('modal').style.display = 'none';
}

window.onclick = function(event) {
    const modal = document.getElementById('modal');
    if (event.target == modal) {
        closeModal();
    }
};

function searchObjects(query) {
  currentSearch = query || '';
  renderAll();
}


function shortenURI(uri) {
    return uri.includes('#') ? uri.split('#').pop() : uri;
}

document.getElementById('search-input').addEventListener('input', (event) => {
    searchObjects(event.target.value);
});

document.getElementById('rdf-upload').addEventListener('change', async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    // Stocke le nom du fichier sans extension dans la variable globale
    rdfBaseName = file.name.split('.')[0];

    const formData = new FormData();
    formData.append('file', file);

    try {
        const response = await fetch('http://localhost:5050/upload', {
            method: 'POST',
            body: formData
        });

        if (!response.ok) {
            throw new Error(`Erreur HTTP : ${response.status}`);
        }

        const data = await response.json();
        rdfData = data;
        activeLang = 'all';
        console.log("rdfData loaded with", Object.keys(rdfData).length, "elements");

        // Réinitialise tout pour affichage
        typeHierarchy = {};
        document.getElementById('app').innerHTML = '';
        ensureFiltersSidebar();
        buildFiltersUI();
        renderAll();
        displayHierarchy();
    } catch (err) {
        console.error("Error during sending or parsing :", err);
        alert("Error: the RDF file could not be processed. Please try again.");
    }
});

function displayHierarchy() {
    const hierarchyContainer = document.getElementById('hierarchy-container');
    hierarchyContainer.innerHTML = '';

    const classLabels = {};
    const subclasses = {};
    const instances = {};

    // Restaure l'ancienne logique pour détecter toutes les classes (owl#Class) et sous-classes, ainsi que les instances
    for (const [uri, obj] of Object.entries(rdfData)) {
        const types = obj["http://www.w3.org/1999/02/22-rdf-syntax-ns#type"] || [];

        if (types.includes("http://www.w3.org/2002/07/owl#Class")) {
            if (activeLang !== 'all' && !objectHasLang(obj, activeLang)) {
                // ignorer les classes sans label dans la langue sélectionnée
                continue;
            }
            const label = getLabel(obj);
            if (label === "Unknown Object") continue;
            classLabels[uri] = label;
            const parents = obj["http://www.w3.org/2000/01/rdf-schema#subClassOf"] || [];
            parents.forEach(parent => {
                if (!subclasses[parent]) subclasses[parent] = new Set();
                subclasses[parent].add(uri);
            });
        }

        if (types.includes("http://www.w3.org/2002/07/owl#NamedIndividual")) {
            if (activeLang !== 'all' && !objectHasLang(obj, activeLang)) {
                // ignorer les individus sans label dans la langue sélectionnée
                continue;
            }
            const label = getLabel(obj);
            if (label === "Unknown Object") continue;
            const individualTypes = types.filter(t => t !== "http://www.w3.org/2002/07/owl#NamedIndividual");
            individualTypes.forEach(cls => {
                if (!instances[cls]) instances[cls] = [];
                instances[cls].push(label);
            });
        }
    }

    function renderClass(uri) {
        const li = document.createElement('li');
        li.className = 'collapsible';

        const labelSpan = document.createElement('span');
        labelSpan.className = 'hierarchy-label';
        labelSpan.textContent = classLabels[uri] || shortenURI(uri);
        labelSpan.style.cursor = 'pointer';
        labelSpan.onclick = () => {
            // Trouve l'objet correspondant pour ouvrir la carte
            const obj = rdfData[uri];
            if (obj) {
                const label = getLabel(obj);
                openModal(label, obj);
            }
        };

        li.appendChild(labelSpan);

        const ul = document.createElement('ul');
        ul.style.display = 'none';

        if (instances[uri]) {
            instances[uri].forEach(name => {
                const il = document.createElement('li');
                il.textContent = name;
                il.style.cursor = 'pointer';
                il.onclick = () => {
                    // Trouve l'objet avec ce label
                    for (const [id, obj] of Object.entries(rdfData)) {
                        if (getLabel(obj) === name) {
                            openModal(name, obj);
                            break;
                        }
                    }
                };
                ul.appendChild(il);
            });
        }

        if (subclasses[uri]) {
            subclasses[uri].forEach(child => {
                ul.appendChild(renderClass(child));
            });
        }

        if (ul.children.length > 0) {
            const toggleBtn = document.createElement('button');
            toggleBtn.textContent = '▶';
            toggleBtn.style.marginRight = '5px';
            toggleBtn.onclick = (e) => {
                e.stopPropagation();
                if (ul.style.display === 'none') {
                    ul.style.display = 'block';
                    toggleBtn.textContent = '▼';
                } else {
                    ul.style.display = 'none';
                    toggleBtn.textContent = '▶';
                }
            };
            li.insertBefore(toggleBtn, labelSpan);
            li.appendChild(ul);
        }

        return li;
    }

    // Calcule les racines de la hiérarchie de classes :
    // on prend toutes les classes détectées (classLabels) et on enlève celles qui sont enfants (dans `subclasses`).
    const allClasses = Object.keys(classLabels);
    const childrenSet = new Set();
    Object.values(subclasses).forEach(childSet => {
        childSet.forEach(c => childrenSet.add(c));
    });
    let roots = allClasses.filter(c => !childrenSet.has(c));

    // Si aucune racine claire (pas d'info subClassOf), on affiche toutes les classes comme racines
    if (roots.length === 0) {
        roots = allClasses;
    }

    if (roots.length === 0) {
        const emptyMsg = document.createElement('div');
        emptyMsg.style.color = '#7a6b5b';
        emptyMsg.style.fontStyle = 'italic';
        emptyMsg.textContent = 'No classes found to build the hierarchy.';
        hierarchyContainer.appendChild(emptyMsg);
        return;
    }

    const tree = document.createElement('ul');
    roots.forEach(root => tree.appendChild(renderClass(root)));

    hierarchyContainer.appendChild(tree);
}

document.getElementById('map-view-btn').onclick = renderMapView;

// Ajoute la fonction renderSPARQLView à la fin du fichier
function renderSPARQLView() {
    // Vérifie s'il y a des données RDF chargées
    if (Object.keys(rdfData).length === 0) {
        alert("Please import an RDF file before using the SPARQL endpoint.");
        return;
    }
    // Affichage propre et responsive de la vue SPARQL
    const appContainer = document.getElementById('app');
    appContainer.innerHTML = '';
    appContainer.removeAttribute('style');

    // Conteneur principal pour le panneau SPARQL
    const sparqlContainer = document.createElement('div');
    sparqlContainer.className = 'sparql-panel';

    const textarea = document.createElement('textarea');
    textarea.id = 'sparql-editor';
    textarea.placeholder = 'Write your SPARQL query here...';

    const executeBtn = document.createElement('button');
    executeBtn.textContent = 'Execute';

    const resultDiv = document.createElement('div');
    resultDiv.id = 'sparql-results';

    executeBtn.onclick = async () => {
        const query = textarea.value.trim();
        if (!query) return;

        resultDiv.innerHTML = 'Chargement...';

        try {
            const response = await fetch('http://localhost:5050/sparql', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ query })
            });

            const data = await response.json();

            if (data.error) {
                resultDiv.innerHTML = `<span class="sparql-error">Erreur : ${data.error}</span>`;
                return;
            }

            const table = document.createElement('table');

            data.forEach(row => {
                const tr = document.createElement('tr');
                row.forEach(cell => {
                    const td = document.createElement('td');
                    const shortLabel = shortenURI(cell);
                    if (rdfData[cell]) {
                        td.innerHTML = `<span class="sparql-link" onclick="handleDetailClick('${cell.replace(/'/g, "\\'")}')">${shortLabel}</span>`;
                    } else {
                        td.textContent = shortLabel;
                    }
                    tr.appendChild(td);
                });
                table.appendChild(tr);
            });

            resultDiv.innerHTML = '';
            resultDiv.appendChild(table);
        } catch (e) {
            resultDiv.innerHTML = `<span class="sparql-error">Erreur : ${e.message}</span>`;
        }
    };

    sparqlContainer.appendChild(textarea);
    sparqlContainer.appendChild(executeBtn);
    sparqlContainer.appendChild(resultDiv);
    appContainer.appendChild(sparqlContainer);

    const toggleBtn = document.getElementById('toggle-container');
    if (toggleBtn) {
        toggleBtn.innerHTML = `<button id="grid-view-btn">Vue Grille</button>`;
        document.getElementById('grid-view-btn').onclick = () => {
            // Réafficher la hiérarchie quand on revient à la vue grille
            document.getElementById('hierarchy-container').style.display = 'block';
            closeModal();
            renderAll();
        };
    }
}

// Ajoute un z-index élevé à .modal pour s'assurer qu'elle s'affiche au-dessus
const modal = document.getElementById('modal');
if (modal) {
    modal.style.zIndex = '1000';
}

// Ajout des styles CSS modernes
(function injectModernStyles() {
    if (document.getElementById('modern-styles')) return;
    const style = document.createElement('style');
    style.id = 'modern-styles';
    style.textContent = `
  body {
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #fefaf6;
      margin: 0;
      padding: 0;
  }

  .card {
      background-color: #fffaf0;
      border-radius: 12px;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
      padding: 18px;
      margin: 10px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  .card img {
      max-width: 100%;
      border-radius: 8px;
      margin-bottom: 12px;
      object-fit: cover;
      height: 150px;
  }

  /* Ajout ou remplacement du style pour .detail-image img dans la modale */
  .detail-image img {
      max-width: 100%;
      max-height: 300px;
      border-radius: 8px;
      object-fit: contain;
      display: block;
      margin: auto;
  }

  #app {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 20px;
      gap: 20px;
  }

  button {
      background-color: #c8a97e;
      color: white;
      border: none;
      padding: 10px 24px;
      margin: 8px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
  }

  button:hover {
      background-color: #a27b5c;
  }

  .sparql-panel {
      background-color: #fff8ef;
      padding: 30px;
      border-radius: 12px;
      max-width: 1000px;
      margin: 40px auto;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      width: calc(100% - 60px);
  }

  #sparql-editor {
      font-family: monospace;
      border: 1px solid #e6dac5;
      background-color: #fdf6ee;
      border-radius: 8px;
      padding: 16px;
      width: 100%;
      height: 200px;
      box-sizing: border-box;
      font-size: 15px;
  }

  #sparql-results table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 25px;
      background-color: #fffaf5;
      border-radius: 8px;
      overflow: hidden;
      font-size: 15px;
  }

  #sparql-results td {
      border: 1px solid #e6dac5;
      padding: 10px;
      word-break: break-word;
  }

  .detail-link, .sparql-link {
      color: #c8a97e;
      cursor: pointer;
      text-decoration: underline;
  }

  .detail-link:hover, .sparql-link:hover {
      color: #a27b5c;
  }

  .modal-map {
      height: 200px;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 10px;
  }

  .hierarchy-label {
      font-weight: bold;
      color: #a27b5c;
  }

  .empty-message {
      font-size: 18px;
      color: #777;
      text-align: center;
      margin-top: 30px;
  }
  .filters-container h3 { color:#a27b5c; margin-bottom:8px; }
  .filters-container button { width:100%; }
  #lang-select { font-size:14px; }
  .detail-item .lang-badge { opacity:.65; font-size:12px; }
  `;
    document.head.appendChild(style);
})();