/* PDB — explorateur SPID. SPA sans dépendance (Chart.js chargé par CDN). */
(() => {
  const $ = (s, r = document) => r.querySelector(s);
  const view = $("#view");
  const API = "/app";
  const TYPE = {};
  const STATUT = { planned: "Planifié", in_progress: "En cours", completed: "Terminé", mentioned: "Mentionné" };
  const COL = { bleu: "#003E7E", bleu2: "#0066B3", or: "#C6A300", teal: "#007979", orange: "#D67A00", vert: "#008046", violet: "#5E35B1", rouge: "#B42318", gris: "#8a8c90" };
  const PAL = [COL.bleu, COL.or, COL.teal, COL.orange, COL.vert, COL.violet, COL.rouge, COL.bleu2, COL.gris, "#8DA9C4", "#E0C36B"];
  let charts = [];
  const fmtN = (n) => n == null ? "—" : Number(n).toLocaleString("fr-CA");
  const fmtUSD = (v) => v == null ? "—" : v >= 1e9 ? (v / 1e9).toLocaleString("fr-CA", { maximumFractionDigits: 1 }) + " G$" : v >= 1e6 ? (v / 1e6).toLocaleString("fr-CA", { maximumFractionDigits: 0 }) + " M$" : Math.round(v).toLocaleString("fr-CA") + " $";
  const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
  const tl = (t) => TYPE[t] || t;
  const stPill = (s) => `<span class="st st-${esc(s)}">${esc(STATUT[s] || s)}</span>`;
  const qs = (o) => Object.entries(o).filter(([, v]) => v !== "" && v != null && v !== false).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
  const toast = (m) => { const t = $("#toast"); t.textContent = m; t.hidden = false; clearTimeout(t._h); t._h = setTimeout(() => (t.hidden = true), 2600); };

  async function api(path, params) {
    const url = API + path + (params ? "?" + qs(params) : "");
    const r = await fetch(url, { headers: { Accept: "application/json" } });
    if (!r.ok) { let d = ""; try { d = (await r.json()).detail; } catch { } throw new Error(d || `${r.status} ${r.statusText}`); }
    return r.json();
  }
  function destroyCharts() { charts.forEach((c) => c.destroy()); charts = []; }
  function chart(el, cfg) { if (!window.Chart) return; Chart.defaults.font.family = getComputedStyle(document.body).fontFamily; Chart.defaults.color = "#58595B"; const c = new Chart(el, cfg); charts.push(c); return c; }
  const hashParams = () => { const h = location.hash.slice(2); const [p, q] = h.split("?"); return { path: p || "", parts: (p || "").split("/"), q: Object.fromEntries(new URLSearchParams(q || "")) }; };
  const setQuery = (obj) => { const { parts } = hashParams(); location.hash = "#/" + parts[0] + (Object.keys(obj).length ? "?" + qs(obj) : ""); };

  /* ------------------------------------------------------------ tableau générique */
  function table(cols, rows, opts = {}) {
    const th = cols.map((c) => `<th class="${c.num ? "num" : ""} ${opts.sort === c.key ? "sorted " + (opts.order || "") : ""}" data-sort="${c.sortKey || ""}">${esc(c.label)}</th>`).join("");
    const tr = rows.map((r) => `<tr class="${opts.href ? "click" : ""}" data-href="${opts.href ? esc(opts.href(r)) : ""}">${cols.map((c) => `<td class="${c.num ? "num" : ""} ${c.trunc ? "trunc" : ""}" title="${c.trunc ? esc(c.title ? c.title(r) : r[c.key]) : ""}">${c.render ? c.render(r) : esc(r[c.key])}</td>`).join("")}</tr>`).join("");
    return `<div class="table-wrap"><table><thead><tr>${th}</tr></thead><tbody>${tr || `<tr><td colspan="${cols.length}" class="muted">Aucun résultat.</td></tr>`}</tbody></table></div>`;
  }
  function bindTable(root, onSort) {
    root.querySelectorAll("tr[data-href]").forEach((tr) => tr.addEventListener("click", (e) => { if (e.target.closest("a")) return; if (tr.dataset.href) location.hash = tr.dataset.href; }));
    if (onSort) root.querySelectorAll("th[data-sort]").forEach((th) => th.addEventListener("click", () => th.dataset.sort && onSort(th.dataset.sort)));
  }
  function pager(total, limit, offset) {
    const page = Math.floor(offset / limit) + 1, pages = Math.max(1, Math.ceil(total / limit));
    return `<div class="pager"><span>${fmtN(total)} résultats · page ${page} / ${fmtN(pages)}</span><span class="sp"></span>
      <button class="btn btn-ghost btn-sm" data-off="${Math.max(0, offset - limit)}" ${offset === 0 ? "disabled" : ""}>← Précédent</button>
      <button class="btn btn-ghost btn-sm" data-off="${offset + limit}" ${offset + limit >= total ? "disabled" : ""}>Suivant →</button></div>`;
  }

  /* ------------------------------------------------------------ tableau de bord */
  async function dashboard() {
    const s = await api("/stats");
    const ov = s.overview;
    view.innerHTML = `
      <div class="hero"><div><h1>SEC Project Intelligence Database</h1>
        <p>${fmtN(ov.projects)} projets stratégiques et ${fmtN(ov.mentions)} mentions extraits par LLM des filings SEC (10-K, 10-Q, 8-K) de ${fmtN(ov.companies)} sociétés du S&amp;P 500, ${ov.first_seen?.slice(0, 4)}–${ov.last_seen?.slice(0, 4)}. Explorez, filtrez, interrogez en SQL, ou branchez-vous sur l'API.</p></div>
        <div><a class="btn" href="#/projects">Explorer les projets</a> &nbsp; <a class="btn btn-ghost" href="#/api" style="color:#fff;border-color:rgba(255,255,255,.5);background:transparent">API</a></div></div>
      <div class="kpis">
        ${kpi(ov.projects, "projets résolus")}${kpi(ov.mentions, "mentions extraites")}${kpi(ov.filings, "filings avec projets")}${kpi(ov.companies, "entreprises")}
        ${kpi(ov.with_amount, "projets avec montant")}${kpi(fmtUSD(ov.median_amount_usd), "montant médian")}${kpi(ov.kg_nodes, "nœuds du graphe")}${kpi(ov.sections_10k, "sections 10-K")}
      </div>
      <div class="grid g2">
        <div class="card"><h3>Mentions par année et formulaire</h3><div class="chart"><canvas id="c-year"></canvas></div></div>
        <div class="card"><h3>Statut des projets</h3><div class="chart"><canvas id="c-status"></canvas></div></div>
        <div class="card" style="grid-column:1/-1"><h3>Les 21 types de projets (nombre et capital divulgué)</h3><div class="chart tall"><canvas id="c-type"></canvas></div></div>
        <div class="card"><h3>Projets par secteur GICS</h3><div class="chart tall"><canvas id="c-sector"></canvas></div></div>
        <div class="card"><h3>Thèmes émergents — part des mentions annuelles</h3><div class="chart tall"><canvas id="c-themes"></canvas></div></div>
        <div class="card"><h3>Entreprises les plus prolifiques</h3>${table([
          { key: "ticker", label: "Ticker", render: (r) => `<a href="#/company/${esc(r.ticker)}"><b>${esc(r.ticker)}</b></a>` },
          { key: "company_name", label: "Entreprise" }, { key: "sector", label: "Secteur" },
          { key: "n", label: "Projets", num: true, render: (r) => fmtN(r.n) }, { key: "amount_usd", label: "Capital", num: true, render: (r) => fmtUSD(r.amount_usd) },
        ], s.top_companies.slice(0, 12))}</div>
        <div class="card"><h3>Technologies et localisations les plus citées</h3><div class="grid g2">
          <div class="tags">${s.top_technologies.slice(0, 20).map((t) => `<a class="tag t-tech" href="#/projects?tech=${encodeURIComponent(t.technology)}">${esc(t.technology)} <b>${fmtN(t.n)}</b></a>`).join("")}</div>
          <div class="tags">${s.top_locations.slice(0, 20).map((t) => `<a class="tag t-loc" href="#/projects?location=${encodeURIComponent(t.location)}">${esc(t.location)} <b>${fmtN(t.n)}</b></a>`).join("")}</div></div></div>
      </div>`;
    // graphiques
    const years = [...new Set(s.mentions_by_year.map((r) => r.year))].sort();
    const forms = ["10-K", "10-Q", "8-K"];
    chart($("#c-year"), { type: "bar", data: { labels: years, datasets: forms.map((f, i) => ({ label: f, data: years.map((y) => s.mentions_by_year.find((r) => r.year === y && r.form_type === f)?.n || 0), backgroundColor: [COL.bleu, COL.or, COL.teal][i] })) }, options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true } }, plugins: { legend: { position: "bottom" } } } });
    chart($("#c-status"), { type: "doughnut", data: { labels: s.by_status.map((r) => STATUT[r.status] || r.status), datasets: [{ data: s.by_status.map((r) => r.n), backgroundColor: [COL.bleu2, COL.vert, COL.or, COL.gris] }] }, options: { responsive: true, maintainAspectRatio: false, cutout: "58%", plugins: { legend: { position: "right" } } } });
    chart($("#c-type"), { type: "bar", data: { labels: s.by_type.map((r) => r.label), datasets: [{ label: "Projets", data: s.by_type.map((r) => r.n), backgroundColor: COL.bleu, yAxisID: "y" }, { label: "Capital (G$)", data: s.by_type.map((r) => (r.amount_usd || 0) / 1e9), backgroundColor: COL.or, yAxisID: "y2" }] }, options: { responsive: true, maintainAspectRatio: false, scales: { x: { ticks: { autoSkip: false, maxRotation: 60, minRotation: 45 } }, y: { position: "left", title: { display: true, text: "projets" } }, y2: { position: "right", grid: { drawOnChartArea: false }, title: { display: true, text: "G$" } } }, plugins: { legend: { position: "bottom" } }, onClick: (e, els) => { if (els[0]) location.hash = "#/projects?type=" + s.by_type[els[0].index].project_type; } } });
    chart($("#c-sector"), { type: "bar", data: { labels: s.by_sector.map((r) => r.sector), datasets: [{ label: "Projets", data: s.by_sector.map((r) => r.n), backgroundColor: COL.bleu2 }] }, options: { indexAxis: "y", responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, onClick: (e, els) => { if (els[0]) location.hash = "#/projects?sector=" + encodeURIComponent(s.by_sector[els[0].index].sector); } } });
    const tot = {}; s.mentions_by_year.forEach((r) => (tot[r.year] = (tot[r.year] || 0) + r.n));
    const themes = [...new Set(s.themes_by_year.map((r) => r.project_type))];
    chart($("#c-themes"), { type: "line", data: { labels: years, datasets: themes.map((t, i) => ({ label: tl(t), data: years.map((y) => { const n = s.themes_by_year.find((r) => r.year === y && r.project_type === t)?.n || 0; return tot[y] ? +(100 * n / tot[y]).toFixed(2) : 0; }), borderColor: [COL.rouge, COL.violet, COL.bleu2, COL.teal, COL.vert, COL.or][i], backgroundColor: "transparent", tension: .25, pointRadius: 2 })) }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { title: { display: true, text: "% des mentions" } } }, plugins: { legend: { position: "bottom" } } } });
  }
  const kpi = (v, l) => `<div class="card kpi"><b>${typeof v === "number" ? fmtN(v) : v}</b><span>${l}</span></div>`;

  /* ------------------------------------------------------------ projets */
  const PCOLS = [
    { key: "ticker", label: "Ticker", sortKey: "ticker", render: (r) => `<a href="#/company/${esc(r.ticker)}"><b>${esc(r.ticker)}</b></a>` },
    { key: "project_name", label: "Projet", sortKey: "name", trunc: true, render: (r) => `<a href="#/project/${esc(r.project_id)}">${esc(r.project_name)}</a><div class="muted small">${esc(r.company_name)}</div>` },
    { key: "project_type", label: "Type", sortKey: "type", render: (r) => `<span class="pill pill-blue">${esc(tl(r.project_type))}</span>` },
    { key: "status", label: "Statut", render: (r) => stPill(r.status) },
    { key: "canonical_location", label: "Lieu" },
    { key: "total_amount_usd", label: "Montant", num: true, sortKey: "amount", render: (r) => fmtUSD(r.total_amount_usd) },
    { key: "n_mentions", label: "Mentions", num: true, sortKey: "mentions", render: (r) => fmtN(r.n_mentions) },
    { key: "first_seen", label: "Première / dernière", sortKey: "first_seen", render: (r) => `${esc(r.first_seen?.slice(0, 7))} → ${esc(r.last_seen?.slice(0, 7))}` },
    { key: "avg_confidence", label: "Conf.", num: true, sortKey: "confidence", render: (r) => (r.avg_confidence ?? 0).toFixed(2) },
  ];
  async function projects() {
    const { q } = hashParams();
    const f = { q: q.q || "", type: q.type || "", sector: q.sector || "", status: q.status || "", ticker: q.ticker || "", location: q.location || "", tech: q.tech || "", partner: q.partner || "", min_amount: q.min_amount || "", year_from: q.year_from || "", year_to: q.year_to || "", min_confidence: q.min_confidence || "", has_amount: q.has_amount || "", sort: q.sort || "mentions", order: q.order || "desc", limit: 50, offset: +q.offset || 0 };
    const [tax, secs] = await Promise.all([api("/taxonomy"), api("/sectors")]);
    view.innerHTML = `<div class="page-head"><div><h1>Projets</h1><p>${fmtN(0)} — chargement…</p></div>
      <div><a class="btn btn-ghost btn-sm" id="csv" href="${API}/projects/export.csv?${qs(f)}" download>Exporter CSV</a></div></div>
      <form class="filters" id="pf">
        <label class="span2">Recherche<input name="q" value="${esc(f.q)}" placeholder="nom, description, entreprise, ticker"></label>
        <label>Type<select name="type"><option value="">Tous</option>${tax.map((t) => `<option value="${t.project_type}" ${f.type === t.project_type ? "selected" : ""}>${esc(t.label)} (${fmtN(t.n)})</option>`).join("")}</select></label>
        <label>Secteur<select name="sector"><option value="">Tous</option>${secs.map((s) => `<option ${f.sector === s.sector ? "selected" : ""}>${esc(s.sector)}</option>`).join("")}</select></label>
        <label>Statut<select name="status"><option value="">Tous</option>${Object.entries(STATUT).map(([k, v]) => `<option value="${k}" ${f.status === k ? "selected" : ""}>${v}</option>`).join("")}</select></label>
        <label>Ticker<input name="ticker" value="${esc(f.ticker)}"></label>
        <label>Lieu<input name="location" value="${esc(f.location)}"></label>
        <label>Technologie<input name="tech" value="${esc(f.tech)}"></label>
        <label>Partenaire<input name="partner" value="${esc(f.partner)}"></label>
        <label>Montant min (US$)<input name="min_amount" type="number" value="${esc(f.min_amount)}" placeholder="ex. 1e9"></label>
        <label>Année de<input name="year_from" type="number" value="${esc(f.year_from)}" min="2010" max="2026"></label>
        <label>Année à<input name="year_to" type="number" value="${esc(f.year_to)}" min="2010" max="2026"></label>
        <label>Confiance min<input name="min_confidence" type="number" step="0.05" min="0" max="1" value="${esc(f.min_confidence)}"></label>
        <label>Avec montant<select name="has_amount"><option value="">Indifférent</option><option value="true" ${f.has_amount ? "selected" : ""}>Oui</option></select></label>
        <label>&nbsp;<span><button class="btn btn-sm">Filtrer</button> <button type="button" class="btn btn-ghost btn-sm" id="reset">Effacer</button></span></label>
      </form><div id="res"><div class="loading">Chargement…</div></div>`;
    $("#pf").addEventListener("submit", (e) => { e.preventDefault(); const d = Object.fromEntries(new FormData(e.target)); setQuery({ ...d, sort: f.sort, order: f.order }); });
    $("#reset").addEventListener("click", () => (location.hash = "#/projects"));
    const data = await api("/projects", f);
    $(".page-head p").textContent = `${fmtN(data.total)} projets correspondent aux filtres.`;
    const res = $("#res");
    res.innerHTML = table(PCOLS, data.items, { href: (r) => `#/project/${r.project_id}`, sort: f.sort, order: f.order }) + pager(data.total, f.limit, f.offset);
    bindTable(res, (k) => setQuery({ ...f, offset: 0, sort: k, order: f.sort === k && f.order === "desc" ? "asc" : "desc" }));
    res.querySelectorAll("[data-off]").forEach((b) => b.addEventListener("click", () => setQuery({ ...f, offset: b.dataset.off })));
  }

  /* ------------------------------------------------------------ fiche projet */
  async function project(id) {
    const d = await api("/projects/" + id);
    const p = d.project;
    const list = (arr, cls) => (arr || []).length ? `<div class="tags">${arr.map((x) => `<span class="tag ${cls}">${esc(x)}</span>`).join("")}</div>` : `<span class="muted">—</span>`;
    view.innerHTML = `
      <div class="page-head"><div><div class="muted small"><a href="#/projects">Projets</a> › <a href="#/company/${esc(p.ticker)}">${esc(p.company_name)}</a></div>
        <h1>${esc(p.project_name)}</h1><p><span class="pill pill-blue">${esc(tl(p.project_type))}</span> &nbsp; ${stPill(p.status)} &nbsp; <span class="muted">${esc(p.sector || "")}</span></p></div>
        <div><a class="btn btn-ghost btn-sm" href="#/graph?node=${encodeURIComponent("P:" + p.project_id)}">Voir dans le graphe</a> <a class="btn btn-ghost btn-sm" href="/docs#/API%20v1%20(cl%C3%A9%20requise)/project_v1_projects__project_id__get" target="_blank">API ↗</a></div></div>
      <div class="grid g3">
        <div class="card" style="grid-column:span 2"><h3>Description</h3><p>${esc(p.description)}</p>
          <dl class="dl"><dt>Entreprise</dt><dd><a href="#/company/${esc(p.ticker)}">${esc(p.company_name)} (${esc(p.ticker)})</a> · CIK ${esc(p.cik)}</dd>
          <dt>Localisation</dt><dd>${p.canonical_location ? `<a href="#/projects?location=${encodeURIComponent(p.canonical_location)}">${esc(p.canonical_location)}</a>` : "—"}</dd>
          <dt>Montant (max divulgué)</dt><dd>${fmtUSD(p.total_amount_usd)}</dd>
          <dt>Observé</dt><dd>${esc(p.first_seen)} → ${esc(p.last_seen)} · ${fmtN(p.n_mentions)} mentions dans ${fmtN(p.n_filings)} filings</dd>
          <dt>Années citées</dt><dd>${p.first_year ?? "—"} → ${p.last_year ?? "—"}</dd>
          <dt>Confiance moyenne</dt><dd>${(p.avg_confidence ?? 0).toFixed(3)}</dd>
          <dt>Technologies</dt><dd>${list(p.technologies, "t-tech")}</dd>
          <dt>Identifiant</dt><dd class="mono">${esc(p.project_id)}</dd></dl></div>
        <div class="card"><h3>Chronologie (${d.timeline.length})</h3><ul class="timeline">${d.timeline.map((t) => `<li><div><b>${esc(t.form_type)}</b> · ${stPill(t.status)} ${t.amount_usd ? `· ${fmtUSD(t.amount_usd)}` : ""}</div><div class="when">${esc(t.filing_date)} · conf. ${(t.confidence ?? 0).toFixed(2)} · <span class="mono">${esc(t.accession_number)}</span></div><div class="snip">${esc(t.snippet)}</div></li>`).join("")}</ul></div>
        <div class="card" style="grid-column:span 2"><h3>Mentions extraites (${d.mentions.length})</h3>
          ${d.mentions.map((m) => `<div class="mention"><div class="mh"><b>${esc(m.form_type)}</b><span class="muted">${esc(m.filing_date)}</span><span class="pill pill-gris">${esc(m.section_name)}</span>${stPill(m.status)}${m.amount_usd ? `<span class="pill pill-or">${fmtUSD(m.amount_usd)}</span>` : ""}<span class="muted small">conf. ${(m.confidence ?? 0).toFixed(2)}</span><span class="sp" style="flex:1"></span><a class="small" href="#/mention/${esc(m.mention_id)}">détail</a></div>
            <p><b>${esc(m.project_name)}</b> — ${esc(m.description)}</p>${m.objective ? `<p class="muted"><i>Objectif :</i> ${esc(m.objective)}</p>` : ""}
            <div class="grid g2" style="gap:6px">${m.locations?.length ? `<div>${list(m.locations, "t-loc")}</div>` : ""}${m.technologies?.length ? `<div>${list(m.technologies, "t-tech")}</div>` : ""}${m.partners?.length ? `<div><span class="small muted">Partenaires</span> ${list(m.partners, "t-part")}</div>` : ""}${m.benefits?.length ? `<div><span class="small muted">Bénéfices</span> ${list(m.benefits, "t-ben")}</div>` : ""}${m.risks?.length ? `<div><span class="small muted">Risques</span> ${list(m.risks, "t-risk")}</div>` : ""}${m.years?.length ? `<div><span class="small muted">Années</span> ${list(m.years, "")}</div>` : ""}</div></div>`).join("")}</div>
        <div class="card"><h3>Projets similaires (embeddings)</h3>${d.similar.length ? d.similar.map((s) => `<div style="padding:6px 0;border-top:1px solid var(--ligne)"><a href="#/project/${esc(s.project_id)}">${esc(s.project_name)}</a><div class="small muted">${esc(s.ticker)} · ${esc(tl(s.project_type))} · <span class="score">${(s.score * 100).toFixed(0)} %</span></div></div>`).join("") : `<span class="muted">—</span>`}
          <h3 style="margin-top:14px">Voisins dans le graphe</h3><div>${d.graph.map((g) => `<a class="node-chip nt-${esc(g.node_type)}" href="#/graph?node=${encodeURIComponent(g.src === "P:" + p.project_id ? g.dst : g.src)}"><span class="nt">${esc(g.rel)}</span>${esc(g.label)}</a>`).join("") || `<span class="muted">—</span>`}</div></div>
      </div>`;
  }

  /* ------------------------------------------------------------ mention */
  async function mention(id) {
    const d = await api("/mentions/" + id);
    const m = d.mention;
    view.innerHTML = `<div class="page-head"><div><div class="muted small"><a href="#/mentions">Mentions</a> › <a href="#/project/${esc(m.project_id)}">projet résolu</a></div><h1>${esc(m.project_name)}</h1>
      <p><span class="pill pill-blue">${esc(tl(m.project_type))}</span> ${stPill(m.status)} · <a href="#/company/${esc(m.ticker)}">${esc(m.company_name)}</a> · ${esc(m.form_type)} du ${esc(m.filing_date)} · section <b>${esc(m.section_name)}</b></p></div></div>
      <div class="grid g2"><div class="card"><h3>Extraction</h3><dl class="dl">
        <dt>Description</dt><dd>${esc(m.description)}</dd><dt>Objectif</dt><dd>${esc(m.objective) || "—"}</dd>
        <dt>Montant</dt><dd>${fmtUSD(m.amount_usd)} ${m.amount_raw ? `<span class="muted">(${esc(m.amount_raw)})</span>` : ""}</dd>
        <dt>Localisations</dt><dd>${(m.locations || []).join(", ") || "—"}</dd><dt>Technologies</dt><dd>${(m.technologies || []).join(", ") || "—"}</dd>
        <dt>Partenaires</dt><dd>${(m.partners || []).join(", ") || "—"}</dd><dt>Fournisseurs</dt><dd>${(m.suppliers || []).join(", ") || "—"}</dd>
        <dt>Bénéfices</dt><dd>${(m.benefits || []).join(" · ") || "—"}</dd><dt>Risques</dt><dd>${(m.risks || []).join(" · ") || "—"}</dd>
        <dt>Années</dt><dd>${(m.years || []).join(", ") || "—"}</dd><dt>Confiance</dt><dd>${(m.confidence ?? 0).toFixed(3)} (backend ${esc(m.backend)})</dd>
        <dt>Accession</dt><dd class="mono">${esc(m.accession_number)}</dd><dt>Section</dt><dd class="mono">${esc(m.section_id)}</dd><dt>Mention</dt><dd class="mono">${esc(m.mention_id)}</dd></dl></div>
      <div class="card"><h3>Section source</h3>${d.section ? `<p class="small muted">${esc(d.section.section_name)} · ${fmtN(d.section.word_count)} mots · 10-K</p><button class="btn btn-sm" id="load-sec">Afficher le texte de la section</button><div id="sec"></div>` : `<div class="warn">Le texte source n'est disponible dans la base que pour les sections 10-K ingérées par SPID. Cette mention provient d'un ${esc(m.form_type)} dont la section reste dans le corpus parquet amont.</div>`}
      <p class="small muted" style="margin-top:12px">Filing sur EDGAR : <a target="_blank" rel="noopener" href="https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=${esc(m.cik)}&type=${esc(m.form_type)}&dateb=&owner=include&count=40">liste des ${esc(m.form_type)} de ${esc(m.ticker)} ↗</a></p></div></div>`;
    $("#load-sec")?.addEventListener("click", async (e) => {
      e.target.disabled = true;
      const s = await api("/sections/" + m.section_id);
      const key = (m.project_name || "").split(/\s+/).filter((w) => w.length > 4)[0];
      let txt = esc(s.text);
      if (key) txt = txt.replace(new RegExp(esc(key).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"), (x) => `<mark>${x}</mark>`);
      $("#sec").innerHTML = `<div class="sec-text">${txt}</div>`;
    });
  }

  /* ------------------------------------------------------------ mentions */
  async function mentions() {
    const { q } = hashParams();
    const f = { q: q.q || "", type: q.type || "", form: q.form || "", ticker: q.ticker || "", status: q.status || "", date_from: q.date_from || "", date_to: q.date_to || "", min_amount: q.min_amount || "", min_confidence: q.min_confidence || "", sort: q.sort || "date", order: q.order || "desc", limit: 50, offset: +q.offset || 0 };
    const tax = await api("/taxonomy");
    view.innerHTML = `<div class="page-head"><div><h1>Mentions</h1><p>Unité d'extraction : un projet cité dans une section d'un filing.</p></div></div>
      <form class="filters" id="mf">
        <label class="span2">Recherche<input name="q" value="${esc(f.q)}"></label>
        <label>Type<select name="type"><option value="">Tous</option>${tax.map((t) => `<option value="${t.project_type}" ${f.type === t.project_type ? "selected" : ""}>${esc(t.label)}</option>`).join("")}</select></label>
        <label>Formulaire<select name="form"><option value="">Tous</option>${["10-K", "10-Q", "8-K"].map((x) => `<option ${f.form === x ? "selected" : ""}>${x}</option>`).join("")}</select></label>
        <label>Statut<select name="status"><option value="">Tous</option>${Object.entries(STATUT).map(([k, v]) => `<option value="${k}" ${f.status === k ? "selected" : ""}>${v}</option>`).join("")}</select></label>
        <label>Ticker<input name="ticker" value="${esc(f.ticker)}"></label>
        <label>Du<input type="date" name="date_from" value="${esc(f.date_from)}"></label><label>Au<input type="date" name="date_to" value="${esc(f.date_to)}"></label>
        <label>Montant min<input type="number" name="min_amount" value="${esc(f.min_amount)}"></label>
        <label>Confiance min<input type="number" step="0.05" name="min_confidence" value="${esc(f.min_confidence)}"></label>
        <label>&nbsp;<span><button class="btn btn-sm">Filtrer</button> <button type="button" class="btn btn-ghost btn-sm" id="reset">Effacer</button></span></label></form>
      <div id="res"><div class="loading">Chargement…</div></div>`;
    $("#mf").addEventListener("submit", (e) => { e.preventDefault(); setQuery({ ...Object.fromEntries(new FormData(e.target)), sort: f.sort, order: f.order }); });
    $("#reset").addEventListener("click", () => (location.hash = "#/mentions"));
    const data = await api("/mentions", f);
    const cols = [
      { key: "filing_date", label: "Date", sortKey: "date" }, { key: "form_type", label: "Form." },
      { key: "ticker", label: "Ticker", sortKey: "ticker", render: (r) => `<a href="#/company/${esc(r.ticker)}"><b>${esc(r.ticker)}</b></a>` },
      { key: "project_name", label: "Projet / description", trunc: true, title: (r) => r.description, render: (r) => `<a href="#/mention/${esc(r.mention_id)}">${esc(r.project_name)}</a><div class="muted small">${esc(r.description)}</div>` },
      { key: "project_type", label: "Type", render: (r) => `<span class="pill pill-blue">${esc(tl(r.project_type))}</span>` },
      { key: "status", label: "Statut", render: (r) => stPill(r.status) }, { key: "section_name", label: "Section" },
      { key: "amount_usd", label: "Montant", num: true, sortKey: "amount", render: (r) => fmtUSD(r.amount_usd) },
      { key: "confidence", label: "Conf.", num: true, sortKey: "confidence", render: (r) => (r.confidence ?? 0).toFixed(2) },
    ];
    const res = $("#res");
    res.innerHTML = `<p class="muted">${fmtN(data.total)} mentions.</p>` + table(cols, data.items, { href: (r) => `#/mention/${r.mention_id}`, sort: f.sort, order: f.order }) + pager(data.total, f.limit, f.offset);
    bindTable(res, (k) => setQuery({ ...f, offset: 0, sort: k, order: f.sort === k && f.order === "desc" ? "asc" : "desc" }));
    res.querySelectorAll("[data-off]").forEach((b) => b.addEventListener("click", () => setQuery({ ...f, offset: b.dataset.off })));
  }

  /* ------------------------------------------------------------ entreprises */
  async function companies() {
    const { q } = hashParams();
    const f = { q: q.q || "", sector: q.sector || "", sort: q.sort || "projects", order: q.order || "desc", limit: 100, offset: +q.offset || 0 };
    const secs = await api("/sectors");
    view.innerHTML = `<div class="page-head"><div><h1>Entreprises</h1><p>500 sociétés du S&amp;P 500 et la taille de leur portefeuille de projets divulgués.</p></div></div>
      <form class="filters" id="cf"><label class="span2">Recherche<input name="q" value="${esc(f.q)}" placeholder="nom ou ticker"></label>
      <label>Secteur<select name="sector"><option value="">Tous</option>${secs.map((s) => `<option ${f.sector === s.sector ? "selected" : ""}>${esc(s.sector)}</option>`).join("")}</select></label>
      <label>&nbsp;<span><button class="btn btn-sm">Filtrer</button></span></label></form><div id="res"></div>`;
    $("#cf").addEventListener("submit", (e) => { e.preventDefault(); setQuery({ ...Object.fromEntries(new FormData(e.target)), sort: f.sort, order: f.order }); });
    const data = await api("/companies", f);
    const cols = [
      { key: "ticker", label: "Ticker", sortKey: "ticker", render: (r) => `<a href="#/company/${esc(r.ticker)}"><b>${esc(r.ticker)}</b></a>` },
      { key: "company_name", label: "Entreprise" }, { key: "sector", label: "Secteur" },
      { key: "n_projects", label: "Projets", num: true, sortKey: "projects", render: (r) => fmtN(r.n_projects) },
      { key: "n_mentions", label: "Mentions", num: true, sortKey: "mentions", render: (r) => fmtN(r.n_mentions) },
      { key: "n_types", label: "Types", num: true }, { key: "amount_usd", label: "Capital divulgué", num: true, sortKey: "amount", render: (r) => fmtUSD(r.amount_usd) },
      { key: "first_seen", label: "Période", render: (r) => `${esc(r.first_seen?.slice(0, 4))}–${esc(r.last_seen?.slice(0, 4))}` },
    ];
    const res = $("#res");
    res.innerHTML = table(cols, data.items, { href: (r) => `#/company/${r.ticker}`, sort: f.sort, order: f.order }) + pager(data.total, f.limit, f.offset);
    bindTable(res, (k) => setQuery({ ...f, offset: 0, sort: k, order: f.sort === k && f.order === "desc" ? "asc" : "desc" }));
    res.querySelectorAll("[data-off]").forEach((b) => b.addEventListener("click", () => setQuery({ ...f, offset: b.dataset.off })));
  }
  async function company(ident) {
    const d = await api("/companies/" + encodeURIComponent(ident));
    const c = d.company;
    view.innerHTML = `<div class="page-head"><div><div class="muted small"><a href="#/companies">Entreprises</a></div><h1>${esc(c.company_name)} <span class="muted">(${esc(c.ticker)})</span></h1>
      <p>${esc(c.sector || "")} · CIK ${esc(c.cik)} · ${fmtN(c.n_projects)} projets · ${fmtN(c.n_mentions)} mentions · ${esc(c.first_seen?.slice(0, 4))}–${esc(c.last_seen?.slice(0, 4))}</p></div>
      <div><a class="btn btn-ghost btn-sm" href="#/projects?ticker=${esc(c.ticker)}">Filtrer les projets</a> <a class="btn btn-ghost btn-sm" href="#/graph?node=${encodeURIComponent("C:" + c.cik)}">Graphe</a></div></div>
      <div class="kpis">${kpi(c.n_projects, "projets")}${kpi(c.n_mentions, "mentions")}${kpi(fmtUSD(c.amount_usd), "capital divulgué (Σ max)")}${kpi(d.by_type.length, "types de projets")}</div>
      <div class="grid g3">
        <div class="card"><h3>Par type</h3><div class="chart"><canvas id="c1"></canvas></div></div>
        <div class="card"><h3>Mentions par année</h3><div class="chart"><canvas id="c2"></canvas></div></div>
        <div class="card"><h3>Lieux, technologies, partenaires</h3>
          <div class="tags">${d.locations.map((x) => `<a class="tag t-loc" href="#/projects?ticker=${esc(c.ticker)}&location=${encodeURIComponent(x.location)}">${esc(x.location)} ${x.n}</a>`).join("")}</div><br>
          <div class="tags">${d.technologies.map((x) => `<a class="tag t-tech" href="#/projects?ticker=${esc(c.ticker)}&tech=${encodeURIComponent(x.technology)}">${esc(x.technology)} ${x.n}</a>`).join("")}</div><br>
          <div class="tags">${d.partners.map((x) => `<span class="tag t-part">${esc(x.partner)} ${x.n}</span>`).join("")}</div></div>
      </div>
      <h2 style="margin-top:18px">Portefeuille de projets (${fmtN(d.projects.length)})</h2><div id="res"></div>`;
    chart($("#c1"), { type: "bar", data: { labels: d.by_type.map((r) => r.label), datasets: [{ data: d.by_type.map((r) => r.n), backgroundColor: COL.bleu }] }, options: { indexAxis: "y", responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } });
    chart($("#c2"), { type: "bar", data: { labels: d.by_year.map((r) => r.year), datasets: [{ data: d.by_year.map((r) => r.n), backgroundColor: COL.or }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } });
    const res = $("#res"); res.innerHTML = table(PCOLS.filter((c) => c.key !== "ticker"), d.projects, { href: (r) => `#/project/${r.project_id}` }); bindTable(res);
  }

  /* ------------------------------------------------------------ graphe */
  async function graph() {
    const { q } = hashParams();
    view.innerHTML = `<div class="page-head"><div><h1>Graphe de connaissances</h1><p>32 226 nœuds (entreprises, projets, lieux, technologies, partenaires) et 33 176 arêtes <span class="mono">owns · located_in · uses</span>. Cherchez un nœud puis naviguez de voisin en voisin.</p></div></div>
      <form class="filters" id="gf"><label class="span2">Nœud<input name="q" value="${esc(q.q || "")}" placeholder="Texas, Tesla, batterie, AI…"></label>
      <label>Type<select name="type"><option value="">Tous</option>${["Company", "Project", "Location", "Technology", "Partner"].map((t) => `<option ${q.type === t ? "selected" : ""}>${t}</option>`).join("")}</select></label>
      <label>&nbsp;<span><button class="btn btn-sm">Chercher</button></span></label></form><div id="hits"></div><div id="node"></div>`;
    $("#gf").addEventListener("submit", (e) => { e.preventDefault(); const d = Object.fromEntries(new FormData(e.target)); location.hash = "#/graph?" + qs(d); });
    if (q.node) await showNode(q.node);
    else if (q.q) {
      const hits = await api("/graph/search", { q: q.q, type: q.type || "", limit: 60 });
      $("#hits").innerHTML = `<div class="card"><h3>${hits.length} nœuds</h3>${hits.map((h) => `<a class="node-chip nt-${esc(h.node_type)}" href="#/graph?node=${encodeURIComponent(h.node_id)}"><span class="nt">${esc(h.node_type)}</span>${esc(h.label)} <span class="muted small">· ${fmtN(h.degree)}</span></a>`).join("") || "<span class='muted'>Aucun résultat.</span>"}</div>`;
    } else {
      $("#hits").innerHTML = `<div class="card"><h3>Points d'entrée</h3><div>${[["L:texas", "Location"], ["L:china", "Location"], ["L:united states", "Location"], ["T:AI", "Technology"], ["T:Renewable Energy", "Technology"], ["T:Battery/Storage", "Technology"], ["T:Data Center", "Technology"], ["C:0001318605", "Company"], ["C:0000045012", "Company"]].map(([n, t]) => `<a class="node-chip nt-${t}" href="#/graph?node=${encodeURIComponent(n)}"><span class="nt">${t}</span>${esc(n.slice(2))}</a>`).join("")}</div></div>`;
    }
  }
  async function showNode(nodeId) {
    const d = await api("/graph/node/" + nodeId, { limit: 400 });
    const n = d.node; const props = safeJson(n.props);
    const groups = {}; d.edges.forEach((e) => ((groups[e.neighbor_type] ||= []).push(e)));
    const target = n.node_type === "Project" ? `<a class="btn btn-sm" href="#/project/${esc(n.node_id.slice(2))}">Fiche du projet</a>` : n.node_type === "Company" ? `<a class="btn btn-sm" href="#/company/${esc(n.node_id.slice(2))}">Fiche de l'entreprise</a>` : n.node_type === "Location" ? `<a class="btn btn-sm" href="#/projects?location=${encodeURIComponent(n.label)}">Projets à cet endroit</a>` : n.node_type === "Technology" ? `<a class="btn btn-sm" href="#/projects?tech=${encodeURIComponent(n.label)}">Projets avec cette technologie</a>` : `<a class="btn btn-sm" href="#/projects?partner=${encodeURIComponent(n.label)}">Projets avec ce partenaire</a>`;
    $("#node").innerHTML = `<div class="card"><div class="page-head"><div><span class="pill pill-blue">${esc(n.node_type)}</span> <h2 style="display:inline">${esc(n.label)}</h2><div class="muted small mono">${esc(n.node_id)} · degré ${fmtN(d.degree)}</div>
      ${props ? `<div class="small muted">${Object.entries(props).filter(([, v]) => v != null).map(([k, v]) => `${esc(k)} = <b>${esc(k.includes("amount") ? fmtUSD(v) : v)}</b>`).join(" · ")}</div>` : ""}</div><div>${target}</div></div>
      <svg class="svg-graph" id="svg"></svg>
      ${Object.entries(groups).map(([t, es]) => `<h3 style="margin-top:12px">${esc(t)} (${es.length})</h3><div>${es.slice(0, 200).map((e) => `<a class="node-chip nt-${esc(t)}" href="#/graph?node=${encodeURIComponent(e.neighbor_id)}"><span class="nt">${esc(e.rel)} ${e.direction === "out" ? "→" : "←"}</span>${esc(e.neighbor_label)}</a>`).join("")}${es.length > 200 ? `<span class="muted small"> … ${es.length - 200} de plus</span>` : ""}</div>`).join("") || "<p class='muted'>Ce nœud n'a pas d'arête (les partenaires ne sont pas encore reliés dans cette version du graphe).</p>"}</div>`;
    drawRadial($("#svg"), n, d.edges.slice(0, 48));
  }
  function safeJson(s) { if (!s) return null; try { return typeof s === "string" ? JSON.parse(s) : s; } catch { return null; } }
  function drawRadial(svg, center, edges) {
    const W = svg.clientWidth || 900, H = 520, cx = W / 2, cy = H / 2;
    const colors = { Company: COL.bleu, Project: COL.violet, Location: COL.orange, Technology: COL.teal, Partner: COL.or };
    const n = edges.length; const R = Math.min(W, H) / 2 - 70;
    let s = `<g>`;
    edges.forEach((e, i) => { const a = (2 * Math.PI * i) / n - Math.PI / 2; const x = cx + R * Math.cos(a), y = cy + R * Math.sin(a); s += `<line x1="${cx}" y1="${cy}" x2="${x}" y2="${y}"></line>`; });
    edges.forEach((e, i) => { const a = (2 * Math.PI * i) / n - Math.PI / 2; const x = cx + R * Math.cos(a), y = cy + R * Math.sin(a); const lab = e.neighbor_label.length > 28 ? e.neighbor_label.slice(0, 26) + "…" : e.neighbor_label; const anchor = Math.cos(a) > 0.2 ? "start" : Math.cos(a) < -0.2 ? "end" : "middle"; s += `<a href="#/graph?node=${encodeURIComponent(e.neighbor_id)}"><circle cx="${x}" cy="${y}" r="6" fill="${colors[e.neighbor_type] || COL.gris}"></circle><text x="${x + 10 * Math.cos(a)}" y="${y + 10 * Math.sin(a) + 4}" text-anchor="${anchor}">${esc(lab)}</text></a>`; });
    s += `<circle cx="${cx}" cy="${cy}" r="14" fill="${colors[center.node_type] || COL.gris}" stroke="#fff" stroke-width="3"></circle><text x="${cx}" y="${cy + 30}" text-anchor="middle" font-weight="700">${esc(center.label.slice(0, 40))}</text></g>`;
    svg.setAttribute("viewBox", `0 0 ${W} ${H}`); svg.innerHTML = s;
  }

  /* ------------------------------------------------------------ recherche sémantique */
  async function semantic() {
    const { q } = hashParams();
    view.innerHTML = `<div class="page-head"><div><h1>Recherche sémantique</h1><p>Décrivez un projet en langage naturel (anglais recommandé, langue des filings) : la requête est encodée avec all-MiniLM-L6-v2 et comparée aux 19 227 vecteurs de projets.</p></div></div>
      <form class="filters" id="sf"><label class="span2" style="grid-column:span 3">Requête<input name="q" value="${esc(q.q || "")}" placeholder="ex. battery cell factory in the United States, AI platform for banks, LNG export terminal…"></label>
      <label>&nbsp;<span><button class="btn btn-sm">Chercher</button></span></label></form><div id="res"></div>`;
    $("#sf").addEventListener("submit", (e) => { e.preventDefault(); location.hash = "#/semantic?" + qs(Object.fromEntries(new FormData(e.target))); });
    if (!q.q) { $("#res").innerHTML = `<div class="examples">${["gigafactory for battery cells", "generative AI assistant for customers", "offshore wind farm", "ERP migration to SAP S/4HANA", "new hospital or clinical trial for oncology drug", "data center campus in Virginia", "restructuring plan with plant closures"].map((x) => `<button data-q="${esc(x)}">${esc(x)}</button>`).join("")}</div>`; $("#res").querySelectorAll("button").forEach((b) => b.addEventListener("click", () => (location.hash = "#/semantic?q=" + encodeURIComponent(b.dataset.q)))); return; }
    $("#res").innerHTML = `<div class="loading">Encodage et recherche…</div>`;
    try {
      const d = await api("/search/semantic", { q: q.q, k: 40 });
      const cols = [{ key: "score", label: "Score", num: true, render: (r) => `<span class="score">${(r.score * 100).toFixed(1)} %</span>` }, ...PCOLS.filter((c) => !["avg_confidence", "first_seen"].includes(c.key))];
      const res = $("#res"); res.innerHTML = table(cols, d.items, { href: (r) => `#/project/${r.project_id}` }); bindTable(res);
    } catch (e) { $("#res").innerHTML = `<div class="warn">${esc(e.message)}</div><p class="muted">La similarité entre projets reste disponible sur chaque fiche (« Projets similaires »), car elle n'utilise que les vecteurs déjà stockés.</p>`; }
  }

  /* ------------------------------------------------------------ SQL */
  const SQL_EXAMPLES = [
    ["Projets par type", "select project_type, count(*) n, round(sum(total_amount_usd)/1e9,1) capital_gusd\nfrom projects group by 1 order by n desc"],
    ["Centres de données > 500 M$", "select ticker, project_name, canonical_location, total_amount_usd, first_seen\nfrom projects where project_type='data_center' and total_amount_usd > 5e8\norder by total_amount_usd desc"],
    ["Mentions IA par année", "select year(filing_date) y, count(*) n\nfrom project_mentions where project_type='ai_initiative' group by 1 order by 1"],
    ["Technologies les plus citées", "select lower(t) technology, count(*) n\nfrom projects, unnest(technologies) as u(t) group by 1 order by n desc limit 25"],
    ["Partenaires de Tesla", "select p partner, count(*) n from project_mentions, unnest(partners) as u(p)\nwhere ticker='TSLA' group by 1 order by n desc"],
    ["Durée de suivi médiane par type", "select project_type, median(last_year-first_year) mediane_annees, count(*) n\nfrom projects where last_year>=first_year group by 1 order by 2 desc"],
    ["Graphe : lieux les plus connectés", "select n.label, count(*) degre from kg_edges e join kg_nodes n on n.node_id=e.dst\nwhere e.rel='located_in' group by 1 order by 2 desc limit 20"],
    ["Texte 10-K : sections les plus longues", "select s.accession_number, s.section_name, s.word_count\nfrom spid_sections s order by word_count desc limit 10"],
  ];
  async function sqlPage() {
    const schema = await api("/schema");
    const saved = localStorage.getItem("pdb_sql") || SQL_EXAMPLES[0][1];
    view.innerHTML = `<div class="page-head"><div><h1>Bac à sable SQL</h1><p>DuckDB en lecture seule sur les 7 tables de la base. SELECT / WITH / DESCRIBE / SUMMARIZE ; 20 s et 5 000 lignes au maximum. ⌘⏎ pour exécuter.</p></div></div>
      <div class="sql-layout"><div class="card schema"><h3>Schéma</h3>${schema.map((t) => `<details ${t.table === "projects" ? "open" : ""}><summary>${esc(t.table)} <span class="muted">(${fmtN(t.rows)})</span></summary><ul>${t.columns.map((c) => `<li>${esc(c.name)} <span>${esc(c.type)}</span></li>`).join("")}</ul></details>`).join("")}</div>
      <div><textarea class="sql" id="sql">${esc(saved)}</textarea>
        <div class="examples">${SQL_EXAMPLES.map((e, i) => `<button data-i="${i}">${esc(e[0])}</button>`).join("")}</div>
        <div style="display:flex;gap:10px;align-items:center;margin:6px 0 12px"><button class="btn" id="run">Exécuter</button><label class="small muted">Limite <input class="inp" id="lim" type="number" value="500" min="1" max="5000" style="width:90px"></label><button class="btn btn-ghost btn-sm" id="csv" disabled>Télécharger CSV</button><span class="muted small" id="info"></span></div>
        <div id="out"></div></div></div>`;
    const ta = $("#sql");
    view.querySelectorAll(".examples button").forEach((b) => b.addEventListener("click", () => { ta.value = SQL_EXAMPLES[b.dataset.i][1]; run(); }));
    let last = null;
    async function run() {
      const sql = ta.value; localStorage.setItem("pdb_sql", sql);
      $("#out").innerHTML = `<div class="loading">Exécution…</div>`; $("#info").textContent = "";
      try {
        const r = await fetch(API + "/sql", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sql, limit: +$("#lim").value || 500 }) });
        const d = await r.json();
        if (!r.ok) throw new Error(d.detail || r.statusText);
        last = d;
        $("#info").textContent = `${fmtN(d.rows.length)} lignes${d.truncated ? " (tronqué)" : ""} · ${d.elapsed_ms} ms`; $("#csv").disabled = false;
        $("#out").innerHTML = `<div class="table-wrap"><table><thead><tr>${d.columns.map((c) => `<th>${esc(c)}</th>`).join("")}</tr></thead><tbody>${d.rows.map((row) => `<tr>${row.map((v) => `<td class="${typeof v === "number" ? "num" : ""}">${esc(Array.isArray(v) ? v.join(" | ") : typeof v === "object" && v ? JSON.stringify(v) : v)}</td>`).join("")}</tr>`).join("")}</tbody></table></div>`;
      } catch (e) { $("#out").innerHTML = `<div class="err">${esc(e.message)}</div>`; }
    }
    $("#run").addEventListener("click", run);
    ta.addEventListener("keydown", (e) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") run(); });
    $("#csv").addEventListener("click", () => { if (!last) return; const csv = [last.columns.join(",")].concat(last.rows.map((r) => r.map((v) => `"${String(Array.isArray(v) ? v.join("|") : v ?? "").replace(/"/g, '""')}"`).join(","))).join("\n"); const a = document.createElement("a"); a.href = URL.createObjectURL(new Blob([csv], { type: "text/csv" })); a.download = "pdb_query.csv"; a.click(); });
    run();
  }

  /* ------------------------------------------------------------ à propos */
  async function about() {
    view.innerHTML = `<div class="prose"><h1>La base SPID et son pipeline</h1>
      <p><b>SPID</b> (<i>SEC Project Intelligence Database</i>) reconstruit le portefeuille de projets stratégiques des grandes sociétés cotées américaines à partir du texte brut de leurs documents réglementaires (10-K annuels, 10-Q trimestriels, 8-K d'événements) déposés auprès de la SEC sur EDGAR. Plutôt que de lire ces filings comme des documents financiers, SPID les traite comme une source d'intelligence sur les <i>projets</i> : usines, centres de données, acquisitions, programmes de R&amp;D, initiatives d'IA, transition énergétique…</p>
      <h2>D'où viennent les données</h2>
      <ul><li><b>Univers</b> : les 500 sociétés du S&amp;P 500 (instantané 2026), chacune reliée à son identifiant SEC (CIK).</li>
      <li><b>Corpus</b> : 134 124 dépôts (103 927 8-K, 22 542 10-Q, 7 655 10-K) téléchargés depuis l'API publique de la SEC, janvier 2010 → mai 2026, soit 88 Go de HTML brut, nettoyés et découpés en sections.</li>
      <li><b>Sections analysées</b> : 153 894 sections d'au moins 30 mots (les 10-K sont découpés par SPID en Items 1, 1A, 2, 7 et 7A ; les 8-K sont traités en une seule section).</li></ul>
      <h2>Comment fonctionne le pipeline</h2>
      <ol><li><b>Ingestion</b> des 10-K bruts (nettoyage HTML, découpage en Items).</li>
      <li><b>Extraction</b> par grand modèle de langage (gpt-4o-mini, température 0, JSON strict) : un pré-filtre lexical écarte les sections sans signal de projet, une fenêtre de focalisation limite le texte envoyé ; le modèle renvoie nom, type (taxonomie de 21 catégories), description, objectif, statut, montant, lieux, technologies, partenaires, bénéfices, risques, années et confiance. Les mentions sous 0,45 de confiance sont écartées.</li>
      <li><b>Résolution</b> : les mentions sont fusionnées en projets par entreprise × type × ancre (première localisation ou premier mot significatif du nom) ; chaque projet reçoit une chronologie, un statut courant, le montant maximal divulgué et des dates de première et dernière observation.</li>
      <li><b>Graphe de connaissances</b> : entreprises, projets, lieux, technologies et partenaires reliés par <span class="mono">owns</span>, <span class="mono">located_in</span>, <span class="mono">uses</span>.</li>
      <li><b>Embeddings</b> : chaque projet est encodé en 384 dimensions (all-MiniLM-L6-v2) pour la recherche sémantique et les projets similaires.</li></ol>
      <h2>Ce que contient la base</h2>
      <p>39 930 mentions, 19 227 projets, 39 930 points de chronologie, 32 226 nœuds et 33 176 arêtes, 19 227 vecteurs, 27 164 sections 10-K en texte intégral. Un fichier DuckDB de 2,9 Go, interrogeable ici en SQL.</p>
      <h2>Limites à garder en tête</h2>
      <ul><li>SPID mesure la <i>divulgation</i> de projets, non les projets eux-mêmes ; les incitations à divulguer varient selon les secteurs.</li>
      <li>Les montants sont auto-déclarés, hétérogènes en portée et absents pour la moitié des projets ; quelques valeurs aberrantes subsistent.</li>
      <li>L'extraction par LLM comporte des faux positifs et négatifs ; la résolution est heuristique (elle peut scinder ou fusionner à tort).</li>
      <li>Les années citées (first_year / last_year) peuvent inclure des horizons projetés ; préférez first_seen / last_seen pour dater l'observation.</li></ul>
      <p>Le <a href="/report.pdf" target="_blank">rapport technique complet (PDF)</a> détaille la provenance, chaque étape du pipeline, le schéma et le portrait statistique. Équipe : Manel Kammoun, Charli Tandja Mbianda, Simon-Pierre Boucher — Département des sciences administratives, Université du Québec en Outaouais.</p></div>`;
  }

  /* ------------------------------------------------------------ routeur */
  const routes = { "": dashboard, projects, companies, mentions, graph, semantic, sql: sqlPage, api: () => window.PDBPlayground.render({ view, api, esc, fmtN, fmtUSD, qs, toast, tl }), about };
  async function render() {
    destroyCharts();
    const { parts } = hashParams();
    const r = parts[0];
    document.querySelectorAll("#nav a[data-route]").forEach((a) => a.classList.toggle("active", a.dataset.route === r));
    $("#burger") && $(".side").classList.remove("open");
    window.scrollTo(0, 0);
    try {
      if (r === "project" && parts[1]) await project(parts[1]);
      else if (r === "company" && parts[1]) await company(parts[1]);
      else if (r === "mention" && parts[1]) await mention(parts[1]);
      else if (routes[r]) await routes[r]();
      else view.innerHTML = `<div class="card"><h2>Page introuvable</h2><a href="#/">Retour au tableau de bord</a></div>`;
    } catch (e) { view.innerHTML = `<div class="err">Erreur : ${esc(e.message)}</div>`; }
  }
  async function init() {
    try { const tax = await api("/taxonomy"); tax.forEach((t) => (TYPE[t.project_type] = t.label)); } catch { }
    try { const h = await fetch("/health").then((r) => r.json()); $("#kpi-projects").textContent = fmtN(h.projects) + " projets"; $("#side-status").textContent = `service ${h.status} · sémantique : ${h.semantic}`; } catch { $("#side-status").textContent = "service indisponible"; }
    fetch("/report.pdf", { method: "HEAD" }).then((r) => { if (!r.ok) $("#report-link").remove(); }).catch(() => { });
    $("#global-search").addEventListener("submit", (e) => { e.preventDefault(); const v = $("#global-q").value.trim(); if (v) location.hash = "#/projects?q=" + encodeURIComponent(v); });
    document.addEventListener("keydown", (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); $("#global-q").focus(); } });
    $("#burger").addEventListener("click", () => $(".side").classList.toggle("open"));
    window.addEventListener("hashchange", render);
    render();
  }
  init();
})();