"use strict";

const API = {
  state: "/z-panel/state",
  setup: "/z-panel/setup",
  login: "/z-panel/login",
  me: "/z-panel/me",
  stats: "/z-panel/api/stats",
  timeline: "/z-panel/api/timeline",
  logs: "/z-panel/api/logs",
  system: "/z-panel/api/system",
  restart: "/z-panel/api/restart",
  articles: "/z-panel/api/articles",
  i18n: "/z-panel/api/i18n",
  rules: "/z-panel/api/rules",
  honeypot: "/z-panel/api/honeypot",
  zmap: "/z-panel/api/zmap",
};

const TOKEN_KEY = "zektyc_admin_token";
const REFRESH_MS = 15000;

const $ = (id) => document.getElementById(id);

let authMode = "login";
let token = sessionStorage.getItem(TOKEN_KEY) || "";
let autoTimer = null;
let logTimer = null;

function authHeaders() {
  return token ? { Authorization: "Bearer " + token } : {};
}

async function api(path, opts = {}) {
  const headers = Object.assign({}, opts.headers || {}, authHeaders());
  if (opts.body) headers["Content-Type"] = "application/json";
  const res = await fetch(path, Object.assign({}, opts, { headers }));
  let data = null;
  try {
    data = await res.json();
  } catch {}
  if (res.status === 401 && !opts._noAuth) {
    clearSession();
    throw new Error("Session expirée");
  }
  return { status: res.status, data };
}

function clearSession() {
  token = "";
  sessionStorage.removeItem(TOKEN_KEY);
  $("app").hidden = true;
  $("login").hidden = false;
  setAuthMode("login");
}

