@extends('admin.layouts.app')

@section('title', 'Importar Descripciones E-commerce')

@section('content')
<div class="page-content">
    <div class="container-fluid">

        <!-- Page Title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Importar Descripciones E-commerce</h4>
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item">Herramientas</li>
                            <li class="breadcrumb-item active">Importar Descripciones</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="ri-file-excel-2-line me-2 text-success"></i>Planilla de productos (Excel)</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info" role="alert">
                            <h6 class="alert-heading"><i class="ri-information-line me-1"></i>Cómo funciona</h6>
                            <ul class="mb-0 ps-3">
                                <li>Subí el <strong>Listado Maestro de Productos</strong> que genera el sistema de escritorio (el archivo <code>.xlsx</code> tal cual sale, con sus filas de título — la fila de encabezados se detecta sola).</li>
                                <li>La planilla debe tener agregada la columna <strong>Descripción_E-commerce</strong> con el texto a publicar.</li>
                                <li>Se actualiza <strong>únicamente</strong> la "Descripción Web (E-commerce)" de cada producto, buscándolo por su <strong>CODIGO</strong>. Ningún otro dato se modifica (precios, stock, marcas: nada).</li>
                                <li>Las filas con la descripción <strong>vacía se omiten</strong> (no borran lo que el producto ya tenga cargado).</li>
                            </ul>
                        </div>

                        <form id="importDescriptionsForm" onsubmit="return false;">
                            <div class="mb-3">
                                <label for="excel_file" class="form-label">Archivo Excel <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" id="excel_file" name="file" accept=".xlsx,.xls,.csv" required>
                                <div class="form-text">Formatos: .xlsx, .xls o .csv — máximo 40 MB.</div>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary" id="btnAnalyze" onclick="analyzeFile()">
                                    <i class="ri-search-line me-1"></i>Analizar planilla
                                </button>
                                <button type="button" class="btn btn-success" id="btnImport" onclick="confirmImport()" disabled>
                                    <i class="ri-upload-cloud-2-line me-1"></i>Importar descripciones
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Resultado del análisis / importación -->
                <div class="card d-none" id="resultCard">
                    <div class="card-header">
                        <h5 class="card-title mb-0" id="resultTitle">Resultado</h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center" id="resultCounters"></div>
                        <div id="resultSampleWrap" class="d-none">
                            <h6 class="mt-3">Muestra de lo que se va a importar</h6>
                            <div class="table-responsive">
                                <table class="table table-sm table-striped mb-0">
                                    <thead><tr><th style="width:160px">Código</th><th>Descripción E-commerce</th></tr></thead>
                                    <tbody id="resultSampleBody"></tbody>
                                </table>
                            </div>
                        </div>
                        <div id="resultErrorsWrap" class="d-none">
                            <h6 class="mt-3 text-danger">Filas con problemas (no frenan al resto)</h6>
                            <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                <table class="table table-sm table-striped mb-0">
                                    <thead><tr><th style="width:90px">Fila</th><th style="width:160px">Código</th><th>Detalle</th></tr></thead>
                                    <tbody id="resultErrorsBody"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="ri-shield-check-line me-2 text-success"></i>Reglas de seguridad</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2"><i class="ri-check-line text-success me-1"></i>Solo escribe la <strong>Descripción Web (E-commerce)</strong> — campo exclusivo de la web que la sincronización del escritorio <strong>nunca pisa</strong>.</li>
                            <li class="mb-2"><i class="ri-check-line text-success me-1"></i>Descripción vacía = fila omitida (no borra).</li>
                            <li class="mb-2"><i class="ri-check-line text-success me-1"></i>Código inexistente = se informa y sigue.</li>
                            <li class="mb-2"><i class="ri-check-line text-success me-1"></i>Re-importar la misma planilla no duplica ni rompe nada.</li>
                            <li class="mb-0"><i class="ri-check-line text-success me-1"></i>Primero <strong>Analizar</strong> (no escribe nada), después <strong>Importar</strong>.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('js')
<script>
let lastAnalysis = null;

function getFile() {
    const input = document.getElementById('excel_file');
    return input.files.length ? input.files[0] : null;
}

// Al cambiar el archivo, invalidar el análisis anterior
document.getElementById('excel_file').addEventListener('change', function () {
    lastAnalysis = null;
    document.getElementById('btnImport').disabled = true;
    document.getElementById('resultCard').classList.add('d-none');
});

