{{--
    Task #33864 — 有効接続率（他社乗り換え）— SCR-04 (read-only analytics, System Admin / 売上データ).
    EP-04: GET /admin/revenue/connection-rate/data (daily | monthly).

    2 view (toggle FN-3/FN-7): 日次 = month picker + 4 thẻ KPI + danh sách theo ngày;
      月次 = year picker (4月始まり) + bảng 12 tháng + ranking 乗り換え先 (Top 5).
    Nút「他社webhook 管理」(góc phải) → SCR-05 (phụ thuộc task #33865).

    ⏳ Pending — KHÔNG codify (D-03): 有効接続率 / 有効% / 無効% / paid_plan_rate / free_to_paid /
      valid_rate / 前月比 (QA-spec-033/006) → giá trị null → render「-」(BR-G4). switch_dest =
      管理名 join-on-read (QD-05, own #33865) → null → URL/「-」. main_owner name+email (⏳ QA-spec-031).
    UI compose lme-ui (date-picker/button/icon). Thẻ KPI + bảng analytics tự dựng (không có
      component lme phủ card KPI / bảng ranking đa cột) — cùng cách sibling churn dựng <table>.
--}}
@extends('layout.admin_v2.main')

@section('title')
    有効接続率
@endsection

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css">
    <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/date-picker/date-picker.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/admin/connection_rate.css?v={{config('sns-line.version')}}">
@endpush

@section('content')
    <div id="vue-element" class="conn-rate-page" v-cloak>
        {{-- Header 1 dòng: tiêu đề + ◀ [date-picker] ▶ + toggle view | 「他社webhook 管理」(góc phải — BR-21) --}}
        <div class="cnr-header">
            <h1 class="cnr-title">有効接続率（他社乗り換え）</h1>

            <div class="cnr-period">
                <lme-button-ghost type="primary" size="md" icon class="cnr-nav-btn"
                                  @click="shiftPeriod(-1)" :disabled="isLoading">
                    <lme-icon file_name="caret-left-filled"></lme-icon>
                </lme-button-ghost>

                {{-- 日次: chọn THÁNG · 月次: chọn NĂM (4月始まり) — lme-date-picker (Figma: ô viền + icon lịch) --}}
                <lme-date-picker v-if="currentView === 'daily'"
                                 type="month" format="YYYY年MM月" size="lg" width="150px"
                                 :clearable="false" :value="monthValue"
                                 @change="onMonthPicked"></lme-date-picker>
                <lme-date-picker v-else
                                 type="year" format="YYYY年" size="lg" width="120px"
                                 :clearable="false" :value="fiscalYearValue"
                                 @change="onYearPicked"></lme-date-picker>

                <lme-button-ghost type="primary" size="md" icon class="cnr-nav-btn"
                                  @click="shiftPeriod(1)" :disabled="isLoading">
                    <lme-icon file_name="caret-right-filled"></lme-icon>
                </lme-button-ghost>
            </div>

            {{-- Toggle view — nhãn theo view hiện tại (FN-3) --}}
            <lme-button-ghost type="primary" size="lg" class="cnr-toggle-btn"
                              @click="toggleView" :disabled="isLoading">
                <lme-icon file_name="swap-outlined" class="cnr-toggle-ic"></lme-icon>
                @{{ toggleLabel }}
            </lme-button-ghost>

            {{-- Nút điều hướng SCR-05 (task #33865). Trước đây hardcode path vì route chưa tồn tại
                 trong branch; #33865 đã merge (commit 9e04946427) nên dùng route() — đổi prefix ở
                 routes/web.php sẽ tự lan sang đây, không còn link chết âm thầm. --}}
            <a href="{{ route('webhookCompetitors') }}" class="cnr-webhook-link">
                <lme-button-default type="secondary" size="lg">
                    他社webhook 管理
                </lme-button-default>
            </a>
        </div>

        {{-- Vùng nội dung --}}
        <div class="cnr-content">
            {{-- Loading --}}
            <div v-if="isLoading" class="cnr-loading">
                <div class="cnr-spinner"></div>
            </div>

            {{-- Error (5xx/network) + 再試行 --}}
            <div v-else-if="error" class="cnr-error">
                <p class="cnr-error-msg">@{{ error }}</p>
                <lme-button-default type="secondary" size="md" @click="fetchData">再試行</lme-button-default>
            </div>

            {{-- ========================= 日次 view ========================= --}}
            <div v-else-if="currentView === 'daily'">
                {{-- 4 thẻ KPI (BR-22). Giá trị ⏳ QA-spec-033 → 「-」 --}}
                <div class="cnr-kpi-grid">
                    {{-- 全体有効接続率 --}}
                    <div class="cnr-kpi-card">
                        <div class="cnr-kpi-label">全体有効接続率</div>
                        <div class="cnr-kpi-ratio">
                            <span class="cnr-ratio-item cnr-ratio--active">有効：<span class="cnr-ratio-num">@{{ formatPercent(kpi.overall_rate.valid_pct) }}</span></span>
                            <span class="cnr-ratio-item cnr-ratio--muted">無効：<span class="cnr-ratio-num">@{{ formatPercent(kpi.overall_rate.invalid_pct) }}</span></span>
                        </div>
                        {{-- Thanh process: phần active = 有効% --}}
                        <div class="cnr-progress">
                            <div class="cnr-progress-fill" :style="{ width: barWidth(kpi.overall_rate.valid_pct) }"></div>
                        </div>
                        <div class="cnr-legend">
                            <div class="cnr-legend-item">
                                <span class="cnr-dot cnr-dot--active"></span>有効：@{{ formatCount(kpi.overall_rate.valid_count) }}件
                            </div>
                            <div class="cnr-legend-item">
                                <span class="cnr-dot cnr-dot--muted"></span>無効：@{{ formatCount(kpi.overall_rate.invalid_count) }}件
                            </div>
                        </div>
                    </div>

                    {{-- 有料プラン有効接続率 --}}
                    <div class="cnr-kpi-card">
                        <div class="cnr-kpi-label">有料プラン有効接続率</div>
                        <div class="cnr-kpi-ratio">
                            <span class="cnr-ratio-item cnr-ratio--active">有効：<span class="cnr-ratio-num">@{{ formatPercent(kpi.paid_plan_rate.valid_pct) }}</span></span>
                            <span class="cnr-ratio-item cnr-ratio--muted">無効：<span class="cnr-ratio-num">@{{ formatPercent(kpi.paid_plan_rate.invalid_pct) }}</span></span>
                        </div>
                        <div class="cnr-progress">
                            <div class="cnr-progress-fill" :style="{ width: barWidth(kpi.paid_plan_rate.valid_pct) }"></div>
                        </div>
                        <div class="cnr-legend">
                            <div class="cnr-legend-item">
                                <span class="cnr-dot cnr-dot--active"></span>有効：@{{ formatCount(kpi.paid_plan_rate.valid_count) }}件
                            </div>
                            <div class="cnr-legend-item">
                                <span class="cnr-dot cnr-dot--muted"></span>無効：@{{ formatCount(kpi.paid_plan_rate.invalid_count) }}件
                            </div>
                        </div>
                    </div>

                    {{-- フリー/有料 比率 --}}
                    <div class="cnr-kpi-card">
                        <div class="cnr-kpi-label">フリー/有料 比率</div>
                        <div class="cnr-kpi-ratio">
                            <span class="cnr-ratio-item cnr-ratio--muted">フリー：<span class="cnr-ratio-num">@{{ formatPercent(kpi.free_to_paid.free_pct) }}</span></span>
                            <span class="cnr-ratio-item cnr-ratio--active">有料：<span class="cnr-ratio-num">@{{ formatPercent(kpi.free_to_paid.paid_pct) }}</span></span>
                        </div>
                        {{-- Figma: phần active (有料) nằm bên phải --}}
                        <div class="cnr-progress cnr-progress--reverse">
                            <div class="cnr-progress-fill" :style="{ width: barWidth(kpi.free_to_paid.paid_pct) }"></div>
                        </div>
                        <div class="cnr-legend">
                            <div class="cnr-legend-item">
                                <span class="cnr-dot cnr-dot--muted"></span>フリー：@{{ formatCount(kpi.free_to_paid.free_count) }}件
                            </div>
                            <div class="cnr-legend-item">
                                <span class="cnr-dot cnr-dot--active"></span>有料　：@{{ formatCount(kpi.free_to_paid.paid_count) }}件
                            </div>
                        </div>
                    </div>

                    {{-- 乗り換え先 TOP5 --}}
                    <div class="cnr-kpi-card">
                        <div class="cnr-kpi-label">乗り換え先 TOP5</div>
                        {{-- Luôn hiển thị đủ 5 dòng (1..5) — slot thiếu dữ liệu → 「-」(BR-G4) --}}
                        <ol class="cnr-tops-list">
                            <li v-for="(t, i) in switchDestTop5" :key="i" class="cnr-tops-item">
                                <span class="cnr-tops-rank">@{{ i + 1 }}：</span>
                                <span class="cnr-tops-count">@{{ formatTopCount(t.count) }}件(@{{ formatTopPercent(t.pct) }})</span>
                                {{-- fix(#39577): có URL webhook đối thủ → mở TAB MỚI (link ngoài hệ
                                     thống nên kèm rel noopener). Không có URL → giữ text thường. --}}
                                {{-- Tên bị cắt bởi ellipsis (card cố định 250px) → hover hiện tooltip
                                     tên đầy đủ. Dùng title thay tooltip CSS vì .cnr-kpi-card có
                                     overflow:hidden sẽ cắt mất tooltip absolute. Slot rỗng (「-」)
                                     → topsTitle() trả null nên Vue bỏ hẳn attribute. --}}
                                <a v-if="t.url" :href="t.url" target="_blank" rel="noopener noreferrer"
                                   class="cnr-tops-name" :title="topsTitle(t.name)">@{{ formatText(t.name) }}</a>
                                <span v-else class="cnr-tops-name" :title="topsTitle(t.name)">@{{ formatText(t.name) }}</span>
                            </li>
                        </ol>
                    </div>
                </div>

                {{-- Danh sách chi tiết theo ngày (BR-23) --}}
                <div class="cnr-table-wrap">
                    <table class="cnr-table cnr-table--daily">
                        <thead>
                            <tr>
                                <th>webhook無効日時</th>
                                <th>料金プラン</th>
                                <th>乗り換え先(webhook)</th>
                                <th>LINE公式アカウント名</th>
                                <th>主取得者情報</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="!list.length">
                                <td colspan="5" class="cnr-td-empty">-</td>
                            </tr>
                            <tr v-for="(row, i) in list" :key="i">
                                <td>@{{ formatText(row.webhook_disabled_at) }}</td>
                                {{-- 料金プラン: chấm tròn màu (有料 = xanh, フリー = xám) + nhãn --}}
                                <td>
                                    <span class="cnr-plan">
                                        <span class="cnr-plan-dot" :class="planDotClass(row.plan)"></span>
                                        @{{ formatText(row.plan) }}
                                    </span>
                                </td>
                                <td :title="tooltipText(row.switch_dest)">@{{ formatText(row.switch_dest) }}</td>
                                {{-- LINE公式アカウント: tên (link xanh) + @id xuống dòng (xám) --}}
                                <td>
                                    <div class="cnr-loa">
                                        {{-- fix(#39631): trước đây là ô tròn xám rỗng. Nay hiện avatar
                                             LINE của LOA (bots.bot_image = pictureUrl từ LINE); không
                                             có ảnh hoặc URL hỏng → avatar mặc định user-outlined.svg,
                                             đúng cách các màn System Admin khác làm (@error=altImage). --}}
                                        <img class="cnr-loa-avatar" alt=""
                                             :src="row.bot_image_url || defaultBotAvatar"
                                             @error="onAvatarError">
                                        <div class="cnr-loa-body">
                                            {{-- fix(#39577): tên BOT → màn detail bot. Trước đây href="#"
                                                 (bấm không đi đâu). Thiếu bot_id → text thường. --}}
                                            <a v-if="row.bot_detail_url" :href="row.bot_detail_url"
                                               class="cnr-link cnr-link--underline"
                                               :title="tooltipText(loaName(row.line_account))">@{{ loaName(row.line_account) }}</a>
                                            <span v-else class="cnr-link"
                                                  :title="tooltipText(loaName(row.line_account))">@{{ loaName(row.line_account) }}</span>
                                            <span class="cnr-loa-id" v-if="loaId(row.line_account)"
                                                  :title="tooltipText(loaId(row.line_account))">@{{ loaId(row.line_account) }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="cnr-owner">
                                        {{-- fix(#39596): nút này ĐĂNG NHẬP HỘ user đó ở TAB MỚI
                                             (giữ phiên admin tab hiện tại). Thiếu link → disable. --}}
                                        <lme-button-ghost type="primary" size="md" icon class="cnr-owner-dl"
                                                          style="transform: rotate(-90deg);"
                                                          :disabled="!row.main_owner.login_url || isLoggingIn"
                                                          @click="loginAsOwner(row.main_owner)">
                                            <lme-icon file_name="download-outlined" style="margin-top: -3px;"></lme-icon>
                                        </lme-button-ghost>
                                        <div class="cnr-owner-body">
                                            {{-- fix(#39577): tên user → màn detail user --}}
                                            {{-- fix(#39631): tên/email dài bị cắt ellipsis nhưng hover không thấy
                                                 full text. Thêm :title (native tooltip) — cùng cách màn 解約率
                                                 (churn_rate) đang dùng cho nhãn 経路 bị cắt. --}}
                                            <a v-if="row.main_owner.detail_url" :href="row.main_owner.detail_url"
                                               class="cnr-link cnr-link--underline"
                                               :title="tooltipText(row.main_owner.name)">@{{ formatText(row.main_owner.name) }}</a>
                                            <span v-else class="cnr-link"
                                                  :title="tooltipText(row.main_owner.name)">@{{ formatText(row.main_owner.name) }}</span>
                                            <span class="cnr-owner-email"
                                                  :title="tooltipText(row.main_owner.email)">@{{ formatText(row.main_owner.email) }}</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- ========================= 月次 view ========================= --}}
            {{-- 1 bảng gộp: 月 + 有効接続率(有効/無効/有効接続率/前月比) + 乗り換え先(1位..5位, mỗi hạng 2 cột). --}}
            <div v-else class="cnr-monthly">
                <div class="cnr-table-wrap">
                    <table class="cnr-table cnr-table--monthly">
                        <thead>
                            <tr>
                                <th rowspan="2" class="cnr-th-month" style="text-align: center">月</th>
                                <th colspan="4" class="cnr-th-group cnr-th-rate">有効接続率</th>
                                <th :colspan="RANK_N * 2" class="cnr-th-group">乗り換え先</th>
                            </tr>
                            <tr>
                                {{-- Nhóm 有効接続率 (ô gộp + 4 cột con) nền đậm hơn #E0E0E0 để tách
                                     khỏi nhóm 乗り換え先; đánh dấu bằng class thay vì nth-child
                                     vì số cột 乗り換え先 phụ thuộc RANK_N. --}}
                                <th class="cnr-th-rate">有効</th>
                                <th class="cnr-th-rate">無効</th>
                                <th class="cnr-th-rate">有効接続率</th>
                                <th class="cnr-th-rate">前月比</th>
                                <template v-for="n in RANK_N">
                                    <th :key="'r' + n">@{{ n }}位</th>
                                    <th :key="'c' + n">件数</th>
                                </template>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in rows" :key="row.month">
                                <td class="cnr-td-month">@{{ row.month }}</td>
                                <td>@{{ formatCount(row.valid) }}</td>
                                <td>@{{ formatCount(row.invalid) }}</td>
                                <td>@{{ formatPercent(row.valid_rate) }}</td>
                                <td>@{{ formatPercent(row.prev_month_ratio) }}</td>
                                <template v-for="(r, ri) in row.switch_dest_ranks">
                                    <td :key="'rd' + ri">@{{ formatText(r.switch_dest) }}</td>
                                    <td :key="'rc' + ri">@{{ formatCount(r.count) }}</td>
                                </template>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        window.CONNECTION_RATE_DATA_URL = "{{ route('connectionRateData') }}";
        // fix(#39596): đăng nhập hộ 主管理者 — dùng chung endpoint của màn TOP (mở tab mới,
        // giữ nguyên phiên System Admin ở tab hiện tại).
        window.QUICK_LOGIN_USER_URL = "{{ route('ajax.top.quick-login-user') }}";
        window.CURRENT_ADMIN_ID = "{{ Auth::id() }}";
    </script>
    <script src="/js/vue2.6.12/vue.js"></script>
    <script src="/lme-ui/src/js/icon/lme-icon.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-default.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-ghost.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/date-picker/lme-date-picker.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/admin/revenue/connection_rate.js?v={{config('sns-line.version')}}"></script>
@endpush