function fmtDate(ts) {
  const d = new Date(ts * 1000);
  const p = (n) => String(n).padStart(2, "0");
  return `${p(d.getDate())}/${p(d.getMonth() + 1)} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
}

function fmtBytes(n) {
  if (n == null) return "-";
  if (n < 1024) return n + " B";
  if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " Ko";
  if (n < 1024 * 1024 * 1024) return (n / 1024 / 1024).toFixed(1) + " Mo";
  return (n / 1024 / 1024 / 1024).toFixed(2) + " Go";
}

function fmtUptime(s) {
  if (s == null) return "-";
  const d = Math.floor(s / 86400);
  const h = Math.floor((s % 86400) / 3600);
  const m = Math.floor((s % 3600) / 60);
  if (d > 0) return `${d} j ${h} h ${m} min`;
  if (h > 0) return `${h} h ${m} min`;
  return `${m} min`;
}

function pillClass(status) {
  const s = Number(status);
  if (s >= 500) return "s5xx";
  if (s >= 400) return "s4xx";
  if (s >= 300) return "s3xx";
  if (s >= 200) return "s2xx";
  return "s0";
}

function esc(s) {
  return String(s ?? "").replace(/[&<>"']/g, (c) =>
    ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
  );
}

/* ---------- Authentification ---------- */

function setAuthMode(mode) {
  authMode = mode;
  const btn = $("auth-btn");
  if (mode === "setup") {
    $("auth-form").querySelector("label").textContent = "Définir un mot de passe";
    btn.textContent = "Configurer et se connecter";
    $("password").autocomplete = "new-password";
  } else {
    $("auth-form").querySelector("label").textContent = "Mot de passe";
    btn.textContent = "Connexion";
    $("password").autocomplete = "current-password";
  }
}

function setMsg(text, cls) {
  const m = $("auth-msg");
  m.textContent = text;
  m.className = "msg" + (cls ? " " + cls : "");
}

async function initAuth() {
  $("app").hidden = true;
  $("login").hidden = false;
  if (token) {
    const r = await api(API.me, { _noAuth: true });
    if (r.status === 200) {
      $("login").hidden = true;
      $("app").hidden = false;
      startAutoRefresh();
      return;
    }
    token = "";
    sessionStorage.removeItem(TOKEN_KEY);
  }
  const st = await api(API.state, { _noAuth: true });
  if (st.status !== 200) {
    setMsg("Impossible de contacter le serveur.", "err");
    return;
  }
  setAuthMode(st.data && st.data.configured ? "login" : "setup");
  if (st.data && st.data.configured === false) {
    setMsg("Premier lancement : définissez votre mot de passe.", "");
  }
}

async function submitAuth(e) {
  e.preventDefault();
  const password = $("password").value;
  setMsg("", "");
  $("auth-btn").disabled = true;
  try {
    if (authMode === "setup") {
      const s = await api(API.setup, { method: "POST", body: JSON.stringify({ password }) });
      if (s.status !== 200) {
        setMsg(s.data && s.data.error ? s.data.error : "Erreur", "err");
        return;
      }
    }
    const r = await api(API.login, { method: "POST", body: JSON.stringify({ password }) });
    if (r.status === 429) {
      setMsg("Trop de tentatives. Réessayez dans quelques minutes.", "err");
      return;
    }
    if (r.status === 401) {
      setMsg("Mot de passe incorrect.", "err");
      return;
    }
    if (r.status === 409) {
      setAuthMode("login");
      setMsg("Le mot de passe a déjà été configuré. Connectez-vous.", "err");
      return;
    }
    if (r.status !== 200) {
      setMsg(r.data && r.data.error ? r.data.error : "Erreur", "err");
      return;
    }
    token = r.data.token;
    sessionStorage.setItem(TOKEN_KEY, token);
    $("password").value = "";
    setMsg("", "");
    $("login").hidden = true;
    $("app").hidden = false;
    startAutoRefresh();
  } catch (err) {
    setMsg(err.message || "Erreur réseau", "err");
  } finally {
    $("auth-btn").disabled = false;
  }
}

/* ---------- Navigation par onglets ---------- */

const TITLES = {
  dash: "Tableau de bord",
  logs: "Logs",
  system: "Système",
  articles: "Articles",
  trans: "Traductions",
  rules: "Règles Discord",
  honeypot: "Honeypot",
  zmap: "ZMap",
  restart: "Redémarrage",
};

function switchTab(name) {
  for (const b of document.querySelectorAll(".nav-item")) {
    b.classList.toggle("active", b.dataset.tab === name);
  }
  for (const sec of document.querySelectorAll(".tab")) {
    sec.hidden = sec.id !== "tab-" + name;
  }
  $("page-title").textContent = TITLES[name];
  if (name === "logs") loadLogs();
  if (name === "system") loadSystem();
  if (name === "zmap") loadZmap();
  if (name === "articles") loadArticles();
  if (name === "trans") loadTranslations();
  if (name === "rules") loadRules();
  if (name === "honeypot") loadHoneypot();
}

/* ---------- Tableau de bord ---------- */

async function loadDashboard() {
  const [statsRes, tlRes] = await Promise.all([api(API.stats), api(API.timeline)]);
  if (statsRes.status !== 200 || tlRes.status !== 200) throw new Error("stats");
  renderStats(statsRes.data);
  renderTimeline(tlRes.data);
}

function renderStats(s) {
  const total = s.total || 0;
  const by = s.byStatus || {};
  const cards = [
    [total, "requêtes", "stat-value"],
    [by["200"] ?? 0, "200 OK", "stat-value"],
    [by["404"] ?? 0, "404 bloqués", "stat-value"],
    [by["429"] ?? 0, "429 rate-limit", "stat-value"],
    [by["405"] ?? 0, "405 refusés", "stat-value"],
    [Object.keys(by).length, "statuts distincts", "stat-value"],
  ];
  document.querySelectorAll("#stat-cards .stat-card").forEach((card, i) => {
    const [v, label] = cards[i];
    card.querySelector(".stat-value").textContent = v.toLocaleString("fr-FR");
    card.querySelector(".stat-label").textContent = label;
  });
  const blocked = s.blocked || [];
  $("blocked-count").textContent = blocked.length + " cibles";
  if (blocked.length === 0) {
    $("blocked-table").innerHTML = '<p class="meta">Aucun 404.</p>';
  } else {
    $("blocked-table").innerHTML =
      "<table><thead><tr><th>Chemin</th><th>Hits</th></tr></thead><tbody>" +
      blocked
        .map(
          ([uri, n]) =>
            `<tr><td class="uri">${esc(uri)}</td><td class="hit"><b>${n.toLocaleString("fr-FR")}</b></td></tr>`
        )
        .join("") +
      "</tbody></table>";
  }
  const by429 = Object.entries(s.by429 || {}).sort((a, b) => b[1] - a[1]).slice(0, 10);
  $("ratelimit-count").textContent = by429.length + " IP";
  if (by429.length === 0) {
    $("ratelimit-table").innerHTML = '<p class="meta">Aucun 429.</p>';
  } else {
    $("ratelimit-table").innerHTML =
      "<table><thead><tr><th>IP</th><th>Limitations</th></tr></thead><tbody>" +
      by429
        .map(
          ([ip, n]) =>
            `<tr><td class="ip">${esc(ip)}</td><td class="hit"><b>${n.toLocaleString("fr-FR")}</b></td></tr>`
        )
        .join("") +
      "</tbody></table>";
  }
}

function renderTimeline(data) {
  const W = 900;
  const H = 160;
  const padB = 26;
  const padT = 8;
  const n = data.length;
  const max = Math.max.apply(null, data.map((d) => d.total).concat([1]));
  const band = W / n;
  const bw = Math.max(band * 0.6, 1);
  const plotH = H - padB - padT;
  const seg = (v) => Math.round((v / max) * plotH);

  let rects = "";
  let labels = "";
  data.forEach((d, i) => {
    const x = i * band + (band - bw) / 2;
    let y = padT + plotH;
    const stack = [];
    if (d.ok) stack.push(["#34d399", d.ok]);
    if (d.redir) stack.push(["#58a6ff", d.redir]);
    if (d.err4) stack.push(["#fbbf24", d.err4]);
    if (d.err5) stack.push(["#f87171", d.err5]);
    if (d.total === 0) {
      rects += `<rect x="${x.toFixed(1)}" y="${(padT + plotH - 1).toFixed(1)}" width="${bw.toFixed(1)}" height="1" fill="#1b2430"/>`;
    }
    const tooltip =
      `<title>${fmtDate(d.hour)} : ${d.total} req` +
      (d.ok ? ` · ${d.ok} OK` : "") +
      (d.err4 ? ` · ${d.err4} 4xx` : "") +
      (d.err5 ? ` · ${d.err5} 5xx` : "") +
      `</title>`;
    for (const [color, v] of stack) {
      const h = seg(v);
      y -= h;
      rects += `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${bw.toFixed(1)}" height="${h}" fill="${color}" rx="1">${tooltip}</rect>`;
    }
    if (i % 6 === 0) {
      const h = new Date(d.hour * 1000).getHours();
      labels += `<text x="${(x + band / 2).toFixed(1)}" y="${H - 8}" text-anchor="middle" font-size="10" fill="#8b96a6">${h}h</text>`;
    }
  });

  const first = data[0];
  const last = data[n - 1];
  $("chart-meta").textContent = `${fmtDate(first.hour)} → ${fmtDate(last.hour)}`;
  $("chart").innerHTML = n
    ? `<svg class="chart-svg" viewBox="0 0 ${W} ${H}" role="img" aria-label="Requêtes par heure">${rects}${labels}</svg>`
    : '<p class="meta">Aucune donnée.</p>';
}

