@extends('layouts.admin')

@section('title', 'Gửi tin hàng loạt')
@section('admin_shell_attributes')
x-data="spamCampaignsApp()" x-init="init()"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'mark' => '📣',
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Gửi tin hàng loạt',
        'subtitle' => 'Chọn tài khoản Zalo/OA, lọc hội thoại theo thẻ rồi gửi theo nhịp an toàn.',
    ])

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

    <div class="alert alert-danger admin-alert" x-show="errorMessage" x-cloak x-text="errorMessage"></div>
    <div class="alert alert-success admin-alert" role="status" x-show="successMessage" x-cloak x-text="successMessage"></div>

    <div class="admin-card">
        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between mb-3">
            <div class="d-flex gap-2 align-items-center">
                <select class="form-select admin-select" style="width: auto" x-model="filterStatus" @change="load()">
                    <option value="">Mọi trạng thái</option>
                    <template x-for="[value, label] in Object.entries(statusLabels)" :key="value">
                        <option :value="value" x-text="label"></option>
                    </template>
                </select>
                <button type="button" class="btn btn-outline-secondary" @click="load()" :disabled="loading">
                    <i class="bi bi-arrow-clockwise"></i> Tải lại
                </button>
            </div>
            <button type="button" class="btn btn-primary" @click="openForm()">
                <i class="bi bi-plus-lg"></i> Tạo chiến dịch
            </button>
        </div>

        <div class="table-responsive">
            <table class="table admin-table align-middle">
                <thead>
                    <tr>
                        <th>Chiến dịch</th>
                        <th>Trạng thái</th>
                        <th style="min-width: 200px">Tiến độ</th>
                        <th class="text-end">Thành công</th>
                        <th class="text-end">Lỗi</th>
                        <th class="text-end">Bỏ qua</th>
                        <th class="text-end">Thao tác</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="campaign in campaigns" :key="campaign.id">
                        <tr>
                            <td>
                                <div class="fw-semibold" x-text="campaign.name"></div>
                                <div class="small text-muted text-truncate" style="max-width: 320px" x-text="campaign.content"></div>
                            </td>
                            <td>
                                <span class="badge" :class="statusBadgeClass(campaign.status)" x-text="campaign.statusLabel"></span>
                                <div class="small text-danger mt-1" x-show="campaign.lastError" x-text="campaign.lastError"></div>
                            </td>
                            <td>
                                <div class="progress" style="height: 8px">
                                    <div class="progress-bar" :style="{ width: campaign.progressPercent + '%' }"></div>
                                </div>
                                <div class="small text-muted mt-1">
                                    <span x-text="campaign.sentCount + campaign.failedCount + campaign.skippedCount"></span>
                                    / <span x-text="campaign.totalCount"></span>
                                </div>
                            </td>
                            <td class="text-end fw-semibold text-success" x-text="campaign.sentCount"></td>
                            <td class="text-end" :class="campaign.failedCount > 0 ? 'text-danger fw-semibold' : 'text-muted'" x-text="campaign.failedCount"></td>
                            <td class="text-end text-muted" x-text="campaign.skippedCount"></td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary" @click="openProgress(campaign)" title="Chi tiết">
                                        <i class="bi bi-list-check"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-success" x-show="canStart(campaign)"
                                            @click="startCampaign(campaign)" title="Bắt đầu gửi">
                                        <i class="bi bi-play-fill"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-warning" x-show="campaign.status === 'running'"
                                            @click="pauseCampaign(campaign)" title="Tạm dừng">
                                        <i class="bi bi-pause-fill"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-danger" x-show="!isFinished(campaign)"
                                            @click="cancelTarget = campaign" title="Huỷ chiến dịch">
                                        <i class="bi bi-slash-circle"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" x-show="campaign.status === 'draft'"
                                            @click="openForm(campaign)" title="Sửa">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-danger" x-show="campaign.status !== 'running'"
                                            @click="deleteTarget = campaign" title="Xoá">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="!loading && campaigns.length === 0">
                        <td colspan="7" class="text-center text-muted py-4">Chưa có chiến dịch nào.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Form tạo/sửa. Modal tự dựng bằng x-show, KHÔNG dùng JS modal của Bootstrap - xem
         ghi chú ở `settings/index.blade.php`. --}}
    <template x-if="formOpen">
        <div class="modal d-block" style="background: rgba(15,23,42,.45); overflow-y: auto" @click="closeForm()">
            <div class="modal-dialog modal-lg modal-dialog-centered" @click.stop>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" x-text="editing ? 'Sửa chiến dịch' : 'Tạo chiến dịch'"></h5>
                    </div>
                    <form @submit.prevent="submit()">
                        <div class="modal-body">
                            <label class="form-label admin-form-label" for="campaign-name">Tên chiến dịch</label>
                            <input id="campaign-name" type="text" class="form-control admin-input mb-3" x-model="form.name" maxlength="150" required>

                            <label class="form-label admin-form-label">Gửi bằng tài khoản</label>
                            <div class="border rounded p-2 mb-3" style="max-height: 160px; overflow-y: auto">
                                <template x-for="account in options.accounts" :key="account.id">
                                    <label class="d-flex align-items-center gap-2 py-1">
                                        <input type="checkbox" class="form-check-input m-0" :value="account.id"
                                               :checked="form.zalo_account_ids.includes(account.id)"
                                               @change="toggleInArray(form.zalo_account_ids, account.id)">
                                        <span x-text="account.name"></span>
                                        <span class="badge" :class="account.channel === 'oa' ? 'bg-primary' : 'bg-secondary'" x-text="account.channelLabel"></span>
                                        <span class="small text-muted" x-text="account.statusLabel"></span>
                                    </label>
                                </template>
                                <div class="small text-muted" x-show="options.accounts.length === 0">
                                    Đơn vị của bạn chưa có tài khoản Zalo nào đang bật.
                                </div>
                            </div>

                            <label class="form-label admin-form-label">Lọc theo thẻ hội thoại</label>
                            <div class="d-flex flex-wrap gap-3 mb-2">
                                <label class="d-flex align-items-center gap-1 small">
                                    <input type="radio" class="form-check-input m-0" value="include" x-model="form.tag_mode">
                                    Chỉ gửi cho thẻ đã chọn
                                </label>
                                <label class="d-flex align-items-center gap-1 small">
                                    <input type="radio" class="form-check-input m-0" value="exclude" x-model="form.tag_mode">
                                    Loại trừ thẻ đã chọn
                                </label>
                            </div>

                            {{-- Ô tìm + tích hàng loạt: danh sách thẻ có thể dài hàng chục dòng,
                                 tích tay từng cái là không dùng được. Nút tích hàng loạt chỉ tác
                                 động lên những thẻ ĐANG hiện sau khi lọc, không phải toàn bộ. --}}
                            <div class="d-flex flex-wrap gap-2 align-items-center mb-2">
                                <input type="search" class="form-control admin-input" style="max-width: 220px"
                                       placeholder="Tìm thẻ..." x-model="tagKeyword">
                                <label class="d-flex align-items-center gap-1 small mb-0">
                                    <input type="checkbox" class="form-check-input m-0"
                                           :checked="allVisibleTagsSelected()"
                                           {{-- `indeterminate` (trạng thái gạch ngang khi mới chọn một phần)
                                                chỉ tồn tại như thuộc tính DOM, không có attribute tương ứng,
                                                nên phải gán bằng x-effect chứ không bind được bằng `:`. --}}
                                           x-effect="$el.indeterminate = someVisibleTagsSelected()"
                                           @change="toggleAllVisibleTags($event.target.checked)">
                                    Tích tất cả (<span x-text="visibleTags().length"></span>)
                                </label>
                                <button type="button" class="btn btn-link btn-sm p-0" x-show="form.tag_ids.length"
                                        @click="form.tag_ids = []; previewResult = null">
                                    Bỏ chọn <span x-text="form.tag_ids.length"></span> thẻ
                                </button>
                            </div>
                            <div class="border rounded p-2 mb-2" style="max-height: 200px; overflow-y: auto">
                                <template x-for="tag in visibleTags()" :key="tag.id">
                                    <label class="d-flex align-items-center gap-2 py-1">
                                        <input type="checkbox" class="form-check-input m-0" :value="tag.id"
                                               :checked="form.tag_ids.includes(tag.id)"
                                               @change="toggleInArray(form.tag_ids, tag.id)">
                                        <span class="tag-swatch" :style="{ background: tag.color }"></span>
                                        <span x-text="tag.name"></span>
                                    </label>
                                </template>
                                <div class="small text-muted" x-show="visibleTags().length === 0">
                                    Không có thẻ nào khớp.
                                </div>
                            </div>
                            {{-- "Có đủ mọi thẻ" chỉ có nghĩa khi đang CHỌN thẻ. Ở chế độ loại trừ,
                                 "không mang bất kỳ thẻ nào trong danh sách" đã là điều kiện đủ. --}}
                            <div class="d-flex gap-3 mb-3" x-show="form.tag_mode === 'include'" x-cloak>
                                <label class="d-flex align-items-center gap-1 small">
                                    <input type="radio" class="form-check-input m-0" value="any" x-model="form.tag_match"> Có bất kỳ thẻ nào
                                </label>
                                <label class="d-flex align-items-center gap-1 small">
                                    <input type="radio" class="form-check-input m-0" value="all" x-model="form.tag_match"> Có đủ mọi thẻ
                                </label>
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label admin-form-label">Loại hội thoại</label>
                                    <div class="d-flex gap-3">
                                        <label class="d-flex align-items-center gap-1 small">
                                            <input type="checkbox" class="form-check-input m-0" value="user"
                                                   :checked="form.thread_types.includes('user')"
                                                   @change="toggleInArray(form.thread_types, 'user')"> Cá nhân
                                        </label>
                                        <label class="d-flex align-items-center gap-1 small">
                                            <input type="checkbox" class="form-check-input m-0" value="group"
                                                   :checked="form.thread_types.includes('group')"
                                                   @change="toggleInArray(form.thread_types, 'group')"> Nhóm
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label admin-form-label" for="active-days">Còn tương tác trong (ngày)</label>
                                    <input id="active-days" type="number" min="1" max="365" class="form-control admin-input" x-model.number="form.active_within_days" placeholder="Bỏ trống = không giới hạn">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label admin-form-label" for="skip-days">Bỏ qua ai đã nhận trong (ngày)</label>
                                    <input id="skip-days" type="number" min="1" max="365" class="form-control admin-input" x-model.number="form.skip_recent_days" placeholder="Bỏ trống = không lọc">
                                </div>
                            </div>

                            <div class="alert alert-warning py-2 small" x-show="hasOaSelected()" x-cloak>
                                <i class="bi bi-exclamation-triangle"></i>
                                Với OA, Zalo chỉ cho gửi tin tự do trong <span x-text="options.oaWindowDays"></span> ngày kể từ tin cuối của khách.
                                Người nhận ngoài khoảng này sẽ bị đánh dấu <strong>bỏ qua</strong>, muốn gửi phải dùng ZNS.
                            </div>

                            <label class="form-label admin-form-label" for="campaign-template">Chèn từ tin nhắn mẫu</label>
                            <select id="campaign-template" class="form-select admin-select mb-2" x-model.number="form.message_template_id" @change="applyTemplate()">
                                <option :value="null">-- Không dùng mẫu --</option>
                                <template x-for="template in options.templates" :key="template.id">
                                    <option :value="template.id" x-text="template.shortcut + ' - ' + template.content.slice(0, 40)"></option>
                                </template>
                            </select>

                            <label class="form-label admin-form-label" for="campaign-content">Nội dung tin nhắn</label>
                            <textarea id="campaign-content" class="form-control admin-input mb-1" rows="4" x-model="form.content" maxlength="4000" required></textarea>
                            <div class="small text-muted mb-3">
                                {{-- `@` ở đây là cú pháp thoát của Blade: in ra đúng chữ {{name}} mà không
                                     bị Blade hiểu là biểu thức cần biên dịch. --}}
                                Dùng <code>@{{name}}</code> để chèn tên người nhận - mỗi tin khác nhau ở phần đầu sẽ đỡ bị Zalo đánh dấu.
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label admin-form-label" for="delay-seconds">Mỗi tin cách nhau (giây)</label>
                                    <input id="delay-seconds" type="number" min="3" max="600" class="form-control admin-input" x-model.number="form.delay_seconds" required>
                                    <div class="form-text">Hệ thống tự nhiễu ±20% quanh con số này để loạt tin không đều tăm tắp như máy.</div>
                                </div>
                                <div class="col-md-8 d-flex align-items-end">
                                    <div class="small text-muted" x-show="previewResult">
                                        Ước tính chạy khoảng
                                        <strong x-text="estimatedDuration()"></strong>
                                        cho <span x-text="previewResult?.total"></span> tin.
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex align-items-center gap-2 mb-2">
                                <button type="button" class="btn btn-outline-primary btn-sm" @click="preview()" :disabled="previewing">
                                    <span x-show="previewing" class="spinner-border spinner-border-sm me-1"></span>
                                    <i class="bi bi-search"></i> Xem trước người nhận
                                </button>
                                <span class="small text-muted" x-show="previewResult">
                                    Sẽ gửi tới <strong x-text="previewResult?.total"></strong> hội thoại.
                                </span>
                            </div>
                            <template x-if="previewResult">
                                <div class="border rounded p-2 small" style="max-height: 160px; overflow-y: auto">
                                    <template x-for="row in previewResult.perAccount" :key="'pa-' + row.zaloAccountId">
                                        <div>
                                            <strong x-text="row.name"></strong>: <span x-text="row.count"></span> hội thoại
                                            <span class="text-warning" x-show="row.note" x-text="row.note"></span>
                                        </div>
                                    </template>
                                    <hr class="my-2">
                                    <template x-for="row in previewResult.sample" :key="row.zaloAccountId + '-' + row.threadId">
                                        <div class="text-muted">
                                            <span x-text="row.name"></span>
                                            <span x-show="row.tags.length" x-text="'[' + row.tags.join(', ') + ']'"></span>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" @click="closeForm()">Huỷ</button>
                            <button type="submit" class="btn btn-primary" :disabled="saving">
                                <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                                <span x-text="editing ? 'Lưu thay đổi' : 'Lưu nháp'"></span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>

    {{-- Tiến độ: tự làm mới mỗi 5 giây khi chiến dịch còn chạy. --}}
    <template x-if="progressCampaign">
        <div class="modal d-block" style="background: rgba(15,23,42,.45); overflow-y: auto" @click="closeProgress()">
            <div class="modal-dialog modal-lg modal-dialog-centered" @click.stop>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" x-text="progressCampaign.name"></h5>
                        <span class="badge ms-2" :class="statusBadgeClass(progressCampaign.status)" x-text="progressCampaign.statusLabel"></span>
                    </div>
                    <div class="modal-body">
                        <div class="d-flex gap-3 mb-3 small">
                            <span>Tổng: <strong x-text="progressCampaign.totalCount"></strong></span>
                            <span class="text-success">Thành công: <strong x-text="progressCampaign.sentCount"></strong></span>
                            <span class="text-danger">Lỗi: <strong x-text="progressCampaign.failedCount"></strong></span>
                            <span class="text-muted">Bỏ qua: <strong x-text="progressCampaign.skippedCount"></strong></span>
                            <span class="text-muted">Còn chờ: <strong x-text="progressCampaign.pendingCount"></strong></span>
                        </div>
                        <select class="form-select admin-select mb-2" style="width: auto" x-model="targetStatus" @change="loadTargets()">
                            <option value="">Mọi người nhận</option>
                            <option value="pending">Đang chờ</option>
                            <option value="sent">Đã gửi</option>
                            <option value="failed">Lỗi</option>
                            <option value="skipped">Bỏ qua</option>
                        </select>
                        <div class="table-responsive" style="max-height: 320px; overflow-y: auto">
                            <table class="table table-sm admin-table">
                                <thead><tr><th>Người nhận</th><th>Trạng thái</th><th>Thời điểm</th><th>Ghi chú</th></tr></thead>
                                <tbody>
                                    <template x-for="target in targets" :key="target.id">
                                        <tr>
                                            <td x-text="target.name"></td>
                                            <td><span class="badge" :class="targetBadgeClass(target.status)" x-text="targetStatusLabels[target.status] ?? target.status"></span></td>
                                            <td class="small text-muted" x-text="formatTime(target.sentAt)"></td>
                                            <td class="small text-muted" x-text="target.error"></td>
                                        </tr>
                                    </template>
                                    <tr x-show="targets.length === 0">
                                        <td colspan="4" class="text-center text-muted py-3">Chưa có dữ liệu.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" @click="closeProgress()">Đóng</button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template x-if="cancelTarget">
        <div class="modal d-block" style="background: rgba(15,23,42,.45);" @click="cancelTarget = null">
            <div class="modal-dialog modal-dialog-centered" @click.stop>
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title">Huỷ chiến dịch?</h5></div>
                    <div class="modal-body">
                        <p class="mb-2">Huỷ <strong x-text="cancelTarget.name"></strong>?</p>
                        <p class="small text-muted mb-0">
                            Những tin đã gửi không thu hồi được. Số người còn chờ
                            (<span x-text="cancelTarget.pendingCount"></span>) sẽ chuyển thành "bỏ qua".
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" @click="cancelTarget = null">Đóng</button>
                        <button type="button" class="btn btn-danger" :disabled="saving" @click="confirmCancel()">Huỷ chiến dịch</button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template x-if="deleteTarget">
        <div class="modal d-block" style="background: rgba(15,23,42,.45);" @click="deleteTarget = null">
            <div class="modal-dialog modal-dialog-centered" @click.stop>
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title">Xoá chiến dịch?</h5></div>
                    <div class="modal-body">
                        <p class="mb-0">Xoá <strong x-text="deleteTarget.name"></strong> cùng toàn bộ lịch sử người nhận của nó?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" @click="deleteTarget = null">Huỷ</button>
                        <button type="button" class="btn btn-danger" :disabled="saving" @click="confirmDelete()">Xoá</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
@endsection

@push('pre_alpine_scripts')
    <script src="{{ asset('js/spam-campaigns.js') }}?v={{ filemtime(public_path('js/spam-campaigns.js')) }}" defer></script>
@endpush