// ============================================================================
// move.gl | Skeleton Loader Mixins
// ============================================================================
// Copyright 2025 Scape Agency BV
// Licensed under MIT License
// ============================================================================

////
/// Skeleton Loader Mixins
/// ===========================================================================
///
/// This module provides mixins for skeleton/placeholder loading animations.
///
/// @group Loaders
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0
/// @access public
////

@use "../../variables" as *;


// ============================================================================
// Keyframes
// ============================================================================

///
/// Skeleton shimmer animation keyframes.
///
@mixin keyframes_skeleton_shimmer {
    @keyframes skeleton-shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
}

///
/// Skeleton pulse animation keyframes.
///
@mixin keyframes_skeleton_pulse {
    @keyframes skeleton-pulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
}

///
/// Skeleton wave animation keyframes.
///
@mixin keyframes_skeleton_wave {
    @keyframes skeleton-wave {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
}

///
/// Skeleton fade animation keyframes.
///
@mixin keyframes_skeleton_fade {
    @keyframes skeleton-fade {
        0% { opacity: 0.3; background-color: rgba(255, 255, 255, 0.1); }
        50% { opacity: 0.6; background-color: rgba(255, 255, 255, 0.15); }
        100% { opacity: 0.3; background-color: rgba(255, 255, 255, 0.1); }
    }
}


// ============================================================================
// Skeleton Base Mixin
// ============================================================================

///
/// Base skeleton loader styles.
///
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Number} $border-radius [4px] - Border radius.
///
@mixin skeleton_base(
    $bg-color: $skeleton-bg,
    $border-radius: 4px
) {
    background-color: var(--skeleton-bg, $bg-color);
    border-radius: $border-radius;
    position: relative;
    overflow: hidden;
}


// ============================================================================
// Skeleton Loader Mixins
// ============================================================================

///
/// Shimmer skeleton loader (gradient sweep).
///
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Color} $highlight [rgba(255,255,255,0.2)] - Shimmer highlight color.
/// @param {Number} $border-radius [4px] - Border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin loader_skeleton_shimmer(
    $bg-color: $skeleton-bg,
    $highlight: $skeleton-highlight,
    $border-radius: 4px,
    $duration: 1.5s
) {
    @include skeleton_base($bg-color, $border-radius);
    background: linear-gradient(
        90deg,
        var(--skeleton-bg, $bg-color) 0%,
        var(--skeleton-highlight, $highlight) 50%,
        var(--skeleton-bg, $bg-color) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer $duration ease-in-out infinite;
}

///
/// Pulse skeleton loader (opacity).
///
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Number} $border-radius [4px] - Border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin loader_skeleton_pulse(
    $bg-color: $skeleton-bg,
    $border-radius: 4px,
    $duration: 1.5s
) {
    @include skeleton_base($bg-color, $border-radius);
    animation: skeleton-pulse $duration ease-in-out infinite;
}

///
/// Wave skeleton loader (sliding highlight).
///
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Color} $highlight [rgba(255,255,255,0.3)] - Wave highlight color.
/// @param {Number} $border-radius [4px] - Border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin loader_skeleton_wave(
    $bg-color: $skeleton-bg,
    $highlight: rgba(255, 255, 255, 0.3),
    $border-radius: 4px,
    $duration: 1.5s
) {
    @include skeleton_base($bg-color, $border-radius);

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--skeleton-highlight, $highlight) 50%,
            transparent 100%
        );
        animation: skeleton-wave $duration ease-in-out infinite;
    }
}

///
/// Fade skeleton loader.
///
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Number} $border-radius [4px] - Border radius.
/// @param {Time} $duration [2s] - Animation duration.
///
@mixin loader_skeleton_fade(
    $bg-color: $skeleton-bg,
    $border-radius: 4px,
    $duration: 2s
) {
    @include skeleton_base($bg-color, $border-radius);
    animation: skeleton-fade $duration ease-in-out infinite;
}


// ============================================================================
// Skeleton Element Mixins
// ============================================================================

///
/// Skeleton text line.
///
/// @param {Length} $width [100%] - Line width.
/// @param {Length} $height [16px] - Line height.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Number} $border-radius [4px] - Border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_text(
    $width: 100%,
    $height: 16px,
    $bg-color: $skeleton-bg,
    $border-radius: 4px,
    $duration: 1.5s
) {
    width: $width;
    height: $height;
    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
}

///
/// Skeleton paragraph (multiple text lines).
///
/// @param {Number} $lines [3] - Number of lines.
/// @param {Length} $line-height [16px] - Line height.
/// @param {Length} $gap [12px] - Gap between lines.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_paragraph(
    $lines: 3,
    $line-height: 16px,
    $gap: 12px,
    $bg-color: $skeleton-bg,
    $duration: 1.5s
) {
    display: flex;
    flex-direction: column;
    gap: $gap;

    span {
        height: $line-height;
        @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, 4px, $duration);

        &:last-child {
            width: 75%;
        }

        @for $i from 1 through $lines {
            &:nth-child(#{$i}) {
                animation-delay: calc(($i - 1) * 0.1s);
            }
        }
    }
}

