@if (exchangeService.loading()) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)] md:h-screen">
    <!-- Header skeleton -->
    <div class="flex items-center gap-3 px-4 py-2 border-b border-surface shrink-0 bg-emphasis">
      <p-skeleton width="5rem" height="0.875rem"/>
      <span class="text-surface-300">|</span>
      <p-skeleton width="10rem" height="1.125rem"/>
      <p-skeleton width="3.5rem" height="1.375rem" borderRadius="1rem"/>
      <p-skeleton width="4rem" height="0.75rem"/>
    </div>
    <!-- Tab bar skeleton -->
    <div class="flex gap-2 px-4 py-3 border-b border-surface">
      @for (_ of [1,2,3,4,5]; track $index) {
        <p-skeleton width="5rem" height="1rem"/>
      }
    </div>

    <!-- Tab-specific content skeleton -->
    @if (activeTab() === 'Overview') {
      <div class="flex-1 overflow-y-auto p-6">
        <!-- Metric cards skeleton -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          @for (_ of [1,2,3,4]; track $index) {
            <p-card>
              <p-skeleton width="60%" height="0.75rem" class="mb-2"/>
              <p-skeleton width="40%" height="1.5rem"/>
            </p-card>
          }
        </div>
        <!-- Status breakdown + recent activity skeleton -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          @for (_ of [1,2]; track $index) {
            <p-card>
              <p-skeleton width="8rem" height="1rem" class="mb-4"/>
              @for (_ of [1,2,3,4,5]; track $index) {
                <div class="flex justify-between mb-3">
                  <p-skeleton width="35%" height="1rem"/>
                  <p-skeleton width="25%" height="1rem"/>
                </div>
              }
            </p-card>
          }
        </div>
      </div>
    } @else if (activeTab() === 'Orders' || activeTab() === 'Trades') {
      <div class="flex-1 flex flex-col min-h-0 p-6">
        <div class="flex items-center gap-2 mb-3">
          <p-skeleton width="8rem" height="1.125rem"/>
        </div>
        <div class="flex-1 flex flex-col min-h-0 rounded-lg border border-surface overflow-clip">
          <div class="flex items-center gap-4 px-4 border-b border-surface shrink-0" style="height:48px">
            @for (_ of skeletonRows(7); track $index) { <p-skeleton width="4rem" height="0.75rem"/> }
          </div>
          <div class="flex-1 overflow-hidden">
            @for (_ of skeletonRows(10); track $index) {
              <div class="flex items-center gap-4 px-4 border-b border-surface" style="height:42px">
                <p-skeleton width="5rem" height="1rem"/>
                <p-skeleton width="4rem" height="1.5rem" borderRadius="1rem"/>
                <p-skeleton width="6rem" height="1rem"/>
                <p-skeleton width="4rem" height="1rem"/>
                <p-skeleton width="5rem" height="1rem"/>
                <div class="flex-1"></div>
                <p-skeleton width="4rem" height="1.5rem" borderRadius="1rem"/>
              </div>
            }
          </div>
        </div>
      </div>
    } @else if (activeTab() === 'Universe') {
      <div class="flex-1 overflow-y-auto p-6">
        <div class="flex items-center justify-between mb-4">
          <div>
            <p-skeleton width="8rem" height="1rem" class="mb-1"/>
            <p-skeleton width="16rem" height="0.75rem"/>
          </div>
          <p-skeleton width="4rem" height="2rem" borderRadius="6px"/>
        </div>
        <p-card>
          <div class="flex gap-4 pb-3 border-b border-surface">
            @for (_ of [1,2,3,4]; track $index) {
              <p-skeleton width="5rem" height="0.75rem"/>
            }
          </div>
          @for (_ of [1,2,3,4,5]; track $index) {
            <div class="flex gap-4 py-3 border-b border-surface">
              <p-skeleton width="6rem" height="1rem"/>
              <p-skeleton width="5rem" height="1rem"/>
              <p-skeleton width="3rem" height="1rem"/>
              <p-skeleton width="4rem" height="1rem"/>
            </div>
          }
        </p-card>
      </div>
    } @else if (activeTab() === 'Configuration') {
      <div class="flex-1 overflow-y-auto p-6 max-w-3xl mx-auto">
        @for (_ of [1,2,3]; track $index) {
          <p-card class="mb-6">
            <p-skeleton width="6rem" height="1rem" class="mb-4"/>
            <div class="space-y-3">
              @for (_ of [1,2,3,4]; track $index) {
                <div class="flex justify-between">
                  <p-skeleton width="30%" height="1rem"/>
                  <p-skeleton width="40%" height="1rem"/>
                </div>
              }
            </div>
          </p-card>
        }
      </div>
    }
  </div>
} @else {
  @let exchange = exchangeService.selectedExchange();
  @if (exchange) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)] md:h-screen">
    <app-page-header
      [title]="exchange.display_name"
      [breadcrumb]="[{ label: 'Exchanges', routerLink: '/exchanges' }]"
    >
      <div actions>
        <p-tag
          [value]="exchange.is_active ? 'Active' : 'Inactive'"
          [severity]="exchange.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 ─── -->
      @if (stats(); as s) {
        <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">Total Orders</div>
            <div class="text-lg font-mono tabular-nums font-semibold">{{ s.total_orders }}</div>
          </div>
          <div class="bg-canvas px-4 py-3">
            <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Trade Legs</div>
            <div class="text-lg font-mono tabular-nums font-semibold">{{ s.total_trade_legs }}</div>
          </div>
          <div class="bg-canvas px-4 py-3">
            <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Realized P&L</div>
            <div [class]="'text-lg font-mono tabular-nums font-semibold ' + pnlClass(s.total_realized_pnl)">{{ formatCurrency(s.total_realized_pnl) }}</div>
          </div>
          <div class="bg-canvas px-4 py-3">
            <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Total Volume</div>
            <div class="text-lg font-mono tabular-nums font-semibold">{{ formatNumber(s.total_volume) }}</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') {
        @if (stats(); as s) {
          <div class="px-4 py-4 lg:px-6 lg:py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <p-card>
              <div class="text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-3 pb-2 border-b border-edge">Orders by Status</div>
              @if (s.orders_by_status && (s.orders_by_status | json) !== '{}') {
                <div class="space-y-2">
                  @for (entry of (s.orders_by_status | keyvalue); track entry.key) {
                    <div class="flex justify-between text-sm">
                      <span class="text-fg-muted">{{ entry.key }}</span>
                      <span class="font-semibold tabular-nums">{{ entry.value }}</span>
                    </div>
                  }
                </div>
              } @else {
                <p class="text-sm text-fg-muted">No orders yet.</p>
              }
            </p-card>

            <p-card>
              <div class="text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-3 pb-2 border-b border-edge">Recent Orders</div>
              @if (s.recent_orders.length > 0) {
                <div class="space-y-3">
                  @for (order of s.recent_orders; track order.id) {
                    <div class="flex items-center justify-between text-sm">
                      <div class="flex items-center gap-2">
                        <p-tag [value]="order.side" [severity]="order.side === 'BUY' ? 'success' : 'danger'" [rounded]="true"/>
                        <span class="truncate max-w-32">{{ order.instrument_name ?? 'Unknown' }}</span>
                      </div>
                      <div class="text-right">
                        <span class="text-fg-muted text-xs font-mono tabular-nums">{{ order.quantity }} @ {{ formatCurrency(order.price) }}</span>
                      </div>
                    </div>
                  }
                </div>
              } @else {
                <p class="text-sm text-fg-muted">No recent orders.</p>
              }
            </p-card>

            <p-card>
              <div class="text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-3 pb-2 border-b border-edge">Recent Trade Legs</div>
              @if (s.recent_trade_legs.length > 0) {
                <div class="space-y-3">
                  @for (leg of s.recent_trade_legs; track leg.id) {
                    <div class="flex items-center justify-between text-sm">
                      <div class="flex items-center gap-2">
                        <p-tag [value]="leg.direction" [severity]="leg.direction === 'LONG' ? 'success' : 'danger'" [rounded]="true"/>
                        <span class="truncate max-w-32">{{ leg.instrument_name ?? 'Unknown' }}</span>
                      </div>
                      <div class="text-right">
                        @if (leg.realized_pnl !== null) {
                          <span [class]="'font-semibold tabular-nums font-mono ' + pnlClass(leg.realized_pnl)">{{ formatCurrency(leg.realized_pnl) }}</span>
                        } @else {
                          <span class="text-fg-muted text-xs font-mono tabular-nums">{{ leg.quantity }} units</span>
                        }
                      </div>
                    </div>
                  }
                </div>
              } @else {
                <p class="text-sm text-fg-muted">No recent trade legs.</p>
              }
            </p-card>
          </div>
        }
      }

      <!-- Orders Tab -->
      @if (activeTab() === 'Orders') {
        <div class="px-4 lg:px-6 py-4 lg:py-6 flex flex-col" style="min-height: 30rem;">
          <h3 class="text-sm font-semibold mb-3 shrink-0">Orders</h3>
          <app-data-table class="flex-1 min-h-0"
            [columns]="orderColumns"
            [fetchPage]="ordersFetchPage()"
            emptyMessage="No orders on this exchange."/>
        </div>
      }

      <!-- Trades Tab -->
      @if (activeTab() === 'Trades') {
        <div class="px-4 lg:px-6 py-4 lg:py-6 flex flex-col" style="min-height: 30rem;">
          <h3 class="text-sm font-semibold mb-3 shrink-0">Trades</h3>
          <app-trade-table class="flex-1 min-h-0"
            [showStrategy]="true"
            [fetchPage]="tradesFetchPage()"/>
        </div>
      }

      <!-- Universe Tab (read-only, implicit from provider + instrument type) -->
      @if (activeTab() === 'Universe') {
        <div class="px-4 lg:px-6 py-4 lg:py-6 flex flex-col" style="min-height: 30rem;">
          <div class="flex items-center gap-4 mb-4 shrink-0">
            <div>
              <h3 class="font-semibold text-sm">Universe</h3>
              <p class="text-xs text-fg-faint mt-1">Instruments and composites implicitly available based on this exchange's provider and instrument type.</p>
            </div>
            <p-selectButton
              [options]="universeModeOptions"
              [ngModel]="universeMode()"
              (ngModelChange)="universeMode.set($event)"
              optionLabel="label"
              optionValue="value"
              size="small"/>
          </div>

          @if (universeMode() === 'instruments') {
            <app-data-table class="flex-1 min-h-0"
              [columns]="instrumentColumns"
              [fetchPage]="instrumentsFetchPage()"
              emptyMessage="No instruments match this exchange's provider and instrument type."/>
          } @else {
            <app-data-table class="flex-1 min-h-0"
              [columns]="compositeColumns"
              [fetchPage]="compositesFetchPage()"
              emptyMessage="No composites available."/>
          }
        </div>
      }

      <!-- Configuration Tab -->
      @if (activeTab() === 'Configuration') {
        <div class="max-w-3xl mx-auto px-4 lg:px-6 py-4 lg:py-6 space-y-4">
          <app-field-panel header="General" [fields]="generalFields()"/>

          @if (exchange.implementation_class) {
            <p-card header="Implementation">
              <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                  <span class="text-fg-muted">Class</span>
                  <span class="font-mono text-xs">{{ exchange.implementation_class }}</span>
                </div>
              </div>
            </p-card>
          }

          @if (exchange.config) {
            <p-card header="Configuration">
              <pre class="text-xs text-fg-muted font-mono overflow-x-auto">{{ exchange.config | json }}</pre>
            </p-card>
          }
        </div>
      }
    </div>
  </div>
  }
}