@use "../../styles/variables" as vars;
@use "../../styles/colors" as colors;
@use "../../styles/fonts" as fonts;
@use "../../styles/screen" as screen;

.flight-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: background-color 0.2s ease;

  & + & {
    border-top: 1px dashed colors.$border;
  }

  &--expanded {
    background: colors.$blue-extra-light;
    border-left: 3px solid colors.$blue;
  }

  // Angular highlights clickable flight rows with $blue-extra-light
  // (#f3f9ff) on hover — the same tint used for the `frame` background
  // of the left-column accordion. Use the brand token here rather than
  // a one-off translucent blue.
  &--clickable .flight-card__row {
    cursor: pointer;

    &:hover {
      background-color: colors.$blue-extra-light;
    }

    &:focus-visible {
      outline: 2px solid colors.$blue;
      outline-offset: -2px;
    }
  }

  // Mirrors Angular `flight-details-row-part-header :host` grid
  // (online-board rows):
  //   [number] 60px [logo] 120px [dep-time] 100px
  //   [dep-station] 1fr [status] minmax(85px, 145px)
  //   [arr-time] 120px [arr-station] 1fr
  // plus `padding: $space-l $space-xl` (15/20px) — matches Angular's
  // vertical rhythm on each card.
  &__row {
    position: relative;
    display: grid;
    grid-template-columns:
      60px 120px 100px 1fr minmax(85px, 145px) 120px 1fr 10px;
    align-items: center;
    gap: 0 vars.$space-l;
    padding: vars.$space-l vars.$space-xl;
    min-height: 68px;
  }

  // Schedule mode uses Angular's `schedule-list-flight-header :host`
  // grid (ClientApp/src/app/modules/pages/schedule/schedule-list-flight-header):
  //   [number] 80px [logo] 120px [dep-time] 100px
  //   [dep-station] minmax(45px, 240px) [duration] 100px
  //   [arr-time] 100px [arr-station] minmax(45px, 240px) [arrow] 10px
  &--schedule .flight-card__row {
    grid-template-columns:
      80px 120px 100px minmax(45px, 240px) 100px 100px minmax(45px, 240px) 10px;
    gap: 0 vars.$space-l;
    padding: vars.$space-xl;
  }

  // Schedule row typography — values taken from the live Angular page
  // (computed styles on `list-scheduled-flight schedule-list-flight-header`,
  // measured 2026-04-23):
  //   flight number  18px / 400 (regular)
  //   time           30px / 300 (light)
  //   station city   14px / 400 (regular)
  //   station term   12px / 400 (regular, underlined)
  //   duration text  12px / 400 (regular)
  &--schedule .flight-card__number {
    font-size: fonts.$font-size-xl;
    font-weight: fonts.$font-regular;
    line-height: 1.25;
  }

  &--schedule .flight-card__time .time-group__scheduled,
  &--schedule .flight-card__time .time-group__actual {
    font-size: fonts.$font-size-xxl;
    font-weight: fonts.$font-light;
    line-height: 1.15;
  }

  &--schedule .flight-card__station .station__city--bold {
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-regular;
  }

  &--schedule .flight-card__station .station__terminal {
    font-size: fonts.$font-size-s;
  }

  &--schedule .flight-card__duration {
    font-size: fonts.$font-size-s;
  }

  &__number {
    font-weight: fonts.$font-medium;
    color: colors.$text-color;
    font-size: fonts.$font-size-m;
    line-height: 1.2;
  }

  &__aircraft {
    font-size: 11px;
    color: colors.$light-gray;
    font-weight: fonts.$font-regular;
    margin-top: 4px;
  }

  &__operator {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  &__time {
    // TimeGroup owns its own 30px/300 typography; just align it.
    text-align: left;

    &--arrival {
      text-align: left;
    }
  }

  &__station {
    min-width: 0;
    text-align: left;

    &--arrival {
      text-align: right;

      .station {
        align-items: flex-start;
      }
    }
  }

  &__status {
    display: flex;
    justify-content: center;
  }

  &__chevron {
    color: colors.$blue;
    font-size: fonts.$font-size-xl;
    transition: transform 0.2s ease;

    &--open {
      transform: rotate(180deg);
    }
  }

  // Angular hides the row-expand chevron unless the row is hovered or
  // already expanded (see schedule-list-flight-header.scss
  // `.arrow-icon { display: none } :host:hover .arrow-icon { display: initial }`).
  &--schedule .flight-card__chevron {
    visibility: hidden;
  }
  &--schedule .flight-card__row:hover .flight-card__chevron,
  &--schedule.flight-card--expanded .flight-card__chevron {
    visibility: visible;
  }

  // Angular renders a compact `transfer-inline` bar below the collapsed
  // schedule row for connecting flights. The bar is offset left by the
  // number + operator columns (`margin-left: 80px + 120px + 2 * $space-xl`
  // per schedule-list-flight-header.scss) and sits in a thin pill with
  // the dumbbell transfer icon tinted orange.
  &__transfer {
    display: flex;
    align-items: center;
    gap: vars.$space-s;
    // 80 (number) + 120 (logos) + 20 (left pad) + 20 (gap) = 240px
    margin: 0 vars.$space-xl vars.$space-m 240px;
    padding: 6px vars.$space-m;
    background: colors.$white;
    border: 1px solid colors.$border;
    border-radius: vars.$border-radius;
    font-size: fonts.$font-size-s;
    color: colors.$text-color;
    width: fit-content;
    max-width: calc(100% - 240px - #{vars.$space-xl});
  }

  &__transfer-icon {
    display: inline-flex;
    align-items: center;
    color: #f78c2f; // Aeroflot orange transfer-dot tint
  }

  &__transfer-label {
    font-weight: fonts.$font-regular;
    color: colors.$text-color;
  }

  &__transfer-dash {
    color: colors.$light-gray;
  }

  &__transfer-stations {
    color: colors.$text-color;
  }

  &__transfer-airport {
    color: colors.$blue;
  }

  &__inline-actions {
    display: flex;
    align-items: center;
    gap: vars.$space-s;
  }

  &__duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    white-space: nowrap;
  }

  &__duration-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url("/assets/img/time-blue.svg") no-repeat center / contain;
  }

  &__duration-text {
    line-height: 1.1;
  }

  &__expanded {
    padding: 0 vars.$space-xl vars.$space-xl;
    display: flex;
    flex-direction: column;
    gap: vars.$space-m;
    background: colors.$blue-extra-light;
  }

  &__detail-row {
    display: grid;
    grid-template-columns: 140px 1fr 1fr;
    gap: vars.$space-xl;
    padding: vars.$space-m 0;
    border-bottom: 1px dashed colors.$border;
    align-items: flex-start;

    &:last-child {
      border-bottom: none;
    }
  }

  &__detail-label {
    color: colors.$light-gray;
    font-size: fonts.$font-size-m;
  }

  &__detail-group {
    display: flex;
    gap: vars.$space-xl;
    flex-wrap: wrap;

    > div {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
  }

  &__detail-caption {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
  }

  &__detail-value {
    font-weight: fonts.$font-medium;
    color: colors.$text-color;
    font-size: fonts.$font-size-m;
  }

  &__detail-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: colors.$text-color;

    // Angular shows a leading dot whose colour matches the boarding state.
    // Default is grey ('Уточняется' / 'Запланирован'); active states get
    // coloured dots.
    &--finished .flight-card__status-dot { background: colors.$green; }
    &--inprogress .flight-card__status-dot { background: colors.$blue; }
    &--expected .flight-card__status-dot { background: colors.$orange; }
    // `Уточняется` / `Запланирован` — Angular renders these as neutral
    // grey dots via the brand's $light-gray token.
    &--specified .flight-card__status-dot { background: colors.$light-gray; }
    &--scheduled .flight-card__status-dot { background: colors.$light-gray; }
  }

  &__status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: colors.$light-gray;
    flex-shrink: 0;
  }

  &__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: vars.$space-s;
  }

  // Mirrors Angular `share-button.component.scss`: transparent bg,
  // hover fills with $blue-icon (#e3f0fd), matching the share action
  // buttons across the Angular site.
  &__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: vars.$border-radius;
    cursor: pointer;
    transition: background-color 0.2s ease;

    img {
      width: 20px;
      height: 20px;
    }

    &:hover {
      background-color: colors.$blue-icon;
    }
  }

  &__status-btn {
    background: transparent;
    color: colors.$blue;
    border: 1px solid colors.$blue;
    border-radius: vars.$border-radius;
    padding: 9px 22px;
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-medium;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;

    &:hover { background: colors.$blue-extra-light; }
  }

  &__buy-btn {
    background: colors.$orange;
    color: colors.$white;
    border: none;
    border-radius: vars.$border-radius;
    padding: vars.$space-m 24px;
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-medium;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;

    &:hover { background: colors.$orange--hover; }
  }

  // TIRREDESIGN-6 / TZ §4.1.14.4.4: inline per-row "Купить билет" link
  // that appears on hover near the arrival station. Overlays the row
  // so the 8-column grid stays intact. Desktop only — touch devices get
  // no hover affordance (Buy ticket remains available from details).
  &__buy-link {
    display: none;
    position: absolute;
    right: vars.$space-xl;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 14px;
    font-size: fonts.$font-size-s;
    font-weight: fonts.$font-medium;
    color: colors.$white;
    background: colors.$orange;
    border-radius: vars.$border-radius;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background-color 0.2s ease;
    z-index: 2;

    &:hover { background: colors.$orange--hover; }
  }

  @media (hover: hover) {
    &__buy-link { display: inline-flex; align-items: center; }
    &__row:hover .flight-card__buy-link,
    &__buy-link:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &__details-btn {
    background: colors.$blue;
    color: colors.$white;
    border: none;
    border-radius: vars.$border-radius;
    padding: vars.$space-m 24px;
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-medium;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover {
      background: colors.$blue--hover;
    }
  }

  // Tablet breakpoint narrows the grid to fit the sidebar + results
  // column at 768–1050px widths. Mirrors Angular's tablets() override
  // in board-flight-header.component.tablets.scss.
  @include screen.tablets {
    &__row {
      grid-template-columns:
        70px 90px 90px 1fr 85px 90px 1fr 10px;
      gap: 0 vars.$space-m;
      padding: vars.$space-l;
    }
  }

  @include screen.mobile {
    &__row {
      grid-template-columns: 1fr auto 1fr;
      grid-template-areas:
        "operator status number"
        "time-dep status time-arr"
        "station-dep . station-arr";
      gap: vars.$space-s vars.$space-m;
      padding: vars.$space-m vars.$space-l;
      align-items: start;
    }

    &__chevron { display: none; }

    &__number {
      grid-area: number;
      text-align: right;
    }

    &__operator {
      grid-area: operator;
      align-items: flex-start;
    }

    &__time {
      grid-area: time-dep;
      text-align: left;

      &--arrival {
        grid-area: time-arr;
        text-align: right;
      }
    }

    &__station {
      grid-area: station-dep;
      text-align: left;

      &--arrival {
        grid-area: station-arr;
        text-align: left;

        .station {
          align-items: flex-start;
        }
      }
    }

    &__status {
      grid-area: status;
      align-self: center;
      justify-content: center;
    }

    &__detail-row {
      grid-template-columns: 1fr;
    }
  }
}
