@extends('layouts.admin')

@section('title', 'Quản lý tài khoản Zalo')
@section('admin_shell_attributes')
x-data="accountsApp()" x-init="init()"
@endsection

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endpush

@push('pre_alpine_scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
@endpush

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Quản lý tài khoản Zalo',
        'subtitle' => 'Theo dõi phiên đăng nhập, QR và thao tác tài khoản trong cài đặt hệ thống.',
        'actions' => '<a href="'.route('zalo-chat.page').'" class="btn btn-primary admin-btn"><i class="bi bi-chat-dots"></i> Mở Chat</a>',
    ])

    @include('settings.partials.nav-tabs')

    <div class="admin-metric-grid">
        <div class="admin-metric">
            <div class="admin-metric-label">Tổng tài khoản</div>
            <div class="admin-metric-value" x-text="accountStats.total"></div>
        </div>
        <div class="admin-metric">
            <div class="admin-metric-label">Sẵn sàng</div>
            <div class="admin-metric-value" x-text="accountStats.ready"></div>
        </div>
        <div class="admin-metric">
            <div class="admin-metric-label">Chờ đăng nhập</div>
            <div class="admin-metric-value" x-text="accountStats.waiting"></div>
        </div>
        <div class="admin-metric">
            <div class="admin-metric-label">Lỗi</div>
            <div class="admin-metric-value" x-text="accountStats.error"></div>
        </div>
    </div>

    <div class="admin-layout admin-layout-wide">
        <div class="admin-panel">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Thêm tài khoản mới</h2>
                    <div class="admin-panel-note">Đặt tên dễ nhận biết theo team, kênh bán hàng hoặc mục đích sử dụng.</div>
                    {{-- Chỉ có khi đơn vị có gói giới hạn - xem ZaloAccountQuota::usage(). --}}
                    <div class="admin-panel-note mt-1" x-show="quota" x-cloak>
                        Đã dùng
                        <strong :class="quota?.full ? 'text-danger' : ''" x-text="`${quota?.used ?? 0}/${quota?.limit ?? 0}`"></strong>
                        tài khoản Zalo theo gói của đơn vị.
                    </div>
                </div>
            </div>
            <div class="admin-panel-body">
                <div class="alert alert-warning admin-alert py-2 mb-3" x-show="quota?.full" x-cloak>
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    <span x-text="quota?.message"></span>
                </div>
                <form class="row g-2 align-items-center" @submit.prevent="createAccount()">
                    <div class="col-12 col-md">
                        <input type="text" class="form-control admin-input" placeholder="Tên tài khoản, ví dụ: Zalo Sale 01"
                               x-model="newAccountName" required>
                    </div>
                    <div class="col-12 col-md-auto">
                        <button type="submit" class="btn btn-primary admin-btn w-100" :disabled="creating || quota?.full">
                            <span x-show="creating" class="spinner-border spinner-border-sm"></span>
                            <i class="bi bi-plus-lg" x-show="!creating"></i>
                            Thêm tài khoản
                        </button>
                    </div>
                </form>
                <div class="alert alert-danger admin-alert py-2 mt-3 mb-0" x-show="errorMessage" x-text="errorMessage"></div>
                <div class="alert alert-success admin-alert py-2 mt-3 mb-0" x-show="successMessage" x-text="successMessage"></div>
            </div>
        </div>

        @if (auth()->user()->isAdmin())
            {{-- Kết nối Official Account.
                 Tách hẳn khỏi form trên vì đây là một KÊNH khác: OA không quét QR, không có
                 phiên trên worker, mà chạy bằng token của Zalo OpenAPI. --}}
            <div class="admin-panel">
                <div class="admin-panel-header">
                    <div>
                        <h2 class="admin-panel-title">Kết nối Zalo OA</h2>
                        <div class="admin-panel-note">
                            Bấm nút, đăng nhập Zalo rồi chọn OA muốn kết nối. Tên OA được lấy tự động,
                            token do hệ thống tự giữ và tự làm mới.
                        </div>
                    </div>
                </div>
                <div class="admin-panel-body">
                    {{-- Thông báo của luồng cấp quyền: Zalo chuyển hướng về trang này nên kết quả
                         đi bằng session flash chứ không phải response của một lời gọi fetch. --}}
                    @if (session('oa_success'))
                        <div class="alert alert-success admin-alert py-2 mb-3">{{ session('oa_success') }}</div>
                    @endif
                    @if (session('oa_error'))
                        <div class="alert alert-danger admin-alert py-2 mb-3">{{ session('oa_error') }}</div>
                    @endif

                    <button type="button" class="btn btn-primary admin-btn" :disabled="connectingOa"
                            @click="startOaAuthorization()">
                        <span x-show="connectingOa" class="spinner-border spinner-border-sm"></span>
                        <i class="bi bi-box-arrow-up-right" x-show="!connectingOa"></i>
                        Kết nối Zalo OA
                    </button>
                    {{-- Không khoá nút: cấp quyền lại một OA đã có thì không tốn thêm suất. --}}
                    <div class="admin-panel-note text-danger mt-2" x-show="quota?.full" x-cloak>
                        Đã hết suất tài khoản Zalo của gói - chỉ kết nối lại được OA đã có.
                    </div>

                    <div class="admin-panel-note mt-3">
                        Lần đầu dùng, khai địa chỉ này vào ô <strong>Redirect URI</strong> của ứng dụng bên
                        Zalo Developers — phải trùng khít, sai một ký tự là Zalo từ chối ngay:
                        <code>{{ route('zalo-oa.oauth.callback') }}</code>
                    </div>

                    {{-- Đường dự phòng, mặc định gập lại: chỉ cần khi chưa khai được Redirect URI
                         hoặc phải nối lại gấp trong lúc có sự cố. --}}
                    <details class="mt-3">
                        <summary class="admin-panel-note" style="cursor: pointer;">
                            Cách khác: dán refresh token thủ công
                        </summary>
                        <form class="row g-2 align-items-center mt-2" @submit.prevent="connectOa()">
                            <div class="col-12 col-md-4">
                                <input type="text" class="form-control admin-input"
                                       placeholder="Tên OA (bỏ trống để lấy tên thật)"
                                       x-model="newOaName">
                            </div>
                            <div class="col-12 col-md">
                                <input type="text" class="form-control admin-input" placeholder="refresh_token của OA"
                                       x-model="newOaRefreshToken" required>
                            </div>
                            <div class="col-12 col-md-auto">
                                <button type="submit" class="btn btn-outline-secondary admin-btn w-100"
                                        :disabled="connectingOa">
                                    Kết nối bằng token
                                </button>
                            </div>
                        </form>
                    </details>
                </div>
            </div>
        @endif

        <div class="admin-panel">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Danh sách tài khoản</h2>
                    <div class="admin-panel-note">QR sẽ tự làm mới khi tài khoản đang cần đăng nhập.</div>
                </div>
                <span class="badge rounded-pill text-bg-light border" x-text="pagination.total + ' tài khoản'"></span>
            </div>
            @if (auth()->user()->managesAccounts())
                <div class="admin-filter-bar">
                    <select class="form-select admin-select admin-filter-role admin-select2"
                            x-ref="ownerFilterSelect"
                            x-model="filters.ownerId"
                            @change="onOwnerFilterChange($event)">
                        <option value="">Tất cả nhân viên</option>
                        <option value="unowned">Chưa phân nhân viên</option>
                        <template x-for="owner in filterOwners" :key="owner.id">
                            <option :value="String(owner.id)" x-text="owner.name"></option>
                        </template>
                    </select>
                    <label class="account-select-all">
                        <input type="checkbox"
                               class="form-check-input"
                               x-ref="selectAllAccounts"
                               :checked="areAllVisibleAccountsSelected()"
                               :disabled="accounts.length === 0"
                               @change="toggleAllVisibleAccounts($event.target.checked)">
                        <span>Tất cả trang này</span>
                    </label>
                </div>
            @endif
            @if (auth()->user()->managesAccounts())
                <div class="account-bulk-bar" x-show="selectedAccountIds.length > 0" x-cloak>
                    <div class="account-bulk-summary">
                        <span class="account-bulk-count" x-text="selectedAccountIds.length"></span>
                        tài khoản đã chọn
                    </div>
                    <select class="form-select admin-select admin-select2 account-transfer-select"
                            multiple
                            x-ref="assignUserSelect">
                        <template x-for="owner in filterOwners" :key="'transfer-owner-' + owner.id">
                            <option :value="String(owner.id)" x-text="owner.name"></option>
                        </template>
                    </select>
                    <button type="button"
                            class="btn btn-primary admin-btn"
                            :disabled="bulkBusy() || assignUserIds.length === 0"
                            @click="assignSelectedAccounts()">
                        <span x-show="transferringAccounts" class="spinner-border spinner-border-sm"></span>
                        <i class="bi bi-arrow-left-right" x-show="!transferringAccounts"></i>
                        Phân quyền
                    </button>
                    <button type="button"
                            class="btn btn-success admin-btn"
                            :disabled="bulkBusy()"
                            @click="runBulkSessionAction('open')">
                        <span x-show="bulkSessionBusy === 'open'" class="spinner-border spinner-border-sm"></span>
                        <i class="bi bi-play-fill" x-show="bulkSessionBusy !== 'open'"></i>
                        Mở phiên
                    </button>
                    <button type="button"
                            class="btn btn-secondary admin-btn"
                            :disabled="bulkBusy()"
                            @click="runBulkSessionAction('close')">
                        <span x-show="bulkSessionBusy === 'close'" class="spinner-border spinner-border-sm"></span>
                        <i class="bi bi-stop-fill" x-show="bulkSessionBusy !== 'close'"></i>
                        Đóng phiên
                    </button>
                    <button type="button"
                            class="btn btn-outline-secondary admin-btn"
                            :disabled="bulkBusy()"
                            @click="clearSelectedAccounts()">
                        Bỏ chọn
                    </button>
                </div>
            @endif
            <div class="admin-panel-body">
                <div class="account-list">
                    <template x-for="account in accounts" :key="account.id">
                        <article class="account-card @if (auth()->user()->managesAccounts()) account-card-selectable @endif">
                            <div class="account-main">
                                <div class="account-avatar" x-text="(account.name || 'Z').slice(0, 1).toUpperCase()"></div>
                                <div class="min-w-0">
                                    <div class="account-name text-truncate" x-text="account.name"></div>
                                    <div class="account-meta">ID <span x-text="account.id"></span> · Cập nhật <span x-text="account.updated_at"></span></div>
                                    @if (auth()->user()->managesAccounts())
                                        <div class="account-meta">
                                            Người tạo: <span x-text="account.user?.name ?? '— chưa có —'"></span>
                                        </div>
                                        <div class="account-meta">
                                            Nhân viên: <span x-text="accountAssignedUserNames(account)"></span>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div>
                                <div class="admin-panel-note mb-1">Profile key</div>
                                <code class="account-key d-block" x-text="account.profile_key"></code>
                            </div>

                            <div>
                                <span class="badge status-chip" :class="statusBadgeClass(account.status)" x-text="account.status"></span>
                                <span class="badge rounded-pill text-bg-info ms-1" x-show="isOaAccount(account)">OA</span>
                                <div class="text-danger small mt-2" x-show="account.last_error" x-text="account.last_error"></div>
                            </div>

                            <div>
                                {{-- OA không quét QR: nó dùng token OpenAPI. Cả khối QR bên dưới
                                     vô nghĩa với nó nên thay bằng hạn token. --}}
                                <template x-if="isOaAccount(account)">
                                    <div class="qr-empty">
                                        <span x-show="account.oa_token_expires_at">Token còn hạn tới
                                            <span x-text="formatDateTime(account.oa_token_expires_at)"></span>
                                        </span>
                                        <span x-show="!account.oa_token_expires_at">Chưa có token</span>
                                    </div>
                                </template>
                                <template x-if="!isOaAccount(account) && (account.status === 'LOGIN_REQUIRED' || account.status === 'RELOGIN_REQUIRED' || account.status === 'STARTING')">
                                    <div class="qr-card">
                                        <img class="qr-thumb" :src="screenshotUrl(account.id)" alt="QR đăng nhập">
                                        <div class="d-flex flex-column gap-2 flex-fill">
                                            <button type="button" class="btn btn-sm btn-outline-secondary admin-btn"
                                                    title="Xem QR lớn hơn" @click="qrModalAccountId = account.id">
                                                <i class="bi bi-qr-code-scan"></i>
                                                Xem QR
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-primary admin-btn"
                                                    @click="openPasswordLogin(account.id)">
                                                <i class="bi bi-key"></i>
                                                Mật khẩu
                                            </button>
                                        </div>
                                    </div>
                                </template>
                                <template x-if="!isOaAccount(account) && !(account.status === 'LOGIN_REQUIRED' || account.status === 'RELOGIN_REQUIRED' || account.status === 'STARTING')">
                                    <div class="qr-empty">Không cần QR lúc này</div>
                                </template>
                            </div>

                            <div class="account-action-grid">
                                {{-- Mở/đóng phiên, đồng bộ tin cũ: đều là thao tác trên phiên zca-js ở
                                     worker. OA không có phiên nào ở đó nên chỉ còn nút làm mới token. --}}
                                <button class="btn btn-sm btn-outline-primary admin-btn"
                                        x-show="isOaAccount(account)"
                                        @click="refreshOaToken(account.id)"
                                        :disabled="busyIds.includes(account.id)"
                                        title="Đổi refresh token lấy access token mới">
                                    <i class="bi bi-arrow-repeat"></i>
                                    Làm mới token
                                </button>
                                <button class="btn btn-sm btn-outline-secondary admin-btn"
                                        x-show="isOaAccount(account)"
                                        @click="syncOaHistory(account.id)"
                                        :disabled="busyIds.includes(account.id)"
                                        title="Kéo lại hội thoại/tin nhắn cũ từ trước khi kết nối">
                                    <i class="bi bi-clock-history"></i>
                                    Đồng bộ lịch sử
                                </button>
                                <button class="btn btn-sm btn-success admin-btn" @click="openSession(account.id)"
                                        x-show="!isOaAccount(account)"
                                        :disabled="busyIds.includes(account.id)">
                                    <i class="bi bi-play-fill"></i>
                                    Mở phiên
                                </button>
                                {{-- Chỉ có nghĩa khi phiên đã chạy: luồng này gửi yêu cầu qua chính
                                     WebSocket của phiên đó. --}}
                                <button class="btn btn-sm btn-outline-secondary admin-btn"
                                        x-show="account.status === 'READY' && !isOaAccount(account)"
                                        @click="openMobileSync(account.id)"
                                        :disabled="busyIds.includes(account.id)"
                                        title="Kéo toàn bộ lịch sử tin nhắn cũ từ điện thoại về - cần cầm điện thoại bấm xác nhận">
                                    <i class="bi bi-phone"></i>
                                    Đồng bộ tin cũ
                                </button>
                                <button class="btn btn-sm btn-secondary admin-btn" @click="closeSession(account.id)"
                                        x-show="!isOaAccount(account)"
                                        :disabled="busyIds.includes(account.id)">
                                    <i class="bi bi-stop-fill"></i>
                                    Đóng
                                </button>
                                <button class="btn btn-sm btn-outline-danger admin-btn" @click="deleteAccount(account.id)"
                                        :disabled="busyIds.includes(account.id)">
                                    <i class="bi bi-trash3"></i>
                                    Xóa
                                </button>
                            </div>

                            @if (auth()->user()->managesAccounts())
                                <label class="account-select-cell"
                                       :title="isAccountSelected(account.id) ? 'Bỏ chọn tài khoản' : 'Chọn tài khoản'">
                                    <input type="checkbox"
                                           class="form-check-input account-select-check"
                                           :checked="isAccountSelected(account.id)"
                                           @change="toggleAccountSelection(account.id)">
                                </label>
                            @endif
                        </article>
                    </template>

                    <div class="empty-admin" x-show="pagination.total === 0">
                        <div>
                            <div class="fs-4 fw-bold mb-1" x-text="filters.ownerId ? 'Không có tài khoản phù hợp' : 'Chưa có tài khoản nào'"></div>
                            <div x-text="filters.ownerId ? 'Đổi bộ lọc nhân viên để xem tài khoản khác.' : 'Thêm tài khoản đầu tiên để bắt đầu mở phiên Zalo.'"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="admin-pagination" x-show="pagination.total > 0">
                <div class="admin-pagination-summary">
                    Hiển thị
                    <span x-text="paginationStart()"></span>-<span x-text="paginationEnd()"></span>
                    trong <span x-text="pagination.total"></span> tài khoản
                </div>
                <div class="admin-pagination-actions">
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary admin-icon-action"
                            title="Trang trước"
                            aria-label="Trang trước"
                            :disabled="currentPage <= 1"
                            @click="goToPage(currentPage - 1)">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <span class="admin-page-indicator">
                        Trang <span x-text="currentPage"></span>/<span x-text="totalPages()"></span>
                    </span>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary admin-icon-action"
                            title="Trang sau"
                            aria-label="Trang sau"
                            :disabled="currentPage >= totalPages()"
                            @click="goToPage(currentPage + 1)">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal xem QR lớn --}}
    <template x-if="qrModalAccountId">
        <div @click.self="qrModalAccountId = null" @keydown.escape.window="qrModalAccountId = null"
             class="admin-modal-backdrop">
            <div class="admin-modal admin-modal-lg text-center">
                <div class="admin-modal-header">
                    <h5 class="mb-0">Quét mã QR để đăng nhập</h5>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn-close" @click="qrModalAccountId = null"></button>
                    </div>
                </div>
                <div class="admin-modal-body">
                    <img class="qr-large" :src="screenshotUrl(qrModalAccountId)" alt="QR đăng nhập">
                </div>
            </div>
        </div>
    </template>

    {{-- Modal đăng nhập bằng số điện thoại + mật khẩu --}}
    <template x-if="passwordModalAccountId">
        <div @click.self="closePasswordLogin()" @keydown.escape.window="closePasswordLogin()"
             class="admin-modal-backdrop">
            <div class="admin-modal">
                <div class="admin-modal-header">
                    <h5 class="mb-0">Đăng nhập với mật khẩu</h5>
                    <button type="button" class="btn-close" @click="closePasswordLogin()"></button>
                </div>
                <div class="admin-modal-body">
                <form @submit.prevent="submitPasswordLogin()">
                    <div class="mb-2">
                        <label class="form-label small">Số điện thoại</label>
                        <input type="tel" class="form-control admin-input" x-model="loginPhone"
                               placeholder="0912345678" required :disabled="loggingIn">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small">Mật khẩu</label>
                        <input type="password" class="form-control admin-input" x-model="loginPassword"
                               required :disabled="loggingIn">
                    </div>
                    <div class="alert alert-danger py-2 small" x-show="loginError" x-text="loginError"></div>
                    <div class="alert alert-warning py-2 small" x-show="loginNeedsVerification">
                        Zalo yêu cầu thêm bước xác minh (OTP/captcha). Hãy đóng cửa sổ này và xem
                        ảnh màn hình của tài khoản để hoàn tất thủ công.
                    </div>
                    <button type="submit" class="btn btn-primary admin-btn w-100" :disabled="loggingIn">
                        <span x-show="loggingIn" class="spinner-border spinner-border-sm"></span>
                        <i class="bi bi-box-arrow-in-right" x-show="!loggingIn"></i>
                        Đăng nhập
                    </button>
                </form>
                </div>
            </div>
        </div>
    </template>

    {{-- Modal đồng bộ tin nhắn cũ từ điện thoại (pull_mobile_msg).
         Phải có màn chờ riêng chứ không thể chỉ hiện toast: luồng này đòi người dùng cầm
         điện thoại bấm xác nhận trong ~120s rồi chạy tiếp vài phút, và bước giải mã file
         Zalo trả về vẫn ở dạng thử nghiệm nên rất cần thấy nó dừng ở bước nào. --}}
    <template x-if="mobileSyncAccountId">
        <div @click.self="closeMobileSync()" @keydown.escape.window="closeMobileSync()"
             class="admin-modal-backdrop">
            <div class="admin-modal">
                <div class="admin-modal-header">
                    <h5 class="mb-0">Đồng bộ tin nhắn cũ từ điện thoại</h5>
                    <button type="button" class="btn-close" @click="closeMobileSync()"></button>
                </div>
                <div class="admin-modal-body">
                    <ol class="small text-muted ps-3 mb-3">
                        <li>Mở ứng dụng Zalo trên điện thoại của tài khoản này.</li>
                        <li>Màn hình "Đồng bộ tin nhắn" sẽ hiện lên - bấm <strong>Xác nhận</strong>.</li>
                        <li>Giữ nguyên cửa sổ này cho tới khi chạy xong.</li>
                    </ol>

                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="spinner-border spinner-border-sm" x-show="mobileSyncRunning"></span>
                        <strong x-text="mobileSyncLabel"></strong>
                    </div>

                    <div class="alert alert-danger py-2 small mb-2" x-show="mobileSyncError"
                         x-text="mobileSyncError"></div>

                    <div class="alert alert-warning py-2 small mb-2" x-show="mobileSyncStatus === 'decrypt_failed'">
                        Đã tải được dữ liệu nhưng chưa giải mã được. Đây là bước còn đang thử nghiệm -
                        xem log worker để biết chi tiết.
                    </div>

                    <div class="alert alert-success py-2 small mb-2" x-show="mobileSyncStatus === 'done'">
                        Đã đồng bộ xong. Tin nhắn cũ sẽ xuất hiện dần trong các hội thoại.
                    </div>

                    <button type="button" class="btn btn-primary admin-btn w-100"
                            x-show="!mobileSyncRunning"
                            @click="startMobileSync(mobileSyncAccountId)">
                        <i class="bi bi-arrow-repeat"></i>
                        <span x-text="mobileSyncStatus === 'idle' ? 'Bắt đầu đồng bộ' : 'Thử lại'"></span>
                    </button>
                </div>
            </div>
        </div>
    </template>
