@use '../../../../styles/_globals.scss' as *;

:host {
  display: block;
  text-align: start;
  min-width: 240px;

  &.global {
    position: fixed;
    top: var(--s);
    left: var(--s);
    right: var(--s);
    overflow: visible;
    transform-origin: left top;

    @include mq(xs, max) {
      transform: translateX(0) !important;
      left: var(--s-half);
      right: var(--s-half);
    }

    @include mq(xs) {
      margin-top: 20px;
      max-width: 720px;
      width: 90%;
      top: var(--s6);
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
  }
}

:host-context(.isTouchOnly).global {
  top: auto;
  // Extra gap above the keyboard so the bottom action buttons stay easy to
  // tap — `--s` alone leaves them flush against the IME's top edge.
  bottom: calc(var(--keyboard-height) + var(--s2));
  transition: bottom var(--transition-duration-m) ease-out;
}

.add-task-container {
  width: 100%;
  position: relative;
  background-color: var(--bg-lighter);
  color: var(--text-color-most-intense);

  box-shadow: var(--whiteframe-shadow-3dp);
  border-radius: var(--card-border-radius);

  &.isGlobalBarVariant {
    box-shadow: var(--whiteframe-shadow-12dp);
  }
}

.input-section {
  position: relative;
  display: flex;
  color: var(--text-color-most-intense);

  // Wrapper is the flex child and holds the vertical breathing room as padding
  // (a single row lands at the familiar ~42px, and every extra wrapped row keeps
  // the same top/bottom spacing). The textarea itself has no vertical padding
  // because cdkTextareaAutosize would otherwise clip it — see below.
  .main-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    // ALL of the input's padding lives here, never on the textarea. Vertical:
    // cdkTextareaAutosize sizes height to rows*line-height and ignores the
    // textarea's own padding, so vertical padding there gets clipped. Horizontal
    // (left gutter + right gap before the + button): the autosize height
    // measurement strips the textarea's horizontal padding (box-sizing switches
    // to content-box with 0 side padding) but NOT its width, so padding on the
    // textarea makes the measured wrap width wider than the rendered one — the
    // line wraps (clipped, with a scrollbar) a few chars before the field grows.
    // With a padding-free textarea, measured and rendered wrap widths match and
    // the height grows exactly when the text wraps.
    padding: 10px var(--s) 10px var(--s2);
  }

  .main-input {
    display: block;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    outline: 0;
    // No padding — see .main-input-wrap for why the gutters must live there.
    padding: 0;
    line-height: 1.4;
    resize: none;
    // cdkTextareaAutosize owns this field's height (it measures the content and
    // pins an exact px height), so the textarea must never paint its own
    // scrollbar. Without this the browser's default `overflow: auto` shows a
    // spurious scrollbar on a single line whenever the rendered line box
    // (16px × 1.4 = 22.4px) doesn't land exactly on the integer height the
    // directive pins — which happens depending on font/zoom/platform. The
    // directive still keeps the caret in view via programmatic scroll.
    overflow: hidden;
    background: transparent;
    color: inherit;
    font-family: var(--font-primary-stack);

    &::placeholder {
      opacity: 0.6;
    }
  }

  // Buttons sit in-flow next to the input (not absolutely positioned), so the
  // input flexes to whatever width is left and text can never run under them.
  .right-button-controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  // The add (+) button and its dashed separator span the full height of the row
  // (which grows with the wrapping input); the icon stays vertically centred.
  .separator-box {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    border-right: 1px dashed var(--extra-border-color);
    border-left: 1px dashed var(--extra-border-color);

    // Reserve the button's space while the field is empty without letting it
    // show or take clicks. `visibility:hidden` is not enough here: mat-icon's
    // anti-FOUC rule re-asserts `visibility:visible` on the glyph, so the `+`
    // stayed visible. Fading the whole subtree with opacity (which a child
    // cannot override) hides it while keeping the reserved layout space.
    &.is-invisible {
      opacity: 0;
      pointer-events: none;
    }

    .add-task-submit-btn {
      align-self: stretch;
      height: auto;
      border-radius: 0;
      // The submit + is the primary action while composing — full strength and
      // tinted, not the dimmed treatment the other icons share. Colour the icon
      // via the MDC token (the icon inherits it) rather than a .mat-*/.mdc-*
      // selector override.
      opacity: 1;
      --mdc-icon-button-icon-color: var(--primary);
      color: var(--primary);
    }
  }

  .switch-add-to-btn {
    opacity: 0.6;

    &:hover,
    &:focus-visible {
      opacity: 1;
    }
  }
}

