@use '../globals' as *;

/**
 * LinkSelector Component Styles
 *
 * Styles for the link selector component with search, autocomplete,
 * and selected items display.
 *
 * @package MultilingualPressZone
 * @since 1.0.0
 */

// Import variables from main.scss
$primary-color: #0073aa !default;
$primary-hover: #005a87 !default;
$success-color: #00a32a !default;
$error-color: #d63638 !default;
$text-primary: #1e1e1e !default;
$text-secondary: #757575 !default;
$text-light: #a7aaad !default;
$border-color: #c3c4c7 !default;
$background-light: #f0f0f1 !default;
$background-white: #ffffff !default;

$spacing-xs: 4px !default;
$spacing-sm: 8px !default;
$spacing-md: 16px !default;
$spacing-lg: 24px !default;

$border-radius-sm: 2px !default;
$border-radius-md: 4px !default;
$border-radius-lg: 8px !default;

$transition-fast: 0.15s ease !default;
$transition-normal: 0.3s ease !default;

$z-dropdown: 900 !default;

/* ==========================================================================
   LinkSelector Component
   ========================================================================== */

.ipz-link-selector {
    position: relative;
    width: 100%;
    max-width: 600px;

    // Main wrapper
    &__wrapper {
        display: flex;
        flex-direction: column;
        gap: $spacing-md;
    }

    /* Search Box
       ========================================================================== */

    &__search {
        position: relative;
    }

    &__input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    &__input {
        width: 100%;
        padding: $spacing-sm $spacing-lg;
        padding-right: 70px; // Space for spinner and clear button
        font-size: 14px;
        line-height: 1.4;
        color: $text-primary;
        background-color: $background-white;
        border: 1px solid $border-color;
        border-radius: $border-radius-md;
        transition: border-color $transition-fast, box-shadow $transition-fast;

        &::placeholder {
            color: $text-light;
        }

        &:focus {
            outline: none;
            border-color: $primary-color;
            box-shadow: 0 0 0 1px $primary-color;
        }

        &:disabled {
            background-color: $background-light;
            cursor: not-allowed;
            opacity: 0.6;
        }
    }

    &__spinner {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    &__clear {
        position: absolute;
        right: $spacing-sm;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        font-size: 20px;
        line-height: 1;
        color: $text-secondary;
        background: none;
        border: none;
        border-radius: $border-radius-sm;
        cursor: pointer;
        transition: color $transition-fast, background-color $transition-fast;

        &:hover {
            color: $text-primary;
            background-color: $background-light;
        }

        &:focus {
            outline: 2px solid $primary-color;
            outline-offset: 2px;
        }
    }

    /* Results Dropdown
       ========================================================================== */

    &__results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: $spacing-xs;
        max-height: 400px;
        overflow-y: auto;
        background-color: $background-white;
        border: 1px solid $border-color;
        border-radius: $border-radius-md;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: $z-dropdown;
    }

    &__loading,
    &__error,
    &__no-results {
        padding: $spacing-md;
        text-align: center;
        color: $text-secondary;
    }

    &__loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-sm;
    }

    &__error {
        color: $error-color;
        font-weight: 500;
    }

    &__no-results {
        padding: $spacing-lg;

        .presszone-comments-empty-state {
            padding: 0;
            background: transparent;
            border: none;
        }
    }

    &__results-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__result-item {
        padding: $spacing-sm $spacing-md;
        cursor: pointer;
        transition: background-color $transition-fast;
        border-bottom: 1px solid $background-light;

        &:last-child {
            border-bottom: none;
        }

        &:hover,
        &--selected {
            background-color: $background-light;
        }

        &--selected {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 3px;
                background-color: $primary-color;
            }
        }

        &:focus-within {
            outline: 2px solid $primary-color;
            outline-offset: -2px;
        }
    }

    &__result-content {
        display: flex;
        flex-direction: column;
        gap: $spacing-xs;
    }

    &__result-title {
        font-size: 14px;
        font-weight: 500;
        color: $text-primary;
        line-height: 1.4;
    }

    &__result-meta {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        font-size: 12px;
        color: $text-secondary;
    }

    &__result-type {
        display: inline-flex;
        align-items: center;
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        background-color: $background-light;
        border-radius: $border-radius-sm;
    }

    &__result-date {
        font-size: 12px;
    }

    /* Selected Links
       ========================================================================== */

    &__selected {
        margin-top: $spacing-md;
    }

    &__empty {
        padding: $spacing-md;
        text-align: center;
        color: $text-secondary;
        background-color: $background-light;
        border: 1px dashed $border-color;
        border-radius: $border-radius-md;
        font-size: 13px;
    }

    &__selected-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: $spacing-sm;
    }

    &__selected-item {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        padding: $spacing-sm $spacing-md;
        background-color: $background-white;
        border: 1px solid $border-color;
        border-radius: $border-radius-md;
        transition: border-color $transition-fast, box-shadow $transition-fast;

        &:hover {
            border-color: darken($border-color, 10%);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
    }

    &__selected-title {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        color: $text-primary;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__selected-type {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        color: $text-secondary;
        background-color: $background-light;
        border-radius: $border-radius-sm;
    }

    &__unlink {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        font-size: 20px;
        line-height: 1;
        color: $text-secondary;
        background: none;
        border: none;
        border-radius: $border-radius-sm;
        cursor: pointer;
        transition: color $transition-fast, background-color $transition-fast;
        flex-shrink: 0;

        &:hover {
            color: $error-color;
            background-color: rgba($error-color, 0.1);
        }

        &:focus {
            outline: 2px solid $primary-color;
            outline-offset: 2px;
        }
    }

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

    @media screen and (max-width: 782px) {
        max-width: 100%;

        &__input {
            font-size: 16px; // Prevent zoom on iOS
            padding: 10px $spacing-md;
        }

        &__results {
            max-height: 300px;
        }

        &__result-item {
            padding: $spacing-md;
        }

        &__selected-item {
            padding: $spacing-md;
        }
    }

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

    // High contrast mode support
    @media (prefers-contrast: high) {
        &__input {
            border-width: 2px;

            &:focus {
                outline: 3px solid $primary-color;
                outline-offset: 2px;
            }
        }

        &__results {
            border-width: 2px;
        }

        &__result-item--selected::before {
            width: 4px;
        }
    }

    // Reduced motion support
    @media (prefers-reduced-motion: reduce) {
        &__input,
        &__clear,
        &__result-item,
        &__selected-item,
        &__unlink {
            transition: none;
        }
    }

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

    @media print {
        &__search,
        &__clear,
        &__unlink {
            display: none;
        }

        &__results {
            display: none;
        }

        &__selected-item {
            border: 1px solid #000;
            break-inside: avoid;
        }
    }
}