@php
    $syncFieldColumns = [
        ['key' => '_index', 'label' => '#', 'cellClass' => 'col-center', 'width' => '36px', 'toggleable' => false, 'sortable' => false],
        ['key' => 'creator_name', 'label' => 'Tên KOC', 'cellClass' => 'col-left', 'toggleable' => false, 'sortable' => false],
        ['key' => 'followers', 'label' => 'Followers', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'gmv', 'label' => 'GMV', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'items', 'label' => 'Số món đã bán', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'average_views', 'label' => 'View video TB', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'advantages', 'label' => 'Lợi thế', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'contact_phone', 'label' => 'Sđt', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'contact_zalo', 'label' => 'Zalo', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'contact_email', 'label' => 'Email', 'type' => 'sync-compare', 'cellClass' => 'col-left', 'width' => '110px', 'sortable' => false],
        ['key' => 'status', 'label' => 'Trạng thái', 'cellClass' => 'col-center', 'width' => '80px', 'type' => 'html', 'render' => 'syncStatusHtml(row.status)', 'toggleable' => false, 'sortable' => false],
    ];
@endphp

{{-- Fields Modal --}}
<x-ui.modals type="modal" id="syncFieldsModal" title="Chọn thông tin cần đồng bộ từ TikTok" size="sm">
    <div class="modal-form">
        <div class="modal-form-grid">
            <div class="form-section full-width" style="background:#FFF8E1;border-color:#FFE082;">
                <div class="text-xs text-amber-800 leading-relaxed space-y-0.5">
                    <div>🔑 Đã đăng nhập <strong>TikTok Shop</strong> trên trình duyệt</div>
                    <div>🆔 KOC cần có <strong>CID TikTok</strong> (thiếu CID sẽ bỏ qua)</div>
                    <div>🧩 Đã cài <strong>Extension</strong> đồng bộ</div>
                    <div>📌 Có thể chia nhỏ số lượng KOC theo từng lần đồng bộ</div>
                </div>
            </div>
            <div class="form-section full-width">
                <h3>Phạm vi KOC</h3>
                <div class="flex gap-2 items-center">
                    <div class="flex-1">
                        <label class="text-xs block mb-0.5 text-gray-600">Từ KOC thứ</label>
                        <input type="number" class="modal-input" x-model="syncFromKoc" min="1" x-bind:max="totalKocCount || 99999" x-bind:disabled="syncAllKocs" />
                    </div>
                    <span class="pt-[18px] text-gray-400">→</span>
                    <div class="flex-1">
                        <label class="text-xs block mb-0.5 text-gray-600">Đến KOC thứ</label>
                        <input type="number" class="modal-input" x-model="syncToKoc" min="1" x-bind:max="totalKocCount" x-bind:disabled="syncAllKocs" />
                    </div>
                    <div class="flex-none w-[60px] text-center">
                        <label class="text-xs block mb-0.5 text-gray-600 font-semibold">ALL</label>
                        <div class="h-9 flex items-center justify-center">
                            <input type="checkbox" x-model="syncAllKocs" @change="if(syncAllKocs && totalKocCount > 0){ syncFromKoc=1; syncToKoc=totalKocCount }" class="w-4 h-4 cursor-pointer" />
                        </div>
                    </div>
                </div>

            </div>
            <div class="form-section full-width">
                <h3>Thông tin từ TikTok Affiliate</h3>
                <p class="text-xs text-gray-500 mb-1 leading-relaxed">
                    Chọn các trường thông tin bạn muốn cập nhật từ TikTok cho tất cả KOC:
                </p>
                <div class="checkbox-grid">
                    <label class="checkbox-item checkbox-all">
                        <input type="checkbox" x-model="syncSelectAll" @change="syncFieldsList.forEach(f => f.checked = syncSelectAll)" />
                        <span>Chọn tất cả</span>
                    </label>
                    <template x-for="field in syncFieldsList" :key="field.key">
                        <label class="checkbox-item">
                            <input type="checkbox" x-model="field.checked" />
                            <span x-text="field.label"></span>
                        </label>
                    </template>
                </div>
            </div>
        </div>
    </div>
    <x-slot name="footer">
        <x-ui.buttons type="button" variant="ghost" label="Hủy" @click="modalClose('syncFieldsModal')" />
        <x-ui.buttons type="button" variant="primary" label="Đồng bộ" @click="submitSyncTikTok()" x-bind:disabled="!syncFieldsList.some(f => f.checked)" />
    </x-slot>
</x-ui.modals>

