@props([
    'show' => false,
    'mode' => 'add', // add, edit, category
    'categories' => [],
    'form' => [],
    'errors' => []
])

<div x-data="{ open: @entangle('showSpecModal') }"
     x-show="open"
     @keydown.escape.window="open = false"
     class="relative z-50"
     style="display: none;">

    <!-- Backdrop -->
    <div x-show="open"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-neutral-500/75 dark:bg-neutral-900/75 transition-opacity"
         @click="open = false"></div>

    <!-- Modal -->
    <div class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
            <div x-show="open"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 class="relative transform overflow-hidden rounded-lg bg-white dark:bg-neutral-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">

                <!-- Modal Header -->
                <div>
                    <h3 class="text-lg font-semibold leading-6 text-neutral-900 dark:text-neutral-100 mb-2">
                        @if($mode === 'category')
                            Add New Category
                        @elseif($mode === 'edit')
                            Edit Specification
                        @else
                            Add Specification
                        @endif
                    </h3>
                    <p class="text-sm text-neutral-500 dark:text-neutral-400">
                        @if($mode === 'category')
                            Create a new category to organize specifications
                        @elseif($mode === 'edit')
                            Modify the specification details
                        @else
                            Add a new specification to the selected category
                        @endif
                    </p>
                </div>

                <!-- Modal Body -->
                <div class="mt-4">
                    @if($mode === 'category')
                        <!-- Category Name Input -->
                        <div>
                            <label for="new-category-name" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                Category Name
                            </label>
                            <input type="text"
                                   id="new-category-name"
                                   wire:model="specForm.newCategoryName"
                                   class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                   placeholder="e.g., Technical Specs">
                            @if(isset($errors['newCategoryName']))
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $errors['newCategoryName'] }}</p>
                            @endif
                        </div>
                    @else
                        <div class="space-y-4">
                            @if($mode === 'add')
                                <!-- Category Selector -->
                                <div>
                                    <label for="spec-category" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                        Category
                                    </label>
                                    <select id="spec-category"
                                            wire:model="specForm.category"
                                            class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
                                        <option value="">Select a category</option>
                                        @foreach(array_keys($categories) as $cat)
                                            <option value="{{ $cat }}">{{ $cat }}</option>
                                        @endforeach
                                    </select>
                                    @if(isset($errors['category']))
                                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $errors['category'] }}</p>
                                    @endif
                                </div>
                            @endif

                            <!-- Specification Name -->
                            <div>
                                <label for="spec-name" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                    Specification Name
                                </label>
                                <input type="text"
                                       id="spec-name"
                                       wire:model="specForm.name"
                                       class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                       placeholder="e.g., Battery Life">
                                @if(isset($errors['name']))
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $errors['name'] }}</p>
                                @endif
                            </div>

                            <!-- Specification Value -->
                            <div>
                                <label for="spec-value" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                                    Specification Value
                                </label>
                                <textarea id="spec-value"
                                          wire:model="specForm.value"
                                          rows="3"
                                          class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                          placeholder="e.g., 500 shots"></textarea>
                                @if(isset($errors['value']))
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $errors['value'] }}</p>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Modal Footer -->
                <div class="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse">
                    <button type="button"
                            wire:click="saveSpec"
                            class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto">
                        @if($mode === 'edit')
                            Update
                        @else
                            Add
                        @endif
                    </button>
                    <button type="button"
                            wire:click="closeSpecModal"
                            @click="open = false"
                            class="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-neutral-700 px-3 py-2 text-sm font-semibold text-neutral-900 dark:text-neutral-100 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-600 sm:mt-0 sm:w-auto">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>