@use '../globals' as *;

/**
 * ProgressBar Component Styles
 *
 * Styling for progress indicators with support for multiple variants,
 * determinate/indeterminate modes, and accessibility features.
 *
 * @package MultilingualPressZone
 * @since 1.0.0
 */

/* ==========================================================================
   Variables
   ========================================================================== */

// Progress bar colors
$progress-default-bg: #e0e0e0;
$progress-default-bar: #2271b1;
$progress-success-bar: #00a32a;
$progress-warning-bar: #f0b849;
$progress-error-bar: #d63638;

// Dark mode colors
$progress-dark-bg: #3c3c3c;
$progress-dark-bar: lighten($progress-default-bar, 15%);

// Dimensions
$progress-height: 20px;
$progress-border-radius: 4px;
$progress-transition: width 0.3s ease;

// Animation timing
$progress-indeterminate-duration: 1.5s;

/* ==========================================================================
   Base Styles
   ========================================================================== */

.mpz-progress-bar {
    width: 100%;
    margin-bottom: 16px;

    // Label
    &__label {
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #1e1e1e;
        line-height: 1.4;
    }

    // Track container
    &__track {
        position: relative;
        width: 100%;
        height: $progress-height;
        background-color: $progress-default-bg;
        border-radius: $progress-border-radius;
        overflow: hidden;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    // Progress bar fill
    &__bar {
        height: 100%;
        width: 0;
        background-color: $progress-default-bar;
        border-radius: $progress-border-radius;
        transition: $progress-transition;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);

        // Smooth animation using GPU acceleration
        will-change: width;
        transform: translateZ(0);
    }

    // Striped pattern for animated state
    &--animated {
        .mpz-progress-bar__bar {
            background-image: linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.15) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(255, 255, 255, 0.15) 75%,
                transparent 75%,
                transparent
            );
            background-size: 20px 20px;
            animation: mpz-progress-stripes 1s linear infinite;
        }
    }

    // Percentage text
    &__percentage {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 11px;
        font-weight: 600;
        color: #1e1e1e;
        line-height: 1;
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
        pointer-events: none;
        z-index: 1;
    }

    /* ==========================================================================
       Variants
       ========================================================================== */

    // Success variant (green)
    &--success {
        .mpz-progress-bar__bar {
            background-color: $progress-success-bar;
        }
    }

    // Warning variant (yellow/orange)
    &--warning {
        .mpz-progress-bar__bar {
            background-color: $progress-warning-bar;
        }

        .mpz-progress-bar__percentage {
            color: #1e1e1e;
        }
    }

    // Error variant (red)
    &--error {
        .mpz-progress-bar__bar {
            background-color: $progress-error-bar;
        }
    }

    /* ==========================================================================
       Indeterminate Mode
       ========================================================================== */

    &--indeterminate {
        .mpz-progress-bar__bar {
            width: 100%;
            transform-origin: left;
            animation: mpz-progress-indeterminate $progress-indeterminate-duration ease-in-out infinite;
        }

        .mpz-progress-bar__percentage {
            display: none;
        }
    }

    /* ==========================================================================
       Complete State
       ========================================================================== */

    &--complete {
        .mpz-progress-bar__bar {
            // Add completion pulse animation
            animation: mpz-progress-complete 0.6s ease-out;
        }
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

// Striped animation for active progress
@keyframes mpz-progress-stripes {
    0% {
        background-position: 20px 0;
    }
    100% {
        background-position: 0 0;
    }
}

// Indeterminate loading animation
@keyframes mpz-progress-indeterminate {
    0% {
        transform: translateX(-100%) scaleX(0.3);
    }

    50% {
        transform: translateX(0) scaleX(0.5);
    }

    100% {
        transform: translateX(100%) scaleX(0.3);
    }
}

// Completion pulse animation
@keyframes mpz-progress-complete {
    0% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                    0 0 8px rgba(0, 163, 42, 0.4);
    }

    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

.mpz-progress-bar--small {
    .mpz-progress-bar__track {
        height: 12px;
    }

    .mpz-progress-bar__percentage {
        font-size: 9px;
    }
}

.mpz-progress-bar--large {
    .mpz-progress-bar__track {
        height: 28px;
    }

    .mpz-progress-bar__percentage {
        font-size: 13px;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .mpz-progress-bar {
        &__label {
            color: #e4e4e4;
        }

        &__track {
            background-color: $progress-dark-bg;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        &__bar {
            background-color: $progress-dark-bar;
        }

        &__percentage {
            color: #e4e4e4;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        }

        // Variant adjustments for dark mode
        &--success .mpz-progress-bar__bar {
            background-color: lighten($progress-success-bar, 10%);
        }

        &--warning .mpz-progress-bar__bar {
            background-color: lighten($progress-warning-bar, 5%);
        }

        &--error .mpz-progress-bar__bar {
            background-color: lighten($progress-error-bar, 10%);
        }
    }
}

// Explicit dark mode class (WordPress admin color schemes)
body.admin-color-midnight,
body.admin-color-ectoplasm {
    .mpz-progress-bar {
        &__label {
            color: #e4e4e4;
        }

        &__track {
            background-color: $progress-dark-bg;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        &__bar {
            background-color: $progress-dark-bar;
        }

        &__percentage {
            color: #e4e4e4;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        }

        &--success .mpz-progress-bar__bar {
            background-color: lighten($progress-success-bar, 10%);
        }

        &--warning .mpz-progress-bar__bar {
            background-color: lighten($progress-warning-bar, 5%);
        }

        &--error .mpz-progress-bar__bar {
            background-color: lighten($progress-error-bar, 10%);
        }
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
    .mpz-progress-bar {
        &__bar {
            transition: none;
            animation: none;
        }

        &--indeterminate .mpz-progress-bar__bar {
            animation: none;
            width: 100%;
        }

        &--complete .mpz-progress-bar__bar {
            animation: none;
        }
    }
}

// High contrast mode support
@media (prefers-contrast: high) {
    .mpz-progress-bar {
        &__track {
            border: 1px solid currentColor;
            box-shadow: none;
        }

        &__bar {
            box-shadow: none;
        }

        &__percentage {
            text-shadow: none;
            font-weight: 700;
        }
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 782px) {
    .mpz-progress-bar {
        &__label {
            font-size: 14px;
        }

        &__percentage {
            font-size: 12px;
        }
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .mpz-progress-bar {
        &__track {
            border: 1px solid #000;
            box-shadow: none;
        }

        &__bar {
            background-color: #000 !important;
            box-shadow: none;
        }

        &--indeterminate .mpz-progress-bar__bar {
            animation: none;
        }
    }
}