{{-- Sync Progress & Review Modal (gộp chung) --}}
<div id="syncProgressModal" class="modal-overlay" x-show="showSyncProgress" x-cloak x-data style="z-index:200;">
    <div class="modal modal-lg sync-modal" @click.outside="closeSyncProgress()">

        {{-- Header --}}
        <div class="modal-header">
            <h3>Đồng bộ TikTok</h3>
            <button type="button" class="modal-close" @click="closeSyncProgress()" aria-label="Đóng">×</button>
        </div>

        <div class="modal-body">

            {{-- Progress / Status compact bar --}}
            <div class="mb-3">
                {{-- Đang đồng bộ --}}
                <template x-if="!syncProgressFinished">
                    <div class="flex flex-col gap-2">
                        <div class="flex items-center gap-2.5">
                            <div class="sync-spinner-sm"></div>
                            <span class="text-sm text-gray-600 flex-1 truncate" x-text="syncProgressMessage"></span>
                            <span class="text-xs text-gray-400 whitespace-nowrap" x-text="syncProgressCurrent + '/' + syncProgressTotal"></span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="sync-progress-bar flex-1">
                                <div class="sync-progress-fill" :style="'width:' + syncProgressPercent + '%'"></div>
                            </div>
                            <button type="button" class="btn btn-danger btn-sm" @click="abortSync()" x-bind:disabled="syncAborted">
                                Dừng
                            </button>
                        </div>
                    </div>
                </template>

                {{-- Hoàn tất / Đã dừng --}}
                <template x-if="syncProgressFinished">
                    <div class="flex items-center gap-2 py-0.5">
                        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-xs flex-shrink-0" :class="syncAborted ? 'bg-amber-50 text-amber-600' : 'bg-green-50 text-green-600'" x-text="syncAborted ? '⚠' : '✓'"></span>
                        <span class="text-sm font-semibold" :class="syncAborted ? 'text-amber-700' : 'text-green-700'" x-text="syncAborted ? 'Đã dừng đồng bộ' : 'Đồng bộ hoàn tất'"></span>
                    </div>
                </template>

                {{-- Stats pills --}}
                <div class="flex items-center gap-2 mt-2" x-show="syncStats.updated > 0 || syncStats.notFound > 0 || syncStats.missingCid > 0 || syncStats.errors > 0">
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium bg-green-50 text-green-700">
                        ✅ <span x-text="syncStats.updated"></span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium bg-red-50 text-red-700">
                        ❌ <span x-text="syncStats.notFound"></span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium bg-amber-50 text-amber-700">
                        ⚠️ <span x-text="syncStats.missingCid"></span>
                    </span>
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium bg-amber-50 text-amber-700">
                        ❗ <span x-text="syncStats.errors"></span>
                    </span>
                    <template x-if="syncProgressFinished">
                        <span class="text-xs text-gray-400 ml-1">· <span x-text="syncResults.length"></span> KOC</span>
                    </template>
                </div>
            </div>

            {{-- Bảng kết quả --}}
            <div x-show="syncResults.length > 0">
                <p class="text-xs text-gray-400 mb-1.5 leading-relaxed">
                    ⓘ Mỗi ô gồm <strong>2 hàng</strong>: hàng trên là <strong>giá trị cũ</strong> (từ DB), hàng dưới là <strong>giá trị mới</strong> (từ TikTok) — bạn có thể chỉnh sửa ô giá trị mới.
                    <template x-if="syncProgressFinished">
                        <span>Kiểm tra dữ liệu trước khi cập nhật lên database.</span>
                    </template>
                </p>

                {{-- Loading overlay khi đang cập nhật DB --}}
                <div x-show="syncReviewUpdating" class="text-center p-4 bg-white/85 rounded-lg mb-2">
                    <div class="sync-spinner-sm" style="margin:0 auto 6px;"></div>
                    <p class="text-xs text-gray-500">
                        Đang cập nhật dữ liệu lên database... <span x-text="syncReviewUpdatedCount + '/' + syncResults.length"></span>
                    </p>
                </div>

                <div class="border border-gray-200 rounded-lg sync-review-table-wrap">
                    <x-ui.tabular
                        id="sync-review-table"
                        tableClass="tabular-table"
                        :columns="$syncFieldColumns"
                        rows="syncResultsFlat"
                        loading="false"
                        :sortable="false"
                        :bulkActions="false"
                        :hasActions="false"
                        rowKey="creatorId"
                        columnVisibility="visibleSyncFieldKeys"
                    />
                </div>
            </div>

            <div x-show="syncResults.length === 0" class="text-center p-5 text-gray-400 text-xs">
                <template x-if="!syncProgressFinished">Đang chờ dữ liệu...</template>
                <template x-if="syncProgressFinished">Không có dữ liệu để hiển thị</template>
            </div>

        </div>

        {{-- Footer Actions --}}
        <div class="modal-footer">
            <template x-if="syncProgressFinished">
                <x-ui.buttons type="button" variant="ghost" label="Hủy bỏ" @click="cancelSyncResults()" x-bind:disabled="syncReviewUpdating" />
            </template>
            <template x-if="!syncProgressFinished">
                <x-ui.buttons type="button" variant="ghost" label="Đóng" @click="closeSyncProgress()" x-bind:disabled="syncing" />
            </template>
            <x-ui.buttons type="button" variant="secondary" iconFa="file-download" label="Tải file Excel" @click="downloadSyncResults()" x-bind:disabled="syncReviewUpdating || syncResults.length === 0" />
            <x-ui.buttons type="button" variant="primary" iconFa="database" label="Cập nhật lên DB" @click="confirmSyncUpdates()" x-bind:disabled="syncReviewUpdating || !syncProgressFinished || syncResults.length === 0" />
        </div>

    </div>
</div>