{{--
    Editable Field Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    A field with display value and edit button that opens a modal
    
    Usage:
    <x-proxmox::ui.editable-field 
        label="Hostname"
        :value="$server->hostname"
        :editing="$isEditingHostname"
        wire:model="hostname"
        edit-click="startEditingHostname"
        cancel-click="cancelEditingHostname"
        save-click="updateHostname"
    >
        <x-slot:hint>
            Additional information about the field...
        </x-slot:hint>
    </x-proxmox::ui.editable-field>
--}}

@props([
    'label',
    'value',
    'placeholder' => null,
    'editing' => false,
    'editClick' => null,
    'cancelClick' => null,
    'saveClick' => null,
    'applyClick' => null,
    'applyLabel' => 'Save & Apply',
    'error' => null,
])

@php
    $entangleProperty = $attributes->wire('model')->value() ? ('isEditing' . ucfirst($label)) : 'editing';
@endphp

<div class="flex flex-col gap-2" x-data="{ showEditModal: @entangle($entangleProperty) }">
    <label class="text-sm font-medium text-secondary">{{ $label }}</label>
    <div class="flex items-center gap-2.5 px-4 py-2.5 bg-background-secondary border border-neutral rounded-lg text-sm">
        <span class="flex-1 truncate text-primary">{{ $value ?? 'Not set' }}</span>
        @if($editClick)
            <button 
                wire:click="{{ $editClick }}" 
                type="button"
                class="inline-flex items-center justify-center p-0 bg-transparent border-none text-secondary/60 hover:text-primary transition-colors duration-200 cursor-pointer"
                aria-label="Edit {{ $label }}"
            >
                <x-ri-edit-line class="w-4 h-4" />
            </button>
        @endif
    </div>

    @if($editing !== false)
        <!-- Edit Modal Backdrop -->
        <div 
            x-cloak 
            x-show="showEditModal" 
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            @click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
            @keydown.escape.window="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
            class="fixed inset-0 z-[99998] bg-black/50 backdrop-blur-sm"
        ></div>
        
        <!-- Edit Modal -->
        <div 
            x-cloak 
            x-show="showEditModal" 
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.self="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
            class="fixed inset-0 z-[99999] flex items-center justify-center p-4"
        >
            <div class="relative w-full max-w-xl bg-background border border-neutral rounded-lg p-6 shadow-xl">
                <div class="flex items-center justify-between mb-5">
                    <h4 class="text-lg font-semibold text-primary">Edit {{ $label }}</h4>
                    <button 
                        type="button"
                        class="flex items-center justify-center w-9 h-9 p-0 bg-transparent border-none rounded-lg text-secondary hover:bg-background-secondary hover:text-primary transition-all duration-200 cursor-pointer"
                        @click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
                        aria-label="Close"
                    >
                        <x-ri-close-line class="w-5 h-5" />
                    </button>
                </div>
                
                <div class="flex flex-col gap-4">
                    <div class="flex flex-col gap-2">
                        <label class="text-sm font-medium text-secondary">{{ $label }}</label>
                        <input 
                            type="text"
                            {{ $attributes->whereStartsWith('wire:model') }}
                            class="w-full h-11 px-4 text-sm text-primary bg-background border border-neutral rounded-lg shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 placeholder:text-secondary/50 transition-all duration-150"
                            placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
                        />
                    </div>
                    
                    @if($error)
                        <div class="text-sm text-error">{{ $error }}</div>
                    @endif
                    
                    @if(isset($hint))
                        <div class="text-xs text-secondary">{{ $hint }}</div>
                    @endif
                </div>
                
                <div class="flex justify-end gap-3 pt-4 mt-2 border-t border-neutral">
                    @if($cancelClick)
                        <button 
                            type="button" 
                            @click="showEditModal = false; $wire.{{ $cancelClick }}()"
                            class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-background-secondary text-secondary border border-neutral rounded-lg shadow-sm hover:bg-background-secondary/80 transition-all duration-200 cursor-pointer"
                        >
                            Cancel
                        </button>
                    @endif
                    @if($saveClick)
                        <button 
                            type="button" 
                            wire:click="{{ $saveClick }}"
                            class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-all duration-200 cursor-pointer"
                        >
                            Save
                        </button>
                    @endif
                    @if($applyClick)
                        <button 
                            type="button" 
                            wire:click="{{ $applyClick }}"
                            class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-all duration-200 cursor-pointer"
                        >
                            {{ $applyLabel }}
                        </button>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>