@props([
    'category' => '',
    'specKey' => '',
    'specValue' => '',
    'categoryIndex' => 0,
    'specIndex' => 0
])

<div class="relative group spec-card"
     wire:key="spec-{{ $category }}-{{ $specKey }}-{{ $specIndex }}"
     data-spec-key="{{ $specKey }}"
     data-category="{{ $category }}"
     x-data="{
         editing: false,
         specValue: @js($specValue),
         originalValue: @js($specValue),
         isDirty: false
     }"
     @spec-updated.window="
         if ($event.detail.key === @js($specKey)) {
             specValue = $event.detail.value;
             originalValue = $event.detail.value;
             isDirty: false;
         }
     ">

    <!-- Spec Header with Name and Actions -->
    <div class="mb-1.5 flex items-center gap-2">
        <!-- Drag Handle -->
        <div class="drag-handle opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing flex-shrink-0">
            <svg class="w-4 h-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300" fill="currentColor" viewBox="0 0 20 20">
                <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"/>
            </svg>
        </div>

        <!-- Label -->
        <label class="flex-1 text-xs font-medium text-neutral-700 dark:text-neutral-300 truncate"
               title="{{ $specKey }}">
            {{ $specKey }}
        </label>

        <!-- Action Buttons (visible on hover) -->
        <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
            <!-- Edit Button -->
            <button type="button"
                    wire:click="openEditSpecModal('{{ $category }}', '{{ $specKey }}')"
                    class="p-0.5 text-neutral-400 hover:text-blue-600 dark:text-neutral-500 dark:hover:text-blue-400 transition-colors"
                    title="Edit specification">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
            </button>

            <!-- Delete Button -->
            <button type="button"
                    wire:click="deleteSpec('{{ $category }}', '{{ $specKey }}')"
                    wire:confirm="Are you sure you want to delete this specification?"
                    class="p-0.5 text-neutral-400 hover:text-red-600 dark:text-neutral-500 dark:hover:text-red-400 transition-colors"
                    title="Delete specification">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Spec Value with Inline Editing -->
    <div class="relative">
        <!-- Display Mode -->
        <div x-show="!editing"
             @click="editing = true; $nextTick(() => $refs.input.focus())"
             class="min-h-[2rem] px-2 py-1.5 text-xs bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded cursor-text hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
             :class="{'border-amber-500 dark:border-amber-400': isDirty}">
            <span x-text="specValue || '(empty)'"
                  :class="{'text-neutral-400 dark:text-neutral-500 italic': !specValue}"></span>
        </div>

        <!-- Edit Mode -->
        <textarea x-show="editing"
                  x-ref="input"
                  x-model="specValue"
                  @input="isDirty = (specValue !== originalValue)"
                  @blur="
                      if (specValue !== originalValue) {
                          $wire.updateSpecValue(@js($category), @js($specKey), specValue).then(() => {
                              originalValue = specValue;
                              isDirty = false;
                          });
                      }
                      editing = false;
                  "
                  @keydown.escape.prevent="
                      specValue = originalValue;
                      isDirty = false;
                      editing = false;
                  "
                  @keydown.enter.prevent="
                      if (specValue !== originalValue) {
                          $wire.updateSpecValue(@js($category), @js($specKey), specValue).then(() => {
                              originalValue = specValue;
                              isDirty = false;
                          });
                      }
                      editing = false;
                  "
                  class="w-full min-h-[2rem] px-2 py-1.5 text-xs bg-white dark:bg-neutral-800 border-2 border-blue-500 dark:border-blue-400 rounded resize-y focus:outline-none focus:ring-1 focus:ring-blue-500"
                  rows="1"
                  style="display: none;"></textarea>

        <!-- Dirty Indicator -->
        <div x-show="isDirty && !editing"
             class="absolute -top-1 -right-1 w-2 h-2 bg-amber-500 rounded-full"
             title="Unsaved changes"></div>
    </div>
</div>