@endsection

@push('scripts')
<script>
    function accountsApp() {
        return {
            accounts: [],
            accountStats: { total: 0, ready: 0, waiting: 0, error: 0 },
            quota: null,
            pagination: { current_page: 1, from: 0, last_page: 1, per_page: 15, to: 0, total: 0 },
            currentPage: 1,
            perPage: 15,
            filters: { ownerId: '' },
            filterOwners: [],
            newAccountName: '',
            creating: false,
            // Kết nối Zalo OA: dán refresh token lấy từ API Explorer của Zalo.
            newOaName: '',
            newOaRefreshToken: '',
            connectingOa: false,
            busyIds: [],
            errorMessage: '',
            successMessage: '',
            selectedAccountIds: [],
            assignUserIds: [],
            transferringAccounts: false,
            bulkSessionBusy: null,
            refreshTick: 0,
            pollTimer: null,
            // Chỉ dùng để theo dõi nhanh các tài khoản đang chờ QR/đăng nhập.
            pollDelays: [3000, 8000, 15000, 30000],
            pollDelayIndex: 0,
            polling: false,
            abortController: null,
            qrModalAccountId: null,
            passwordModalAccountId: null,
            loginPhone: '',
            loginPassword: '',
            loggingIn: false,
            loginError: '',
            loginNeedsVerification: false,
            mobileSyncAccountId: null,
            mobileSyncStatus: 'idle',
            mobileSyncError: '',
            mobileSyncTimer: null,

            async init() {
                await this.pollOnce();
                this.schedulePoll();

                // Tab ẩn thì dừng hẳn - không việc gì phải bắt Worker đọc DOM khi không ai xem.
                // Tab hiện lại thì gọi ngay 1 lần rồi trở về nhịp nhanh nhất.
                document.addEventListener('visibilitychange', () => {
                    if (document.hidden) {
                        this.stopPolling();
                        return;
                    }
                    this.pollDelayIndex = 0;
                    this.pollOnce().then(() => this.schedulePoll());
                });
            },

            stopPolling() {
                if (this.pollTimer) {
                    clearTimeout(this.pollTimer);
                    this.pollTimer = null;
                }
                this.abortInFlight();
            },

            abortInFlight() {
                if (this.abortController) {
                    this.abortController.abort();
                    this.abortController = null;
                }
            },

            // Chỉ poll khi trang hiện tại có tài khoản đang ở trạng thái cần theo dõi QR/phiên.
            // Khi tất cả đã ổn định thì dừng hẳn, tránh gọi `/api/zalo-accounts` liên tục.
            schedulePoll() {
                if (this.pollTimer) {
                    clearTimeout(this.pollTimer);
                    this.pollTimer = null;
                }

                if (document.hidden || !this.hasTransientAccount()) return;

                this.pollTimer = setTimeout(async () => {
                    this.pollTimer = null;
                    if (document.hidden) return;
                    await this.pollOnce();
                    this.schedulePoll();
                }, this.pollDelays[0]);
            },

            hasTransientAccount() {
                const transient = ['STARTING', 'LOGIN_REQUIRED', 'RELOGIN_REQUIRED'];
                return this.accounts.some(a => transient.includes(a.status));
            },

            async pollOnce() {
                if (this.polling) return;
                this.polling = true;
                try {
                    await this.syncTransientStatuses();
                    const changed = await this.loadAccounts();

                    if (changed) {
                        this.pollDelayIndex = 0;
                    } else if (this.pollDelayIndex < this.pollDelays.length - 1) {
                        this.pollDelayIndex += 1;
                    }
                } finally {
                    this.polling = false;
                }
            },

            // Chủ động gọi API status cho các tài khoản đang ở trạng thái tạm thời,
            // để Laravel hỏi lại Worker và đồng bộ trạng thái thật (vd: đã quét QR xong)
            async syncTransientStatuses() {
                const transient = ['STARTING', 'LOGIN_REQUIRED', 'RELOGIN_REQUIRED'];
                const targets = this.accounts.filter(a => transient.includes(a.status));
                await Promise.all(
                    targets.map(a => fetch(`/api/zalo-accounts/${a.id}/status`).catch(() => {}))
                );
            },

            async loadAccounts() {
                this.abortInFlight();
                const controller = new AbortController();
                this.abortController = controller;

                try {
                    const res = await fetch(`/api/zalo-accounts?${this.accountQueryParams()}`, { signal: controller.signal });
                    const json = await res.json();
                    const next = json.data ?? [];
                    const nextPagination = {
                        current_page: Number(json.meta?.current_page ?? this.currentPage),
                        from: Number(json.meta?.from ?? 0),
                        last_page: Number(json.meta?.last_page ?? 1),
                        per_page: Number(json.meta?.per_page ?? this.perPage),
                        to: Number(json.meta?.to ?? 0),
                        total: Number(json.meta?.total ?? 0),
                    };
                    const nextStats = {
                        total: Number(json.stats?.total ?? nextPagination.total),
                        ready: Number(json.stats?.ready ?? 0),
                        waiting: Number(json.stats?.waiting ?? 0),
                        error: Number(json.stats?.error ?? 0),
                    };
                    const nextOwners = json.filters?.owners ?? this.filterOwners;

                    // So sánh để biết có đáng reset backoff không, đồng thời tránh gán lại
                    // mảng khi dữ liệu y hệt (đỡ làm Alpine render lại toàn bảng)
                    const changed = JSON.stringify({
                        accounts: next,
                        pagination: nextPagination,
                        stats: nextStats,
                    }) !== JSON.stringify({
                        accounts: this.accounts,
                        pagination: this.pagination,
                        stats: this.accountStats,
                    });
                    if (changed) {
                        this.accounts = next;
                    }
                    this.pagination = nextPagination;
                    this.currentPage = nextPagination.current_page;
                    this.accountStats = nextStats;
                    this.quota = json.quota ?? null;
                    this.filterOwners = nextOwners;
                    this.$nextTick(() => {
                        this.refreshOwnerFilterSelect();
                        this.refreshAssignUserSelect();
                        this.syncSelectAllCheckbox();
                    });
                    this.refreshTick = Date.now();

                    // Tự đóng modal QR khi tài khoản đã đăng nhập xong hoặc không còn tồn tại
                    if (this.qrModalAccountId) {
                        const current = this.accounts.find(a => a.id === this.qrModalAccountId);
                        if (!current || !['LOGIN_REQUIRED', 'STARTING'].includes(current.status)) {
                            this.qrModalAccountId = null;
                        }
                    }

                    this.errorMessage = '';
                    return changed;
                } catch (e) {
                    // Request bị hủy chủ động (chuyển tab, poll mới) không phải lỗi thật
                    if (e.name !== 'AbortError') {
                        this.errorMessage = 'Không thể tải danh sách tài khoản';
                    }
                    return false;
                } finally {
                    if (this.abortController === controller) {
                        this.abortController = null;
                    }
                }
            },

            accountQueryParams() {
                const params = new URLSearchParams({
                    page: String(this.currentPage),
                    per_page: String(this.perPage),
                });

                if (this.filters.ownerId) {
                    params.set('owner_id', this.filters.ownerId);
                }

                return params.toString();
            },

            totalPages() {
                return Math.max(1, Number(this.pagination.last_page ?? 1));
            },

            async goToPage(page) {
                this.currentPage = Math.min(Math.max(1, page), this.totalPages());
                await this.loadAccounts();
                this.schedulePoll();
            },

            async applyFilters() {
                this.currentPage = 1;
                this.pollDelayIndex = 0;
                await this.loadAccounts();
                this.schedulePoll();
            },

            onOwnerFilterChange(valueOrEvent) {
                const nextValue = typeof valueOrEvent === 'string'
                    ? valueOrEvent
                    : String(valueOrEvent?.target?.value ?? '');
                if (this.filters.ownerId === nextValue) return;

                this.filters.ownerId = nextValue;
                this.applyFilters();
            },

            refreshOwnerFilterSelect() {
                const el = this.$refs.ownerFilterSelect;
                if (!el || !window.jQuery || !window.jQuery.fn?.select2) return;

                const $select = window.jQuery(el);
                if (!$select.data('select2')) {
                    $select.select2({
                        width: '100%',
                        placeholder: 'Tất cả nhân viên',
                    });
                }

                $select
                    .off('change.accountOwnerFilter')
                    .on('change.accountOwnerFilter', () => {
                        this.onOwnerFilterChange(String($select.val() ?? ''));
                    });
                $select.val(this.filters.ownerId).trigger('change.select2');
            },

            refreshAssignUserSelect() {
                const el = this.$refs.assignUserSelect;
                if (!el || !window.jQuery || !window.jQuery.fn?.select2) return;

                const $select = window.jQuery(el);
                if (!$select.data('select2')) {
                    $select.select2({
                        width: '100%',
                        placeholder: 'Chọn nhân viên được phân quyền',
                        closeOnSelect: false,
                    });
                }

                $select
                    .off('change.accountAssignUsers')
                    .on('change.accountAssignUsers', () => {
                        this.assignUserIds = ($select.val() ?? []).map(value => String(value));
                    });
                $select.val(this.assignUserIds).trigger('change.select2');
            },

            accountAssignedUserNames(account) {
                const users = account.assigned_users ?? account.assignedUsers ?? [];
                const names = users
                    .map(user => user?.name)
                    .filter(Boolean);

                if (names.length > 0) return names.join(', ');

                return account.user?.name ?? '— chưa phân —';
            },

            isAccountSelected(id) {
                return this.selectedAccountIds.includes(Number(id));
            },

            toggleAccountSelection(id) {
                const accountId = Number(id);
                if (this.isAccountSelected(accountId)) {
                    this.selectedAccountIds = this.selectedAccountIds.filter(selectedId => selectedId !== accountId);
                    this.$nextTick(() => this.syncSelectAllCheckbox());
                    return;
                }

                this.selectedAccountIds = [...this.selectedAccountIds, accountId];
                this.$nextTick(() => this.syncSelectAllCheckbox());
            },

            clearSelectedAccounts() {
                this.selectedAccountIds = [];
                this.assignUserIds = [];
                this.$nextTick(() => {
                    this.refreshAssignUserSelect();
                    this.syncSelectAllCheckbox();
                });
            },

            visibleAccountIds() {
                return this.accounts.map(account => Number(account.id));
            },

            areAllVisibleAccountsSelected() {
                const ids = this.visibleAccountIds();

                return ids.length > 0 && ids.every(id => this.selectedAccountIds.includes(id));
            },

            toggleAllVisibleAccounts(checked) {
                const ids = this.visibleAccountIds();

                if (checked) {
                    this.selectedAccountIds = Array.from(new Set([...this.selectedAccountIds, ...ids]));
                } else {
                    this.selectedAccountIds = this.selectedAccountIds.filter(id => !ids.includes(id));
                }

                this.$nextTick(() => this.syncSelectAllCheckbox());
            },

            syncSelectAllCheckbox() {
                const el = this.$refs.selectAllAccounts;
                if (!el) return;

                const ids = this.visibleAccountIds();
                const selectedVisibleCount = ids.filter(id => this.selectedAccountIds.includes(id)).length;
                el.indeterminate = selectedVisibleCount > 0 && selectedVisibleCount < ids.length;
            },

            async assignSelectedAccounts() {
                if (this.bulkBusy() || this.selectedAccountIds.length === 0 || this.assignUserIds.length === 0) return;

                this.transferringAccounts = true;
                this.errorMessage = '';
                this.successMessage = '';

                try {
                    const res = await fetch('/api/zalo-accounts/assign-users', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
                        body: JSON.stringify({
                            account_ids: this.selectedAccountIds,
                            user_ids: this.assignUserIds.map(id => Number(id)),
                        }),
                    });
                    const json = await res.json();

                    if (!res.ok || !json.success) {
                        this.errorMessage = json.message ?? 'Không phân quyền được tài khoản.';
                        return;
                    }

                    this.successMessage = json.message ?? 'Đã phân quyền tài khoản.';
                    this.clearSelectedAccounts();
                    this.pollDelayIndex = 0;
                    await this.loadAccounts();
                    this.schedulePoll();
                } catch (e) {
                    this.errorMessage = 'Không thể kết nối để phân quyền tài khoản.';
                } finally {
                    this.transferringAccounts = false;
                }
            },

            bulkBusy() {
                return this.transferringAccounts || this.bulkSessionBusy !== null;
            },

            async runBulkSessionAction(action) {
                if (this.bulkBusy() || this.selectedAccountIds.length === 0) return;

                const endpoint = action === 'open' ? 'open-session' : 'close-session';
                const label = action === 'open' ? 'mở phiên' : 'đóng phiên';
                const ids = [...this.selectedAccountIds];

                this.bulkSessionBusy = action;
                this.errorMessage = '';
                this.successMessage = '';

                try {
                    const results = await Promise.allSettled(
                        ids.map(id => fetch(`/api/zalo-accounts/${id}/${endpoint}`, {
                            method: 'POST',
                            headers: {Accept: 'application/json'},
                        })),
                    );
                    const failed = results.filter(result => result.status === 'rejected' || !result.value.ok).length;
                    const succeeded = ids.length - failed;

                    this.successMessage = failed === 0
                        ? `Đã yêu cầu ${label} ${succeeded} tài khoản.`
                        : `Đã yêu cầu ${label} ${succeeded}/${ids.length} tài khoản, ${failed} tài khoản lỗi.`;
                    this.pollDelayIndex = 0;
                    await this.loadAccounts();
                    this.schedulePoll();
                } catch (e) {
                    this.errorMessage = `Không thể ${label} hàng loạt.`;
                } finally {
                    this.bulkSessionBusy = null;
                }
            },

            paginationStart() {
                return Number(this.pagination.from ?? 0);
            },

            paginationEnd() {
                return Number(this.pagination.to ?? 0);
            },

            async createAccount() {
                this.creating = true;
                this.errorMessage = '';
                try {
                    const res = await fetch('/api/zalo-accounts', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
                        body: JSON.stringify({name: this.newAccountName}),
                    });
                    const json = await res.json();
                    if (!res.ok) {
                        this.errorMessage = json.message ?? 'Tạo tài khoản thất bại';
                    } else {
                        this.newAccountName = '';
                        this.pollDelayIndex = 0;
                        this.currentPage = 1;
                        await this.loadAccounts();
                        this.schedulePoll();
                    }
                } finally {
                    this.creating = false;
                }
            },

            /** Tài khoản này là Official Account? Quyết định ẩn/hiện gần hết khối nút thao tác. */
            isOaAccount(account) {
                return account?.channel === 'oa';
            },

            /** Mốc thời gian ISO của API -> giờ Việt Nam đọc được. */
            formatDateTime(value) {
                if (!value) return '';
                const date = new Date(value);

                return Number.isNaN(date.getTime()) ? '' : date.toLocaleString('vi-VN');
            },

            /**
             * Bấm "Kết nối Zalo OA": xin địa chỉ cấp quyền rồi đẩy trình duyệt sang Zalo.
             *
             * Việc chọn OA nào diễn ra trên chính màn hình của Zalo - đó là nơi duy nhất
             * biết admin sở hữu những OA nào. Xong Zalo chuyển hướng ngược về
             * /zalo-oa/oauth/callback và tài khoản đã nằm sẵn trong danh sách bên dưới.
             */
            async startOaAuthorization() {
                this.connectingOa = true;
                this.errorMessage = '';
                try {
                    const res = await fetch('/api/zalo-oa/authorize-url', {
                        method: 'POST',
                        headers: {'Accept': 'application/json'},
                    });
                    const json = await res.json();
                    if (!res.ok) {
                        this.errorMessage = json.message ?? 'Không tạo được liên kết cấp quyền';
                        return;
                    }
                    // Chuyển hướng cả trang thay vì mở cửa sổ mới: cửa sổ bật lên hay bị chặn,
                    // mà luồng này kết thúc bằng một lần quay lại đúng trang này.
                    window.location.href = json.data.url;
                } catch (e) {
                    this.errorMessage = 'Không kết nối được tới máy chủ.';
                } finally {
                    this.connectingOa = false;
                }
            },

            /**
             * Kết nối một OA bằng refresh token lấy từ API Explorer của Zalo.
             *
             * Đi đường riêng chứ không dùng `createAccount()`: luồng tạo tài khoản thường
             * gọi worker tạo profile cho zca-js, mà OA không có phiên nào trên worker.
             */
            async connectOa() {
                this.connectingOa = true;
                this.errorMessage = '';
                this.successMessage = '';
                try {
                    const res = await fetch('/api/zalo-oa/connect', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
                        body: JSON.stringify({name: this.newOaName, refresh_token: this.newOaRefreshToken}),
                    });
                    const json = await res.json();
                    if (!res.ok) {
                        this.errorMessage = json.message ?? 'Kết nối OA thất bại';
                        return;
                    }
                    this.successMessage = json.message ?? 'Đã kết nối OA';
                    this.newOaName = '';
                    this.newOaRefreshToken = '';
                    this.currentPage = 1;
                    await this.loadAccounts();
                } finally {
                    this.connectingOa = false;
                }
            },

            /** Làm mới token OA thủ công - dùng khi OA báo cần kết nối lại mà chưa tới lượt chạy định kỳ. */
            async refreshOaToken(id) {
                this.busyIds.push(id);
                this.errorMessage = '';
                this.successMessage = '';
                try {
                    const res = await fetch(`/api/zalo-accounts/${id}/oa/refresh-token`, {method: 'POST'});
                    const json = await res.json();
                    this[res.ok ? 'successMessage' : 'errorMessage'] =
                        json.message ?? (res.ok ? 'Đã làm mới token' : 'Không làm mới được token');
                    await this.loadAccounts();
                } finally {
                    this.busyIds = this.busyIds.filter(i => i !== id);
                }
            },

            /**
             * Kéo lại hội thoại/tin nhắn cũ của OA - tự chạy một lần lúc kết nối, bấm lại
             * được ở đây khi lượt đó bị lỡ hoặc muốn kéo thêm. Chạy nền ở backend nên phản
             * hồi ở đây chỉ là "đã nhận yêu cầu", tin nhắn xuất hiện dần sau đó.
             */
            async syncOaHistory(id) {
                this.busyIds.push(id);
                this.errorMessage = '';
                this.successMessage = '';
                try {
                    const res = await fetch(`/api/zalo-accounts/${id}/oa/sync-history`, {method: 'POST'});
                    const json = await res.json();
                    this[res.ok ? 'successMessage' : 'errorMessage'] =
                        json.message ?? (res.ok ? 'Đã yêu cầu đồng bộ lịch sử' : 'Không đồng bộ được lịch sử');
                } finally {
                    this.busyIds = this.busyIds.filter(i => i !== id);
                }
            },

            async openSession(id) {
                this.busyIds.push(id);
                try {
                    await fetch(`/api/zalo-accounts/${id}/open-session`, {method: 'POST'});
                    this.pollDelayIndex = 0;
                    await this.loadAccounts();
                    this.schedulePoll();
                } finally {
                    this.busyIds = this.busyIds.filter(i => i !== id);
                }
            },


            /** Nhãn tiếng Việt cho từng bước của luồng đồng bộ tin nhắn cũ. */
            get mobileSyncLabel() {
                return ({
                    idle: 'Chưa bắt đầu',
                    waiting_confirm: 'Đang chờ bạn bấm Xác nhận trên điện thoại...',
                    confirmed: 'Đã xác nhận. Zalo đang chuẩn bị dữ liệu...',
                    downloading: 'Đang tải dữ liệu về...',
                    decrypting: 'Đang giải mã...',
                    decrypt_failed: 'Không giải mã được dữ liệu',
                    importing: 'Đang nhập tin nhắn vào hệ thống...',
                    done: 'Hoàn tất',
                    error: 'Đồng bộ thất bại',
                })[this.mobileSyncStatus] ?? this.mobileSyncStatus;
            },

            /** Còn đang chạy thì không cho bấm lại - Worker sẽ trả SESSION_BUSY. */
            get mobileSyncRunning() {
                return ['waiting_confirm', 'confirmed', 'downloading', 'decrypting', 'importing']
                    .includes(this.mobileSyncStatus);
            },

            openMobileSync(id) {
                this.mobileSyncAccountId = id;
                this.mobileSyncStatus = 'idle';
                this.mobileSyncError = '';
                // Đọc trạng thái thật ngay: có thể lượt đồng bộ trước vẫn đang chạy dở.
                void this.pollMobileSync();
            },

            closeMobileSync() {
                this.mobileSyncAccountId = null;
                if (this.mobileSyncTimer) {
                    clearTimeout(this.mobileSyncTimer);
                    this.mobileSyncTimer = null;
                }
            },

            async startMobileSync(id) {
                this.mobileSyncError = '';
                try {
                    const res = await fetch(`/api/zalo-accounts/${id}/sync-mobile`, {method: 'POST'});
                    const json = await res.json().catch(() => ({}));

                    if (!res.ok) {
                        this.mobileSyncError = json.message ?? 'Không gửi được yêu cầu đồng bộ';
                        return;
                    }

                    this.mobileSyncStatus = 'waiting_confirm';
                    this.scheduleMobileSyncPoll();
                } catch (e) {
                    this.mobileSyncError = 'Không kết nối được tới máy chủ';
                }
            },

            async pollMobileSync() {
                if (!this.mobileSyncAccountId) return;

                try {
                    const res = await fetch(`/api/zalo-accounts/${this.mobileSyncAccountId}/sync-mobile`);
                    const json = await res.json().catch(() => ({}));
                    if (res.ok && json.data?.status) {
                        this.mobileSyncStatus = json.data.status;
                    }
                } catch (e) {
                    // Một nhịp poll trượt không đáng để bỏ cả luồng - thử lại ở nhịp sau.
                }

                if (this.mobileSyncRunning) this.scheduleMobileSyncPoll();
            },

            scheduleMobileSyncPoll() {
                if (this.mobileSyncTimer) clearTimeout(this.mobileSyncTimer);
                this.mobileSyncTimer = setTimeout(() => void this.pollMobileSync(), 2000);
            },

            async closeSession(id) {
                this.busyIds.push(id);
                try {
                    await fetch(`/api/zalo-accounts/${id}/close-session`, {method: 'POST'});
                    this.pollDelayIndex = 0;
                    await this.loadAccounts();
                    this.schedulePoll();
                } finally {
                    this.busyIds = this.busyIds.filter(i => i !== id);
                }
            },

            async deleteAccount(id) {
                if (!confirm('Xóa tài khoản này?')) return;
                this.busyIds.push(id);
                try {
                    await fetch(`/api/zalo-accounts/${id}`, {method: 'DELETE'});
                    this.selectedAccountIds = this.selectedAccountIds.filter(selectedId => selectedId !== Number(id));
                    this.pollDelayIndex = 0;
                    await this.loadAccounts();
                    if (this.accounts.length === 0 && this.currentPage > 1) {
                        this.currentPage -= 1;
                        await this.loadAccounts();
                    }
                    this.schedulePoll();
                } finally {
                    this.busyIds = this.busyIds.filter(i => i !== id);
                }
            },

            openPasswordLogin(id) {
                this.passwordModalAccountId = id;
                this.loginPhone = '';
                this.loginPassword = '';
                this.loginError = '';
                this.loginNeedsVerification = false;
            },

            closePasswordLogin() {
                this.passwordModalAccountId = null;
                this.loginPassword = '';
            },

            async submitPasswordLogin() {
                this.loggingIn = true;
                this.loginError = '';
                this.loginNeedsVerification = false;
                try {
                    const res = await fetch(`/api/zalo-accounts/${this.passwordModalAccountId}/login-password`, {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
                        body: JSON.stringify({
                            phone: this.loginPhone.replace(/\D/g, ''),
                            password: this.loginPassword,
                        }),
                    });
                    const json = await res.json();

                    if (!res.ok) {
                        this.loginError = json.message ?? 'Đăng nhập thất bại';
                        return;
                    }

                    const result = json.data?.result;
                    if (result === 'logged_in') {
                        this.closePasswordLogin();
                    } else if (result === 'verification_required') {
                        this.loginNeedsVerification = true;
                    } else {
                        this.loginError = 'Sai số điện thoại hoặc mật khẩu';
                    }
                } catch (e) {
                    this.loginError = 'Không thể kết nối tới máy chủ';
                } finally {
                    this.loginPassword = '';
                    this.loggingIn = false;
                    this.pollDelayIndex = 0;
                    await this.loadAccounts();
                    this.schedulePoll();
                }
            },

            screenshotUrl(id) {
                return `/api/zalo-accounts/${id}/screenshot?t=${this.refreshTick}`;
            },

            statusBadgeClass(status) {
                const map = {
                    CREATED: 'bg-secondary',
                    STARTING: 'bg-info text-dark',
                    LOGIN_REQUIRED: 'bg-warning text-dark',
                    READY: 'bg-success',
                    BUSY: 'bg-primary',
                    RELOGIN_REQUIRED: 'bg-warning text-dark',
                    DISCONNECTED: 'bg-secondary',
                    ERROR: 'bg-danger',
                    DISABLED: 'bg-dark',
                };
                return map[status] ?? 'bg-secondary';
            },
        };
    }
</script>
@endpush