@props([
    'name',
    'title',
    'maxNotes' => 1000,
    'label' => trans('siri.evaluator_notes'), // Custom label text
    'iconPath' => null, // Custom SVG path 'd' attribute (string)
    'showCounter' => true, // Show/hide the counter span
    'placeholder' => trans('siri.notes_placeholder', ['title' => $title]), // Custom placeholder
    'model' => null, // For Alpine.js model binding (e.g., 'project.objectives')
    'saveCallback' => null, // Custom save callback function
    'formIntegration' => false, // Whether to integrate with form data binding
    'type' => 'siri', // Type for translation context (e.g., 'siri' or 'cosiri')
])
@php
    $fieldName = $formIntegration ? $name : $name . '_notes';
    $componentTitle = $title;
@endphp


<div class="relative pt-10" x-data="noteComponent(`{{{$componentTitle}}}`, {{ $formIntegration ? 'true' : 'false' }}, '{{ $model }}', '{{ $saveCallback }}')" x-init="init()" data-field-name="{{ $name }}"
    data-field-id="{{ $fieldName }}" x-cloak>

    <div class="flex justify-between mb-2">
        <label for="{{ $fieldName }}" class="text-sm font-medium text-gray-700 dark:text-gray-200 flex items-center">
            @if ($iconPath)
                <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="{{ $iconPath }}" />
                </svg>
            @endif
            {{ $label }}:
        </label>
        @if ($showCounter)
            <span class="text-sm"
                :class="noteCount > maxNotes ? 'text-red-600 font-medium' : 'text-gray-500 dark:text-gray-400'"
                x-text="`${noteCount}/${maxNotes}`"></span>
        @endif
    </div>

    <div class="relative">
        <textarea name="{{ $fieldName }}" id="{{ $fieldName }}" rows="3" x-ref="textarea"
            @if ($formIntegration && $model) x-model="{{ $model }}"
                x-on:input="updateCount($event); saveChanges()"
            @else
                x-on:input="updateCount($event); $dispatch('notes-changed', { field: '{{ $fieldName }}', value: $event.target.value })" @endif
            :maxlength="maxNotes"
            x-bind:class="noteCount >= maxNotes ?
                'border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-500 dark:focus:border-red-400 dark:focus:ring-red-400' :
                'border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:focus:border-blue-400 dark:focus:ring-blue-400'"
            class="w-full p-3 pb-14 border-2 rounded-lg focus:ring-2 transition-all duration-200 shadow-sm outline-none resize-none bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400"
            :placeholder="{{ json_encode($placeholder) }}" aria-labelledby="{{ $fieldName }}_heading"></textarea>

        <div class="absolute bottom-3 right-2 flex flex-row-reverse gap-2 items-center">
            <!-- Generate Button -->
            <button type="button" x-on:click="generateText" :disabled="loadingGenerate"
                class="relative inline-flex items-center justify-center gap-2 text-sm font-medium text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 disabled:from-green-300 disabled:to-green-400 disabled:cursor-not-allowed px-4 py-2 rounded-lg shadow-md transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400"
                x-cloak>
                <!-- Bolt Icon (only when not loading) -->
                <span x-show="!loadingGenerate" class="material-symbols-rounded text-white text-xl align-middle"
                    style="font-variation-settings: 'FILL' 1, 'wght' 400;">bolt</span>
                <!-- Spinner Icon (only when loading) -->
                <svg x-show="loadingGenerate" class="w-4 h-4 animate-spin text-white" fill="none"
                    viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                        stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                </svg>
                <!-- Button Text -->
                <span x-show="!loadingGenerate">{{ trans('siri.generate_text') }}</span>
                <span x-show="loadingGenerate">{{ trans('siri.processing') }}</span>
            </button>
            <!-- Enhance Button -->
            <button type="button" x-on:click="enhanceText" :disabled="loadingEnhance || noteCount === 0"
                :class="(loadingEnhance || noteCount === 0) ?
                'from-blue-300 to-blue-400 cursor-not-allowed opacity-60' :
                'from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'"
                class="relative inline-flex items-center justify-center gap-2 text-sm font-medium text-white bg-gradient-to-r px-4 py-2 rounded-lg shadow-md transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400"
                x-cloak>
                <!-- Wand Stars Icon (only when not loading) -->
                <span x-show="!loadingEnhance" class="material-symbols-rounded text-white text-xl align-middle"
                    style="font-variation-settings: 'FILL' 1, 'wght' 400;">wand_stars</span>
                <!-- Spinner Icon (only when loading) -->
                <svg x-show="loadingEnhance" class="w-4 h-4 animate-spin text-white" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                        stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                </svg>
                <!-- Button Text -->
                <span x-show="!loadingEnhance">{{ trans('siri.rephrase_text') }}</span>
                <span x-show="loadingEnhance">{{ trans('siri.processing') }}</span>
            </button>



            <!-- Revert Button -->
            <button type="button" x-show="enhancementApplied" x-on:click="revertEnhancement"
                class="text-xs text-gray-700 dark:text-gray-200 bg-yellow-200 dark:bg-yellow-700 hover:bg-yellow-300 dark:hover:bg-yellow-600 px-2 py-1 rounded transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400"
                x-cloak>
                {{ trans('siri.revert_text') }}
            </button>

            <!-- Expand/Collapse Button -->
            <button type="button" x-show="showToggle" x-on:click="toggleExpand"
                class="text-xs text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 bg-white dark:bg-gray-800 bg-opacity-70 px-2 py-1 rounded flex items-center space-x-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
                x-cloak>
                <template x-if="isCollapsed">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </template>
                <template x-if="!isCollapsed">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                    </svg>
                </template>
                <span
                    x-text="isCollapsed ? '{{ trans('siri.note_expand') }}' : '{{ trans('siri.note_collapse') }}'"></span>
            </button>
        </div>
    </div>
