@props([
    'href',
    'recordtype',
    'fieldid',
    'contenttype',
    'recordid',
    'value' => '',
    'listoptions' => null,
    'conditionals' => null
])

<div x-data="{
        listOptions: '',
        recordValue: '',
        originalValue: '',
        editing: false,
        isDisabled: false,
        conditionals: {{ $conditionals ? json_encode($conditionals) : 'null' }},
        init() {
            const value = @js($value);

            if (
                value !== null &&
                value !== undefined &&
                value !== 'null' &&
                !(typeof value === 'string' && value.trim() === '')
            ) {
                if ('{{ $contenttype }}' === 'date') {
                    this.recordValue = this.formatDate(value);
                } else if ('{{ $contenttype }}' === 'date_time') {
                    this.recordValue = this.formatDateTime(value);
                } else {
                    this.recordValue = value;
                }
            }
            this.originalValue = this.recordValue;

            // Set up conditional field watching with a small delay to ensure other fields are initialized
            if (this.conditionals) {
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.watchConditionalFields();
                    }, 100);
                });
            }
        },
        watchConditionalFields() {
            if (!this.conditionals) return;

            const row = this.$el.closest('tr');
            const form = this.$el.closest('form');
            const container = row || form || this.$el.closest('[x-data]') || document.body;

            if (!container) {
                console.error('No container found for conditional fields');
                return;
            }

            // Initial evaluation
            this.evaluateConditions(container);

            // Create a MutationObserver to watch for value changes in the container
            const observer = new MutationObserver(() => {
                this.evaluateConditions(container);
            });

            // Watch for attribute changes and childList changes
            observer.observe(container, {
                attributes: true,
                childList: true,
                subtree: true,
                attributeFilter: ['x-model', 'value']
            });

            // Also watch for input and change events
            container.addEventListener('input', (e) => {
                this.evaluateConditions(container);
            });

            container.addEventListener('change', (e) => {
                this.evaluateConditions(container);
            });

            // Listen for custom Alpine events
            window.addEventListener('alpine:updated', () => {
                this.evaluateConditions(container);
            });
        },
        evaluateConditions(container) {
            if (!this.conditionals) {
                this.isDisabled = false;
                return;
            }

            let shouldEnable = true;

            // Check each conditional
            for (const [conditionField, condition] of Object.entries(this.conditionals)) {
                let target = container.querySelector(`[name='${conditionField}']`);
                if (!target) {
                    target = container.querySelector(`[data-field='${conditionField}']`);
                }
                if (!target) {
                    target = container.querySelector(`#${conditionField}`);
                }

                // For inline edit fields, also check for the x-data div containing the field
                if (!target) {
                    const fieldDivs = container.querySelectorAll('[x-data]');
                    for (const div of fieldDivs) {
                        const alpineData = Alpine.$data(div);
                        if (alpineData && div.querySelector(`[name='${conditionField}']`)) {
                            target = div.querySelector(`[name='${conditionField}']`);
                            break;
                        }
                    }
                }

                if (target) {
                    // Get value from the target - handle both regular inputs and Alpine components
                    let targetValue;

                    // Check if it's within an Alpine component
                    const alpineParent = target.closest('[x-data]');
                    if (alpineParent && Alpine.$data(alpineParent)) {
                        const alpineData = Alpine.$data(alpineParent);
                        targetValue = alpineData.recordValue || target.value;
                    } else {
                        targetValue = target.value;
                    }

                    // Evaluate the condition
                    if (condition.condition === 'equals') {
                        if (String(targetValue) !== String(condition.value)) {
                            shouldEnable = false;
                            break;
                        } else {
                        }
                    } else if (condition.condition === 'not_equals') {
                        if (String(targetValue) === String(condition.value)) {
                            shouldEnable = false;

                            break;
                        } else {

                        }
                    }
                } else {
                    {{-- console.warn('Target field not found:', conditionField); --}}

                    shouldEnable = false;
                }
            }

            this.isDisabled = !shouldEnable;
            {{-- console.log('Final isDisabled state for {{ $fieldid }}:', this.isDisabled); --}}

            const inputs = this.$el.querySelectorAll('input, select, textarea, button');
            inputs.forEach(input => {
                // Don't disable the hidden select for list fields, only the visible one
                if (!input.classList.contains('inline-hidden')) {
                    input.disabled = this.isDisabled;
                }
            });

            // Update visual state
            if (this.isDisabled && this.editing) {
                this.cancelEdit();
            }
        },
        formatDate(date) {
            if (date && date !== 'null' && date.length > 0) {
                const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
                if (dateRegex.test(date)) {
                    return date;
                }
                const parsedDate = new Date(date);
                if (isNaN(parsedDate.getTime())) {
                    console.error('Invalid date format:', date);
                    return '';
                }
                return parsedDate.toISOString().split('T')[0];
            }
            return '';
        },
        formatDateForSubmission(date) {
            if (!date) return '';
            const [year, month, day] = date.split('-');
            return `${parseInt(month)}/${parseInt(day)}/${year}`;
        },
        formatDateTime(dateTime) {
            if (dateTime) {
                const parsedDateTime = new Date(dateTime);
                if (isNaN(parsedDateTime.getTime())) {
                    console.error('Invalid datetime format:', dateTime);
                    return '';
                }
                return parsedDateTime.toISOString().slice(0, 16);
            }
            return '';
        },
        formatDisplayDate(date) {
            if (!date) return '--';
            try {
                const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
                if (dateRegex.test(date)) {
                    const [year, month, day] = date.split('-');
                    return `${month}/${day}/${year}`;
                } else {
                    const parsedDate = new Date(date);
                    if (isNaN(parsedDate.getTime())) return '--';
                    return parsedDate.toLocaleDateString();
                }
            } catch (e) {
                return '--';
            }
        },
        formatDisplayDateTime(dateTime) {
            if (!dateTime) return '--';
            try {
                const parsedDateTime = new Date(dateTime);
                if (isNaN(parsedDateTime.getTime())) return '--';
                return parsedDateTime.toLocaleString();
            } catch (e) {
                return '--';
            }
        },
        startEdit() {
            if (!this.isDisabled) {
                this.originalValue = this.recordValue;
                this.editing = true;
            }
        },
        async updateField() {
            if (this.isDisabled) return;

            if ('{{ $contenttype }}' === 'date') {
                // Optional: format for submission if needed
            }
            const success = await $wire.updatefield('{{ $recordid }}', '{{ $recordtype }}', '{{ $contenttype }}', '{{ $fieldid }}', this.recordValue, @js($listoptions));

            if (success) {
                this.editing = false;
                this.originalValue = this.recordValue;

                // Trigger re-evaluation of conditionals in other fields
                window.dispatchEvent(new CustomEvent('alpine:updated'));
            } else {
                alert('Field was not able to save. Please try again.');
            }
        },
        cancelEdit() {
            this.recordValue = this.originalValue;
            this.editing = false;
        }
    }"
    x-init="init"
    x-cloak
    @click.away="cancelEdit()"
    wire:key="updatefield-{{ $recordid }}-{{ json_encode($value) }}"
    data-field="{{ $fieldid }}"
