@props([
    'equipment' => null,
    'action',
    'method' => 'POST',
    'users' => collect(),
    'sectors' => collect(),
    'equipmentTypes' => collect(),
])

@php
    $spec = old('specifications', $equipment?->specifications ?? []);
    if (! is_array($spec)) {
        $spec = [];
    }

    $defaultTypeId = old('equipment_type_id', $equipment?->equipment_type_id ?? session('new_equipment_type_id'));
    $defaultTypeRow = $defaultTypeId ? $equipmentTypes->firstWhere('id', (int) $defaultTypeId) : null;
    $defaultCode = $defaultTypeRow?->code ?? ($equipmentTypes->first()?->code ?? 'other');
@endphp

<div class="space-y-6"
     x-data="{ selectedCode: @js($defaultCode) }"
     x-init="$nextTick(() => { const el = $refs.typeSelect; const opt = el?.selectedOptions?.[0]; if (opt?.dataset?.code) selectedCode = opt.dataset.code; })">
<form method="POST" action="{{ $action }}" class="space-y-6" enctype="multipart/form-data">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <div class="md:col-span-2">
            <div class="flex flex-col sm:flex-row sm:items-end gap-2">
                <div class="flex-1 min-w-0">
                    <x-form.label for="equipment_type_id" value="Tipo de equipamento" />
                    <select name="equipment_type_id" id="equipment_type_id" required x-ref="typeSelect"
                            @change="selectedCode = $event.target.selectedOptions[0]?.dataset?.code || 'other'"
                            class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                        @foreach($equipmentTypes as $et)
                            <option value="{{ $et->id }}" data-code="{{ $et->code }}"
                                @selected((string) old('equipment_type_id', $equipment?->equipment_type_id ?? session('new_equipment_type_id')) === (string) $et->id)>
                                {{ $et->name }}
                            </option>
                        @endforeach
                    </select>
                    <x-form.error name="equipment_type_id" />
                </div>
                @if(Auth::user()->hasRole('Admin'))
                    <button type="button"
                            class="inline-flex items-center justify-center shrink-0 h-10 w-10 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
                            title="Novo tipo"
                            x-on:click.prevent="$dispatch('open-modal', 'new-equipment-type')">
                        <span class="text-xl leading-none font-semibold">+</span>
                    </button>
                @endif
            </div>
            <p class="text-xs text-gray-500 mt-1">Os campos técnicos abaixo mudam conforme o tipo (código interno: <span class="font-mono" x-text="selectedCode"></span>).</p>
        </div>

        <div>
            <x-form.label for="lifecycle_status" value="Status do patrimônio" />
            <select name="lifecycle_status" id="lifecycle_status" required
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                @foreach(\App\Enums\EquipmentLifecycleStatus::cases() as $s)
                    <option value="{{ $s->value }}" @selected(old('lifecycle_status', $equipment?->lifecycle_status?->value ?? \App\Enums\EquipmentLifecycleStatus::Active->value) === $s->value)>
                        {{ $s->label() }}
                    </option>
                @endforeach
            </select>
            <p class="text-xs text-gray-500 mt-1">“Em uso” por alocação aparece na listagem; use Manutenção/Baixado para bloquear novas alocações.</p>
            <x-form.error name="lifecycle_status" />
        </div>

        <div class="md:col-span-2">
            <x-form.label for="name" value="Nome do equipamento" />
            <x-form.input
                id="name"
                name="name"
                value="{{ old('name', $equipment?->name) }}"
                required
            />
            <x-form.error name="name" />
        </div>

        <div>
            <x-form.label for="code" value="Código / patrimônio" />
            <x-form.input
                id="code"
                name="code"
                value="{{ old('code', $equipment?->code) }}"
            />
            <x-form.error name="code" />
        </div>

        <div>
            <x-form.label for="sector_id" value="Setor responsável" />
            <select name="sector_id" id="sector_id"
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">— Selecione —</option>
                @foreach($sectors as $sectorOption)
                    <option value="{{ $sectorOption->id }}" @selected((string) old('sector_id', $equipment?->sector_id) === (string) $sectorOption->id)>
                        {{ $sectorOption->name }}
                    </option>
                @endforeach
            </select>
            <p class="text-xs text-gray-500 mt-1">Cadastre setores em <strong>Inventário → Setores</strong>.</p>
            <x-form.error name="sector_id" />
        </div>

        <div class="md:col-span-2">
            <x-form.label for="custodian_user_id" value="Responsável no setor (opcional)" />
            <select name="custodian_user_id" id="custodian_user_id"
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">— Nenhum —</option>
                @foreach($users as $u)
                    <option value="{{ $u->id }}" @selected((string) old('custodian_user_id', $equipment?->custodian_user_id) === (string) $u->id)>
                        {{ $u->name }}
                    </option>
                @endforeach
            </select>
            <p class="text-xs text-gray-500 mt-1">Quem recebeu ou cuida do bem no departamento. Quem está com o equipamento no dia a dia continua no registro de <strong>alocação</strong>.</p>
            <x-form.error name="custodian_user_id" />
        </div>

        <div>
            <x-form.label for="purchase_date" value="Data da compra" />
            <input type="date" name="purchase_date" id="purchase_date"
                   value="{{ old('purchase_date', $equipment?->purchase_date?->format('Y-m-d')) }}"
                   class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40" />
            <x-form.error name="purchase_date" />
        </div>

        <div>
            <x-form.label for="acquisition_unit" value="Unidade de aquisição" />
            <select name="acquisition_unit" id="acquisition_unit"
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">— Selecione —</option>
                @foreach(\App\Enums\EquipmentAcquisitionUnit::cases() as $unit)
                    <option value="{{ $unit->value }}" @selected(old('acquisition_unit', $equipment?->acquisition_unit?->value) === $unit->value)>
                        {{ $unit->label() }}
                    </option>
                @endforeach
            </select>
            <p class="text-xs text-gray-500 mt-1">Onde o equipamento foi adquirido originalmente.</p>
            <x-form.error name="acquisition_unit" />
        </div>

        <div>
            <x-form.label for="condition" value="Condição na compra" />
            <select name="condition" id="condition" required
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                @foreach(\App\Enums\EquipmentCondition::cases() as $c)
                    <option value="{{ $c->value }}" @selected(old('condition', $equipment?->condition?->value ?? \App\Enums\EquipmentCondition::Used->value) === $c->value)>
                        {{ $c->label() }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="condition" />
        </div>

        <div class="md:col-span-2 border-t border-gray-200 pt-4 mt-2">
            <p class="text-sm font-medium text-gray-800 mb-3">Detalhes técnicos (por tipo)</p>

            <template x-if="selectedCode === 'notebook'">
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <x-form.label for="spec_os" value="Sistema operacional" />
                            <x-form.input id="spec_os" name="specifications[os]" value="{{ $spec['os'] ?? '' }}" />
                        </div>
                        <div>
                            <x-form.label for="spec_memory" value="Memória RAM" />
                            <x-form.input id="spec_memory" name="specifications[memory]" value="{{ $spec['memory'] ?? '' }}" placeholder="Ex.: 16 GB" />
                        </div>
                        <div>
                            <x-form.label for="spec_processor" value="Processador" />
                            <x-form.input id="spec_processor" name="specifications[processor]" value="{{ $spec['processor'] ?? '' }}" />
                        </div>
                        <div>
                            <x-form.label for="spec_storage" value="Armazenamento" />
                            <x-form.input id="spec_storage" name="specifications[storage]" value="{{ $spec['storage'] ?? '' }}" placeholder="Ex.: SSD 512 GB" />
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="selectedCode === 'smartphone'">
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <x-form.label for="spec_imei" value="IMEI" />
                            <x-form.input id="spec_imei" name="specifications[imei]" value="{{ $spec['imei'] ?? '' }}" />
                        </div>
                        <div>
                            <x-form.label for="spec_model" value="Modelo" />
                            <x-form.input id="spec_model" name="specifications[model]" value="{{ $spec['model'] ?? '' }}" />
                        </div>
                        <div>
                            <x-form.label for="spec_so_smartphone" value="Versão do SO" />
                            <x-form.input id="spec_so_smartphone" name="specifications[so_version]" value="{{ $spec['so_version'] ?? '' }}" />
                        </div>
                        <div>
                            <x-form.label for="spec_storage_phone" value="Armazenamento" />
                            <x-form.input id="spec_storage_phone" name="specifications[storage]" value="{{ $spec['storage'] ?? '' }}" />
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="selectedCode === 'tablet'">
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <x-form.label for="spec_screen" value="Tamanho da tela" />
                            <x-form.input id="spec_screen" name="specifications[screen]" value="{{ $spec['screen'] ?? '' }}" placeholder="Ex.: 11 polegadas" />
                        </div>
                        <div>
                            <x-form.label for="spec_storage_tab" value="Armazenamento" />
                            <x-form.input id="spec_storage_tab" name="specifications[storage]" value="{{ $spec['storage'] ?? '' }}" />
                        </div>
                        <div>
                            <x-form.label for="spec_processor_tab" value="Processador / chip" />
                            <x-form.input id="spec_processor_tab" name="specifications[processor]" value="{{ $spec['processor'] ?? '' }}" />
                        </div>
                        <div>
                            <x-form.label for="spec_connectivity" value="Conectividade" />
                            <x-form.input id="spec_connectivity" name="specifications[connectivity]" value="{{ $spec['connectivity'] ?? '' }}" placeholder="Wi‑Fi, 4G…" />
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="selectedCode === 'pendrive'">
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <x-form.label for="spec_capacity" value="Capacidade" />
                            <x-form.input id="spec_capacity" name="specifications[capacity]" value="{{ $spec['capacity'] ?? '' }}" placeholder="Ex.: 64 GB" />
                        </div>
                        <div>
                            <x-form.label for="spec_usb" value="USB / geração" />
                            <x-form.input id="spec_usb" name="specifications[usb]" value="{{ $spec['usb'] ?? '' }}" placeholder="Ex.: USB 3.2" />
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="selectedCode === 'adapter'">
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <x-form.label for="spec_connector" value="Tipo de conector" />
                            <x-form.input id="spec_connector" name="specifications[connector]" value="{{ $spec['connector'] ?? '' }}" placeholder="Ex.: USB‑C, HDMI" />
                        </div>
                        <div>
                            <x-form.label for="spec_voltage" value="Voltagem / potência" />
                            <x-form.input id="spec_voltage" name="specifications[power]" value="{{ $spec['power'] ?? '' }}" placeholder="Ex.: 65 W" />
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="selectedCode === 'other'">
                <div class="space-y-4">
                    <div>
                        <x-form.label for="spec_notes" value="Detalhes adicionais" />
                        <x-form.textarea id="spec_notes" name="specifications[notes]" rows="3" :value="$spec['notes'] ?? ''" />
                    </div>
                </div>
            </template>
        </div>

        <div class="md:col-span-2">
            <x-form.label for="description" value="Descrição geral" />
            <x-form.textarea
                id="description"
                name="description"
                rows="4"
                :value="old('description', $equipment?->description)"
            />
            <x-form.error name="description" />
        </div>

        <div class="md:col-span-2">
            <x-form.label for="photo" value="Foto do equipamento" />
            <input type="file"
                   id="photo"
                   name="photo"
                   accept="image/*"
                   class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40" />
            <p class="text-xs text-gray-500 mt-1">Formatos aceitos: imagens (até 5MB).</p>
            <x-form.error name="photo" />

            @if($equipment?->photo_path)
                <div class="mt-3">
                    <p class="text-xs text-gray-500 mb-2">Foto atual</p>
                    <img src="{{ $equipment->photoUrl() }}"
                         alt="Foto do equipamento {{ $equipment->name }}"
                         class="h-32 w-32 object-cover rounded-lg border border-gray-200" />
                </div>
            @endif
        </div>

    </div>

    <div class="flex justify-end gap-3">
        <a href="{{ route('inventory.equipment.index') }}" class="text-gray-600 hover:text-gray-900">
            Cancelar
        </a>

        <x-ui.button type="submit">
            {{ $equipment ? 'Atualizar' : 'Salvar' }}
        </x-ui.button>
    </div>
</form>

@if(Auth::user()->hasRole('Admin'))
    <x-modal name="new-equipment-type" :show="false" maxWidth="md">
        <form method="POST" action="{{ route('inventory.equipment-types.store') }}" class="p-6 space-y-4">
            @csrf
            <h2 class="text-lg font-medium text-gray-900">Novo tipo de equipamento</h2>
            <p class="text-sm text-gray-600">Disponível apenas para usuários com a role <strong>Admin</strong>. O código interno é gerado a partir do nome.</p>
            <div>
                <x-form.label for="new_type_name" value="Nome do tipo" />
                <x-form.input id="new_type_name" name="name" value="{{ old('name') }}" required />
                <x-form.error name="name" />
            </div>
            <div class="flex justify-end gap-2 pt-2">
                <button type="button" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
                        x-on:click="$dispatch('close-modal', 'new-equipment-type')">
                    Cancelar
                </button>
                <x-ui.button type="submit">Salvar tipo</x-ui.button>
            </div>
        </form>
    </x-modal>
@endif
</div>