/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

// Standard imports.
@use '../../global/styles/project-settings' as c4p-settings;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/motion' as *;

$block-class__next: #{c4p-settings.$pkg-prefix}--add-select__next;
$carbon-prefix: #{c4p-settings.$carbon-prefix};

/// Composable AddSelect styles (next)
/// These styles support the composable AddSelect component structure

// ──────────────────────────────────────────────────────────────
// AddSelect - Root container
// ──────────────────────────────────────────────────────────────
.#{$block-class__next} {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  inline-size: 100%;
}

// ──────────────────────────────────────────────────────────────
// AddSelectBody - Main content area with search and header
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}__body {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  inline-size: 100%;
}

.#{$block-class__next}__header {
  border-block-end: 1px solid $border-subtle-01;
  padding-block-end: $spacing-03;
  padding-block-start: $spacing-05;
  padding-inline: $spacing-05;
}

.#{$block-class__next}__search {
  margin-block-end: $spacing-05;

  &--with-actions {
    display: flex;
    align-items: flex-end;
  }
}

.#{$block-class__next}__search-input {
  flex: 1;
}

.#{$block-class__next}__global-actions {
  display: flex;
  align-items: flex-end;
}

.#{$block-class__next}__sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.#{$block-class__next}__tags {
  display: flex;
  align-items: center;
  gap: $spacing-03;
}

.#{$block-class__next}__tags-label {
  @include type-style('heading-compact-02');

  margin: 0;
  color: $text-primary;
}

.#{$block-class__next}__sub-header-actions {
  display: flex;
  align-items: center;
  gap: $spacing-03;
  margin-inline-start: $spacing-05;
}

.#{$block-class__next}__content {
  display: flex;
  overflow: auto;
  flex: 1;
  flex-direction: column;
}

// ──────────────────────────────────────────────────────────────
// AddSelectList - Container for items with keyboard navigation
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;

  @supports (overflow-block: auto) {
    overflow-block: auto;
  }

  &:focus {
    outline: none;
  }
}

.#{$block-class__next}-list-body {
  display: flex;
  flex-direction: column;

  // Horizontal layout for hierarchy view (columns side-by-side)
  &--horizontal {
    flex-direction: row;
    align-items: stretch;
    block-size: 100%;

    .#{$block-class__next}-column {
      padding-block: $spacing-05;
      padding-inline: $spacing-05;
    }
  }
}