/* ---------- Logs ---------- */

let logFilterTimer = null;
const LOG_EXCLUDE_KEY = "zektyc_log_exclude";
let logExclude = localStorage.getItem(LOG_EXCLUDE_KEY) !== "0";

function renderLogExclude() {
  const btn = $("log-exclude");
  btn.setAttribute("aria-pressed", String(logExclude));
  btn.classList.toggle("active", logExclude);
  $("log-exclude-label").textContent = logExclude ? "Masquer le bruit" : "Tout afficher";
}

function setLogExclude(v) {
  logExclude = v;
  localStorage.setItem(LOG_EXCLUDE_KEY, v ? "1" : "0");
  renderLogExclude();
  loadLogs();
}

async function loadLogs() {
  const filter = $("log-filter").value.trim();
  const status = $("log-status").value;
  const q = new URLSearchParams({ lines: "300" });
  if (filter) q.set("filter", filter);
  if (status) q.set("status", status);
  if (logExclude) q.set("exclude", "1");
  const r = await api(API.logs + "?" + q.toString());
  if (r.status !== 200) return;
  const { entries, total, truncated, returned } = r.data;
  $("log-meta").textContent =
    `${returned} affichées · ${total.toLocaleString("fr-FR")} au total` + (truncated ? " · tronqué" : "");
  const tbody = $("log-table").querySelector("tbody");
  if (entries.length === 0) {
    tbody.innerHTML = '<tr><td colspan="7" class="meta">Aucune entrée.</td></tr>';
    return;
  }
  tbody.innerHTML = entries
    .slice()
    .reverse()
    .map((e) => {
      const d =
        typeof e.duration === "number"
          ? (e.duration < 100 ? e.duration.toFixed(1) : Math.round(e.duration)) + " ms"
          : "-";
      const ua = (e.ua || "-").length > 60 ? (e.ua || "-").slice(0, 60) + "…" : e.ua || "-";
      return `<tr>
        <td class="mono">${fmtDate(e.ts)}</td>
        <td class="ip">${esc(e.ip)}</td>
        <td>${esc(e.method)}</td>
        <td class="uri" title="${esc(e.uri)}">${esc(e.uri)}</td>
        <td><span class="pill ${pillClass(e.status)}">${esc(e.status)}</span></td>
        <td class="hit">${d}</td>
        <td class="muted" title="${esc(e.ua)}">${esc(ua)}</td>
      </tr>`;
    })
    .join("");
}

/* ---------- Système ---------- */

function fmtLoadAvg(la, cpus) {
  if (!la) return "-";
  const parts = la.split(" ");
  const cores = typeof cpus === "number" ? cpus : parts.length > 3 ? parts[3].split("/")[1] : null;
  return `${parts[0]} / ${parts[1]} / ${parts[2]}` + (cores ? ` (${cores} cœur${cores > 1 ? "s" : ""})` : "");
}

