{{-- Documento de la orden: zona de carga, barra en modo manual y resumen de la lectura. --}}
@php
	// Una vez que se elige diligenciar a mano, o se edita una orden existente,
	// la zona de carga deja de ocupar la pantalla: pasa a una barra delgada
	// desde la que se puede adjuntar el documento en cualquier momento.
	$modoManual = !empty($extraccion['manual']) || !empty($idPurchaseOrder);
	$aceptados = '.' . implode(',.', $extensiones);
@endphp

@if (is_null($documento) && $modoManual)
	<div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[var(--borde)] bg-[var(--superficie)] px-4 py-3">
		<span class="flex items-center gap-2 text-[13px] text-[var(--texto-suave)]">
			<x-icono nombre="document-text" class="h-5 w-5 text-[var(--texto-tenue)]" />
			Sin documento adjunto · diligenciamiento manual
		</span>
		<label class="inline-flex h-9 cursor-pointer items-center gap-2 rounded-lg border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-4 text-[13px] font-semibold text-[var(--texto)] hover:bg-[var(--nav-hover)]">
			<x-icono nombre="paper-clip" class="h-4 w-4" />
			<span wire:loading.remove wire:target="archivo">Adjuntar documento</span>
			<span wire:loading wire:target="archivo">Cargando…</span>
			<input type="file" class="hidden" wire:model.live="archivo" accept="{{ $aceptados }}">
		</label>
	</div>
	@error('archivo')
		<x-alerta tipo="error">{{ $message }}</x-alerta>
	@enderror

@elseif (is_null($documento))
	{{-- Estado previo: sin documento cargado. --}}
	<div class="flex justify-center py-6">
		<div class="flex w-full max-w-2xl flex-col items-center gap-3 rounded-xl border-2 border-dashed border-[var(--borde-fuerte)] bg-[var(--superficie)] px-6 py-10 text-center">
			<span class="flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--acento-suave)] text-[var(--acento-texto)]">
				<x-icono nombre="arrow-up-tray" class="h-5 w-5" />
			</span>

			<h2 class="text-[15px] font-bold text-[var(--texto)]">Carga la orden de compra</h2>

			<p class="max-w-md text-[13px] leading-relaxed text-[var(--texto-suave)]">
				@if ($extractorDisponible)
					{{ strtoupper(implode(', ', $extensiones)) }} hasta {{ $maxMb }} MB. Leeremos el documento y
					precargaremos proveedor, fechas, condiciones de entrega y líneas de producto para que solo tengas que cotejar.
				@else
					{{ strtoupper(implode(', ', $extensiones)) }} hasta {{ $maxMb }} MB. El documento quedará adjunto
					a la orden. <span class="font-semibold text-amber-700 dark:text-amber-300">Aún no hay un método de lectura configurado</span>,
					así que los campos se diligencian manualmente.
				@endif
			</p>

			<div class="mt-1 flex flex-wrap items-center justify-center gap-2">
				<label class="inline-flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-[var(--acento)] px-4 text-[13px] font-semibold text-[var(--acento-contraste)] hover:bg-[var(--acento-hover)]">
					<x-icono nombre="document-arrow-up" class="h-4 w-4" />
					<span wire:loading.remove wire:target="archivo">Seleccionar archivo</span>
					<span wire:loading wire:target="archivo">Cargando…</span>
					<input type="file" class="hidden" wire:model.live="archivo" accept="{{ $aceptados }}">
				</label>

				<x-secondary-button wire:click="diligenciarManualmente">
					<x-icono nombre="pencil-square" class="h-4 w-4" /> Diligenciar manualmente
				</x-secondary-button>
			</div>

			@error('archivo')
				<p class="text-[12px] font-semibold text-red-700 dark:text-red-300">{{ $message }}</p>
			@enderror
		</div>
	</div>
@else
	{{-- Documento cargado: resumen de la lectura. --}}
	<div class="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-[var(--acento-borde)] bg-[var(--acento-suave)] px-4 py-3">
		<div class="flex min-w-0 items-center gap-3">
			<span class="flex h-9 w-9 flex-none items-center justify-center rounded-lg bg-[var(--acento)] font-mono text-[11px] font-semibold text-[var(--acento-contraste)]">
				{{ strtoupper($documento['ext']) }}
			</span>
			<div class="min-w-0">
				<p class="truncate text-[13px] font-semibold text-[var(--texto)]">{{ $documento['nombre'] }}</p>
				<p class="text-[12px] text-[var(--texto-suave)]">
					@if ($documento['paginas']) {{ $documento['paginas'] }} páginas · @endif
					{{ $documento['size_txt'] }}
					@if (!empty($extraccion['exito'])) · lectura completada en {{ $extraccion['duracion'] }} s @endif
				</p>
			</div>
		</div>

		<div class="flex flex-wrap items-center gap-3">
			@if (!empty($extraccion['exito']))
				<x-etiqueta variante="exito">{{ $extraccion['campos'] }} campos extraídos</x-etiqueta>
				@if ($extraccion['revisar'] > 0)
					<x-etiqueta variante="aviso">{{ $extraccion['revisar'] }} requieren revisión</x-etiqueta>
				@endif
			@elseif (!empty($extraccion['mensaje']))
				<span class="max-w-md text-[12px] text-amber-800 dark:text-amber-300">{{ $extraccion['mensaje'] }}</span>
			@endif

			<div class="flex gap-2">
				<label class="inline-flex h-9 cursor-pointer items-center gap-2 rounded-lg border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-3 text-[13px] font-semibold text-[var(--texto)] hover:bg-[var(--nav-hover)]"
					title="Reemplazar el documento">
					<x-icono nombre="arrow-up-tray" class="h-4 w-4" /> Reemplazar
					<input type="file" class="hidden" wire:model.live="archivo" accept="{{ $aceptados }}">
				</label>

				@if ($extractorDisponible)
					<x-secondary-button wire:click="reextraer" class="!px-3">
						<x-icono nombre="sparkles" class="h-4 w-4" />
						<span wire:loading.remove wire:target="reextraer">Re-extraer</span>
						<span wire:loading wire:target="reextraer">Leyendo…</span>
					</x-secondary-button>
				@endif

				<x-secondary-button wire:click="quitarDocumento" class="!px-3">
					<x-icono nombre="x-mark" class="h-4 w-4" /> Quitar
				</x-secondary-button>
			</div>
		</div>
	</div>

	{{-- El archivado en el repositorio falló, pero la orden sigue siendo
	     diligenciable: se dice sin ambigüedad para que nadie asuma que quedó
	     adjunto. --}}
	@if (!empty($documento['aviso']))
		<x-alerta tipo="aviso">{{ $documento['aviso'] }}</x-alerta>
	@endif
@endif