///
/// Skeleton circle (avatar placeholder).
///
/// @param {Length} $size [48px] - Circle size.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_circle(
    $size: 48px,
    $bg-color: $skeleton-bg,
    $duration: 1.5s
) {
    width: $size;
    height: $size;
    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, 50%, $duration);
}

///
/// Skeleton rectangle (image placeholder).
///
/// @param {Length} $width [100%] - Rectangle width.
/// @param {Length} $height [200px] - Rectangle height.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
/// @param {Number} $border-radius [8px] - Border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_rectangle(
    $width: 100%,
    $height: 200px,
    $bg-color: $skeleton-bg,
    $border-radius: 8px,
    $duration: 1.5s
) {
    width: $width;
    height: $height;
    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
}


// ============================================================================
// Skeleton Layout Mixins
// ============================================================================

///
/// Skeleton card layout.
///
/// @param {Length} $width [300px] - Card width.
/// @param {Length} $image-height [180px] - Image placeholder height.
/// @param {Length} $padding [16px] - Card padding.
/// @param {Color} $bg-color [rgba(255,255,255,0.05)] - Card background.
/// @param {Number} $border-radius [12px] - Card border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_card(
    $width: 300px,
    $image-height: 180px,
    $padding: 16px,
    $bg-color: rgba(255, 255, 255, 0.05),
    $border-radius: 12px,
    $duration: 1.5s
) {
    width: $width;
    background: var(--skeleton-card-bg, $bg-color);
    border-radius: $border-radius;
    overflow: hidden;

    .skeleton-image {
        width: 100%;
        height: $image-height;
        @include loader_skeleton_shimmer($skeleton-bg, $skeleton-highlight, 0, $duration);
    }

    .skeleton-content {
        padding: $padding;

        .skeleton-title {
            @include skeleton_text(70%, 20px, $skeleton-bg, 4px, $duration);
            margin-bottom: 12px;
        }

        .skeleton-text {
            @include skeleton_text(100%, 14px, $skeleton-bg, 4px, $duration);
            margin-bottom: 8px;

            &:last-child {
                width: 60%;
            }
        }
    }
}

///
/// Skeleton list item layout.
///
/// @param {Length} $avatar-size [40px] - Avatar size.
/// @param {Length} $gap [12px] - Gap between avatar and content.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_list_item(
    $avatar-size: 40px,
    $gap: 12px,
    $bg-color: $skeleton-bg,
    $duration: 1.5s
) {
    display: flex;
    align-items: center;
    gap: $gap;
    padding: 12px 0;

    .skeleton-avatar {
        @include skeleton_circle($avatar-size, $bg-color, $duration);
        flex-shrink: 0;
    }

    .skeleton-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .skeleton-title {
            @include skeleton_text(60%, 14px, $bg-color, 4px, $duration);
        }

        .skeleton-subtitle {
            @include skeleton_text(40%, 12px, $bg-color, 4px, $duration);
        }
    }
}

///
/// Skeleton table row.
///
/// @param {Number} $columns [4] - Number of columns.
/// @param {Length} $height [20px] - Cell height.
/// @param {Length} $gap [16px] - Gap between cells.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_table_row(
    $columns: 4,
    $height: 20px,
    $gap: 16px,
    $bg-color: $skeleton-bg,
    $duration: 1.5s
) {
    display: flex;
    gap: $gap;
    padding: 12px 0;

    span {
        flex: 1;
        height: $height;
        @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, 4px, $duration);

        @for $i from 1 through $columns {
            &:nth-child(#{$i}) {
                animation-delay: calc(($i - 1) * 0.1s);
            }
        }
    }
}

///
/// Skeleton form field.
///
/// @param {Length} $label-width [80px] - Label width.
/// @param {Length} $input-height [40px] - Input height.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
/// @param {Number} $border-radius [6px] - Input border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_form_field(
    $label-width: 80px,
    $input-height: 40px,
    $bg-color: $skeleton-bg,
    $border-radius: 6px,
    $duration: 1.5s
) {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .skeleton-label {
        @include skeleton_text($label-width, 14px, $bg-color, 4px, $duration);
    }

    .skeleton-input {
        width: 100%;
        height: $input-height;
        @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
    }
}

///
/// Skeleton button.
///
/// @param {Length} $width [120px] - Button width.
/// @param {Length} $height [40px] - Button height.
/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
/// @param {Number} $border-radius [6px] - Button border radius.
/// @param {Time} $duration [1.5s] - Animation duration.
///
@mixin skeleton_button(
    $width: 120px,
    $height: 40px,
    $bg-color: $skeleton-bg,
    $border-radius: 6px,
    $duration: 1.5s
) {
    width: $width;
    height: $height;
    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
}