async function loadSystem() {
  const r = await api(API.system);
  if (r.status !== 200) return;
  const s = r.data;
  const mem = s.mem || {};
  const total = mem.MemTotal || 0;
  const available = mem.MemAvailable ?? total;
  const used = Math.max(total - available, 0);
  const pct = total ? Math.round((used / total) * 100) : 0;

  const cards = [
    [fmtUptime(s.uptime), "uptime"],
    [fmtLoadAvg(s.loadavg, s.cpus), "charge CPU (1/5/15)"],
    [`${pct} % · ${fmtBytes(used)}`, "mémoire utilisée"],
    [String(s.procs ? s.procs.length : 0), "processus suivis"],
  ];
  $("sys-grid").innerHTML = cards
    .map(
      ([v, label]) => `<div class="stat-card">
        <div class="stat-body"><b class="stat-value">${esc(v)}</b><span class="stat-label">${esc(label)}</span></div>
      </div>`
    )
    .join("");

  if (!s.procs || s.procs.length === 0) {
    $("procs").innerHTML = '<p class="meta">Aucun processus.</p>';
  } else {
    $("procs").innerHTML =
      "<table><thead><tr><th>Nom</th><th>PID</th><th>RAM</th><th>Commande</th></tr></thead><tbody>" +
      s.procs
        .sort((a, b) => (b.rss || 0) - (a.rss || 0))
        .map(
          (p) =>
            `<tr><td>${esc(p.name)}</td><td class="ip">${p.pid}</td><td class="hit">${fmtBytes(p.rss)}</td><td class="uri" title="${esc(p.cmd)}">${esc(p.cmd)}</td></tr>`
        )
        .join("") +
      "</tbody></table>";
  }

  if (!s.disk) {
    $("disk").innerHTML = '<p class="meta">Indisponible.</p>';
  } else {
    const rows = s.disk.slice(1).map((line) => line.trim().split(/\s+/));
    $("disk").innerHTML =
      "<table><thead><tr><th>Fichier</th><th>Taille</th><th>Utilisé</th><th>Disponible</th><th>%</th><th>Monté sur</th></tr></thead><tbody>" +
      rows
        .map(
          (c) =>
            `<tr><td class="ip">${esc(c[0])}</td><td class="hit">${fmtBytes(Number(c[1]) * 1024)}</td><td class="hit">${fmtBytes(Number(c[2]) * 1024)}</td><td class="hit">${fmtBytes(Number(c[3]) * 1024)}</td><td class="hit">${esc(c[4])}</td><td>${esc(c[5])}</td></tr>`
        )
        .join("") +
      "</tbody></table>";
  }
}

/* ---------- ZMap ---------- */

async function loadZmap() {
  const r = await api(API.zmap);
  if (r.status !== 200) return;
  const d = r.data;
  const b = d.build || {};
  const grids = d.grids || {};

  // stat cards
  const bRunning = b.running;
  const bPass = b.done ? "terminé" : b.pass ? `pass ${b.pass}` : "—";
  const bWays = b.ways ? `${(b.ways / 1e6).toFixed(1)}M` : "—";
  const bNodes = b.nodes ? `${(b.nodes / 1e6).toFixed(1)}M` : "—";
  const bRss = b.rss ? fmtBytes(b.rss) : "—";
  const cards = [
    [bRunning ? "En cours" : (b.done ? "Terminé" : "Arrêté"), "état build"],
    [bPass, "pass actuel"],
    [bWays, "ways traités"],
    [bNodes, "nœuds collectés"],
    [bRss, "RAM build"],
    [grids.europe ? fmtBytes(grids.europe.totalSize) : "—", "grille Europe"],
    [grids.planet ? fmtBytes(grids.planet.totalSize) : "—", "grille Monde"],
  ];
  $("zmap-grid").innerHTML = cards.map(([v, label]) =>
    `<div class="stat-card"><div class="stat-body"><b class="stat-value">${esc(v)}</b><span class="stat-label">${esc(label)}</span></div></div>`
  ).join("");

  // build info
  $("zmap-build-meta").textContent = b.pid ? `PID ${b.pid}` : "";
  if (b.done) {
    $("zmap-build-info").innerHTML = '<p class="meta">Build terminé.</p>';
  } else if (!b.running) {
    $("zmap-build-info").innerHTML = '<p class="meta">Aucun build en cours.</p>';
  } else {
    const pctWays = b.ways ? Math.min(100, Math.round((b.ways / 50e6) * 100)) : 0;
    const pctNodes = b.nodes ? Math.min(100, Math.round((b.nodes / 500e6) * 100)) : 0;
    const bar = (pct, label) => `<div class="bar-row"><span class="bar-label">${label}</span><div class="bar-track"><div class="bar-fill" style="width:${pct}%"></div></div><span class="bar-pct">${pct}%</span></div>`;
    $("zmap-build-info").innerHTML =
      `<div class="build-bars">${bar(pctWays, "Ways (~50M)")}${bar(pctNodes, "Nœuds (~500M)")}</div>`;
  }

  // grids
  $("zmap-grids-meta").textContent = "";
  const gNames = { europe: "Europe", planet: "Monde" };
  let gHtml = '<table><thead><tr><th>Grille</th><th>Points</th><th>Cellules</th><th>Taille gzip</th><th>Couverture</th></tr></thead><tbody>';
  for (const [key, label] of Object.entries(gNames)) {
    const g = grids[key];
    if (g) {
      const cover = (g.lonMin != null) ? `${g.lonMin}°…${g.lonMax}° lon, ${g.latMin}°…${g.latMax}° lat` : "—";
      gHtml += `<tr><td>${esc(label)}</td><td class="hit">${g.points?.toLocaleString("fr-FR") ?? "—"}</td><td class="hit">${g.cells?.toLocaleString("fr-FR") ?? "—"}</td><td class="hit">${fmtBytes(g.totalSize)}</td><td class="uri">${esc(cover)}</td></tr>`;
    } else {
      gHtml += `<tr><td>${esc(label)}</td><td colspan="4" class="meta">pas encore construite</td></tr>`;
    }
  }
  gHtml += '</tbody></table>';
  $("zmap-grids-info").innerHTML = gHtml;

  // log
  const logLines = b.log || [];
  $("zmap-build-log").textContent = logLines.join("\n") || "Aucun log.";
}

