@props([
    'name'        => 'image',
    'value'       => '',
    'uploadUrl',
    'aspect'      => 1,
    'label'       => 'Imagem',
    'hint'        => null,
    'preview'     => 'square',
    'submitId'    => 'submit-btn',
])

@php
    $isSquare  = $preview === 'square';
    $boxClass  = $isSquare ? 'w-24 h-24 sm:w-32 sm:h-32' : 'w-full max-w-md aspect-[3/2]';
    $ratioText = $hint ?? ($aspect == 1 ? '(quadrada 1:1)' : '(paisagem 3:2)');
@endphp

<div class="flex flex-col gap-2" data-upload-field data-aspect="{{ $aspect }}">
    <label class="text-sm font-medium text-gray-300">
        {{ $label }}
        <span class="text-gray-500 text-xs font-normal ml-1">{{ $ratioText }}</span>
    </label>

    <div class="flex items-center gap-4 min-w-0">
        <div class="{{ $boxClass }} shrink-0 rounded-xl border border-white/10 bg-black/30 overflow-hidden flex items-center justify-center">
            <img class="upload-img w-full h-full object-cover {{ $value ? '' : 'hidden' }}" src="{{ $value }}" alt="{{ $label }}">
            <svg class="upload-placeholder size-8 text-gray-600 {{ $value ? 'hidden' : '' }}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 19.5h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z" />
            </svg>
        </div>

        <div class="flex-1 min-w-0 flex flex-col gap-1.5">
            <label class="inline-flex w-fit cursor-pointer px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm font-medium hover:bg-white/10 transition-colors">
                <input type="file" accept="image/*" class="hidden" onchange="uploadImage(this)">
                Enviar imagem
            </label>
            <span class="upload-status text-xs text-gray-500 break-words"></span>
        </div>
    </div>

    <input type="hidden" name="{{ $name }}" value="{{ $value }}">
</div>

{{-- Modal de recorte e scripts: uma vez por página, mesmo com vários campos --}}
@once
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.css"/>
<style>
    #crop-modal.flex { display: flex; }
</style>
@endpush

@push('modals')
<div id="crop-modal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-black/80 backdrop-blur-sm p-4">
    <div class="w-full max-w-lg rounded-2xl border border-white/10 bg-[#0d0d0d] overflow-hidden flex flex-col max-h-[90dvh]">
        <div class="px-4 sm:px-5 py-4 border-b border-white/8 flex items-center justify-between gap-3 shrink-0">
            <h3 class="font-heading font-bold text-white text-base">Recortar imagem</h3>
            <span id="crop-ratio-label" class="text-xs text-gray-500"></span>
        </div>
        <div class="p-4 overflow-auto bg-black/40">
            <div class="w-full max-h-[50dvh]">
                <img id="crop-image" class="max-w-full block" alt="Recorte">
            </div>
        </div>
        <div class="px-4 sm:px-5 py-4 border-t border-white/8 flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end gap-3 shrink-0">
            <button type="button" onclick="cancelCrop()"
                class="w-full sm:w-auto px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm font-semibold hover:bg-white/10 transition-all cursor-pointer">
                Cancelar
            </button>
            <button type="button" id="crop-confirm" onclick="confirmCrop()"
                class="w-full sm:w-auto px-4 py-2.5 rounded-xl bg-brand-green text-white text-sm font-bold hover:bg-brand-green-dark transition-all cursor-pointer flex items-center justify-center gap-2">
                <span>Recortar e enviar</span>
            </button>
        </div>
    </div>
</div>
@endpush

@push('scripts')
<script src="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.js"></script>
<script>
    const UPLOAD_URL      = "{{ $uploadUrl }}";
    const UPLOAD_TOKEN    = "{{ csrf_token() }}";
    const UPLOAD_SUBMIT   = "{{ $submitId }}";

    let cropper      = null;
    let cropField    = null;
    let cropFileName = 'image.png';

    function uploadImage(input) {
        const file = input.files[0];
        if (!file) return;

        cropField    = input.closest('[data-upload-field]');
        cropFileName = (file.name || 'image').replace(/\.[^.]+$/, '') + '.png';
        const ratio  = parseFloat(cropField.getAttribute('data-aspect')) || 1;

        const modal = document.getElementById('crop-modal');
        const image = document.getElementById('crop-image');
        const label = document.getElementById('crop-ratio-label');
        label.textContent = ratio === 1 ? 'Proporção 1:1' : 'Proporção ' + ratio.toFixed(2) + ':1';

        const reader = new FileReader();
        reader.onload = function (e) {
            image.src = e.target.result;
            modal.classList.remove('hidden');
            modal.classList.add('flex');

            if (cropper) cropper.destroy();
            cropper = new Cropper(image, {
                aspectRatio: ratio,
                viewMode: 1,
                autoCropArea: 1,
                background: false,
                responsive: true,
            });
        };
        reader.readAsDataURL(file);

        input.value = '';
    }

    function cancelCrop() {
        const modal = document.getElementById('crop-modal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        if (cropper) { cropper.destroy(); cropper = null; }
        cropField = null;
    }

    function confirmCrop() {
        if (!cropper || !cropField) return;

        const btn = document.getElementById('crop-confirm');
        btn.disabled = true;
        btn.classList.add('opacity-60', 'cursor-not-allowed');

        const canvas = cropper.getCroppedCanvas({
            maxWidth: 1600,
            maxHeight: 1600,
            imageSmoothingQuality: 'high',
        });

        const field = cropField;

        canvas.toBlob(function (blob) {
            const img    = field.querySelector('.upload-img');
            const holder = field.querySelector('.upload-placeholder');
            img.src = canvas.toDataURL('image/png');
            img.classList.remove('hidden');
            if (holder) holder.classList.add('hidden');

            cancelCrop();
            doUpload(field, blob);

            btn.disabled = false;
            btn.classList.remove('opacity-60', 'cursor-not-allowed');
        }, 'image/png');
    }

    async function doUpload(field, blob) {
        const urlInput  = field.querySelector('input[type="hidden"]');
        const img       = field.querySelector('.upload-img');
        const holder    = field.querySelector('.upload-placeholder');
        const status    = field.querySelector('.upload-status');
        const submitBtn = document.getElementById(UPLOAD_SUBMIT);

        status.textContent = 'Enviando...';
        status.className   = 'upload-status text-xs text-yellow-400';
        if (submitBtn) submitBtn.disabled = true;

        try {
            const fd = new FormData();
            fd.append('file', blob, cropFileName);
            fd.append('_token', UPLOAD_TOKEN);

            const res  = await fetch(UPLOAD_URL, {
                method: 'POST',
                headers: { 'Accept': 'application/json' },
                body: fd,
            });
            const data = await res.json();

            if (!res.ok || data.status != 200 || !data.url) {
                throw new Error(data.message || 'Erro ao enviar a imagem.');
            }

            urlInput.value     = data.url;
            img.src            = data.url;
            status.textContent = 'Enviado ✓';
            status.className   = 'upload-status text-xs text-brand-green';
        } catch (err) {
            urlInput.value = '';
            img.classList.add('hidden');
            if (holder) holder.classList.remove('hidden');
            status.textContent = err.message || 'Erro ao enviar a imagem.';
            status.className   = 'upload-status text-xs text-red-400';
        } finally {
            if (submitBtn) submitBtn.disabled = false;
        }
    }
</script>
@endpush
@endonce