// Tasks: the taxonomy as a browser. Empty branches stay visible, so coverage gaps show.
import { sparkline } from "./charts.js";
import { color, dayLabel, empty, fmt, h, redraws, sectionHead, system } from "./util.js";

const leafKey = (domain, leaf) => `${domain}/${leaf}`;

/** Best agent, expert forecast and best TSFM on a task's live leaderboard. */
function headline(rows) {
  const best = (kind) => rows.filter((r) => system(r.system).kind === kind).sort((a, b) => a.scaled_crps - b.scaled_crps)[0];
  return [["Agent", best("agent")], ["Expert", best("expert")], ["TSFM", best("tsfm")]].filter(([, r]) => r);
}

function scoreMini(rows) {
  const lines = headline(rows);
  if (!lines.length) return h("span", { class: "muted small" }, "not scored yet");
  const max = d3.max(lines, ([, r]) => r.scaled_crps) * 1.1;
  return h("div", { class: "score-mini", title: "Scaled CRPS on live forecasts, common pairs; lower is better, 1 = seasonal naive" },
    lines.map(([label, r]) => h("div", { class: "row" },
      h("span", { title: system(r.system).label }, label),
      h("span", { class: "bar-track" }, h("span", { class: "bar-fill", style: { width: `${(r.scaled_crps / max) * 100}%`, background: color(r.system) } })),
      h("span", { class: "v" }, fmt.ratio(r.scaled_crps)))));
}

