@php
    // Hai nhà cung cấp đăng nhập bằng OAuth, render chung một khối để giao diện đồng nhất.
    $oauthProviders = [
        [
            'key' => 'codex',
            'title' => 'Kết nối OpenAI',
            'account' => 'ChatGPT',
            'empty' => 'Chưa kết nối tài khoản ChatGPT nào. Agent dùng provider <code>codex</code> sẽ không chạy được.',
        ],
        [
            'key' => 'claude_code',
            'title' => 'Kết nối Claude Code',
            'account' => 'Claude',
            'empty' => 'Chưa kết nối tài khoản Claude nào. Agent dùng provider <code>claude_code</code> sẽ không chạy được.',
        ],
    ];
@endphp
@extends('layouts.admin')

@section('title', 'Quản lý AI Agent')
@section('admin_shell_attributes')
x-data="agentsApp()" x-init="init()" @keydown.escape.window="connectModal.open && closeConnectModal()"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'AI Agent',
        'subtitle' => 'Tạo prompt để bot đọc hội thoại Zalo và soạn phản hồi 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="alert alert-danger admin-alert py-2" x-show="errorMessage" x-cloak x-text="errorMessage"></div>
    <div class="alert alert-success admin-alert py-2" role="status" x-show="successMessage" x-cloak x-text="successMessage"></div>

    {{-- Hai tab con: "Kết nối" quản lý tài khoản OpenAI/Claude, "Tùy chỉnh" quản lý agent.
         Tab đang mở lưu trên hash URL (#ket-noi / #tuy-chinh) để tải lại trang không bị nhảy tab. --}}
    <div class="admin-tab-bar settings-sub-tabs" role="tablist" aria-label="AI Agent">
        <button type="button" class="admin-tab-btn" role="tab"
                :class="{ active: activeTab === 'connections' }"
                :aria-selected="activeTab === 'connections'"
                @click="switchTab('connections')">
            <i class="bi bi-plug"></i>
            Kết nối
            <span class="agent-tab-count" x-text="connections.codex.length + connections.claude_code.length"></span>
        </button>
        <button type="button" class="admin-tab-btn" role="tab"
                :class="{ active: activeTab === 'agents' }"
                :aria-selected="activeTab === 'agents'"
                @click="switchTab('agents')">
            <i class="bi bi-sliders"></i>
            Tùy chỉnh
            <span class="agent-tab-count" x-text="agents.length"></span>
        </button>
    </div>

    {{-- Tab "Kết nối": mỗi nhà cung cấp một panel, màn hình rộng thì nằm cạnh nhau. --}}
    <div class="conn-providers" x-show="activeTab === 'connections'" x-cloak>
            @foreach ($oauthProviders as $provider)
            <div class="admin-panel">
                <div class="admin-panel-header">
                    <div>
                        <h2 class="admin-panel-title">{{ $provider['title'] }}</h2>
                        <div class="admin-panel-note" x-text="connections.{{ $provider['key'] }}.length + ' kết nối'"></div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary admin-btn" @click="openConnectModal('{{ $provider['key'] }}')">
                        <i class="bi bi-link-45deg"></i>
                        Kết nối
                    </button>
                </div>
                <div class="admin-panel-body">
                    <div class="admin-list conn-list">
                    <template x-for="conn in connections.{{ $provider['key'] }}" :key="conn.id">
                        <div class="conn-card">
                            <div class="conn-top">
                                <div class="conn-avatar" aria-hidden="true" x-text="connectionName(conn).charAt(0).toUpperCase()"></div>
                                <div class="conn-identity">
                                    <div class="conn-name" x-text="connectionName(conn)" :title="connectionName(conn)"></div>
                                    <div class="conn-email" x-show="conn.email" x-text="conn.email" :title="conn.email"></div>
                                </div>
                                <span class="conn-status"
                                      :class="conn.needs_reconnect || conn.status !== 'active' ? 'is-danger'
                                              : (conn.expired || isCoolingDown(conn) ? 'is-warn' : 'is-ok')"
                                      x-text="conn.needs_reconnect ? 'Cần kết nối lại'
                                              : (conn.status !== 'active' ? 'Hết hạn' : (conn.expired ? 'Cần refresh' : (isCoolingDown(conn) ? 'Tạm nghỉ' : 'Active')))"></span>
                            </div>

                            <div class="conn-plan" x-show="conn.plan_type" x-text="conn.plan_type" :title="conn.plan_type"></div>

                            {{-- Tài khoản vừa lỗi quota/máy chủ: tạm bị bỏ qua khi xoay vòng. --}}
                            <div class="conn-cooldown" x-show="isCoolingDown(conn)">
                                <i class="bi bi-hourglass-split"></i>
                                Tạm nghỉ tới <span x-text="formatDateTime(conn.cooldown_until)"></span>, xoay vòng sẽ bỏ qua tài khoản này.
                            </div>

                            {{-- Quota từng cửa sổ: phần trăm còn lại + thời điểm reset. --}}
                            <div class="quota-list">
                                <template x-for="q in (conn.quota || [])" :key="q.key">
                                    <div class="quota-row">
                                        <div class="quota-head">
                                            <span class="quota-label" x-text="q.label"></span>
                                            <span class="quota-value" :class="quotaTone(q)" x-text="q.percent_remaining + '%'"></span>
                                        </div>
                                        <div class="quota-bar" role="progressbar"
                                             :aria-label="q.label + ' còn lại'"
                                             :aria-valuenow="q.percent_remaining" aria-valuemin="0" aria-valuemax="100">
                                            <div class="quota-bar-fill" :class="quotaTone(q)" :style="'width: ' + q.percent_remaining + '%'"></div>
                                        </div>
                                        <div class="quota-sub">
                                            <span>còn lại</span>
                                            <span x-show="q.reset_at" x-text="'Reset ' + formatDateTime(q.reset_at)"></span>
                                        </div>
                                    </div>
                                </template>
                                <div class="quota-empty" x-show="!(conn.quota || []).length">
                                    Chưa có dữ liệu quota. Bấm <b>Quota</b> để kiểm tra.
                                </div>
                            </div>

                            <div class="conn-error" x-show="conn.last_error" x-text="conn.last_error"></div>

                            <div class="conn-footer">
                                <div class="conn-meta">
                                    <span x-show="conn.quota_updated_at" x-text="'Quota cập nhật ' + formatDateTime(conn.quota_updated_at)"></span>
                                    <span x-show="conn.last_used_at" x-text="'Dùng gần nhất ' + formatDateTime(conn.last_used_at)"></span>
                                </div>
                                <div class="conn-actions">
                                    <button type="button" class="conn-btn"
                                            @click="refreshConnection('{{ $provider['key'] }}', conn)"
                                            :disabled="connBusy || !conn.has_refresh_token" title="Làm mới token">
                                        <i class="bi bi-arrow-clockwise"></i><span>Làm mới</span>
                                    </button>
                                    <button type="button" class="conn-btn"
                                            @click="refreshQuota('{{ $provider['key'] }}', conn)"
                                            :disabled="connBusy || conn.needs_reconnect" title="Kiểm tra quota">
                                        <i class="bi bi-speedometer2"></i><span>Quota</span>
                                    </button>
                                    <button type="button" class="conn-btn conn-btn-danger"
                                            @click="deleteConnection('{{ $provider['key'] }}', conn)"
                                            :disabled="connBusy" title="Ngắt kết nối">
                                        <i class="bi bi-x-lg"></i><span>Ngắt</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="empty-admin small" x-show="connections.{{ $provider['key'] }}.length === 0">
                        {!! $provider['empty'] !!}
                    </div>
                    </div>
                </div>
            </div>
            @endforeach
    </div>

    {{-- Tab "Tùy chỉnh": danh sách agent bên trái, form tạo/sửa bên phải. --}}
    <div class="admin-layout" x-show="activeTab === 'agents'" x-cloak>
        <aside class="agent-side">
            <div class="admin-panel">
                <div class="admin-panel-header">
                    <div>
                        <h2 class="admin-panel-title">Danh sách agent</h2>
                        <div class="admin-panel-note" x-text="agents.filter(a => a.is_active).length + ' đang bật'"></div>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary admin-btn" @click="newAgent()">
                        <i class="bi bi-plus-lg"></i>
                        Tạo mới
                    </button>
                </div>
                <div class="admin-panel-body">
                    <div class="admin-list">
                    <template x-for="agent in agents" :key="agent.id">
                        <button type="button"
                                class="agent-item"
                                :class="{ active: selectedAgent?.id === agent.id }"
                                @click="selectAgent(agent)">
                            <div class="d-flex justify-content-between gap-2">
                                <span class="fw-semibold text-truncate" x-text="agent.name"></span>
                                <span class="badge" :class="agent.is_active ? 'text-bg-success' : 'text-bg-secondary'"
                                      x-text="agent.is_active ? 'Bật' : 'Tắt'"></span>
                            </div>
                            <div class="small text-truncate opacity-75" x-text="agent.reply_mode === 'auto_send' ? 'Tự gửi' : 'Tạo nháp'"></div>
                        </button>
                    </template>
                    <div class="empty-admin" x-show="!loading && agents.length === 0">Chưa có agent.</div>
                    <div class="connection-item text-muted" x-show="loading">
                        <span class="spinner-border spinner-border-sm me-1"></span>Đang tải
                    </div>
                    </div>
                </div>
            </div>
        </aside>

        <main>
            <div class="admin-panel">
                <div class="admin-panel-header">
                    <div>
                        <h2 class="admin-panel-title" x-text="form.id ? 'Cập nhật agent' : 'Tạo agent mới'"></h2>
                        <div class="admin-panel-note">Cấu hình provider, model, chế độ phản hồi và prompt vận hành.</div>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="agentActive" x-model="form.is_active">
                        <label class="form-check-label fw-semibold" for="agentActive">Bật agent</label>
                    </div>
                </div>
                <form @submit.prevent="saveAgent()">
                    <div class="form-section">
                        <h3 class="form-section-title">Thông tin chính</h3>
                        <div class="row g-3">
                        <div class="col-12 col-md-7">
                            <label class="form-label">Tên agent</label>
                            <input type="text" class="form-control admin-input" x-model="form.name" required maxlength="120">
                        </div>
                        <div class="col-12 col-md-5">
                            <label class="form-label">Chế độ</label>
                            <div class="mode-switch">
                                <div class="form-check">
                                    <input type="radio" id="replyDraft" value="draft" x-model="form.reply_mode">
                                    <label for="replyDraft">Tạo nháp</label>
                                </div>
                                <div class="form-check">
                                    <input type="radio" id="replyAutoSend" value="auto_send" x-model="form.reply_mode">
                                    <label for="replyAutoSend">Tự gửi</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Mô tả</label>
                            <textarea class="form-control admin-textarea" rows="4" x-model="form.description" maxlength="2000"></textarea>
                        </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <h3 class="form-section-title">Model và provider</h3>
                        <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="agentProvider">Model provider</label>
                            <select id="agentProvider" class="form-select admin-select" x-model="form.model_provider" @change="onProviderChange()">
                                <option value="openai">OpenAI API key (tính tiền theo token)</option>
                                <option value="codex">Tài khoản ChatGPT (Codex OAuth)</option>
                                <option value="claude_code">Tài khoản Claude (Claude Code OAuth)</option>
                                <option value="hybrid">Kết hợp ChatGPT và Claude Code (tự chuyển khi lỗi)</option>
                            </select>
                        </div>

                        {{-- Provider đơn: một kết nối cố định, kết nối active đầu tiên, hoặc xoay vòng tất cả. --}}
                        <template x-if="form.model_provider === 'codex' || form.model_provider === 'claude_code'">
                            <div class="col-12 col-md-6">
                                <label class="form-label" x-text="'Kết nối ' + providerMeta().account"></label>
                                <select class="form-select admin-select" x-model="form.connection_choice" @change="loadProviderModels(form.model_provider)">
                                    <option value="">Tự chọn kết nối active đầu tiên</option>
                                    <option value="__round_robin__">Tất cả tài khoản đang kích hoạt (xoay vòng + dự phòng)</option>
                                    <template x-for="conn in connections[form.model_provider]" :key="conn.id">
                                        <option :value="String(conn.id)" x-text="connectionName(conn) + (conn.status === 'active' ? '' : ' (hết hạn)')"></option>
                                    </template>
                                </select>
                            </div>
                        </template>

                        {{-- Kết hợp: provider nào được thử trước. --}}
                        <div class="col-12 col-md-6" x-show="form.model_provider === 'hybrid'">
                            <label class="form-label" for="agentHybridPrimary">Ưu tiên thử trước</label>
                            <select id="agentHybridPrimary" class="form-select admin-select" x-model="form.hybrid_primary_provider">
                                <option value="codex">ChatGPT trước, lỗi hết mới sang Claude</option>
                                <option value="claude_code">Claude trước, lỗi hết mới sang ChatGPT</option>
                            </select>
                        </div>

                        {{-- Chưa có tài khoản nào của provider đang dùng: chỉ đường sang tab Kết nối. --}}
                        <div class="col-12" x-show="missingConnectionProviders().length">
                            <div class="form-text text-warning-emphasis mt-0">
                                <i class="bi bi-exclamation-triangle"></i>
                                Chưa có tài khoản <span x-text="missingConnectionProviders().join(' / ')"></span> nào.
                                <a href="#ket-noi" class="text-decoration-none" @click.prevent="switchTab('connections')">Kết nối ngay</a>
                            </div>
                        </div>

                        {{-- Thứ tự tài khoản sẽ thử ở chế độ xoay vòng / kết hợp. --}}
                        <div class="col-12" x-show="rotationChain().length">
                            <div class="rotation-box">
                                <div class="rotation-title">
                                    <i class="bi bi-arrow-repeat"></i>
                                    Thứ tự thử khi gặp lỗi
                                </div>
                                <div class="rotation-chain">
                                    <template x-for="step in rotationChain()" :key="step.key">
                                        <span class="rotation-item">
                                            <span class="rotation-step" :class="'is-' + step.provider + (step.available ? '' : ' is-off')"
                                                  :title="step.note || step.name" x-text="step.name"></span>
                                            <i class="bi bi-chevron-right rotation-arrow" aria-hidden="true"></i>
                                        </span>
                                    </template>
                                    <span class="rotation-step is-end">Báo lỗi</span>
                                </div>
                                <div class="rotation-note">
                                    Mỗi lượt bắt đầu từ tài khoản lâu chưa dùng nhất nên token được dùng đều.
                                    Lỗi 401/403: đánh dấu hết hạn · Hết quota (429): tạm nghỉ tới lúc reset · Lỗi máy chủ/timeout: tạm nghỉ 1 phút.
                                    Tài khoản gạch mờ là đang tạm nghỉ.
                                </div>
                            </div>
                        </div>

                        {{-- OpenAI API key: nhập tên model tự do. --}}
                        <div class="col-12 col-md-6" x-show="form.model_provider === 'openai'">
                            <label class="form-label" for="agentOpenAiModel">Model</label>
                            <input id="agentOpenAiModel" type="text" class="form-control admin-input" x-model="form.model" placeholder="Theo OPENAI_MODEL">
                        </div>

                        {{-- Provider OAuth: chọn từ danh sách model của tài khoản. Kết hợp có 2 ô (ChatGPT + Claude). --}}
                        <template x-for="slot in modelSlots()" :key="slot.field">
                            <div class="col-12 col-md-6">
                                <label class="form-label d-flex justify-content-between align-items-center">
                                    <span x-text="slot.label"></span>
                                    <a href="#" class="small text-decoration-none" @click.prevent="loadProviderModels(slot.provider, true)">Tải lại</a>
                                </label>
                                <template x-if="!customModel[slot.field]">
                                    <select class="form-select admin-select" x-model="form[slot.field]"
                                            @change="form[slot.field] === '__custom__' && (customModel[slot.field] = true, form[slot.field] = '')">
                                        <option value="" x-text="'Theo ' + providers[slot.provider].modelEnv + ' (mặc định)'"></option>
                                        <template x-for="m in models[slot.provider].items" :key="m.slug">
                                            <option :value="m.slug" x-text="m.title + ' — ' + m.slug"></option>
                                        </template>
                                        <option value="__custom__">Tự nhập model khác…</option>
                                    </select>
                                </template>
                                <template x-if="customModel[slot.field]">
                                    <input type="text" class="form-control admin-input" x-model="form[slot.field]" placeholder="Nhập slug model">
                                </template>
                                <div class="form-text">
                                    <span x-show="models[slot.provider].loading">Đang tải danh sách model...</span>
                                    <span class="text-danger" x-show="models[slot.provider].error" x-text="models[slot.provider].error"></span>
                                    <span x-show="!models[slot.provider].loading && !models[slot.provider].error && !customModel[slot.field]"
                                          x-text="models[slot.provider].items.length + ' model khả dụng'"></span>
                                    <a href="#" class="text-decoration-none" x-show="customModel[slot.field]"
                                       @click.prevent="customModel[slot.field] = false; form[slot.field] = ''">Chọn lại từ danh sách</a>
                                </div>
                            </div>
                        </template>

                        <div class="col-6 col-md-3" x-show="form.model_provider !== 'codex'">
                            <label class="form-label" for="agentTemperature">Temperature</label>
                            <input id="agentTemperature" type="number" class="form-control admin-input" x-model="form.temperature" min="0"
                                   :max="form.model_provider === 'openai' ? 2 : 1" step="0.1">
                            <div class="form-text" x-show="form.model_provider === 'hybrid'">Chỉ áp dụng cho Claude.</div>
                        </div>
                        <div class="col-12 col-md-5" x-show="form.model_provider === 'codex' || form.model_provider === 'hybrid'">
                            <label class="form-label" for="agentReasoning">Reasoning effort</label>
                            <select id="agentReasoning" class="form-select admin-select" x-model="form.reasoning_effort">
                                <option value="">Theo CODEX_REASONING_EFFORT (mặc định)</option>
                                <option value="none">None — nhanh nhất, gần như không suy luận</option>
                                <option value="low">Low — nhanh, đủ dùng CSKH thường</option>
                                <option value="medium">Medium</option>
                                <option value="high">High — suy luận sâu, chậm hơn</option>
                                <option value="xhigh">XHigh — suy luận sâu nhất, chậm nhất</option>
                            </select>
                            <div class="form-text">
                                <span x-show="form.model_provider === 'hybrid'">Chỉ áp dụng cho ChatGPT.</span>
                                Model gpt-5.x không hỗ trợ "minimal".
                            </div>
                        </div>
                        <div class="col-12" x-show="modelSlots().length">
                            <div class="form-text mt-0">
                                <span x-show="form.model_provider === 'codex'">Codex bỏ qua temperature.</span>
                                Danh sách model lấy trực tiếp từ tài khoản (cache 30 phút, bấm "Tải lại" để làm mới).
                            </div>
                        </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <h3 class="form-section-title">Prompt vận hành</h3>
                        <div class="col-12">
                            <label class="form-label">Prompt</label>
                            <textarea class="form-control admin-textarea font-monospace" rows="14" x-model="form.system_prompt" required
                                      placeholder="Ví dụ: Bạn là nhân viên CSKH lịch sự. Hỏi lại khi thiếu mã đơn. Không cam kết hoàn tiền nếu chưa kiểm tra..."></textarea>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="submit" class="btn btn-primary admin-btn" :disabled="saving">
                                <span x-show="saving" class="spinner-border spinner-border-sm"></span>
                                <i class="bi bi-check2" x-show="!saving"></i>
                                Lưu agent
                            </button>
                            <button type="button" class="btn btn-outline-secondary admin-btn" @click="newAgent()" :disabled="saving">
                                <i class="bi bi-arrow-counterclockwise"></i>
                                Làm mới form
                            </button>
                            <button type="button" class="btn btn-outline-danger admin-btn ms-auto"
                                    x-show="form.id"
                                    @click="deleteAgent()"
                                    :disabled="saving">
                                <i class="bi bi-trash3"></i>
                                Xóa/Tắt agent
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </main>
    </div>

    {{-- Modal kết nối. Không dùng class .modal của Bootstrap: Alpine x-show gọi
         style.removeProperty('display') khi hiện, sẽ xoá mất display:block inline
         và để lại .modal{display:none} của Bootstrap => modal không bao giờ hiện.
         Dùng class riêng có sẵn display:flex nên x-show hoạt động đúng. --}}
    <div class="cx-overlay" x-show="connectModal.open" x-cloak @click.self="closeConnectModal()">
        <div class="cx-modal">
            <div class="cx-modal-header">
                <h5 class="cx-modal-title" x-text="providers[connectModal.provider]?.modalTitle"></h5>
                <button type="button" class="cx-close" @click="closeConnectModal()" aria-label="Đóng">&times;</button>
            </div>

            <div class="cx-modal-body">
                <div class="cx-alert" x-show="connectModal.error" x-text="connectModal.error"></div>

                {{-- Dải trạng thái: cửa sổ đăng nhập đã mở hay chưa. --}}
                <div class="cx-status">
                    <template x-if="connectModal.loadingUrl">
                        <span class="cx-spinner"></span>
                    </template>
                    <span x-show="connectModal.loadingUrl">Đang tạo link đăng nhập...</span>
                    <span x-show="!connectModal.loadingUrl && connectModal.popupOpened">
                        Đã mở cửa sổ đăng nhập — đồng ý xong hãy quay lại đây dán URL.
                    </span>
                    <span x-show="!connectModal.loadingUrl && !connectModal.popupOpened">
                        Trình duyệt chặn popup — hãy mở URL ở Bước 1 thủ công.
                    </span>
                </div>

                <div class="cx-divider"><span>HOẶC DÁN CALLBACK URL THỦ CÔNG</span></div>

                <div class="cx-step">Bước 1: Mở URL này trên trình duyệt</div>
                <div class="cx-row">
                    <input type="text" class="cx-input cx-mono" :value="connectModal.authorizeUrl" readonly
                           @focus="$event.target.select()">
                    <button type="button" class="cx-btn" @click="copyAuthorizeUrl()"
                            x-text="connectModal.copied ? 'Đã copy' : 'Copy'"></button>
                    <a class="cx-btn" :href="connectModal.authorizeUrl || '#'" target="_blank" rel="noopener"
                       @click="connectModal.popupOpened = true">Mở</a>
                </div>
                <div class="cx-hint">
                    Đăng nhập <span x-text="providers[connectModal.provider]?.account"></span> và bấm đồng ý.
                    Trình duyệt sẽ nhảy sang <code x-text="connectModal.redirectUri"></code>
                    và có thể báo lỗi không truy cập được — đó là bình thường.
                </div>

                <div class="cx-step">Bước 2: Dán URL callback vào đây</div>
                <div class="cx-hint cx-hint-top">
                    Sau khi đồng ý, copy nguyên URL trên thanh địa chỉ (có chứa <code>?code=...</code>)<span
                        x-show="connectModal.provider === 'claude_code'">, hoặc mã dạng <code>code#state</code> nếu trang hiển thị mã</span>.
                </div>
                <input type="text" class="cx-input cx-mono w-100"
                       x-model="connectModal.callbackUrl"
                       @keydown.enter.prevent="submitConnection()"
                       :placeholder="(connectModal.redirectUri || 'http://localhost') + '?code=...'">

                <div class="cx-step">Tên gợi nhớ (tùy chọn)</div>
                <input type="text" class="cx-input w-100" x-model="connectModal.label"
                       placeholder="Bỏ trống sẽ lấy email của tài khoản" maxlength="120">
            </div>

            <div class="cx-modal-footer">
                <button type="button" class="cx-btn cx-btn-primary"
                        @click="submitConnection()"
                        :disabled="connectModal.submitting || !connectModal.callbackUrl.trim()">
                    <span class="cx-spinner cx-spinner-sm" x-show="connectModal.submitting"></span>
                    Kết nối
                </button>
                <button type="button" class="cx-btn cx-btn-ghost" @click="closeConnectModal()">Hủy</button>
            </div>
        </div>
    </div>
<style>
    [x-cloak] { display: none !important; }

    /* Grid không khai báo cột sẽ nở theo dòng nowrap dài nhất => thẻ tràn khỏi panel. */
    .conn-list { grid-template-columns: minmax(0, 1fr); }

    /* Số đếm nhỏ cạnh tên tab con. */
    .agent-tab-count {
        min-width: 20px; padding: 0 6px; border-radius: 999px;
        background: var(--admin-border-soft); color: var(--admin-muted);
        font-size: 12px; line-height: 20px; text-align: center;
    }
    .admin-tab-btn.active .agent-tab-count { background: rgba(255, 255, 255, .25); color: #fff; }

    /* Tab Kết nối: hai panel cạnh nhau, dưới ~720px thì xếp dọc. */
    .conn-providers {
        display: grid; gap: 18px; align-items: start;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    }
    /* Bỏ margin-top của ".admin-panel + .admin-panel" vì panel giờ nằm trong grid. */
    .conn-providers > .admin-panel { margin-top: 0; }

    .conn-cooldown {
        margin-top: .55rem; padding: .35rem .55rem; border-radius: 6px;
        background: #fffbeb; color: #92400e; font-size: .76rem;
    }

    /* Chuỗi thứ tự tài khoản ở chế độ xoay vòng / kết hợp. */
    .rotation-box {
        padding: 12px 14px; border: 1px solid var(--admin-border);
        border-radius: 10px; background: #fbfcfe;
    }
    .rotation-title {
        display: flex; align-items: center; gap: .4rem;
        margin-bottom: .55rem; font-size: .85rem; font-weight: 700;
    }
    .rotation-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
    .rotation-item { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: 100%; }
    .rotation-step {
        max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        padding: .2rem .6rem; border: 1px solid transparent; border-radius: 999px;
        font-size: .76rem; font-weight: 600;
    }
    .rotation-step.is-codex { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
    .rotation-step.is-claude_code { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
    .rotation-step.is-off { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
    .rotation-step.is-end { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
    .rotation-arrow { color: var(--admin-muted); font-size: .7rem; }
    .rotation-note { margin-top: .55rem; font-size: .74rem; color: var(--admin-muted); }

    .conn-card {
        min-width: 0; padding: 14px;
        background: #fff; border: 1px solid var(--admin-border); border-radius: 10px;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .conn-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }

    .conn-top { display: flex; align-items: center; gap: .65rem; min-width: 0; }
    .conn-avatar {
        flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
        display: grid; place-items: center;
        background: var(--admin-accent-soft); color: var(--admin-accent-strong);
        font-weight: 800; font-size: .95rem;
    }
    .conn-identity { flex: 1; min-width: 0; }
    .conn-name, .conn-email, .conn-plan {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .conn-name { font-weight: 700; line-height: 1.25; }
    .conn-email { font-size: .78rem; color: var(--admin-muted); }

    .conn-status {
        flex-shrink: 0; padding: .15rem .55rem; border-radius: 999px;
        font-size: .72rem; font-weight: 700; white-space: nowrap;
    }
    .conn-status.is-ok { background: #dcfce7; color: #166534; }
    .conn-status.is-warn { background: #fef3c7; color: #92400e; }
    .conn-status.is-danger { background: #fee2e2; color: #991b1b; }

    .conn-plan {
        display: inline-block; max-width: 100%; margin-top: .55rem;
        padding: .1rem .5rem; border-radius: 6px;
        background: #f1f5f9; color: #475569; font-size: .72rem;
    }

    .quota-list {
        display: grid; gap: .6rem; margin-top: .7rem; padding-top: .7rem;
        border-top: 1px dashed var(--admin-border);
    }
    .quota-head {
        display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
        font-size: .8rem;
    }
    .quota-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .quota-value { flex-shrink: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
    .quota-bar {
        height: 6px; margin-top: .25rem; overflow: hidden;
        background: #eef2f6; border-radius: 999px;
    }
    .quota-bar-fill { height: 100%; min-width: 2px; border-radius: 999px; transition: width .3s ease; }
    .quota-sub {
        display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
        margin-top: .15rem; font-size: .72rem; color: var(--admin-muted);
    }
    .quota-empty { font-size: .78rem; color: var(--admin-muted); }
    .quota-ok { color: #15803d; }
    .quota-warn { color: #b45309; }
    .quota-low { color: #b91c1c; }

    .conn-error {
        margin-top: .6rem; padding: .4rem .55rem; border-radius: 6px;
        background: #fef2f2; color: #b91c1c; font-size: .76rem;
        overflow-wrap: anywhere;
    }

    .conn-footer {
        margin-top: .7rem; padding-top: .6rem;
        border-top: 1px solid var(--admin-border-soft);
    }
    .conn-meta {
        display: flex; flex-wrap: wrap; gap: .1rem .75rem;
        font-size: .72rem; color: var(--admin-muted);
    }
    .conn-meta:empty { display: none; }
    .conn-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
    .conn-btn {
        display: inline-flex; align-items: center; gap: .3rem;
        padding: .3rem .6rem; border-radius: 7px;
        background: #fff; border: 1px solid var(--admin-border); color: #475569;
        font-size: .78rem; font-weight: 600; line-height: 1.2; cursor: pointer;
    }
    .conn-btn:hover:not(:disabled) { background: #f1f5f9; color: var(--admin-text); }
    .conn-btn:disabled { opacity: .45; cursor: not-allowed; }
    .conn-btn-danger { margin-left: auto; color: #b91c1c; border-color: #fecaca; }
    .conn-btn-danger:hover:not(:disabled) { background: #fef2f2; color: #991b1b; }
    .quota-bar-fill.quota-ok { background: #22c55e; }
    .quota-bar-fill.quota-warn { background: #f59e0b; }
    .quota-bar-fill.quota-low { background: #ef4444; }

    .cx-overlay {
        position: fixed; inset: 0; z-index: 1080;
        display: flex; align-items: center; justify-content: center;
        padding: 1rem; background: rgba(23, 32, 42, .58);
    }
    .cx-modal {
        width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto;
        background: #fff; color: var(--admin-text); border: 1px solid var(--admin-border);
        border-radius: 8px; box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
    }
    .cx-modal-header {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; padding: 1rem 1.125rem;
        background: #fbfcfe; border-bottom: 1px solid var(--admin-border-soft);
    }
    .cx-modal-title { margin: 0; font-size: 1.15rem; font-weight: 800; }
    .cx-close {
        background: none; border: 0; color: var(--admin-muted); font-size: 1.6rem;
        line-height: 1; cursor: pointer; padding: 0 .25rem;
    }
    .cx-close:hover { color: var(--admin-text); }
    .cx-modal-body { padding: 1.125rem; }
    .cx-modal-footer {
        display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
        padding: 1rem 1.125rem; background: #fbfcfe;
        border-top: 1px solid var(--admin-border-soft);
    }

    .cx-alert {
        background: var(--admin-danger-soft); border: 1px solid #fecdd3;
        color: #842029; border-radius: 8px; padding: .6rem .85rem; margin-bottom: 1rem;
    }
    .cx-status {
        display: flex; align-items: center; gap: .65rem; min-height: 56px;
        padding: .9rem 1.1rem; margin-bottom: 1.25rem;
        background: var(--admin-accent-soft); border: 1px solid #bfdbfe; border-radius: 8px;
        color: var(--admin-accent-strong); font-size: .95rem;
    }
    .cx-divider {
        display: flex; align-items: center; gap: .9rem;
        margin: 0 0 1.25rem; color: var(--admin-muted);
        font-size: .78rem; letter-spacing: .08em;
    }
    .cx-divider::before, .cx-divider::after {
        content: ''; flex: 1; height: 1px; background: var(--admin-border);
    }

    .cx-step { font-size: 1.02rem; font-weight: 800; margin: 1.25rem 0 .5rem; }
    .cx-hint { color: var(--admin-muted); font-size: .85rem; margin-top: .5rem; }
    .cx-hint-top { margin: -.25rem 0 .5rem; }
    .cx-hint code { color: #39485a; }
    .cx-row { display: flex; gap: .6rem; align-items: stretch; }
    .cx-row .cx-input { flex: 1; min-width: 0; }

    .cx-input {
        background: #fff; border: 1px solid #cfd8e3; color: var(--admin-text);
        border-radius: 12px; padding: .7rem .9rem; font-size: .95rem;
    }
    .cx-input::placeholder { color: #94a3b8; }
    .cx-input:focus {
        outline: none; border-color: #8bbcff;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
    }
    .cx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; }

    .cx-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
        background: #fff; border: 1px solid var(--admin-border); color: var(--admin-text);
        border-radius: 12px; padding: .7rem 1.1rem; font-size: .95rem;
        text-decoration: none; cursor: pointer; white-space: nowrap;
        font-weight: 700;
    }
    .cx-btn:hover { background: #eef5ff; color: var(--admin-accent-strong); }
    .cx-btn:disabled { opacity: .45; cursor: not-allowed; }
    .cx-btn-primary {
        background: var(--admin-accent); border-color: var(--admin-accent);
        color: #fff; box-shadow: 0 10px 22px rgba(13, 110, 253, .22);
    }
    .cx-btn-primary:hover { background: #0b5ed7; color: #fff; }
    .cx-btn-ghost { background: none; border-color: transparent; }
    .cx-btn-ghost:hover { background: #eef5ff; }

    .cx-spinner {
        width: 20px; height: 20px; flex-shrink: 0;
        border: 2px solid rgba(13, 110, 253, .25); border-top-color: var(--admin-accent);
        border-radius: 50%; animation: cx-spin .7s linear infinite;
    }
    .cx-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
    @keyframes cx-spin { to { transform: rotate(360deg); } }
</style>
@endsection

@push('scripts')
<script>
function agentsApp() {
    return {
        // Cấu hình từng provider OAuth: endpoint API, cột connection trên agent, nhãn hiển thị.
        providers: {
            codex: {
                api: '/api/codex-connections',
                connField: 'codex_connection_id',
                account: 'ChatGPT',
                modelEnv: 'CODEX_MODEL',
                modalTitle: 'Kết nối OpenAI Codex',
            },
            claude_code: {
                api: '/api/claude-code-connections',
                connField: 'claude_code_connection_id',
                account: 'Claude',
                modelEnv: 'CLAUDE_CODE_MODEL',
                modalTitle: 'Kết nối Claude Code',
            },
        },
        // Hash trên URL tương ứng với từng tab con.
        tabHashes: { connections: 'ket-noi', agents: 'tuy-chinh' },
        activeTab: 'agents',
        agents: [],
        connections: { codex: [], claude_code: [] },
        selectedAgent: null,
        loading: false,
        saving: false,
        connBusy: false,
        errorMessage: '',
        successMessage: '',
        form: {},
        // Danh sách model theo từng provider OAuth (chế độ kết hợp cần tải cả hai).
        models: {
            codex: { items: [], loading: false, error: '' },
            claude_code: { items: [], loading: false, error: '' },
        },
        // Ô model nào đang ở chế độ tự nhập thay vì chọn từ danh sách.
        customModel: { model: false, claude_code_model: false },
        connectModal: {
            open: false,
            provider: 'codex',
            loadingUrl: false,
            submitting: false,
            popupOpened: false,
            authorizeUrl: '',
            redirectUri: '',
            callbackUrl: '',
            label: '',
            error: '',
            copied: false,
        },

        init() {
            // Mở đúng tab theo hash (#ket-noi / #tuy-chinh); không có hash thì vào "Tùy chỉnh".
            const hash = window.location.hash.replace('#', '');
            const tab = Object.keys(this.tabHashes).find(key => this.tabHashes[key] === hash);
            if (tab) this.activeTab = tab;

            this.newAgent();
            this.loadAgents();
            // Model phụ thuộc kết nối nên tải lại sau khi có danh sách kết nối.
            this.loadConnections().then(() => this.loadProviderModels());
        },

        emptyForm() {
            return {
                id: null,
                name: '',
                description: '',
                system_prompt: '',
                model_provider: 'openai',
                model: '',
                claude_code_model: '',
                codex_connection_id: '',
                claude_code_connection_id: '',
                // '' = kết nối active đầu tiên, '__round_robin__' = xoay vòng tất cả, số = kết nối cố định.
                connection_choice: '',
                hybrid_primary_provider: 'codex',
                temperature: '',
                reasoning_effort: '',
                reply_mode: 'draft',
                is_active: true,
            };
        },

        /**
         * Chuyển tab con và ghi hash lên URL (replaceState để không sinh thêm lịch sử trình duyệt).
         */
        switchTab(tab) {
            this.activeTab = tab;
            this.errorMessage = '';
            this.successMessage = '';
            history.replaceState(null, '', '#' + this.tabHashes[tab]);
        },

        isOAuthProvider() {
            return Boolean(this.providers[this.form.model_provider]);
        },

        /**
         * Các ô chọn model cần hiện: kết hợp cần một ô cho ChatGPT (cột model) và một ô cho Claude.
         */
        modelSlots() {
            const provider = this.form.model_provider;
            if (provider === 'hybrid') {
                return [
                    { provider: 'codex', field: 'model', label: 'Model ChatGPT' },
                    { provider: 'claude_code', field: 'claude_code_model', label: 'Model Claude' },
                ];
            }
            return this.providers[provider] ? [{ provider, field: 'model', label: 'Model' }] : [];
        },

        /**
         * Giá trị ô "Kết nối" suy ra từ agent đã lưu.
         */
        connectionChoiceOf(agent) {
            if (agent.connection_strategy === 'round_robin') return '__round_robin__';
            const meta = this.providers[agent.model_provider];
            return meta && agent[meta.connField] ? String(agent[meta.connField]) : '';
        },

        /**
         * Đổi provider: bỏ chế độ tự nhập, bỏ kết nối cố định của provider cũ rồi tải lại model.
         */
        onProviderChange() {
            this.resetCustomModel();
            if (/^\d+$/.test(String(this.form.connection_choice))) {
                this.form.connection_choice = '';
            }
            this.loadProviderModels();
        },

        resetCustomModel() {
            this.customModel = { model: false, claude_code_model: false };
        },

        /**
         * Tài khoản đang tạm nghỉ sau lỗi quota/máy chủ.
         */
        isCoolingDown(conn) {
            return Boolean(conn.cooldown_until) && Date.parse(conn.cooldown_until) > Date.now();
        },

        /**
         * Tên các provider agent đang dùng mà chưa có tài khoản nào.
         */
        missingConnectionProviders() {
            const provider = this.form.model_provider;
            const used = provider === 'hybrid' ? ['codex', 'claude_code'] : (this.providers[provider] ? [provider] : []);
            return used.filter(p => this.connections[p].length === 0).map(p => this.providers[p].account);
        },

        /**
         * Thứ tự tài khoản sẽ thử, mô phỏng đúng cách backend chọn: tài khoản đang kích hoạt,
         * lâu chưa dùng nhất đứng trước. Rỗng nếu agent không ở chế độ xoay vòng/kết hợp.
         */
        rotationChain() {
            const provider = this.form.model_provider;
            let order = [];
            if (provider === 'hybrid') {
                order = this.form.hybrid_primary_provider === 'claude_code' ? ['claude_code', 'codex'] : ['codex', 'claude_code'];
            } else if (this.providers[provider] && this.form.connection_choice === '__round_robin__') {
                order = [provider];
            }

            const steps = [];
            order.forEach(p => {
                const meta = this.providers[p];
                const usable = this.connections[p]
                    .filter(c => c.status === 'active' && !c.needs_reconnect)
                    .sort((a, b) => (a.last_used_at ? Date.parse(a.last_used_at) : 0) - (b.last_used_at ? Date.parse(b.last_used_at) : 0) || a.id - b.id);

                if (usable.length === 0) {
                    steps.push({ key: `${p}-none`, provider: p, name: `Chưa có tài khoản ${meta.account}`, available: false, note: '' });
                }
                usable.forEach(c => steps.push({
                    key: `${p}-${c.id}`,
                    provider: p,
                    name: `${meta.account} · ${this.connectionName(c)}`,
                    available: !this.isCoolingDown(c),
                    note: this.isCoolingDown(c) ? `Tạm nghỉ tới ${this.formatDateTime(c.cooldown_until)}` : '',
                }));
            });

            return steps;
        },

        providerMeta() {
            return this.providers[this.form.model_provider] ?? {};
        },

        connectionName(conn) {
            return conn.label || conn.email || ('Connection #' + conn.id);
        },

        quotaTone(quota) {
            if (quota.percent_remaining <= 10) return 'quota-low';
            if (quota.percent_remaining <= 30) return 'quota-warn';
            return 'quota-ok';
        },

        formatDateTime(iso) {
            const date = new Date(iso);
            if (Number.isNaN(date.getTime())) return iso;
            return date.toLocaleString('vi-VN', {
                hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit',
            });
        },

        newAgent() {
            this.selectedAgent = null;
            this.form = this.emptyForm();
            this.resetCustomModel();
            this.errorMessage = '';
            this.successMessage = '';
        },

        selectAgent(agent) {
            this.selectedAgent = agent;
            this.form = {
                id: agent.id,
                name: agent.name ?? '',
                description: agent.description ?? '',
                system_prompt: agent.system_prompt ?? '',
                model_provider: agent.model_provider ?? 'openai',
                model: agent.model ?? '',
                codex_connection_id: agent.codex_connection_id ?? '',
                claude_code_connection_id: agent.claude_code_connection_id ?? '',
                claude_code_model: agent.claude_code_model ?? '',
                connection_choice: this.connectionChoiceOf(agent),
                hybrid_primary_provider: agent.hybrid_primary_provider ?? 'codex',
                temperature: agent.temperature ?? '',
                reasoning_effort: agent.reasoning_effort ?? '',
                reply_mode: agent.reply_mode ?? 'draft',
                is_active: Boolean(agent.is_active),
            };
            this.resetCustomModel();
            this.errorMessage = '';
            this.successMessage = '';
            this.loadProviderModels();
        },

        async loadAgents() {
            this.loading = true;
            try {
                const json = await this.apiJson('/api/ai-agents');
                if (!json.success) {
                    this.errorMessage = this.humanError(json, 'Không tải được danh sách agent.');
                    return;
                }
                this.agents = json.data ?? [];
            } catch (e) {
                this.errorMessage = 'Không thể kết nối để tải agent.';
            } finally {
                this.loading = false;
            }
        },

        async saveAgent() {
            this.saving = true;
            this.errorMessage = '';
            this.successMessage = '';
            try {
                const payload = { ...this.form };
                delete payload.id;
                payload.temperature = payload.temperature === '' ? null : Number(payload.temperature);
                payload.reasoning_effort = payload.reasoning_effort || null;
                // '__custom__' chỉ là cờ của select, không phải model thật.
                payload.model = (payload.model && payload.model !== '__custom__') ? payload.model : null;
                payload.model_provider = payload.model_provider || 'openai';
                payload.codex_connection_id = payload.codex_connection_id ? Number(payload.codex_connection_id) : null;
                payload.claude_code_connection_id = payload.claude_code_connection_id ? Number(payload.claude_code_connection_id) : null;

                // Đổi lựa chọn trong ô "Kết nối" thành cột thật của agent.
                const choice = String(payload.connection_choice ?? '');
                delete payload.connection_choice;
                payload.connection_strategy = null;
                if (payload.model_provider === 'hybrid') {
                    payload.connection_strategy = 'round_robin';
                } else if (this.providers[payload.model_provider]) {
                    const field = this.providers[payload.model_provider].connField;
                    if (choice === '__round_robin__') {
                        payload.connection_strategy = 'round_robin';
                        payload[field] = null;
                    } else {
                        payload[field] = choice ? Number(choice) : null;
                    }
                }

                // Model Claude và provider ưu tiên chỉ có nghĩa ở chế độ kết hợp.
                const isHybrid = payload.model_provider === 'hybrid';
                payload.claude_code_model = isHybrid && payload.claude_code_model && payload.claude_code_model !== '__custom__'
                    ? payload.claude_code_model
                    : null;
                payload.hybrid_primary_provider = isHybrid ? (payload.hybrid_primary_provider || 'codex') : null;

                const url = this.form.id ? `/api/ai-agents/${this.form.id}` : '/api/ai-agents';
                const method = this.form.id ? 'PUT' : 'POST';
                const json = await this.apiJson(url, {
                    method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
                if (!json.success) {
                    this.errorMessage = this.humanError(json, 'Không lưu được agent.');
                    return;
                }

                await this.loadAgents();
                this.selectAgent(json.data);
                this.notifySuccess(json.message || 'Đã lưu agent.');
            } catch (e) {
                this.errorMessage = 'Không thể kết nối để lưu agent.';
            } finally {
                this.saving = false;
            }
        },

        async deleteAgent() {
            if (!this.form.id || !confirm('Xóa agent này? Nếu đã có lịch sử chạy, hệ thống sẽ tắt agent thay vì xóa.')) return;
            this.saving = true;
            this.errorMessage = '';
            this.successMessage = '';
            try {
                const json = await this.apiJson(`/api/ai-agents/${this.form.id}`, {
                    method: 'DELETE',
                });
                if (!json.success) {
                    this.errorMessage = this.humanError(json, 'Không xóa được agent.');
                    return;
                }
                await this.loadAgents();
                this.newAgent();
                this.notifySuccess(json.message || 'Đã xử lý agent.');
            } catch (e) {
                this.errorMessage = 'Không thể kết nối để xóa agent.';
            } finally {
                this.saving = false;
            }
        },

        notifySuccess(message) {
            this.successMessage = message;
            setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 0);
        },

        /**
         * Tải danh sách model cho các ô model đang hiện (chế độ kết hợp tải cả ChatGPT lẫn Claude).
         *
         * @param {string|null} onlyProvider Chỉ tải cho provider này; null = mọi ô model đang hiện.
         * @param {boolean} force Bỏ cache 30 phút phía server.
         */
        async loadProviderModels(onlyProvider = null, force = false) {
            const slots = this.modelSlots().filter(slot => !onlyProvider || slot.provider === onlyProvider);
            const providers = [...new Set(slots.map(slot => slot.provider))];

            await Promise.all(providers.map(async (provider) => {
                const meta = this.providers[provider];
                const state = this.models[provider];
                // Provider đơn chọn kết nối cụ thể thì lấy model của kết nối đó, còn lại lấy kết nối active đầu tiên.
                const chosenId = this.form.model_provider === provider && /^\d+$/.test(String(this.form.connection_choice))
                    ? this.form.connection_choice
                    : null;
                const connId = chosenId || this.connections[provider].find(c => c.status === 'active')?.id;

                if (!connId) {
                    state.items = [];
                    state.error = `Chưa có kết nối ${meta.account} nào để lấy model.`;
                    return;
                }

                state.loading = true;
                state.error = '';
                try {
                    const json = await this.apiJson(`${meta.api}/${connId}/models${force ? '?refresh=1' : ''}`);
                    if (!json.success) {
                        state.items = [];
                        state.error = this.humanError(json, 'Không tải được danh sách model.');
                        return;
                    }
                    state.items = json.data ?? [];

                    // Model đang lưu không có trong danh sách thì chuyển sang ô tự nhập
                    // để select không ghi đè về rỗng.
                    slots.filter(slot => slot.provider === provider).forEach(slot => {
                        const value = this.form[slot.field];
                        if (value && !state.items.some(m => m.slug === value)) {
                            this.customModel[slot.field] = true;
                        }
                    });
                } catch (e) {
                    state.items = [];
                    state.error = 'Không thể kết nối để tải model.';
                } finally {
                    state.loading = false;
                }
            }));
        },

        async loadConnections() {
            // Một provider lỗi không được chặn provider còn lại hay cả trang agent.
            await Promise.all(Object.entries(this.providers).map(async ([provider, meta]) => {
                try {
                    const json = await this.apiJson(meta.api);
                    if (json.success) this.connections[provider] = json.data ?? [];
                } catch (e) {
                    // Bỏ qua.
                }
            }));
        },

        async openConnectModal(provider) {
            const meta = this.providers[provider];
            this.connectModal = {
                open: true,
                provider,
                loadingUrl: true,
                submitting: false,
                popupOpened: false,
                authorizeUrl: '',
                redirectUri: '',
                callbackUrl: '',
                label: '',
                error: '',
                copied: false,
            };

            // Mở popup rỗng ngay trong cú click rồi mới trỏ URL vào sau khi fetch xong.
            // Nếu gọi window.open sau await, trình duyệt coi là popup tự phát và chặn.
            const popup = window.open('', `${provider}-auth`, 'width=620,height=760');

            try {
                const json = await this.apiJson(`${meta.api}/authorize-url`, {
                    method: 'POST',
                });
                if (!json.success) {
                    this.connectModal.error = this.humanError(json, 'Không tạo được link đăng nhập.');
                    if (popup) popup.close();
                    return;
                }

                this.connectModal.authorizeUrl = json.data.url;
                this.connectModal.redirectUri = json.data.redirect_uri ?? '';
                if (popup) {
                    popup.location = json.data.url;
                    this.connectModal.popupOpened = true;
                }
            } catch (e) {
                this.connectModal.error = 'Không thể kết nối tới server.';
                if (popup) popup.close();
            } finally {
                this.connectModal.loadingUrl = false;
            }
        },

        closeConnectModal() {
            this.connectModal.open = false;
        },

        async copyAuthorizeUrl() {
            try {
                await navigator.clipboard.writeText(this.connectModal.authorizeUrl);
                this.connectModal.copied = true;
                setTimeout(() => { this.connectModal.copied = false; }, 2000);
            } catch (e) {
                this.connectModal.error = 'Trình duyệt chặn copy, hãy chọn thủ công trong ô URL.';
            }
        },

        async submitConnection() {
            const callbackUrl = this.connectModal.callbackUrl.trim();
            if (!callbackUrl) return;

            const meta = this.providers[this.connectModal.provider];
            this.connectModal.submitting = true;
            this.connectModal.error = '';
            try {
                const json = await this.apiJson(meta.api, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        callback_url: callbackUrl,
                        label: this.connectModal.label || null,
                    }),
                });
                if (!json.success) {
                    this.connectModal.error = this.humanError(json, 'Kết nối thất bại.');
                    return;
                }

                this.successMessage = json.message || `Đã kết nối tài khoản ${meta.account}.`;
                this.connectModal.open = false;
                await this.loadConnections();
            } catch (e) {
                this.connectModal.error = 'Không thể kết nối tới server.';
            } finally {
                this.connectModal.submitting = false;
            }
        },

        /**
         * Gọi một action POST trên connection (refresh token / quota) rồi tải lại danh sách.
         */
        async runConnectionAction(provider, conn, action, fallbackError, networkError) {
            this.connBusy = true;
            this.errorMessage = '';
            this.successMessage = '';
            try {
                const json = await this.apiJson(`${this.providers[provider].api}/${conn.id}/${action}`, {
                    method: 'POST',
                });
                if (!json.success) {
                    this.errorMessage = this.humanError(json, fallbackError);
                } else {
                    this.successMessage = json.message || 'Đã cập nhật.';
                }
                // Tải lại cả khi lỗi: backend có thể đã đổi trạng thái/last_error của connection.
                await this.loadConnections();
            } catch (e) {
                this.errorMessage = networkError;
            } finally {
                this.connBusy = false;
            }
        },

        refreshConnection(provider, conn) {
            return this.runConnectionAction(provider, conn, 'refresh', 'Không làm mới được token.', 'Không thể kết nối để làm mới token.');
        },

        refreshQuota(provider, conn) {
            return this.runConnectionAction(provider, conn, 'quota', 'Không lấy được quota.', 'Không thể kết nối để lấy quota.');
        },

        async deleteConnection(provider, conn) {
            const meta = this.providers[provider];
            if (!confirm(`Ngắt kết nối tài khoản ${meta.account} này?`)) return;
            this.connBusy = true;
            this.errorMessage = '';
            this.successMessage = '';
            try {
                const json = await this.apiJson(`${meta.api}/${conn.id}`, {
                    method: 'DELETE',
                });
                if (!json.success) {
                    this.errorMessage = this.humanError(json, 'Không ngắt được kết nối.');
                    return;
                }
                this.successMessage = json.message || 'Đã ngắt kết nối.';
                await this.loadConnections();
                await this.loadAgents();
            } catch (e) {
                this.errorMessage = 'Không thể kết nối để ngắt.';
            } finally {
                this.connBusy = false;
            }
        },

        async apiJson(url, options = {}) {
            const headers = {
                Accept: 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                ...(options.headers || {}),
            };
            const res = await fetch(url, {
                credentials: 'same-origin',
                ...options,
                headers,
            });
            const text = await res.text();
            let json = null;

            if (text) {
                try {
                    json = JSON.parse(text);
                } catch (e) {
                    json = null;
                }
            }

            if (json) {
                if (!res.ok && json.success === undefined) json.success = false;
                return json;
            }

            if (res.status === 401) {
                return { success: false, message: 'Phiên đăng nhập đã hết hạn. Hãy đăng nhập lại rồi lưu agent.' };
            }
            if (res.status === 403) {
                return { success: false, message: 'Chỉ quản trị viên mới được tạo hoặc sửa agent.' };
            }
            if (res.status >= 500) {
                return { success: false, message: 'Server đang lỗi khi xử lý agent. Kiểm tra MySQL/migration và log Laravel.' };
            }

            return { success: false, message: `API trả về dữ liệu không hợp lệ (HTTP ${res.status}).` };
        },

        humanError(json, fallback) {
            if (typeof json?.message === 'string' && json.message.trim()) return json.message;
            if (typeof json?.error === 'string' && json.error.trim()) return json.error;
            return fallback;
        },
    };
}
</script>
@endpush