@let n = node();
@let st = stats();
@let tagsList = visibleTagChips();
@let moreTags = moreTagsCount();

<div class="sm-gnode__main">
    <div class="sm-gnode__icon-box" aria-hidden="true">
      <sm-kind-icon [kind]="n.kind" [provider]="n.provider" [size]="18" />
    </div>

    <div class="sm-gnode__content">
      <div class="sm-gnode__name-row">
        <span class="sm-gnode__name" [pTooltip]="n.path">{{ displayName() }}</span>
        <!-- Phase 4 / View contribution system, card.title.right slot.
             Renders `node-icon` contributions immediately after the
             title, before the actions cluster (confidence pill,
             version, chevron). -->
        <sm-view-contributions-host slot="card.title.right" [node]="node()" />
      </div>
    </div>

    <div class="sm-gnode__actions">
      @if (version(); as v) {
        <span class="sm-gnode__name-version" data-testid="node-card-version">{{ v }}</span>
      }
      <button
        type="button"
        class="sm-gnode__chevron"
        [attr.aria-label]="texts.ariaExpand"
        (click)="toggleExpanded($event)"
      >
        <i class="pi pi-chevron-down" aria-hidden="true"></i>
      </button>
    </div>

    <div class="sm-gnode__sub">
      @if (tokensShort() !== null) {
        <span
          class="sm-gnode__sub-stat sm-gnode__sub-stat--tokens"
          [pTooltip]="texts.stats.tokens(st.tokensTotal!)"
        ><span class="sm-gnode__sub-key">T</span>{{ tokensShort() }}</span>
      }
      @if (bytesShort() !== null) {
        <span
          class="sm-gnode__sub-stat sm-gnode__sub-stat--bytes"
          [pTooltip]="texts.stats.bytes(st.bytesTotal!)"
        ><span class="sm-gnode__sub-key">B</span>{{ bytesShort() }}</span>
      }
      <button
        type="button"
        class="sm-gnode__favorite"
        [class.sm-gnode__favorite--on]="isFavorite()"
        [attr.aria-label]="isFavorite() ? texts.ariaFavoriteRemove : texts.ariaFavoriteAdd"
        [pTooltip]="isFavorite() ? texts.favoriteRemoveTooltip : texts.favoriteAddTooltip"
        (click)="toggleFavorite($event)"
        data-testid="node-card-favorite"
      >
        <i
          class="pi"
          [class.pi-star-fill]="isFavorite()"
          [class.pi-star]="!isFavorite()"
          aria-hidden="true"
        ></i>
      </button>
      <!-- Phase 4 / View contribution system, card.subtitle.left slot.
           Sits in the sub-row immediately after the date stat. Stays in
           the natural left-to-right flow; the favorite button after it
           keeps its `margin-left: auto` push to the right edge. -->
      <sm-view-contributions-host slot="card.subtitle.left" [node]="node()" />
    </div>
  </div>

  <!-- Tag chips (top 3 + "N more" overflow). Hidden when no tags.
       Tags are single-source (sidecar `annotations.tags`); the card
       renders one neutral chip style. Each chip is clickable: it selects
       every node carrying that tag on the map (same as the inspector
       header tags), emitting `tagClick` which the graph forwards to
       `onTagSelect`. The click stops propagation so it filters instead of
       selecting the node. -->
  @if (tagsList.length) {
    <div class="sm-gnode__tagrow" data-testid="node-card-tags">
      @for (tag of tagsList; track tag) {
        <button
          type="button"
          class="sm-gnode__tag-chip"
          (click)="onTagClick(tag, $event)"
          [attr.aria-label]="texts.tagFilterAriaLabel(tag)"
          data-testid="node-card-tag"
        >{{ tag }}</button>
      }
      @if (moreTags > 0) {
        <span class="sm-gnode__tag-more" data-testid="node-card-tags-more">{{ texts.tagOverflow(moreTags) }}</span>
      }
    </div>
  }

  <div class="sm-gnode__panel">
    <div class="sm-gnode__path" [pTooltip]="n.path" data-testid="node-card-path">
      <i class="fa-regular fa-folder-open sm-gnode__path-icon" aria-hidden="true"></i>
      <span class="sm-gnode__path-value">{{ n.path }}</span>
    </div>

    @if (hasLlmCluster()) {
      <div class="sm-gnode__llm">
        @if (summaryMarkdown(); as sn) {
          @if (sn.topics?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.topics.tooltip">{{ texts.llm.topics.label }}</span>
              <div class="sm-gnode__chips">
                @for (t of sn.topics; track t) {
                  <span class="sm-gnode__chip sm-gnode__chip--llm">{{ t }}</span>
                }
              </div>
            </div>
          }
          @if (sn.keyFacts?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.facts.tooltip">{{ texts.llm.facts.label }}</span>
              <div class="sm-gnode__chips">
                @for (f of sn.keyFacts; track f) {
                  <span class="sm-gnode__chip sm-gnode__chip--llm">{{ f }}</span>
                }
              </div>
            </div>
          }
        }
        @if (summaryAgent(); as sa) {
          @if (sa.whenToUse) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.when.tooltip">{{ texts.llm.when.label }}</span>
              <span>{{ sa.whenToUse }}</span>
            </div>
          }
          @if (sa.interactionStyle) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.style.tooltip">{{ texts.llm.style.label }}</span>
              <span>{{ sa.interactionStyle }}</span>
            </div>
          }
          @if (sa.capabilities?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.does.tooltip">{{ texts.llm.does.label }}</span>
              <div class="sm-gnode__chips">
                @for (c of sa.capabilities; track c) {
                  <span class="sm-gnode__chip sm-gnode__chip--llm">{{ c }}</span>
                }
              </div>
            </div>
          }
        }
        @if (summarySkill(); as ss) {
          @if (ss.recipe?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.steps.tooltip">{{ texts.llm.steps.label }}</span>
              <span>
                @for (r of ss.recipe; track r.step; let last = $last) {{{ r.step }}. {{ r.description }}{{ last ? '' : ' · ' }}}
              </span>
            </div>
          }
          @if (ss.preconditions?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.pre.tooltip">{{ texts.llm.pre.label }}</span>
              <div class="sm-gnode__chips">
                @for (p of ss.preconditions; track p) {
                  <span class="sm-gnode__chip sm-gnode__chip--llm">{{ p }}</span>
                }
              </div>
            </div>
          }
          @if (ss.outputs?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.out.tooltip">{{ texts.llm.out.label }}</span>
              <div class="sm-gnode__chips">
                @for (o of ss.outputs; track o) {
                  <span class="sm-gnode__chip sm-gnode__chip--llm">{{ o }}</span>
                }
              </div>
            </div>
          }
          @if (ss.sideEffects?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.fx.tooltip">{{ texts.llm.fx.label }}</span>
              <div class="sm-gnode__chips">
                @for (fx of ss.sideEffects; track fx) {
                  <span class="sm-gnode__chip sm-gnode__chip--llm">{{ fx }}</span>
                }
              </div>
            </div>
          }
        }
        @if (summaryCommand(); as sc) {
          @if (sc.invocationExample) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.eg.tooltip">{{ texts.llm.eg.label }}</span>
              <code class="sm-gnode__llm-code">{{ sc.invocationExample }}</code>
            </div>
          }
          @if (sc.sideEffects?.length) {
            <div class="sm-gnode__llm-line">
              <span class="sm-gnode__llm-label" [pTooltip]="texts.llm.fx.tooltip">{{ texts.llm.fx.label }}</span>
              <div class="sm-gnode__chips">
                @for (fx of sc.sideEffects; track fx) {
                  <span class="sm-gnode__chip sm-gnode__chip--llm">{{ fx }}</span>
                }
              </div>
            </div>
          }
        }
      </div>
    }

    @if (description()) {
      <div class="sm-gnode__desc" [innerHTML]="descriptionHtml()"></div>
    }

    <!-- Kind-specific meta block. Only renders rows that actually have a value. -->
    @if (fmAgent(); as fa) {
      @if (fa.model) {
        <div class="sm-gnode__meta">
          <div class="sm-gnode__meta-row">
            <span class="sm-gnode__meta-label">{{ texts.meta.model }}</span>
            <span class="sm-gnode__meta-value sm-gnode__meta-value--mono">{{ fa.model }}</span>
          </div>
        </div>
      }
    }
  </div>

  <div class="sm-gnode__footer">
    <!--
      View contribution system, card.footer.left.* sub-slots. Renders
      counter and tag contributions on the left side of the footer,
      sibling to the stats. Each sub-slot caps independently at
      SLOT_REGISTRY['card.footer.left.<shape>'].maxItems = 5; priority
      order with alphabetical tie-break. When `node.contributions` is
      empty (cold-start, demo mode, bulk-omitted), each host renders
      nothing.
    -->
    <sm-view-contributions-host slot="card.footer.left" [node]="node()" />
    <!-- View contribution system, `card.footer.right` slot. Receives
         the `stability` chips (experimental / deprecated) from the
         built-in `core/stability` extractor plus any third-party
         counters (`broken-ref`, `unknown-field`, `external-url-counter`,
         `annotation-stale`, …). The host stays silent when no
         contribution targets the slot, so the wrapper collapses to a
         zero-width inline-flex on cards without a matching chip. -->
    <div class="sm-gnode__footer-right-cluster">
      <sm-view-contributions-host slot="card.footer.right" [node]="node()" />
    </div>
  </div>