@extends('layouts.app')

@section('content')
    @php
        $draftColumns = is_array($draft['columns'] ?? null) ? $draft['columns'] : [];
        $draftPreviewRows = is_array($draft['preview_rows'] ?? null) ? $draft['preview_rows'] : [];
        $draftTargetMode = old('target_mode', (string) ($draft['target_mode'] ?? 'existing'));
        $draftListId = (int) old('contact_list_id', (int) ($draft['contact_list_id'] ?? 0));
        $draftListName = old('list_name', (string) ($draft['list_name'] ?? ''));
    @endphp

    <section class="hero" style="margin-bottom: 16px;">
        <div class="stack">
            <span class="chip" style="width:max-content;background:#fff;border-color:#c7d2c7;">Mapper y processor en Laravel</span>
            <h2>Nuevo import</h2>
            <p>Analiza columnas, define mapping, crea la lista destino si hace falta y procesa por tandas desde Laravel sin tocar el motor legacy actual.</p>
        </div>

        <div class="metric-grid">
            <article class="metric">
                <span>CSV</span>
                <strong>Soportado</strong>
            </article>
            <article class="metric">
                <span>XLSX</span>
                <strong>Lectura directa</strong>
            </article>
            <article class="metric">
                <span>Destino</span>
                <strong>Lista de contactos</strong>
            </article>
            <article class="metric">
                <span>Proceso</span>
                <strong>Por lotes</strong>
            </article>
        </div>
    </section>

    @if ($draft)
        <section class="card" style="margin-bottom: 16px;">
            <div class="section-head">
                <div class="stack" style="gap:6px;">
                    <h2>Borrador analizado</h2>
                    <p>Archivo detectado y listo para configurar antes de crear el import real.</p>
                </div>
                <div class="chips">
                    <span class="chip">{{ $draft['source_name'] ?? 'import.csv' }}</span>
                    <span class="chip">{{ strtoupper((string) ($draft['source_kind'] ?? 'csv')) }}</span>
                    <span class="chip">{{ !empty($draft['has_header']) ? 'Con encabezados' : 'Sin encabezados' }}</span>
                    <span class="chip">{{ count($draftColumns) }} columnas</span>
                </div>
            </div>
        </section>

        <section class="card" style="margin-bottom: 16px;">
            <div class="section-head">
                <div class="stack" style="gap:6px;">
                    <h2>Muestra del archivo</h2>
                    <p>Esta vista previa ya usa el delimitador y el modo de encabezados detectados.</p>
                </div>
            </div>

            <div class="table-shell" style="margin-top: 16px;">
                <table class="data-table">
                    <thead>
                        <tr>
                            @foreach ((array) ($draft['headers'] ?? []) as $header)
                                <th>{{ $header }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($draftPreviewRows as $row)
                            <tr>
                                @foreach ($row as $value)
                                    <td>{{ $value }}</td>
                                @endforeach
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ max(count((array) ($draft['headers'] ?? [])), 1) }}" style="text-align:center;color:#68706b;">No hay filas de muestra.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        <section class="card" style="margin-bottom: 16px;">
            <div class="section-head">
                <div class="stack" style="gap:6px;">
                    <h2>Configurar mapping</h2>
                    <p>Decide que columnas importar, cuales ignorar y que custom fields crear.</p>
                </div>
            </div>

            <form method="post" action="{{ route('imports.queueContacts') }}" class="stack" style="margin-top: 16px;" data-lock-on-submit>
                @csrf
                <input type="hidden" name="draft_token" value="{{ $draftToken }}">

                <div class="detail-grid" style="grid-template-columns:1fr 1fr;">
                    <div class="card" style="padding:16px;">
                        <div class="stack" style="gap:10px;">
                            <label>
                                <input type="radio" name="target_mode" value="existing" {{ $draftTargetMode === 'existing' ? 'checked' : '' }}>
                                Importar en lista existente
                            </label>
                            <select name="contact_list_id" id="mapping_contact_list_id">
                                <option value="0">Selecciona lista</option>
                                @foreach ($lists as $list)
                                    <option value="{{ $list->id }}" @selected((int) $list->id === $draftListId)>{{ $list->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="card" style="padding:16px;">
                        <div class="stack" style="gap:10px;">
                            <label>
                                <input type="radio" name="target_mode" value="new" {{ $draftTargetMode === 'new' ? 'checked' : '' }}>
                                Crear lista nueva
                            </label>
                            <input type="text" name="list_name" id="mapping_list_name" value="{{ $draftListName }}" placeholder="Ej. Leads Expo Abril">
                        </div>
                    </div>
                </div>

                <div class="table-shell">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Columna</th>
                                <th>Muestra</th>
                                <th>Importar como</th>
                                <th>Custom field</th>
                                <th>Placeholder</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($draftColumns as $column)
                                @php
                                    $index = (int) $column['index'];
                                    $guess = is_array($column['guess'] ?? null) ? $column['guess'] : [];
                                    $postedTarget = old('column_target.' . $index, (string) ($guess['target'] ?? 'ignore'));
                                    $postedLabel = old('custom_label.' . $index, (string) ($guess['custom_label'] ?? $column['header']));
                                    $postedKey = old('custom_key.' . $index, (string) ($guess['field_key'] ?? \App\Support\ImportSupport::normalizeCustomFieldKey((string) $postedLabel)));
                                    $isCustom = str_starts_with($postedTarget, 'custom_');
                                    $previewPlaceholder = 'No aplica';
                                    if ($postedTarget !== 'ignore') {
                                        $previewPlaceholder = $isCustom
                                            ? \App\Support\ImportSupport::placeholderForKey(\App\Support\ImportSupport::normalizeCustomFieldKey($postedKey))
                                            : \App\Support\ImportSupport::placeholderForKey($postedTarget);
                                    }
                                @endphp
                                <tr>
                                    <td>
                                        <strong>{{ $column['header'] }}</strong>
                                        <div class="muted" style="margin-top:4px;">Columna {{ $index + 1 }}</div>
                                    </td>
                                    <td>
                                        @if (!empty($column['samples']))
                                            {{ $column['samples'][0] }}
                                            @if (!empty($column['samples'][1]))
                                                <div class="muted" style="margin-top:4px;">{{ $column['samples'][1] }}</div>
                                            @endif
                                            @if (!empty($column['samples'][2]))
                                                <div class="muted" style="margin-top:4px;">{{ $column['samples'][2] }}</div>
                                            @endif
                                        @else
                                            <span class="muted">Sin muestra</span>
                                        @endif
                                    </td>
                                    <td>
                                        <select name="column_target[{{ $index }}]" class="mapping-target" data-column-index="{{ $index }}">
                                            @foreach ($mappingOptions as $value => $label)
                                                <option value="{{ $value }}" @selected($postedTarget === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <div class="{{ $isCustom ? '' : 'muted' }}" data-custom-box="{{ $index }}" style="{{ $isCustom ? '' : 'display:none;' }}">
                                            <input type="text" name="custom_label[{{ $index }}]" value="{{ $postedLabel }}" placeholder="Nombre del campo" style="margin-bottom:8px;">
                                            <input type="text" name="custom_key[{{ $index }}]" value="{{ $postedKey }}" placeholder="placeholder_key" data-custom-key="{{ $index }}">
                                        </div>
                                        <span class="muted" data-custom-placeholder="{{ $index }}" style="{{ $isCustom ? 'display:none;' : '' }}">No aplica</span>
                                    </td>
                                    <td>
                                        <code class="chip" data-placeholder-preview="{{ $index }}">
                                            {{ $previewPlaceholder }}
                                        </code>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" style="text-align:center;color:#68706b;">No se detectaron columnas.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div style="display:flex;gap:10px;flex-wrap:wrap;">
                    <button type="submit" class="button" data-loading-text="Preparando import...">Preparar import</button>
                </div>
            </form>

            <form method="post" action="{{ route('imports.discardDraft') }}" style="margin-top: 12px;" data-lock-on-submit>
                @csrf
                <input type="hidden" name="draft_token" value="{{ $draftToken }}">
                <button type="submit" class="button button-ghost">Descartar archivo</button>
            </form>
        </section>
    @else
        <section class="card" style="margin-bottom: 16px;">
            <div class="section-head">
                <div class="stack" style="gap:6px;">
                    <h2>Import de contactos</h2>
                    <p>Sube CSV o XLSX, detecta columnas, decide el mapping y luego procesa por tandas.</p>
                </div>
            </div>

            <form method="post" action="{{ route('imports.analyze') }}" enctype="multipart/form-data" class="stack" style="margin-top:16px;" data-lock-on-submit>
                @csrf

                <div class="field-grid">
                    <div>
                        <label>
                            <input type="radio" name="target_mode" value="existing" {{ old('target_mode', 'existing') === 'existing' ? 'checked' : '' }}>
                            Importar en lista existente
                        </label>
                        <select id="contact_list_id" name="contact_list_id">
                            <option value="0">Selecciona lista</option>
                            @foreach ($lists as $list)
                                <option value="{{ $list->id }}" @selected((int) old('contact_list_id', $selectedListId ?? 0) === (int) $list->id)>{{ $list->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label>
                            <input type="radio" name="target_mode" value="new" {{ old('target_mode') === 'new' ? 'checked' : '' }}>
                            Crear lista nueva
                        </label>
                        <input type="text" name="list_name" value="{{ old('list_name') }}" placeholder="Ej. Leads Meta Ads Q2">
                    </div>

                    <div>
                        <label for="header_mode">Primera fila</label>
                        <select id="header_mode" name="header_mode">
                            <option value="auto" @selected(old('header_mode', 'auto') === 'auto')>Detectar automáticamente</option>
                            <option value="yes" @selected(old('header_mode') === 'yes')>Sí son encabezados</option>
                            <option value="no" @selected(old('header_mode') === 'no')>No son encabezados</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label for="import_file">Archivo CSV o XLSX</label>
                    <input id="import_file" name="import_file" type="file" accept=".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                </div>

                <div>
                    <label for="csv_text">O pega un CSV</label>
                    <textarea id="csv_text" name="csv_text" rows="10" placeholder="email,first_name,last_name,teléfono,empresa&#10;cliente1@example.com,Ana,Perez,+526461234567,Soltek&#10;cliente2@example.com,Carlos,Ruiz,+526469876543,Northwind">{{ old('csv_text') }}</textarea>
                </div>

                <div style="display:flex;gap:10px;flex-wrap:wrap;">
                    <button type="submit" class="button" data-loading-text="Analizando archivo...">Analizar columnas</button>
                </div>
            </form>
        </section>
    @endif

@endsection

@push('scripts')
<script>
(function () {
    function slugify(value) {
        var normalized = String(value || '').toLowerCase();
        if (typeof normalized.normalize === 'function') {
            normalized = normalized.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
        }

        return normalized
            .replace(/[^a-z0-9]+/g, '_')
            .replace(/^_+|_+$/g, '')
            .replace(/_{2,}/g, '_');
    }

    function normalizeCustomKey(value) {
        var key = slugify(value);
        var reserved = [
            'email',
            'first_name',
            'last_name',
            'name',
            'unsubscribe',
            'unsubscribe_url',
            'webversion',
            'webversion_url',
            'web_version',
            'web_version_url'
        ];

        if (!key) {
            key = 'custom_field';
        }
        if (reserved.indexOf(key) !== -1) {
            key += '_custom';
        }

        return key.slice(0, 120);
    }

    function placeholderForKey(value) {
        var key = slugify(value);
        var aliases = {
            first_name: 'name',
            firstname: 'name',
            nombre: 'name',
            given_name: 'name',
            full_name: 'name',
            fullname: 'name',
            nombre_completo: 'name',
            email_address: 'email',
            emailaddress: 'email',
            e_mail: 'email',
            correo: 'email',
            correo_electronico: 'email',
            mail: 'email',
            unsubscribe_url: 'unsubscribe',
            webversion_url: 'webversion',
            web_version: 'webversion',
            web_version_url: 'webversion'
        };

        key = aliases[key] || key || 'custom_field';
        if (key === 'name') {
            return '[Name]';
        }
        if (key === 'email') {
            return '[Email]';
        }
        if (key === 'unsubscribe') {
            return '[unsubscribe]';
        }
        if (key === 'webversion') {
            return '[webversion]';
        }

        return '[' + key + ']';
    }

    function updateRow(index) {
        var target = document.querySelector('[name="column_target[' + index + ']"]');
        var box = document.querySelector('[data-custom-box="' + index + '"]');
        var preview = document.querySelector('[data-placeholder-preview="' + index + '"]');
        var labelInput = document.querySelector('[name="custom_label[' + index + ']"]');
        var keyInput = document.querySelector('[name="custom_key[' + index + ']"]');
        var placeholder = document.querySelector('[data-custom-placeholder="' + index + '"]');

        if (!target || !preview) {
            return;
        }

        var isCustom = target.value.indexOf('custom_') === 0;
        if (box) {
            box.style.display = isCustom ? '' : 'none';
        }
        if (placeholder) {
            placeholder.style.display = isCustom ? 'none' : '';
        }

        if (target.value === 'ignore') {
            preview.textContent = 'No aplica';
        } else if (isCustom) {
            if (labelInput && keyInput && !keyInput.dataset.manual) {
                keyInput.value = normalizeCustomKey(keyInput.value || labelInput.value);
            } else if (keyInput) {
                keyInput.value = normalizeCustomKey(keyInput.value);
            }
            preview.textContent = placeholderForKey(keyInput ? keyInput.value : '');
        } else {
            preview.textContent = placeholderForKey(target.value);
        }
    }

    document.querySelectorAll('.mapping-target').forEach(function (select) {
        var index = select.getAttribute('data-column-index');
        updateRow(index);
        select.addEventListener('change', function () {
            updateRow(index);
        });
    });

    document.querySelectorAll('[data-custom-key]').forEach(function (input) {
        input.addEventListener('input', function () {
            input.dataset.manual = '1';
            updateRow(input.getAttribute('data-custom-key'));
        });
    });
})();
</script>
@endpush