@extends('layouts.app')

@section('content')
    <div id="creator-analysis-page" x-data="creatorAnalysisPage()">
        <x-layout.page-header
            title="Phân tích hiệu suất creator"
            iconFa="chart-line"
            description="Upload file Excel danh sách nhà sáng tạo để phân tích hiệu suất."
        >
            <form id="creator-analysis-upload-form" @@submit.prevent="handleUpload" class="analysis-header-form">
                @csrf
                {{-- Trạng thái chờ --}}
                <div class="analysis-dropzone-trigger"
                     x-show="!uploading && !fileSelected"
                     :class="{ 'drag-over': dragOver }"
                     @@dragover.prevent="dragOver = true"
                     @@dragleave.prevent="dragOver = false"
                     @@drop.prevent="handleDrop($event); dragOver = false">
                    <span class="analysis-trigger-icon">@svg('fas-cloud-upload-alt')</span>
                    <span class="analysis-trigger-text">Kéo thả hoặc chọn file</span>
                    <span class="analysis-trigger-hint">.xlsx .xls .csv — 20MB</span>
                    <label class="btn analysis-btn-upload">
                        @svg('fas-folder-open')
                        <span>Chọn file</span>
                        <input type="file" name="file" accept=".xlsx,.xls,.csv" @@change="handleFileSelect" hidden>
                    </label>
                </div>

                {{-- Trạng thái đã chọn file --}}
                <div class="analysis-file-info" x-show="fileSelected && !uploading" x-cloak>
                    <span class="analysis-file-badge">
                        @svg('fas-file-excel')
                        <span x-text="fileName"></span>
                        <span class="analysis-file-size" x-text="fileSize"></span>
                    </span>
                    <button type="submit" class="btn" :disabled="uploading">
                        @svg('fas-chart-bar')
                        <span>Phân tích</span>
                    </button>
                    <button type="button" class="btn" @@click="resetUpload" :disabled="uploading" title="Bỏ chọn">
                        @svg('fas-times')
                    </button>
                </div>

                {{-- Trạng thái đang xử lý --}}
                <div class="analysis-loading" x-show="uploading" x-cloak>
                    <span class="analysis-spin"></span>
                    <span>Đang xử lý...</span>
                </div>

                {{-- Nút xoá dữ liệu — bên phải cùng --}}
                <button type="button" class="btn btn-sm btn-ghost analysis-header-clear" @@click="clearData" x-show="result" x-cloak>
                    @svg('fas-trash-alt')
                    <span>Xoá dữ liệu</span>
                </button>
            </form>
        </x-layout.page-header>

        <div class="list-page-content">
            <p class="error-text" x-show="errorMessage" x-text="errorMessage" x-cloak></p>

            {{-- Các card KPI tổng quan phía trên — luôn hiển thị cấu trúc, có dữ liệu thì điền vào --}}
            <div class="list-page-stats-grid">
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="Số creator có GMV &gt; 0 chia tổng số creator trong danh sách.">Creator có GMV</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">⭐</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatRate(kpiMetrics.gmv_creator_ratio)">0%</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subCreatorWithGmv()"></div></x-slot>
                </x-ui.cards>
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="Tổng GMV chia số creator có GMV (chỉ tính khi có creator có GMV).">GMV/creator có GMV (VND)</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">💵</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveMoney(kpiMetrics.gmv_per_creator_with_gmv)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" data-tooltip="Trung vị GMV của các creator có GMV là mức GMV của creator &quot;ở giữa&quot; nhóm (50% thấp hơn, 50% cao hơn) — không bị kéo lệch bởi vài creator doanh số đột biến như số trung bình. Nếu trung vị thấp hơn nhiều so với số trung bình, doanh số đang phụ thuộc vào một vài creator lớn; trung vị càng gần trung bình thì doanh số càng phân bổ đồng đều." x-text="subGmvPerCreator()"></div></x-slot>
                </x-ui.cards>
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="Tổng GMV chia tổng số đơn hàng đã ghi nhận.">AOV toàn shop (VND)</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">🧾</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveMoney(kpiMetrics.aov_shop)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subAov()"></div></x-slot>
                </x-ui.cards>
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="Tổng số đơn hàng đã ghi nhận nhờ các nhà sáng tạo trong file.">Đơn hàng tổng</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">🛒</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveNumber(kpiMetrics.orders)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subTotalOrders()"></div></x-slot>
                </x-ui.cards>
            </div>

            {{-- Waterfall dòng tiền: GMV gộp → −Hoàn tiền → GMV ròng → −Hoa hồng → Doanh thu thuần (giống file tham chiếu) --}}
            <div class="analysis-charts-row creator-channel-chart-row">
                <x-ui.cards type="section-card" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions db-header-full">
                            <div class="db-panel-header-row">
                                <span class="db-panel-dot db-panel-dot--purple"></span>
                                <span class="db-panel-title">Dòng tiền GMV</span>
                            </div>
                        </div>
                    </x-slot>
                    <div class="db-panel-inner">
                        <div class="db-cost-inner-row">
                            <div class="db-cost-chart-area">
                                <svg id="creator-cashflow-chart-svg" class="db-chart-svg"></svg>
                                <div id="creator-cashflow-chart-tooltip" class="db-chart-tooltip" style="display:none"></div>
                            </div>
                        </div>
                    </div>
                </x-ui.cards>

                {{-- Donut GMV theo kênh nội dung (legend kèm hoạt động theo kênh) --}}
                <x-ui.cards type="section-card" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions db-header-full">
                            <div class="db-panel-header-row">
                                <span class="db-panel-dot db-panel-dot--rose"></span>
                                <span class="db-panel-title">GMV theo kênh nội dung</span>
                            </div>
                        </div>
                    </x-slot>
                    <div class="db-panel-inner">
                        <div class="db-cost-inner-row">
                            <div class="db-cost-chart-area">
                                <svg id="creator-channel-chart-svg" class="db-chart-svg"></svg>
                                <div id="creator-channel-chart-tooltip" class="db-chart-tooltip" style="display:none"></div>
                            </div>
                            <div id="creator-channel-chart-legend" class="db-cost-types-panel"></div>
                        </div>
                    </div>
                </x-ui.cards>

                {{-- Phễu chuyển đổi — cộng dồn số thực trên toàn bộ creator rồi tính tỉ lệ, không trung bình cộng % từng creator (giống file tham chiếu) --}}
                <x-ui.cards type="section-card" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions db-header-full">
                            <div class="db-panel-header-row">
                                <span class="db-panel-dot db-panel-dot--Cyan"></span>
                                <span class="db-panel-title">Phễu chuyển đổi</span>
                            </div>
                        </div>
                    </x-slot>
                    <div class="db-panel-inner">
                        <x-ui.funnel
                            steps="funnelSteps"
                            barWidth="funnelBarWidth"
                            formatValue="formatLiveNumber"
                        />
                    </div>
                </x-ui.cards>
            </div>

            {{-- Bảng Top creator theo GMV (bảng trước) + Bản đồ độ phủ creator — cùng hàng --}}
            <div class="analysis-charts-row creator-gmv-map-row">
                {{-- Bảng Top creator theo GMV — chỉ lấy những creator có GMV --}}
                <x-ui.cards type="section-card" cardClass="analysis-section-card-top">
                    <x-slot name="header">
                        <div class="db-panel-header-row-full">
                            <span class="db-panel-dot db-panel-dot--emerald"></span>
                            <span class="db-panel-title">Top creator theo GMV</span>
                            <span class="analysis-legend">Tỷ trọng: GMV creator chia tổng GMV · Tỷ lệ hoàn: <span style="color:#16a34a">&check;</span> &lt;4% · <span style="color:#f59e0b">&#9888;&#65039;</span> 4–8,99% · <span style="color:#dc2626">&cross;</span> ≥9%</span>
                        </div>
                    </x-slot>
                    @php
                        $topCreatorColumns = [
                            ['key' => 'stt', 'label' => 'STT', 'type' => 'text', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false],
                            ['key' => 'creator', 'label' => 'Creator', 'cellClass' => 'col-left', 'widthClass' => 'col-xs'],
                            ['key' => 'share', 'label' => 'Tỷ trọng', 'render' => 'renderGmvShare(row)', 'cellClass' => 'col-left', 'widthClass' => 'col-lg', 'truncate' => false, 'title' => 'GMV của creator chia tổng GMV của toàn shop'],
                            ['key' => 'gmv', 'label' => 'GMV', 'render' => 'formatLiveMoney(row.gmv)', 'cellClass' => 'col-right', 'widthClass' => 'col-md', 'truncate' => false, 'title' => 'GMV đến từ nhà sáng tạo. Bao gồm phí vận chuyển, đã trừ khuyến mãi và đồng chi trả của nền tảng; không trừ đơn hủy hoặc hoàn tiền.'],
                            ['key' => 'refund', 'label' => 'Hoàn tiền', 'render' => 'formatLiveMoney(row.refund)', 'cellClass' => 'col-right', 'widthClass' => 'col-md', 'truncate' => false, 'title' => 'Tổng số tiền hoàn từ đơn trả hàng hoặc đơn đã hủy.'],
                            ['key' => 'refund_rate', 'label' => 'Tỷ lệ hoàn', 'render' => 'renderRefundRate(row)', 'cellClass' => 'col-left', 'widthClass' => 'col-sm', 'truncate' => false, 'title' => 'Tỷ lệ hoàn = Hoàn tiền ÷ GMV (chỉ tính khi có GMV). Đánh giá: ✓ <4% · ⚠ 4–8,99% · ✗ ≥9%'],
                        ];
                    @endphp
                    <div class="analysis-top-table-body">
                        <x-ui.tabular
                            id="creator-top-table"
                            tableClass="tabular-table analysis-top-table"
                            :columns="$topCreatorColumns"
                            rows="topCreatorsByGmv"
                            loading="false"
                            loadingText=""
                            emptyText="Chưa có dữ liệu — hãy tải lên file phân tích"
                            :sortable="false"
                            rowKey="creator"
                        />
                    </div>
                </x-ui.cards>

                <x-ui.cards type="section-card" cardClass="list-page-card creator-map-card">
                    <x-slot name="header">
                        <div class="section-header-actions db-header-full">
                            <div class="db-panel-header-row">
                                <span class="db-panel-dot db-panel-dot--purple"></span>
                                <span class="db-panel-title">Bản đồ độ phủ creator</span>
                                <span id="creator-map-thresholds" class="creator-map-thresholds"></span>
                            </div>
                        </div>
                    </x-slot>
                    <div class="db-panel-inner">
                        <div class="db-cost-inner-row">
                            <div class="db-cost-chart-area">
                                <svg id="creator-map-svg" class="db-chart-svg"></svg>
                                <div id="creator-map-tooltip" class="db-chart-tooltip" style="display:none"></div>
                            </div>
                        </div>
                        <div id="creator-map-footer" class="creator-map-footer"></div>
                    </div>
                </x-ui.cards>
            </div>

            {{-- Bảng chi tiết creator — toàn bộ creator kèm đầy đủ chỉ số hiệu suất, toàn màn hình --}}
            @php
                $creatorDetailColumns = [
                    ['key' => 'stt', 'label' => 'STT', 'type' => 'text', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false],
                    ['key' => 'creator', 'label' => 'Creator', 'cellClass' => 'col-left', 'widthClass' => 'col-md', 'truncate' => true],
                    ['key' => 'gmv', 'label' => 'GMV', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md', 'truncate' => false, 'render' => 'formatLiveMoney(row.gmv)', 'title' => 'GMV đến từ nhà sáng tạo. Bao gồm phí vận chuyển, đã trừ khuyến mãi và đồng chi trả của nền tảng; không trừ đơn hủy hoặc hoàn tiền.'],
                    ['key' => 'refund', 'label' => 'Hoàn tiền', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md', 'truncate' => false, 'render' => 'formatLiveMoney(row.refund)', 'title' => 'Tổng số tiền hoàn từ đơn trả hàng hoặc đơn đã hủy.'],
                    ['key' => 'orders', 'label' => 'Đơn hàng', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md-sm', 'truncate' => false, 'render' => 'formatLiveNumber(row.orders)', 'title' => 'Số đơn hàng đã ghi nhận. Một đơn hàng tương đương một quy trình thanh toán và có thể bao gồm nhiều món.'],
                    ['key' => 'aov', 'label' => 'AOV', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md', 'truncate' => false, 'render' => 'formatLiveMoney(row.aov)', 'title' => 'Giá trị đơn hàng trung bình = GMV ÷ Số đơn hàng'],
                    ['key' => 'ctr', 'label' => 'CTR', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-sm', 'truncate' => false, 'render' => 'formatRate(row.ctr)', 'title' => 'Tỷ lệ nhấp = Số lượt nhấp vào sản phẩm ÷ Lượt hiển thị sản phẩm'],
                    ['key' => 'ctor', 'label' => 'CTOR', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-sm', 'truncate' => false, 'render' => 'formatRate(row.ctor)', 'title' => 'Chuyển đổi từ lượt nhấp = Số đơn hàng ÷ Số lượt nhấp vào sản phẩm'],
                    ['key' => 'live_count', 'label' => 'LIVE', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md-sm', 'truncate' => false, 'render' => 'formatLiveNumber(row.live_count)'],
                    ['key' => 'video_count', 'label' => 'VIDEO', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md-sm', 'truncate' => false, 'render' => 'formatLiveNumber(row.video_count)'],
                    ['key' => 'showcase_added', 'label' => 'Trưng bày', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md-sm', 'truncate' => false, 'render' => 'formatLiveNumber(row.showcase_added)', 'title' => 'Số sản phẩm được thêm vào trang trưng bày của nhà sáng tạo'],
                    ['key' => 'product_imp', 'label' => 'Lượt hiển thị SP', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md', 'truncate' => false, 'render' => 'formatLiveNumber(row.product_imp)', 'title' => 'Lượt hiển thị sản phẩm của nhà sáng tạo'],
                    ['key' => 'commission', 'label' => 'Hoa hồng', 'sortable' => true, 'cellClass' => 'col-right', 'widthClass' => 'col-md', 'truncate' => false, 'render' => 'formatLiveMoney(row.commission)', 'title' => 'Hoa hồng ước tính tính dựa trên các đơn hàng đã thanh toán, chưa thanh toán và hoàn tiền. Bao gồm hoa hồng tiêu chuẩn và hoa hồng Quảng cáo cửa hàng.'],
                ];
            @endphp
            <div class="analysis-order-detail-section">
                <x-ui.cards type="section-card" title="Chi tiết hiệu suất từng creator" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions">
                            <span class="analysis-order-count" x-show="creatorDetailRows.length > 0" x-cloak>
                                <span x-text="filteredCreatorDetails.length"></span>/<span x-text="creatorDetailRows.length"></span> creator
                            </span>
                            <div class="filter-search-inline">
                                <div class="search-input-icon search-input-icon--action" @@click="applyCreatorSearch()">
                                    @svg('fas-search', 'search-icon')
                                </div>
                                <input type="text" placeholder="Tìm Creator" class="search-input" x-model="creatorSearchInput" @@keydown="applyCreatorSearchOnEnter($event)">
                            </div>
                            <select class="filter-select" x-model="channelFilter" title="Lọc theo kênh nội dung có GMV hoặc hoạt động">
                                <option value="">Tất cả kênh</option>
                                <option value="live">LIVE</option>
                                <option value="video">Video</option>
                                <option value="showcase">Trưng bày</option>
                            </select>
                            <x-ui.buttons type="button" variant="ghost" iconFa="undo" title="Đặt lại" @click="resetCreatorFilters()" />
                        </div>
                    </x-slot>
                    <x-ui.tabular
                        id="creator-detail-table"
                        tableClass="tabular-table analysis-top-table"
                        :columns="$creatorDetailColumns"
                        rows="filteredCreatorDetails"
                        loading="false"
                        loadingText=""
                        emptyText="Chưa có dữ liệu — hãy tải lên file phân tích"
                        :sortable="true"
                        rowKey="creator"
                    />
                </x-ui.cards>
            </div>
        </div>
    </div>
@endsection