// dashboard.js
import { authFetch } from "./api.js";

// Element‑Referenzen
const welcomeMessage = document.getElementById("welcomeMessage");
const todosList = document.getElementById("todosList");
const errorMessage = document.getElementById("errorMessage");
const logoutBtn = document.getElementById("logoutBtn");
// Elements UI
const elementsTbody = document.getElementById("elementsTbody");
const filterInhalt = document.getElementById("filter-inhalt");
const filterBundesland = document.getElementById("filter-bundesland");
const filterFach = document.getElementById("filter-fach");
const filterVersion = document.getElementById("filter-version");
const filterStufe = document.getElementById("filter-stufe");
const clearFiltersBtn = document.getElementById("clear-filters");

// Prüfe ob ein JWT vorhanden ist
const token = localStorage.getItem("token");
if (!token) {
  // Kein Token → zurück zur Login‑Seite
  window.location.href = "login.html";
}

// Logout – Token löschen + weiterleiten
logoutBtn.addEventListener("click", () => {
    localStorage.removeItem("token");
    window.location.href = "login.html";
});

// Lade Todos vom Backend
async function loadElements() {
  try {
    const res = await authFetch("/elements"); // fetchWrapper sendet den JWT Automatisch
    if (!res.ok) {
      errorMessage.textContent = "Fehler beim Abrufen der Elemente!";
      if (res.status === 401) {
        window.location.href = "login.html"; // bei ungültigem Token zum Login
      }
      return;
    }

    const todos = await res.json();

    // Zeige Todos in der Liste an
    todosList.innerHTML = "";
    if (Array.isArray(todos) && todos.length > 0) {
      todos.forEach(todo => {
        const li = document.createElement("li");
        li.textContent = todo.task;
        todosList.appendChild(li);
      });
    } else {
      todosList.innerHTML = "<li>Keine Todos gefunden.</li>";
    }
  } catch (err) {
    console.error("Fetch Error:", err);
    errorMessage.textContent = "Serverfehler beim Laden!";
  }
}

// Willkommenstext setzen
welcomeMessage.textContent = "Willkommen zum Dashboard!";

// Rufe die Todos ab
loadTodos();

// ---------- Elements: load, render, filter ----------
let elementsData = [];

async function loadElements() {
  try {
    // Route: mounted at /elements + route '/elements' => /elements/elements
    const res = await authFetch('/elements/elements');
    if (!res.ok) {
      errorMessage.textContent = 'Fehler beim Abrufen der Elemente.';
      return;
    }

    elementsData = await res.json();
    renderElements(elementsData);
  } catch (err) {
    console.error('Elements Fetch Error:', err);
    errorMessage.textContent = 'Serverfehler beim Laden der Elemente.';
  }
}

function renderElements(data) {
  if (!elementsTbody) return;
  elementsTbody.innerHTML = '';

  if (!Array.isArray(data) || data.length === 0) {
    const tr = document.createElement('tr');
    const td = document.createElement('td');
    td.colSpan = 5;
    td.textContent = 'Keine Elemente gefunden.';
    tr.appendChild(td);
    elementsTbody.appendChild(tr);
    return;
  }

  data.forEach(el => {
    const tr = document.createElement('tr');
    // Skip id; show columns in schema order
    const cols = [el.inhalt, el.bundesland, el.fach, el.version, el.stufe];
    cols.forEach(val => {
      const td = document.createElement('td');
      td.textContent = (val === null || val === undefined) ? '' : String(val);
      tr.appendChild(td);
    });
    elementsTbody.appendChild(tr);
  });
}

function applyFilters() {
  if (!elementsData || elementsData.length === 0) return renderElements([]);

  const fInhalt = (filterInhalt?.value || '').trim().toLowerCase();
  const fBund = (filterBundesland?.value || '').trim().toLowerCase();
  const fFach = (filterFach?.value || '').trim().toLowerCase();
  const fVer = (filterVersion?.value || '').trim().toLowerCase();
  const fSt = (filterStufe?.value || '').trim();

  const filtered = elementsData.filter(el => {
    if (fInhalt && !(el.inhalt || '').toLowerCase().includes(fInhalt)) return false;
    if (fBund && !(el.bundesland || '').toLowerCase().includes(fBund)) return false;
    if (fFach && !(el.fach || '').toLowerCase().includes(fFach)) return false;
    if (fVer && !(el.version || '').toLowerCase().includes(fVer)) return false;
    if (fSt) {
      const n = Number(fSt);
      if (!Number.isNaN(n)) {
        if (Number(el.stufe) !== n) return false;
      } else {
        // non-numeric filter: substring match
        if (!(String(el.stufe) || '').includes(fSt)) return false;
      }
    }
    return true;
  });

  renderElements(filtered);
}

function setupFilterListeners() {
  const inputs = [filterInhalt, filterBundesland, filterFach, filterVersion, filterStufe];
  inputs.forEach(i => { if (i) i.addEventListener('input', applyFilters); });
  if (clearFiltersBtn) clearFiltersBtn.addEventListener('click', () => {
    inputs.forEach(i => { if (i) i.value = ''; });
    applyFilters();
  });
}

// Initialize elements UI if present
if (elementsTbody) {
  setupFilterListeners();
  loadElements();
}