// ──────────────────────────────────────────────────────────────
// AddSelectRow - Individual selectable row (aligns with v1 AddSelectRow)
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}-row {
  display: flex;
  border-inline-start: $spacing-01 solid transparent;
  transition: background-color $duration-fast-01 motion(standard, productive);

  &:focus {
    outline: $spacing-01 solid $focus;
    outline-offset: calc(-1 * $spacing-01);
  }

  // Only show focus outline when navigating via keyboard, not mouse clicks
  &:focus:not(:focus-visible) {
    outline: none;
  }

  &--selected {
    background-color: $layer-selected-01;

    .#{$block-class__next}-row__cell-wrapper {
      border-block-end-color: $border-subtle-selected-01;
    }
  }

  &--disabled {
    cursor: not-allowed;

    .#{$block-class__next}-row__title,
    .#{$block-class__next}-row__subtitle {
      color: $text-disabled;
    }

    .#{$block-class__next}-row__icon svg,
    .#{$block-class__next}-row__view-item-panel svg,
    .#{$block-class__next}-row__nav-indicator svg {
      fill: $icon-disabled;
    }
  }

  &:hover:not(&--disabled) {
    background: $layer-hover-01;

    .#{$block-class__next}-row__title {
      color: $link-primary;
    }

    .#{$block-class__next}-row__view-item-panel svg,
    .#{$block-class__next}-row__nav-indicator svg {
      fill: $icon-disabled;
    }
  }

  // Must come after &:hover to win the specificity tie
  &--selected:hover:not(&--disabled) {
    background: $layer-selected-hover-01;

    .#{$block-class__next}-row__title {
      color: $text-primary;
    }

    .#{$block-class__next}-row__view-item-panel svg,
    .#{$block-class__next}-row__nav-indicator svg {
      fill: $icon-primary;
    }
  }

  &__cell {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  &__cell-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-end: 1px solid $border-subtle-01;
    min-block-size: $spacing-09;
    padding-block: $spacing-03;
    padding-inline: $spacing-05;
  }

  &__content {
    display: flex;
    flex: 1;
    align-items: center;
    align-self: center;
  }

  &__checkbox {
    flex: none;
    align-self: center;
    margin-inline-end: $spacing-05;
  }

  &__radio {
    align-self: center;

    .#{$carbon-prefix}--radio-button__appearance {
      margin-inline-end: 0;
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    margin-inline-end: $spacing-03;
  }

  &__text {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  &__title {
    @include type-style('body-compact-01');

    display: block;
    color: $text-primary;
  }

  &__subtitle {
    @include type-style('helper-text-01');

    display: block;
    color: $text-secondary;
  }

  &__meta {
    display: flex;
    align-items: center;
    margin-inline-start: $spacing-03;
  }

  &__view-item-panel {
    margin-inline-start: auto;
  }

  &-item-panel--selected {
    background-color: $layer-hover-01;
    border-inline-start: 0.125rem solid $interactive;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    &__nav-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-inline-start: $spacing-03;
      padding-block: $spacing-02;
      padding-inline: $spacing-02;
      transition: none;

      &:hover {
        background-color: $background-hover;
      }

      &:focus {
        outline: $spacing-01 solid $focus;
        outline-offset: calc(-1 * $spacing-01);
      }

      svg {
        fill: $icon-primary;
      }
    }
  }

  &__nav-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-inline-start: $spacing-03;
    padding-block: $spacing-02;
    padding-inline: $spacing-02;
    transition: background-color $duration-fast-01 motion(standard, productive);

    &:hover {
      background-color: $background-hover;
    }

    &:focus {
      outline: $spacing-01 solid $focus;
      outline-offset: calc(-1 * $spacing-01);
    }

    svg {
      fill: $icon-primary;
    }
  }

  &--skeleton {
    cursor: default;
    pointer-events: none;

    &:hover {
      background: none;
    }

    .#{$block-class__next}-row__skeleton-control {
      flex: none;
      border-radius: $spacing-01;
      background-color: $skeleton-element;
      block-size: $spacing-05;
      inline-size: $spacing-05;
      margin-inline-end: $spacing-05;
    }

    .#{$block-class__next}-row__icon .#{$carbon-prefix}--icon--skeleton {
      border-radius: 50%;
      block-size: $spacing-07;
      inline-size: $spacing-07;

      &::before {
        border-radius: 50%;
        animation: none;
      }
    }

    .#{$block-class__next}-row__skeleton-title {
      margin-block-end: 0;
    }
  }
}

// ──────────────────────────────────────────────────────────────
// AddSelectColumn - Column container with search, sort, filter
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}-column {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  border-inline-end: 1px solid $border-subtle-01;
  min-inline-size: 300px;
  padding-block: $spacing-05;
  padding-inline: $spacing-05;

  // default: no border on last column
  &:last-child {
    border-inline-end: none;
  }

  .#{$block-class__next}-list-body--horizontal & {
    &:last-child {
      border-inline-end: 1px solid $border-subtle-01; // override: keep border inside horizontal layout
    }
  }

  // Search section with actions
  &__search {
    &--with-actions {
      display: flex;
      align-items: flex-end;
    }
  }

  &__search-input {
    flex: 1;
  }

  &__actions {
    display: flex;
    align-items: flex-end;
  }

  // Search bar section (legacy)
  &__search-bar {
    padding-block-end: 0;
    padding-block-start: $spacing-05;
    padding-inline: $spacing-05;
  }

  &__search-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
  }

  &__search-input {
    flex: 1;
  }

  // Controls (sort and filter buttons) - positioned outside search input
  &__controls {
    display: flex;
    align-items: center;
    gap: 0;
  }

  &__sort-button,
  &__filter-button {
    flex: none;
  }

  &__filter-popover {
    padding-block: $spacing-05;
    padding-inline: $spacing-05;

    .#{$carbon-prefix}--checkbox-wrapper {
      margin-block-end: $spacing-03;

      &:last-child {
        margin-block-end: 0;
      }
    }
  }

  // Header section with select all
  &__header {
    display: flex;
    align-items: center;
    border-block-end: 1px solid $border-subtle-01;
    padding-block: $spacing-05;
    padding-inline: $spacing-05;
  }

  &__select-all {
    .#{$carbon-prefix}--checkbox-label {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .#{$carbon-prefix}--checkbox-label-text {
      display: flex;
      align-items: center;
      gap: $spacing-03;
      margin-inline-start: $spacing-03;
    }
  }

  &__title-wrapper {
    display: flex;
    align-items: center;
    gap: $spacing-03;
  }

  &__title {
    @include type-style('heading-compact-01');
  }

  // Rows container
  &__rows {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;

    @supports (overflow-block: auto) {
      overflow-block: auto;
    }
  }
}

// ──────────────────────────────────────────────────────────────
// AddSelectBreadcrumbs - Navigation breadcrumbs
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: $spacing-02;
}

