@extends('backend.layouts.app')

@section('main-content')
<section class="content-header">
    <div class="container-fluid my-2">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Import Business</h1>
            </div>
            <div class="col-sm-6 text-right">
                <a href="{{ route('admin.business.index') }}" class="btn btn-primary">Back</a>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container">
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="card-title">CSV Format &amp; Rules</h3>
            </div>
            <div class="card-body">
                <p>Upload a <strong>CSV</strong> or <strong>XLSX</strong> file with a header row. The following columns are imported:</p>
                <ul>
                    <li><strong>Name</strong> (required)</li>
                    <li><strong>Address</strong></li>
                    <li><strong>Country</strong> (required — rows without a valid country are skipped)</li>
                    <li><strong>City</strong></li>
                    <li><strong>Phone</strong></li>
                    <li><strong>Email</strong></li>
                    <li><strong>Category</strong> (use <code>|</code> to separate multiple categories)</li>
                    <li><strong>Website</strong></li>
                </ul>
                <p class="mb-1"><strong>Country:</strong> Each business is linked to a country. If the country does not exist yet, it is created automatically. Rows with a missing or invalid country are skipped.</p>
                <p class="mb-1"><strong>City:</strong> Optional. If provided, the business is also linked to that city.</p>
                <p class="mb-1"><strong>Duplicate handling:</strong> Rows are skipped if a business with the same website already exists, or if the same name and address already exists.</p>
                <p class="mb-0"><strong>Maximum file size:</strong> {{ $maxImportFileSizeLabel }} (server limits: post_max_size {{ $postMaxSize }}, upload_max_filesize {{ $uploadMaxFilesize }}).</p>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0">Queue Status</h3>
                <button id="start-queue-btn" class="btn btn-warning btn-sm">Start Queue Processing</button>
            </div>
            <div class="card-body">
                <p class="mb-1"><strong>Connection:</strong> <span id="queue-connection">—</span></p>
                <p class="mb-1"><strong>Pending jobs:</strong> <span id="queue-pending">—</span></p>
                <p class="mb-0"><strong>Failed jobs:</strong> <span id="queue-failed">—</span></p>
                <small id="queue-hint" class="text-muted d-block mt-2"></small>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Upload File</h3>
            </div>
            <div class="card-body">
                <form id="importForm" enctype="multipart/form-data">
                    @csrf
                    <input type="file" name="businesses_excel" id="businesses_excel" class="form-control" accept=".csv,.xlsx,.txt" required>

                    <div class="mt-3">
                        <label class="form-label mb-1">Upload progress</label>
                        <div class="progress" style="height: 24px;">
                            <div id="upload-progress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;">0%</div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <label class="form-label mb-1">Import progress</label>
                        <div class="progress" style="height: 24px;">
                            <div id="import-progress" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%;">Waiting</div>
                        </div>
                    </div>

                    <div id="import-stats" class="mt-2 text-muted small"></div>
                    <div id="import-message" class="mt-2"></div>
                    <div id="skipped-download" class="mt-2" style="display: none;">
                        <a id="skipped-download-link" href="#" class="btn btn-outline-danger btn-sm">
                            <i class="fas fa-download me-1"></i> Download skipped rows (CSV)
                        </a>
                        <small class="text-muted d-block mt-1">Each row lists why it was skipped in the <strong>Skip Reason</strong> column. Fix those values and re-upload the file — the Skip Reason column is ignored on import.</small>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <button id="upload-btn" class="btn btn-primary">Upload and Import</button>
            </div>
        </div>
    </div>
</section>
@endsection

