<div class="max-w-2xl mx-auto">

    <a href="{{ route('projects.issues', $project) }}" wire:navigate
       class="btn btn-ghost btn-sm gap-1 mb-3">
        <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver a incidencias
    </a>

    <div class="card bg-base-100 border border-base-300">
        <div class="card-body">
            <h1 class="text-xl font-bold mb-1">
                {{ $issue ? 'Editar incidencia' : 'Nueva incidencia' }}
            </h1>
            <p class="text-sm text-base-content/60 mb-4">{{ $project->name }}</p>

            @if($featureName)
                <div class="alert alert-info py-2 mb-4 text-sm">
                    <x-heroicon-o-map-pin class="w-4 h-4" />
                    <span>Vinculada al elemento del mapa: <strong>{{ $featureName }}</strong></span>
                </div>
            @endif

            <form wire:submit.prevent="save" class="space-y-4">

                {{-- Título --}}
                <div class="form-control">
                    <label class="label">
                        <span class="label-text font-medium">Título <span class="text-error">*</span></span>
                    </label>
                    <input type="text" wire:model="title" autofocus
                           class="input input-bordered w-full @error('title') input-error @enderror"
                           placeholder="Describe brevemente el problema..." />
                    @error('title')
                        <label class="label"><span class="label-text-alt text-error">{{ $message }}</span></label>
                    @enderror
                </div>

                {{-- Descripción --}}
                <div class="form-control">
                    <label class="label"><span class="label-text font-medium">Descripción</span></label>
                    <textarea wire:model="description"
                              class="textarea textarea-bordered w-full h-28 resize-y @error('description') textarea-error @enderror"
                              placeholder="Detalla el problema, contexto, pasos para reproducirlo..."></textarea>
                    @error('description')
                        <label class="label"><span class="label-text-alt text-error">{{ $message }}</span></label>
                    @enderror
                </div>

                {{-- Prioridad + Estado --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Prioridad <span class="text-error">*</span></span>
                        </label>
                        <select wire:model="priority"
                                class="select select-bordered w-full @error('priority') select-error @enderror">
                            <option value="low">Baja</option>
                            <option value="medium">Media</option>
                            <option value="high">Alta</option>
                            <option value="critical">Crítica</option>
                        </select>
                        @error('priority')
                            <label class="label"><span class="label-text-alt text-error">{{ $message }}</span></label>
                        @enderror
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Estado <span class="text-error">*</span></span>
                        </label>
                        <select wire:model.live="status"
                                class="select select-bordered w-full @error('status') select-error @enderror">
                            <option value="open">Abierto</option>
                            <option value="in_review">En revisión</option>
                            <option value="resolved">Resuelto</option>
                            <option value="closed">Cerrado</option>
                        </select>
                        @error('status')
                            <label class="label"><span class="label-text-alt text-error">{{ $message }}</span></label>
                        @enderror
                    </div>
                </div>

                {{-- Tipo / categoría --}}
                <div class="form-control">
                    <label class="label">
                        <span class="label-text font-medium">Tipo de incidencia <span class="text-error">*</span></span>
                    </label>
                    <select wire:model="type"
                            class="select select-bordered w-full @error('type') select-error @enderror">
                        @foreach(\App\Models\Issue::typeLabels() as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('type')
                        <label class="label"><span class="label-text-alt text-error">{{ $message }}</span></label>
                    @enderror
                </div>

                {{-- Asignado a --}}
                <div class="form-control">
                    <label class="label"><span class="label-text font-medium">Asignado a</span></label>
                    <select wire:model="assignedTo"
                            class="select select-bordered w-full @error('assignedTo') select-error @enderror">
                        <option value="">Sin asignar</option>
                        @foreach($projectUsers as $user)
                            <option value="{{ $user->id }}">{{ $user->name }} &ndash; {{ $user->email }}</option>
                        @endforeach
                    </select>
                    @error('assignedTo')
                        <label class="label"><span class="label-text-alt text-error">{{ $message }}</span></label>
                    @enderror
                </div>

                {{-- Notas de resolución (visible when status = resolved or closed) --}}
                @if(in_array($status, ['resolved', 'closed']))
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Notas de resolución</span>
                            <span class="label-text-alt text-base-content/50">Opcional</span>
                        </label>
                        <textarea wire:model="resolutionNotes"
                                  class="textarea textarea-bordered w-full h-20 resize-y @error('resolutionNotes') textarea-error @enderror"
                                  placeholder="Describe cómo se resolvió el problema..."></textarea>
                        @error('resolutionNotes')
                            <label class="label"><span class="label-text-alt text-error">{{ $message }}</span></label>
                        @enderror
                    </div>
                @endif

                {{-- Footer --}}
                <div class="flex items-center justify-end gap-3 pt-2 border-t border-base-300">
                    <a href="{{ route('projects.issues', $project) }}" wire:navigate class="btn btn-ghost">Cancelar</a>
                    <button type="submit" wire:loading.attr="disabled" wire:target="save" class="btn btn-primary gap-2">
                        <span wire:loading.remove wire:target="save"><x-heroicon-o-check class="w-4 h-4" /></span>
                        <span wire:loading wire:target="save" class="loading loading-spinner loading-sm"></span>
                        {{ $issue ? 'Actualizar incidencia' : 'Crear incidencia' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
