@if (tradeService.loading()) {
  <div class="flex flex-col h-[calc(100vh-3.5rem)] md:h-screen">
    <div class="flex items-center gap-3 px-4 py-2 border-b border-edge shrink-0">
      <p-skeleton width="5rem" height="0.875rem"/>
      <p-skeleton width="10rem" height="1.125rem"/>
    </div>
    <div class="flex-1 overflow-y-auto p-6 space-y-4">
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
        @for (_ of [1,2,3,4]; track $index) {
          <p-card><p-skeleton width="60%" height="0.625rem"/><p-skeleton width="80%" height="1.5rem"/></p-card>
        }
      </div>
      <p-skeleton width="100%" height="22rem"/>
      <p-skeleton width="100%" height="20rem"/>
    </div>
  </div>
} @else {
  @let trade = tradeService.selectedTrade();
  @if (trade) {
  <app-page-header
    [title]="trade.display_symbol"
    [breadcrumb]="[{ label: 'Trades', routerLink: '/trades' }]"
  >
    <div actions class="flex items-center gap-2">
      @for (tag of trade.tags; track tag) {
        <app-badge [label]="tag" />
      }
      @if (trade.current_status) {
        <app-badge [label]="trade.current_status" variant="status" />
      }
    </div>
  </app-page-header>

  <div class="flex-1 min-h-0 overflow-y-auto">
    <!-- ─── Compact metric strip — hairline-divider info bar ─── -->
    <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">Realized P&L</div>
        <div [class]="'text-lg font-mono tabular-nums font-semibold ' + tradeService.getPnlClass(trade.total_realized_pnl)">
          {{ tradeService.formatCurrency(trade.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">Unrealized P&L</div>
        <div [class]="'text-lg font-mono tabular-nums font-semibold ' + tradeService.getPnlClass(trade.total_unrealized_pnl)">
          {{ tradeService.formatCurrency(trade.total_unrealized_pnl) }}
        </div>
      </div>
      <div class="bg-canvas px-4 py-3">
        <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Total Fees</div>
        <div class="text-lg font-mono tabular-nums font-semibold">
          {{ tradeService.formatCurrency(trade.total_fees) }}
        </div>
      </div>
      <div class="bg-canvas px-4 py-3">
        <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-1">Legs</div>
        <div class="text-lg font-mono tabular-nums font-semibold">{{ trade.legs.length }}</div>
      </div>
    </div>

    <!-- ─── Hero row: chart + lifecycle on the left, Trade Info side panel
         on the right. Edge-to-edge — no outer padding, no gaps between
         panels. Selective borders avoid doubled hairlines: the metric
         strip above already supplies the top divider, so this section just
         adds border-b for the divider against the tab strip below. An
         internal border-r divides the columns; the chart's border-b
         divides it from the lifecycle. -->
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_18rem] border-b border-edge">
      <!-- LEFT column: chart + lifecycle stacked, divided by border-b on the chart -->
      <div class="flex flex-col min-w-0 lg:border-r lg:border-edge">
        <div class="bg-surface flex flex-col overflow-hidden border-b border-edge" style="height: 24rem;">
          <div class="px-3 py-2 border-b border-edge text-[11px] font-semibold uppercase tracking-wider text-fg-muted shrink-0">
            Run Context
          </div>
          <div class="flex-1 min-h-0 overflow-hidden">
            <app-run-context-chart
              class="block h-full"
              [strategyId]="trade.strategy_id"
              [strategyRunId]="trade.strategy_run_id"
              [tradeId]="trade.id"
              [start]="trade.entry_at"
              [end]="trade.exit_at"
              [currentStatus]="trade.current_status"
              [statuses]="trade.statuses"/>
          </div>
        </div>

        @if (lifecycleSteps().length > 0) {
          <div class="bg-surface px-4 py-4 flex-1 min-h-0">
            <div class="text-[11px] uppercase tracking-wider text-fg-faint mb-3">Lifecycle</div>
            <ol class="flex items-start">
            @for (step of lifecycleSteps(); track step.status; let last = $last; let i = $index) {
              <li class="flex-1 flex flex-col items-center min-w-0 relative">
                <!-- Connector line to next step (drawn behind the dot).
                     For off-path "failure trail" segments we use a solid
                     faded-red line so it harmonizes with the tiny red
                     skipped dots and the solid red terminus. For walked
                     happy-path segments it stays solid primary; for
                     unreached future segments on a happy-path trade it's
                     edge-colored. -->
                @if (!last) {
                  @if (step.jumpedNext) {
                    <span
                      class="absolute top-[5px] h-px bg-fg/40"
                      style="left: 50%; right: -50%;"></span>
                  } @else {
                    <span
                      class="absolute top-[5px] h-px"
                      [class.bg-primary]="step.reached && lifecycleSteps()[i + 1].reached"
                      [class.bg-edge]="!(step.reached && lifecycleSteps()[i + 1].reached)"
                      style="left: 50%; right: -50%;"></span>
                  }
                }
                <!-- Dot. The outer 12x12 span has bg-surface so the
                     connector line behind it is masked at each step
                     position — even for skipped slots where the inner
                     marker is smaller than the wrapper. The inner shape
                     varies: full bordered circle for normal/error/future,
                     small red dot for skipped. -->
                <span class="relative z-10 w-3 h-3 mb-2 rounded-full bg-surface flex items-center justify-center">
                  @if (step.skipped) {
                    <span class="w-1.5 h-1.5 rounded-full bg-fg/40"></span>
                  } @else {
                    <span class="w-full h-full rounded-full border-2"
                          [ngClass]="dotClasses(step)"></span>
                  }
                </span>
                <!-- Label + timestamp — exactly 2 lines so column heights
                     match across all states. The terminal slot at idx 4
                     swaps the label to the off-path status (CANCELLED, …)
                     when the trade went unhealthy; the dashed connector
                     leading into it shows where the trade jumped. -->
                <div
                  class="text-[11px] font-semibold uppercase tracking-wider text-center"
                  [class.text-fg]="step.reached && !step.current"
                  [class.text-primary]="step.current && step.kind === 'normal'"
                  [class.text-negative]="step.kind === 'error'"
                  [class.text-fg-faint]="!step.reached"
                >
                  {{ step.status }}
                </div>
                <div class="text-[10px] font-mono mt-0.5 text-center min-h-[1em]"
                     [class.text-fg-muted]="step.reached"
                     [class.text-fg-faint]="!step.reached">
                  @if (step.timestamp) {
                    {{ step.timestamp | date:'MMM d HH:mm:ss' }}
                  }
                </div>
              </li>
            }
          </ol>
            </div>
          }
        </div>

      <!-- RIGHT column: Trade Info side panel — spans the chart + lifecycle vertically. Edge-to-edge: no outer border, the column divider lives on the LEFT column's border-r. -->
      <div class="bg-surface flex flex-col min-h-0 min-w-0">
        <div class="px-3 py-2 border-b border-edge text-[11px] font-semibold uppercase tracking-wider text-fg-muted shrink-0">
          Trade Info
        </div>
        <div class="flex-1 overflow-y-auto p-4 space-y-5">
            <div class="space-y-2 text-sm">
              <div class="flex justify-between gap-3">
                <span class="text-fg-muted">Strategy</span>
                <a [routerLink]="['/strategies', trade.strategy_id]"
                   class="text-primary hover:underline truncate text-right">
                  {{ trade.strategy_name }}
                </a>
              </div>
              <div class="flex justify-between gap-3">
                <span class="text-fg-muted">Paper</span>
                <span>{{ trade.is_paper ? 'Yes' : 'No' }}</span>
              </div>
              <div class="flex justify-between gap-3">
                <span class="text-fg-muted">Entry</span>
                <span class="text-right">{{ trade.entry_at | date:'medium' }}</span>
              </div>
              @if (trade.exit_at) {
                <div class="flex justify-between gap-3">
                  <span class="text-fg-muted">Exit</span>
                  <span class="text-right">{{ trade.exit_at | date:'medium' }}</span>
                </div>
              }
              @if (trade.close_reason) {
                <div class="flex justify-between gap-3">
                  <span class="text-fg-muted">Close Reason</span>
                  <span class="text-right">{{ formatCloseReason(trade.close_reason) }}</span>
                </div>
              }
            </div>

            @if (trade.conditions.length > 0) {
              <div>
                <div class="text-[10px] uppercase tracking-wider text-fg-faint mb-2">
                  Strategy Conditions
                </div>
                <div class="space-y-2">
                  @for (cond of trade.conditions; track cond.id) {
                    <div class="text-xs">
                      <div class="flex items-center gap-2">
                        <app-badge [label]="cond.condition_type" />
                        @if (cond.is_met) {
                          <span class="w-1.5 h-1.5 rounded-full bg-positive shrink-0"></span>
                          <span class="text-fg-faint text-[10px]">{{ cond.met_at | date:'short' }}</span>
                        } @else {
                          <span class="w-1.5 h-1.5 rounded-full bg-fg-faint shrink-0"></span>
                          <span class="text-fg-faint text-[10px]">Pending</span>
                        }
                      </div>
                      <div class="text-fg-muted mt-1 font-mono text-[11px]">
                        {{ cond.attribute_name }} {{ cond.operator }} {{ cond.threshold_value }}
                      </div>
                    </div>
                  }
                </div>
              </div>
            }
          </div>
        </div>
      </div>

    <!-- ─── Tabs — full-width strip aligned with content below.
         Hero row above provides border-bottom; no extra border-t needed. -->
    <div class="sticky top-0 bg-canvas z-10">
      <p-tabs [value]="activeTab()" (valueChange)="onTabChange($any($event))">
        <p-tablist>
          <p-tab value="Orders">Orders</p-tab>
          <p-tab value="Source">Source</p-tab>
        </p-tablist>
      </p-tabs>
    </div>

    <!-- Tab Content -->
    @if (activeTab() === 'Orders') {
      <!-- Edge-to-edge tables. The legs table comes first (no header — the
           Orders tab itself signals "trade positions"); when executed
           orders exist, an "Orders" header bar separates and labels them
           below. -->
      <app-data-table
        [columns]="legColumns"
        [value]="trade.legs"
        [showPaginator]="false"
        [edgeToEdge]="true"
        [fillHeight]="false"/>

      @if (allOrders().length > 0) {
        <div class="px-3 py-2 border-y border-edge bg-canvas">
          <h3 class="text-[11px] font-semibold uppercase tracking-wider text-fg-muted">Orders</h3>
        </div>
        <app-data-table
          [columns]="orderColumns"
          [value]="allOrders()"
          [showPaginator]="false"
          [edgeToEdge]="true"
          [fillHeight]="false"/>
      }
    }

    @if (activeTab() === 'Source') {
      <div class="px-4 lg:px-6 py-4 lg:py-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
        <p-card header="Source Data">
          @if (sourceFeedRunsLoading()) {
            <p-skeleton width="100%" height="2rem"/>
          } @else if (sourceFeedRuns().length === 0) {
            <div class="text-sm text-fg-muted py-2">
              No feed-run provenance recorded.
            </div>
          } @else {
            <ul class="divide-y divide-edge -mx-4">
              @for (fr of sourceFeedRuns(); track fr.feed_run_id) {
                <li class="px-4 py-3 flex items-center justify-between gap-3">
                  <div class="flex items-center gap-2 min-w-0">
                    <a [routerLink]="['/feeds', fr.feed_id, 'runs', fr.feed_run_id]"
                       class="text-primary hover:underline truncate font-medium"
                       [title]="fr.feed_display_name">
                      {{ fr.feed_display_name }}
                    </a>
                    @if (fr.is_trigger) {
                      <p-tag value="trigger" severity="info" [rounded]="true"/>
                    }
                  </div>
                  <div class="flex items-center gap-3 shrink-0">
                    <p-tag [value]="fr.status" [severity]="statusSeverity(fr.status)" [rounded]="true"/>
                    <span class="text-xs text-fg-muted font-mono">{{ fr.snapshot_timestamp | date:'HH:mm:ss' }}</span>
                  </div>
                </li>
              }
            </ul>
          }
        </p-card>

        @if (trade.data_series.length > 0) {
          <p-card header="Data Series">
            <ul class="divide-y divide-edge -mx-4">
              @for (ds of trade.data_series; track ds.id) {
                <li class="px-4 py-3 flex items-center justify-between gap-3">
                  <span class="text-sm font-medium truncate">{{ ds.label || ds.attribute_name }}</span>
                  <span class="text-xs text-fg-muted font-mono shrink-0">{{ ds.data_source }}</span>
                </li>
              }
            </ul>
          </p-card>
        }
      </div>
    }
  </div>
  }
}