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

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

$dateFieldBaseClass: '#{constants.$prefix}date-field';

$dateFieldCursor: '--#{constants.$prefix}date-field-cursor';
$dateFieldInputCursor: '--#{constants.$prefix}date-field-input-cursor';

$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';

$stateStyleTokens: (
  error: (
    color: tokens.$bm-comp-input-color-text,
    backgroundColor: tokens.$bm-comp-input-color-bg,
    borderColor: tokens.$bm-comp-input-color-border-error,
    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
  ),
  read-only: (
    color: tokens.$bm-comp-input-color-text,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
  ),
  disabled: (
    color: tokens.$bm-comp-input-color-text-disabled,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    placeholderColor: tokens.$bm-comp-input-color-text-disabled,
  ),
);

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

  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};

  @include inputVars.field-size-scale;

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

      @if ($state == error) {
        @include mixins.simulated-inset-outline(
          tokens.$bm-comp-input-border-width-field-error,
          solid,
          map.get($styleTokens, borderColor),
          calc(0px - #{tokens.$bm-comp-input-border-width-field-error})
        );
      }
    }

    &--#{$state} &__field &__segment {
      color: map.get($styleTokens, color);

      &[data-placeholder='true'] {
        color: map.get($styleTokens, placeholderColor);
      }
    }

    // Separators sit outside the segments, so they need the state colour too —
    // otherwise a disabled field shows full-contrast `/` marks between its
    // greyed-out digits.
    &--#{$state} &__field &__separator {
      color: map.get($styleTokens, color);

      &[data-placeholder='true'] {
        color: map.get($styleTokens, placeholderColor);
      }
    }
  }

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

  // The field is a `div`, so — unlike a natively disabled `<input>` — it keeps
  // the text caret unless the interaction cursors are swapped here.
  &--disabled {
    #{$dateFieldCursor}: not-allowed;
    #{$dateFieldInputCursor}: not-allowed;
  }

  &__field {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    position: relative;

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

    gap: tokens.$bm-comp-input-space-field-gap;
    box-shadow: tokens.$bm-comp-input-shadow-field;
    background-color: tokens.$bm-comp-input-color-bg;
    cursor: var(#{$dateFieldCursor}, default);
    height: var(#{inputVars.$fieldHeight});
    padding-block: var(#{inputVars.$fieldPaddingY});
    padding-inline: var(#{inputVars.$fieldPaddingX});

    // Gated on the field being enabled: the root carries `tabindex="-1"` when
    // disabled, which only excludes it from Tab — a click still focuses it, so
    // an ungated `:focus-within` rings a disabled field.
    &:not([aria-disabled='true']):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})
      );
    }
  }

  &__field &__segments {
    display: inline-flex;
    align-items: baseline;
    color: tokens.$bm-comp-input-color-text;
    font: var(#{inputVars.$fieldFont});
    font-variant-numeric: tabular-nums;
    gap: tokens.$bm-sem-space-12;
  }

  &__field &__segment {
    display: inline-block;
    box-sizing: border-box;
    min-inline-size: 2ch;
    text-align: center;
    outline: none;
    cursor: var(#{$dateFieldInputCursor}, text);

    // RTL (DF-9): defensive bidi isolation. Today it's effectively a no-op —
    // each segment is its own inline-block context holding strong-LTR content
    // (digits, the MM/DD/YYYY placeholders), and cross-segment order comes from
    // flex + `direction`. `plaintext` keeps a segment correct if it ever holds
    // localized/mixed content (e.g. name-format months, DF-12). Beam precedent:
    // breadcrumbs.module.scss.
    unicode-bidi: plaintext;

    // Reserve the focus-underline space on both edges so the baseline-aligned
    // text stays vertically centered (a bottom-only border floats it up ~1px);
    // only the bottom is colored on focus below.
    border-block: tokens.$bm-sem-border-width-focus solid transparent;

    &[data-segment='year'] {
      min-inline-size: 4ch;
    }

    &[data-placeholder='true'] {
      color: tokens.$bm-comp-input-color-text-placeholder;
    }

    // Both `[data-active]` and `:focus-visible` paint the indicator so the
    // focus signal stays visible even when AT virtual-cursor navigation
    // triggers focus outside the state-machine path (per tamaral feedback).
    &[data-active='true'],
    &:focus-visible {
      border-bottom-color: tokens.$bm-sem-color-border-focus;
    }

    &::selection {
      background-color: tokens.$bm-sem-color-surface-info-primary;
    }
  }

  &__field &__separator {
    color: tokens.$bm-comp-input-color-text;
    font: var(#{inputVars.$fieldFont});
    user-select: none;
    // RTL (DF-9): defensive bidi isolation — a single neutral separator char
    // doesn't reorder today; this keeps it stable if a locale ever uses a
    // multi-char or directional separator.
    unicode-bidi: plaintext;

    &[data-placeholder='true'] {
      color: tokens.$bm-comp-input-color-text-placeholder;
    }
  }

  // Visually-hidden polite live region for the blur-clamp announcement.
  &__sr-status {
    @include mixins.visually-hidden;
  }
}