@props([
    'title',
    'name',
    'hint' => null,
    'maxNotes' => 1000,
    'collapsed' => true,
    'submission' => null,
    'type' => 'siri',
])


<div class="mb-8 bg-white dark:bg-gray-900 p-4 sm:p-5 rounded-xl shadow-sm border-0 border-gray-100 dark:border-gray-800 hover:shadow-md transition-shadow duration-300 border-t-4 border-t-blue-400 dark:border-t-indigo-500"
    x-data="{
        showTooltip: false,
        noteCount: 0,
        maxNotes: {{ $maxNotes }},
        level: 0,
        note: '',
        hoverLevel: -1,
        isCollapsed: {{ $collapsed ? 'true' : 'false' }},
        init() {
            // Initialize level from parent data or old values
            this.$nextTick(() => {
                // Try multiple ways to get the initial value
                let initialValue = 0;
    
                // Try Laravel old() values

                const oldValue = '{{ old($name, $submission->data[$name] ?? '') }}';
                if (oldValue !== '') {
                    initialValue = parseInt(oldValue) || 0;
                }
    
                this.level = initialValue;
    
                // Initialize notes from old values
                const oldNotes = '{{ js_safe(old($name . "_notes", $submission->data[$name . "_notes"] ?? '')) }}';
                if (oldNotes) {
                    this.note = window.restoreNote ? window.restoreNote(oldNotes) : oldNotes;
                    // Find the textarea and set its value
                    setTimeout(() => {
                        const textarea = this.$el.querySelector('#{{ $name }}_notes');
                        if (textarea) {
                            textarea.value = window.restoreNote ? window.restoreNote(oldNotes) : oldNotes;
                            textarea.dispatchEvent(new Event('input', { bubbles: true }));
                        }
                    }, 100);
                }
            });
    
    
            // Watch for level changes and update parent
            this.$watch('level', (value) => {
                // Update parent formData
                let parentEl = this.$el.closest('[x-data]');
                while (parentEl) {
                    if (parentEl.__x && parentEl.__x.$data && parentEl.__x.$data.formData) {
                        parentEl.__x.$data.formData['{{ $name }}'] = value;
                        break;
                    }
                    parentEl = parentEl.parentElement ? parentEl.parentElement.closest('[x-data]') : null;
                }
                this.$dispatch('assessment-changed', { field: '{{ $name }}', value: value });
            });
    
            // Listen for notes changes from child components
            this.$el.addEventListener('notes-changed', (event) => {
                const { field, value } = event.detail;
                let parentEl = this.$el.closest('[x-data]');
                while (parentEl) {
                    if (parentEl.__x && parentEl.__x.$data && parentEl.__x.$data.formData) {
                        parentEl.__x.$data.formData[field] = value;
                        break;
                    }
                    parentEl = parentEl.parentElement ? parentEl.parentElement.closest('[x-data]') : null;
                }
    
                // Update local note value to ensure it's synced
                if (field === '{{ $name }}_notes') {
                    this.note = value;
                }
            });
    
            // Listen for level changes from the level-selector component
            this.$el.addEventListener('level-changed', (event) => {
                const { field, value } = event.detail;
                if (field === '{{ $name }}') {
                    this.level = value;
                }
            });
        }
    }">
    <div class="flex items-center gap-2 mb-4 border-b border-gray-100 dark:border-gray-700 pb-3 cursor-pointer select-none"
        @click="isCollapsed = !isCollapsed" id="{{ $name }}_heading" :aria-expanded="!isCollapsed">
        <div class="flex-1 text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 flex items-center w-full">
            <span class="inline-block w-2 h-6 bg-blue-600 dark:bg-indigo-500 rounded-r-full mr-3"></span>
            {!! $title !!}
            <svg class="w-5 h-5 ml-2 transition-transform duration-200" :class="{ 'rotate-180': !isCollapsed }"
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd" />
            </svg>
        </div>
        @if ($hint)
            <x-assessment.tooltip :hint="trans($type .'.dimensions.' . $name . '.definition')" />
        @endif
    </div>
    <div class="space-y-5" x-show="!isCollapsed" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform -translate-y-2"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-0 transform -translate-y-2">
        <!-- Level Selector Component -->
        <x-assessment.level-selector :name="$name" :type="$type" />

        <!-- Notes Component -->
        <x-assessment.notes :name="$name" :title="$title" :maxNotes="$maxNotes" :icon-path="'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'" :type="$type" />

        @error($name)
            <x-assessment.error :message="$message" />
        @enderror
    </div>
</div>