@use '../abstracts' as *;
@use 'button';

/**
 * Modal Component
 * Generic modal dialog used for Report and other actions.
 * 
 * Note: Modals render outside the wrapper, so they need explicit color values.
 * We use SCSS variables which compile to actual values for solid backgrounds.
 */

.presszone-comments-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $presszone-comments-modal-overlay;
    z-index: calc(#{$presszone-comments-z-index-toast} + 10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $presszone-comments-spacing-xl;
    animation: presszone-comments-modal-fade-in $presszone-comments-duration-normal $presszone-comments-ease-smooth;
}

.presszone-comments-modal {
    // Key Structural Styles (No Color)
    border-width: $presszone-comments-border-width;
    border-style: solid;
    border-radius: $presszone-comments-radius-lg;
    box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-shadow; // Default shadow var
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    animation: presszone-comments-modal-slide-in $presszone-comments-duration-normal $presszone-comments-ease-smooth;

    // FALLBACK: Ensure solid background even without theme class
    background-color: $presszone-comments-bg-primary;
    border-color: $presszone-comments-border;
    color: $presszone-comments-text-primary;

    // Theme Logic (determines background via 'modal-bg' key in theme map)
    // For inherit mode, 'modal-bg' uses SCSS variables with hardcoded fallback colors
    @include theme-props(('background-color': 'modal-bg',
            'border-color': 'modal-border',
            'color': 'dropdown-text'
        ));

    // Dark mode fallback and shadow override
    @include dark-mode {
        background-color: $presszone-comments-dark-bg-secondary;
        border-color: $presszone-comments-dark-border;
        color: $presszone-comments-dark-text-primary;
        box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-dark-shadow;
    }

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $presszone-comments-spacing-xs $presszone-comments-spacing-lg;
        border-bottom-width: $presszone-comments-border-width;
        border-bottom-style: solid;

        @include theme-props(('border-bottom-color': 'modal-border'
            ));
    }

    &__title {
        font-size: $presszone-comments-font-size-lg;
        font-weight: 600;
        margin: 0;

        @include theme-props(('color': 'dropdown-text'
            ));
    }

    &__header-controls {
        display: flex;
        align-items: center;
        gap: $presszone-comments-spacing-sm;
    }

    &__close {
        background: none;
        border: none;
        font-size: $presszone-comments-font-size-xl;
        cursor: pointer;
        padding: $presszone-comments-spacing-xs;
        border-radius: $presszone-comments-radius-sm;
        transition: all $presszone-comments-duration-normal;

        @include theme-props(('color': 'text-muted'
            ));

        &:hover {
            @include theme-props(('color': 'text-primary',
                    'background-color': 'bg-hover'
                ));
        }
    }

    &__content {
        padding: $presszone-comments-spacing-xl;
    }

    &__description {
        font-size: $presszone-comments-font-size-sm;
        margin-bottom: $presszone-comments-spacing-lg;
        line-height: 1.5;

        @include theme-props(('color': 'text-secondary'
            ));
    }

    &__quick-reasons {
        display: flex;
        flex-wrap: wrap;
        gap: $presszone-comments-spacing-sm;
        margin-bottom: $presszone-comments-spacing-lg;
    }

    &__quick-reason {
        @extend %presszone-comments-btn-base;
        border-width: $presszone-comments-border-width;
        border-style: solid;
        cursor: pointer;
        transition: all $presszone-comments-duration-normal;

        @include theme-props(('background-color': 'bg-secondary',
                'border-color': 'border',
                'color': 'text-secondary'
            ));

        &:hover {
            @include theme-props(('background-color': 'bg-hover',
                    'color': 'text-primary'
                    // Border color accent is static, use direct var or map if needed
                    // 'border-color': 'accent' (if added to map)
                ));
            border-color: $presszone-comments-accent; // Manual override for now as accent is static
        }

        &--active {
            background-color: $presszone-comments-bg-hover-accent; // Static var ok for now, or map
            color: $presszone-comments-accent;
            border-color: $presszone-comments-accent;
            font-weight: 600;
        }

        // Inherit mode active/hover states might need checking
        .presszone-comments-theme--inherit &--active {
            background-color: $presszone-comments-inherit-bg-hover-accent;
            color: inherit;
            border-color: currentColor;
        }
    }

    &__textarea {
        width: 100%;
        min-height: 100px;
        padding: $presszone-comments-spacing-md;
        border-width: $presszone-comments-border-width;
        border-style: solid;
        border-radius: $presszone-comments-radius-md;
        font-size: $presszone-comments-font-size-base;
        font-family: inherit;
        resize: vertical;
        box-sizing: border-box;

        @include theme-props(('background-color': 'bg-secondary',
                'border-color': 'border',
                'color': 'text-primary'
            ));

        &:focus {
            outline: none;
        }

        &:focus-visible {
            border-color: $presszone-comments-accent;
            box-shadow: 0 0 0 2px rgba($presszone-comments-accent, 0.2);
        }

        &::placeholder {
            @include theme-props(('color': 'text-muted'
                ));
        }
    }

    &__char-count {
        text-align: right;
        font-size: $presszone-comments-font-size-xs;
        margin-top: $presszone-comments-spacing-sm;

        @include theme-props(('color': 'text-muted'
            ));
    }

    &__char-current {
        @include theme-props(('color': 'text-secondary'
            ));
    }

    &__actions {
        display: flex;
        justify-content: flex-end;
        gap: $presszone-comments-spacing-md;
        padding: $presszone-comments-spacing-lg $presszone-comments-spacing-xl;
        border-top-width: $presszone-comments-border-width;
        border-top-style: solid;

        @include theme-props(('border-top-color': 'modal-border'
            ));
    }

    &__cancel {
        @extend %presszone-comments-btn-base;
        @extend .presszone-comments-btn--ghost;
        font-weight: 600;
        cursor: pointer;
        transition: all $presszone-comments-duration-normal;
        border-width: $presszone-comments-border-width;
        border-style: solid;

        @include theme-props(('background-color': 'bg-secondary',
                'color': 'text-secondary',
                'border-color': 'border'
            ));

        &:hover {
            @include theme-props(('background-color': 'bg-hover',
                    'color': 'text-primary'
                ));
        }
    }

    &__submit {
        @extend %presszone-comments-btn-base;
        @extend .presszone-comments-btn--primary;
        font-weight: 600;
        cursor: pointer;
        transition: all $presszone-comments-duration-normal;
        border: none;

        &:hover {
            opacity: 0.9;
        }

        // Dark mode specific text color if needed, or stick to static white
        @include dark-mode {
            color: $presszone-comments-dark-bg-primary;
        }
    }
}

