{{--
    Editable Field Component - AdminLTE style
    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,
])

<style>
    .editable-field-lte {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .editable-field-lte-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #495057;
    }
    .editable-field-lte-display {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 1rem;
        background-color: #f8f9fa;
        border: 1px solid var(--lte-border-color, #dee2e6);
        border-radius: var(--lte-border-radius, 0.375rem);
        font-size: 0.875rem;
    }
    .editable-field-lte-value {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #212529;
    }
    .editable-field-lte-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: none;
        color: #adb5bd;
        cursor: pointer;
        transition: color var(--lte-transition-speed, 0.3s) ease;
    }
    .editable-field-lte-btn:hover {
        color: var(--lte-primary, #0d6efd);
    }
    .editable-field-lte-btn svg {
        width: 1rem;
        height: 1rem;
    }
    .editable-field-lte-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99998;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }
    .editable-field-lte-modal-container {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .editable-field-lte-modal {
        position: relative;
        width: 100%;
        max-width: 36rem;
        background-color: #fff;
        border: 1px solid var(--lte-border-color, #dee2e6);
        border-radius: var(--lte-border-radius, 0.375rem);
        padding: 1.5rem;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    }
    .editable-field-lte-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }
    .editable-field-lte-modal-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #212529;
    }
    .editable-field-lte-modal-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: var(--lte-border-radius, 0.375rem);
        color: var(--lte-secondary, #6c757d);
        cursor: pointer;
        transition: all var(--lte-transition-speed, 0.3s) ease;
    }
    .editable-field-lte-modal-close:hover {
        background-color: #f8f9fa;
        color: #212529;
    }
    .editable-field-lte-modal-close svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    .editable-field-lte-modal-body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .editable-field-lte-input-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .editable-field-lte-input-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--lte-secondary, #6c757d);
    }
    .editable-field-lte-input {
        width: 100%;
        height: 2.75rem;
        padding: 0 1rem;
        font-size: 0.875rem;
        color: #212529;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: var(--lte-border-radius, 0.375rem);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .editable-field-lte-input:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    .editable-field-lte-input::placeholder {
        color: #adb5bd;
    }
    .editable-field-lte-error {
        font-size: 0.875rem;
        color: var(--lte-danger, #dc3545);
    }
    .editable-field-lte-hint {
        font-size: 0.8125rem;
        color: var(--lte-secondary, #6c757d);
    }
    .editable-field-lte-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--lte-border-color, #dee2e6);
    }
    .editable-field-lte-modal-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: var(--lte-border-radius, 0.375rem);
        border: none;
        cursor: pointer;
        transition: all var(--lte-transition-speed, 0.3s) ease;
    }
    .editable-field-lte-modal-btn-cancel {
        background-color: #fff;
        color: #495057;
        border: 1px solid var(--lte-border-color, #dee2e6);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .editable-field-lte-modal-btn-cancel:hover {
        background-color: #f8f9fa;
        border-color: #adb5bd;
    }
    .editable-field-lte-modal-btn-save {
        background-color: var(--lte-primary, #0d6efd);
        color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    .editable-field-lte-modal-btn-save:hover {
        background-color: #0b5ed7;
    }
    /* Dark mode */
    .dark .editable-field-lte-label {
        color: #d1d5db;
    }
    .dark .editable-field-lte-display {
        background-color: #1f2937;
        border-color: #374151;
    }
    .dark .editable-field-lte-value {
        color: #e5e7eb;
    }
    .dark .editable-field-lte-btn {
        color: #6b7280;
    }
    .dark .editable-field-lte-modal {
        background-color: #1f2937;
        border-color: #374151;
    }
    .dark .editable-field-lte-modal-title {
        color: #f3f4f6;
    }
    .dark .editable-field-lte-modal-close {
        color: #9ca3af;
    }
    .dark .editable-field-lte-modal-close:hover {
        background-color: #374151;
        color: #f3f4f6;
    }
    .dark .editable-field-lte-input {
        background-color: #111827;
        border-color: #374151;
        color: #f3f4f6;
    }
    .dark .editable-field-lte-input:focus {
        border-color: var(--lte-primary, #0d6efd);
    }
    .dark .editable-field-lte-input::placeholder {
        color: #6b7280;
    }
    .dark .editable-field-lte-modal-footer {
        border-top-color: #374151;
    }
    .dark .editable-field-lte-modal-btn-cancel {
        background-color: #374151;
        color: #d1d5db;
        border-color: #4b5563;
    }
    .dark .editable-field-lte-modal-btn-cancel:hover {
        background-color: #4b5563;
    }
</style>

<div class="editable-field-lte" x-data="{ showEditModal: @entangle($attributes->wire('model')->value() ? 'isEditing' . ucfirst($label) : 'editing') }">
    <label class="editable-field-lte-label">{{ $label }}</label>
    <div class="editable-field-lte-display">
        <span class="editable-field-lte-value">{{ $value ?? 'Not set' }}</span>
        @if($editClick)
            <button 
                wire:click="{{ $editClick }}" 
                type="button"
                class="editable-field-lte-btn"
                aria-label="Edit {{ $label }}"
            >
                <x-ri-edit-line />
            </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="editable-field-lte-backdrop"
        ></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.away="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
            class="editable-field-lte-modal-container"
        >
            <div class="editable-field-lte-modal">
                <div class="editable-field-lte-modal-header">
                    <h4 class="editable-field-lte-modal-title">Edit {{ $label }}</h4>
                    <button 
                        type="button"
                        class="editable-field-lte-modal-close"
                        @click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
                        aria-label="Close"
                    >
                        <x-ri-close-line />
                    </button>
                </div>
                
                <div class="editable-field-lte-modal-body">
                    <div class="editable-field-lte-input-group">
                        <label class="editable-field-lte-input-label">{{ $label }}</label>
                        <input 
                            type="text"
                            {{ $attributes->whereStartsWith('wire:model') }}
                            class="editable-field-lte-input"
                            placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
                        />
                    </div>
                    
                    @if($error)
                        <div class="editable-field-lte-error">{{ $error }}</div>
                    @endif
                    
                    @if(isset($hint))
                        <div class="editable-field-lte-hint">{{ $hint }}</div>
                    @endif
                </div>
                
                <div class="editable-field-lte-modal-footer">
                    @if($cancelClick)
                        <button 
                            type="button" 
                            @click="showEditModal = false; $wire.{{ $cancelClick }}()"
                            class="editable-field-lte-modal-btn editable-field-lte-modal-btn-cancel"
                        >
                            Cancel
                        </button>
                    @endif
                    @if($saveClick)
                        <button 
                            type="button" 
                            wire:click="{{ $saveClick }}"
                            class="editable-field-lte-modal-btn editable-field-lte-modal-btn-save"
                        >
                            Save
                        </button>
                    @endif
                    @if($applyClick)
                        <button 
                            type="button" 
                            wire:click="{{ $applyClick }}"
                            class="editable-field-lte-modal-btn editable-field-lte-modal-btn-save"
                        >
                            {{ $applyLabel }}
                        </button>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>