@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/typography' as typography;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/effect' as effect;
@use '../icon';
@use '../button/button' as button;
@use './upload-picture-card' as *;

$minor-image-size: spacing.primitive-variable(40);
$image-size: spacing.primitive-variable(140);

.#{$prefix} {
  display: flex;
  flex-direction: column;
  width: $image-size;
  position: relative;
  background: palette.semantic-variable(background, base);
  box-sizing: border-box;
  transition: transition.standard(border-color, fast);
  gap: spacing.semantic-variable(gap, base);

  &:hover:not(.#{$prefix}--readable) {
    border-color: palette.semantic-variable(border, brand);
  }

  &--readable {
    cursor: default;

    &:is(:focus, :focus-visible, :focus-within) {
      outline: none;
    }

    &:hover {
      border-color: palette.semantic-variable(border, neutral-faint);
    }

    .#{$prefix}__container {
      &:hover {
        border-color: palette.semantic-variable(border, neutral-faint);

        .#{$prefix}__actions--done,
        .#{$prefix}__actions--error {
          background: transparent;
        }

        .#{$prefix}__actions--done {
          opacity: 0;
          pointer-events: none;
        }

        .#{$prefix}__tools {
          opacity: 0;
          visibility: hidden;
        }

        .#{$prefix}__replace-label {
          opacity: 0;
          visibility: hidden;
        }
      }

      &:has(.#{$prefix}__actions--done) {
        &:is(:hover, :focus, :focus-visible, :focus-within) {
          border-color: palette.semantic-variable(border, neutral-faint);
          box-shadow: none;
        }
      }
    }
  }

  &:is(:focus, :focus-visible, :focus-within):not(.#{$prefix}--readable) {
    outline: none;
    .#{$prefix}__container {
      box-shadow: effect.variable(focus, primary);
    }

    .#{$prefix}__actions--done {
      opacity: 1;
      pointer-events: auto;

      .#{$prefix}__tools {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  &__container {
    width: $image-size;
    height: $image-size;
    border-radius: radius.variable(base);
    background: palette.semantic-variable(background, neutral-ghost);
    border: 1px solid palette.semantic-variable(border, neutral-faint);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;


    img {
      width: 100%;
      height: 100%;
    }

    &:hover {
      .#{$prefix}__actions--done {
        opacity: 1;
        pointer-events: auto;
        background: linear-gradient(
          0deg,
          palette.semantic-variable(overlay, subtle) 0%,
          palette.semantic-variable(overlay, subtle) 100%
        );

        .#{$prefix}__tools {
          opacity: 1;
          visibility: visible;
        }
      }

      .#{$prefix}__actions--error {
        background: linear-gradient(
          0deg,
          palette.semantic-variable(overlay, subtle) 0%,
          palette.semantic-variable(overlay, subtle) 100%
        );

        .#{$prefix}__error-message {
          opacity: 0;
          visibility: hidden;
        }

        .#{$prefix}__tools {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    &:has(.#{$prefix}__actions--done) {
      &:hover {
        border-color: palette.semantic-variable(border, brand);
      }

      &:is(:focus, :focus-visible, :focus-within) {
        border-color: palette.semantic-variable(border, brand);
        box-shadow: effect.variable(focus, brand);
      }
    }

    &:has(.#{$prefix}__actions--error) {
      border: 1px solid palette.semantic-variable(border, error);
      transition: transition.standard(border-color, fast);

      &:hover {
        border-color: palette.semantic-variable(border, error);
      }
    }
  }

  &:is(:focus, :focus-visible, :focus-within):not(.#{$prefix}--readable) {
    .#{$prefix}__container:has(.#{$prefix}__actions--error) {
      box-shadow: effect.variable(focus, error);
    }

    .#{$prefix}__actions--error {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: spacing.semantic-variable(gap, tiny);
    align-items: center;
    justify-content: center;
    max-width: 80%;
  }

  &__name {
    overflow: hidden;
    color: palette.semantic-variable(text, brand);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    width: 100%;
    @include typography.semantic-variable(label-primary);
  }

  &--disabled {
    cursor: not-allowed;
    pointer-events: none;

    .#{$prefix}__container {
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          0deg,
          palette.semantic-variable(surface, subtle) 0%,
          palette.semantic-variable(surface, subtle) 100%
        );
        z-index: 1;
      }
    }
  }

  &--replace-mode {
    cursor: pointer;

    .#{$prefix}__container:hover {
      .#{$prefix}__actions--done {
        opacity: 1;
        pointer-events: auto;
        background: palette.semantic-variable(overlay, subtle);

        .#{$prefix}__replace-label {
          opacity: 1;
          visibility: visible;
        }

        .#{$prefix}__tools {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }

  &__replace-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: palette.semantic-variable("overlay", default);
    color: palette.semantic-variable(text, fixed-light);
    border-radius: radius.variable(base);
    padding-block: spacing.semantic-variable(padding, vertical, tight);
    padding-inline: spacing.semantic-variable(padding, horizontal, base);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transition.standard(opacity, fast),
      transition.standard(visibility, fast);

    @include typography.semantic-variable(input);
  }

  &__size {
    color: palette.semantic-variable(text, neutral);
    @include typography.semantic-variable(annotation);
  }

  &__actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    z-index: 1;
    width: 100%;
    height: 100%;
    color: palette.semantic-variable(icon, neutral);
    transition: transition.standard(color, fast),
      transition.standard(background, fast),
      transition.standard(opacity, fast);


    &--loading {
      background: linear-gradient(
        0deg,
        palette.semantic-variable(overlay, subtle) 0%,
        palette.semantic-variable(overlay, subtle) 100%
      );
      display: flex;
      align-items: center;
      justify-content: center;

      .#{$prefix}__clear-actions-icon {
        position: absolute;
        top: spacing.semantic-variable(gap, base);
        right: spacing.semantic-variable(gap, base);
      }

      .#{$prefix}__loading-icon {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative;

        &::before {
          // allow-hardcoded: focus ring 2px border width for visual emphasis; no token for border-width > 1px
          border-width: 2px;
          border-style: solid;
          border-color: palette.semantic-variable(border, fixed-light);
          border-radius: 50%;
          content: '';
          height: spacing.semantic-variable(size, element, gentle);
          left: 50%;
          pointer-events: none;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          width: spacing.semantic-variable(size, element, gentle);
        }
      }
    }

    &--done {
      pointer-events: none;
      opacity: 0;
    }

    &--error {
      pointer-events: auto;
    }
  }

  &__error-message {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: spacing.semantic-variable(padding, horizontal, cozy);
    width: 100%;
    opacity: 1;
    visibility: visible;
    transition: transition.standard(opacity, fast),
      transition.standard(visibility, fast);
    gap: spacing.semantic-variable(gap, tight);
  }

  &__error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__error-message-text {
    color: palette.semantic-variable(text, error);
    text-align: center;
    @include typography.semantic-variable(label-primary);
  }


  &__tools {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-inline: spacing.semantic-variable(padding, horizontal, base-fixed);
    padding-block: spacing.semantic-variable(padding, vertical, base);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: transition.standard(opacity, fast),
      transition.standard(visibility, fast);
  }

  &__tools-content {
    display: flex;
    gap: spacing.semantic-variable(gap, slim);
  }

  &__tools .#{button.$prefix} .#{icon.$prefix} {
    font-size: spacing.semantic-variable(size, element, base);
  }

  &__size--sub {
    gap: spacing.semantic-variable(gap, slim);
  }

  &__size--minor {
    gap: spacing.semantic-variable(gap, none);
    width: $minor-image-size;
    border-radius: radius.variable(base);
    overflow: hidden;

    .#{$prefix}__container {
      width: $minor-image-size;
      height: $minor-image-size;

      &:hover {
        .#{$prefix}__actions {
          opacity: 1;
          pointer-events: auto;
          background: linear-gradient(
            0deg,
            palette.semantic-variable(overlay, subtle) 0%,
            palette.semantic-variable(overlay, subtle) 100%
          );
        }
      }
    }

    .#{$prefix}__actions {
      opacity: 0;
      pointer-events: none;
      transition: transition.standard(opacity, fast),
        transition.standard(background, fast);
    }
  }
}