function postFile(url) {
    const formData = new FormData();
    formData.append('file', getFile());
    return fetch(url, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        body: formData
    }).then(async (r) => {
        const contentType = r.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            throw new Error('El servidor devolvió una respuesta inesperada (HTTP ' + r.status + ').');
        }
        const data = await r.json();
        if (!r.ok && !data.message) {
            throw new Error('Error HTTP ' + r.status);
        }
        return data;
    });
}

function analyzeFile() {
    if (!getFile()) {
        Swal.fire('Falta el archivo', 'Seleccioná la planilla Excel primero.', 'warning');
        return;
    }
    Swal.fire({
        title: 'Analizando planilla...',
        text: 'Leyendo el Excel, no escribe nada todavía.',
        allowOutsideClick: false,
        didOpen: () => Swal.showLoading()
    });
    postFile('{{ route('admin.import-descriptions.analyze') }}')
        .then((data) => {
            Swal.close();
            if (!data.success) {
                showResult(data, true);
                Swal.fire('Revisá la planilla', data.message || 'El análisis encontró un problema.', 'error');
                return;
            }
            lastAnalysis = data;
            document.getElementById('btnImport').disabled = (data.stats.updated === 0);
            showResult(data, true);
        })
        .catch((e) => { Swal.close(); Swal.fire('Error', e.message, 'error'); });
}

function confirmImport() {
    if (!lastAnalysis) {
        Swal.fire('Analizá primero', 'Corré el análisis antes de importar, así ves qué va a pasar.', 'warning');
        return;
    }
    Swal.fire({
        title: '¿Importar descripciones?',
        html: 'Se van a actualizar <strong>' + lastAnalysis.stats.updated + '</strong> productos.<br>Solo se escribe la Descripción Web (E-commerce).',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) return;
        Swal.fire({
            title: 'Importando...',
            allowOutsideClick: false,
            didOpen: () => Swal.showLoading()
        });
        postFile('{{ route('admin.import-descriptions.import') }}')
            .then((data) => {
                Swal.close();
                if (!data.success) {
                    Swal.fire('Error', data.message || 'La importación falló.', 'error');
                    return;
                }
                showResult(data, false);
                document.getElementById('btnImport').disabled = true;
                lastAnalysis = null;
                Swal.fire('Listo', 'Se actualizaron ' + data.stats.updated + ' productos.', 'success');
            })
            .catch((e) => { Swal.close(); Swal.fire('Error', e.message, 'error'); });
    });
}

function counterCol(value, label, color) {
    return '<div class="col-6 col-md-4 mb-3">' +
        '<h4 class="fs-20 fw-semibold ff-secondary mb-1 text-' + color + '">' + value + '</h4>' +
        '<p class="text-uppercase fw-medium text-muted text-truncate mb-0" style="font-size:11px">' + label + '</p>' +
        '</div>';
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text ?? '';
    return div.innerHTML;
}

function showResult(data, isPreview) {
    const stats = data.stats || {};
    document.getElementById('resultCard').classList.remove('d-none');
    document.getElementById('resultTitle').textContent = isPreview
        ? 'Análisis (todavía no se escribió nada) — encabezados en fila ' + data.heading_row
        : 'Importación completada';

    document.getElementById('resultCounters').innerHTML =
        counterCol(stats.processed ?? 0, 'Filas con código', 'primary') +
        counterCol(stats.updated ?? 0, isPreview ? 'Se actualizarían' : 'Actualizados', 'success') +
        counterCol(stats.unchanged ?? 0, 'Sin cambios', 'secondary') +
        counterCol(stats.skipped_no_description ?? 0, 'Sin descripción (omitidas)', 'warning') +
        counterCol((stats.errors || []).length, 'Códigos no encontrados', 'danger');

    const sample = stats.sample || [];
    const sampleWrap = document.getElementById('resultSampleWrap');
    if (isPreview && sample.length) {
        sampleWrap.classList.remove('d-none');
        document.getElementById('resultSampleBody').innerHTML = sample.map(s =>
            '<tr><td><code>' + escapeHtml(s.codigo) + '</code></td><td>' + escapeHtml(s.descripcion) + '</td></tr>'
        ).join('');
    } else {
        sampleWrap.classList.add('d-none');
    }

    const errors = stats.errors || [];
    const errorsWrap = document.getElementById('resultErrorsWrap');
    if (errors.length) {
        errorsWrap.classList.remove('d-none');
        document.getElementById('resultErrorsBody').innerHTML = errors.map(e =>
            '<tr><td>' + e.row + '</td><td><code>' + escapeHtml(e.codigo) + '</code></td><td>' + escapeHtml(e.error) + '</td></tr>'
        ).join('');
    } else {
        errorsWrap.classList.add('d-none');
    }
}
</script>
@endpush