@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@push('page_css')
<style>
    #importTabs .nav-link.active { color: #16C4C0; border-bottom: 2px solid #16C4C0; font-weight: 600; }
    #importTabs .nav-link:hover { color: #16C4C0; }
    .bg-teal { background-color: #16C4C0 !important; }
    .import-step-content .progress-bar { background-color: #16C4C0; }
    .import-step-content .form-select:focus,
    .import-step-content .form-control:focus { border-color: #16C4C0; box-shadow: 0 0 0 0.2rem rgba(22,196,192,0.25); }
    .import-step-content .form-check-input:checked { background-color: #16C4C0; border-color: #16C4C0; }
    .inner-dropp { border-color: #16C4C0 !important; }
    .inner-dropp:hover { background-color: rgba(22,196,192,0.05); }
</style>
@endpush
@section('content')
<div class="container-fluid">
    <div class="main_title d-flex justify-content-between align-items-center mb-3">
        <h2>Lead Importer</h2>
    </div>

    {{-- Tab navigation --}}
    <ul class="nav nav-tabs mb-3" id="importTabs" role="tablist">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabStandard" type="button">Import Leads</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabRecordSets" type="button">Import Lead Record Sets</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabCustomProps" type="button">Import Lead Custom Properties</button>
        </li>
    </ul>

    <div class="tab-content">
        {{-- STANDARD IMPORT --}}
        <div class="tab-pane fade show active" id="tabStandard">
            <div class="project-box">
                <div class="heading-btn-sec brd-bottom mb-3">
                    <h3>Import Leads from CSV</h3>
                    <div class="heading-btn">
                        <a href="{{ route('leads.import.download-sample') }}" class="green-btn-inner waves-effect btn-sm"><i class="bx bx-file-blank"></i> Download Sample CSV</a>
                    </div>
                </div>

                {{-- Step indicator --}}
                <div class="d-flex gap-3 mb-4 align-items-center px-3">
                    @foreach(['Upload File','Map Columns','Preview','Import'] as $i => $stepLabel)
                        <div class="import-step d-flex align-items-center gap-2" data-step="{{ $i+1 }}">
                            <span class="badge {{ $i===0 ? 'bg-teal' : 'bg-secondary' }} rounded-circle step-badge" style="width:28px;height:28px;line-height:20px;font-size:13px;">{{ $i+1 }}</span>
                            <span class="{{ $i===0 ? 'fw-bold' : 'text-muted' }} step-label">{{ $stepLabel }}</span>
                        </div>
                        @if($i < 3) <span class="text-muted">→</span> @endif
                    @endforeach
                </div>

                {{-- Step 1: Upload --}}
                <div id="importStep1" class="import-step-content px-3">
                    <div class="project-form">
                        <div class="inner-dropp" id="dropZone" style="cursor:pointer;">
                            <p>Drag & Drop to upload, or</p>
                            <label class="green-btn-inner waves-effect mb-0" style="cursor:pointer;">
                                <i class="mdi mdi-upload-outline me-1"></i> Upload File
                                <input type="file" id="importFileInput" accept=".csv,.txt" style="display:none;">
                            </label>
                            <p class="text-muted small mt-2">Supported: CSV (max 10MB)</p>
                        </div>
                    </div>
                    <div id="uploadProgress" style="display:none;" class="mt-2">
                        <div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width:100%">Uploading...</div></div>
                    </div>
                </div>

                {{-- Step 2: Map Columns --}}
                <div id="importStep2" class="import-step-content px-3" style="display:none;">
                    <p class="text-muted">Map each CSV column to a CRM field. <strong>*</strong> Required.</p>
                    <div class="table-responsive">
                        <table class="table custom-table mb-0" id="mappingTable">
                            <thead style="background-color:#16C4C0; color:#fff;">
                                <tr><th>CSV Column</th><th>Sample Data</th><th>CRM Field <span class="text-danger">*</span></th></tr>
                            </thead>
                            <tbody id="mappingTableBody"></tbody>
                        </table>
                    </div>
                    <button type="button" class="green-btn-inner waves-effect btn-sm" id="btnSaveMapping">Save & Continue</button>
                </div>

                {{-- Step 3: Preview --}}
                <div id="importStep3" class="import-step-content px-3" style="display:none;">
                    <div id="dupeWarning" class="alert alert-warning" style="display:none;"></div>
                    <div class="project-form mb-2">
                        <label>Duplicate Action</label>
                        <div class="d-flex gap-3">
                            <div class="custom-control custom-radio project-checkbox"><input class="custom-control-input" type="radio" name="dupe_action" value="skip" id="dupeSkip" checked><label class="custom-control-label" for="dupeSkip">Skip duplicates</label></div>
                            <div class="custom-control custom-radio project-checkbox"><input class="custom-control-input" type="radio" name="dupe_action" value="merge" id="dupeMerge"><label class="custom-control-label" for="dupeMerge">Merge with existing</label></div>
                            <div class="custom-control custom-radio project-checkbox"><input class="custom-control-input" type="radio" name="dupe_action" value="create" id="dupeCreate"><label class="custom-control-label" for="dupeCreate">Create anyway</label></div>
                        </div>
                    </div>
                    <div class="table-responsive mt-2">
                        <table class="table custom-table mb-0">
                            <thead style="background-color:#16C4C0; color:#fff;"><tr id="previewHeaderRow"></tr></thead>
                            <tbody id="previewTableBody"></tbody>
                        </table>
                    </div>
                    <button type="button" class="green-btn-inner waves-effect" id="btnImportNow">Import Now</button>
                    <button type="button" class="black-btn-inner waves-effect btn-sm ms-2" id="btnBackToMapping">← Back</button>
                </div>

                {{-- Step 4: Result --}}
                <div id="importStep4" class="import-step-content px-3" style="display:none;">
                    <div id="importResult" class="alert alert-info">Processing import...</div>
                    <button type="button" class="green-btn-inner waves-effect btn-sm mt-2" id="btnNewImport">Start New Import</button>
                </div>
            </div>

            {{-- Import History --}}
            <div class="project-box mt-4">
                <div class="heading-btn-sec brd-bottom mb-3">
                    <h3>Import History</h3>
                    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnRefreshHistory"><i class="bx bx-refresh"></i> Refresh</button>
                </div>
                <div class="table-responsive">
                    <table class="table custom-table mb-0">
                        <thead class="hw-thead-theme">
                            <tr>
                                <th>Date</th><th>File Name</th><th>Total</th><th>Imported</th><th>Skipped</th><th>Errors</th><th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="importHistoryBody">
                            @forelse($importHistory ?? [] as $h)
                                <tr>
                                    <td>{{ $h->created_at?->format('M d, Y H:i') }}</td>
                                    <td>{{ $h->file_name }}</td>
                                    <td>{{ $h->total_rows }}</td>
                                    <td>{{ $h->imported_count }}</td>
                                    <td>{{ $h->skipped_count }}</td>
                                    <td>{{ $h->error_count }}</td>
                                    <td><span class="badge bg-{{ $h->status === 'completed' ? 'success' : ($h->status === 'failed' ? 'danger' : 'warning') }}">{{ ucfirst($h->status) }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="7" class="text-center text-muted">No import history yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- RECORD SETS TAB --}}
        <div class="tab-pane fade" id="tabRecordSets">
            <div class="project-box">
                <div class="heading-btn-sec brd-bottom mb-3"><h3>Import Lead Record Sets</h3></div>
                <p class="text-muted px-3">Upload a CSV file to import lead record set data.</p>
                <div class="project-form px-3">
                    <div class="inner-dropp">
                        <p>Drag & Drop to upload, or</p>
                        <label class="green-btn-inner waves-effect mb-0" style="cursor:pointer;">
                            <i class="mdi mdi-upload-outline me-1"></i> Upload File
                            <input type="file" id="recordSetFileInput" accept=".csv,.txt" style="display:none;">
                        </label>
                    </div>
                </div>
            </div>
        </div>

        {{-- CUSTOM PROPS TAB --}}
        <div class="tab-pane fade" id="tabCustomProps">
            <div class="project-box">
                <div class="heading-btn-sec brd-bottom mb-3"><h3>Import Lead Custom Properties</h3></div>
                <p class="text-muted px-3">Upload a CSV file to import custom property values for leads.</p>
                <div class="project-form px-3">
                    <div class="inner-dropp">
                        <p>Drag & Drop to upload, or</p>
                        <label class="green-btn-inner waves-effect mb-0" style="cursor:pointer;">
                            <i class="mdi mdi-upload-outline me-1"></i> Upload File
                            <input type="file" id="customPropsFileInput" accept=".csv,.txt" style="display:none;">
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_script')
<script>
(function(){
    'use strict';
    const csrf = (typeof _token !== 'undefined' && _token) ? _token : (document.querySelector('meta[name="csrf-token"]')?.content || '');
    let sessionKey = null;
    let availableFields = [];
    let previewHeaders = [];

    const urls = {
        upload:     '{{ route("leads.import.upload") }}',
        mapColumns: '{{ route("leads.import.map-columns") }}',
        preview:    '{{ route("leads.import.preview") }}',
        process:    '{{ route("leads.import.process") }}',
        history:    '{{ route("leads.import.history") }}',
        fields:     '{{ route("leads.import.fields") }}',
    };

    function goToStep(n) {
        document.querySelectorAll('.import-step-content').forEach(el => el.style.display = 'none');
        const target = document.getElementById('importStep' + n);
        if (target) target.style.display = 'block';
        // Update badges
        document.querySelectorAll('.import-step').forEach((el, i) => {
            const badge = el.querySelector('.step-badge');
            const label = el.querySelector('.step-label');
            if (badge) badge.className = 'badge rounded-circle step-badge ' + (i + 1 <= n ? 'bg-teal' : 'bg-secondary');
            if (label) label.className = 'step-label ' + (i + 1 === n ? 'fw-bold' : 'text-muted');
        });
    }

    // Drag and drop
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('importFileInput');
    if (dropZone) {
        dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('border-success'); });
        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('border-success'));
        dropZone.addEventListener('drop', e => {
            e.preventDefault();
            dropZone.classList.remove('border-success');
            const file = e.dataTransfer.files[0];
            if (file) uploadFile(file);
        });
    }
    if (fileInput) {
        fileInput.addEventListener('change', () => {
            if (fileInput.files[0]) uploadFile(fileInput.files[0]);
        });
    }

    function uploadFile(file) {
        const progressEl = document.getElementById('uploadProgress');
        if (progressEl) progressEl.style.display = 'block';
        const fd = new FormData();
        fd.append('import_file', file);
        fd.append('_token', csrf);
        fetch(urls.upload, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' }, body: fd })
            .then(r => {
                if (!r.ok && r.status !== 422) {
                    return r.text().then(text => {
                        let msg = 'Server error (' + r.status + ').';
                        try { const j = JSON.parse(text); msg = j.message || msg; } catch(e) {}
                        throw new Error(msg);
                    });
                }
                return r.json();
            })
            .then(resp => {
                if (progressEl) progressEl.style.display = 'none';
                if (resp.status === 200) {
                    sessionKey = resp.data.session_key;
                    loadFields().then(() => renderMappingTable(resp.data.headers, resp.data.preview_rows));
                } else {
                    toastr.error(resp.message || 'Upload failed.');
                }
            })
            .catch(err => {
                if (progressEl) progressEl.style.display = 'none';
                const msg = err && err.message ? err.message : 'Upload failed. Please refresh the page and try again.';
                toastr.error(msg);
            });
    }

    function loadFields() {
        return fetch(urls.fields, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf } })
            .then(r => r.json())
            .then(resp => { if (resp.status === 200) availableFields = resp.data.fields; });
    }

    function renderMappingTable(headers, previewRows) {
        const tbody = document.getElementById('mappingTableBody');
        tbody.innerHTML = '';
        previewHeaders = headers;
        headers.forEach((h, i) => {
            const sample = previewRows.map(r => r[i] || '').filter(Boolean).slice(0,2).join(', ');
            const hNorm = h.toLowerCase().replace(/[^a-z0-9]/g, '');

            // Auto-match: prefer core fields (by key first, then label), then dynamic by label
            let autoMatchKey = '';
            for (const f of availableFields) {
                if (f.type === 'core' && f.key.toLowerCase().replace(/[^a-z0-9]/g, '') === hNorm) {
                    autoMatchKey = f.key; break;
                }
            }
            if (!autoMatchKey) {
                for (const f of availableFields) {
                    if (f.type === 'core' && f.label.toLowerCase().replace(/[^a-z0-9]/g, '') === hNorm) {
                        autoMatchKey = f.key; break;
                    }
                }
            }
            if (!autoMatchKey) {
                for (const f of availableFields) {
                    if (f.type === 'dynamic' && f.label.toLowerCase().replace(/[^a-z0-9]/g, '') === hNorm) {
                        autoMatchKey = f.key; break;
                    }
                }
            }

            let options = '<option value="">-- Do not import --</option>';
            availableFields.forEach(f => {
                options += `<option value="${f.key}" ${f.key === autoMatchKey ? 'selected' : ''}>${f.label}</option>`;
            });
            tbody.innerHTML += `<tr>
                <td><strong>${h}</strong></td>
                <td class="text-muted small">${sample}</td>
                <td><select class="form-select form-select-sm mapping-select" data-col="${i}">${options}</select></td>
            </tr>`;
        });
        goToStep(2);
    }

    // Save mapping
    document.addEventListener('click', function(e) {
        if (e.target.id === 'btnSaveMapping') {
            const mappings = {};
            document.querySelectorAll('.mapping-select').forEach(sel => {
                if (sel.value) mappings[sel.dataset.col] = sel.value;
            });
            fetch(urls.mapColumns, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: JSON.stringify({ session_key: sessionKey, mappings }),
            })
            .then(r => r.json())
            .then(resp => {
                if (resp.status === 200) loadPreview();
                else toastr.error(resp.message || 'Mapping failed.');
            });
        }

        if (e.target.id === 'btnBackToMapping') goToStep(2);

        if (e.target.id === 'btnImportNow') {
            const dupeAction = document.querySelector('input[name="dupe_action"]:checked')?.value || 'skip';
            const importBtn = e.target;
            importBtn.disabled = true;
            importBtn.textContent = 'Importing...';
            fetch(urls.process, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: JSON.stringify({ session_key: sessionKey, dupe_action: dupeAction }),
            })
            .then(r => r.json())
            .then(resp => {
                importBtn.disabled = false;
                importBtn.textContent = 'Import Now';
                goToStep(4);
                const resultEl = document.getElementById('importResult');
                if (resp.status === 200) {
                    const d = resp.data || {};
                    const statusBadge = d.status === 'completed'
                        ? '<span class="badge bg-success">Completed</span>'
                        : '<span class="badge bg-danger">Failed</span>';
                    resultEl.className = 'alert alert-success';
                    resultEl.innerHTML = `<strong>Import complete!</strong> ${statusBadge}<br>
                        Imported: <strong>${d.imported_count ?? 0}</strong> &nbsp;|&nbsp;
                        Skipped: <strong>${d.skipped_count ?? 0}</strong> &nbsp;|&nbsp;
                        Errors: <strong>${d.error_count ?? 0}</strong>`;
                    loadHistory();
                } else {
                    resultEl.className = 'alert alert-danger';
                    resultEl.textContent = resp.message || 'Import failed.';
                }
            })
            .catch(() => {
                importBtn.disabled = false;
                importBtn.textContent = 'Import Now';
                toastr.error('Network error during import.');
            });
        }

        if (e.target.id === 'btnNewImport') {
            sessionKey = null;
            document.getElementById('importFileInput').value = '';
            goToStep(1);
        }

        if (e.target.id === 'btnRefreshHistory') loadHistory();
    });

    function loadPreview() {
        fetch(urls.preview + '?session_key=' + sessionKey, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf } })
            .then(r => r.json())
            .then(resp => {
                if (resp.status !== 200) { toastr.error(resp.message); return; }
                const rows = resp.data.rows;
                const dupeCount = resp.data.dupe_count;

                const dupeWarning = document.getElementById('dupeWarning');
                if (dupeCount > 0) {
                    dupeWarning.style.display = 'block';
                    dupeWarning.textContent = `Found ${dupeCount} potential duplicate(s) in preview rows.`;
                }

                // Build header from first row keys
                const keys = rows.length > 0 ? Object.keys(rows[0]).filter(k => k !== '_is_dupe') : [];
                const headerRow = document.getElementById('previewHeaderRow');
                headerRow.innerHTML = keys.map(k => `<th>${k}</th>`).join('') + '<th>Dupe?</th>';

                const tbody = document.getElementById('previewTableBody');
                tbody.innerHTML = rows.map(row => {
                    const cells = keys.map(k => `<td>${row[k] ?? ''}</td>`).join('');
                    const dupeCell = row._is_dupe ? '<td><span class="badge bg-warning">Dupe</span></td>' : '<td>—</td>';
                    return `<tr class="${row._is_dupe ? 'table-warning' : ''}">${cells}${dupeCell}</tr>`;
                }).join('');

                goToStep(3);
            });
    }

    function loadHistory() {
        fetch(urls.history, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf } })
            .then(r => r.json())
            .then(resp => {
                if (resp.status !== 200) return;
                const logs = resp.data?.logs?.data || [];
                const tbody = document.getElementById('importHistoryBody');
                if (!tbody) return;
                if (!logs.length) { tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">No import history yet.</td></tr>'; return; }
                tbody.innerHTML = logs.map(h => {
                    const statusClass = h.status === 'completed' ? 'success' : h.status === 'failed' ? 'danger' : 'warning';
                    return `<tr>
                        <td>${new Date(h.created_at).toLocaleString('en-US', {month:'short',day:'numeric',year:'numeric',hour:'2-digit',minute:'2-digit',hour12:false})}</td>
                        <td>${h.file_name}</td>
                        <td>${h.total_rows}</td>
                        <td>${h.imported_count}</td>
                        <td>${h.skipped_count}</td>
                        <td>${h.error_count}</td>
                        <td><span class="badge bg-${statusClass}">${h.status.charAt(0).toUpperCase() + h.status.slice(1)}</span></td>
                    </tr>`;
                }).join('');
            });
    }
})();
</script>
@endpush