@extends('admin.layouts.app')

@section('title', 'Sync Dashboard v2 — ' . __('admin.brand.name'))
@section('page_title', 'Sync Dashboard')

{{-- Alpine is already loaded by admin/layouts/app.blade.php — DO NOT push another. --}}

@push('styles')
<style>
    [x-cloak] { display: none !important; }

    .sv2 { display: grid; gap: 18px; }
    .sv2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    @media (max-width: 960px) { .sv2-grid { grid-template-columns: 1fr; } }

    .sv2-card {
        background: #fff;
        border: 1px solid var(--na-border, #e5e7eb);
        border-radius: 16px;
        padding: 22px 24px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        display: flex; flex-direction: column; gap: 16px;
        position: relative;
    }
    .sv2-card-head {
        display: flex; align-items: center; gap: 12px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--na-border, #e5e7eb);
    }
    .sv2-card-icon {
        width: 42px; height: 42px; border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #ede9fe, #ddd6fe);
        color: #6d28d9; font-size: 20px;
    }
    .sv2-card-title { font-size: 16px; font-weight: 700; color: #0f172a; }
    .sv2-card-subtitle { font-size: 12px; color: #6b7280; margin-top: 2px; }

    .sv2-stat-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .sv2-stat {
        text-align: center;
        padding: 14px 8px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }
    .sv2-stat-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
        color: #6b7280; font-weight: 600; margin-bottom: 4px;
    }
    .sv2-stat-value { font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1.2; }
    .sv2-stat-value.is-accent { color: #6d28d9; }
    .sv2-stat-value.is-success { color: #059669; }
    .sv2-stat-value.is-warn { color: #d97706; }

    .sv2-bar-wrap {
        height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
    }
    .sv2-bar {
        height: 100%;
        background: linear-gradient(90deg, #8b5cf6, #6d28d9);
        transition: width .3s ease;
    }
    .sv2-bar.is-success { background: linear-gradient(90deg, #34d399, #059669); }
    .sv2-bar.is-warn    { background: linear-gradient(90deg, #fbbf24, #d97706); }
    .sv2-bar.is-error   { background: linear-gradient(90deg, #f87171, #dc2626); }

    .sv2-meta {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; font-size: 12px; color: #6b7280;
    }
    .sv2-meta strong { color: #0f172a; font-weight: 600; }

    .sv2-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .sv2-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 9px 16px;
        font: inherit; font-size: 13px; font-weight: 600;
        border-radius: 8px; cursor: pointer;
        transition: all .15s ease;
        border: 1px solid transparent;
    }
    .sv2-btn[disabled] { opacity: .55; cursor: not-allowed; }
    .sv2-btn--primary {
        background: linear-gradient(135deg, #8b5cf6, #6d28d9);
        color: #fff;
    }
    .sv2-btn--primary:hover:not([disabled]) { filter: brightness(1.06); transform: translateY(-1px); }
    .sv2-btn--ghost {
        background: #fff; color: #475569;
        border-color: #cbd5e1;
    }
    .sv2-btn--ghost:hover:not([disabled]) { background: #f1f5f9; }
    .sv2-btn--danger {
        background: #fff; color: #b91c1c;
        border-color: #fecaca;
    }
    .sv2-btn--danger:hover:not([disabled]) { background: #fef2f2; }

    .sv2-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px;
        font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em;
        border-radius: 999px;
        border: 1px solid transparent;
    }
    .sv2-pill--idle      { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
    .sv2-pill--running   { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
    .sv2-pill--completed { background: #dcfce7; color: #166534; border-color: #86efac; }
    .sv2-pill--partial   { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
    .sv2-pill--failed    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
    .sv2-pill--cancelled { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
    .sv2-pill .dot {
        width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    }
    .sv2-pill--running .dot { animation: sv2-pulse 1.6s ease-in-out infinite; }
    @keyframes sv2-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: .5; transform: scale(1.4); }
    }

    .sv2-progress-block {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 14px;
        display: grid; gap: 10px;
    }
    .sv2-progress-head {
        display: flex; align-items: center; justify-content: space-between;
    }
    .sv2-progress-title { font-size: 12px; color: #475569; font-weight: 600; }
    .sv2-progress-pct { font-size: 14px; font-weight: 700; color: #0f172a; }

    .sv2-counters {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
        font-size: 12px;
    }
    .sv2-counter { padding: 6px 0; }
    .sv2-counter-label { color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
    .sv2-counter-value { color: #0f172a; font-size: 14px; font-weight: 700; }

    .sv2-error-list {
        margin-top: 8px;
        max-height: 140px; overflow-y: auto;
        background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
        padding: 8px 12px;
        font-size: 11px; color: #991b1b;
    }
    .sv2-error-list li { padding: 4px 0; border-bottom: 1px dashed rgba(0, 0, 0, .08); list-style: none; }
    .sv2-error-list li:last-child { border-bottom: 0; }

    .sv2-toast {
        padding: 10px 14px;
        background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b;
        border-radius: 8px; font-size: 13px;
    }

    /* ── System Health panel ─────────────────────────────────────── */
    .sv2-health {
        background: #fff;
        border: 1px solid var(--na-border, #e5e7eb);
        border-radius: 14px;
        padding: 14px 18px;
        display: grid; gap: 10px;
    }
    .sv2-health-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
    }
    .sv2-health-title {
        font-size: 13px; font-weight: 700; color: #0f172a;
        display: inline-flex; align-items: center; gap: 8px;
    }
    .sv2-health-status {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        padding: 3px 10px; border-radius: 999px; letter-spacing: .04em;
    }
    .sv2-health-status.is-healthy  { background: #dcfce7; color: #166534; }
    .sv2-health-status.is-degraded { background: #fed7aa; color: #9a3412; }
    .sv2-health-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 6px 12px;
        font-size: 11px;
    }
    .sv2-health-item {
        display: flex; align-items: center; gap: 6px;
        padding: 4px 0;
        color: #475569;
    }
    .sv2-health-item .dot {
        width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }
    .sv2-health-item.is-healthy .dot  { background: #10b981; }
    .sv2-health-item.is-stale   .dot  { background: #f59e0b; animation: sv2-pulse 1.6s ease-in-out infinite; }
    .sv2-health-item .name { font-weight: 600; color: #0f172a; }
    .sv2-health-item .age  { color: #94a3b8; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
    .sv2-cron-hint {
        font-size: 11px; color: #92400e;
        background: #fef3c7; border: 1px solid #fde68a;
        padding: 8px 10px; border-radius: 6px;
        font-family: monospace;
    }

    .sv2-stale {
        font-size: 11px;
        padding: 3px 8px;
        background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
        border-radius: 999px; font-weight: 600;
    }
</style>
@endpush

@section('content')
<div
    class="sv2"
    x-data="syncDashboardV2(@js($urls))"
    x-init="boot()"
    x-cloak
>
    {{-- ────────────────────────────── Header ────────────────────────────── --}}
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
        <div>
            <h2 style="margin:0;font-size:20px;font-weight:800;color:#0f172a;">
                مزامنة Monday — لوحة التحكم
            </h2>
            <p style="margin:4px 0 0;color:#6b7280;font-size:13px;">
                إجمالي السجلات على Monday مقابل المحفوظ محليًا. اضغط
                <strong>ابدأ المزامنة</strong> ليتمّ كل شيء في الخلفية تلقائيًا.
            </p>
        </div>
        <button class="sv2-btn sv2-btn--ghost" @click="refreshSnapshot()" :disabled="loadingSnapshot">
            <span x-show="!loadingSnapshot">🔄 تحديث الإحصائيات</span>
            <span x-show="loadingSnapshot">… يحدّث</span>
        </button>
    </div>

    {{-- ────────────────────────────── Toast ─────────────────────────────── --}}
    <div class="sv2-toast" x-show="error" x-text="error"></div>

    {{-- ─────────────────────── System health widget ─────────────────────── --}}
    <div class="sv2-health" x-show="health.components.length > 0">
        <div class="sv2-health-head">
            <span class="sv2-health-title">
                <span x-text="health.status === 'healthy' ? '🟢' : '🟡'"></span>
                صحة النظام (Scheduler + Workers)
            </span>
            <span class="sv2-health-status"
                  :class="health.status === 'healthy' ? 'is-healthy' : 'is-degraded'"
                  x-text="health.status === 'healthy' ? 'سليم' : 'غير منتظم'"></span>
        </div>
        <div class="sv2-health-grid">
            <template x-for="c in health.components" :key="c.component">
                <div class="sv2-health-item" :class="c.is_stale ? 'is-stale' : 'is-healthy'">
                    <span class="dot"></span>
                    <span class="name" x-text="c.component"></span>
                    <span class="age" x-text="c.age_seconds === null ? 'never' : formatDuration(c.age_seconds) + ' ago'"></span>
                </div>
            </template>
        </div>
        <div class="sv2-cron-hint" x-show="health.cron_hint" x-text="health.cron_hint"></div>
    </div>

    {{-- ─────────────────────────── The two cards ───────────────────────── --}}
    <div class="sv2-grid">
        <template x-for="type in ['investors','companies']" :key="type">
            <div class="sv2-card">
                <div class="sv2-card-head">
                    <span class="sv2-card-icon"
                          x-text="type === 'investors' ? '💼' : '🏢'"></span>
                    <div style="flex:1;min-width:0;">
                        <div class="sv2-card-title"
                             x-text="type === 'investors' ? 'المستثمرون (Investors)' : 'الشركات الناشئة (Companies)'"></div>
                        <div class="sv2-card-subtitle">
                            <span x-show="snapshot[type]?.last_run">
                                آخر مزامنة:
                                <strong x-text="formatRelative(snapshot[type]?.last_run?.finished_at)"></strong>
                            </span>
                            <span x-show="!snapshot[type]?.last_run">لم تتم مزامنة كاملة بعد</span>
                        </div>
                    </div>
                    <span class="sv2-pill"
                          :class="'sv2-pill--' + (live[type]?.status || 'idle')">
                        <span class="dot"></span>
                        <span x-text="statusLabel(live[type]?.status || 'idle')"></span>
                    </span>
                </div>

                {{-- Stats: total / synced / remaining --}}
                <div class="sv2-stat-row">
                    <div class="sv2-stat">
                        <div class="sv2-stat-label">إجمالي على Monday</div>
                        <div class="sv2-stat-value is-accent" x-text="fmt(snapshot[type]?.remote_total)"></div>
                    </div>
                    <div class="sv2-stat">
                        <div class="sv2-stat-label">محفوظ محليًا</div>
                        <div class="sv2-stat-value is-success" x-text="fmt(snapshot[type]?.local_synced)"></div>
                    </div>
                    <div class="sv2-stat">
                        <div class="sv2-stat-label">المتبقّي</div>
                        <div class="sv2-stat-value is-warn" x-text="fmt(snapshot[type]?.remaining)"></div>
                    </div>
                </div>

                {{-- Static progress bar (snapshot percent) --}}
                <div x-show="!live[type] || ['idle','completed','partial','failed','cancelled'].includes(live[type]?.status || 'idle')">
                    <div class="sv2-meta" style="margin-bottom:6px;">
                        <span><strong x-text="(snapshot[type]?.percent_synced || 0) + '%'"></strong> من إجمالي Monday</span>
                        <span x-show="snapshot[type]?.last_run" class="sv2-meta">
                            <span class="sv2-pill" :class="'sv2-pill--' + (snapshot[type]?.last_run?.status || 'idle')">
                                <span class="dot"></span>
                                <span x-text="statusLabel(snapshot[type]?.last_run?.status)"></span>
                            </span>
                        </span>
                    </div>
                    <div class="sv2-bar-wrap">
                        <div class="sv2-bar"
                             :class="(snapshot[type]?.percent_synced || 0) >= 100 ? 'is-success' : ''"
                             :style="`width:${Math.min(100, snapshot[type]?.percent_synced || 0)}%`"></div>
                    </div>
                </div>

                {{-- LIVE progress block (only while a run is active OR finishing) --}}
                <div class="sv2-progress-block" x-show="live[type] && live[type].id">
                    <div class="sv2-progress-head">
                        <span class="sv2-progress-title">
                            🔴 جاري المزامنة —
                            <span x-text="stageLabel(live[type]?.stage)"></span>
                        </span>
                        <span class="sv2-progress-pct" x-text="(live[type]?.totals?.percent || 0).toFixed(1) + '%'"></span>
                    </div>
                    <div class="sv2-bar-wrap">
                        <div class="sv2-bar"
                             :class="live[type]?.totals?.failed > 0 ? 'is-warn' : ''"
                             :style="`width:${Math.min(100, live[type]?.totals?.percent || 0)}%`"></div>
                    </div>
                    <div class="sv2-counters">
                        <div class="sv2-counter">
                            <div class="sv2-counter-label">الإجمالي</div>
                            <div class="sv2-counter-value" x-text="fmt(live[type]?.totals?.remote)"></div>
                        </div>
                        <div class="sv2-counter">
                            <div class="sv2-counter-label">معالَج</div>
                            <div class="sv2-counter-value" x-text="fmt(live[type]?.totals?.processed)"></div>
                        </div>
                        <div class="sv2-counter">
                            <div class="sv2-counter-label">متبقّي</div>
                            <div class="sv2-counter-value" x-text="fmt(live[type]?.totals?.remaining)"></div>
                        </div>
                        <div class="sv2-counter">
                            <div class="sv2-counter-label">فشل</div>
                            <div class="sv2-counter-value"
                                 :style="(live[type]?.totals?.failed||0) > 0 ? 'color:#dc2626' : ''"
                                 x-text="fmt(live[type]?.totals?.failed)"></div>
                        </div>
                    </div>
                    <div class="sv2-meta" style="font-size:11px;">
                        <span>
                            صفحات: <strong x-text="(live[type]?.pages?.done || 0) + ' / ' + (live[type]?.pages?.total || 0)"></strong>
                            ·
                            في التنفيذ: <strong x-text="live[type]?.pages?.in_flight ?? 0"></strong>
                            ·
                            فاشلة: <strong x-text="live[type]?.pages?.failed ?? 0"></strong>
                        </span>
                        <span>
                            ملفّات: <strong x-text="(live[type]?.files?.done || 0) + ' / ' + ((live[type]?.files?.done||0)+(live[type]?.files?.pending||0))"></strong>
                        </span>
                    </div>
                    <div class="sv2-meta" style="font-size:11px;">
                        <span x-show="live[type]?.timing?.eta_seconds">
                            متوقّع الانتهاء خلال <strong x-text="formatDuration(live[type]?.timing?.eta_seconds)"></strong>
                        </span>
                        <span x-show="live[type]?.timing?.elapsed_seconds">
                            انقضى: <strong x-text="formatDuration(live[type]?.timing?.elapsed_seconds)"></strong>
                        </span>
                        <span class="sv2-stale"
                              x-show="(live[type]?.timing?.heartbeat_age_seconds || 0) > 60">
                            ⚠ Worker لم يتجاوب منذ
                            <span x-text="formatDuration(live[type]?.timing?.heartbeat_age_seconds)"></span>
                        </span>
                    </div>

                    <ul class="sv2-error-list" x-show="(live[type]?.errors_recent||[]).length > 0">
                        <template x-for="err in (live[type]?.errors_recent || [])" :key="err.id">
                            <li>
                                <strong x-text="err.stage"></strong>
                                — <span x-text="err.error_message"></span>
                            </li>
                        </template>
                    </ul>
                </div>

                {{-- Action buttons --}}
                <div class="sv2-actions">
                    <button class="sv2-btn sv2-btn--primary"
                            @click="startSync(type)"
                            :disabled="isActive(type) || starting[type]">
                        <span x-show="!starting[type] && !isActive(type)">▶ ابدأ المزامنة</span>
                        <span x-show="starting[type]">… يبدأ</span>
                        <span x-show="isActive(type) && !starting[type]" x-text="'جاري التشغيل…'"></span>
                    </button>
                    <button class="sv2-btn sv2-btn--danger"
                            @click="cancelSync(type)"
                            x-show="isActive(type)"
                            :disabled="cancelling[type]">
                        ⏹ <span x-show="!cancelling[type]">إيقاف</span><span x-show="cancelling[type]">… يوقف</span>
                    </button>
                    <button class="sv2-btn sv2-btn--ghost"
                            @click="resumeSync(type)"
                            x-show="canResume(type)"
                            :disabled="resuming[type]">
                        ↻ <span x-show="!resuming[type]">استئناف الفاشل</span><span x-show="resuming[type]">… يستأنف</span>
                    </button>
                </div>
            </div>
        </template>
    </div>

    <p style="font-size:11px;color:#94a3b8;text-align:center;margin-top:8px;">
        التحديث التلقائي كل
        <strong x-text="(POLL_MS/1000).toFixed(1) + 's'"></strong>
        أثناء التشغيل · كل
        <strong x-text="(IDLE_POLL_MS/1000).toFixed(0) + 's'"></strong>
        وقت الخمول
    </p>
</div>

<script>
    function syncDashboardV2(urls) {
        return {
            // ── config
            POLL_MS:      1500,
            IDLE_POLL_MS: 30000,
            urls,                                                   // {snapshot, start, progress, cancel, resume}

            // ── state
            csrf:           document.querySelector('meta[name="csrf-token"]')?.content || '',
            snapshot:       { investors: null, companies: null },   // pre-flight totals
            live:           { investors: null, companies: null },   // live counters per type
            activeRunId:    { investors: null, companies: null },   // current sync_states.id per type
            starting:       { investors: false, companies: false },
            cancelling:     { investors: false, companies: false },
            resuming:       { investors: false, companies: false },
            loadingSnapshot:false,
            error:          '',
            timer:          null,
            healthTimer:    null,
            health:         { status: 'healthy', components: [], cron_hint: null },

            // ── lifecycle
            async boot() {
                await this.refreshSnapshot();
                await this.refreshHealth();
                // If a run is already active when we open the dashboard, latch on.
                ['investors','companies'].forEach(t => {
                    if (this.snapshot[t]?.current_run?.id) {
                        this.activeRunId[t] = this.snapshot[t].current_run.id;
                    }
                });
                this.scheduleNextPoll();
                this.scheduleNextHealth();
            },

            scheduleNextHealth() {
                if (this.healthTimer) clearTimeout(this.healthTimer);
                this.healthTimer = setTimeout(() => this.tickHealth(), 30000);
            },

            async tickHealth() {
                try { await this.refreshHealth(); } catch (e) { /* keep polling */ }
                this.scheduleNextHealth();
            },

            async refreshHealth() {
                if (! this.urls.health) return;
                try {
                    const r = await fetch(this.urls.health, { credentials: 'same-origin' });
                    if (r.ok) this.health = await r.json();
                } catch { /* silent */ }
            },

            scheduleNextPoll() {
                if (this.timer) clearTimeout(this.timer);
                const anyActive = ['investors','companies'].some(t => this.isActive(t));
                const delay = anyActive ? this.POLL_MS : this.IDLE_POLL_MS;
                this.timer = setTimeout(() => this.tick(), delay);
            },

            async tick() {
                try {
                    await Promise.all(['investors','companies'].map(t => this.pollOne(t)));
                    if (!['investors','companies'].some(t => this.isActive(t))) {
                        // Refresh snapshot on transition out of "active" so totals update.
                        await this.refreshSnapshot();
                    }
                } catch (e) {
                    // Soft fail — keep polling.
                    console.warn('poll failed', e);
                }
                this.scheduleNextPoll();
            },

            async pollOne(type) {
                const id = this.activeRunId[type];
                if (!id) { this.live[type] = null; return; }

                const r = await fetch(this.urls.progress.replace('{id}', id), { credentials: 'same-origin' });
                if (!r.ok) {
                    this.live[type] = null;
                    return;
                }
                const data = await r.json();
                this.live[type] = data;

                if (['completed','partial','failed','cancelled'].includes(data.status)) {
                    // Run finished; release the latch on next snapshot refresh.
                    setTimeout(() => {
                        this.activeRunId[type] = null;
                        this.refreshSnapshot();
                    }, 3000);
                }
            },

            async refreshSnapshot() {
                this.loadingSnapshot = true;
                this.error = '';
                try {
                    const r = await fetch(this.urls.snapshot, { credentials: 'same-origin' });
                    if (!r.ok) throw new Error(`snapshot returned ${r.status}`);
                    this.snapshot = await r.json();
                } catch (e) {
                    this.error = 'فشل جلب الإحصائيات: ' + e.message;
                } finally {
                    this.loadingSnapshot = false;
                }
            },

            // ── actions
            async startSync(type) {
                if (this.starting[type] || this.isActive(type)) return;
                this.starting[type] = true;
                this.error = '';
                try {
                    const r = await fetch(this.urls.start, {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({ type, page_size: 50 }),
                    });
                    const data = await r.json();
                    if (!r.ok) throw new Error(data.message || `start returned ${r.status}`);

                    this.activeRunId[type] = data.id;
                    // Kick a poll immediately so the user sees the run jump to "initializing".
                    await this.pollOne(type);
                    this.scheduleNextPoll();
                } catch (e) {
                    this.error = 'فشل بدء المزامنة: ' + e.message;
                } finally {
                    this.starting[type] = false;
                }
            },

            async cancelSync(type) {
                const id = this.activeRunId[type];
                if (!id || this.cancelling[type]) return;
                this.cancelling[type] = true;
                try {
                    await fetch(this.urls.cancel.replace('{id}', id), {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: { 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
                    });
                    await this.pollOne(type);
                } catch (e) {
                    this.error = 'فشل الإيقاف: ' + e.message;
                } finally {
                    this.cancelling[type] = false;
                }
            },

            async resumeSync(type) {
                // Find the most-recent partial/failed run for this type and resume it.
                const last = this.snapshot[type]?.last_run;
                if (!last || !['partial','failed','cancelled'].includes(last.status) || this.resuming[type]) return;
                this.resuming[type] = true;
                try {
                    const r = await fetch(this.urls.resume.replace('{id}', last.id), {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: { 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
                    });
                    const data = await r.json();
                    if (!r.ok) throw new Error(data.message || `resume returned ${r.status}`);

                    this.activeRunId[type] = data.id || last.id;
                    await this.pollOne(type);
                    this.scheduleNextPoll();
                } catch (e) {
                    this.error = 'فشل الاستئناف: ' + e.message;
                } finally {
                    this.resuming[type] = false;
                }
            },

            // ── helpers
            isActive(type) {
                const s = this.live[type]?.status;
                return s && !['completed','partial','failed','cancelled'].includes(s);
            },
            canResume(type) {
                const last = this.snapshot[type]?.last_run;
                return last && ['partial','failed','cancelled'].includes(last.status) && !this.isActive(type);
            },
            fmt(n) { return (n ?? 0).toLocaleString('en-US'); },
            statusLabel(s) {
                const map = {
                    idle:'خامل', pending:'قيد الانتظار', initializing:'تهيئة',
                    running:'قيد التشغيل', completed:'مكتمل', partial:'مكتمل جزئيًا',
                    failed:'فشل', cancelled:'مُلغى',
                };
                return map[s] || s || '—';
            },
            stageLabel(s) {
                const map = {
                    initializing:'تهيئة', fetching:'جلب من Monday',
                    processing:'حفظ في قاعدة البيانات', saving:'حفظ',
                    files:'تحميل الملفات', completed:'مكتمل',
                };
                return map[s] || s || '';
            },
            formatRelative(iso) {
                if (!iso) return '—';
                const diff = (Date.now() - new Date(iso).getTime()) / 1000;
                if (diff < 60) return Math.round(diff) + 's ago';
                if (diff < 3600) return Math.round(diff/60) + 'm ago';
                if (diff < 86400) return Math.round(diff/3600) + 'h ago';
                return Math.round(diff/86400) + 'd ago';
            },
            formatDuration(s) {
                s = Math.round(s || 0);
                if (s < 60) return s + 's';
                if (s < 3600) return Math.floor(s/60) + 'm ' + (s%60) + 's';
                return Math.floor(s/3600) + 'h ' + Math.floor((s%3600)/60) + 'm';
            },
        };
    }
</script>
@endsection