@extends('admin.layouts.layout')
@section('title')انتقال از ووکامرس@endsection

@section('customhead')
<style>
.woo-log { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px; height: 220px; overflow-y: auto; font-family: monospace; font-size: 12.5px; line-height: 1.8; }
.woo-log .ok    { color: #4ade80; }
.woo-log .err   { color: #f87171; }
.woo-log .info  { color: #93c5fd; }
.woo-progress { height: 14px; }
</style>
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-1"><i class="ti ti-arrow-bar-to-down text-primary me-1"></i> انتقال از ووکامرس</h4>
            <p class="text-muted mb-0">یک‌بار اجرا می‌شود؛ محصولات، دسته‌بندی‌ها، تصاویر و متغیرها از سایت ووکامرس شما کشیده می‌شوند.</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4">
            {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">

        {{-- ── Step 1: Connection settings ── --}}
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">۱. اتصال به سایت ووکامرس</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.settings.woo-import.save') }}">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">آدرس وب‌سایت ووکامرس</label>
                            <input type="url" name="woo_url" class="form-control"
                                   placeholder="https://your-shop.com"
                                   value="{{ old('woo_url', $config['woo_url']) }}" required>
                            @error('woo_url')<small class="text-danger">{{ $message }}</small>@enderror
                            <small class="text-muted">بدون / در انتها</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Consumer Key</label>
                            <input type="text" name="woo_consumer_key" class="form-control font-monospace"
                                   placeholder="ck_xxxxxxxxxxxxxxxxxxxx"
                                   value="{{ old('woo_consumer_key', $config['woo_consumer_key']) }}" required>
                            @error('woo_consumer_key')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Consumer Secret</label>
                            <input type="text" name="woo_consumer_secret" class="form-control font-monospace"
                                   placeholder="cs_xxxxxxxxxxxxxxxxxxxx"
                                   value="{{ old('woo_consumer_secret', $config['woo_consumer_secret']) }}" required>
                            @error('woo_consumer_secret')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-device-floppy me-1"></i> ذخیره
                            </button>
                            <button type="button" id="testConnBtn" class="btn btn-outline-info">
                                <i class="ti ti-plug me-1"></i> تست اتصال
                            </button>
                        </div>
                    </form>

                    <hr class="my-4">
                    <div class="small text-muted">
                        <strong class="text-body">چطور Key بسازم؟</strong>
                        <ol class="mb-0 mt-2 ps-3">
                            <li>وارد WP-Admin شو</li>
                            <li>WooCommerce → Settings → Advanced → REST API</li>
                            <li>Add key → Permissions: <code>Read</code> → Generate API Key</li>
                            <li>کلیدها رو کپی و اینجا paste کن</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Step 2: Run migration ── --}}
        <div class="col-lg-7">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">۲. اجرای انتقال</h5>
                </div>
                <div class="card-body">

                    <div class="row g-3 mb-3" id="countsRow">
                        <div class="col-6">
                            <div class="d-flex align-items-center">
                                <div class="badge rounded-pill bg-label-info me-3 p-2">
                                    <i class="ti ti-category-2 ti-sm"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0" id="countCategories">—</h5>
                                    <small>دسته‌بندی</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="d-flex align-items-center">
                                <div class="badge rounded-pill bg-label-primary me-3 p-2">
                                    <i class="ti ti-package ti-sm"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0" id="countProducts">—</h5>
                                    <small>محصول</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="button" id="startImportBtn" class="btn btn-success w-100 mb-3" disabled>
                        <i class="ti ti-player-play me-1"></i> شروع انتقال
                    </button>

                    <div id="progressWrap" class="mb-2 d-none">
                        <div class="d-flex justify-content-between small mb-1">
                            <span id="progressLabel">آماده‌سازی...</span>
                            <span id="progressPct">0%</span>
                        </div>
                        <div class="progress woo-progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" id="progressBar" style="width: 0%"></div>
                        </div>
                    </div>

                    <div class="woo-log mt-3" id="importLog">
                        <span class="info">▶ هنوز شروع نشده است.</span>
                    </div>

                    <div class="alert alert-warning small mb-0 mt-3">
                        <i class="ti ti-info-circle me-1"></i>
                        <strong>تذکر:</strong>
                        اجرای دوباره ایمن است — محصولات بر اساس <code>woo_id</code> به‌روزرسانی می‌شوند (تکراری ساخته نمی‌شود).
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('customjs')
<script>
(function () {
    var csrf = '{{ csrf_token() }}';
    var routes = {
        test:       @json(route('admin.settings.woo-import.test')),
        counts:     @json(route('admin.settings.woo-import.counts')),
        cats:       @json(route('admin.settings.woo-import.categories')),
        prodsBatch: @json(route('admin.settings.woo-import.products-batch')),
    };

    var testBtn   = document.getElementById('testConnBtn');
    var startBtn  = document.getElementById('startImportBtn');
    var logEl     = document.getElementById('importLog');
    var progWrap  = document.getElementById('progressWrap');
    var progBar   = document.getElementById('progressBar');
    var progPct   = document.getElementById('progressPct');
    var progLabel = document.getElementById('progressLabel');

    function log(msg, cls) {
        var line = document.createElement('div');
        line.className = cls || '';
        line.textContent = msg;
        logEl.appendChild(line);
        logEl.scrollTop = logEl.scrollHeight;
    }
    function setProgress(pct, label) {
        progWrap.classList.remove('d-none');
        progBar.style.width = pct + '%';
        progPct.textContent = pct + '%';
        if (label) progLabel.textContent = label;
    }
    function post(url, body) {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            body: JSON.stringify(body || {}),
        }).then(function (r) { return r.json().then(function (j) { return {ok: r.ok, json: j}; }); });
    }

    function loadCounts() {
        fetch(routes.counts, {headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest'}})
            .then(function (r) { return r.json(); })
            .then(function (j) {
                if (j.ok) {
                    document.getElementById('countCategories').textContent = j.categories;
                    document.getElementById('countProducts').textContent   = j.products;
                    startBtn.disabled = (j.products + j.categories) === 0;
                }
            }).catch(function () {});
    }

    // Try to load counts on page open (silently fails if not configured)
    loadCounts();

    testBtn.addEventListener('click', function () {
        testBtn.disabled = true;
        post(routes.test).then(function (r) {
            if (r.json.ok) {
                Swal.fire({
                    icon: 'success', title: 'اتصال موفق',
                    text: r.json.message + (r.json.products !== undefined ? ' (' + r.json.products + ' محصول یافت شد)' : ''),
                });
                loadCounts();
            } else {
                Swal.fire({icon: 'error', title: 'خطا در اتصال', text: r.json.message || 'نامشخص'});
            }
        }).finally(function () { testBtn.disabled = false; });
    });

    startBtn.addEventListener('click', function () {
        Swal.fire({
            title: 'شروع انتقال؟',
            text: 'تمام محصولات و دسته‌بندی‌ها از ووکامرس کشیده و در این سیستم ذخیره می‌شوند. در حین اجرا صفحه را نبند.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'بله، شروع کن',
            cancelButtonText: 'انصراف',
            reverseButtons: true,
        }).then(function (res) {
            if (!res.isConfirmed) return;
            runImport();
        });
    });

    function runImport() {
        startBtn.disabled = true;
        testBtn.disabled  = true;
        logEl.innerHTML   = '';
        log('▶ شروع انتقال...', 'info');

        // Step 1: categories
        setProgress(5, 'در حال انتقال دسته‌بندی‌ها...');
        log('• دسته‌بندی‌ها در حال دریافت...', 'info');

        post(routes.cats).then(function (r) {
            if (!r.json.ok) {
                log('✗ خطا در دسته‌بندی‌ها: ' + (r.json.message || 'نامشخص'), 'err');
                startBtn.disabled = false;
                testBtn.disabled  = false;
                return;
            }
            log('✓ ' + r.json.imported + ' دسته‌بندی منتقل شد.', 'ok');
            (r.json.errors || []).forEach(function (e) { log('⚠ ' + e, 'err'); });

            // Step 2: products in batches
            importProducts(1);
        }).catch(function () {
            log('✗ خطای شبکه در انتقال دسته‌بندی‌ها', 'err');
            startBtn.disabled = false;
            testBtn.disabled  = false;
        });
    }

    function importProducts(page) {
        log('• صفحه ' + page + ' محصولات...', 'info');

        post(routes.prodsBatch, {page: page, per_page: 5}).then(function (r) {
            if (!r.json.ok) {
                log('✗ خطا: ' + (r.json.message || 'نامشخص'), 'err');
                startBtn.disabled = false;
                testBtn.disabled  = false;
                return;
            }
            (r.json.log || []).forEach(function (l) { log(l, 'ok'); });
            (r.json.errors || []).forEach(function (e) { log('⚠ ' + e, 'err'); });

            var pct = r.json.total_pages > 0 ? Math.round((r.json.page / r.json.total_pages) * 95) + 5 : 100;
            setProgress(Math.min(pct, 100), 'صفحه ' + r.json.page + ' از ' + r.json.total_pages + ' (' + r.json.total + ' محصول)');

            if (r.json.has_more) {
                setTimeout(function () { importProducts(page + 1); }, 250);
            } else {
                setProgress(100, '✅ انتقال کامل شد');
                log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━', 'info');
                log('✅ تمامی محصولات منتقل شدند!', 'ok');
                startBtn.disabled = false;
                testBtn.disabled  = false;
                loadCounts();
                Swal.fire({icon: 'success', title: 'انتقال کامل شد', timer: 2200, showConfirmButton: false});
            }
        }).catch(function () {
            log('✗ خطای شبکه در صفحه ' + page, 'err');
            startBtn.disabled = false;
            testBtn.disabled  = false;
        });
    }
})();
</script>
@endsection