export function tasksPage(app, index, params) {
  const { taxonomy, tasks } = index;
  const domains = taxonomy.domains;
  const leafCount = d3.rollup(tasks, (v) => v.length, (t) => t.taxonomy);
  const domainCount = d3.rollup(tasks, (v) => v.length, (t) => t.taxonomy?.split("/")[0]);
  const leaves = domains.flatMap((d) => d.leaves.map((l) => ({ ...l, domain: d, key: leafKey(d.id, l.id) })));
  const covered = leaves.filter((l) => leafCount.get(l.key));
  const names = new Map(leaves.map((l) => [l.key, `${l.domain.name} › ${l.name}`]));
  const drivers = taxonomy.facets.driver;
  const state = { area: params.get("area") || "", q: params.get("q") || "", driver: params.get("driver") || "", tradable: params.get("tradable") || "" };

  const tree = h("nav", { class: "tree", "aria-label": "Taxonomy" });
  const toolbar = h("div", { class: "toolbar" });
  const listing = h("div");

  function save() {
    const query = new URLSearchParams(Object.entries(state).filter(([, v]) => v));
    history.replaceState(null, "", `#/tasks${query.size ? `?${query}` : ""}`);
  }

  function renderTree() {
    const pick = (area) => () => { state.area = state.area === area ? "" : area; save(); render(); };
    tree.replaceChildren(
      h("div", { class: "tree-head" }, h("span", { class: "eyebrow" }, "Taxonomy"),
        h("span", { class: "note" }, `${covered.length} of ${leaves.length} areas covered`)),
      h("div", { class: "coverage", title: `${covered.length} of ${leaves.length} areas have a task` },
        h("div", { style: { width: `${(covered.length / leaves.length) * 100}%` } })),
      h("button", { type: "button", "aria-pressed": String(!state.area), onclick: pick("") },
        h("span", {}, "All tasks"), h("span", { class: "count" }, String(tasks.length))),
      ...domains.flatMap((d) => [
        h("button", { type: "button", class: "domain", "aria-pressed": String(state.area === d.id), onclick: pick(d.id) },
          h("span", {}, d.name), h("span", { class: "count" }, String(domainCount.get(d.id) || 0))),
        d.leaves.map((l) => {
          const key = leafKey(d.id, l.id);
          const n = leafCount.get(key) || 0;
          return h("button", { type: "button", class: `leaf${n ? "" : " gap"}`, "aria-pressed": String(state.area === key), onclick: pick(key),
            title: n ? null : `Candidates: ${l.examples.join("; ")}` },
          h("span", {}, l.name), h("span", { class: "count" }, String(n)));
        }),
      ]).flat());
  }

  function matches(t) {
    if (state.area && !(t.taxonomy === state.area || t.taxonomy?.startsWith(`${state.area}/`))) return false;
    if (state.driver && t.driver !== state.driver) return false;
    if (state.tradable && String(Boolean(t.tradable)) !== state.tradable) return false;
    const q = state.q.trim().toLowerCase();
    return !q || [t.title, t.question, t.summary, t.region, names.get(t.taxonomy)].some((s) => s?.toLowerCase().includes(q));
  }

  function renderToolbar() {
    const facet = (key, value, text) => h("button", {
      type: "button", class: "chip", "aria-pressed": String(state[key] === value),
      onclick: () => { state[key] = state[key] === value ? "" : value; save(); render(); },
    }, text);
    const search = h("input", { class: "search", type: "search", placeholder: "Search tasks", value: state.q, "aria-label": "Search tasks" });
    search.addEventListener("input", () => { state.q = search.value; save(); renderListing(); });
    toolbar.replaceChildren(search,
      h("div", { class: "facets" },
        h("div", { class: "chips" }, h("span", { class: "facet-label" }, "Driver"), Object.entries(drivers).map(([id, text]) => facet("driver", id, text))),
        h("div", { class: "chips" }, h("span", { class: "facet-label" }, "Market"), facet("tradable", "false", "Not tradable"), facet("tradable", "true", "Tradable controls"))));
  }

  function renderListing() {
    const shown = tasks.filter(matches);
    const leaf = leaves.find((l) => l.key === state.area);
    if (!shown.length) {
      listing.replaceChildren(leaf
        ? h("div", { class: "gap-card" }, h("h4", {}, `No task in ${leaf.domain.name} › ${leaf.name} yet`),
          h("p", { class: "secondary small" }, `Candidate targets: ${leaf.examples.join("; ")}.`))
        : empty("No task matches these filters."));
      return;
    }
    listing.replaceChildren(h("div", { class: "card" }, h("div", { class: "table-wrap" }, h("table", {},
      h("thead", {}, h("tr", {}, h("th", { class: "col-task" }, "Task"), h("th", { class: "hide-sm" }, "Recent values"),
        h("th", { class: "hide-sm" }, "Run days"), h("th", {}, "Live scaled CRPS"))),
      h("tbody", {}, shown.map((t) => {
        const spark = h("div", { class: "chart", style: { width: "120px" } });
        redraws.push(() => sparkline(spark, { truth: t.truth }));
        const open = () => { location.hash = `#/t/${t.id}`; };
        return h("tr", { class: "link", onclick: open },
          h("td", { class: "col-task" }, h("a", { class: "task-title", href: `#/t/${t.id}`, onclick: (e) => e.stopPropagation() }, t.title),
            h("span", { class: "task-q" }, t.question),
            h("div", { class: "chips", style: { marginTop: "6px" } },
              h("span", { class: "chip" }, names.get(t.taxonomy) || "unclassified"),
              t.driver ? h("span", { class: "chip" }, drivers[t.driver]) : null,
              t.tradable ? h("span", { class: "chip" }, "tradable") : null,
              h("span", { class: "note" }, `${t.region} · ${t.unit}`))),
          h("td", { class: "hide-sm" }, spark, h("span", { class: "cell-sub" }, `last ${dayLabel(t.last_observed)}`)),
          h("td", { class: "nowrap hide-sm" }, h("div", {}, String(t.run_days)), h("span", { class: "cell-sub" }, t.live_since ? `since ${dayLabel(t.live_since)}` : "not started")),
          h("td", {}, scoreMini(t.leaderboard)));
      }))))));
    redraws.forEach((draw) => draw());
  }

  function render() {
    redraws.length = 0;
    renderTree();
    renderToolbar();
    renderListing();
  }

  const coverageTable = h("div", { class: "card" }, h("div", { class: "table-wrap" }, h("table", {},
    h("thead", {}, h("tr", {}, h("th", {}, "Domain"), h("th", { class: "num" }, "Areas covered"), h("th", { class: "num" }, "Tasks"), h("th", {}, "Open areas and candidate targets"))),
    h("tbody", {}, domains.map((d) => {
      const open = d.leaves.filter((l) => !leafCount.get(leafKey(d.id, l.id)));
      return h("tr", {},
        h("td", {}, h("strong", {}, d.name)),
        h("td", { class: "num" }, `${d.leaves.length - open.length} / ${d.leaves.length}`),
        h("td", { class: "num" }, String(domainCount.get(d.id) || 0)),
        h("td", { class: "small secondary" }, open.length
          ? open.map((l, i) => [i ? " · " : "", h("span", { title: l.examples.join("; ") }, l.name)])
          : h("span", { class: "muted" }, "all covered")));
    })))));

  const agents = index.systems.filter((s) => s.kind === "agent").length;
  app.replaceChildren(
    h("header", { class: "page-head" },
      h("span", { class: "eyebrow" }, "Tasks"),
      h("h1", {}, "Forecasting tasks"),
      h("p", { class: "lead" }, "Each task is a real series with an expert forecast to beat. Tasks are organised by a taxonomy of the systems that generate them; empty areas are gaps to fill."),
      h("div", { class: "stats" },
        [[tasks.length, "tasks"], [d3.sum(tasks, (t) => t.run_days), "run days"], [agents, "agents"],
          [`${covered.length} / ${leaves.length}`, "areas covered"]]
          .map(([v, l]) => h("div", { class: "stat" }, h("div", { class: "v" }, String(v)), h("div", { class: "l" }, l))))),
    h("section", { class: "section browser" }, tree, h("div", {}, toolbar, listing)),
    h("section", { class: "section" },
      sectionHead("coverage", "Coverage", "Tasks per domain of the taxonomy. Open areas list the targets that would fill them; the taxonomy itself is revised as tasks are added."),
      coverageTable));
  render();
}