@extends('layouts.app', ['title' => 'Traductor de Archivos .POT', 'menu' => 'Herramientas'])

@section('content')

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Traductor de Archivos .POT</h4>
                <p class="card-title-desc">Sube tu archivo .pot. La traducción se procesará en segundo plano y te enviaremos el archivo `.po` final a tu email.</p>

                <form id="translate-form" enctype="multipart/form-data">
                    @csrf 

                    <div class="mb-3">
                        <label for="pot_file" class="form-label">Archivo .pot (Máx: 5MB)</label>
                        <input class="form-control" type="file" id="pot_file" name="pot_file" required accept=".pot, .txt">
                    </div>

                    @error('file')
                        <div class="invalid-feedback d-block">
                            {{ $message }}
                        </div>
                    @enderror

                    <div class="mb-3">
                        <label for="target_lang" class="form-label">Idioma Destino</label>
                        <select class="form-select" id="target_lang" name="target_lang" required>
                            @foreach(config('languages') as $code => $name)
                                <option value="{{ $code }}">
                                    {{ $name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <button type="submit" class="btn btn-primary waves-effect waves-light" id="submit-button">
                            <i class="ri-translate-2 me-1"></i>
                            <span id="button-text">Poner en Cola de Traducción</span>
                            <span id="button-spinner" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" style="display: none;"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    const form = document.getElementById('translate-form');
    const submitButton = document.getElementById('submit-button');
    const buttonText = document.getElementById('button-text');
    const buttonSpinner = document.getElementById('button-spinner');

    form.addEventListener('submit', async function(e) {
        e.preventDefault(); // Prevenir el envío normal
        
        // --- Resetear UI ---
        buttonText.textContent = 'Procesando...';
        buttonSpinner.style.display = 'inline-block';
        submitButton.disabled = true;
        
        // Crear FormData
        const formData = new FormData(form);

        try {
            $("#preloader").fadeIn("fast");
            $("#status").fadeIn("fast");
            // --- Enviar la petición ---
            const response = await fetch("{{ route('translator.translate') }}", {
                method: 'POST',
                body: formData,
                headers: {
                    // ¡IMPORTANTE! Ahora esperamos una respuesta JSON
                    'Accept': 'application/json' 
                }
            });

            // Leer la respuesta como JSON
            const data = await response.json();

            if (!response.ok) {
                // Si la respuesta es un error (4xx, 5xx), leer el mensaje
                // Esto capturará errores de validación (422), créditos (402), etc.
                throw new Error(data.message || `Error ${response.status}: ${response.statusText}`);
            }

            toastr.success(data.message);
            form.reset(); // Limpiar el formulario
            buttonText.textContent = 'Enviar Otro Archivo';

        } catch (error) {
            // --- ERROR ---
            console.error('Error:', error);
            toastr.error('Error: ' + error.message);
            buttonText.textContent = 'Poner en Cola de Traducción';
        } finally {
            // --- LIMPIAR (en cualquier caso) ---
            submitButton.disabled = false;
            buttonSpinner.style.display = 'none';
            $("#preloader").fadeOut("fast");
            $("#status").fadeOut("fast");
        }
    });
});
</script>
@endpush