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

.presszone-comments-item {
    // Default padding (standard) - overridden by padding classes
    padding: $presszone-comments-spacing-md $presszone-comments-spacing-lg;
    
    // Full border on all sides - use dynamic variables
    border-width: $presszone-comments-border-width;
    border-style: solid;
    border-radius: $presszone-comments-radius-lg;
    transition: background-color $presszone-comments-duration-normal ease;
    margin-bottom: $presszone-comments-spacing-md;
    position: relative; // Context for positioning

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

    // Generate depth classes 1-10
    // Instead of margin, we rely on the nesting structure of the comments list.
    // The visual indentation line will be handled by the replies container.
    // But if we need manual indentation for flat lists simulating threads:
    @for $i from 1 through 5 {
        &--depth-#{$i} {
            // margin-inline-start: calc(#{$i} * #{$presszone-comments-indent-step} - #{$presszone-comments-indent-step});
        }
    }

    &--new {
        animation: presszone-comments-pulse $presszone-comments-duration-slow $presszone-comments-ease-smooth;
    }

    &--pending {
        opacity: 0.7;
    }

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

    &__header {
        display: flex;
        align-items: center;
        gap: $presszone-comments-spacing-md;
        margin-bottom: $presszone-comments-spacing-sm;
        font-size: $presszone-comments-font-size-sm;
    }

    &__status {
        margin-inline-start: $presszone-comments-spacing-sm;
        font-size: $presszone-comments-font-size-xs;
        opacity: 0.8;
        font-style: italic;
    }

    &__author {
        font-weight: 600;
        // Accent color is usually static/brand
        color: $presszone-comments-accent;
    }

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

    &__number {
        margin-inline-start: auto;
        text-decoration: none;

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

        &:hover {
            color: $presszone-comments-accent;
        }
    }

    &__body {
        line-height: 1.6;
        margin-bottom: $presszone-comments-spacing-md;

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

    &__footer {
        display: flex;
        flex-wrap: wrap;
        gap: $presszone-comments-spacing-md;
        align-items: center;
        width: 100%;
    }
}

.presszone-comments-actions {
    display: flex;
    gap: $presszone-comments-spacing-sm;
    position: relative;
}

.presszone-comments-vote-buttons {
    display: flex;
    align-items: center;
    gap: $presszone-comments-spacing-xs;
}

.presszone-comments-vote-btn {
    @extend %presszone-comments-btn-base;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: $presszone-comments-spacing-xs;

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

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

    &.presszone-comments-vote--up:hover,
    &--up-active {
        color: $presszone-comments-success;
    }

    &.presszone-comments-vote--down:hover,
    &--down-active {
        color: $presszone-comments-error;
    }

    &.presszone-comments-active {
        background-color: $presszone-comments-accent-dim;
        color: $presszone-comments-accent;
    }
}

.presszone-comments-vote-count {
    font-size: $presszone-comments-font-size-xs;
    font-weight: 600;
    color: inherit;
}

.presszone-comments-action {
    @extend %presszone-comments-btn-base;
    background: none;
    border: none;
    font-size: $presszone-comments-font-size-sm;
    display: flex;
    align-items: center;
    gap: $presszone-comments-spacing-xs;
    position: relative;

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

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

    &__icon {
        font-size: $presszone-comments-font-size-base;
    }
}

.presszone-comments-replies {
    margin-top: $presszone-comments-spacing-md;
    padding-inline-start: $presszone-comments-spacing-lg; // Indent content
    position: relative;

    // Indentation Line
    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0; // Or inset-inline-start: 0 if supported
        width: 2px;
        border-radius: 2px;
        
        @include theme-props(('background-color': 'indent-line'));
    }
    
    // RTL support for the line
    [dir="rtl"] &::before {
        left: auto;
        right: 0;
    }
}