// Wraps the two toggles (projected into the create-mode action bar or the search
// info row) so a dashed divider sits to their right, separating them from the
// chips / search text that follow. Nesting the button rules here also lifts their
// specificity above Material's .mat-mdc-icon-button so the size override wins.
// These rules MUST live in the parent stylesheet: the buttons are projected via
// <ng-content>, so under emulated encapsulation they keep the parent component's
// scoping attribute and only the parent's styles match them.
.inline-action-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-right: 1px dashed var(--extra-border-color);
  padding-right: var(--s-quarter);
  margin-right: var(--s-quarter);

  // Match the neighbouring action chips (.action-btn, 36px) instead of the
  // default 40px icon button, so the whole row lines up at one height.
  .switch-add-to-bot-btn,
  .search-toggle-btn,
  .note-toggle-btn {
    flex-shrink: 0;
    align-self: center;
    --mdc-icon-button-state-layer-size: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    opacity: 0.6;

    &:hover,
    &:focus-visible {
      opacity: 1;
    }
  }

  .search-toggle-btn.active,
  .note-toggle-btn.active {
    opacity: 1;
    background-color: var(--primary-light);
    color: var(--primary);
  }

  // A collapsed note still holds its text — keep the icon undimmed and tinted so
  // it's clear a note is attached (distinct from the .active pill shown while the
  // note field is expanded).
  .note-toggle-btn.has-value:not(.active) {
    opacity: 1;
    color: var(--primary);
  }
}

// Search-mode counterpart of the action bar: the toggles are prepended and the
// info text follows, on one row below the input (mirrors the create-mode bar).
.search-action-bar {
  position: relative;
  display: flex;
  align-items: center;
  border-top: 1px dashed var(--extra-border-color);
  overflow-x: auto;
  overflow-y: hidden;

  @include mq(xs) {
    gap: var(--s-quarter);
  }
}

.note-input-section {
  border-top: 1px dashed var(--extra-border-color);
  // Padding lives on the wrapper, not the textarea — same cdkTextareaAutosize
  // reason as .main-input-wrap (padding on the textarea desyncs the measured
  // wrap width from the rendered one and clips the height).
  padding: var(--s) var(--s2);
}

.note-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  // cdkTextareaAutosize manages the height; keep the textarea padding-free.
  padding: 0;
  resize: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-primary-stack);
  font-size: 14px;
  line-height: 1.5;

  &::placeholder {
    opacity: 0.6;
  }
}

.add-issue-info-text {
  // Fills the rest of the search row after the prepended toggles; min-width: 0
  // lets the ellipsis kick in instead of overflowing the flex row.
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 var(--s);
  line-height: 38px;
  color: var(--text-color-muted);
  @include truncateText();

  &.bold {
    opacity: 1;
    color: var(--text-color-most-intense);
    font-weight: bold;
  }
}

.spinner {
  animation: var(--transition-duration-m) fadeIn;
  position: absolute;
  right: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: var(--z-add-task-bar);
  border-radius: 50%;
  background: var(--card-bg);
  padding: 6px;
  margin-top: var(--s-half);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

//// Autocomplete panel styles
::ng-deep .isTouchPrimary .add-task-bar-panel {
  top: auto;
  bottom: var(--s-half);
}

::ng-deep .add-task-bar-panel {
  position: absolute;
  padding: 0 !important;
  top: 40px;
  min-width: 300px;

  .mat-mdc-option {
    display: flex;
    align-items: center;
    gap: var(--s);
    justify-content: space-between;
    width: 100%;

    .project-icon {
      font-size: 16px;
      width: 16px;
      height: 16px;
      margin-left: var(--s);
      opacity: 0.7;
      margin-right: 0;
    }

    .project-title {
      opacity: 0.7;
      font-size: 0.9em;
      margin-left: var(--s-half);
    }

    mat-icon:first-child {
      margin-right: 0;
      flex-shrink: 0;
    }

    tag {
      margin-left: auto;
    }
  }

  .suggestion-option {
    min-height: 48px;
    padding: var(--s) var(--s2);

    .option-content {
      display: flex;
      align-items: center;
      gap: var(--s);
      width: 100%;

      .option-icon {
        flex-shrink: 0;
        color: var(--text-color-dimmed);

        &.archived {
          color: var(--color-accent);
        }
      }

      .option-title {
        flex: 1;
        @include truncateText();
      }

      .issue-id {
        flex-shrink: 0;
        font-size: 0.9em;
        color: var(--text-color-dimmed);
        opacity: 0.7;
      }
    }
  }
}