/* ---------- Articles ---------- */

let articleSlug = null;

function setArticleMsg(text, cls) {
  const m = $("art-msg");
  m.textContent = text;
  m.className = "msg" + (cls ? " " + cls : "");
}

async function loadArticles() {
  const r = await api(API.articles);
  if (r.status !== 200) return;
  const list = r.data || [];
  $("articles-meta").textContent = list.length + " article" + (list.length > 1 ? "s" : "");
  if (list.length === 0) {
    $("articles-list").innerHTML = '<p class="meta">Aucun article. Créez le premier.</p>';
    return;
  }
  $("articles-list").innerHTML =
    "<table><thead><tr><th>Slug</th><th>Titre FR</th><th>Titre EN</th><th>Publié</th><th>Modifié</th><th class='col-actions'>Actions</th></tr></thead><tbody>" +
    list
      .map(
        (a) =>
          `<tr>
            <td class="mono">${esc(a.slug)}</td>
            <td class="uri" title="${esc(a.frTitle)}">${esc(a.frTitle)}</td>
            <td class="uri" title="${esc(a.enTitle)}">${esc(a.enTitle)}</td>
            <td class="hit">${esc(a.published)}</td>
            <td class="hit muted">${esc(a.modified)}</td>
            <td class="col-actions">
              <div class="row-actions">
                <button type="button" class="btn-ghost btn-sm" data-action="edit" data-slug="${esc(a.slug)}">Modifier</button>
                <button type="button" class="btn-ghost btn-sm" data-action="view" data-slug="${esc(a.slug)}">Voir</button>
                <button type="button" class="btn-danger btn-sm" data-action="delete" data-slug="${esc(a.slug)}">Supprimer</button>
              </div>
            </td>
          </tr>`
      )
      .join("") +
    "</tbody></table>";
}

function fillArticleForm(article) {
  $("art-slug").value = article.slug;
  $("art-published").value = article.published || "";
  $("art-fr-title").value = (article.fr && article.fr.title) || "";
  $("art-fr-og").value = (article.fr && article.fr.ogTitle) || "";
  $("art-fr-desc").value = (article.fr && article.fr.description) || "";
  $("art-fr-body").value = (article.fr && article.fr.body) || "";
  $("art-en-title").value = (article.en && article.en.title) || "";
  $("art-en-og").value = (article.en && article.en.ogTitle) || "";
  $("art-en-desc").value = (article.en && article.en.description) || "";
  $("art-en-body").value = (article.en && article.en.body) || "";
  articleSlug = article.slug;
  $("article-editor-title").textContent = "Modifier l'article";
  $("article-editor-meta").textContent = "/actualites/" + article.slug + "/";
  $("art-delete").hidden = false;
  $("article-editor").hidden = false;
  setArticleMsg("", "");
  $("article-editor").scrollIntoView({ behavior: "smooth", block: "start" });
}

async function openArticleEditor(slug) {
  if (slug) {
    const r = await api(API.articles + "/" + slug);
    if (r.status !== 200) return;
    fillArticleForm(r.data);
    return;
  }
  for (const id of [
    "art-slug",
    "art-fr-title",
    "art-fr-og",
    "art-fr-desc",
    "art-fr-body",
    "art-en-title",
    "art-en-og",
    "art-en-desc",
    "art-en-body",
  ]) {
    $(id).value = "";
  }
  $("art-published").value = new Date().toISOString().slice(0, 10);
  articleSlug = null;
  $("article-editor-title").textContent = "Nouvel article";
  $("article-editor-meta").textContent = "";
  $("art-delete").hidden = true;
  $("article-editor").hidden = false;
  setArticleMsg("", "");
  $("article-editor").scrollIntoView({ behavior: "smooth", block: "start" });
}

function collectArticleForm() {
  return {
    slug: $("art-slug").value.trim(),
    published: $("art-published").value,
    fr: {
      title: $("art-fr-title").value,
      ogTitle: $("art-fr-og").value,
      description: $("art-fr-desc").value,
      body: $("art-fr-body").value,
    },
    en: {
      title: $("art-en-title").value,
      ogTitle: $("art-en-og").value,
      description: $("art-en-desc").value,
      body: $("art-en-body").value,
    },
  };
}

function copyLangFields(from, to) {
  $("art-" + to + "-title").value = $("art-" + from + "-title").value;
  $("art-" + to + "-og").value = $("art-" + from + "-og").value;
  $("art-" + to + "-desc").value = $("art-" + from + "-desc").value;
  $("art-" + to + "-body").value = $("art-" + from + "-body").value;
  setArticleMsg(
    from === "fr"
      ? "Contenu français copié en anglais — traduis puis publie."
      : "Contenu anglais copié en français — traduis puis publie.",
    "ok"
  );
}