.presszone-comments-admin-actions {
    position: relative;
    margin-inline-start: auto;

    &__trigger {
        @extend %presszone-comments-btn-base;
        background: none;
        border-width: $presszone-comments-border-width;
        border-style: solid;
        cursor: pointer;
        font-size: $presszone-comments-font-size-sm;

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

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

    &__menu {
        position: absolute;
        top: 100%;
        inset-inline-end: $presszone-comments-spacing-zero;
        border-width: $presszone-comments-border-width;
        border-style: solid;
        border-radius: $presszone-comments-radius-lg;
        padding: $presszone-comments-spacing-sm;
        box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-shadow; // Default value needs handling logic
        z-index: 100;
        display: none;
        min-width: $presszone-comments-menu-min-width;
        margin-top: $presszone-comments-spacing-sm;
        transform-origin: top;

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

        @include theme-props(('background-color': 'dropdown-bg', // SOLID BACKGROUND ENFORCED
                'border-color': 'border'
            ));

        @include dark-mode {
            background-color: $presszone-comments-dark-bg-secondary;
            border-color: $presszone-comments-dark-border;
            box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-dark-shadow;
        }

        &.active {
            display: block;
            animation: presszone-comments-dropdown-open $presszone-comments-duration-normal $presszone-comments-ease-smooth;
        }
    }
}

.presszone-comments-admin-action {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    text-align: start;
    background: none;
    border: none !important;
    outline: 0;
    padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md;
    cursor: pointer;
    border-radius: $presszone-comments-radius-lg;
    font-size: $presszone-comments-font-size-sm;
    transition: background-color 0.2s;

    // Explicitly use dropdown-text to ensure readability on solid background
    @include theme-props(('color': 'dropdown-text'
        ));

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

    // Enhanced focus styles for better visibility (A11Y-MED-005)
    &:focus {
        outline: 2px solid $presszone-comments-primary;
        outline-offset: -2px;
        @include theme-props(('background-color': 'bg-hover'));
        position: relative;
        z-index: 1;
    }
    
    &:focus-visible {
        outline: 2px solid $presszone-comments-primary;
        outline-offset: -2px;
        @include theme-props(('background-color': 'bg-hover'));
    }
}

// High contrast mode enhancement for admin actions
@media (prefers-contrast: high) {
    .presszone-comments-admin-action:focus {
        outline: 3px solid currentColor;
        outline-offset: 0;
    }
}

@keyframes presszone-comments-pulse {
    0% {
        background-color: $presszone-comments-bg-hover-accent;
    }

    50% {
        background-color: $presszone-comments-accent-dim;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes presszone-comments-dropdown-open {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

// Accessibility: Reduced Motion Support
@media (prefers-reduced-motion: reduce) {
    .presszone-comments-item--new {
        animation: none !important;
    }

    .presszone-comments-admin-actions__menu.active {
        animation: none !important;
    }
}

// Mobile Responsive Styles
@media (max-width: $presszone-comments-breakpoint-md) {
    .presszone-comments-item {
        padding: $presszone-comments-spacing-sm;

        &__header {
            flex-wrap: wrap;
            gap: $presszone-comments-spacing-xs;
        }

        &__number {
            // Move to new row on mobile
            flex-basis: 100%;
            margin-inline-start: 0;
            order: -1;
            font-size: $presszone-comments-font-size-xs;
            margin-bottom: $presszone-comments-spacing-xxs;
        }

        &__footer {
            flex-direction: column;
            align-items: stretch;
            gap: $presszone-comments-spacing-sm;
        }

        // Reduce nesting indentation on mobile
        @for $i from 1 through 5 {
            &--depth-#{$i} {
                margin-inline-start: calc(#{$i} * 2px - 2px);
            }
        }
    }

    .presszone-comments-actions {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between; // Spread out actions
        gap: $presszone-comments-spacing-sm;
    }

    .presszone-comments-vote-buttons {
        flex-shrink: 0;
    }

    .presszone-comments-admin-actions {
        margin-inline-start: 0;
        width: 100%;
        margin-top: $presszone-comments-spacing-xs;

        &__trigger {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: $presszone-comments-spacing-md; // Touch friendly
        }

        &__menu {
            inset-inline-start: 0;
            inset-inline-end: auto;
            min-width: 100%;
            position: static; // Flow naturally on mobile
            margin-top: $presszone-comments-spacing-sm;
            box-shadow: none;
            border: 1px solid $presszone-comments-border;
        }
    }
}