@extends('layouts.app')

@section('content')
    @php
        $suppressedCount = (int) ($rowTotals['suppressed'] ?? 0);
        $processedRows = (int) $import->processed_rows;
        $totalRows = (int) $import->total_rows;
        $progress = $import->processedPercentage();
        $canRun = in_array($import->status, ['pending', 'processing', 'failed'], true);
    @endphp

    <section class="hero" style="margin-bottom: 16px;">
        <div class="stack">
            <span class="chip" style="width:max-content;background:#fff;border-color:#c7d2c7;">Detalle operativo</span>
            <h2>{{ $import->source_name ?: 'Import sin nombre' }}</h2>
            <p>Esta vista ya permite revisar mapping, progreso y resultados por fila, y también disparar el siguiente lote desde Laravel.</p>
        </div>

        <div class="metric-grid">
            <article class="metric">
                <span>Estado</span>
                <strong>{{ $import->status }}</strong>
            </article>
            <article class="metric">
                <span>Tipo</span>
                <strong>{{ $import->import_type }}</strong>
            </article>
            <article class="metric">
                <span>Progreso</span>
                <strong>
                    <span data-import-processed>{{ $processedRows }}</span><span data-import-total-wrap>{{ $totalRows > 0 ? '/' : '' }}<span data-import-total>{{ $totalRows > 0 ? $totalRows : '' }}</span></span>
                </strong>
            </article>
            <article class="metric">
                <span>Lista</span>
                <strong>{{ $import->list?->name ?: '-' }}</strong>
            </article>
        </div>
    </section>

    <section class="card" style="margin-bottom: 16px;">
        <div class="section-head">
            <div class="stack" style="gap:6px;">
                <h2>Resumen del import</h2>
                <p>Configuración almacenada, resultados acumulados y acceso al procesamiento por tandas.</p>
            </div>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                <a href="{{ route('imports.index') }}" class="button button-ghost">Volver a imports</a>
                <a href="{{ route('imports.create') }}" class="button button-ghost">Nuevo import</a>
                @if ($import->list)
                    <a href="{{ route('lists.show', $import->list->id) }}" class="button button-ghost">Abrir lista</a>
                @endif
            </div>
        </div>

        <div class="metric-grid" style="margin-top: 16px;">
            <article class="metric">
                <span>Creados</span>
                <strong data-import-created>{{ number_format((int) $import->created_rows) }}</strong>
            </article>
            <article class="metric">
                <span>Actualizados</span>
                <strong data-import-updated>{{ number_format((int) $import->updated_rows) }}</strong>
            </article>
            <article class="metric">
                <span>Suprimidos</span>
                <strong>{{ number_format($suppressedCount) }}</strong>
            </article>
            <article class="metric">
                <span>Saltados</span>
                <strong data-import-skipped>{{ number_format((int) $import->skipped_rows) }}</strong>
            </article>
        </div>

        <div
            class="progress-panel"
            style="margin-top: 16px;"
            data-import-runner
            data-run-url="{{ route('imports.run', $import->id) }}"
            data-status-url="{{ route('imports.status', $import->id) }}"
        >
            <div class="progress-head">
                <div class="stack" style="gap:4px;">
                    <h3>Avance del procesamiento</h3>
                    <p data-import-message>
                        @if ($import->status === 'completed')
                            Import terminado.
                        @elseif ($import->status === 'failed')
                            El import quedó en error. Puedes reintentar; Laravel continuará desde la fila pendiente.
                        @else
                            Procesa el archivo por tandas y actualiza el progreso sin recargar la pantalla.
                        @endif
                    </p>
                </div>
                <span class="status {{ $import->status === 'completed' ? 'status-ready' : ($import->status === 'failed' ? 'status-muted' : 'status-next') }}" data-import-status>{{ $import->status }}</span>
            </div>

            <div class="progress-track" aria-label="Progreso del import">
                <div class="progress-bar" style="--progress: {{ $progress }}%;" data-import-progress-bar></div>
            </div>

            <div class="progress-meta">
                <span><strong data-import-percent>{{ $progress }}%</strong> completado</span>
                <span data-import-remaining-wrap>
                    @if ($totalRows > 0)
                        <span data-import-remaining>{{ number_format($import->remainingRows()) }}</span> filas pendientes
                    @else
                        Total contando en background
                    @endif
                </span>
                <span>Última actualización: <span data-import-updated-at>{{ optional($import->updated_at)->format('Y-m-d H:i:s') ?: '-' }}</span></span>
            </div>

            @if ($canRun)
                <form method="post" action="{{ route('imports.run', $import->id) }}" data-import-run-form>
                    @csrf
                    <input type="hidden" name="batch" value="500">
                    <button type="submit" class="button" data-import-run-button data-loading-text="Procesando...">
                        {{ $import->status === 'failed' ? 'Reintentar import' : 'Procesar import' }}
                    </button>
                </form>
            @endif
        </div>

        <div class="subgrid" style="margin-top: 16px;">
            <div class="value-list">
                <div>
                    <small>Usuario</small>
                    <span>{{ $import->user?->email ?: 'Sin usuario asociado' }}</span>
                </div>
                <div>
                    <small>Stored path</small>
                    <span>{{ $import->stored_path ?: 'Sin archivo persistido' }}</span>
                </div>
                <div>
                    <small>Delimitador y header</small>
                    <span>{{ $import->delimiter_char }} | {{ $import->has_header ? 'Con encabezados' : 'Sin encabezados' }}</span>
                </div>
                @if ($import->import_type === 'suppression')
                    <div>
                        <small>Alcance y motivo de supresiones</small>
                        <span>{{ $import->suppression_scope ?: 'organization' }} | {{ $import->suppression_reason ?: '-' }}</span>
                    </div>
                @endif
            </div>

            @if (!empty($import->mapping_json))
                <div class="card" style="padding:16px;">
                    <div class="stack">
                        <h3>Mapping guardado</h3>
                        <div class="chips">
                            @foreach ($import->mapping_json as $column)
                                @continue(($column['target'] ?? '') === 'ignore')
                                <span class="chip">
                                    {{ $column['header'] ?? ('columna ' . ($column['index'] ?? '?')) }}
                                    ->
                                    @if (($column['target'] ?? '') === 'custom')
                                        {{ \App\Support\ImportSupport::placeholderForKey((string) ($column['field_key'] ?? '')) }}
                                    @else
                                        {{ \App\Support\ImportSupport::placeholderForKey((string) ($column['target'] ?? 'ignore')) }}
                                    @endif
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>

    </section>

    <section class="card">
        <div class="section-head">
            <div class="stack" style="gap:6px;">
                <h2>Filas procesadas</h2>
                <p>Detalle granular de filas ya registradas por el import.</p>
            </div>
            <div class="chips">
                <a href="{{ route('imports.show', $import->id) }}" class="chip" style="text-decoration:none;">Todos {{ number_format((int) $rowTotals->sum()) }}</a>
                @foreach (['created', 'updated', 'suppressed', 'skipped'] as $statusOption)
                    <a href="{{ route('imports.show', ['import' => $import->id, 'row_status' => $statusOption]) }}" class="chip" style="text-decoration:none;">
                        {{ $statusOption }} {{ number_format((int) ($rowTotals[$statusOption] ?? 0)) }}
                    </a>
                @endforeach
            </div>
        </div>

        <div class="table-shell" style="margin-top: 16px;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Fila</th>
                        <th>Email</th>
                        <th>Estado</th>
                        <th>Mensaje</th>
                        <th>Fecha</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $row)
                        <tr>
                            <td>#{{ $row->row_index }}</td>
                            <td>{{ $row->email ?: '-' }}</td>
                            <td>
                                <span class="status {{ in_array($row->status, ['created', 'updated'], true) ? 'status-ready' : 'status-next' }}">{{ $row->status }}</span>
                            </td>
                            <td>{{ $row->message ?: '-' }}</td>
                            <td>{{ optional($row->created_at)->format('Y-m-d H:i:s') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="text-align:center;color:#68706b;">No hay filas registradas para este filtro.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="margin-top: 16px;">
            {{ $rows->links() }}
        </div>
    </section>
@endsection

@push('scripts')
<script>
(function () {
    var runner = document.querySelector('[data-import-runner]');
    if (!runner) {
        return;
    }

    var form = document.querySelector('[data-import-run-form]');
    var button = document.querySelector('[data-import-run-button]');
    var token = document.querySelector('meta[name="csrf-token"]');
    var formatter = new Intl.NumberFormat('es-MX');

    function setText(selector, value) {
        var node = document.querySelector(selector);
        if (node) {
            node.textContent = value;
        }
    }

    function render(payload, message) {
        if (!payload) {
            return;
        }

        var status = document.querySelector('[data-import-status]');
        var progressBar = document.querySelector('[data-import-progress-bar]');
        var canRun = Boolean(payload.can_run);
        var remaining = Number(payload.remaining_rows || 0);

        setText('[data-import-processed]', formatter.format(payload.processed_rows || 0));
        var totalRows = Number(payload.total_rows || 0);
        var totalWrap = document.querySelector('[data-import-total-wrap]');
        if (totalWrap) {
            if (!totalWrap.firstChild || totalWrap.firstChild.nodeType !== Node.TEXT_NODE) {
                totalWrap.insertBefore(document.createTextNode(''), totalWrap.firstChild);
            }
            totalWrap.firstChild.nodeValue = totalRows > 0 ? '/' : '';
        }
        setText('[data-import-total]', totalRows > 0 ? formatter.format(totalRows) : '');
        setText('[data-import-created]', formatter.format(payload.created_rows || 0));
        setText('[data-import-updated]', formatter.format(payload.updated_rows || 0));
        setText('[data-import-skipped]', formatter.format(payload.skipped_rows || 0));
        setText('[data-import-percent]', String(payload.processed_percentage || 0) + '%');
        var remainingWrap = document.querySelector('[data-import-remaining-wrap]');
        if (remainingWrap) {
            if (totalRows > 0) {
                remainingWrap.innerHTML = '<span data-import-remaining>' + formatter.format(remaining) + '</span> filas pendientes';
            } else {
                remainingWrap.textContent = 'Total contando en background';
            }
        }
        setText('[data-import-updated-at]', payload.updated_at || '-');

        if (status) {
            status.textContent = payload.status || '-';
            status.className = 'status ' + (payload.status === 'completed' ? 'status-ready' : (payload.status === 'failed' ? 'status-muted' : 'status-next'));
        }

        if (progressBar) {
            progressBar.style.setProperty('--progress', String(payload.processed_percentage || 0) + '%');
        }

        if (message) {
            setText('[data-import-message]', message);
        } else if (payload.status === 'completed') {
            setText('[data-import-message]', 'Import terminado.');
        } else if (payload.status === 'failed') {
            setText('[data-import-message]', 'El import quedó en error. Puedes reintentar; Laravel continuará desde la fila pendiente.');
        }

        if (button) {
            button.disabled = !canRun || payload.status === 'completed';
            button.textContent = payload.status === 'failed' ? 'Reintentar import' : 'Procesar import';
            button.classList.remove('is-loading');
        }

        if (form && (!canRun || payload.status === 'completed')) {
            form.hidden = true;
        }
    }

    async function postBatch() {
        var body = new FormData(form);
        var response = await fetch(runner.getAttribute('data-run-url'), {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token ? token.getAttribute('content') : ''
            },
            body: body
        });

        var data = await response.json();
        if (!response.ok) {
            render(data.import, data.message || 'No se pudo procesar esta tanda.');
            throw new Error(data.message || 'No se pudo procesar esta tanda.');
        }

        return data;
    }

    if (form) {
        form.addEventListener('submit', async function (event) {
            event.preventDefault();
            if (!button || button.disabled) {
                return;
            }

            button.disabled = true;
            button.textContent = button.getAttribute('data-loading-text') || 'Procesando...';
            button.classList.add('is-loading');
            setText('[data-import-message]', 'Procesando tanda... deja esta pantalla abierta.');

            try {
                var guard = 0;
                while (guard < 500) {
                    guard++;
                    var data = await postBatch();
                    render(data.import, data.message);

                    if (
                        !data.import
                        || data.import.status === 'completed'
                        || !data.import.can_run
                        || (Number(data.import.total_rows || 0) > 0 && Number(data.import.remaining_rows || 0) <= 0)
                    ) {
                        break;
                    }

                    await new Promise(function (resolve) {
                        window.setTimeout(resolve, 120);
                    });
                }

                if (window.location.search.indexOf('row_status=') === -1) {
                    window.setTimeout(function () {
                        window.location.reload();
                    }, 600);
                }
            } catch (error) {
                if (button) {
                    button.disabled = false;
                    button.textContent = 'Reintentar import';
                    button.classList.remove('is-loading');
                }
            }
        });
    }
})();
</script>
@endpush