function togglePreview(lang) {
  const pv = $("art-" + lang + "-preview");
  if (pv.hidden) {
    const ta = $("art-" + lang + "-body");
    pv.innerHTML = window.marked ? window.marked.parse(ta.value || "") : "";
    pv.hidden = false;
  } else {
    pv.hidden = true;
  }
}

async function saveArticle(e) {
  e.preventDefault();
  const body = collectArticleForm();
  if (!/^[a-z0-9-]+$/.test(body.slug)) {
    setArticleMsg("Slug invalide : minuscules a-z, chiffres et tirets uniquement.", "err");
    return;
  }
  if (!body.published) {
    setArticleMsg("Date de publication requise.", "err");
    return;
  }
  if (
    !body.fr.title.trim() ||
    !body.en.title.trim() ||
    !body.fr.body.trim() ||
    !body.en.body.trim()
  ) {
    setArticleMsg("Les titres et contenus FR et EN sont requis.", "err");
    return;
  }
  setArticleMsg("", "");
  $("art-save").disabled = true;
  try {
    const method = articleSlug ? "PUT" : "POST";
    const r = await api(API.articles, { method, body: JSON.stringify(body) });
    if (r.status !== 200 && r.status !== 201) {
      setArticleMsg(r.data && r.data.error ? r.data.error : "Erreur", "err");
      return;
    }
    setArticleMsg(articleSlug ? "Article mis à jour." : "Article créé.", "ok");
    $("article-editor").hidden = true;
    loadArticles();
  } catch (err) {
    if (err && err.message === "Session expirée") return;
    setArticleMsg("Erreur réseau", "err");
  } finally {
    $("art-save").disabled = false;
  }
}

async function deleteArticle(slug) {
  if (!window.confirm(`Supprimer l'article « ${slug} » ? Cette action est définitive.`)) return;
  const r = await api(API.articles + "/" + slug, { method: "DELETE" });
  if (r.status !== 200) {
    if (r.status === 401) return;
    window.alert(r.data && r.data.error ? r.data.error : "Erreur");
    return;
  }
  if (articleSlug === slug) $("article-editor").hidden = true;
  loadArticles();
}

/* ---------- Traductions ---------- */

let transKeys = [];

function setTransMsg(text, cls) {
  const m = $("trans-msg");
  m.textContent = text;
  m.className = "msg" + (cls ? " " + cls : "");
}

function autoGrow(ta) {
  ta.style.height = "auto";
  ta.style.height = Math.max(ta.scrollHeight + 4, 40) + "px";
}

function transRow(key, fr, en) {
  const tr = document.createElement("tr");
  tr.dataset.key = key;
  tr.innerHTML =
    `<td class="mono trans-key" title="${esc(key)}">${esc(key)}</td>` +
    `<td><textarea class="trans-val" data-lang="fr" rows="1" spellcheck="false">${esc(fr)}</textarea></td>` +
    `<td><textarea class="trans-val" data-lang="en" rows="1" spellcheck="false">${esc(en)}</textarea></td>` +
    `<td class="col-actions"><button type="button" class="btn-danger btn-sm trans-del" title="Supprimer la clé">Supprimer</button></td>`;
  tr.querySelectorAll("textarea").forEach((ta) => {
    ta.addEventListener("input", () => autoGrow(ta));
    autoGrow(ta);
  });
  tr.querySelector(".trans-del").addEventListener("click", () => {
    tr.remove();
    setTransMsg("Modifications non enregistrées.", "ok");
    updateTransCount();
  });
  return tr;
}

function applyTransFilter() {
  const q = $("trans-filter").value.trim().toLowerCase();
  for (const tr of $("trans-table").querySelectorAll("tbody tr")) {
    tr.hidden = !!(q && !tr.dataset.key.includes(q));
  }
  updateTransCount();
}

function updateTransCount() {
  const total = transKeys.length;
  const visible = $("trans-table").querySelectorAll("tbody tr:not([hidden])").length;
  $("trans-meta").textContent = visible + " / " + total + " clés";
}

async function loadTranslations() {
  const r = await api(API.i18n);
  if (r.status !== 200) return;
  const dict = r.data || { fr: {}, en: {} };
  transKeys = Array.from(
    new Set([...Object.keys(dict.fr || {}), ...Object.keys(dict.en || {})])
  ).sort();
  const tbody = $("trans-table").querySelector("tbody");
  tbody.innerHTML = "";
  const frag = document.createDocumentFragment();
  for (const key of transKeys) {
    frag.appendChild(transRow(key, (dict.fr || {})[key] || "", (dict.en || {})[key] || ""));
  }
  tbody.appendChild(frag);
  updateTransCount();
  setTransMsg("", "");
}

