@php
    /** @var \App\Models\Work $work */
@endphp

<div class="setel-card p-5 md:p-6">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <h2 class="text-lg font-semibold text-[var(--setel-text)]">Archivos y evidencias</h2>
            <p class="mt-1 text-sm text-[var(--setel-text-muted)]">Fotos y documentos vinculados a esta OT. Pueden subirlos coordinación (operaciones) y el técnico asignado.</p>
        </div>
    </div>

    @if (auth()->user()->can('uploadWorkFiles', $work))
        <div class="mt-5 rounded-xl border border-dashed border-[var(--setel-card-border)] bg-[var(--setel-content-bg)]/60 p-4">
            <label class="setel-users-filter-label" for="work-files-input">Añadir archivos</label>
            <p class="mt-0.5 text-xs text-[var(--setel-text-muted)]">JPG, PNG, GIF, WebP o PDF. Hasta 10 archivos por envío, máx. 15 MB c/u.</p>
            <div class="mt-3 flex flex-col gap-3 sm:flex-row sm:items-end">
                <input
                    id="work-files-input-{{ $work->id }}"
                    type="file"
                    class="setel-input w-full cursor-pointer py-2 file:me-3 file:rounded-md file:border-0 file:bg-[var(--setel-primary)] file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-white hover:file:opacity-95"
                    wire:key="work-files-input-{{ $work->id }}"
                    wire:model="workFileUploads"
                    multiple
                    accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,image/*,application/pdf"
                />
                <button type="button" class="setel-btn-primary shrink-0" wire:click="uploadWorkFiles" wire:loading.attr="disabled" wire:target="uploadWorkFiles,workFileUploads">
                    <span wire:loading.remove wire:target="uploadWorkFiles,workFileUploads">Subir</span>
                    <span wire:loading wire:target="uploadWorkFiles,workFileUploads">Subiendo…</span>
                </button>
            </div>
            @error('workFileUploads')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
            @error('workFileUploads.*')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    @endif

    @if ($work->files->isEmpty())
        <p class="mt-6 text-center text-sm text-[var(--setel-text-muted)]">Aún no hay archivos adjuntos.</p>
    @else
        <ul class="work-file-gallery mt-6" role="list">
            @foreach ($work->files as $file)
                <li class="work-file-gallery__item" wire:key="work-file-{{ $file->id }}">
                    @if ($file->isImage())
                        <button
                            type="button"
                            class="work-file-gallery__thumb-btn"
                            wire:click="openFilePreview({{ $file->id }})"
                            aria-label="Ver imagen ampliada: {{ $file->name }}"
                        >
                            <img
                                src="{{ route('work-files.download', $file) }}"
                                alt=""
                                class="work-file-gallery__img"
                                loading="lazy"
                            />
                        </button>
                    @else
                        <a
                            href="{{ route('work-files.download', $file) }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="work-file-gallery__doc"
                        >
                            <span class="work-file-gallery__doc-icon" aria-hidden="true">
                                <flux:icon.document-text class="size-10 text-[var(--setel-primary)]" />
                            </span>
                            <span class="work-file-gallery__doc-name">{{ \Illuminate\Support\Str::limit($file->name, 32) }}</span>
                        </a>
                    @endif
                    <div class="work-file-gallery__meta">
                        <p class="work-file-gallery__title" title="{{ $file->name }}">{{ \Illuminate\Support\Str::limit($file->name, 36) }}</p>
                        <p class="work-file-gallery__sub">
                            {{ $file->humanSize() }}
                            @if ($file->uploadedBy)
                                · {{ $file->uploadedBy->fullName() }}
                            @endif
                        </p>
                        <p class="work-file-gallery__date">{{ $file->created_at?->format('d/m/Y H:i') }}</p>
                        @if (auth()->user()->can('deleteWorkFile', [$work, $file]))
                            <button
                                type="button"
                                class="work-file-gallery__delete"
                                wire:click="deleteWorkFile({{ $file->id }})"
                                wire:confirm="¿Eliminar este archivo? No se puede deshacer."
                            >
                                Eliminar
                            </button>
                        @endif
                    </div>
                </li>
            @endforeach
        </ul>
    @endif
</div>

<flux:modal wire:model.self="showFilePreview" wire:close="closeFilePreview" class="max-w-5xl w-full !max-w-[min(96vw,56rem)]">
    @if ($previewFileId)
        @php
            $preview = $work->files->firstWhere('id', $previewFileId);
        @endphp
        @if ($preview && $preview->isImage())
            <div class="flex max-h-[min(80vh,720px)] flex-col gap-3 p-2">
                <div class="flex items-start justify-between gap-3">
                    <p class="min-w-0 truncate text-sm font-medium text-[var(--setel-text)]" title="{{ $preview->name }}">{{ $preview->name }}</p>
                    <flux:button type="button" variant="ghost" size="sm" wire:click="closeFilePreview">Cerrar</flux:button>
                </div>
                <div class="min-h-0 flex-1 overflow-auto rounded-lg bg-black/5 p-2 dark:bg-white/5">
                    <img
                        src="{{ route('work-files.download', $preview) }}"
                        alt="{{ $preview->name }}"
                        class="mx-auto max-h-[min(72vh,640px)] w-auto max-w-full object-contain"
                    />
                </div>
                <a href="{{ route('work-files.download', $preview) }}" target="_blank" rel="noopener" class="setel-btn-secondary w-fit text-sm">Abrir en pestaña nueva</a>
            </div>
        @endif
    @endif
</flux:modal>
