<div class="max-w-3xl mx-auto">
    <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div>
            <h1 class="text-xl font-bold">Tipos de elemento</h1>
            <p class="text-sm text-base-content/60">Catálogo reutilizable de tipos para los elementos del mapa</p>
        </div>
        <button wire:click="newType" class="btn btn-primary btn-sm gap-2">
            <x-heroicon-o-plus class="w-4 h-4" /> Nuevo tipo
        </button>
    </div>

    @if($types->isEmpty())
        <div class="flex flex-col items-center justify-center py-12 text-base-content/40">
            <x-heroicon-o-tag class="w-14 h-14 mb-3" />
            <p class="font-semibold">Sin tipos de elemento</p>
            <p class="text-sm">Crea tipos (p. ej. Pilar, Viga, Muro) para clasificar los elementos.</p>
        </div>
    @else
        <div class="space-y-2">
            @foreach($types as $t)
                <div wire:key="ftype-{{ $t->id }}" class="card bg-base-100 border border-base-300">
                    <div class="card-body p-3 flex-row items-center justify-between gap-3">
                        <div class="flex items-center gap-3 min-w-0">
                            <span class="w-5 h-5 rounded-full border border-base-300 shrink-0" style="background: {{ $t->color }}"></span>
                            <div class="min-w-0">
                                <div class="font-semibold">{{ $t->name }}</div>
                                @if($t->description)<div class="text-xs text-base-content/50 truncate">{{ $t->description }}</div>@endif
                            </div>
                            <span class="badge badge-ghost badge-sm shrink-0">{{ $t->features_count }} uso(s)</span>
                        </div>
                        <div class="flex items-center gap-1 shrink-0">
                            <button wire:click="edit({{ $t->id }})" class="btn btn-xs btn-ghost"><x-heroicon-o-pencil class="w-3.5 h-3.5" /></button>
                            <button wire:click="delete({{ $t->id }})" wire:confirm="¿Eliminar el tipo '{{ $t->name }}'? Los elementos que lo usen quedarán sin tipo."
                                    class="btn btn-xs btn-error btn-outline"><x-heroicon-o-trash class="w-3.5 h-3.5" /></button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Modal crear/editar --}}
    @if($showForm)
        <div class="fixed inset-0 z-40 bg-black/50" wire:click="$set('showForm', false)"></div>
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div class="bg-base-100 rounded-box shadow-2xl w-full max-w-md">
                <div class="flex items-center justify-between p-4 border-b border-base-300">
                    <h3 class="font-bold">{{ $editingId ? 'Editar tipo' : 'Nuevo tipo' }}</h3>
                    <button wire:click="$set('showForm', false)" class="btn btn-sm btn-ghost btn-circle"><x-heroicon-o-x-mark class="w-4 h-4" /></button>
                </div>
                <form wire:submit.prevent="save" class="p-4 space-y-3">
                    <div class="form-control">
                        <label class="label"><span class="label-text font-medium">Nombre <span class="text-error">*</span></span></label>
                        <input type="text" wire:model="name" autofocus class="input input-bordered w-full @error('name') input-error @enderror" placeholder="Ej.: Pilar" />
                        @error('name')<span class="text-xs text-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-control">
                        <label class="label"><span class="label-text font-medium">Descripción</span></label>
                        <input type="text" wire:model="description" class="input input-bordered w-full" />
                    </div>
                    <div class="form-control">
                        <label class="label"><span class="label-text font-medium">Color</span></label>
                        <input type="color" wire:model="color" class="input input-bordered w-full h-12 p-1" />
                    </div>
                    <div class="flex justify-end gap-2 pt-2 border-t border-base-300">
                        <button type="button" wire:click="$set('showForm', false)" class="btn btn-ghost btn-sm">Cancelar</button>
                        <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>