async function saveTranslations() {
  const dict = { fr: {}, en: {} };
  for (const tr of $("trans-table").querySelectorAll("tbody tr")) {
    const key = tr.dataset.key;
    dict.fr[key] = tr.querySelector('[data-lang="fr"]').value;
    dict.en[key] = tr.querySelector('[data-lang="en"]').value;
  }
  setTransMsg("", "");
  $("trans-save").disabled = true;
  try {
    const r = await api(API.i18n, { method: "PUT", body: JSON.stringify(dict) });
    if (r.status !== 200) {
      setTransMsg(r.data && r.data.error ? r.data.error : "Erreur", "err");
      return;
    }
    setTransMsg("Traductions enregistrées.", "ok");
    loadTranslations();
  } catch (err) {
    if (err && err.message === "Session expirée") return;
    setTransMsg("Erreur réseau", "err");
  } finally {
    $("trans-save").disabled = false;
  }
}

function addTransKey() {
  const key = window.prompt("Clé de traduction (ex : faq.q9) :");
  if (!key) return;
  const k = key.trim();
  if (!k) return;
  const tbody = $("trans-table").querySelector("tbody");
  if ([...tbody.children].some((tr) => tr.dataset.key === k)) {
    setTransMsg("Cette clé existe déjà.", "err");
    return;
  }
  tbody.appendChild(transRow(k, "", ""));
  transKeys.push(k);
  transKeys.sort();
  $("trans-filter").value = "";
  applyTransFilter();
  setTransMsg("Clé ajoutée, enregistrez pour appliquer.", "ok");
}

/* ---------- Règles Discord ---------- */

async function loadRules() {
  const r = await api(API.rules);
  if (r.status !== 200) return;
  $("rules-content").value = (r.data && r.data.content) || "";
  const len = (r.data && r.data.length) || 0;
  $("rules-meta").textContent = len ? len + " caractères" : "";
  setRulesMsg("", "");
}

function setRulesMsg(text, cls) {
  const m = $("rules-msg");
  m.textContent = text;
  m.className = "msg" + (cls ? " " + cls : "");
}

async function saveRules() {
  const content = $("rules-content").value;
  setRulesMsg("", "");
  $("rules-save").disabled = true;
  try {
    const r = await api(API.rules, { method: "PUT", body: JSON.stringify({ content }) });
    if (r.status !== 200) {
      setRulesMsg(r.data && r.data.error ? r.data.error : "Erreur", "err");
      return;
    }
    setRulesMsg("Règles enregistrées — le bot les publiera dans la minute.", "ok");
    loadRules();
  } catch (err) {
    if (err && err.message === "Session expirée") return;
    setRulesMsg("Erreur réseau", "err");
  } finally {
    $("rules-save").disabled = false;
  }
}

/* ---------- Honeypot ---------- */

function hpEndpointsHtml(endpoints) {
  const top = Object.entries(endpoints || {})
    .sort((a, b) => b[1] - a[1])
    .slice(0, 3);
  if (top.length === 0) return '<span class="muted">—</span>';
  return top
    .map(([p, c]) => `<span class="hp-end" title="${esc(p)}">${esc(p)} ×${c}</span>`)
    .join(" ");
}

async function loadHoneypot() {
  const r = await api(API.honeypot);
  if (r.status !== 200) return;
  const d = r.data || {};
  const ips = d.ips || [];
  const total = d.total || 0;
  const banned = ips.filter((x) => x.banned).length;
  $("honeypot-meta").textContent =
    total + " IP piégées" + (banned ? " · " + banned + " bannie(s)" : "") + " (max " + (d.max || "-") + ")";
  const box = $("honeypot-list");
  if (ips.length === 0) {
    box.innerHTML = '<p class="meta">Aucune IP piégée pour le moment.</p>';
    return;
  }
  box.innerHTML =
    '<table><thead><tr><th>IP</th><th>Hits</th><th>Chemins</th><th>Premier</th><th>Dernier</th><th>Statut</th><th></th></tr></thead><tbody>' +
    ips
      .map((e) => {
        const badge = e.banned ? '<span class="badge-ban">Bannie</span>' : '<span class="muted">Active</span>';
        return (
          "<tr>" +
          `<td class="ip">${esc(e.ip)}</td>` +
          `<td>${e.count}</td>` +
          `<td class="hp-ends">${hpEndpointsHtml(e.endpoints)}</td>` +
          `<td>${fmtDate(Math.floor(e.first / 1000))}</td>` +
          `<td>${fmtDate(Math.floor(e.last / 1000))}</td>` +
          `<td>${badge}</td>` +
          `<td class="col-actions"><button type="button" class="btn-ghost btn-sm" data-hp="${esc(e.ip)}" data-ban="${e.banned ? "0" : "1"}">${e.banned ? "Débannir" : "Bannir"}</button></td>` +
          "</tr>"
        );
      })
      .join("") +
    "</tbody></table>";
}

async function setHoneypotBan(ip, ban) {
  const r = await api(API.honeypot, { method: "POST", body: JSON.stringify({ action: ban ? "ban" : "unban", ip }) });
  if (r.status !== 200) return;
  loadHoneypot();
}

async function clearHoneypot() {
  if (!confirm("Vider toute la liste honeypot ?")) return;
  const r = await api(API.honeypot, { method: "POST", body: JSON.stringify({ action: "clear" }) });
  if (r.status !== 200) return;
  loadHoneypot();
}

