@use 'sass:map';
@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/spacing';
@use '@mezzanine-ui/system/typography';
@use '@mezzanine-ui/system/typography/utils' as utils-typography;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/z-index' as z-index;
@use './notification-center' as *;
@use '../drawer/drawer' as drawer;

// Severity configuration map
$severity-configs: (
  error: (
    severity-icon-color: palette.semantic-variable(icon, error),
  ),
  warning: (
    severity-icon-color: palette.semantic-variable(icon, warning),
  ),
  info: (
    severity-icon-color: palette.semantic-variable(icon, info),
  ),
  success: (
    severity-icon-color: palette.semantic-variable(icon, success),
  ),
);

// Drawer type configuration
$drawer-type-config: (
  border-radius: 0,
  background-color: transparent,
  width: 100%,
  box-shadow: none,
  cursor: pointer,
  hover-background-color: palette.semantic-variable(background, neutral-ghost),
  body-gap: spacing.semantic-variable(gap, base),
);

// Drawer container configuration
$drawer-container-config: (
  width: spacing.semantic-variable(size, container, compact),
  min-width: spacing.semantic-variable(size, container, compact),
  max-width: spacing.semantic-variable(size, container, compact),
);

// Get severity configuration value
@function _get-severity-value($severity, $property) {
  $severity-map: map.get($severity-configs, $severity);

  @if $severity-map {
    $value: map.get($severity-map, $property);

    @return $value;
  }

  @return null;
}

// Get drawer type configuration value
@function _get-drawer-type-value($property) {
  $value: map.get($drawer-type-config, $property);

  @return $value;
}

// Get drawer container configuration value
@function _get-drawer-container-value($property) {
  $value: map.get($drawer-container-config, $property);

  @return $value;
}

// Apply severity styles
@mixin _apply-severity($severity) {
  $severity-icon-color: _get-severity-value($severity, severity-icon-color);

  .#{$prefix}__severity-icon {
    @if $severity-icon-color {
      color: $severity-icon-color;
    }
  }
}

// Apply drawer type styles
@mixin _apply-drawer-type() {
  $border-radius: _get-drawer-type-value(border-radius);
  $background-color: _get-drawer-type-value(background-color);
  $width: _get-drawer-type-value(width);
  $box-shadow: _get-drawer-type-value(box-shadow);
  $cursor: _get-drawer-type-value(cursor);
  $hover-background-color: _get-drawer-type-value(hover-background-color);
  $body-gap: _get-drawer-type-value(body-gap);

  @if $border-radius {
    border-radius: $border-radius;
  }

  @if $background-color {
    background-color: $background-color;
  }

  @if $width {
    width: $width;
  }

  @if $box-shadow {
    box-shadow: $box-shadow;
  }

  @if $cursor {
    cursor: $cursor;
  }

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

  .#{$prefix}__body {
    @if $body-gap {
      gap: $body-gap;
    }
  }
}

// Apply drawer container styles
@mixin _apply-drawer-container() {
  $width: _get-drawer-container-value(width);
  $min-width: _get-drawer-container-value(min-width);
  $max-width: _get-drawer-container-value(max-width);

  // TODO: 先短解 drawer 的 content padding 為 0，之後再調整
  .#{drawer.$prefix}__content {
    padding: 0;
  }

  @if $width {
    width: $width;
  }

  @if $min-width {
    min-width: $min-width;
  }

  @if $max-width {
    max-width: $max-width;
  }
}

