import{i as e,n as t}from"./lit-BrYIQVuc.js";import{L as n,W as r}from"./index-DDypcwfe.js";var i=new Set([`openclaw-workspace`,`openclaw-extra`]);function a(a){var c;let l=(((c=a.mySkillsReport)==null?void 0:c.skills)??[]).filter(e=>e.extra!==void 0||i.has(e.source)),u=l.filter(e=>!e.disabled),d=l.filter(e=>e.disabled);return e`
    <div class="sc">
      <!-- 技能中心 tab -->
      ${a.tab===`center`?e`
            <!-- Filter row: categories + search -->
            <div class="sc__filter-row">
              <div class="sc__cats">
                <button
                  class="sc__cat ${a.selectedCategory===null?`sc__cat--active`:``}"
                  @click=${()=>a.onCategoryChange(null)}
                >
                  全部
                </button>
                ${(a.categories??[]).map(t=>e`
                    <button
                      class="sc__cat ${a.selectedCategory===t.id?`sc__cat--active`:``}"
                      @click=${()=>a.onCategoryChange(t.id)}
                    >
                      ${t.name}
                    </button>
                  `)}
              </div>
              <div class="sc__search-wrap">
                <span class="sc__search-icon">${n.search}</span>
                <input
                  class="sc__search"
                  type="search"
                  placeholder="搜索技能…"
                  .value=${a.searchQuery}
                  @input=${e=>a.onSearchChange(e.target.value)}
                />
              </div>
            </div>

            <!-- Error banner -->
            ${a.itemError?e`<div class="sc__error">
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="8" x2="12" y2="12" />
                    <line x1="12" y1="16" x2="12.01" y2="16" />
                  </svg>
                  <span>${a.itemError}</span>
                </div>`:t}

            <!-- Store grid -->
            <div class="sc__body">
              ${a.storeSkillsLoading?e`<div class="sc__loading">
                    <span class="sc__spinner-lg"></span>
                  </div>`:(()=>{let t=a.searchQuery.toLowerCase(),r=(a.storeSkills??[]).filter(e=>!(a.selectedCategory!==null&&e.categoryId!==a.selectedCategory||t&&!e.title.toLowerCase().includes(t)&&!e.name.toLowerCase().includes(t)&&!e.description.toLowerCase().includes(t)));return r.length===0?e`<div class="sc__empty">
                          ${n.zap}
                          <p class="sc__empty-title">暂无可用技能</p>
                          <p class="sc__empty-sub">尝试调整分类或搜索关键词</p>
                        </div>`:e`<div class="sc__grid">
                          ${r.map(e=>o(e,a))}
                        </div>`})()}
            </div>
          `:t}

      <!-- 我的技能 tab -->
      ${a.tab===`mine`?e`
            <div class="sc__body">
              ${a.mySkillsLoading&&l.length===0?e`<div class="sc__loading">
                    <span class="sc__spinner-lg"></span>
                  </div>`:l.length===0?e`
                      <div class="sc__empty">
                        ${n.zap}
                        <p class="sc__empty-title">暂无已安装的技能</p>
                        <p class="sc__empty-sub">前往技能中心浏览并安装你需要的技能</p>
                        <button class="sc__empty-link" @click=${a.onNavigateToCenter}>
                          前往技能中心
                        </button>
                      </div>
                    `:e`
                      ${u.length>0?e`
                            <section class="sc__section">
                              <h2 class="sc__section-title">
                                已启用
                                <span class="sc__section-count">${u.length}</span>
                              </h2>
                              <div class="sc__grid">
                                ${r(u,e=>e.skillKey,e=>s(e,a))}
                              </div>
                            </section>
                          `:t}
                      ${d.length>0?e`
                            <section class="sc__section">
                              <h2 class="sc__section-title">
                                已停用
                                <span class="sc__section-count">${d.length}</span>
                              </h2>
                              <div class="sc__grid">
                                ${r(d,e=>e.skillKey,e=>s(e,a))}
                              </div>
                            </section>
                          `:t}
                    `}
            </div>
          `:t}
    </div>
  `}function o(r,i){var a;let o=i.installedSkillsMap.get(r.name),s=o!==void 0,c=o==null||(a=o.storeExtra)==null?void 0:a.currentVersion,l=s&&c!==void 0&&r.currentVersion!==c,u=i.itemBusy===r.name;return e`
    <div class="sc-card">
      <!-- Row 1: title + version badge + installed badge -->
      <div class="sc-card__top">
        <span class="sc-card__title">${r.title}</span>
        ${r.currentVersion?e`<span class="sc-card__version">v${r.currentVersion}</span>`:t}
        ${s?l?e`<span class="sc-card__badge--update">有新版本</span>`:e`<span class="sc-card__badge--installed">${n.check} 已下载</span>`:t}
      </div>
      <!-- Row 2: description -->
      ${r.description?e`<p class="sc-card__desc">${r.description}</p>`:t}
      <!-- Row 3: author + actions -->
      <div class="sc-card__bottom">
        <span class="sc-card__author">
          <svg
            width="10"
            height="10"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
          ${r.authorName||`SealSeek 商店`}${i.proMode&&o?e` (${o.source.replace(/^openclaw-/,``)})`:t}
        </span>
        <div class="sc-card__actions">
          ${s?e`
                <button
                  class="sc-card__btn ${l?`sc-card__btn--install`:`sc-card__btn--use`}"
                  ?disabled=${u}
                  @click=${()=>i.onUseSkill(r)}
                >
                  ${u?e`<span class="sc-card__btn-spinner"></span>`:n.zap}
                  ${l?`更新`:`使用`}
                </button>
                <button
                  class="sc-card__btn sc-card__btn--uninstall"
                  ?disabled=${u}
                  @click=${()=>i.onUninstallByName(r.name)}
                  title="卸载"
                >
                  ${n.trash}
                </button>
              `:e`
                <button
                  class="sc-card__btn sc-card__btn--install"
                  ?disabled=${u||i.itemBusy!=null}
                  @click=${()=>i.onUseSkill(r)}
                >
                  ${u?e`<span class="sc-card__btn-spinner"></span> 安装中`:`使用`}
                </button>
              `}
        </div>
      </div>
    </div>
  `}function s(r,a){var o,s,c,l,u;let d=a.itemBusy===r.name,f=i.has(r.source),p=(o=a.storeSkills)==null?void 0:o.find(e=>{var t;return e.id===((t=r.extra)==null?void 0:t.id)}),m=(s=r.storeExtra)==null?void 0:s.currentVersion,h=!!p&&m!==void 0&&m!==p.currentVersion,g=((c=r.extra)==null?void 0:c.title)??r.name,_=((l=r.extra)==null?void 0:l.description)??r.description,v=(u=r.extra)==null?void 0:u.currentVersion,y=r.extra?r.extra.authorName||`SealSeek 商店`:`自定义`;return e`
    <div class="sc-card ${r.disabled?`sc-card--disabled`:``}">
      <!-- Row 1: title + version badge + installed/update badge | toggle -->
      <div class="sc-card__top">
        <span class="sc-card__title">${g}</span>
        ${v?e`<span class="sc-card__version">v${v}</span>`:t}
        ${h?e`<span class="sc-card__badge--update">有新版本</span>`:t}
        <label
          class="sc-my-card__toggle sc-card__toggle-push"
          title="${r.disabled?`启用`:`停用`}"
        >
          <input
            type="checkbox"
            class="sc-my-card__toggle-input"
            .checked=${!r.disabled}
            @change=${e=>a.onToggleSkill(r.skillKey,e.target.checked)}
          />
          <span class="sc-my-card__toggle-track"></span>
        </label>
      </div>
      <!-- Row 2: description -->
      ${_?e`<p class="sc-card__desc">${_}</p>`:t}
      <!-- Row 3: author + actions -->
      <div class="sc-card__bottom">
        <span class="sc-card__author">
          <svg
            width="10"
            height="10"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
          ${y}${a.proMode?e` (${r.source.replace(/^openclaw-/,``)})`:t}
        </span>
        <div class="sc-card__actions">
          ${h&&p?e`
                <button
                  class="sc-card__btn sc-card__btn--install"
                  ?disabled=${d}
                  @click=${()=>a.onUseSkill(p)}
                >
                  ${d?e`<span class="sc-card__btn-spinner"></span>`:n.zap} 更新
                </button>
              `:r.disabled?t:e`
                  <button
                    class="sc-card__btn sc-card__btn--use"
                    ?disabled=${d}
                    @click=${()=>a.onUseInstalledSkill(r)}
                  >
                    ${n.zap} 使用
                  </button>
                `}
          ${f?t:e`
                <button
                  class="sc-card__btn sc-card__btn--uninstall"
                  ?disabled=${d}
                  @click=${()=>a.onUninstallSkill(r.skillKey)}
                  title="卸载"
                >
                  ${n.trash}
                </button>
              `}
        </div>
      </div>
    </div>
  `}export{a as renderSkillCenter};
//# sourceMappingURL=skill-center-NGfVqvA6.js.map