@extends('layouts.admin')

@section('title', 'Báo cáo')
@section('admin_shell_attributes')
x-data="reportsApp()" x-init="init()"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Báo cáo vận hành',
        'subtitle' => 'Tổng hợp hội thoại, SLA, nhân viên, template và AI từ dữ liệu đang có.',
        'actions' => '<a href="'.route('zalo-chat.page').'" class="btn btn-primary admin-btn"><i class="bi bi-chat-dots"></i> Mở Chat</a>',
    ])

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

    <div class="admin-panel report-filter-panel">
        <div class="admin-panel-body report-filter-row">
            <div>
                <label class="admin-form-label">Từ ngày</label>
                <input type="date" class="form-control admin-input" x-model="filters.from">
            </div>
            <div>
                <label class="admin-form-label">Đến ngày</label>
                <input type="date" class="form-control admin-input" x-model="filters.to">
            </div>
            {{-- Lọc theo đơn vị chỉ có với super admin: admin/nhân viên đã bị API giữ trong
                 đơn vị của mình nên không có gì để chọn. --}}
            @if (auth()->user()->isSuperAdmin())
                <div x-show="scope.canFilterByUnit" x-cloak>
                    <label class="admin-form-label">Đơn vị</label>
                    <select class="form-select admin-input" x-model="filters.unit_id" @change="load()">
                        <option value="">Tất cả đơn vị</option>
                        <template x-for="unit in scope.units" :key="unit.id">
                            <option :value="unit.id" x-text="unit.name"></option>
                        </template>
                    </select>
                </div>
            @endif
            <button type="button" class="btn btn-primary admin-btn" :disabled="loading" @click="load()">
                <span x-show="loading" class="spinner-border spinner-border-sm"></span>
                <i class="bi bi-arrow-clockwise" x-show="!loading"></i>
                Cập nhật
            </button>
        </div>
    </div>

    <div class="alert alert-danger admin-alert py-2" x-show="errorMessage" x-cloak x-text="errorMessage"></div>

    <div class="report-kpi-grid">
        <template x-for="card in kpiCards()" :key="card.label">
            <div class="report-kpi">
                <div class="report-kpi-label" x-text="card.label"></div>
                <div class="report-kpi-value" x-text="card.value"></div>
                <div class="report-kpi-note" x-text="card.note"></div>
            </div>
        </template>
    </div>

    <div class="report-grid">
        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Hội thoại mới theo ngày</h2>
                    <div class="admin-panel-note">Dựa trên ngày tạo hội thoại trong hệ thống.</div>
                </div>
            </div>
            <div class="report-chart-body">
                <canvas class="report-chart-canvas" x-ref="dailyConversationsChart" height="260"></canvas>
            </div>
        </section>

        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Tin nhắn vào / ra</h2>
                    <div class="admin-panel-note">So sánh tải khách nhắn vào với năng lực phản hồi.</div>
                </div>
            </div>
            <div class="report-chart-body">
                <canvas class="report-chart-canvas" x-ref="messageTrendChart" height="260"></canvas>
            </div>
        </section>

        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Thời gian phản hồi trung bình</h2>
                    <div class="admin-panel-note">Tính từ tin khách đến tới tin trả lời kế tiếp.</div>
                </div>
            </div>
            <div class="report-chart-body">
                <canvas class="report-chart-canvas" x-ref="responseTrendChart" height="260"></canvas>
            </div>
        </section>

        <section class="admin-panel report-card">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Theo tài khoản Zalo</h2>
                    <div class="admin-panel-note">Top tài khoản tạo hội thoại mới.</div>
                </div>
            </div>
            @include('reports.partials.bar-list', ['items' => 'data.accountConversations', 'label' => 'name', 'value' => 'total'])
        </section>

        <section class="admin-panel report-card">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Nhân viên</h2>
                    <div class="admin-panel-note">Tốc độ phản hồi, quá SLA và khối lượng xử lý.</div>
                </div>
            </div>
            <div class="report-table-wrap">
                <table class="table report-table mb-0">
                    <thead>
                    <tr>
                        <th>Nhân viên</th>
                        <th class="text-end">Hội thoại</th>
                        <th class="text-end">Tin gửi</th>
                        <th class="text-end">TB phản hồi</th>
                        <th class="text-end">Quá 15p</th>
                        <th class="text-end">Tỷ lệ</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template x-for="row in data.staffMetrics" :key="row.id">
                        <tr>
                            <td x-text="row.name"></td>
                            <td class="text-end" x-text="formatNumber(row.conversations)"></td>
                            <td class="text-end" x-text="formatNumber(row.sentMessages)"></td>
                            <td class="text-end" x-text="minutesLabel(row.avgMinutes)"></td>
                            <td class="text-end" x-text="formatNumber(row.over15)"></td>
                            <td class="text-end" x-text="row.over15Rate + '%'"></td>
                        </tr>
                    </template>
                    </tbody>
                </table>
                <div class="report-empty" x-show="!loading && data.staffMetrics.length === 0">Chưa có dữ liệu nhân viên trong kỳ.</div>
            </div>
        </section>

        <section class="admin-panel report-card">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Tồn đọng theo nhân viên</h2>
                    <div class="admin-panel-note">Hội thoại có tin cuối từ khách, tính theo account được phân quyền.</div>
                </div>
            </div>
            <div class="report-table-wrap">
                <table class="table report-table mb-0">
                    <thead>
                    <tr>
                        <th>Nhân viên</th>
                        <th class="text-end">Đang chờ</th>
                        <th class="text-end">Quá 5p</th>
                        <th class="text-end">Quá 15p</th>
                        <th class="text-end">Lâu nhất</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template x-for="row in data.staffBacklog" :key="row.id">
                        <tr>
                            <td x-text="row.name"></td>
                            <td class="text-end" x-text="formatNumber(row.waiting)"></td>
                            <td class="text-end" x-text="formatNumber(row.over5)"></td>
                            <td class="text-end" x-text="formatNumber(row.over15)"></td>
                            <td class="text-end" x-text="minutesLabel(row.maxWaitMinutes)"></td>
                        </tr>
                    </template>
                    </tbody>
                </table>
                <div class="report-empty" x-show="!loading && data.staffBacklog.length === 0">Không có hội thoại đang chờ.</div>
            </div>
        </section>

        <section class="admin-panel report-card">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">SLA phản hồi</h2>
                    <div class="admin-panel-note">Tính từ tin khách đến tới tin trả lời kế tiếp.</div>
                </div>
            </div>
            <div class="report-sla">
                <div class="report-donut" :style="{ '--value': slaRate(data.sla.over5) + '%' }">
                    <span x-text="slaRate(data.sla.over5) + '%'"></span>
                </div>
                <div class="report-sla-lines">
                    <div><strong x-text="formatNumber(data.sla.total)"></strong> lượt khách cần phản hồi</div>
                    <div><strong x-text="formatNumber(data.sla.over5)"></strong> quá 5 phút</div>
                    <div><strong x-text="formatNumber(data.sla.over15)"></strong> quá 15 phút</div>
                </div>
            </div>
        </section>

        <section class="admin-panel report-card">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">SLA theo tài khoản</h2>
                    <div class="admin-panel-note">Tài khoản nào dễ trễ phản hồi nhất.</div>
                </div>
            </div>
            <div class="report-table-wrap">
                <table class="table report-table mb-0">
                    <thead>
                    <tr>
                        <th>Tài khoản</th>
                        <th class="text-end">Tổng</th>
                        <th class="text-end">Quá 15p</th>
                        <th class="text-end">Tỷ lệ</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template x-for="row in data.accountSla" :key="row.id">
                        <tr>
                            <td x-text="row.name"></td>
                            <td class="text-end" x-text="formatNumber(row.total)"></td>
                            <td class="text-end" x-text="formatNumber(row.over15)"></td>
                            <td class="text-end" x-text="row.over15Rate + '%'"></td>
                        </tr>
                    </template>
                    </tbody>
                </table>
                <div class="report-empty" x-show="!loading && data.accountSla.length === 0">Chưa có dữ liệu SLA theo tài khoản.</div>
            </div>
        </section>

        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Khung giờ khách nhắn nhiều</h2>
                    <div class="admin-panel-note">Dùng để phân ca trực theo giờ cao điểm.</div>
                </div>
            </div>
            <div class="report-chart-body">
                <canvas class="report-chart-canvas" x-ref="hourlyIncomingChart" height="260"></canvas>
            </div>
        </section>

        <section class="admin-panel report-card">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Tag / trạng thái</h2>
                    <div class="admin-panel-note">Số hội thoại được gắn tag trong kỳ.</div>
                </div>
            </div>
            @include('reports.partials.tag-list')
        </section>

        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Template</h2>
                    <div class="admin-panel-note">Suy luận bằng nội dung tin gửi khớp chính xác với template.</div>
                </div>
            </div>
            <div class="report-table-wrap">
                <table class="table report-table mb-0">
                    <thead>
                    <tr>
                        <th>Template</th>
                        <th class="text-end">Lần dùng</th>
                        <th class="text-end">Khách phản hồi sau đó</th>
                        <th class="text-end">Tỷ lệ</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template x-for="row in data.templates" :key="row.id">
                        <tr>
                            <td><code x-text="'/' + row.code"></code></td>
                            <td class="text-end" x-text="formatNumber(row.uses)"></td>
                            <td class="text-end" x-text="formatNumber(row.replies)"></td>
                            <td class="text-end" x-text="row.replyRate + '%'"></td>
                        </tr>
                    </template>
                    </tbody>
                </table>
                <div class="report-empty" x-show="!loading && data.templates.length === 0">Chưa có dữ liệu template trong kỳ.</div>
            </div>
        </section>

        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">AI Agent</h2>
                    <div class="admin-panel-note">Dựa trên ai_agent_runs và trạng thái auto-reply hiện tại.</div>
                </div>
            </div>
            <div class="report-ai-grid">
                <template x-for="row in data.ai.runs" :key="row.replyMode + '-' + row.status">
                    <div class="report-ai-tile">
                        <div class="report-ai-label" x-text="row.replyMode + ' · ' + row.status"></div>
                        <div class="report-ai-value" x-text="formatNumber(row.total)"></div>
                    </div>
                </template>
                <div class="report-ai-tile">
                    <div class="report-ai-label">Auto-reply đang bật</div>
                    <div class="report-ai-value" x-text="formatNumber(data.ai.autoReply.enabled)"></div>
                </div>
                <div class="report-ai-tile">
                    <div class="report-ai-label">Auto-reply đang tắt</div>
                    <div class="report-ai-value" x-text="formatNumber(data.ai.autoReply.disabled)"></div>
                </div>
            </div>
        </section>

        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Chiến dịch gửi hàng loạt</h2>
                    <div class="admin-panel-note">Chiến dịch tạo trong kỳ, cộng mọi chiến dịch còn đang chạy hoặc chờ chạy.</div>
                </div>
                <a href="{{ route('spam-campaigns.page') }}" class="btn btn-outline-secondary admin-btn">
                    <i class="bi bi-megaphone"></i> Quản lý chiến dịch
                </a>
            </div>
            <div class="report-ai-grid">
                <template x-for="tile in campaignTiles()" :key="tile.label">
                    <div class="report-ai-tile">
                        <div class="report-ai-label" x-text="tile.label"></div>
                        <div class="report-ai-value" x-text="tile.value"></div>
                    </div>
                </template>
            </div>
            <div class="report-chart-body">
                <canvas class="report-chart-canvas" x-ref="campaignDailyChart" height="260"></canvas>
            </div>
        </section>

        <section class="admin-panel report-card report-card-wide">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Chi tiết chiến dịch</h2>
                    <div class="admin-panel-note">Tỷ lệ thành công tính trên số người nhận đã xử lý, chưa gửi không tính là lỗi.</div>
                </div>
            </div>
            <div class="report-table-wrap">
                <table class="table report-table mb-0">
                    <thead>
                    <tr>
                        <th>Chiến dịch</th>
                        <th>Trạng thái</th>
                        <th style="min-width: 140px">Tiến độ</th>
                        <th class="text-end">Người nhận</th>
                        <th class="text-end">Đã gửi</th>
                        <th class="text-end">Lỗi</th>
                        <th class="text-end">Bỏ qua</th>
                        <th class="text-end">Thành công</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template x-for="row in data.campaigns.items" :key="row.id">
                        <tr>
                            <td>
                                <div class="fw-semibold" x-text="row.name"></div>
                                <div class="small text-muted" x-text="campaignPeriodLabel(row)"></div>
                            </td>
                            <td><span class="badge" :class="campaignStatusClass(row.status)" x-text="row.statusLabel"></span></td>
                            <td>
                                <div class="progress" style="height: 8px">
                                    <div class="progress-bar" :style="{ width: row.progressPercent + '%' }"></div>
                                </div>
                                <div class="small text-muted mt-1" x-text="row.progressPercent + '%'"></div>
                            </td>
                            <td class="text-end" x-text="formatNumber(row.total)"></td>
                            <td class="text-end fw-semibold text-success" x-text="formatNumber(row.sent)"></td>
                            <td class="text-end" :class="row.failed > 0 ? 'text-danger fw-semibold' : 'text-muted'" x-text="formatNumber(row.failed)"></td>
                            <td class="text-end text-muted" x-text="formatNumber(row.skipped)"></td>
                            <td class="text-end" x-text="row.successRate + '%'"></td>
                        </tr>
                    </template>
                    </tbody>
                </table>
                <div class="report-empty" x-show="!loading && data.campaigns.items.length === 0">Chưa có chiến dịch nào trong kỳ.</div>
            </div>
        </section>
    </div>

    <div class="report-notes">
        <template x-for="note in data.notes" :key="note">
            <div><i class="bi bi-info-circle"></i> <span x-text="note"></span></div>
        </template>
    </div>
@endsection

@push('pre_alpine_scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js" defer></script>
    <script src="{{ asset('js/reports.js') }}?v={{ filemtime(public_path('js/reports.js')) }}" defer></script>
@endpush