@props(['name','type' => 'siri'])
@php
    $dimension = array_values(data_get(trans($type . '.dimensions'), "{$name}.levels"));
@endphp
<div x-data="{
    hoverLevel: -1,
    descriptions: {{{ json_encode(array_map(fn($item) => $item['description'] ?? '', $dimension)) }}},
    longPressTimeout: null,
    showTooltip(i) {
        // For desktop: show on hover
        this.hoverLevel = i;
    },
    hideTooltip() {
        this.hoverLevel = -1;
    },
    startLongPress(i) {
        // For mobile: show on long press (500ms)
        this.longPressTimeout = setTimeout(() => { this.hoverLevel = i }, 500);
    },
    cancelLongPress() {
        clearTimeout(this.longPressTimeout);
        this.longPressTimeout = null;
    }
}">
    <label class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-600 dark:text-indigo-400" fill="none"
            viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        {{ trans($type . '.assessment_level') }}:
    </label>
    <input type="hidden" name="{{ $name }}" :value="level" />

    <!-- Maturity level selectors -->
    <div class="flex justify-between mt-3 mb-2 relative">
        <div class="absolute top-0 left-0 right-0 h-3 bg-gray-200 dark:bg-gray-800 rounded-full overflow-hidden">
            <div class="absolute top-0 left-0 right-0 bottom-0"
                style="background: linear-gradient(to right, #ef4444 0%, #f59e42 20%, #f7e13e 40%, #b6e944 60%, #4ade80 80%, #15803d 100%)">
            </div>
            <div class="absolute top-0 right-0 bottom-0 bg-white dark:bg-gray-900 transition-all duration-300"
                :style="`width: ${100 - (level+1)/6*100}%`"></div>
        </div>
        <template x-for="i in 6" :key="i - 1">
            <div class="flex-1 flex flex-col items-center group z-20 pt-6 mt-2 relative">
                <button type="button"
                    @click="level = i-1; $dispatch('level-changed', { field: '{{ $name }}', value: i-1 })"
                    @mouseenter="showTooltip(i-1)" @mouseleave="hideTooltip()" @touchstart="startLongPress(i-1)"
                    @touchend="cancelLongPress(); hideTooltip()" @touchcancel="cancelLongPress(); hideTooltip()"
                    class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer shadow-md transform hover:scale-110 focus:outline-none relative"
                    :class="{
                        'text-white ring-2 ring-offset-2': i - 1 == level,
                        'bg-red-500 ring-red-200 dark:ring-red-400': i - 1 == 0 && i - 1 == level,
                        'bg-orange-400 ring-orange-200 dark:ring-orange-300': i - 1 == 1 && i - 1 == level,
                        'bg-yellow-400 ring-yellow-200 dark:ring-yellow-300': i - 1 == 2 && i - 1 == level,
                        'bg-lime-400 ring-lime-200 dark:ring-lime-300': i - 1 == 3 && i - 1 == level,
                        'bg-green-400 ring-green-200 dark:ring-green-300': i - 1 == 4 && i - 1 == level,
                        'bg-green-700 ring-green-400 dark:ring-green-600': i - 1 == 5 && i - 1 == level,
                        'bg-white dark:bg-gray-900 border-2': i - 1 != level,
                        'text-red-500 border-red-200 bg-red-50 dark:bg-red-900 dark:text-red-200': i - 1 == 0 && i -
                            1 != level && (level > 0 || (hoverLevel >= 0 && i - 1 <= hoverLevel)),
                        'text-orange-400 border-orange-200 bg-orange-50 dark:bg-orange-900 dark:text-orange-200': i -
                            1 == 1 && i - 1 != level && (level > 1 || (hoverLevel >= 1 && i - 1 <= hoverLevel)),
                        'text-yellow-400 border-yellow-200 bg-yellow-50 dark:bg-yellow-900 dark:text-yellow-200': i -
                            1 == 2 && i - 1 != level && (level > 2 || (hoverLevel >= 2 && i - 1 <= hoverLevel)),
                        'text-lime-400 border-lime-200 bg-lime-50 dark:bg-lime-900 dark:text-lime-200': i - 1 == 3 &&
                            i - 1 != level && (level > 3 || (hoverLevel >= 3 && i - 1 <= hoverLevel)),
                        'text-green-400 border-green-200 bg-green-50 dark:bg-green-900 dark:text-green-200': i - 1 ==
                            4 && i - 1 != level && (level > 4 || (hoverLevel >= 4 && i - 1 <= hoverLevel)),
                        'text-green-700 border-green-400 bg-green-100 dark:bg-green-900 dark:text-green-100': i - 1 ==
                            5 && i - 1 != level && (level > 5 || (hoverLevel >= 5 && i - 1 <= hoverLevel)),
                        'text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700': i - 1 > level &&
                            hoverLevel < i - 1
                    }">
                    <span class="font-bold" x-text="i-1"></span>
                    <!-- Tooltip -->
                    <div x-show="hoverLevel === (i-1)"
                        class="absolute left-1/2 top-full mt-2 -translate-x-1/2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 text-xs rounded px-3 py-2 shadow-lg z-50 whitespace-pre-line min-w-[220px] max-w-[90vw] sm:max-w-xs break-words"
                        x-cloak x-text="descriptions[i-1]" style="word-break: break-word;"></div>
                </button>
            </div>
        </template>
    </div>

    <!-- Level descriptions (compact, responsive) -->
    <div class="mt-3 text-center flex justify-center gap-2">
        <template x-if="level == 0">
            <span
                class="flex items-center gap-1 px-2 py-1 bg-red-50 dark:bg-red-900 rounded text-xs text-red-700 dark:text-red-200 border border-red-100 dark:border-red-400
                sm:text-xs sm:px-2 sm:py-1 text-[10px] px-1.5 py-0.5">
                <svg class="h-4 w-4 sm:h-4 sm:w-4 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M18.364 5.636l-1.414 1.414M6.343 17.657l-1.414 1.414M5.636 5.636l1.414 1.414M17.657 17.657l1.414 1.414M12 8v4m0 4h.01" />
                </svg>
                {{ $dimension[0]['band'] ?? '' }}
            </span>
        </template>
        <template x-if="level == 1">
            <span
                class="flex items-center gap-1 px-2 py-1 bg-orange-50 dark:bg-orange-900 rounded text-xs text-orange-700 dark:text-orange-200 border border-orange-100 dark:border-orange-300
                sm:text-xs sm:px-2 sm:py-1 text-[10px] px-1.5 py-0.5">
                <svg class="h-4 w-4 sm:h-4 sm:w-4 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" />
                </svg>
                {{ $dimension[1]['band'] ?? '' }}
            </span>
        </template>
        <template x-if="level == 2">
            <span
                class="flex items-center gap-1 px-2 py-1 bg-yellow-50 dark:bg-yellow-900 rounded text-xs text-yellow-700 dark:text-yellow-200 border border-yellow-100 dark:border-yellow-300
                sm:text-xs sm:px-2 sm:py-1 text-[10px] px-1.5 py-0.5">
                <svg class="h-4 w-4 sm:h-4 sm:w-4 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" />
                </svg>
                {{ $dimension[2]['band'] ?? '' }}
            </span>
        </template>
        <template x-if="level == 3">
            <span
                class="flex items-center gap-1 px-2 py-1 bg-lime-50 dark:bg-lime-900 rounded text-xs text-lime-700 dark:text-lime-200 border border-lime-100 dark:border-lime-300
                sm:text-xs sm:px-2 sm:py-1 text-[10px] px-1.5 py-0.5">
                <svg class="h-4 w-4 sm:h-4 sm:w-4 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                {{ $dimension[3]['band'] ?? '' }}
            </span>
        </template>
        <template x-if="level == 4">
            <span
                class="flex items-center gap-1 px-2 py-1 bg-green-50 dark:bg-green-900 rounded text-xs text-green-700 dark:text-green-200 border border-green-100 dark:border-green-300
                sm:text-xs sm:px-2 sm:py-1 text-[10px] px-1.5 py-0.5">
                <svg class="h-4 w-4 sm:h-4 sm:w-4 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                {{ $dimension[4]['band'] ?? '' }}
            </span>
        </template>
        <template x-if="level == 5">
            <span
                class="flex items-center gap-1 px-2 py-1 bg-green-100 dark:bg-green-950 rounded text-xs text-green-900 dark:text-green-100 border border-green-400 dark:border-green-600
                sm:text-xs sm:px-2 sm:py-1 text-[10px] px-1.5 py-0.5">
                <svg class="h-4 w-4 sm:h-4 sm:w-4 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
                {{ $dimension[5]['band'] ?? '' }}
            </span>
        </template>
    </div>

    <p id="{{ $name }}_level_description" class="mt-3 text-sm text-gray-500 dark:text-gray-300 italic">
        {{ trans($type . '.assessment_tooltip', ['lvl0' => $dimension[0]['band'] ?? '', 'lvl5' => $dimension[5]['band'] ?? '']) }}
    </p>

    <!-- Color legend -->
    <div
        class="mt-5 flex flex-wrap justify-center gap-2 text-xs py-2 px-3 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm">
        <div class="flex items-center gap-1.5">
            <span class="w-3 h-3 bg-red-500 rounded-full shadow-sm border border-red-200 dark:border-red-400"></span>
            <span class="text-gray-700 dark:text-gray-200 font-medium">{{ $dimension[0]['band'] ?? '' }}</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span
                class="w-3 h-3 bg-orange-400 rounded-full shadow-sm border border-orange-200 dark:border-orange-300"></span>
            <span class="text-gray-700 dark:text-gray-200 font-medium">{{ $dimension[1]['band'] ?? '' }}</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span
                class="w-3 h-3 bg-yellow-400 rounded-full shadow-sm border border-yellow-200 dark:border-yellow-300"></span>
            <span class="text-gray-700 dark:text-gray-200 font-medium">{{ $dimension[2]['band'] ?? '' }}</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span
                class="w-3 h-3 bg-lime-400 rounded-full shadow-sm border border-lime-200 dark:border-lime-300"></span>
            <span class="text-gray-700 dark:text-gray-200 font-medium">{{ $dimension[3]['band'] ?? '' }}</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span
                class="w-3 h-3 bg-green-400 rounded-full shadow-sm border border-green-200 dark:border-green-300"></span>
            <span class="text-gray-700 dark:text-gray-200 font-medium">{{ $dimension[4]['band'] ?? '' }}</span>
        </div>
        <div class="flex items-center gap-1.5">
            <span
                class="w-3 h-3 bg-green-700 rounded-full shadow-sm border border-green-400 dark:border-green-600"></span>
            <span class="text-gray-700 dark:text-gray-200 font-medium">{{ $dimension[5]['band'] ?? '' }}</span>
        </div>
    </div>
</div>