// =============================================================================
// BUTTONS COMPONENT - WORDPRESS & CUSTOM BUTTON STYLES
// =============================================================================

@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;
@use 'sass:color';

// Wrap all button styles with .alt-audit-section for CSS isolation
.alt-audit-section {
  // -------------------------------------
  // WordPress Default Button Classes
  // -------------------------------------

  // Base button styles for all buttons
  .button,
  button[type='submit'],
  button[type='button'],
  input[type='submit'],
  input[type='button'] {
    @include apple-button('secondary');

    // Ensure proper sizing with !important to override WordPress defaults
    min-height: $button-height !important;
    line-height: $button-height !important;

    // Icon spacing
    .dashicons {
      margin-right: $space-2;
      font-size: 18px;
      transition: transform 0.25s $ease-apple;
      vertical-align: middle;
    }

    // Enhanced hover with icon movement
    &:hover .dashicons {
      transform: translateX(2px);
    }
  }

  button.notice-dismiss {
    position: absolute;
    top: 8px;
    right: 4px;
    border: none;
    margin: 0;
    padding: 9px;
    background: 0 0;
    color: #787c82;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-size: 14px;
    height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 20px !important;
    line-height: 20px !important;
    &::before {
      background: 0 0;
      color: #787c82;
      content: '\f153';
      display: block;
      font: normal 16px / 20px dashicons;
      speak: never;
      height: 20px;
      text-align: center;
      width: 20px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  // Primary button variant
  .button.button-primary {
    @include apple-button('primary');

    min-height: $button-height !important;
    line-height: $button-height !important;

    .dashicons {
      margin-right: $space-2;
      font-size: 18px;
      transition: transform 0.25s $ease-apple;
      vertical-align: middle;
    }

    &:hover {
      box-shadow: $shadow-lg;
      transform: translateY(-2px);

      .dashicons {
        transform: translateX(2px) scale(1.05);
      }
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Secondary button variant (default WordPress)
  .button.button-secondary {
    @include apple-button('secondary');

    min-height: $button-height !important;
    line-height: $button-height !important;

    .dashicons {
      margin-right: $space-2;
      font-size: 18px;
      vertical-align: middle;
    }

    &:hover {
      box-shadow: $shadow-md;
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Hero button (larger)
  .button-hero {
    @include apple-button('primary');

    height: 52px !important;
    padding: $space-4 $space-8 !important;
    font-size: $font-size-lg !important;
    font-weight: $font-weight-bold !important;

    .dashicons {
      margin-right: $space-3;
      font-size: 24px;
      vertical-align: middle;
    }

    &:hover {
      box-shadow: $shadow-xl;
      transform: translateY(-3px) scale(1.02);
    }

    &:active {
      transform: translateY(-1px) scale(1);
    }
  }

  // Small button variant
  .button-small {
    height: 32px !important;
    padding: $space-1 $space-3 !important;
    font-size: $font-size-sm !important;
    line-height: 32px !important;

    .dashicons {
      margin-right: $space-1;
      font-size: 16px;
    }
  }

  // Large button variant
  .button-large {
    height: 48px !important;
    padding: $space-3 $space-6 !important;
    font-size: $font-size-lg !important;
    line-height: 48px !important;

    .dashicons {
      margin-right: $space-2;
      font-size: 20px;
    }
  }

  // -------------------------------------
  // Alt Audit Custom Button Classes
  // -------------------------------------

  // Custom primary button (used in templates)
  .alt-audit-btn-primary {
    @include apple-button('primary');
    @include flex-center;

    position: relative !important;
    gap: $space-2 !important;
    min-height: $button-height !important;
    text-decoration: none !important;
    overflow: hidden !important;

    // Animated shine effect
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      transition: left 0.5s ease;
    }

    &:hover {
      box-shadow: $shadow-lg;
      transform: translateY(-2px);

      &::before {
        left: 100%;
      }
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Custom secondary button
  .alt-audit-btn-secondary {
    @include apple-button('secondary');
    @include flex-center;

    gap: $space-2 !important;
    min-height: $button-height !important;
    text-decoration: none !important;

    &:hover {
      box-shadow: $shadow-md;
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Success button variant
  .alt-audit-btn-success {
    @include apple-button('success');

    &:hover {
      box-shadow: $shadow-lg;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Warning button variant
  .alt-audit-btn-warning {
    @include apple-button('warning');

    &:hover {
      box-shadow: $shadow-lg;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Danger/Error button variant
  .alt-audit-btn-danger {
    @include apple-button('danger');

    &:hover {
      box-shadow: $shadow-lg;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Full width button
  .alt-audit-btn-full-width {
    justify-content: center !important;
    width: 100% !important;
  }

  // -------------------------------------
  // Button Groups
  // -------------------------------------

  .alt-audit-button-group {
    @include flex-start;

    flex-wrap: wrap;
    gap: $space-3;

    @include media-down(sm) {
      flex-direction: column;

      .button {
        justify-content: center;
        width: 100%;
      }
    }
  }

  // -------------------------------------
  // Action Buttons (used in step actions)
  // -------------------------------------

  .alt-audit-action-btn {
    @include flex-center;

    flex-direction: column !important;
    gap: $space-2 !important;
    padding: $space-4 !important;
    border: 1px solid $color-gray-200 !important;
    border-radius: $radius-apple-sm !important;
    background: $color-background !important;
    color: $color-gray-700 !important;
    text-decoration: none !important;
    transition: all 0.3s $ease-apple !important;
    cursor: pointer !important;

    .action-icon {
      width: 40px;
      height: 40px;
      border-radius: $radius-full;
      background: rgba($color-primary, 0.1);
      color: $color-primary;

      @include flex-center;

      transition: all 0.3s $ease-apple;

      .dashicons {
        font-size: 20px;
      }
    }

    .action-label {
      @include body-small;

      font-weight: $font-weight-medium;
      text-align: center;
    }

    &:hover {
      border-color: $color-primary;
      background: rgba($color-primary, 0.05);
      box-shadow: $shadow-md;
      transform: translateY(-4px);

      .action-icon {
        background: rgba($color-primary, 0.2);
        transform: scale(1.15);
      }
    }

    &.action-primary {
      border-color: rgba($color-primary, 0.3);
      background: linear-gradient(135deg, rgba($color-primary, 0.05) 0%, rgba($color-primary, 0.02) 100%);

      &:hover {
        background: linear-gradient(135deg, rgba($color-primary, 0.1) 0%, rgba($color-primary, 0.05) 100%);
        box-shadow:
          $shadow-lg,
          0 4px 12px rgba($color-primary, 0.2);
      }
    }

    &:active {
      transform: translateY(-2px);
    }
  }

  // -------------------------------------
  // Operation Buttons (bulk tools)
  // -------------------------------------

  .alt-audit-operation-button {
    @include apple-button('primary');

    position: relative !important;
    gap: $space-2 !important;
    width: 100% !important;
    min-height: $button-height !important;
    overflow: hidden !important;

    @include flex-center;

    // Premium shimmer effect
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
    }

    .dashicons {
      font-size: 20px;
      transition: all 0.25s $ease-apple;
    }

    &:hover {
      box-shadow:
        $shadow-lg,
        0 8px 24px rgba($color-primary, 0.25);
      transform: translateY(-3px);

      &::before {
        left: 100%;
      }

      .dashicons {
        transform: scale(1.1);
      }
    }

    &:active {
      transform: translateY(-1px);
    }

    &.button-secondary {
      @include apple-button('secondary');
    }
  }

  // -------------------------------------
  // Icon Buttons
  // -------------------------------------

  .alt-audit-icon-button {
    @include flex-center;

    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid $color-gray-300 !important;
    border-radius: $radius-apple-sm !important;
    background: $color-background !important;
    color: $color-gray-600 !important;
    transition: all 0.25s $ease-apple !important;
    cursor: pointer !important;

    .dashicons {
      font-size: 18px;
    }

    &:hover {
      border-color: $color-primary;
      background: $color-gray-50;
      color: $color-primary;
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }

    &:focus {
      box-shadow: $shadow-apple-focus;
      outline: none;
    }
  }

  // -------------------------------------
  // Loading States
  // -------------------------------------

  .button,
  .alt-audit-btn-primary,
  .alt-audit-btn-secondary,
  .alt-audit-operation-button {
    &.is-loading,
    &[disabled],
    &:disabled {
      position: relative;
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;

      &::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        margin-left: $space-2;
        border: 2px solid transparent;
        border-radius: 50%;
        animation: button-spin 0.8s linear infinite;
        border-top-color: currentcolor;
      }

      @keyframes button-spin {
        to {
          transform: rotate(360deg);
        }
      }
    }
  }

  // -------------------------------------
  // Button with Icon Alignment
  // -------------------------------------

  .alt-audit-button-with-icon-left {
    .dashicons {
      margin-right: $space-2;
      margin-left: 0;
    }
  }

  .alt-audit-button-with-icon-right {
    .dashicons {
      margin-right: 0;
      margin-left: $space-2;
      order: 2;
    }
  }

  // -------------------------------------
  // Reduced Motion Support
  // -------------------------------------

  @include reduced-motion {
    .button,
    .alt-audit-btn-primary,
    .alt-audit-btn-secondary,
    .button.button-primary,
    .button.button-secondary,
    .alt-audit-operation-button,
    .alt-audit-action-btn,
    .alt-audit-icon-button {
      transition: none;

      &:hover,
      &:active {
        transform: none;
      }

      &::before {
        display: none;
      }

      .dashicons {
        transition: none;

        &:hover {
          transform: none;
        }
      }
    }
  }

  // -------------------------------------
  // High Contrast Mode
  // -------------------------------------

  @include high-contrast {
    .button,
    .alt-audit-btn-primary,
    .alt-audit-btn-secondary,
    .button.button-primary,
    .button.button-secondary,
    .alt-audit-operation-button,
    .alt-audit-action-btn {
      border: 2px solid currentcolor !important;
      box-shadow: none !important;

      &:focus {
        outline: 3px solid currentcolor !important;
        outline-offset: 3px !important;
      }
    }
  }

  // -------------------------------------
  // Dark Mode Support
  // -------------------------------------

  @include dark-mode {
    .button,
    .button.button-secondary {
      border-color: rgba(255, 255, 255, 0.15);
      background: rgba($dark-surface, 0.8);
      color: $dark-text-primary;

      &:hover {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba($dark-surface, 0.9);
      }
    }

    .alt-audit-action-btn {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba($dark-surface, 0.6);
      color: $dark-text-primary;

      &:hover {
        border-color: rgba($color-primary, 0.5);
        background: rgba($dark-surface, 0.8);
      }
    }

    .alt-audit-icon-button {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba($dark-surface, 0.6);
      color: $dark-text-secondary;

      &:hover {
        border-color: $color-primary;
        background: rgba($dark-surface, 0.8);
        color: $color-primary;
      }
    }
  }
} // End .alt-audit-section wrapper