.#{$block-class__next}__breadcrumb {
  &-item {
    display: flex;
    align-items: center;
    gap: $spacing-02;
  }

  &-button {
    @include type-style('body-compact-01');

    border: none;
    background: none;
    color: $link-primary;
    cursor: pointer;
    padding-block: 0;
    padding-inline: 0;
    text-decoration: none;

    &:hover {
      color: $link-primary-hover;
      text-decoration: underline;
    }

    &:focus {
      outline: $spacing-01 solid $focus;
      outline-offset: $spacing-01;
    }
  }

  &-separator {
    display: flex;
    align-items: center;
    color: $text-secondary;

    svg {
      fill: currentColor;
    }
  }

  &-current {
    @include type-style('body-compact-01');

    color: $text-primary;
  }
}

// ──────────────────────────────────────────────────────────────
// AddSelectSelectionSummary - Selected items display
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}__selection-summary {
  display: flex;
  flex-direction: column;

  &-header {
    display: flex;
    align-items: center;
    border-block-end: 1px solid $layer-accent-01;
    padding-block-end: $spacing-03;
    padding-block-start: $spacing-06;
    padding-inline: $spacing-05;
  }

  &-title {
    @include type-style('heading-compact-02');

    margin-inline-end: $spacing-03;
  }

  &-header-actions {
    display: flex;
    align-items: center;
    gap: $spacing-03;
    margin-inline-start: auto;
  }

  &-item-default {
    border-block-end: 1px solid $border-subtle-01;
    padding-block: $spacing-04;
    padding-inline: $spacing-05;
  }

  &-item-default-title {
    @include type-style('body-compact-01');

    color: $text-primary;
  }

  &-item-default-subtitle {
    @include type-style('body-01');

    color: $text-secondary;
  }
}

// ──────────────────────────────────────────────────────────────
// AddSelectSelectionSummaryItem - Individual selected item
// Figma reference: node 10473-340689
// https://github.com/carbon-design-system/ibm-products/issues/9607#issuecomment-4969016515
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}__selection-summary-item {
  // Figma: var(--layer (contextual)) background on every row (#1)
  // Figma: every row has a 1px bottom border (border-subtle-01) (#2)
  position: relative;
  background-color: $layer-01;
  border-block-end: 1px solid $border-subtle-01;

  // Figma: var(--layer/layer-hover-01) on hover (#3)
  &:hover {
    background-color: $layer-hover-01;
  }

  // Carbon Accordion adds border-block-start on every .cds--accordion__item
  // and border-block-end on :last-child — causing a double bottom border and a
  // stray top border. Our wrapper owns the sole border per Figma spec. (#13)
  // Border ownership: bottom border → __selection-summary-item; Carbon borders → zeroed.
  &--accordion .#{$carbon-prefix}--accordion__item,
  &--accordion .#{$carbon-prefix}--accordion__item:last-child {
    border-block-end: none;
    border-block-start: none;
  }

  // Carbon's default heading uses min-block-size: 40px with no block padding.
  // Figma: py-[10px] px-[16px] on the heading row, so override to $spacing-04 (10px)
  // block padding and unset the 40px minimum. (#4)
  &--accordion .#{$carbon-prefix}--accordion__heading {
    min-block-size: unset;
    padding-block: $spacing-04; // 10px top/bottom — Figma: py-[10px]
    padding-inline-end: $spacing-05; // 16px — Figma: px-[16px]
  }

  &--default {
    // Non-accordion mode: Figma py-[10px] px-[16px] on the title row (#4)
    .#{$block-class__next}__selection-summary-item-title-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: $spacing-04; // 10px top/bottom, matches Figma py-[10px]
      padding-inline: $spacing-05; // 16px inline, matches Figma px-[16px]
    }

    // Figma: expanded content area closes with 10px bottom gap (#5)
    .#{$block-class__next}__selection-summary-item-content {
      padding-block-end: $spacing-04;
      padding-inline: $spacing-05;
    }

    .#{$block-class__next}__selection-summary-item-title {
      @include type-style('heading-compact-01');
    }
  }

  &-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-selected-item {
    flex: 1;
  }

  // Figma: 14px / 18px line-height / 0.16px letter-spacing = body-compact-01 (#6)
  // Previously had color only with no type-style applied.
  &-title {
    @include type-style('body-compact-01');

    color: $text-primary;
  }

  // Figma: 14px / 20px line-height / 0.16px letter-spacing = body-01 (#7)
  // Previously used label-01 (12px) which was incorrect.
  &-subtitle {
    @include type-style('body-01');

    color: $text-secondary;
  }

  &-entry {
    margin-block-end: $spacing-05;
  }

  &-header {
    @include type-style('label-01');

    color: $text-secondary;
    margin-block-end: $spacing-03;
  }

  &-body {
    @include type-style('body-01');

    margin-block-end: $spacing-05;
  }

  // Figma: remove button (32px ghost IconButton) is flush to the right edge
  // inside the 16px inline padding. $spacing-03 (8px) gap gives the correct
  // right-edge alignment. Previously used $spacing-05 (16px). (#8)
  &-remove-button-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline-start: $spacing-03; // 8px gap before the 32px button

    // In accordion mode the remove button is absolutely positioned within the
    // heading (position:relative). It sits inside .cds--accordion__title which
    // is full-width, so inset-inline-end aligns it to the heading's right
    // padding edge. Previously lacked vertical centering. (#9)
    .#{$block-class__next}__selection-summary-item--accordion & {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-end: $spacing-05; // 16px from inline-end — matches heading padding
      padding-inline-start: 0;
      transform: translateY(-50%);
    }
  }

  // Figma: remove button visible on hover only (#3, #8)
  // Opacity transition keeps the reveal smooth (prefers-reduced-motion respected).
  &-remove-button {
    opacity: 0;
    transition: opacity $duration-fast-01 motion(standard, productive);

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  // Reveal on hover or keyboard focus within the item
  &:hover &-remove-button,
  &:focus-within &-remove-button {
    opacity: 1;
  }

  // No extra top margin — padding is owned by the --default title-wrapper above (#11)
  &-content {
    margin-block-start: 0;
  }
}

