@props(['field', 'name', 'value' => ''])
@php
    $required = $field['required'] ?? false;
    $hasValue = !empty($value);
    $isUrl = $hasValue && (str_starts_with($value, 'http://') || str_starts_with($value, 'https://'));

    // Resolver previewUrl:
    //   1. URL absoluta (http/https) → usar tal cual
    //   2. Path que empieza con 'storage/' → asset() directo (ya tiene prefix)
    //   3. Path que empieza con 'cd-project/' o cualquier path bajo public/ → asset() directo
    //   4. Otro path relativo (legacy/upload) → asumir bajo storage/ (asset('storage/...'))
    if (!$hasValue) {
        $previewUrl = null;
    } elseif ($isUrl) {
        $previewUrl = $value;
    } elseif (str_starts_with($value, 'storage/') || str_starts_with($value, 'cd-project/')) {
        $previewUrl = asset(ltrim($value, '/'));
    } else {
        $previewUrl = asset('storage/' . ltrim($value, '/'));
    }

    // Subfolder Cloudinary inferido del key (welcome.story_image_1 → "welcome", about.image_carousel_1 → "about", etc.)
    $cloudinarySubfolder = (string) Illuminate\Support\Str::of($field['key'])
        ->before('.')->before('_')->slug('-')->lower();
    if (empty($cloudinarySubfolder) || $cloudinarySubfolder === 'site') {
        $cloudinarySubfolder = 'site-data';
    }
    $uniqueId = 'fld_' . $field['key'];
@endphp

<label class="form-label fw-semibold {{ $required ? 'required' : '' }}" for="{{ $uniqueId }}">
    <i class="fas fa-image text-gray-500 me-1"></i>
    {{ $field['label'] ?? ucfirst(str_replace('_', ' ', $field['key'])) }}
</label>

<div class="input-group input-group-solid">
    <input type="text"
           id="{{ $uniqueId }}"
           name="{{ $name }}"
           value="{{ $value }}"
           class="form-control form-control-solid"
           placeholder="cd-project/img/... o https://..."
           {{ $required ? 'required' : '' }} />
    <span class="input-group-text">
        <i class="fas fa-link"></i>
    </span>
    {{-- Botón "Subir imagen" que dispara el file input oculto --}}
    <button type="button"
            class="btn btn-light-primary"
            onclick="document.getElementById('{{ $uniqueId }}_file').click()"
            data-image-field-trigger="{{ $uniqueId }}">
        <i class="fas fa-upload me-1"></i> Subir
    </button>
</div>

{{-- File input hidden + estado de subida --}}
<input type="file"
       id="{{ $uniqueId }}_file"
       accept="image/png,image/jpeg,image/jpg,image/webp,image/gif,image/svg+xml"
       class="d-none"
       data-image-field-input
       data-target="{{ $uniqueId }}"
       data-subfolder="{{ $cloudinarySubfolder }}" />

<div id="{{ $uniqueId }}_status" class="mt-2 d-none fs-8"></div>

{{-- Preview de la imagen actual --}}
<div id="{{ $uniqueId }}_preview" class="mt-2 {{ $previewUrl ? '' : 'd-none' }}">
    @if($previewUrl)
        <img src="{{ $previewUrl }}" alt="preview" class="rounded border" style="max-height: 80px; max-width: 160px; object-fit: cover;" />
    @endif
</div>

<div class="form-text text-gray-600 fs-8 mt-1">
    Path relativo (<code>cd-project/img/...</code>) o URL externa. También podés <strong>subir una imagen nueva</strong> al CDN del tenant con el botón <i class="fas fa-upload"></i>.
</div>

@once
{{-- Script global para todos los image fields (solo se imprime 1 vez aunque haya N campos en la página) --}}
@push('scripts')
<script>
(function () {
    'use strict';
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
                   || document.querySelector('input[name="_token"]')?.value
                   || '';
    const uploadUrl = '{{ url('/admin/media/upload') }}';

    document.addEventListener('change', async function (e) {
        const input = e.target.closest('input[data-image-field-input]');
        if (!input || !input.files || !input.files.length) return;

        const file       = input.files[0];
        const targetId   = input.dataset.target;
        const subfolder  = input.dataset.subfolder || 'site-data';
        const textInput  = document.getElementById(targetId);
        const previewDiv = document.getElementById(targetId + '_preview');
        const statusDiv  = document.getElementById(targetId + '_status');

        // Validación cliente
        if (!file.type.startsWith('image/')) {
            statusDiv.className = 'mt-2 fs-8 text-danger';
            statusDiv.textContent = '⚠ Solo imágenes (PNG/JPG/WEBP/GIF/SVG).';
            return;
        }
        if (file.size > 10 * 1024 * 1024) {
            statusDiv.className = 'mt-2 fs-8 text-danger';
            statusDiv.textContent = '⚠ Máximo 10 MB.';
            return;
        }

        statusDiv.className = 'mt-2 fs-8 text-muted';
        statusDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Subiendo a Cloudinary…';

        const formData = new FormData();
        formData.append('file', file);
        formData.append('subfolder', subfolder);
        formData.append('_token', csrfToken);

        try {
            const resp = await fetch(uploadUrl, {
                method: 'POST',
                body: formData,
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                credentials: 'same-origin',
            });
            const data = await resp.json();

            if (!resp.ok || !data.ok) {
                throw new Error(data.error || ('HTTP ' + resp.status));
            }

            textInput.value = data.url;
            textInput.dispatchEvent(new Event('change', { bubbles: true }));

            previewDiv.classList.remove('d-none');
            previewDiv.innerHTML = '<img src="' + data.url + '" alt="preview" class="rounded border" style="max-height: 80px; max-width: 160px; object-fit: cover;" />';

            statusDiv.className = 'mt-2 fs-8 text-success';
            statusDiv.innerHTML = '<i class="fas fa-check"></i> Subido (' +
                (data.width || '?') + '×' + (data.height || '?') + ', ' +
                Math.round((data.bytes || 0) / 1024) + ' KB)';
            input.value = '';  // reset file input
        } catch (err) {
            statusDiv.className = 'mt-2 fs-8 text-danger';
            statusDiv.textContent = '⚠ Error: ' + err.message;
            console.error('AdminMedia upload error', err);
        }
    });
})();
</script>
@endpush
@endonce