@props(['submitLabel' => 'Salvar'])

<style>
    @keyframes field-shake {
        0%, 100% { transform: translateX(0); }
        20%      { transform: translateX(-6px); }
        40%      { transform: translateX(6px); }
        60%      { transform: translateX(-4px); }
        80%      { transform: translateX(4px); }
    }
    .field-shake { animation: field-shake 0.4s ease-in-out; }
</style>

<script>
    // Um único envio: bloqueia o duplo clique e o Enter repetido.
    let categorySubmitting = false;

    function lockButtons() {
        const submitBtn = document.getElementById('submit-btn');
        const cancelBtn = document.getElementById('cancel-btn');

        submitBtn.disabled = true;
        document.getElementById('submit-text').textContent = 'Salvando...';
        document.getElementById('submit-spinner').classList.remove('hidden');

        if (cancelBtn) {
            cancelBtn.style.pointerEvents = 'none';
            cancelBtn.classList.add('opacity-60', 'cursor-not-allowed');
        }
    }

    function unlockButtons() {
        const submitBtn = document.getElementById('submit-btn');
        const cancelBtn = document.getElementById('cancel-btn');

        categorySubmitting = false;
        submitBtn.disabled = false;
        document.getElementById('submit-text').textContent = @json($submitLabel);
        document.getElementById('submit-spinner').classList.add('hidden');

        if (cancelBtn) {
            cancelBtn.style.pointerEvents = '';
            cancelBtn.classList.remove('opacity-60', 'cursor-not-allowed');
        }
    }

    function shakeField(el) {
        if (!el) return;
        el.classList.add('field-shake');
        setTimeout(() => el.classList.remove('field-shake'), 450);
    }

    function handleSubmit() {
        if (categorySubmitting) return false;

        const name = document.getElementById('name');
        if (!name.value.trim()) {
            name.focus();
            name.classList.add('border-red-500/60');
            shakeField(name);
            showToast('Informe o nome da categoria.', 'error');
            return false;
        }
        name.classList.remove('border-red-500/60');

        // A imagem é obrigatória: o hidden só tem valor depois do upload concluir.
        const field = document.getElementById('image-field');
        const image = field.querySelector('input[type="hidden"]');

        if (!image || !image.value.trim()) {
            shakeField(field);
            showToast('Envie a imagem da categoria antes de salvar.', 'error');
            return false;
        }

        categorySubmitting = true;
        lockButtons();
        return true;
    }

    function handleCancel(event) {
        if (categorySubmitting) { event.preventDefault(); return; }

        const cancelBtn = document.getElementById('cancel-btn');
        document.getElementById('cancel-text').textContent = 'Cancelando...';
        document.getElementById('cancel-spinner').classList.remove('hidden');
        cancelBtn.classList.add('opacity-60');
        document.getElementById('submit-btn').disabled = true;
    }
</script>