@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;
@use '../utils/mixins.scss' as mixins;
@use '../utils/cursors.scss' as cursors;
@use './icon.vars.scss' as iconVars;
@use './actionList.vars.scss' as actionListVars;
@use './input.vars.scss' as inputVars;

@import '@viasat/beam-tokens/components/Input';

$searchBaseClass: '#{constants.$prefix}search';

$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';

$searchCursor: '--#{constants.$prefix}text-field-cursor';
$searchInputCursor: '--#{constants.$prefix}text-field-input-cursor';

$searchInputMinWidth: 3rem;

$stateStyleTokens: (
  error: (
    textColor: tokens.$bm-comp-input-color-text,
    backgroundColor: tokens.$bm-comp-input-color-bg,
    borderColor: tokens.$bm-comp-input-color-border-error,
    searchIconColor: tokens.$bm-comp-input-color-icon,
  ),
  read-only: (
    textColor: tokens.$bm-comp-input-color-text,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    svgColor: tokens.$bm-comp-input-color-icon,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    searchIconColor: tokens.$bm-comp-input-color-icon,
  ),
  disabled: (
    textColor: tokens.$bm-comp-input-color-text-disabled,
    svgColor: tokens.$bm-comp-input-color-text-disabled,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    searchIconColor: tokens.$bm-comp-input-color-icon-disabled,
  ),
);

.#{$searchBaseClass} {
  @include cursors.applyTextCursors();
  max-width: tokens.$bm-comp-input-size-field-width;
  position: relative;

  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};

  @include inputVars.field-size-scale;

  &--fluid {
    max-width: 100%;
  }

  &__field {
    #{$searchInputCursor}: text;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    cursor: var(#{$searchCursor}, pointer);
    user-select: none;
    font: var(#{inputVars.$fieldFont});
    min-height: var(#{inputVars.$fieldHeight});
    gap: tokens.$bm-comp-input-space-field-gap;
    #{iconVars.$iconColor}: tokens.$bm-comp-input-color-icon;
    #{iconVars.$iconSize}: var(#{inputVars.$fieldIconSize});

    &__input {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      gap: tokens.$bm-comp-input-space-field-gap;
      background: transparent;
      min-height: calc(
        var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
      );
      line-height: calc(
        var(#{inputVars.$fieldHeight}) - 2 * var(#{inputVars.$fieldPaddingY})
      );

      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        -webkit-appearance: none;
      }

      &::placeholder {
        color: tokens.$bm-comp-input-color-text-placeholder;
      }

      flex: 1;
      cursor: var(#{$searchInputCursor}, pointer);

      text-overflow: ellipsis;

      border: 0;
      outline: 0;
      margin: 0;
      padding: 0;
      font: var(#{inputVars.$fieldFont});

      width: 100%;
      min-width: $searchInputMinWidth;
    }
  }

  &--disabled,
  &--disabled &__field {
    #{$searchCursor}: not-allowed;
    #{$searchInputCursor}: not-allowed;
  }

  @each $state, $styleTokens in $stateStyleTokens {
    &--#{$state} &__field {
      color: map.get($styleTokens, textColor);
      border-color: map.get($styleTokens, borderColor);
      background-color: map.get($styleTokens, backgroundColor);
      #{iconVars.$iconColor}: map.get($styleTokens, searchIconColor);
    }

    &--#{$state} &__field &__content {
      @if ($state == disabled) {
        opacity: tokens.$bm-sem-opacity-disabled;
      }

      svg,
      ::slotted([slot*='content']) {
        color: map.get($styleTokens, svgColor);
      }
    }
  }

  &--disabled &__field &__field__input {
    color: tokens.$bm-comp-input-color-text-disabled;

    &::placeholder {
      color: tokens.$bm-comp-input-color-text-disabled;
    }
  }

  &__field {
    border: tokens.$bm-comp-input-border-width-field-default solid
      tokens.$bm-comp-input-color-border;
    border-radius: tokens.$bm-comp-input-radius-field;

    cursor: var(#{$searchInputCursor}, pointer);
    box-shadow: tokens.$bm-comp-input-shadow-field;
    background-color: tokens.$bm-comp-input-color-bg;
    transform: translate3d(
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0
    );

    padding-block: var(#{inputVars.$fieldPaddingY});
    padding-inline: var(#{inputVars.$fieldPaddingX});

    min-height: var(#{inputVars.$fieldHeight});

    &:focus-within {
      @include mixins.simulated-inset-outline(
        tokens.$bm-sem-border-width-focus,
        solid,
        tokens.$bm-sem-color-border-focus,
        calc(0px - #{tokens.$bm-sem-size-focus-offset})
      );
    }

    &__spinner {
      display: flex;
    }
  }

  &__field &__content {
    display: flex;
    align-items: center;

    color: tokens.$bm-comp-input-color-text-placeholder;

    svg,
    ::slotted([slot*='content']) {
      color: tokens.$bm-comp-input-color-icon;
      height: tokens.$bm-sem-size-icon-sm;
    }

    // Beam icons resize with the field; third-party SVGs keep the fixed size
    // set above, per EPTOOLS-1515 acceptance criteria.
    @include inputVars.field-content-icon;
  }

  &__dropdown {
    padding-block: tokens.$bm-sem-space-50;
  }

  &__results__view-all {
    // Base = global variant: ActionList.Item defaults handle height, padding, font.
    color: tokens.$bm-sem-color-link-primary;

    // Target content-before directly — ActionList.Item sets iconColor on that child
    // element itself, so a parent-level value would be overridden by inheritance.
    .#{actionListVars.$actionListItemBaseClass}__content-before {
      #{iconVars.$iconColor}: tokens.$bm-sem-color-link-primary;
    }

    // Semantic tokens used intentionally — no dedicated component tokens exist yet.
    &--group {
      min-height: unset;
      padding: tokens.$bm-sem-space-25 0;
      font: tokens.$bm-sem-typo-body-xs;
    }
  }
}