</div>

<script>
    function noteComponent(componentTitle, formIntegration = false, modelPath = '', saveCallbackName = '') {
        return {
            noteCount: 0,
            isCollapsed: false,
            showToggle: false,
            loadingEnhance: false,
            loadingGenerate: false,
            maxNotes: {{ $maxNotes }},
            originalText: null,
            enhancementApplied: false,
            componentTitle: componentTitle,
            formIntegration: formIntegration,
            modelPath: modelPath,
            saveCallback: saveCallbackName,
            fieldName: null, // Will be set in init()
            fieldId: null, // Will be set in init()


            init() {
                this.noteCount = this.$refs.textarea.value.length;
                this.autoResize();

                // Get the field name from data attribute
                this.fieldName = this.$el.getAttribute('data-field-name');
                this.fieldId = this.$el.getAttribute('data-field-id');
            },

            updateCount(event) {
                this.noteCount = event.target.value.length;
                this.autoResize();
            },

            saveChanges() {
                if (this.formIntegration && this.saveCallback) {
                    // Execute the save callback with a small delay to ensure data is updated
                    setTimeout(() => {
                        try {
                            if (this.saveCallback === 'saveProjects()') {
                                // Dispatch event for roadmap section
                                this.$dispatch('update-form-data');
                            } else if (this.saveCallback === 'updateFormDataFromSubProjects()') {
                                // Dispatch event for sub-projects section
                                this.$dispatch('update-form-data');
                            } else if (this.saveCallback) {
                                // Try direct evaluation for other callbacks
                                eval(this.saveCallback);
                            }
                        } catch (e) {
                            console.error('Error executing save callback:', e);
                        }
                    }, 100);
                }
            },

            getCurrentProject() {
                try {
                    // Try to find the parent Alpine component with project data
                    let parentElement = this.$el;
                    while (parentElement) {
                        if (parentElement._x_dataStack) {
                            for (let data of parentElement._x_dataStack) {
                                if (data.project) {
                                    return data.project;
                                } else if (data.projects) {
                                    // For roadmap section
                                    return data.projects[data.activeProjectTab] || data.projects[0];
                                } else if (data.subProjects) {
                                    // For sub-projects section
                                    return data.subProjects[data.currentRoadMap] || data.subProjects[0];
                                }
                            }
                        }
                        parentElement = parentElement.parentElement;
                    }
                    return null;
                } catch (e) {
                    console.error({!! json_encode(trans('siri.error_getting_current_project')) !!}, e);
                    return null;
                }
            },

            getContextForAI() {
                // For siri dimensions - get current level and return dimension info
                const dimensionInfo = this.getsiriDimensionInfo();

                return {
                    dimensionName: this.fieldName || '{{ $name }}', // Use dynamic field name or fallback
                    currentLevel: dimensionInfo.level,
                    componentTitle: this.componentTitle
                };

            },

            // Helper method to get siri dimension info without translation data
            getsiriDimensionInfo() {
                const fieldName = this.fieldName || '{{ $name }}'; // Use dynamic field name or fallback

                try {
                    // Use the field name to find the closest assessment component 
                    const dimensionId = `${fieldName}_heading`;
                    const closestAssessment = document.getElementById(dimensionId);

                    if (closestAssessment && closestAssessment.parentElement && closestAssessment.parentElement
                        ._x_dataStack) {
                        // Find the Alpine component instance for this assessment
                        for (const data of closestAssessment.parentElement._x_dataStack) {
                            if (data.level !== undefined) {
                                return {
                                    level: data.level,
                                    hasData: true
                                };
                            }
                        }
                    }
                } catch (e) {
                    console.error('Error getting siri dimension info:', e);
                }

                return {
                    level: null,
                    hasData: false
                };
            },

            // Debug helper function to log siri context information
            logsiriContext(context, data) {
                if (!this.formIntegration) {
                    console.debug(`[siri Context] Dimension: ${this.componentTitle}`, {
                        field: this.fieldName || '{{ $name }}',
                        level: data ? data.level : 'unknown',
                        context: context,
                        dataStack: data
                    });
                }
            },

            autoResize() {
                const ta = this.$refs.textarea;
                ta.style.height = 'auto';
                const newHeight = ta.scrollHeight;
                ta.style.height = Math.max(newHeight, 106) + 'px';
                this.showToggle = newHeight > 106;
            },

            toggleExpand() {
                this.isCollapsed = !this.isCollapsed;
                if (this.isCollapsed) {
                    this.$refs.textarea.style.height = '106px';
                } else {
                    this.autoResize();
                }
            },

            enhanceText() {
                const current = this.$refs.textarea.value.trim();
                if (!current) return;

                this.loadingEnhance = true;

                // Determine which endpoint to use based on form integration
                const endpoint = '{{ route("enhance_" . $type) }}';

                // Get context data
                const contextPromise = this.getContextForAI();

                // Handle both Promise and direct string returns from getContextForAI
                Promise.resolve(contextPromise)
                    .then(contextData => {
                        let enhancePayload = {
                            text: current,
                            locale: '{{ app()->getLocale() }}',
                            maxLength: this.maxNotes,
                            label: this.componentTitle,
                            context: contextData
                        };

                        console.log('[Enhance Textarea] Payload:', enhancePayload);
                        return fetch(endpoint, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify(enhancePayload)
                        });
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            const enhanced = data.enhancedText.trim();

                            // Only keep original and enable revert if enhanced is different
                            if (enhanced !== current) {
                                this.originalText = current;
                                this.enhancementApplied = true;
                            } else {
                                this.originalText = null;
                                this.enhancementApplied = false;
                            }

                            this.$refs.textarea.value = enhanced;
                            this.noteCount = enhanced.length;
                            this.autoResize();

                            // Trigger the appropriate save mechanism
                            if (this.formIntegration) {
                                // Trigger input event to update Alpine.js model
                                this.$refs.textarea.dispatchEvent(new Event('input', {
                                    bubbles: true
                                }));
                                this.saveChanges();
                            } else {
                                // Dispatch the original event
                                this.$dispatch('notes-changed', {
                                    field: this.$refs.textarea.name,
                                    value: enhanced
                                });
                            }
                        } else {
                            if (window.notify) {
                                window.notify.error(data.error || {!! json_encode(trans('siri.enhancement_failed')) !!});
                            }
                        }
                    })
                    .catch(err => {
                        console.error('Enhancement error:', err);
                        if (window.notify) {
                            window.notify.error({!! json_encode(trans('siri.enhance_failed')) !!});
                        }
                    })
                    .finally(() => {
                        this.loadingEnhance = false;
                    });
            },

            normalizeUrl(url) {
                if (!url) return url;
                const trimmed = url.trim();
                if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
                    return trimmed;
                }
                return 'https://' + trimmed;
            },

            generateText() {
                this.loadingGenerate = true;
                const current = this.$refs.textarea.value.trim();

                // Determine which endpoint to use based on form integration
                const endpoint = '{{ route("generate_" . $type) }}';

                // Get context data
                const contextPromise = this.getContextForAI();

                // Handle both Promise and direct string returns from getContextForAI
                Promise.resolve(contextPromise)
                    .then(contextData => {
                        let generatePayload = {
                            text: current,
                            locale: '{{ app()->getLocale() }}',
                            maxLength: this.maxNotes,
                            label: this.componentTitle,
                            context: contextData
                        };

                        console.log('[Generate Textarea] Payload:', generatePayload);

                        return fetch(endpoint, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify(generatePayload)
                        });
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            const generated = data.generatedText.trim();

                            this.originalText = this.$refs.textarea.value;
                            this.enhancementApplied = true;
                            this.$refs.textarea.value = generated;
                            this.noteCount = generated.length;
                            this.autoResize();

                            // Trigger the appropriate save mechanism
                            if (this.formIntegration) {
                                // Trigger input event to update Alpine.js model
                                this.$refs.textarea.dispatchEvent(new Event('input', {
                                    bubbles: true
                                }));
                                this.saveChanges();
                            } else {
                                // Dispatch the original event
                                this.$dispatch('notes-changed', {
                                    field: this.$refs.textarea.name,
                                    value: generated
                                });
                            }
                        } else {
                            if (window.notify) {
                                window.notify.error(data.error || {!! json_encode(trans('siri.generation_failed')) !!});
                            }
                        }
                    })
                    .catch(err => {
                        console.error('Generation error:', err);
                        if (window.notify) {
                            window.notify.error({!! json_encode(trans('siri.generate_failed')) !!});
                        }
                    })
                    .finally(() => {
                        this.loadingGenerate = false;
                    });
            },

            revertEnhancement() {
                if (this.originalText !== null) {
                    this.$refs.textarea.value = this.originalText;
                    this.noteCount = this.originalText.length;
                    this.autoResize();
                    this.enhancementApplied = false;

                    // Trigger the appropriate save mechanism
                    if (this.formIntegration) {
                        // Trigger input event to update Alpine.js model
                        this.$refs.textarea.dispatchEvent(new Event('input', {
                            bubbles: true
                        }));
                        this.saveChanges();
                    } else {
                        // Dispatch the original event
                        this.$dispatch('notes-changed', {
                            field: this.$refs.textarea.name,
                            value: this.originalText
                        });
                    }

                    this.originalText = null;
                }
            }
        }
    }
</script>