@if (!path()) {
  <section class="inspector" data-testid="inspector-view">
    <div class="empty-state" data-testid="inspector-empty-no-selection">
      <span class="empty-state__icon pi pi-eye"></span>
      <p class="empty-state__title">{{ texts.emptyNoSelection.title }}</p>
      <p class="empty-state__desc">{{ texts.emptyNoSelection.desc }}</p>
    </div>
  </section>
} @else if (!node()) {
  <section class="inspector" data-testid="inspector-view">
    <div class="empty-state" data-testid="inspector-empty-not-found">
      <span class="empty-state__icon empty-state__icon--warn pi pi-question-circle"></span>
      <p class="empty-state__title">{{ texts.emptyNotFound.title }}</p>
      <p class="empty-state__desc">
        <code>{{ path() }}</code>
        <span>{{ texts.emptyNotFound.descSuffix }}</span>
      </p>
    </div>
  </section>
} @else {
  @let n = node()!;
  @let fm = n.frontmatter;

  <!--
    The node's kind colour is bound onto `--accent` here so the hero and
    every `.sm-block` section rail inherit one hue per node. Falls back to
    the markdown kind var for kinds without a dedicated colour.
  -->
  <section
    class="inspector inspector--node"
    [style.--accent]="'var(--sm-kind-' + n.kind + ', var(--sm-kind-markdown))'"
    data-testid="inspector-view"
  >
    <sm-inspector-header
      [node]="n"
      [frontmatterInvalid]="frontmatterInvalid()"
      [activeTag]="activeTag()"
      (favoriteToggle)="onHeaderFavoriteToggle($event)"
      (tagClick)="tagSelect.emit($event)"
    />

    <!-- Scroll area: the fixed header above stays put while everything from
         the description down scrolls here. -->
    <div class="inspector__scroll" data-testid="inspector-scroll">
    @if (fm.description) {
      <p class="inspector__desc" data-testid="inspector-description" [innerHTML]="descriptionHtml()"></p>
    }

    <!--
      Action-dispatch errors are surfaced inline by each dispatcher
      (the `<sm-node-tags>` editor in the header, `<sm-node-action-button>`
      next to its button), so there is no separate banner here, it would
      double-render the same shared `ActionDispatchService.error()`.
    -->

    <!--
      Actions section. The action buttons (Set stability, Bump, and any
      plugin-contributed verb) arrive as contributions on
      `inspector.action.button`, dispatched through `ActionDispatchService`.
      Replaces the former always-visible toolbar: the section hides for a
      node with no action contributions (`hasActions`) and defaults
      expanded so the buttons stay reachable without a click.
    -->
    @if (hasActions()) {
      <sm-collapsible-section
        [title]="texts.sections.actions"
        [expanded]="expanded('actions')"
        toggleTestid="inspector-actions-toggle"
        (toggle)="toggleSection('actions')"
        data-testid="inspector-card-actions"
      >
        @if (expanded('actions')) {
          <div class="inspector__actions">
            <sm-view-contributions-host slot="inspector.action.button" [node]="n" />
          </div>
        }
      </sm-collapsible-section>
    }

    @if (issues().length > 0) {
      <sm-collapsible-section
        [title]="texts.sections.findings"
        [expanded]="expanded('findings')"
        toggleTestid="inspector-findings-toggle"
        (toggle)="toggleSection('findings')"
        data-testid="inspector-findings"
      >
        <span class="sm-block__count" smSectionTitleExtra>({{ issues().length }})</span>
        @if (expanded('findings')) {
          <ul class="inspector__findings-list">
            @for (issue of sortedIssues(); track $index) {
              <li
                class="inspector__finding"
                [attr.data-severity]="issue.severity"
                data-testid="inspector-finding"
              >
                <div class="inspector__finding-head">
                  <span
                    class="inspector__finding-severity"
                    [attr.data-severity]="issue.severity"
                    >{{ issue.severity }}</span
                  >
                  <code class="inspector__finding-analyzer">{{ issue.analyzerId }}</code>
                </div>
                <p class="inspector__finding-message">{{ issue.message }}</p>
                @if (issue.fix?.summary; as fixSummary) {
                  <p class="inspector__finding-hint" data-testid="inspector-finding-hint">
                    <strong>{{ texts.findingHintLabel }}</strong> {{ fixSummary }}
                  </p>
                }
              </li>
            }
          </ul>
        }
      </sm-collapsible-section>
    }

    @if (hasConnections()) {
      <sm-collapsible-section
        [title]="texts.sections.connections"
        [expanded]="expanded('connections')"
        toggleTestid="inspector-connections-toggle"
        (toggle)="toggleSection('connections')"
        data-testid="inspector-card-linked-nodes"
      >
        @if (expanded('connections')) {
          <sm-linked-nodes-panel [path]="n.path" (openPath)="openPath($event)" />
        }
      </sm-collapsible-section>
    }

    @if (hasVendorFrontmatter()) {
      <div class="inspector__vendor" data-testid="inspector-card-vendor-frontmatter">
        <sm-vendor-frontmatter
          [frontmatter]="fm"
          [kind]="n.kind"
          [provider]="n.provider"
          [bodyField]="bodyFieldForNode()"
          [skillPathByName]="skillPathByName()"
          [onSkillClick]="onSkillChip"
          [expanded]="expanded('definition')"
          (toggle)="toggleSection('definition')"
        />
      </div>
    }

    @if (hasAnnotations()) {
      <sm-collapsible-section
        [title]="texts.sections.annotations"
        [expanded]="expanded('annotations')"
        toggleTestid="inspector-annotations-toggle"
        (toggle)="toggleSection('annotations')"
        data-testid="inspector-card-annotations"
      >
        @if (sidecarFileName(); as sf) {
          <code class="inspector__sidecar-file" smSectionTitleExtra data-testid="inspector-sidecar-file">({{ sf }})</code>
        }
        @if (expanded('annotations')) {
          <sm-annotations-panel [overlay]="n.sidecar" />
        }
      </sm-collapsible-section>
    }

    @if (showBody()) {
      <sm-collapsible-section
        class="inspector__body-section"
        [title]="texts.sections.body"
        [expanded]="expanded('body')"
        toggleTestid="inspector-body-toggle"
        (toggle)="toggleSection('body')"
        data-testid="inspector-card-body"
      >
        @if (expanded('body')) {
          @switch (bodyState()) {
            @case ('loading') {
              <p class="inspector__body-status" data-testid="inspector-body-loading">{{ texts.body.loading }}</p>
            }
            @case ('ready') {
              @let raw = bodyView() === 'raw';
              <!--
                Raw / Rendered toggle. Lives inside the body content (not the
                section header, which is itself a button) so it only paints
                when the section is expanded. The label names the view it
                switches TO.
              -->
              <div class="inspector__body-view">
                <button
                  type="button"
                  class="inspector__body-view-toggle"
                  data-testid="inspector-body-view-toggle"
                  (click)="toggleBodyView()"
                  [pTooltip]="raw ? texts.body.view.showRenderedTooltip : texts.body.view.showRawTooltip"
                  [attr.aria-label]="raw ? texts.body.view.showRenderedTooltip : texts.body.view.showRawTooltip"
                >
                  <i
                    class="pi"
                    [class.pi-code]="!raw"
                    [class.pi-eye]="raw"
                    aria-hidden="true"
                  ></i>
                  <span>{{ raw ? texts.body.view.showRendered : texts.body.view.showRaw }}</span>
                </button>
              </div>
              @if (raw) {
                <!--
                  Read-only Markdown "editor" view: a line-number gutter plus
                  the source highlighted by highlight.js (`[innerHTML]` is the
                  SafeHtml from `MarkdownRenderer.highlightSource`, sanitized
                  by DOMPurify). Kept on single lines so the `<pre>` carries no
                  stray leading whitespace.
                -->
                <div class="inspector__body-raw" data-testid="inspector-body-raw">
                  <pre class="inspector__body-raw-gutter" aria-hidden="true">{{ rawLineNumbers() }}</pre>
                  <pre class="inspector__body-raw-code"><code class="hljs language-markdown" data-testid="inspector-body-raw-code" [innerHTML]="rawHighlightedHtml()"></code></pre>
                </div>
              } @else {
                <!--
                  `[innerHTML]` is intentional: `bodyHtml()` is the SafeHtml
                  output of `MarkdownRenderer.render()`, which already runs
                  two sanitization layers (`markdown-it` with `html: false` +
                  DOMPurify) over project-controlled markdown bytes.
                -->
                <div class="inspector__body-rendered" data-testid="inspector-body-rendered" [innerHTML]="bodyHtml()"></div>
              }
            }
          }
        }
      </sm-collapsible-section>
    }

    @if (hasPluginContributions()) {
      <sm-collapsible-section
        [title]="texts.sections.plugins"
        [expanded]="expanded('plugins')"
        toggleTestid="inspector-plugins-toggle"
        (toggle)="toggleSection('plugins')"
        data-testid="inspector-card-plugins"
      >
        @if (expanded('plugins')) {
          <sm-plugin-contributions [sidecarRoot]="sidecarRoot()" />
        }
      </sm-collapsible-section>
    }

    <!--
      Plugin view contributions, grouped ONE collapsible section per
      plugin (titled by the trusted pluginId, collapsed by default). The
      component groups the node's `inspector.body.panel.*` contributions
      by plugin, sorts sections by the plugin `order` and bricks by the
      extension `order`, and self-hides when no plugin contributed a body
      panel, so no wrapper / gate is needed.
    -->
    <sm-inspector-plugin-sections [node]="node()" />

    @if (hasMetadata()) {
      <sm-collapsible-section
        [title]="texts.sections.metadata"
        [expanded]="expanded('metadata')"
        toggleTestid="inspector-metadata-toggle"
        (toggle)="toggleSection('metadata')"
        data-testid="inspector-card-metadata"
      >
        @if (expanded('metadata')) {
          <div class="inspector__metadata" data-testid="inspector-metadata-section">
            <sm-inspector-audit-panel [sidecarRoot]="sidecarRoot()" />
            <sm-inspector-debug-panel
              [node]="n"
              [sidecarRoot]="sidecarRoot()"
              [overlay]="n.sidecar"
            />
          </div>
        }
      </sm-collapsible-section>
    }
    </div>

    <!--
      `.sm` write consent gate. Opened by `ActionDispatchService` when a
      dispatch hits a 412 `confirm-required` with
      `details.key === "allowEditSmFiles"`. The dialog reports the user's
      choice (accept / decline + "always allow") back to the service,
      which retries the parked dispatch with the right consent flags.
    -->
    <sm-sidecar-consent-dialog
      [open]="consentOpen()"
      (decision)="onConsentDecision($event)"
    />
  </section>
}