// Form group styling for modals
.presszone-comments-form-group {
    margin-bottom: $presszone-comments-spacing-lg;

    &:last-child {
        margin-bottom: 0;
    }

    label,
    .presszone-comments-form-label {
        display: block;
        font-size: $presszone-comments-font-size-sm;
        font-weight: 600;
        color: $presszone-comments-text-primary;
        margin-bottom: $presszone-comments-spacing-xs;

        @include dark-mode {
            color: $presszone-comments-dark-text-primary;
        }
    }

    select,
    input[type="text"],
    input[type="url"],
    .presszone-comments-form-input {
        width: 100%;
        padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md;
        border-width: $presszone-comments-border-width;
        border-style: solid;
        border-radius: $presszone-comments-radius-md;
        font-size: $presszone-comments-font-size-base;
        font-family: inherit;
        box-sizing: border-box;

        @include theme-props(('background-color': 'bg-secondary',
                'border-color': 'border',
                'color': 'text-primary'
            ));

        &:focus {
            outline: none;
        }

        &:focus-visible {
            border-color: $presszone-comments-accent;
            box-shadow: 0 0 0 2px rgba($presszone-comments-accent, 0.2);
        }

        &::placeholder {
            @include theme-props(('color': 'text-muted'
                ));
        }
    }
}

// Confirmation message styling
.presszone-comments-confirm-message {
    font-size: $presszone-comments-font-size-base;
    line-height: 1.5;
    margin: 0;

    @include theme-props(('color': 'text-primary'
        ));
}

@keyframes presszone-comments-modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes presszone-comments-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-#{$presszone-comments-spacing-xl}) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

// Mobile Responsive Styles
@media (max-width: $presszone-comments-breakpoint-sm) {
    .presszone-comments-modal-overlay {
        padding: $presszone-comments-spacing-sm;
        align-items: center;
    }

    .presszone-comments-modal {
        max-height: 95vh;
        width: 100%;
        margin: 0;

        &__header {
            padding: $presszone-comments-spacing-md;
        }

        &__content {
            padding: $presszone-comments-spacing-md;
        }

        &__actions {
            flex-direction: column;
            padding: $presszone-comments-spacing-md;
            gap: $presszone-comments-spacing-sm;
        }

        &__submit,
        &__cancel {
            float: none;
            width: 100%;
            display: block;
            margin-top: $presszone-comments-spacing-md;
            text-align: center;
        }
    }
}