@props([
    'recordId',
    'value' => '',
    'preloadedTitle' => null,
    'preloadedId' => null,
    'recordTypeScriptId' => null
])

@php
    // Use preloaded data if available, otherwise fall back to async loading
    $hasPreloadedData = !is_null($preloadedTitle) && !is_null($preloadedId);
    $initialTitle = $hasPreloadedData ? $preloadedTitle : '';
    $initialHref = $hasPreloadedData && $recordTypeScriptId 
        ? route($recordTypeScriptId . '.show', ['id' => $preloadedId]) 
        : '';
@endphp

<div x-data="{
        title: {{ json_encode($initialTitle) }},
        href: {{ json_encode($initialHref) }},
        hasPreloaded: {{ json_encode($hasPreloadedData) }},
        async getFieldName() {
            // Only fetch if we don't have preloaded data
            if (this.hasPreloaded) {
                return;
            }
            
            try {
                const value = {{ json_encode($value) }};
                const name = await $wire.getfieldname('{{ $recordId }}', value);
                if (name && name.title) {
                    this.title = name.title;
                    this.href = name.href;
                } else {
                    this.title = '--';
                    this.href = '#';
                }
            } catch (error) {
                console.error('Error fetching field name:', error);
                this.title = 'Error';
                this.href = '#';
            }
        }
    }"
    x-init="getFieldName()"
    wire:key="recordname-{{ $recordId }}-{{ json_encode($value) }}"
    @click.away="editing = false"
>
    <template x-if="href && title != '--' && title != ''">
        <a :href="href" class="text-blue-600 hover:underline" target="_blank" x-text="title"></a>
    </template>
    <template x-if="!href || title == '--' || title == ''">
        <span x-text="title || '--'"></span>
    </template>
</div>