@php
if (!function_exists('formatear_documento')) {
    function formatear_documento($tipo, $cedula) {
        if (!$cedula) return '';
        $num = number_format((int) $cedula, 0, '', '.');
        return $tipo . '-' . $num;
    }
}
@endphp
<div class="max-w-lg mx-auto mt-10 bg-white dark:bg-zinc-900 p-8 rounded-xl shadow flex flex-col gap-6">
    <h2 class="text-2xl font-bold mb-6 text-zinc-900 dark:text-zinc-100">
        {{ $member ? 'Editar Miembro' : 'Nuevo Miembro' }}
    </h2>

    @if ($errors->any())
        <div class="mb-4 p-3 rounded bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
            <ul class="list-disc pl-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form wire:submit.prevent="save" class="flex flex-col gap-6">
        <flux:input wire:model.defer="name" :label="'Nombre'" required autofocus />
        <flux:input wire:model.defer="email" :label="'Email'" type="email" required />
        @can('gestionar roles')
        <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Roles Asignados</label>
            <div class="flex flex-wrap gap-2">
                @foreach(\Spatie\Permission\Models\Role::orderBy('name')->get() as $r)
                    @if(Auth::user()->hasRole('admin') && !Auth::user()->hasRole('super-admin') && in_array($r->name, ['super-admin', 'admin']))
                        @continue
                    @endif
                    @php
                        $isSelfSuperAdmin = $member && Auth::id() === $member->id && $r->name === 'super-admin';
                        $isSelfAdmin = $member && Auth::id() === $member->id && $r->name === 'admin' && !Auth::user()->hasRole('super-admin');
                        $isDisabled = $isSelfSuperAdmin || $isSelfAdmin;
                    @endphp
                    <label class="{{ $isDisabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer' }}" @if($isDisabled) title="No puedes quitarte este rol crítico a ti mismo" @endif>
                        <input type="checkbox" wire:model.live="roles" value="{{ $r->name }}" class="hidden peer" {{ $isDisabled ? 'disabled' : '' }}>
                        <div class="px-3 py-1.5 rounded-full text-xs font-bold border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 bg-white dark:bg-zinc-800 peer-checked:bg-primary-50 peer-checked:text-primary-700 peer-checked:border-primary-300 dark:peer-checked:bg-primary-900/40 dark:peer-checked:text-primary-300 dark:peer-checked:border-primary-700 transition-all hover:border-zinc-300 dark:hover:border-zinc-600 shadow-sm peer-checked:shadow flex items-center gap-1.5 uppercase tracking-wide {{ $isDisabled ? 'opacity-70' : '' }}">
                            <flux:icon.check-circle variant="micro" class="hidden peer-checked:block w-3.5 h-3.5" />
                            {{ $r->name }}
                        </div>
                    </label>
                @endforeach
            </div>
            @error('roles') <span class="text-sm text-red-600 dark:text-red-400 mt-1 block">{{ $message }}</span> @enderror
        </div>
        @endcan

        @if(is_array($roles) && count(array_filter($roles, fn($r) => $r !== 'member')) > 0)
        <flux:input wire:model.defer="password" :label="'Contraseña'" type="password" placeholder="Mínimo 8 caracteres" />
        @endif
        <flux:select wire:model.defer="formation_id" :label="'Formación Académica'" required>
            <option value="">Selecciona una formación</option>
            @foreach(\App\Models\Formation::orderBy('name')->get() as $formation)
                <option value="{{ $formation->id }}">{{ $formation->name }}</option>
            @endforeach
        </flux:select>
        <flux:select wire:model.defer="tipo_documento" :label="'Tipo de documento'" required>
            <option value="">Selecciona un tipo de documento</option>
            <option value="V">V (Venezolano)</option>
            <option value="E">E (Extranjero)</option>
            <option value="P">P (Pasaporte)</option>
            <option value="RIF">RIF</option>
            <option value="NIT">NIT</option>
        </flux:select>
        <flux:input wire:model.defer="cedula" :label="'Cédula / Documento (solo número)'" required placeholder="Ej: 16526418" />
        <div class="mb-2">
            <label class="block text-xs text-zinc-500">Vista previa documento</label>
            <div class="font-mono font-bold text-zinc-800 dark:text-zinc-100">{{ formatear_documento($tipo_documento ?? 'V', $cedula) }}</div>
        </div>
        <flux:input wire:model.defer="telefono" :label="'Teléfono'" />
        <flux:input wire:model.defer="fecha_nacimiento" :label="'Fecha de nacimiento'" type="date" />
        <flux:select wire:model.defer="genero" :label="'Género'">
            <option value="">Selecciona</option>
            <option value="masculino">Masculino</option>
            <option value="femenino">Femenino</option>
            <option value="otro">Otro</option>
        </flux:select>
        <flux:input wire:model.defer="profesion" :label="'Profesión'" />
        <flux:input wire:model.defer="empresa" :label="'Empresa'" />
        <flux:select wire:model.defer="nexo" :label="'Nexo'" required>
            <option value="">Selecciona un nexo</option>
            @foreach($availableNexos as $n)
                <option value="{{ $n }}">{{ $n }}</option>
            @endforeach
        </flux:select>
        <flux:textarea wire:model.defer="direccion" :label="'Dirección'" />
        <flux:input wire:model.defer="numero_carnet" :label="'Número de carnet'" :disabled="!$member" />
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <flux:input wire:model.defer="fecha_emision" :label="'Fecha de emisión'" type="date" />
            <flux:input wire:model.defer="fecha_vencimiento" :label="'Fecha de vencimiento'" type="date" />
            <flux:select wire:model.defer="estado_carnet" :label="'Estado del carnet'" required>
                <option value="">Selecciona</option>
                <option value="activo">Activo</option>
                <option value="inactivo">Inactivo</option>
                <option value="vencido">Vencido</option>
                <option value="no_disponible">No disponible</option>
            </flux:select>
        </div>
        <flux:textarea wire:model.defer="observaciones" :label="'Observaciones'" />
        <div class="space-y-3">
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-200">Foto del Miembro</label>
            
            @if ($foto)
                {{-- Previsualización de nueva foto cargada --}}
                <div class="relative inline-block mt-2">
                    <img src="{{ $foto->temporaryUrl() }}" alt="Previsualización" class="h-32 w-32 object-cover rounded-lg shadow-md border-2 border-primary-500">
                    <button type="button" wire:click="$set('foto', null)" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 shadow-lg hover:bg-red-600 transition-colors" title="Cancelar subida">
                        <flux:icon.x-mark variant="mini" />
                    </button>
                    <p class="text-[10px] text-primary-600 mt-1 font-semibold">Nueva foto lista para guardar</p>
                </div>
            @elseif ($foto_actual && !$photoDeleted)
                {{-- Foto actual en el servidor --}}
                <div class="relative inline-block mt-2">
                    <img src="{{ asset('storage/' . $foto_actual) }}" alt="Foto actual" class="h-32 w-32 object-cover rounded-lg shadow-md border border-zinc-300">
                    <button type="button" wire:click="removePhoto" class="absolute -top-2 -right-2 bg-red-100 text-red-600 rounded-full p-1 shadow hover:bg-red-200 transition-colors border border-red-200" title="Eliminar foto permanentemente">
                        <flux:icon.trash variant="mini" />
                    </button>
                </div>
            @else
                {{-- Estado: Sin foto --}}
                <div class="mt-2 p-4 border-2 border-dashed border-zinc-300 dark:border-zinc-700 rounded-lg bg-zinc-50 dark:bg-zinc-800 text-center">
                    <flux:icon.user variant="outline" class="mx-auto h-8 w-8 text-zinc-400 mb-2" />
                    <p class="text-xs text-zinc-500">Sin foto de perfil</p>
                    @if($photoDeleted)
                        <p class="text-[10px] text-red-500 mt-1 font-medium">La foto se eliminará al guardar</p>
                    @endif
                </div>
            @endif

            <input type="file" wire:model="foto" id="foto_input" accept="image/*" class="hidden">
            <flux:button type="button" onclick="document.getElementById('foto_input').click()" variant="subtle" size="sm" class="w-full">
                {{ ($foto || ($foto_actual && !$photoDeleted)) ? 'Cambiar Foto' : 'Subir Foto' }}
            </flux:button>

            @if($photoDeleted || (!$foto && !$foto_actual))
                <div class="mt-2 p-2 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded flex gap-2 items-start">
                    <flux:icon.exclamation-triangle variant="mini" class="text-amber-600 shrink-0 mt-0.5" />
                    <p class="text-[10px] text-amber-800 dark:text-amber-200">
                        <strong>Aviso Institucional:</strong> Sin una foto válida, el sistema no permitirá generar ni enviar el carnet digital por correo según las normas de seguridad.
                    </p>
                </div>
            @endif
        </div>
        @if($qr_code)
            <div class="mt-4">
                <label class="block text-sm font-medium mb-1 text-zinc-700 dark:text-zinc-200">QR generado</label>
                <img src="{{ asset('storage/qr/' . $qr_code) }}" alt="QR del miembro" class="w-32 h-32 mt-2 rounded bg-white border" />
            </div>
        @endif
        <div class="flex flex-col md:flex-row justify-between gap-4 mt-8">
            <a href="{{ route('miembros.listado') }}">
                <flux:button type="button" class="w-full md:w-auto">Volver al listado</flux:button>
            </a>
            <flux:button variant="primary" type="submit" class="w-full md:w-auto">Guardar</flux:button>
        </div>
    </form>
</div>