script.js

const searchBox   = document.getElementById("searchBox");
const clearSearch = document.getElementById("clearSearch");
const pageSizeEl  = document.getElementById("pageSize");
const themeBtn    = document.getElementById("themeToggle");
const tableBody   = document.getElementById("tableBody");
const pagination  = document.getElementById("pagination");
const counter     = document.getElementById("counter");
const loading     = document.getElementById("loading");

let data = [];
let filtered = [];
let currentPage = 1;
const DEFAULT_PAGE_SIZE = 10;
let rowsPerPage = DEFAULT_PAGE_SIZE;

if (pageSizeEl) pageSizeEl.value = String(DEFAULT_PAGE_SIZE);

const colors = [
  "#00bcd4", "#4caf50", "#f44336", "#ff9800", "#9c27b0",
  "#e91e63", "#009688", "#3f51b5", "#607d8b", "#795548"
];

function normalizeArabic(str = "") {
  return str
    .replace(/[\u064B-\u0652]/g, "")
    .replace(/[أإآا]/g, "ا")
    .replace(/ى/g, "ي")
    .replace(/ؤ/g, "و")
    .replace(/ئ/g, "ي")
    .replace(/ة/g, "ه")
    .toLowerCase();
}

function matches(text, q) {
  if (!q) return true;
  return normalizeArabic(String(text ?? "")).includes(normalizeArabic(q));
}

function highlight(text, q) {
  if (!q) return String(text ?? "");
  const esc = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  return String(text ?? "").replace(
    new RegExp(esc, "gi"),
    m => `<mark class="hl">${m}</mark>`
  );
}

function renderPagination() {
  const pages = Math.ceil(filtered.length / rowsPerPage);
  pagination.innerHTML = "";
  if (pages <= 1) return;

  const makeBtn = (label, page, opts = {}) => {
    const b = document.createElement("button");
    b.textContent = label;
    b.className = "page-btn" + (opts.ghost ? " ghost" : "");
    b.disabled = !!opts.disabled;
    b.addEventListener("click", () => {
      currentPage = page;
      updateView();
      window.scrollTo({ top: 0, behavior: "smooth" });
    });
    return b;
  };

  pagination.appendChild(
    makeBtn("‹", Math.max(1, currentPage - 1), {
      ghost: true,
      disabled: currentPage === 1
    })
  );

  const windowSize = 5;
  let total = pages;
  let start = Math.max(1, currentPage - Math.floor(windowSize / 2));
  let end = Math.min(total, start + windowSize - 1);

  if (end - start + 1 < windowSize) {
    start = Math.max(1, end - windowSize + 1);
  }

  if (start > 1) {
    pagination.appendChild(makeBtn("1", 1, { ghost: currentPage !== 1 }));
  }

  if (start > 2) {
    pagination.appendChild(
      Object.assign(document.createElement("span"), {
        className: "dots",
        textContent: "..."
      })
    );
  }

  for (let p = start; p <= end; p++) {
    const btn = makeBtn(String(p), p);
    if (p === currentPage) btn.classList.add("active");
    pagination.appendChild(btn);
  }

  if (end < total - 1) {
    pagination.appendChild(
      Object.assign(document.createElement("span"), {
        className: "dots",
        textContent: "..."
      })
    );
  }

  if (end < total) {
    pagination.appendChild(
      makeBtn(String(total), total, { ghost: currentPage !== total })
    );
  }

  pagination.appendChild(
    makeBtn("›", Math.min(total, currentPage + 1), {
      ghost: true,
      disabled: currentPage === total
    })
  );
}

function renderTable() {
  const q = searchBox.value.trim();
  tableBody.innerHTML = "";

  const start = (currentPage - 1) * rowsPerPage;
  const pageItems = filtered.slice(start, start + rowsPerPage);

  if (pageItems.length === 0) {
    const tr = document.createElement("tr");
    const td = document.createElement("td");
    td.colSpan = 3;
    td.className = "no-results";
    td.textContent = "🤔 لا توجد نتائج مطابقة";
    tr.appendChild(td);
    tableBody.appendChild(tr);
    return;
  }

  pageItems.forEach((it, i) => {
    const tr = document.createElement("tr");
    const code = it.code ?? "";
    const act = it.activity ?? it.name ?? "";

    const codeTd = document.createElement("td");
    codeTd.innerHTML = highlight(code, q);

    const actTd = document.createElement("td");
    actTd.innerHTML = highlight(act, q);

    const colorTd = document.createElement("td");
    const colorBar = document.createElement("div");
    colorBar.className = "color-bar";
    colorBar.style.backgroundColor = colors[i % colors.length];
    colorTd.appendChild(colorBar);

    tr.appendChild(codeTd);
    tr.appendChild(actTd);
    tr.appendChild(colorTd);

    tableBody.appendChild(tr);
  });
}

function updateView() {
  const q = searchBox.value.trim();

  filtered = data.filter(
    it => matches(it.code, q) || matches(it.activity ?? it.name, q)
  );

  if (!q) {
    counter.textContent = `📊 إجمالي الأنشطة: ${data.length.toLocaleString()}`;
  } else {
    counter.textContent = filtered.length
      ? `✅ عدد النتائج: ${filtered.length.toLocaleString()}`
      : "🤔 لا توجد نتائج مطابقة";
  }

  if (loading) loading.style.display = "none";

  renderTable();
  renderPagination();
}

function debounce(fn, delay = 200) {
  let t;
  return (...a) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...a), delay);
  };
}

searchBox.addEventListener(
  "input",
  debounce(() => {
    currentPage = 1;
    updateView();
  }, 180)
);

clearSearch.addEventListener("click", () => {
  searchBox.value = "";
  searchBox.focus();
  currentPage = 1;
  updateView();
});

pageSizeEl.addEventListener("change", () => {
  rowsPerPage = parseInt(pageSizeEl.value, 10);
  currentPage = 1;
  updateView();
});

document.addEventListener("keydown", (e) => {
  if (e.key === "/") {
    e.preventDefault();
    searchBox.focus();
  }
});

(function initTheme() {
  const saved = localStorage.getItem("theme") || "light";
  document.documentElement.classList.toggle("dark", saved === "dark");
  themeBtn.textContent = saved === "dark" ? "☀️ فاتح" : "🌙 ليلي";

  themeBtn.addEventListener("click", () => {
    const isDark = document.documentElement.classList.toggle("dark");
    localStorage.setItem("theme", isDark ? "dark" : "light");
    themeBtn.textContent = isDark ? "☀️ فاتح" : "🌙 ليلي";
  });
})();

fetch("data.json", { cache: "no-cache" })
  .then(r => r.json())
  .then(json => {
    data = Array.isArray(json)
      ? json.map(row => {
          const rawCode = String(
            row.code ?? row.Code ?? row["رمز"] ?? ""
          ).trim();

          return {
            code: rawCode.slice(0, 4),
            activity: row.activity ?? row.Activity ?? row.name ?? row["النشاط"] ?? ""
          };
        })
      : [];

    updateView();
  })
  .catch(err => {
    console.error(err);
    if (loading) loading.textContent = "تعذر تحميل البيانات ❌";
  });

(function () {
  const tw = document.querySelector(".table-wrap");
  if (!tw) return;

  let t;
  tw.addEventListener("scroll", () => {
    tw.classList.add("scrolling");
    clearTimeout(t);
    t = setTimeout(() => tw.classList.remove("scrolling"), 180);
  });
})();