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

@section('content')

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Visor de Archivos .PO / .POT</h4>
                <p class="card-title-desc">Sube tu archivo para ver su contenido en una tabla.</p>

                <form id="read-form" enctype="multipart/form-data">
                    @csrf 
                    <div class="row">
                        <div class="col-md-9">
                            <input class="form-control" type="file" id="po_file" name="po_file" required accept=".po, .pot, .txt">
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary waves-effect waves-light w-100" id="submit-button">
                                <i class="ri-eye-line me-1"></i>
                                <span id="button-text">Leer Archivo</span>
                                <span id="button-spinner" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" style="display: none;"></span>
                            </button>
                        </div>
                    </div>
                </form>

                <div id="error-message" class="alert alert-danger mt-3" style="display: none;" role="alert"></div>
            </div>
        </div>
    </div>
</div>

<div class="row" id="stats-container" style="display: none;">
    
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Cadenas (Strings)</h5>
                <h3 class="text-primary" id="stats-strings">0</h3>
                <p class="card-text">Total de `msgid` a traducir.</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Palabras (Words)</h5>
                <h3 class="text-success" id="stats-words">0</h3>
                <p class="card-text">Total de palabras en `msgid`.</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Caracteres (Chars)</h5>
                <h3 class="text-info" id="stats-characters">0</h3>
                <p class="card-text">Total de caracteres en `msgid`.</p>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <h5 class="card-title text-white">Costo de Traducción</h5>
                <h3 class="text-white" id="stats-price">S/ 0.00</h3>
                <p class="card-text">Precio estimado por este trabajo.</p>
                <a href="{{ route('plans.index') }}"  class="btn btn-light w-100"
                id="buy-credits-button"> Comprar Crédito Ahora
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row" id="results-container" style="display: none;">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Traducciones Encontradas</h4>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="po-table">
                        <thead>
                            <tr>
                                <th>N°</th>
                                <th>Original (msgid)</th>
                                <th>Traducción (msgstr)</th>
                            </tr>
                        </thead>
                        <tbody id="po-table-body">
                            </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {

    const form = document.getElementById('read-form');
    const submitButton = document.getElementById('submit-button');
    const buttonText = document.getElementById('button-text');
    const buttonSpinner = document.getElementById('button-spinner');
    const resultsContainer = document.getElementById('results-container');
    const tableBody = document.getElementById('po-table-body');

    const statsContainer = document.getElementById('stats-container');
    const statsStrings = document.getElementById('stats-strings');
    const statsWords = document.getElementById('stats-words');
    const statsCharacters = document.getElementById('stats-characters');
    const statsPrice = document.getElementById('stats-price');

    const buyButton = document.getElementById('buy-credits-button');
    const buyButtonBaseUrl = buyButton.href; // Guarda la URL base (ej. /planes)
    

    form.addEventListener('submit', async function(e) {
        e.preventDefault(); 

        let counter = 0;

        // Mostrar estado de carga
        buttonText.textContent = 'Leyendo...';
        buttonSpinner.style.display = 'inline-block';
        submitButton.disabled = true;
        resultsContainer.style.display = 'none';
        tableBody.innerHTML = ''; // Limpiar tabla anterior

        const formData = new FormData(form);

        buyButton.textContent = 'Comprar Crédito Ahora';
        buyButton.href = buyButtonBaseUrl;

        try {
            const response = await fetch("{{ route('po-viewer.read') }}", {
                method: 'POST',
                body: formData,
                headers: { 'Accept': 'application/json' }
            });

            if (!response.ok) {
                const errorJson = await response.json();
                let errorText = errorJson.message || `Error ${response.status}`;
                if(errorJson.errors) errorText = Object.values(errorJson.errors).join(' ');
                throw new Error(errorText);
            }

            // ¡Respuesta exitosa! Es un JSON
            const data = await response.json(); // data ahora tiene {translations, stats}
            const translations = data.translations;
            const stats = data.stats;

            if (translations.length === 0) {
                throw new Error('No se encontraron traducciones válidas en el archivo.');
            }

            // Construir la tabla
            translations.forEach(item => {
                counter++;
                const tr = document.createElement('tr');

                const tdCounter = document.createElement('td');
                tdCounter.textContent = counter;

                const tdOriginal = document.createElement('td');
                // Usar <pre> para respetar saltos de línea
                tdOriginal.innerHTML = `<pre>${escapeHTML(item.original)}</pre>`; 

                const tdTranslation = document.createElement('td');
                // Si la traducción está vacía (archivo .pot), mostrar un guión
                tdTranslation.innerHTML = item.translation ? `<pre>${escapeHTML(item.translation)}</pre>` : '<em>(Vacío)</em>'; 

                tr.appendChild(tdCounter);
                tr.appendChild(tdOriginal);
                tr.appendChild(tdTranslation);
                tableBody.appendChild(tr);
            });

            statsStrings.textContent = stats.strings.toLocaleString(); // 'toLocaleString' añade comas (ej. 1,000)
            statsWords.textContent = stats.words.toLocaleString();
            statsCharacters.textContent = stats.characters.toLocaleString();
            
            const priceString = stats.price.toLocaleString('es-PE', {
                style: 'currency',
                currency: 'PEN'
            });
            statsPrice.textContent = priceString;

            const priceValue = stats.price.toFixed(2);

            buyButton.textContent = `Recargar ${priceString} Ahora`; // "Recargar S/ 10.80 Ahora"
            buyButton.href = `${buyButtonBaseUrl}?recarga=${priceValue}`; // "/planes?recarga=10.80"

            resultsContainer.style.display = 'block'; // Mostrar la tabla
            statsContainer.style.display = 'flex';
            buttonText.textContent = 'Leer Archivo';

        } catch (error) {
            console.error('Error:', error);
            toastr.error('Error: ' + error.message);
            buttonText.textContent = 'Leer Archivo';
        } finally {
            submitButton.disabled = false;
            buttonSpinner.style.display = 'none';
        }
    });

    // Función auxiliar para evitar XSS
    function escapeHTML(str) {
        return str.replace(/[&<>"']/g, function(m) {
            return {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            }[m];
        });
    }
});
</script>
@endpush