>
    <div x-show="!editing" class="flex items-center space-x-3 relative" :class="{ 'opacity-50': isDisabled }">
        @switch($contenttype)
            @case('free_form_text')
                @if(isset($href))
                <a href="{{ $href }}" class="whitespace-nowrap mr-auto" target="_blank" :class="{ 'pointer-events-none': isDisabled }">
                    <span x-text="recordValue ? (recordValue.length > 50 ? recordValue.slice(0, 50) + '...' : recordValue) : ''"></span>
                </a>
                @else
                    <span x-text="recordValue ? (recordValue.length > 50 ? recordValue.slice(0, 50) + '...' : recordValue) : ''"></span>
                @endif
                <button @click="startEdit()" :disabled="isDisabled" :class="{ 'cursor-not-allowed': isDisabled }">
                    <svg class="w-5 h-5 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                        <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
                    </svg>
                </button>
            @break
            @case('hyperlink')
                @if($value)
                    <a href="{{ $value }}" class="link max-w-xs truncate block" target="_blank" title="{{ $value }}" :class="{ 'pointer-events-none': isDisabled }">
                        <span x-text="recordValue ? (recordValue.length > 30 ? recordValue.slice(0, 30) + '...' : recordValue) : ''"></span>
                    </a>
                @else
                    <span class="px-3 py-1 rounded-sm text-gray-500 whitespace-nowrap">--</span>
                @endif
                <button @click="startEdit()" :disabled="isDisabled" :class="{ 'cursor-not-allowed': isDisabled }" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                        <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
                    </svg>
                </button>
            @break

            @case('date')
                <span
                    x-text="formatDisplayDate(recordValue)"
                    class="px-3 py-1 rounded-sm text-gray-700 whitespace-nowrap"
                    :class="{ 'cursor-pointer hover:bg-gray-100': !isDisabled, 'cursor-not-allowed': isDisabled }"
                    @click="startEdit()"
                ></span>
                <button @click="startEdit()" :disabled="isDisabled" :class="{ 'cursor-not-allowed': isDisabled }" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                        <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
                    </svg>
                </button>
            @break

            @case('date_time')
                <span
                    x-text="formatDisplayDateTime(recordValue)"
                    class="px-3 py-1 rounded-sm text-gray-700 whitespace-nowrap"
                    :class="{ 'cursor-pointer hover:bg-gray-100': !isDisabled, 'cursor-not-allowed': isDisabled }"
                    @click="startEdit()"
                ></span>
                <button @click="startEdit()" :disabled="isDisabled" :class="{ 'cursor-not-allowed': isDisabled }" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                        <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
                    </svg>
                </button>
            @break

            @case('check_box')
                <input
                    type="checkbox"
                    class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
                    x-model="recordValue"
                    :checked="recordValue"
                    @change="updateField()"
                    :disabled="isDisabled"
                />
            @break

            @case('multiple_select')
                <div class="relative">
                    @php
                        $multilistoptions = is_string($listoptions) ? json_decode($listoptions, true) : $listoptions;
                        if (is_string($multilistoptions) && json_last_error() !== JSON_ERROR_NONE) {
                            $multilistoptions = explode(',', $multilistoptions);
                        }
                        $valueArray = explode(',', $value);
                        $matchingOptions = array_filter($multilistoptions, function($option) use ($valueArray) {
                            return in_array($option['id'], $valueArray);
                        });
                    @endphp

                    <span
                        x-show="recordValue"
                        class="px-3 rounded-sm text-gray-500 whitespace-nowrap"
                        :class="{ 'cursor-pointer': !isDisabled, 'cursor-not-allowed': isDisabled }"
                        @click="if (!isDisabled) editing = !editing">
                        @foreach ($matchingOptions as $index => $option)
                        {{ $option['value'] }}@if($index < count($matchingOptions) - 1), @endif
                        @endforeach
                    </span>
                    <span
                        x-show="!recordValue"
                        class="px-3 py-2 rounded-sm text-gray-500 whitespace-nowrap"
                        :class="{ 'cursor-pointer': !isDisabled, 'cursor-not-allowed': isDisabled }"
                        @click="if (!isDisabled) editing = !editing">
                        --
                    </span>

                    <div :class="editing ? 'overflow-visible z-20 ' : 'overflow-hidden'" class="relative abs-wrap">
                        <div class="absolute" :class="editing ? 'bg-white p-2 rounded shadow-lg' : ''">
                            <select
                                x-model="recordValue"
                                :class="editing ? 'block' : 'hidden'"
                                class="cursor-pointer"
                                :disabled="isDisabled"
                                multiple>
                                <option value="">-None-</option>
                                @foreach (json_decode($listoptions) as $option)
                                    <option value="{{ $option->id }}" @if (in_array($option->id, $valueArray)) selected @endif>{{ $option->value }}</option>
                                @endforeach
                            </select>
                            <div class="flex space-x-2 mt-2">
                                <button @click="editing = false; updateField()" class="link" :class="editing ? '' : 'hidden'">Save</button>
                                <button @click="editing = false;" class="link alert" :class="editing ? '' : 'hidden'">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            @break

            @case('list')
            <div>
                @foreach (json_decode($listoptions) as $option)
                    <span
                        class="px-3 py-1 rounded-sm whitespace-nowrap list-text text-black"
                        x-show="'{{ $option->id }}' == recordValue"
                        :style="'{{ $option->color ?? '' }}' ? 'background-color: {{ $option->color }}' : ''"
                    >{{ $option->value }}</span>
                @endforeach

                <span x-show="!recordValue" class="px-3 py-2 rounded-sm text-gray-500 whitespace-nowrap cursor-pointer">
                    --
                </span>

                <select
                    x-model="recordValue"
                    @change="updateField()"
                    class="inline-hidden cursor-pointer"
                    name="{{ $fieldid }}"
                    :disabled="isDisabled">
                    <option value="" disabled selected>Select an option</option>
                    @foreach (json_decode($listoptions) as $option)
                        <option value="{{ $option->id }}" @if ($option->id == $value) selected @endif>{{ $option->value }}</option>
                    @endforeach
                </select>
            </div>
            @break
        @endswitch
    </div>

    <div x-show="editing" class="flex items-center space-x-2">
        @switch($contenttype)
            @case('free_form_text')
                <input
                    type="text"
                    x-model="recordValue"
                    class="input-style"
                    style="min-width: 240px;"
                    @keydown.enter="updateField()"
                    @keydown.escape="cancelEdit()"
                    :disabled="isDisabled"
                />
            @break

            @case('date')
                <input
                    type="date"
                    x-model="recordValue"
                    class="px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    @keydown.enter="updateField()"
                    @keydown.escape="cancelEdit()"
                    :disabled="isDisabled"
                />
            @break

            @case('date_time')
                <input
                    type="datetime-local"
                    x-model="recordValue"
                    class="px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    @keydown.enter="updateField()"
                    @keydown.escape="cancelEdit()"
                    :disabled="isDisabled"
                />
            @break

            @case('hyperlink')
                <input
                    type="url"
                    x-model="recordValue"
                    class="input-style min-w-48"
                    placeholder="https://"
                    style="min-width: 240px;"
                    @keydown.enter="updateField()"
                    @keydown.escape="cancelEdit()"
                    :disabled="isDisabled"
                />
            @break
        @endswitch

        <div class="btn-wrap flex items-center space-x-1">
            <button @click="cancelEdit()" class="p-1 hover:bg-gray-100 rounded" title="Cancel">
                <svg class="w-4 h-4 text-gray-500 hover:text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
            <button @click="updateField()" class="p-1 hover:bg-gray-100 rounded" title="Save" :disabled="isDisabled">
                <svg class="w-4 h-4 text-gray-500 hover:text-gray-800" 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>
            </button>
        </div>
    </div>
</div>