.#{$prefix} {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: spacing.semantic-variable(size, container, standard);
  height: fit-content;
  padding: spacing.semantic-variable(padding, vertical, spacious) spacing.semantic-variable(padding, horizontal, spacious);
  border-radius: radius.variable(roomy);
  background-color: palette.semantic-variable("background", base);
  box-shadow: effect.variable(shadow, floating);
  box-sizing: border-box;
  pointer-events: auto;
  gap: spacing.semantic-variable(gap, base);
  transition: transition.standard(background-color, fast), transition.standard(box-shadow, fast);
  border: 1px solid palette.semantic-variable(border, neutral-faint);

  // Drawer type modifier
  &--drawer {
    padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, tiny-fixed) spacing.semantic-variable(padding, vertical, spacious);
    border: 0;
    @include _apply-drawer-type();
  }

  // Severity modifiers
  @each $severity in $severities {
    &--#{$severity} {
      @include _apply-severity($severity);
    }
  }

  // Element styles
  &__prepend-tips {
    color: palette.semantic-variable(text, neutral);
    @include typography.semantic-variable(body);

    padding-bottom: spacing.semantic-variable(padding, vertical, micro);

    &:first-child {
      padding-block-start: 0;
    }

    &:not(:first-child) {
      margin-block-start: spacing.semantic-variable(gap, calm);
    }
  }

  &__append-tips {
    color: palette.semantic-variable(text, neutral);
    @include typography.semantic-variable(body);
  }

  &__icon-container {
    flex: 0 0;
  }

  &__time-stamp-popper {
    padding: spacing.semantic-variable(padding, vertical, tiny) spacing.semantic-variable(padding, horizontal, base);
    border-radius: radius.variable(tiny);
    background-color: palette.semantic-variable("background", fixed-dark);
    color: palette.semantic-variable(text, fixed-light);
    box-shadow: effect.variable(shadow, floating);
  }

  &__time-stamp-popper-arrow {
    color: palette.semantic-variable("background", fixed-dark);
  }

  &__time-stamp {
    width: fit-content;
    max-width: 100%;
  }

  &__time-stamp-text {
    color: palette.semantic-variable(text, fixed-light);
    @include typography.semantic-variable(caption);
  }

  &__body {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: spacing.semantic-variable(gap, comfort);
  }

  &__title {
    padding-top: spacing.semantic-variable(padding, vertical, tiny);
    color: palette.semantic-variable(text, neutral-solid);
    font-feature-settings: 'liga' off, 'clig' off;
    margin: 0;
    @include typography.semantic-variable(label-primary-highlight);
  }

  &__dot-icon-button {
    padding: spacing.semantic-variable(padding, vertical, tight);
    // 讓 dot 按鈕對齊區塊右上（而非預設 align-items: stretch 造成的垂直置中）。
    // React 該按鈕外層還包一層 `<div class="mzn-dropdown">`，wrapper 是 flex item
    // 而 button 不是；Angular 的 `<button>` 直接當 flex item 會被拉成全高並把 icon
    // 置中，因此以 align-self: flex-start 補齊 — React 側 button 非 flex item，no-op。
    align-self: flex-start;
  }

  &__body-content {
    display: flex;
    flex-direction: column;
    gap: spacing.semantic-variable(gap, base);
  }

  &__content {
    color: palette.semantic-variable(text, neutral-solid);
    font-feature-settings: 'liga' off, 'clig' off;
    @include typography.semantic-variable(body);
  }

  &__action {
    display: flex;
  }

  &__severity-icon {
    color: var(--#{$prefix}-color);
  }

  &__close-icon {
    color: palette.semantic-variable(text, secondary);
    cursor: pointer;

    &:hover {
      color: palette.semantic-variable(text, primary);
    }
  }

  &__drawer {
    @include _apply-drawer-container();
  }

  &__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: spacing.semantic-variable(padding, horizontal, spacious);
    padding-block: spacing.semantic-variable(padding, vertical, base);
    border-bottom: 1px solid palette.semantic-variable(separator, neutral-faint);
  }

  &__empty-notifications {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: spacing.semantic-variable(gap, slim);
  }

  &__notifications-container {
    padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, spacious);
    height: 100%;
  }
}

// Root container styles
.#{$prefix}-root {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: spacing.semantic-variable(gap, base);
  position: fixed;
  top: spacing.semantic-variable(padding, vertical, base);
  right: spacing.semantic-variable(padding, horizontal, spacious);
  z-index: z-index.get(feedback);
  overflow: visible;
  pointer-events: none;

  .#{$prefix}__view-all-button {
    display: flex;
    justify-content: center;
    width: 100%;
    pointer-events: auto;
  }

  .#{$prefix}__view-all-button-text {
    box-shadow: effect.variable(shadow, floating);
  }
}