@push('bottom-scripts')
<script>
    const csrfToken = '{{ csrf_token() }}';
    const importUrl = @json(route('admin.business.import'));
    const queueStatusUrl = @json(route('admin.queue.status'));
    const queueProcessUrl = @json(route('admin.queue.process'));
    const importProgressUrlTemplate = @json(route('admin.business.import-progress', ['importId' => '__IMPORT_ID__']));

    let progressTimer = null;
    let currentImportId = null;
    let queueProcessing = false;

    document.getElementById('upload-btn').addEventListener('click', startUpload);
    document.getElementById('start-queue-btn').addEventListener('click', startQueueProcessing);

    refreshQueueStatus();
    setInterval(refreshQueueStatus, 5000);

    function startUpload(event) {
        event.preventDefault();

        const fileInput = document.getElementById('businesses_excel');
        if (!fileInput.files.length) {
            alert('Please choose a CSV or XLSX file first.');
            return;
        }

        const formData = new FormData(document.getElementById('importForm'));
        const uploadBar = document.getElementById('upload-progress');
        const importBar = document.getElementById('import-progress');
        const uploadBtn = document.getElementById('upload-btn');

        resetProgressUI();
        uploadBtn.disabled = true;

        const xhr = new XMLHttpRequest();
        xhr.open('POST', importUrl, true);
        xhr.withCredentials = true;
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.upload.addEventListener('progress', (e) => {
            if (!e.lengthComputable) return;
            const percent = Math.round((e.loaded / e.total) * 100);
            uploadBar.style.width = percent + '%';
            uploadBar.textContent = percent + '% uploaded';
        });

        xhr.onreadystatechange = async function () {
            if (xhr.readyState !== 4) return;

            uploadBtn.disabled = false;

            if (xhr.status < 200 || xhr.status >= 300) {
                showMessage(parseUploadError(xhr), 'danger');
                uploadBar.classList.add('bg-danger');
                return;
            }

            const data = JSON.parse(xhr.responseText);
            currentImportId = data.import_id;

            uploadBar.style.width = '100%';
            uploadBar.textContent = 'Upload complete';
            importBar.textContent = 'Queued';
            showMessage(data.message, 'info');

            startProgressPolling();
            await startQueueProcessing();
        };

        xhr.onerror = function () {
            uploadBtn.disabled = false;
            showMessage('Network error while uploading. Check HTTPS/SSL settings and try again.', 'danger');
            uploadBar.classList.add('bg-danger');
        };

        xhr.send(formData);
    }

    function parseUploadError(xhr) {
        if (xhr.status === 0) {
            return 'Upload blocked by the browser (mixed content or network error). Ensure APP_URL uses https://pkwebs.com in .env.';
        }

        if (xhr.status === 401) {
            return 'Admin session expired. Please refresh the page and log in again.';
        }

        if (xhr.status === 419) {
            return 'Session expired (CSRF). Refresh the page and try again.';
        }

        if (xhr.status === 413) {
            return 'File is too large for the server PHP upload limits.';
        }

        try {
            const errorData = JSON.parse(xhr.responseText);
            return errorData.message
                || Object.values(errorData.errors || {})[0]?.[0]
                || `Upload failed (HTTP ${xhr.status}).`;
        } catch (e) {
            return `Upload failed (HTTP ${xhr.status}). ${xhr.responseText ? xhr.responseText.substring(0, 200) : ''}`;
        }
    }

    function startProgressPolling() {
        if (progressTimer) {
            clearInterval(progressTimer);
        }

        progressTimer = setInterval(checkImportProgress, 1500);
        checkImportProgress();
    }

    async function checkImportProgress() {
        if (!currentImportId) return;

        try {
            const response = await fetch(importProgressUrlTemplate.replace('__IMPORT_ID__', currentImportId), {
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            });
            const data = await response.json();

            const importBar = document.getElementById('import-progress');
            const stats = document.getElementById('import-stats');

            importBar.style.width = `${data.progress || 0}%`;
            importBar.textContent = `${data.progress || 0}%`;

            stats.textContent = `Processed: ${data.processed || 0} / ${data.total || 0} | Imported: ${data.imported || 0} | Skipped: ${data.skipped || 0}`;

            if (data.message) {
                showMessage(data.message, data.failed ? 'danger' : (data.completed ? 'success' : 'info'));
            }

            const skippedDownload = document.getElementById('skipped-download');
            const skippedLink = document.getElementById('skipped-download-link');
            if (data.skipped_file_url) {
                skippedLink.href = data.skipped_file_url;
                skippedDownload.style.display = 'block';
            } else {
                skippedDownload.style.display = 'none';
            }

            if (data.completed) {
                clearInterval(progressTimer);
                progressTimer = null;
                importBar.classList.remove('progress-bar-animated');
                refreshQueueStatus();
            }
        } catch (error) {
            console.error('Progress check failed:', error);
        }
    }

    async function refreshQueueStatus() {
        try {
            const response = await fetch(queueStatusUrl, {
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            });
            const data = await response.json();

            document.getElementById('queue-connection').textContent = data.connection;
            document.getElementById('queue-pending').textContent = data.pending_jobs;
            document.getElementById('queue-failed').textContent = data.failed_jobs;
            document.getElementById('queue-hint').textContent = data.worker_hint;
        } catch (error) {
            console.error('Queue status check failed:', error);
        }
    }

    async function startQueueProcessing() {
        if (queueProcessing) return;

        queueProcessing = true;
        const queueBtn = document.getElementById('start-queue-btn');
        queueBtn.disabled = true;
        queueBtn.textContent = 'Processing queue...';

        try {
            const response = await fetch(queueProcessUrl, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
            });

            const data = await response.json();

            if (!response.ok) {
                showMessage(data.message || 'Queue processing failed.', 'danger');
            } else {
                showMessage(data.message, 'success');
            }

            await refreshQueueStatus();

            if (currentImportId) {
                await checkImportProgress();
            }
        } catch (error) {
            console.error('Queue processing failed:', error);
            showMessage('Could not start queue processing.', 'danger');
        } finally {
            queueProcessing = false;
            queueBtn.disabled = false;
            queueBtn.textContent = 'Start Queue Processing';
        }
    }

    function resetProgressUI() {
        document.getElementById('upload-progress').style.width = '0%';
        document.getElementById('upload-progress').textContent = '0%';
        document.getElementById('upload-progress').classList.remove('bg-danger');

        const importBar = document.getElementById('import-progress');
        importBar.style.width = '0%';
        importBar.textContent = 'Waiting';
        importBar.classList.add('progress-bar-animated');

        document.getElementById('import-stats').textContent = '';
        document.getElementById('import-message').innerHTML = '';
        document.getElementById('skipped-download').style.display = 'none';
    }

    function showMessage(message, type) {
        document.getElementById('import-message').innerHTML = `<div class="alert alert-${type} mb-0">${message}</div>`;
    }
</script>
@endpush