@props([
    'category' => '',
    'specs' => [],
    'categoryIndex' => 0,
    'canDelete' => true
])

<div class="spec-category bg-neutral-50 dark:bg-neutral-900 rounded-lg p-4 border border-neutral-200 dark:border-neutral-700"
     wire:key="category-{{ $category }}-{{ $categoryIndex }}"
     x-data="{
         editingCategory: false,
         categoryName: @js($category),
         originalName: @js($category),
         collapsed: false,
         sortableInstance: null
     }">

    <!-- Category Header -->
    <div class="mb-3 flex items-center justify-between">
        <!-- Category Name (Editable) -->
        <div class="flex-1 flex items-center gap-2">
            <!-- Collapse/Expand Toggle -->
            <button type="button"
                    @click="collapsed = !collapsed"
                    class="p-0.5 text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors">
                <svg class="w-4 h-4 transition-transform duration-200"
                     :class="{'rotate-90': !collapsed}"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>

            <!-- Category Name -->
            <div class="flex-1">
                <h3 x-show="!editingCategory"
                    @click="editingCategory = true; $nextTick(() => $refs.categoryInput.select())"
                    class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors inline-flex items-center gap-1"
                    title="Click to rename category">
                    <span x-text="categoryName"></span>
                    <span class="text-xs text-neutral-500 dark:text-neutral-400">({{ is_array($specs) ? count($specs) : 0 }})</span>
                </h3>

                <input x-show="editingCategory"
                       x-ref="categoryInput"
                       type="text"
                       x-model="categoryName"
                       @blur="
                           if (categoryName !== originalName && categoryName.trim()) {
                               $wire.renameCategory(originalName, categoryName).then(() => {
                                   originalName = categoryName;
                               }).catch(() => {
                                   categoryName = originalName;
                               });
                           }
                           editingCategory = false;
                       "
                       @keydown.enter.prevent="
                           if (categoryName !== originalName && categoryName.trim()) {
                               $wire.renameCategory(originalName, categoryName).then(() => {
                                   originalName = categoryName;
                               }).catch(() => {
                                   categoryName = originalName;
                               });
                           }
                           editingCategory = false;
                       "
                       @keydown.escape.prevent="
                           categoryName = originalName;
                           editingCategory = false;
                       "
                       class="text-sm font-semibold bg-transparent border-0 border-b-2 border-blue-500 px-0 py-0 focus:outline-none focus:ring-0"
                       style="display: none;"
                       maxlength="50"/>
            </div>
        </div>

        <!-- Category Actions -->
        <div class="flex items-center gap-2">
            <!-- Add Spec Button -->
            <button type="button"
                    wire:click="openAddSpecModal('{{ $category }}')"
                    class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 transition-colors">
                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Add
            </button>

            <!-- Delete Category Button -->
            @if($canDelete)
            <button type="button"
                    wire:click="deleteCategory('{{ $category }}')"
                    wire:confirm="Delete this category and all its specifications?"
                    class="p-1 text-neutral-400 hover:text-red-600 dark:text-neutral-500 dark:hover:text-red-400 transition-colors"
                    title="Delete category">
                <svg class="w-4 h-4" 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>
            @endif
        </div>
    </div>

    <!-- Specs Grid (Collapsible) -->
    <div x-show="!collapsed"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 transform -translate-y-2"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 transform translate-y-0"
         x-transition:leave-end="opacity-0 transform -translate-y-2">

        <!-- Always render the grid with Sortable, even when empty, so drag-and-drop works -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 min-h-[120px] transition-colors rounded-lg p-2"
             :class="{'bg-blue-50 dark:bg-blue-900/10 border-2 border-dashed border-blue-300 dark:border-blue-700': {{ (is_array($specs) ? count($specs) : 0) === 0 ? 'true' : 'false' }} }"
             x-ref="specGrid"
             data-category="{{ $category }}"
             x-init="
                 $nextTick(function() {
                     if (window.Sortable && $refs.specGrid) {
                         sortableInstance = new Sortable($refs.specGrid, {
                             group: 'specs',
                             animation: 150,
                             handle: '.drag-handle',
                             ghostClass: 'sortable-ghost',
                             dragClass: 'sortable-drag',
                             emptyInsertThreshold: 120,
                             forceFallback: false,
                             fallbackTolerance: 3,
                             onEnd: function(evt) {
                                 var specKey = evt.item.dataset.specKey;
                                 var fromCategory = evt.from.dataset.category;
                                 var toCategory = evt.to.dataset.category;

                                 if (fromCategory !== toCategory) {
                                     $wire.moveSpec(specKey, fromCategory, toCategory);
                                 }
                             }
                         });
                     }
                 });
             ">
            @if(is_array($specs) && count($specs) > 0)
                @php $specIndex = 0; @endphp
                @foreach($specs as $specKey => $specValue)
                    <x-admin.spec-card
                        :category="$category"
                        :spec-key="$specKey"
                        :spec-value="$specValue"
                        :category-index="$categoryIndex"
                        :spec-index="$specIndex++"
                    />
                @endforeach
            @else
                <!-- Empty state that sits inside the sortable area -->
                <div class="col-span-full py-8 text-center pointer-events-none">
                    <p class="text-xs text-neutral-500 dark:text-neutral-400 italic mb-2">
                        No specifications in this category
                    </p>
                    <button type="button"
                            wire:click="openAddSpecModal('{{ $category }}')"
                            class="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium pointer-events-auto">
                        Add first specification
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>