<div class="timeline-component-wrapper" #fullscreenContainer [class.fullscreen]="isFullscreen">
  <div class="timeline-chart-area">
    <div class="y-axis-label">Memory Offset</div>
    <div class="canvas-container">
      <canvas #timelineCanvas
              (wheel)="onWheel($event)"
              (mousedown)="onMouseDown($event)"
              (mousemove)="onMouseMove($event)"
              (mouseup)="onMouseUp($event)"
              (mouseleave)="onMouseLeave()"></canvas>

      <div class="timeline-controls">
        <div class="search-container" [class.expanded]="showSearchInput">
          <input type="text"
                 #searchInput
                 *ngIf="showSearchInput"
                 class="search-input"
                 [value]="searchQuery"
                 (input)="onSearchInput($event)"
                 (keydown.enter)="onSearchEnter()"
                 placeholder="Search Op Name..."
                 (keydown.escape)="closeSearch()">
          <button class="control-btn" (click)="toggleSearch()" [title]="showSearchInput ? 'Close Search' : 'Search'">
            <mat-icon>{{showSearchInput ? 'close' : 'search'}}</mat-icon>
          </button>
        </div>

        <button class="control-btn" (click)="toggleFullscreen()" [title]="isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'">
          <mat-icon>{{isFullscreen ? 'fullscreen_exit' : 'fullscreen'}}</mat-icon>
        </button>
      </div>

      <div class="timeline-tooltip"
           *ngIf="hoveredBlock"
           [style.left.px]="tooltipLeft"
           [style.top.px]="tooltipTop">
        <div class="tooltip-row">
          <span class="tooltip-title">{{hoveredBlock.instructionName || hoveredBlock.label}}</span>
        </div>
        <hr class="tooltip-divider">
        <div class="tooltip-row" *ngIf="hoveredBlock.logicalBufferId !== undefined">
          <span class="tooltip-label">Buffer ID:</span>
          <span class="tooltip-value">{{hoveredBlock.logicalBufferId}}</span>
        </div>
        <div class="tooltip-row">
          <span class="tooltip-label">Size:</span>
          <span class="tooltip-value">{{(hoveredBlock.size / (1024 * 1024)).toFixed(2)}} MiB</span>
        </div>
        <div class="tooltip-row">
          <span class="tooltip-label">Unpadded:</span>
          <span class="tooltip-value">{{hoveredBlock.unpaddedSize ? (hoveredBlock.unpaddedSize / (1024 * 1024)).toFixed(2) : '0.00'}} MiB</span>
        </div>
        <div class="tooltip-row" *ngIf="hoveredBlock.shapeString">
          <span class="tooltip-label">Shape:</span>
          <span class="tooltip-value shape-value">{{hoveredBlock.shapeString}}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="x-axis-label">Heap Simulation Time (Program Order)</div>

  <div class="selected-block-card" *ngIf="selectedBlock">
    <div class="card-header">
      <h3>Op Name: {{selectedBlock.instructionName || selectedBlock.label}}</h3>
    </div>
    <div class="card-content">
      <div class="metadata-grid">
        <div class="metadata-item" *ngIf="selectedBlock.logicalBufferId !== undefined">
          <span class="metadata-label">Logical Buffer ID:</span>
          <span class="metadata-value">{{selectedBlock.logicalBufferId}}</span>
        </div>
        <div class="metadata-item" *ngIf="selectedBlock.shapeString">
          <span class="metadata-label">Shape:</span>
          <span class="metadata-value">{{selectedBlock.shapeString}}</span>
        </div>
        <div class="metadata-item">
          <span class="metadata-label">Offset:</span>
          <span class="metadata-value">{{selectedBlock.offset}} bytes ({{getHexOffset(selectedBlock.offset)}})</span>
        </div>
        <div class="metadata-item">
          <span class="metadata-label">Size:</span>
          <span class="metadata-value">{{selectedBlockSizeMiB}} MiB ({{selectedBlock.size}} bytes)</span>
        </div>
        <div class="metadata-item">
          <span class="metadata-label">Unpadded Size:</span>
          <span class="metadata-value">{{selectedBlockUnpaddedSizeMiB}} MiB<span *ngIf="selectedBlock.unpaddedSize !== undefined"> ({{selectedBlock.unpaddedSize}} bytes)</span></span>
        </div>
        <div class="metadata-item">
          <span class="metadata-label">Padding Overhead:</span>
          <span class="metadata-value">{{selectedBlockPaddingOverheadMiB}} MiB</span>
        </div>
        <div class="metadata-item" *ngIf="selectedBlock.span">
          <span class="metadata-label">Lifetime Span:</span>
          <span class="metadata-value">Step {{selectedBlock.span[0]}} to Step {{selectedBlock.span[1]}}</span>
        </div>
        <div class="metadata-item" *ngIf="selectedBlock.category">
          <span class="metadata-label">Category:</span>
          <span class="metadata-value">{{selectedBlock.category}}</span>
        </div>
        <div class="metadata-item" *ngIf="selectedBlock.sourceInfo && selectedBlock.sourceInfo.fileName">
          <span class="metadata-label">Source:</span>
          <span class="metadata-value">
            <a [href]="'http://google3/' + selectedBlock.sourceInfo.fileName + ';l=' + selectedBlock.sourceInfo.lineNumber" target="_blank">
              {{selectedBlock.sourceInfo.fileName}}:{{selectedBlock.sourceInfo.lineNumber}}
            </a>
          </span>
        </div>
      </div>
      <div class="full-width-metadata-item" *ngIf="selectedBlock.tfOpName">
        <span class="metadata-label">Framework Op:</span>
        <span class="metadata-value">{{selectedBlock.tfOpName}}</span>
      </div>
    </div>
  </div>
</div>