/* ---------- Actualisation ---------- */

async function refreshAll() {
  try {
    await loadDashboard();
    $("updated").textContent = "à jour " + new Date().toLocaleTimeString("fr-FR", { hour12: false });
  } catch (err) {
    if (err && err.message === "Session expirée") return;
    $("updated").textContent = "erreur de rafraîchissement";
  }
}

function startAutoRefresh() {
  stopAutoRefresh();
  autoTimer = setInterval(refreshAll, REFRESH_MS);
  logTimer = setInterval(() => {
    if (!$("tab-logs").hidden) loadLogs();
    if (!$("tab-system").hidden) loadSystem();
    if (!$("tab-zmap").hidden) loadZmap();
  }, REFRESH_MS);
  refreshAll();
}

function stopAutoRefresh() {
  if (autoTimer) clearInterval(autoTimer);
  if (logTimer) clearInterval(logTimer);
  autoTimer = null;
  logTimer = null;
}

/* ---------- Redémarrage ---------- */

async function doRestart(service) {
  const label = service === "app" ? "l'application" : "Caddy";
  if (!window.confirm(`Redémarrer ${label} ?`)) return;
  const btn = service === "app" ? $("restart-app") : $("restart-caddy");
  btn.disabled = true;
  btn.textContent = "Redémarrage…";
  try {
    const r = await api(API.restart, { method: "POST", body: JSON.stringify({ service }) });
    if (r.status !== 200) {
      window.alert(r.data && r.data.error ? r.data.error : "Erreur");
      return;
    }
    if (service === "app") {
      setTimeout(() => {
        window.alert("Application redémarrée. Votre session est expirée, reconnectez-vous.");
        clearSession();
      }, 2000);
    } else {
      setTimeout(() => window.alert("Caddy redémarré."), 2000);
    }
  } catch (err) {
    if (err && err.message === "Session expirée") return;
    window.alert("Erreur réseau");
  } finally {
    btn.disabled = false;
    btn.textContent = label === "l'application" ? "Redémarrer l'application" : "Redémarrer Caddy";
  }
}

/* ---------- Câblage ---------- */

$("auth-form").addEventListener("submit", submitAuth);
$("toggle-pw").addEventListener("click", () => {
  const input = $("password");
  input.type = input.type === "password" ? "text" : "password";
});

document.querySelectorAll(".nav-item").forEach((b) => b.addEventListener("click", () => switchTab(b.dataset.tab)));
$("refresh").addEventListener("click", refreshAll);
$("logout").addEventListener("click", () => {
  stopAutoRefresh();
  clearSession();
  setMsg("", "");
});
$("autorefresh").addEventListener("change", (e) => {
  if (e.target.checked) startAutoRefresh();
  else stopAutoRefresh();
});
$("restart-app").addEventListener("click", () => doRestart("app"));
$("restart-caddy").addEventListener("click", () => doRestart("caddy"));
$("log-filter").addEventListener("input", () => {
  if (logFilterTimer) clearTimeout(logFilterTimer);
  logFilterTimer = setTimeout(loadLogs, 350);
});
$("log-status").addEventListener("change", loadLogs);
$("log-exclude").addEventListener("click", () => setLogExclude(!logExclude));
$("article-new").addEventListener("click", () => openArticleEditor());
$("article-form").addEventListener("submit", saveArticle);
$("art-cancel").addEventListener("click", () => {
  $("article-editor").hidden = true;
  setArticleMsg("", "");
});
$("art-delete").addEventListener("click", () => {
  if (articleSlug) deleteArticle(articleSlug);
});
$("articles-list").addEventListener("click", (e) => {
  const btn = e.target.closest("[data-action]");
  if (!btn) return;
  const slug = btn.dataset.slug;
  if (btn.dataset.action === "edit") openArticleEditor(slug);
  else if (btn.dataset.action === "view") window.open("/actualites/" + slug + "/", "_blank", "noopener");
  else if (btn.dataset.action === "delete") deleteArticle(slug);
});
$("trans-save").addEventListener("click", saveTranslations);
$("trans-add").addEventListener("click", addTransKey);
$("trans-filter").addEventListener("input", applyTransFilter);
$("rules-save").addEventListener("click", saveRules);
$("rules-reload").addEventListener("click", loadRules);
$("honeypot-refresh").addEventListener("click", loadHoneypot);
$("honeypot-clear").addEventListener("click", clearHoneypot);
$("honeypot-list").addEventListener("click", (e) => {
  const btn = e.target.closest("[data-hp]");
  if (!btn) return;
  setHoneypotBan(btn.dataset.hp, btn.dataset.ban === "1");
});
$("art-copy-from-en").addEventListener("click", () => copyLangFields("en", "fr"));
$("art-copy-from-fr").addEventListener("click", () => copyLangFields("fr", "en"));
document.querySelectorAll("[data-preview]").forEach((b) =>
  b.addEventListener("click", () => togglePreview(b.dataset.preview))
);

initAuth().catch(() => {
  $("login").hidden = false;
  setMsg("Erreur réseau", "err");
});

renderLogExclude();