// Accordion overrides for SelectionSummaryItem accordion variant
// Figma reference: node 10473-340689 (collapsed) / 10473-340699 (expanded)
.#{$block-class__next}__selection-summary {
  // Figma collapsed state: chevron-down (∨); expanded: chevron-up (∧)
  // Carbon renders ChevronRight (→). Rotate to match Figma orientations.
  // Previously: collapsed = rotate(0deg) [pointing right], expanded = rotate(90deg)
  // [pointing down] — both wrong against the Figma spec.
  .#{$carbon-prefix}--accordion__arrow {
    transform: rotate(90deg); // collapsed: points down (∨)
  }

  .#{$carbon-prefix}--accordion__item--active
    .#{$carbon-prefix}--accordion__arrow {
    transform: rotate(-90deg); // expanded: points up (∧)
  }

  // Figma: px-[16px] — arrow sits 16px from the inline-start edge of the row
  .#{$carbon-prefix}--accordion--start .#{$carbon-prefix}--accordion__arrow {
    margin-block: 0;
    margin-inline-end: 0;
    margin-inline-start: $spacing-05; // 16px from inline-start
  }

  // Figma: gap-[16px] between the arrow and the title content group.
  // $spacing-03 (8px) left gap + 8px arrow width = 16px total visual gap.
  // padding-inline-end reserves 32px for the absolutely-positioned remove button.
  .#{$carbon-prefix}--accordion--start .#{$carbon-prefix}--accordion__title {
    margin-inline-end: 0;
    margin-inline-start: $spacing-03; // 8px gap after arrow → 16px total Figma gap
    padding-inline-end: $spacing-07; // 32px: prevents text overlap with remove button
  }

  // Figma expanded slot: p-[16px] = $spacing-05 on all sides (#12)
  // Previously: padding-block: 0 (no vertical padding) and no inline padding.
  // This selector is more specific than Carbon's responsive padding-inline-end
  // overrides on .cds--accordion__content, so one rule covers all breakpoints.
  .#{$carbon-prefix}--accordion__item--active
    .#{$carbon-prefix}--accordion__content {
    margin-block-start: 0;
    padding-block: $spacing-05; // 16px top/bottom
    padding-inline: $spacing-05; // 16px inline
  }
}

// ──────────────────────────────────────────────────────────────
// AddSelectItemSummaryPanel - Item summary view
// ──────────────────────────────────────────────────────────────
.#{$block-class__next}__item-summary-panel {
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-end: 1px solid $layer-accent-01;
    gap: $spacing-03;
    padding-block-end: $spacing-03;
    padding-block-start: $spacing-07;
    padding-inline: $spacing-05;
  }

  &-title {
    @include type-style('heading-compact-02');
  }

  &-body {
    padding-block: $spacing-05;
    padding-inline: $spacing-05;
  }

  &-entry {
    margin-block-end: $spacing-05;

    &-title {
      @include type-style('heading-compact-01');
    }

    &-body {
      @include type-style('body-compact-01');
    }
  }
}