{{--
    Task #33882 — チャーンレート (Churn rate) — SCR-02 (read-only analytics, System Admin / 売上データ).
    Giao diện lấy từ branch 33882 (layout/CSS/HTML), wire AJAX thật tới EP-02:
        GET route('churnRateData') (?view=overall|by_channel ...).
    Backend (Controller → Service → Repository) giữ nguyên của branch hiện tại.
--}}
@extends('layout.admin_v2.main')
@section('title', 'チャーンレート')

@push('css')
    <link rel="stylesheet" href="/css/component-base/reset.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/component-base/base.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/admin/churn_rate.css?v={{config('sns-line.version')}}">
@endpush

@section('content')
<div id="churn-rate-app" class="churn-rate-page" v-cloak>

    <div class="churn-page-title">チャーンレート</div>

    <div class="churn-card">

        {{-- ===== TOOLBAR ===== --}}
        <div class="churn-toolbar">

            {{-- Default view: year navigation --}}
            <div class="year-nav" v-if="viewMode === 'default'">
                <button class="nav-arrow" @click="prevYear" :disabled="isLoading">
                    <i class="far fa-chevron-left"></i>
                </button>
                <div class="year-display-wrap">
                    <span class="year-text">@{{ currentYear }}年</span>
                    <i class="far fa-calendar year-cal-icon"></i>
                </div>
                <button class="nav-arrow" @click="nextYear" :disabled="isLoading">
                    <i class="far fa-chevron-right"></i>
                </button>
            </div>

            {{-- By-route view: month navigation + display-item dropdown --}}
            <div class="churn-toolbar-left" v-else>
                <div class="year-nav">
                    <button class="nav-arrow" @click="prevMonth" :disabled="isLoading">
                        <i class="far fa-chevron-left"></i>
                    </button>
                    <div class="year-display-wrap">
                        <span class="year-text">@{{ currentYear }}年@{{ currentMonth }}月</span>
                        <i class="far fa-calendar year-cal-icon"></i>
                    </div>
                    <button class="nav-arrow" @click="nextMonth" :disabled="isLoading">
                        <i class="far fa-chevron-right"></i>
                    </button>
                </div>

                {{-- 表示する項目 dropdown (options động theo path intro từ API) --}}
                <div class="churn-dropdown" :class="{ 'is-open': displayMenuOpen }" v-if="displayOptions.length">
                    <button class="churn-dropdown__trigger" @click="toggleDisplayMenu">
                        <span class="churn-dropdown__label" :title="selectedDisplayFullLabel">@{{ selectedDisplayLabel }}</span>
                        <i class="far fa-chevron-down"></i>
                    </button>
                    <div class="churn-dropdown__menu" v-show="displayMenuOpen">
                        <div class="churn-dropdown__item"
                             v-for="opt in displayOptions" :key="opt.value"
                             :class="{ 'active': opt.value === selectedDisplay }"
                             :title="opt.label"
                             @click="selectDisplay(opt.value)">
                            @{{ truncateLabel(opt.label) }}
                        </div>
                    </div>
                </div>
            </div>

            {{-- View switch button --}}
            <button class="churn-switch-btn" @click="toggleView" :disabled="isLoading">
                <i class="far fa-exchange-alt"></i>
                @{{ viewMode === 'default' ? '経路別に切り替え' : '全体数値に切り替え' }}
            </button>
        </div>

        {{-- ===== ERROR STATE (5xx/network) + 再試行 ===== --}}
        <div v-if="error" class="churn-state churn-state--error">
            <p class="churn-state__msg">@{{ error }}</p>
            <button class="churn-switch-btn" @click="fetchData">再試行</button>
        </div>

        {{-- ===== DEFAULT TABLE (yearly, grouped 2-row header) ===== --}}
        <div class="wrap-scroll-table" v-else-if="viewMode === 'default'">
            <table class="churn-table">
                <thead>
                    <tr>
                        <th rowspan="2" class="col-month col-month-divider th-group">月</th>
                        <th class="th-group th-group--rate">解約率</th>
                        <th colspan="5" class="th-group">前月末の有料アカウント数</th>
                        <th colspan="5" class="th-group">当月末の解約数</th>
                    </tr>
                    <tr>
                        <th class="sub-col sub-col--rate">合計</th>
                        <th v-for="(label, i) in subHeaders" :key="'prev-' + i" class="sub-col">@{{ label }}</th>
                        <th v-for="(label, i) in subHeaders" :key="'curr-' + i" class="sub-col">@{{ label }}</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- Totals row (BR-12) --}}
                    <tr class="churn-total-row">
                        <td class="col-month col-month-divider total-label">合計数</td>
                        <td class="num-cell rate-cell">@{{ formatRate(totalRow.rate) }}</td>
                        <td class="num-cell" v-for="(val, i) in totalRow.prev" :key="'tprev-' + i">@{{ formatNum(val) }}</td>
                        <td class="num-cell" v-for="(val, i) in totalRow.curr" :key="'tcurr-' + i">@{{ formatNum(val) }}</td>
                    </tr>

                    {{-- Monthly rows --}}
                    <tr v-for="row in rows" :key="row.month">
                        <td class="col-month col-month-divider">@{{ row.month }}</td>
                        <td class="num-cell rate-cell">@{{ formatRate(row.rate) }}</td>
                        <td class="num-cell" v-for="(val, i) in row.prev" :key="'prev-' + i">@{{ formatNum(val) }}</td>
                        <td class="num-cell" v-for="(val, i) in row.curr" :key="'curr-' + i">@{{ formatNum(val) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        {{-- ===== BY-ROUTE TABLE (daily, per registration route — filter by 表示する項目) ===== --}}
        <div class="wrap-scroll-table" v-else>
            <table class="churn-table churn-table--by-route">
                <thead>
                    <tr>
                        <th rowspan="2" class="col-route col-route-divider th-group">登録経路</th>
                        {{-- Mỗi nhóm 経路 rộng 240px (2 sub-col × 120px); tên dài → cắt 20 ký tự + '…', full text ở tooltip --}}
                        <th colspan="2" class="th-group th-group--rate col-channel-group"
                            v-for="(rt, i) in visibleColumns" :key="'g-' + i"
                            :class="{ 'th-group--total': i === 0 }"
                            :title="rt.name">
                            <span class="channel-label">@{{ truncateLabel(rt.name) }}</span>
                        </th>
                    </tr>
                    <tr>
                        <template v-for="(rt, i) in visibleColumns">
                            <th class="sub-col col-channel-sub" :key="'s1-' + i" :class="{ 'sub-col--total': i === 0 }">解約数</th>
                            <th class="sub-col col-channel-sub" :key="'s2-' + i" :class="{ 'sub-col--total': i === 0 }">継続月数</th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    {{-- Totals row --}}
                    <tr class="churn-total-row">
                        <td class="col-route col-route-divider total-label">合計数</td>
                        <template v-for="(rt, i) in visibleColumns">
                            <td class="num-cell" :key="'tc-' + i" :class="{ 'total-cell': i === 0 }">@{{ formatNum(visibleTotalRow[i].cancel) }}</td>
                            <td class="num-cell" :key="'tm-' + i" :class="{ 'total-cell': i === 0 }">@{{ formatMonths(visibleTotalRow[i].months) }}</td>
                        </template>
                    </tr>

                    {{-- Daily rows --}}
                    <tr v-for="row in visibleRows" :key="row.date">
                        <td class="col-route col-route-divider">@{{ row.label }}</td>
                        <template v-for="(cell, i) in row.cells">
                            <td class="num-cell" :key="'c-' + i" :class="{ 'total-cell': i === 0 }">@{{ formatNum(cell.cancel) }}</td>
                            <td class="num-cell" :key="'m-' + i" :class="{ 'total-cell': i === 0 }">@{{ formatMonths(cell.months) }}</td>
                        </template>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('script')
    <script>
        window.CHURN_RATE_DATA_URL = "{{ route('churnRateData') }}";
    </script>
    <script src="/js/media/vue.min.js"></script>
    <script src="/js/admin/revenue/churn_rate.js?v={{config('sns-line.version')}}"></script>
@endpush