@if (feedService.loading()) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)] md:h-screen">
    <div class="flex items-center justify-between gap-3 px-4 py-2.5 border-b border-edge shrink-0 bg-canvas">
      <div class="flex items-center gap-2 min-w-0">
        <p-skeleton width="4rem" height="0.75rem"/>
        <span class="text-fg-faint">/</span>
        <p-skeleton width="10rem" height="1rem"/>
      </div>
      <p-skeleton width="3.5rem" height="1.25rem" borderRadius="1rem"/>
    </div>
    <div class="flex gap-2 px-4 py-3 border-b border-surface">
      @for (_ of [1,2,3,4]; track $index) {
        <p-skeleton width="5rem" height="1rem"/>
      }
    </div>
    @if (activeTab() === 'Overview') {
      <div class="flex-1 p-6 space-y-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          @for (_ of [1,2,3,4]; track $index) {
            <div class="border border-surface rounded-lg p-4">
              <p-skeleton width="60%" height="0.75rem" class="mb-2"/>
              <p-skeleton width="40%" height="1.5rem"/>
            </div>
          }
        </div>
        <p-card>
          <p-skeleton width="8rem" height="1rem" class="mb-4"/>
          <p-skeleton width="100%" height="3rem"/>
        </p-card>
      </div>
    }
  </div>
} @else {
  @let feed = feedService.selectedFeed();
  @if (feed) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)] md:h-screen">
    <app-page-header
      [title]="feed.display_name"
      [subtitle]="scheduleLabel(feed.schedule)"
      [breadcrumb]="[{ label: 'Feeds', routerLink: '/feeds' }]"
    >
      <div actions>
        <p-tag
          [value]="feed.is_active ? 'Active' : 'Inactive'"
          [severity]="feed.is_active ? 'success' : 'secondary'"
          [rounded]="true"
        />
      </div>
    </app-page-header>

    <div class="flex-1 min-h-0 overflow-y-auto">
      <!-- ─── Compact metric strip — always visible, hairline dividers ─── -->
      @let f = feedService.selectedFeed();
      @if (f) {
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-px bg-edge border-b border-edge">
          <div class="bg-canvas px-4 py-3">
            <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Last Run</div>
            <div class="flex items-center gap-2">
              <span class="text-lg font-mono tabular-nums font-semibold">{{ lastRunRelative() || '—' }}</span>
              @if (f.last_run_status) {
                <p-tag [value]="f.last_run_status" [severity]="statusSeverity(f.last_run_status)" [rounded]="true"/>
              }
            </div>
          </div>
          <div class="bg-canvas px-4 py-3">
            <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Success Rate</div>
            <div class="text-lg font-mono tabular-nums font-semibold">{{ successRate() }}</div>
          </div>
          <div class="bg-canvas px-4 py-3">
            <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Avg Duration</div>
            <div class="text-lg font-mono tabular-nums font-semibold">{{ runStats().avgDuration }}</div>
          </div>
          <div class="bg-canvas px-4 py-3">
            <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Avg Records</div>
            <div class="text-lg font-mono tabular-nums font-semibold">{{ runStats().avgRecords }}</div>
          </div>
        </div>
      }

      <!-- ─── Tabs — full-width strip aligned with content below.
           Metric strip above provides border-b; no extra border-t needed. -->
      <div class="sticky top-0 bg-canvas z-10">
        <p-tabs [value]="activeTab()" (valueChange)="onTabChange($any($event))">
          <p-tablist>
            @for (tab of tabs; track tab) {
              <p-tab [value]="tab">{{ tab }}</p-tab>
            }
          </p-tablist>
        </p-tabs>
      </div>

      <!-- Overview Tab -->
      @if (activeTab() === 'Overview') {
        <div class="px-4 lg:px-6 py-4 lg:py-6 space-y-4">
          <!-- Run breakdown summary line -->
          <p class="text-sm text-fg-muted">
            Total <span class="font-semibold text-fg">{{ f?.total_runs ?? 0 }}</span>@if (recentRuns().length > 0) {<span class="mx-3 text-fg-faint">·</span>Of last {{ recentRuns().length }}: <span class="font-semibold text-positive">{{ overviewStats().completed }}</span> completed, <span class="font-semibold text-negative">{{ overviewStats().failed }}</span> failed@if (overviewStats().running > 0) {, <span class="font-semibold text-warning">{{ overviewStats().running }}</span> running}}
          </p>

          <!-- Activity: day-grouped run pills -->
          <p-card>
            <div class="flex items-center justify-between mb-3">
              <span class="font-semibold">Activity</span>
              @if (recentRuns().length > 0) {
                <span class="text-xs text-fg-muted">Last {{ recentRuns().length }} runs</span>
              }
            </div>
            @if (runsLoading()) {
              <div class="space-y-3">
                <p-skeleton width="12rem" height="0.75rem"/>
                <p-skeleton width="100%" height="3.5rem"/>
              </div>
            } @else if (recentRuns().length > 0) {
              <app-feed-activity-timeline
                [runs]="recentRuns()"
                (runClick)="onPillClick($event)"/>
            } @else {
              <div class="text-sm text-fg-muted py-4 text-center">
                No runs yet. This feed may be triggered externally or has not run.
              </div>
            }
          </p-card>

          <p-card header="Lineage">
            <div class="flex flex-col items-center justify-center h-40 text-center gap-2">
              <span class="text-sm text-fg-muted">Upstream &amp; downstream viz</span>
              <span class="text-xs text-fg-faint">Coming soon</span>
            </div>
          </p-card>

          @if (hasErrors()) {
            <p-card header="Recent Errors">
              <app-data-table
                [columns]="errorColumns"
                [value]="runStats().recentErrors"
                [showPaginator]="false"
                [fillHeight]="false"
                [rowClickRoute]="navigateToError"
                emptyMessage="No recent errors"/>
            </p-card>
          }
        </div>
      }

      <!-- Runs Tab -->
      @if (activeTab() === 'Runs') {
        <app-feed-runs-tab [feedId]="feedId"/>
      }

      <!-- Universe Tab -->
      @if (activeTab() === 'Universe') {
        <app-universe-panel
          [universeBaseUrl]="'/feeds/' + feedId"
          [excludeFeedId]="feedId"
          [restrictToFeedId]="feedId"
          [restrictMode]="feedScopeMode()"
          subtitle="Instruments and composites this feed covers."
          (addInstruments)="onAddInstruments($event)"
          (addComposites)="onAddComposites($event)"
          (removeInstrument)="removeUniverseItem($event)"
          (removeComposite)="removeCompositeItem($event)"
          (toggleInstrumentActive)="onToggleInstrumentActive($event)"
          (toggleCompositeActive)="onToggleCompositeActive($event)"/>
      }

      <!-- Configuration Tab -->
      @if (activeTab() === 'Configuration') {
        <div class="max-w-5xl mx-auto px-4 lg:px-6 py-4 lg:py-6 space-y-4">
          @if (feed.description) {
            <p-card header="Description">
              <p class="text-sm">{{ feed.description }}</p>
            </p-card>
          }

          <app-field-panel header="Identity" [fields]="identityFields()"/>
          <app-field-panel header="Source &amp; Scope" [fields]="sourceScopeFields()"/>
          <app-field-panel header="Schedule" [fields]="scheduleFields()"/>

          @if (feed.parameters || feed.parameter_schema) {
            <p-card header="Parameters">
              @if (feed.parameter_schema) {
                <app-schema-form
                  [schema]="feed.parameter_schema"
                  [data]="feed.parameters"
                  [readonly]="true"/>
              } @else {
                <pre class="text-xs font-mono text-fg-muted overflow-x-auto">{{ feed.parameters | json }}</pre>
              }
            </p-card>
          }

          @if (feed.data_schema) {
            <p-card header="Output Schema">
              @if (outputSchemaRows().length > 0) {
                <app-data-table
                  [columns]="outputSchemaColumns"
                  [value]="outputSchemaRows()"
                  [showPaginator]="false"
                  [fillHeight]="false"/>
              } @else {
                <p class="text-sm text-fg-muted">Schema metadata not available in tabular form.</p>
              }
              <details class="mt-4">
                <summary class="cursor-pointer text-xs text-fg-muted select-none hover:text-fg">
                  Raw schema JSON
                </summary>
                <pre class="text-xs font-mono text-fg-muted overflow-x-auto mt-2">{{ feed.data_schema | json }}</pre>
              </details>
            </p-card>
          }

          <app-field-panel header="Audit" [fields]="auditFields()"/>
        </div>
      }

    </div>
  </div>

  <app-universe-impact-dialog
    [(visible)]="impactDialogVisible"
    [entityLabel]="impactEntityLabel()"
    [entityName]="impactEntityName()"
    [impact]="impactReport()"
    [supportsDisable]="impactSupportsDisable()"
    [busy]="impactBusy()"
    (decision)="onImpactDecision($event)"/>
  }
}