// screen_training_library.jsx — proprietary workflow skill library grouped for training
(function () {
  const { useState, useEffect, useMemo } = React;
  const h = React.createElement;
  window.Screens = window.Screens || {};
  const { Badge, PageHeader, Icon } = window;

  const STAGES = ["All", "Start"];
  const COLORS = ["#2f7fe0", "#12a877", "#6f5be6", "#d98a12", "#e0484d", "#0e9fba", "#8b5cf6", "#2f9e44", "#c2410c", "#2563eb", "#7c3aed", "#0f766e"];
  const MODE_LABEL = { function: "Teams" };
  const STAGE_TONE = { Start: "blue", Buy: "green", Extend: "violet", Build: "amber" };

  function textOf(v) { return String(v == null ? "" : v); }
  function useScenarioLang() {
    const [lang, setLang] = useState(window.I18N ? window.I18N.getLang() : "en");
    useEffect(() => { if (window.I18N) return window.I18N.onChange(setLang); }, []);
    return lang;
  }
  function scenarioText(v, lang) {
    const raw = textOf(v);
    if (!raw || lang === "en") return raw;
    const pack = window.SCENARIO_SKILLS_I18N || {};
    if (lang === "zh-Hans" && pack.zhHans && pack.zhHans[raw]) return pack.zhHans[raw];
    const map = pack.zhHant;
    const hant = (map && map[raw]) || raw;
    if (lang === "zh-Hans" && window.I18N && window.I18N.toHansText) return window.I18N.toHansText(hant);
    return hant;
  }
  function zhText(text, lang) {
    return lang === "zh-Hans" && window.I18N && window.I18N.toHansText ? window.I18N.toHansText(text) : text;
  }
  function uiText(v, lang) {
    if (lang === "en") return v;
    const t = window.I18N ? window.I18N.t(v) : v;
    return t !== v ? t : scenarioText(v, lang);
  }
  const AGENT_LAUNCH_INTENT_KEY = "emplix-agent-launch-intent";
  const SKILL_LIBRARY_BROWSE_KEY = "emplix-skill-library-browse-v1";
  function safeReadStorageJson(storage, key) {
    try { return JSON.parse(storage.getItem(key) || "null"); } catch (e) { return null; }
  }
  function safeWriteStorageJson(storage, key, value) {
    try { storage.setItem(key, JSON.stringify(value)); } catch (e) { /* best effort persistence */ }
  }
  function fallbackSkillArea(skills, mode) {
    return ((areaSummaries(skills, mode)[0] || {}).slug || ((skills[0] || {}).areaSlug || ""));
  }
  function normalizeSkillBrowseState(skills, raw) {
    if (!raw || !skills.length) return null;
    const mode = "function";
    const area = skills.some((s) => s.areaSlug === raw.area && s.areaType === mode) ? raw.area : fallbackSkillArea(skills, mode);
    const areaItems = skills.filter((s) => s.areaSlug === area);
    const availableCapabilities = unique(areaItems.flatMap((s) => capabilitiesOf(s)));
    const stage = raw.stage && (raw.stage === "All" || STAGES.indexOf(raw.stage) >= 0) ? raw.stage : "All";
    const capability = raw.capability && (raw.capability === "All" || availableCapabilities.indexOf(raw.capability) >= 0) ? raw.capability : "All";
    const selectedId = raw.selectedId && areaItems.some((s) => s.id === raw.selectedId) ? raw.selectedId : ((areaItems[0] || {}).id || "");
    return {
      mode,
      area,
      query: textOf(raw.query).slice(0, 160),
      stage,
      capability,
      selectedId,
      at: raw.at || Date.now(),
    };
  }
  function readSkillBrowseState(skills) {
    return normalizeSkillBrowseState(skills, safeReadStorageJson(localStorage, SKILL_LIBRARY_BROWSE_KEY));
  }
  function writeSkillBrowseState(skills, state) {
    const next = normalizeSkillBrowseState(skills, Object.assign({}, state, { at: Date.now() }));
    if (next) safeWriteStorageJson(localStorage, SKILL_LIBRARY_BROWSE_KEY, next);
    return next;
  }
  function recordAgentLaunchIntent(skill, status, browseState) {
    if (!skill) return;
    try {
      sessionStorage.setItem(AGENT_LAUNCH_INTENT_KEY, JSON.stringify({
        source: "training-library",
        skillId: skill.id,
        skillTitle: skill.title,
        area: skill.area,
        areaSlug: skill.areaSlug,
        status: status ? status.label : "Ready",
        workOrderId: status && status.workOrderId ? status.workOrderId : "",
        stepCount: (skill.steps || []).length,
        browseState: browseState || null,
        at: Date.now(),
      }));
    } catch (e) { /* best effort launch receipt */ }
  }
  function visibleText(n, lang) { return lang === "en" ? n + " visible" : zhText(n + " 項可見", lang); }
  function workflowStepsText(n, lang) { return lang === "en" ? n + " steps" : zhText(n + " 個步驟", lang); }
  function collectionSummaryText(lang) {
    return lang === "en"
      ? "Pick a task and try it with sample files."
      : zhText("選擇一項任務，並使用範例檔案試做。", lang);
  }
  function norm(v) { return textOf(v).toLowerCase(); }
  function unique(arr) { return Array.from(new Set(arr.filter(Boolean))); }
  function includesStage(skill, stage) { return stage === "All" || (skill.stage || []).indexOf(stage) >= 0; }
  function capabilitiesOf(skill) { return unique(skill.products || []).slice(0, 5); }
  function primaryCapability(skill) { return capabilitiesOf(skill)[0] || "Workspace Assistant"; }
  function stageLabel(skill, lang) { return (skill.stage && skill.stage.length) ? skill.stage.map((s) => scenarioText(s, lang)).join(" + ") : uiText("Use case", lang); }
  function stageTone(skill) { return STAGE_TONE[(skill.stage || [])[0]] || "neutral"; }
  function colorFor(slug, indexMap) { return COLORS[indexMap[slug] % COLORS.length]; }
  function areaSummaries(skills, mode) {
    const map = new Map();
    skills.filter((s) => s.areaType === mode).forEach((s) => {
      if (!map.has(s.areaSlug)) {
        map.set(s.areaSlug, { slug: s.areaSlug, name: s.area, type: s.areaType, count: 0, capabilities: new Set(), stages: new Set() });
      }
      const row = map.get(s.areaSlug);
      row.count += 1;
      capabilitiesOf(s).forEach((p) => row.capabilities.add(p));
      (s.stage || []).forEach((st) => row.stages.add(st));
    });
    return Array.from(map.values()).map((row) => Object.assign({}, row, {
      capabilities: Array.from(row.capabilities),
      stages: Array.from(row.stages),
    }));
  }
  function searchHit(skill, q, lang) {
    if (!q) return true;
    const steps = (skill.steps || []).map((s) => [s.title, s.detail, s.tool, s.outcome].join(" ")).join(" ");
    const localizedSteps = (skill.steps || []).map((s) => [s.title, s.detail, s.tool, s.outcome].map((v) => scenarioText(v, lang)).join(" ")).join(" ");
    const blob = [
      skill.title, skill.summary, skill.area, capabilitiesOf(skill).join(" "), (skill.stage || []).join(" "), steps,
      scenarioText(skill.title, lang), scenarioText(skill.summary, lang), scenarioText(skill.area, lang),
      capabilitiesOf(skill).map((p) => scenarioText(p, lang)).join(" "),
      (skill.stage || []).map((st) => scenarioText(st, lang)).join(" "),
      localizedSteps,
    ].join(" ");
    return norm(blob).indexOf(q) >= 0;
  }

  function CategoryRail({ skills, mode, area, setArea, colorIndex, lang }) {
    const rows = areaSummaries(skills, mode);
    return h("aside", { className: "sl-panel sl-rail", "data-skill-library-rail": "true", "data-skill-library-mode": mode },
      h("div", { className: "sl-rail-head" },
        h("div", { className: "sl-rail-title" }, uiText("Teams", lang)),
        h(Badge, { tone: "blue" }, "" + rows.length)),
      h("div", { className: "sl-cat-list" },
        rows.map((row) => h("button", {
          key: row.slug, type: "button", className: "sl-cat" + (row.slug === area ? " on" : ""),
          style: { "--cat": colorFor(row.slug, colorIndex) }, onClick: () => setArea(row.slug),
          title: scenarioText(row.name, lang) + " - " + row.count + " " + uiText("tasks", lang),
          "aria-pressed": row.slug === area ? "true" : "false",
          "data-skill-library-category": row.slug,
          "data-skill-library-mode": mode,
          "data-skill-library-active": row.slug === area ? "true" : "false",
          "data-skill-count": row.count,
        },
          h("span", { className: "sl-cat-swatch" }),
          h("span", { className: "sl-cat-name" }, scenarioText(row.name, lang)),
          h("span", { className: "sl-cat-count" }, row.count)))));
  }

  function FilterButton({ active, children, onClick, group, value }) {
    return h("button", {
      type: "button",
      className: "sl-filter-chip" + (active ? " on" : ""),
      "aria-pressed": active ? "true" : "false",
      "data-skill-filter": group,
      "data-skill-filter-value": value,
      "data-skill-filter-active": active ? "true" : "false",
      onClick,
    }, children);
  }

  function SkillCard({ skill, selected, color, onSelect, onLaunch, canLaunch, launchDeny, status, lang }) {
    const steps = skill.steps || [];
    const launchLabel = status ? uiText("Continue guide", lang) : uiText("Open guide", lang);
    const launchFromCard = (e) => {
      e.stopPropagation();
      if (!canLaunch || !onLaunch) return;
      onLaunch(skill);
    };
    return h("div", {
      className: "sl-card" + (selected ? " on" : ""),
      style: { "--cat": color },
      "data-skill-library-card": skill.id,
      "data-agent-skill-id": skill.id,
      "data-skill-status": status ? status.label : "Ready",
      "data-skill-step-count": steps.length,
      "data-skill-area": skill.areaSlug,
      "aria-pressed": selected ? "true" : "false",
      "data-skill-library-selected": selected ? "true" : "false",
      onClick: onSelect,
    },
      h("button", { type: "button", className: "sl-card-main", "data-skill-card-action": "select", onClick: (e) => { e.stopPropagation(); onSelect(); } },
        h("div", { className: "sl-card-foot", style: { paddingRight: 32 } },
          h(Badge, { tone: stageTone(skill) }, stageLabel(skill, lang)),
          status && h(Badge, { tone: status.tone }, status.label),
          h(Badge, { tone: skill.areaType === "function" ? "blue" : "green" }, scenarioText(skill.area, lang))),
        h("h3", null, scenarioText(skill.title, lang)),
        h("p", null, scenarioText(skill.summary, lang)),
        h("div", { className: "sl-card-foot" },
          h(Badge, { tone: "neutral" }, scenarioText(primaryCapability(skill), lang)),
          h(Badge, { tone: "neutral" }, workflowStepsText(steps.length, lang)))),
      h("button", {
        type: "button",
        className: "sl-card-launch",
        disabled: !canLaunch,
        title: !canLaunch ? launchDeny : launchLabel,
        "aria-label": launchLabel + " · " + scenarioText(skill.title, lang),
        "aria-disabled": canLaunch ? "false" : "true",
        "data-skill-card-launch": "agent-chat",
        "data-agent-skill-id": skill.id,
        "data-agent-existing-workorder-id": status && status.workOrderId ? status.workOrderId : "",
        "data-agent-launch-state": status ? "continue" : "new",
        onClick: launchFromCard,
      }, h(Icon, { name: status ? "message" : "play", size: 13 })));
  }

  function WorkflowSteps({ skill, lang }) {
    const steps = skill.steps || [];
    return h("div", null,
      steps.map((step, i) => h("div", { key: i, className: "sl-step" },
        h("span", { className: "sl-step-num" }, "" + (i + 1)),
        h("div", null,
          h("b", null, scenarioText(step.title, lang)),
          step.detail && h("p", null, scenarioText(step.detail, lang)),
          step.outcome && h("p", null, h("b", { style: { fontSize: 12 } }, uiText("Outcome: ", lang)), scenarioText(step.outcome, lang)),
          step.tool && h("span", { className: "sl-tool" }, h(Icon, { name: "checkCircle", size: 12 }), scenarioText(step.tool, lang))))));
  }

  function SkillDetail({ skill, color, status, canLaunch, launchDeny, onLaunch, onOpenWork, lang }) {
    if (!skill) {
      return h("aside", { className: "sl-panel sl-detail", "data-skill-library-detail-empty": "true" },
        h("div", { className: "sl-empty", style: { margin: 16 } }, uiText("No scenario selected.", lang)));
    }
    return h("aside", {
      className: "sl-panel sl-detail",
      style: { "--cat": color },
      "data-skill-library-detail": skill.id,
      "data-agent-skill-id": skill.id,
      "data-skill-status": status ? status.label : "Ready",
      "data-skill-step-count": (skill.steps || []).length,
    },
      h("div", { className: "sl-detail-head" },
        h("div", { className: "sl-card-foot" },
          status && h(Badge, { tone: status.tone }, status.label),
          h(Badge, { tone: stageTone(skill) }, stageLabel(skill, lang))),
        h("h2", null, scenarioText(skill.title, lang)),
        h("p", null, scenarioText(skill.summary, lang)),
        h("div", { className: "sl-card-foot", style: { marginTop: 12 } },
          h(Badge, { tone: skill.areaType === "function" ? "blue" : "green" }, scenarioText(skill.area, lang)),
          capabilitiesOf(skill).slice(0, 3).map((p) => h(Badge, { key: p, tone: "neutral" }, scenarioText(p, lang))))),
      h("div", { className: "sl-detail-body" },
        h("div", { className: "eyebrow", style: { marginBottom: 8 } }, uiText("Steps", lang)),
        h(WorkflowSteps, { skill, lang }),
        (skill.kpis || []).length > 0 && h("div", { className: "sl-kpis" },
          h("div", { className: "eyebrow" }, uiText("KPI themes", lang)),
          skill.kpis.slice(0, 4).map((k) => h("div", { key: k, className: "sl-kpi" },
            h(Icon, { name: "trendUp", size: 14, color: "var(--green)" }),
            h("span", null, scenarioText(k, lang))))),
        h("div", { className: "sl-action-row" },
          h("div", { className: "sl-readiness" }, status ? status.detail : uiText("Ready to try", lang)),
          h("div", { className: "row gap6 wrap", style: { justifyContent: "flex-end" } },
            status && status.workOrderId && h("button", { type: "button", className: "ac-chip", "data-skill-library-workorder": "true", "data-workorder-id": status.workOrderId, onClick: onOpenWork }, uiText("Task", lang)),
            h("button", {
              type: "button",
              className: "sl-launch",
              disabled: !canLaunch,
              title: !canLaunch ? launchDeny : undefined,
              "data-skill-launch": "agent-chat",
              "data-agent-skill-id": skill.id,
              "data-agent-existing-workorder-id": status && status.workOrderId ? status.workOrderId : "",
              "data-agent-launch-state": status ? "continue" : "new",
              onClick: onLaunch,
            },
              h(Icon, { name: "play", size: 13 }), status ? uiText("Continue guide", lang) : uiText("Open guide", lang))))));
  }

  function libraryWorkOrders(ctx, skill) {
    if (!skill) return [];
    const board = (ctx.office && ctx.office.workOrders) || {};
    return ["Intake", "Planning", "Running", "Needs Approval", "Completed"].flatMap((col) =>
      (board[col] || []).filter((wo) => wo.workflow && wo.workflow.skillId === skill.id).map((wo) => Object.assign({ col }, wo)));
  }
  function isLibraryApprovedWorkflow(wf, col) {
    return !!(wf && (wf.status === "approved" || wf.workflowState === "approved" || wf.approvalStatus === "approved")) || col === "Completed";
  }
  function libraryStatus(ctx, skill, lang) {
    const rows = libraryWorkOrders(ctx, skill).filter((wo) => !(wo.workflow && wo.workflow.cancelled));
    if (!rows.length) return null;
    rows.sort((a, b) => parseInt(String(b.id || "").replace("WO-", ""), 10) - parseInt(String(a.id || "").replace("WO-", ""), 10));
    const wo = rows[0];
    const wf = wo.workflow || {};
    const done = (wf.completedSteps || []).length;
    const total = wf.totalSteps || (skill.steps || []).length || 1;
    const approved = isLibraryApprovedWorkflow(wf, wo.col);
    const waiting = !approved && (!!wf.approvalId || wo.col === "Needs Approval");
    const revision = wf.approvalStatus === "rejected" || wf.status === "revision_required" || wf.workflowState === "revision";
    return {
      workOrderId: wo.id,
      tone: revision ? "amber" : waiting ? "amber" : approved ? "green" : "blue",
      label: revision ? (lang === "en" ? "Revision required" : zhText("需要修訂", lang)) : waiting ? uiText("Approval waiting", lang) : approved ? uiText("Complete", lang) : uiText("Running", lang),
      detail: (revision ? (lang === "en" ? "Returned. Restart the guide." : zhText("已退回。請重新開始指引。", lang)) : waiting ? uiText("A draft is waiting in My Desk.", lang) : approved ? (lang === "en" ? "Guide completed and approved." : zhText("指引已完成並批准。", lang)) : uiText("This task already has a guide.", lang)) + " " + wo.id + " · " + done + "/" + total + " " + uiText("steps", lang),
    };
  }
  function trainingArgSkill(skills, arg) {
    return arg ? skills.find((s) => s.id === arg) : null;
  }
  function trainingArgArea(skills, ctx, arg) {
    if (!arg) return null;
    const exactArea = skills.find((s) => s.areaSlug === arg);
    if (exactArea) return exactArea;
    const canonicalArea = { operations: "clerk", "customer-service": "cs", sales: "sales", communications: "social", finance: "acct" }[arg];
    return canonicalArea ? skills.find((s) => s.areaSlug === canonicalArea) : null;
  }

  function TrainingLibrary({ ctx }) {
    const lang = useScenarioLang();
    const skills = window.SCENARIO_SKILLS || [];
    const meta = window.SCENARIO_SKILL_META || {};
    const initialSkill = trainingArgSkill(skills, ctx.pageArg);
    const initialArg = initialSkill || trainingArgArea(skills, ctx, ctx.pageArg);
    const routeSavedBrowse = readSkillBrowseState(skills);
    const savedBrowse = routeSavedBrowse && (!initialArg || (initialSkill && routeSavedBrowse.selectedId === initialSkill.id) || (!initialSkill && initialArg && routeSavedBrowse.area === initialArg.areaSlug)) ? routeSavedBrowse : null;
    const [mode, setMode] = useState(initialArg ? initialArg.areaType : (savedBrowse ? savedBrowse.mode : "function"));
    const initialArea = initialArg ? initialArg.areaSlug : ((savedBrowse && savedBrowse.area) || fallbackSkillArea(skills, savedBrowse ? savedBrowse.mode : "function"));
    const [area, setArea] = useState(initialArea);
    const [query, setQuery] = useState(savedBrowse ? savedBrowse.query : "");
    const [stage, setStage] = useState(savedBrowse ? savedBrowse.stage : "All");
    const [capability, setCapability] = useState(savedBrowse ? savedBrowse.capability : "All");
    const [selectedId, setSelectedId] = useState(initialSkill ? initialSkill.id : ((savedBrowse && savedBrowse.selectedId) || ""));

    const colorIndex = useMemo(() => {
      const out = {};
      unique(skills.map((s) => s.areaSlug)).forEach((slug, i) => { out[slug] = i; });
      return out;
    }, [skills]);

    useEffect(() => {
      const skillHit = trainingArgSkill(skills, ctx.pageArg);
      const areaHit = skillHit || trainingArgArea(skills, ctx, ctx.pageArg);
      if (areaHit) {
        const saved = readSkillBrowseState(skills);
        const restoreSaved = saved && ((skillHit && saved.selectedId === skillHit.id) || (!skillHit && saved.area === areaHit.areaSlug));
        setMode(areaHit.areaType);
        setArea(areaHit.areaSlug);
        setSelectedId(skillHit ? skillHit.id : (restoreSaved ? saved.selectedId : ((skills.find((s) => s.areaSlug === areaHit.areaSlug) || {}).id || "")));
        setStage(restoreSaved ? saved.stage : "All");
        setCapability(restoreSaved ? saved.capability : "All");
        setQuery(restoreSaved ? saved.query : "");
        return;
      }
      if (!ctx.pageArg) {
        const saved = readSkillBrowseState(skills);
        if (saved) {
          setMode(saved.mode);
          setArea(saved.area);
          setQuery(saved.query);
          setStage(saved.stage);
          setCapability(saved.capability);
          setSelectedId(saved.selectedId);
        }
      }
    }, [ctx.pageArg]);

    const areaItems = skills.filter((s) => s.areaSlug === area);
    const capabilities = unique(areaItems.flatMap((s) => capabilitiesOf(s))).sort();
    const q = norm(query);
    const filtered = areaItems.filter((s) => includesStage(s, stage) && (capability === "All" || capabilitiesOf(s).indexOf(capability) >= 0) && searchHit(s, q, lang));
    const selected = filtered.find((s) => s.id === selectedId) || filtered[0] || null;

    useEffect(() => {
      if (selected && selected.id !== selectedId) setSelectedId(selected.id);
    }, [area, stage, capability, query, selected && selected.id]);

    const browseState = {
      mode,
      area,
      query,
      stage,
      capability,
      selectedId: selected ? selected.id : selectedId,
    };
    useEffect(() => {
      if (area) writeSkillBrowseState(skills, browseState);
    }, [mode, area, query, stage, capability, selected && selected.id]);

    function changeArea(next) {
      setArea(next);
      setStage("All");
      setCapability("All");
      setQuery("");
      const first = skills.find((s) => s.areaSlug === next);
      setSelectedId(first ? first.id : "");
      ctx.openPage("training", next);
    }

    const activeArea = areaSummaries(skills, mode).find((x) => x.slug === area) || { name: "Task Library", count: skills.length };
    const color = selected ? colorFor(selected.areaSlug, colorIndex) : colorFor(area, colorIndex);
    const filtersActive = !!query || stage !== "All" || capability !== "All";
    function resetBrowseFilters() {
      const first = skills.find((s) => s.areaSlug === area);
      const nextSelectedId = first ? first.id : "";
      writeSkillBrowseState(skills, Object.assign({}, browseState, {
        query: "",
        stage: "All",
        capability: "All",
        selectedId: nextSelectedId,
      }));
      setQuery("");
      setStage("All");
      setCapability("All");
      setSelectedId(nextSelectedId);
      ctx.openPage("training", area);
    }
    function launchSkill(skill) {
      if (!skill) return;
      if (!ctx.can("workOrder")) { if (ctx.showToast) ctx.showToast(ctx.denyReason("workOrder")); return; }
      const st = libraryStatus(ctx, skill, lang);
      const nextBrowse = Object.assign({}, browseState, {
        mode: skill.areaType || mode,
        area: skill.areaSlug || area,
        selectedId: skill.id,
      });
      writeSkillBrowseState(skills, nextBrowse);
      recordAgentLaunchIntent(skill, st, nextBrowse);
      ctx.openPage("agent", skill.id + (st && st.workOrderId ? "~" + st.workOrderId : ""));
    }

    return h("div", {
      "data-skill-library-persisted": "true",
      "data-skill-library-selected-id": selected ? selected.id : "",
    },
      h(PageHeader, {
        eyebrow: "Tasks", title: "Task Library", icon: "graduation",
        sub: "Pick a task and try it with sample files.",
      }),
      h("div", { className: "sl-shell" },
        h(CategoryRail, { skills, mode, area, setArea: changeArea, colorIndex, lang }),
        h("section", { className: "sl-main" },
          h("div", { className: "sl-panel sl-hero", "data-skill-library-active-mode": mode, "data-skill-library-active-area": area },
            h("div", null,
              h("div", { className: "sl-hero-title" },
                h(Badge, { tone: mode === "function" ? "blue" : "green" }, uiText(MODE_LABEL[mode], lang)),
                h("h2", null, scenarioText(activeArea.name, lang))),
              h("p", null, collectionSummaryText(lang))),
            h("div", { className: "sl-metrics" },
              h("div", { className: "sl-metric" }, h("b", null, meta.useCaseCount || skills.length), h("span", null, uiText("Tasks", lang))),
              h("div", { className: "sl-metric" }, h("b", null, meta.categoryCount || 5), h("span", null, uiText("Teams", lang))),
              h("div", { className: "sl-metric" }, h("b", null, meta.withWorkflowSteps || skills.length), h("span", null, uiText("Ready", lang))))),
          h("div", {
            className: "sl-panel sl-toolbar",
            "data-skill-library-toolbar": "true",
            "data-skill-library-visible-count": filtered.length,
            "data-skill-library-query": query,
            "data-skill-library-stage": stage,
            "data-skill-library-capability": capability,
            "data-skill-library-selected-id": selected ? selected.id : "",
          },
            h("div", { className: "sl-toolbar-head" },
              h("input", {
                className: "sl-search",
                type: "search",
                value: query,
                placeholder: "Search tasks",
                "aria-label": "Search tasks",
                "data-skill-library-search": "true",
                onChange: (e) => setQuery(e.target.value),
              }),
              h(Badge, { tone: "neutral" }, visibleText(filtered.length, lang)),
              h("button", {
                type: "button",
                className: "ac-chip",
                disabled: !filtersActive,
                "data-skill-library-reset": "true",
                "data-skill-library-reset-disabled": filtersActive ? "false" : "true",
                onClick: resetBrowseFilters,
              }, uiText("Reset filters", lang))),
          filtered.length === 0
            ? h("div", { className: "sl-empty", "data-skill-library-empty": "true" }, uiText("No tasks match your search.", lang))
            : h("div", { className: "sl-grid" }, filtered.map((skill) => h(SkillCard, {
                key: skill.id, skill, selected: selected && selected.id === skill.id,
                color: colorFor(skill.areaSlug, colorIndex), status: libraryStatus(ctx, skill, lang),
                onSelect: () => {
                  setSelectedId(skill.id);
                  writeSkillBrowseState(skills, Object.assign({}, browseState, { selectedId: skill.id }));
                  ctx.openPage("training", skill.id);
                },
                onLaunch: launchSkill,
                canLaunch: ctx.can("workOrder"),
                launchDeny: ctx.denyReason("workOrder"),
                lang,
              })))),
        h(SkillDetail, { skill: selected, color, status: libraryStatus(ctx, selected, lang), canLaunch: ctx.can("workOrder"), launchDeny: ctx.denyReason("workOrder"), lang,
          onOpenWork: () => { const st = libraryStatus(ctx, selected, lang); if (st && st.workOrderId) ctx.openPage("workorder", st.workOrderId); },
          onLaunch: () => launchSkill(selected) }))));
  }

  window.scenarioText = scenarioText;
  window.scenarioUiText = uiText;
  window.scenarioZhText = zhText;
  window.useScenarioLang = useScenarioLang;
  window.Screens.training = TrainingLibrary;
})();