@use '../styles/tokens' as *;

.profiler {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  // Flame-bar palette — light pastels with dark text. Bars, swatches and donut arcs read these
  // via inline style, so the pairs inherit down to every coloured element.
  --profiler-bar-text: #202124;
  --profiler-cat-request-fill: #dfe1e5;
  --profiler-cat-request-border: #b9bdc4;
  --profiler-cat-hooks-fill: #f9e2ae;
  --profiler-cat-hooks-border: #d9b45e;
  --profiler-cat-validation-fill: #b8d4f1;
  --profiler-cat-validation-border: #7fabdc;
  --profiler-cat-preparation-fill: #d5c8ec;
  --profiler-cat-preparation-border: #ab97d4;
  --profiler-cat-navigation-fill: #b2dfd3;
  --profiler-cat-navigation-border: #7cbcab;
  --profiler-cat-render-evaluation-fill: #d3ead4;
  --profiler-cat-render-evaluation-border: #9cc79f;
  --profiler-cat-render-output-fill: #c8e6c9;
  --profiler-cat-render-output-border: #87bd8a;

  // Dark theme — deep muted fills with light text.
  :root.dark & {
    --profiler-bar-text: #e6e6e8;
    --profiler-cat-request-fill: #3a3d42;
    --profiler-cat-request-border: #55595f;
    --profiler-cat-hooks-fill: #5c4a1a;
    --profiler-cat-hooks-border: #8a6d1f;
    --profiler-cat-validation-fill: #2b4a73;
    --profiler-cat-validation-border: #4a6fa5;
    --profiler-cat-preparation-fill: #45356b;
    --profiler-cat-preparation-border: #6a55a3;
    --profiler-cat-navigation-fill: #1f5347;
    --profiler-cat-navigation-border: #3d7d6c;
    --profiler-cat-render-evaluation-fill: #2c5230;
    --profiler-cat-render-evaluation-border: #4d7f52;
    --profiler-cat-render-output-fill: #35603a;
    --profiler-cat-render-output-border: #578a5e;
  }

  &__toolbar {
    display: flex;
    align-items: center;
    gap: $spacing-4;
    height: 28px;
    padding: 0 $spacing-12;
    border-bottom: 1px solid var(--border-subtle);
    font-size: $font-size-xs;
    color: var(--fg-muted);
    flex-shrink: 0;
  }

  &__reset {
    display: inline-flex;
    align-items: center;
    padding: $spacing-2 $spacing-8;
    border: 1px solid var(--border);
    border-radius: $radius-sm;
    background: var(--button-bg);
    color: var(--fg-muted);
    font-size: $font-size-xs;
    cursor: pointer;

    &:hover {
      background: var(--bg-hover);
      color: var(--fg);
    }
  }

  &__spacer {
    flex: 1;
  }

  &__total {
    b {
      color: var(--fg);
      font-weight: 600;
    }
  }

  // --- Flame chart ---

  &__chart {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  &__ruler {
    position: sticky;
    top: 0;
    z-index: 2;
    height: $spacing-16 + 2px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
  }

  &__tick-label {
    position: absolute;
    top: 2px;
    padding-left: 3px;
    font-size: 10px;
    color: var(--fg-muted);
    white-space: nowrap;
    pointer-events: none;
  }

  &__gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-subtle);
    pointer-events: none;
  }

  &__canvas {
    position: relative;
    width: 100%;
    cursor: grab;

    &--panning {
      cursor: grabbing;
    }
  }

  // --- Bottom pane ---

  &__bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    overflow: hidden;
  }

  &__resize-handle {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 7px;
    z-index: 3;
    cursor: ns-resize;

    &:hover::after,
    &:active::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--accent);
    }
  }

  &__bottom-tabs {
    display: flex;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
  }

  // --- Summary tab ---

  &__summary {
    display: flex;
    align-items: center;
    gap: $spacing-16 + $spacing-8;
    padding: $spacing-12 $spacing-16;
    overflow: auto;
  }

  &__donut {
    position: relative;
    flex-shrink: 0;
    width: 116px;
    height: 116px;
  }

  &__donut-total {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);

    span {
      font-size: 9.5px;
      font-weight: 400;
      color: var(--fg-muted);
    }
  }

  &__legend {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: $spacing-4 $spacing-12;
    align-content: center;
    font-size: 11.5px;
  }

  &__legend-row {
    display: contents;
  }

  &__legend-name {
    display: flex;
    align-items: center;
    gap: $spacing-6;
  }

  &__legend-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  &__legend-pct {
    text-align: right;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
  }

  // --- Bottom-Up tab ---

  &__table {
    flex: 1;
    overflow: auto;

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: $font-size-xs;
    }

    th {
      position: sticky;
      top: 0;
      height: 24px;
      padding: 0 $spacing-12;
      text-align: left;
      font-weight: 400;
      color: var(--fg-muted);
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }

    td {
      height: 24px;
      padding: 0 $spacing-12;
      border-bottom: 1px solid var(--border-subtle);
      white-space: nowrap;
    }
  }

  &__th--sorted {
    color: var(--fg);
  }

  &__col-time {
    width: 130px;
  }

  &__row {
    cursor: pointer;

    &:hover td {
      background: var(--bg-hover);
    }

    &--selected td {
      background: var(--bg-selected);
    }
  }

  &__cell-time {
    font-variant-numeric: tabular-nums;
  }

  &__cell-pct {
    margin-left: $spacing-6;
    color: var(--fg-muted);
  }

  &__activity {
    display: flex;
    align-items: center;
    gap: $spacing-6;
    font-family: monospace;

    &--child {
      padding-left: 24px;
      color: var(--fg-muted);
    }
  }

  &__row--child &__cell-time {
    color: var(--fg-muted);
  }

  &__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--fg-muted);
    font-size: 9px;
    cursor: pointer;
  }

  &__kind {
    color: var(--fg);
  }

  &__variant {
    color: var(--fg-muted);
  }

  // --- Props tab ---

  &__props {
    flex: 1;
    overflow: auto;
    padding: $spacing-12 $spacing-16;
  }

  // --- Shared ---

  &__swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid;
  }

  &__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: $spacing-16;
    color: var(--fg-muted);
    font-size: $font-size-xs;
  }
}

.profiler-bar {
  position: absolute;
  height: 15px;
  border-radius: 2px;
  border: 1px solid transparent;
  padding: 0 3px;
  font-size: 10px;
  line-height: 13px;
  color: var(--profiler-bar-text);
  white-space: nowrap;
  overflow: hidden;

  &--clickable {
    cursor: pointer;
  }

  &--phase {
    font-weight: 600;
  }

  &:hover {
    filter: brightness(0.95);
  }

  :root.dark &:hover {
    filter: brightness(1.3);
  }

  &--selected {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    z-index: 1;
  }

  &--hovered {
    outline: 1.5px solid var(--accent);
    outline-offset: -1px;
    z-index: 1;
  }

  &__label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }
}