@php
    $defYm       = Carbon\Carbon::now()->format('Y/m');
    $defDateFrom = Carbon\Carbon::now()->startOfMonth()->format('Y/m/d');
    $defDateTo   = Carbon\Carbon::now()->endOfMonth()->format('Y/m/d');
@endphp
<x-report.report-list :report="$report" :defs="$defs">

    {{-- 検索：対象年月（単一） --}}
    <x-slot name="search">
    <div x-data="search">
        <form id="search" method="POST" action="{{route('reports.data', ['report' => $report->id])}}">
            @csrf
            <x-list.search>
                <div class="search-grid">
                    <div>
                        <div>
                            <label>対象年月</label>
                            <div>
                                <x-input.date_ym id="target_month" name="target_month"
                                    value="{{ old('target_month', $defYm) }}" />
                                <input type="hidden" id="shipment_actual_date_from"
                                    name="shipment_actual_date_from"
                                    value="{{ old('shipment_actual_date_from', $defDateFrom) }}">
                                <input type="hidden" id="shipment_actual_date_to"
                                    name="shipment_actual_date_to"
                                    value="{{ old('shipment_actual_date_to', $defDateTo) }}">
                                <input type="hidden" id="target_month_default" value="{{ $defYm }}">
                            </div>
                        </div>
                    </div>
                </div>
                <x-slot name="action">
                    <x-button.reset id="btn_reset" />
                    <x-button.search id="btn_search" />
                </x-slot>
            </x-list.search>
        </form>
    </div>
    </x-slot>

    {{-- モーダル --}}
    <x-slot name="under">
        <x-modal.search key="search" id="search" />
        <x-modal.frame key="frame" id="frame" />
    </x-slot>

    {{-- script --}}
    <x-slot name="script">

    {{-- 小計・総計行のスタイル --}}
    <style>
        .ag-row.row-subtotal-lv2 .ag-cell { font-weight: bold; }
        .ag-row.row-subtotal-lv1 .ag-cell { background-color: #f3f4f6 !important; font-weight: bold; }
        .ag-row.row-grand-total  .ag-cell { background-color: #e5e7eb !important; font-weight: bold; }
    </style>

    <script>
        /* 対象年月 (YYYY/MM) → 月初/月末 DATE 変換 */
        function syncYmToDateRange() {
            const ym = document.getElementById('target_month').value;
            if (!ym) return;
            const m = ym.match(/^(\d{4})\D(\d{1,2})$/);
            if (!m) return;
            const year    = m[1];
            const month   = String(parseInt(m[2], 10)).padStart(2, '0');
            const lastDay = new Date(parseInt(year, 10), parseInt(month, 10), 0).getDate();
            document.getElementById('shipment_actual_date_from').value =
                `${year}/${month}/01`;
            document.getElementById('shipment_actual_date_to').value =
                `${year}/${month}/${String(lastDay).padStart(2, '0')}`;
        }

        /* 小計行注入：リーフデータから 課計／部計／総計 を組み立てる */
        const AMOUNT_FIELDS = [
            'sales_budget_amount',
            'sales_amount',
            'return_amount',
            'normal_discount_amount',
            'policy_discount_amount',
            'discount_amount',
            'amount',
            'gross_profit_budget_amount',
            'gross_profit_amount',
        ];

        function newAcc() {
            const acc = {};
            AMOUNT_FIELDS.forEach((f) => { acc[f] = 0; });
            return acc;
        }
        function accumulate(acc, row) {
            AMOUNT_FIELDS.forEach((f) => {
                acc[f] += Number(row?.[f] ?? 0);
            });
        }
        function calcRate(num, den) {
            return (!den || Number(den) === 0) ? 0 : (Number(num) / Number(den) * 100);
        }
        function finalizeAcc(acc) {
            const r = { ...acc };
            r.achievement_rate              = calcRate(r.amount,              r.sales_budget_amount);
            r.gross_profit_achievement_rate = calcRate(r.gross_profit_amount, r.gross_profit_budget_amount);
            return r;
        }

        function injectSubtotalRows(leafRows) {
            if (!Array.isArray(leafRows) || leafRows.length === 0) return [];

            const sorted = [...leafRows].sort((a, b) => {
                const ax1 = a.department_lv1_sort_order ?? Number.MAX_SAFE_INTEGER;
                const bx1 = b.department_lv1_sort_order ?? Number.MAX_SAFE_INTEGER;
                if (ax1 !== bx1) return ax1 - bx1;
                const ax2 = a.department_lv2_sort_order ?? Number.MAX_SAFE_INTEGER;
                const bx2 = b.department_lv2_sort_order ?? Number.MAX_SAFE_INTEGER;
                if (ax2 !== bx2) return ax2 - bx2;
                const au = a.user_sort_order ?? Number.MAX_SAFE_INTEGER;
                const bu = b.user_sort_order ?? Number.MAX_SAFE_INTEGER;
                return au - bu;
            });

            const result   = [];
            const grandAcc = newAcc();
            let lv1Acc     = newAcc();
            let lv2Acc     = newAcc();
            let curLv1     = null;
            let curLv2     = null;

            const flushLv2 = () => {
                if (curLv2 == null && curLv1 == null) return;
                result.push({
                    department_lv1_name: curLv1,
                    department_lv2_name: curLv2 ?? '',
                    user_name: '計',
                    is_total_row: true,
                    total_row_level: 'lv2',
                    ...finalizeAcc(lv2Acc),
                });
                lv2Acc = newAcc();
            };
            const flushLv1 = () => {
                if (curLv1 == null) return;
                result.push({
                    department_lv1_name: '計',
                    department_lv2_name: '',
                    user_name: '',
                    is_total_row: true,
                    total_row_level: 'lv1',
                    ...finalizeAcc(lv1Acc),
                });
                lv1Acc = newAcc();
            };

            for (const row of sorted) {
                const d1 = row.department_lv1_name ?? null;
                const d2 = (row.department_lv2_name != null && String(row.department_lv2_name).length > 0)
                            ? String(row.department_lv2_name) : '';

                if (curLv1 !== d1) {
                    flushLv2();
                    flushLv1();
                    curLv1 = d1;
                    curLv2 = d2;
                } else if (curLv2 !== d2) {
                    flushLv2();
                    curLv2 = d2;
                }

                result.push({ ...row, department_lv2_name: d2 });
                accumulate(lv1Acc, row);
                accumulate(lv2Acc, row);
                accumulate(grandAcc, row);
            }
            flushLv2();
            flushLv1();

            result.push({
                department_lv1_name: '総計',
                department_lv2_name: '',
                user_name: '',
                is_total_row: true,
                total_row_level: 'grand',
                ...finalizeAcc(grandAcc),
            });

            return result;
        }

        /* 列定義の補強：部/課列に cellRenderer を設定して「上の行と同じ値なら空表示」を実現。
           PDFのセル結合レイアウトと同等の視覚効果を、ag-Grid の Cell Span に依存せずに実現。 */
        function enhanceColDefs(coldef) {
            if (!Array.isArray(coldef)) return coldef;

            // 「上の行と同じ値なら空」を返す cellRenderer ファクトリ
            const makeMergedRenderer = (field, opts = {}) => (params) => {
                const node = params.node;
                const api  = params.api;
                if (!node || node.rowIndex == null || !node.data) return params.value ?? '';

                const isCurDeptOrGrand = node.data.is_total_row &&
                    (node.data.total_row_level === 'lv1' || node.data.total_row_level === 'grand');

                // 部計・総計行の課セルは独立表示（マージしない）
                if (opts.breakOnDeptTotal && isCurDeptOrGrand) {
                    return params.value ?? '';
                }

                const prevNode = api.getDisplayedRowAtIndex(node.rowIndex - 1);
                if (!prevNode || !prevNode.data) return params.value ?? '';

                // 上が部計・総計なら、次のグループの先頭セルとして必ず値を表示
                if (opts.breakOnDeptTotal) {
                    const isPrevDeptOrGrand = prevNode.data.is_total_row &&
                        (prevNode.data.total_row_level === 'lv1' || prevNode.data.total_row_level === 'grand');
                    if (isPrevDeptOrGrand) return params.value ?? '';
                }

                const cur  = node.data[field] ?? '';
                const prev = prevNode.data[field] ?? '';
                if (cur !== '' && cur === prev) return ''; // 上と同じ値なら空表示
                return params.value ?? '';
            };

            coldef.forEach((col) => {
                switch (col.field) {
                    case 'department_lv1_name':
                        col.cellRenderer = makeMergedRenderer('department_lv1_name', { breakOnDeptTotal: false });
                        break;

                    case 'department_lv2_name':
                        col.cellRenderer = makeMergedRenderer('department_lv2_name', { breakOnDeptTotal: true });
                        break;

                    // 達成率（achievement_rate / gross_profit_achievement_rate）は
                    // ここで valueFormatter を上書きしない。これらは aggregate_type=6(Ratio) のため
                    // grid.js が valueGetter=ratioValue でセル値を {num,den,value} オブジェクト化する。
                    // 標準の percentFormat がオブジェクトを解釈し切り捨て率を表示するので、それに任せる。
                }
            });

            return coldef;
        }

        /* ============================================================
         * Excel 出力用：画面と同じ「上と同じ値なら空」ロジックを processCellCallback で適用。
         * 画面の cellRenderer は Excel出力では無視されるため、Excel側でも同隚の処理が必要。
         * processCellCallback は各セルの出力文字列を返し、空文字を返せば Excel セルは空になる。
         * ============================================================ */
        function excelProcessCellCallback(params) {
            const node     = params.node;
            const colField = params.column?.getColDef?.()?.field;
            const api      = params.api;
            if (!node || node.rowIndex == null || !node.data) return params.value ?? '';

            // 達成率列は valueGetter(ratioValue) によりセル値が {num,den,value} オブジェクト。
            // そのまま返すと Excel に [object Object] と出るため、切り捨て済みの数値 .value を返す。
            // 「%」表記は number-format-percent セルクラス（書式 0.0"%"）が担う。
            if (colField === 'achievement_rate' || colField === 'gross_profit_achievement_rate') {
                const v = params.value;
                return (v != null && typeof v === 'object') ? (v.value ?? 0) : (v ?? '');
            }

            // 「上と同じ値なら空」を適用するのは 部・課 の2列のみ
            if (colField !== 'department_lv1_name' && colField !== 'department_lv2_name') {
                return params.value ?? '';
            }

            const breakOnDeptTotal = (colField === 'department_lv2_name');
            const isCurDeptOrGrand = node.data.is_total_row &&
                (node.data.total_row_level === 'lv1' || node.data.total_row_level === 'grand');
            if (breakOnDeptTotal && isCurDeptOrGrand) return params.value ?? '';

            const prevNode = api.getDisplayedRowAtIndex(node.rowIndex - 1);
            if (!prevNode || !prevNode.data) return params.value ?? '';

            if (breakOnDeptTotal) {
                const isPrevDeptOrGrand = prevNode.data.is_total_row &&
                    (prevNode.data.total_row_level === 'lv1' || prevNode.data.total_row_level === 'grand');
                if (isPrevDeptOrGrand) return params.value ?? '';
            }

            const cur  = node.data[colField] ?? '';
            const prev = prevNode.data[colField] ?? '';
            if (cur !== '' && cur === prev) return '';
            return params.value ?? '';
        }

        document.addEventListener('alpine:init', () => {
            Alpine.data('search', List.search);
            Alpine.data('grid', () => {
                const gridData = Grid.list();
                const originalGetGridOptions = gridData.getGridOptions;
                const originalSetDef         = gridData.setDef;

                return {
                    ...gridData,

                    getGridOptions() {
                        const options = originalGetGridOptions.call(this);
                        options.pagination = false; // 全件表示（ページング無効）
                        options.defaultColDef = {
                            ...(options.defaultColDef || {}),
                            sortable: false,
                            filter: false,
                            resizable: true,
                        };
                        options.getRowClass = (params) => {
                            const lvl = params.data?.total_row_level;
                            if (lvl === 'lv2')   return 'row-subtotal-lv2';
                            if (lvl === 'lv1')   return 'row-subtotal-lv1';
                            if (lvl === 'grand') return 'row-grand-total';
                            return '';
                        };
                        return options;
                    },

                    setDef(data) {
                        if (data && Array.isArray(data.coldef)) {
                            data.coldef = enhanceColDefs(data.coldef);
                        }
                        return originalSetDef.call(this, data);
                    },

                    /* Excel出力：processCellCallback で表示と同じセル結合レイアウトを再現。
                       ファイル名はレポート名を使う（this.$root.dataset.title は未設定のため使わない）。
                       シート名は Excel の31文字制限に合わせてトリム、使えない文字を除去して安全化。 */
                    excel() {
                        const reportName = @json($report->report_name);
                        const fileName   = reportName + '_' + Editor.now() + '.xlsx';
                        // Excel シート名に使えない文字を除去し、31文字以内にトリム
                        const sheetName  = reportName
                            .replace(/[\\\/\?\*\[\]:]/g, '')
                            .substring(0, 31);
                        this.gridApi.exportDataAsExcel({
                            fileName: fileName,
                            sheetName: sheetName,
                            processCellCallback: excelProcessCellCallback,
                        });
                    },

                    getData(param = '') {
                        EntryAction.disableAction();
                        const form = $('#' + this.$root.dataset.form);
                        const data = EntryAction.getData(form);
                        const axiosPost = EntryAction.getPost();
                        const url = new URL(form.action + param);
                        Action.onLoading(); // 標準 getData と同様にローディングオーバーレイを表示
                        axiosPost
                            .post(url, data)
                            .then((response) => {
                                if ('coldef' in response.data) {
                                    this.setDef(response.data);
                                }
                                const leafRows = response.data.data || [];
                                console.log('[sales-dept-monthly-budget-actual] received leaf rows:', leafRows.length);
                                const enriched = injectSubtotalRows(leafRows);
                                console.log('[sales-dept-monthly-budget-actual] injected subtotals:',
                                    'leaf=', leafRows.length, 'enriched=', enriched.length);
                                this.gridApi.setGridOption('rowData', enriched);
                                Action.onLoading(false);
                                // 件数超過メッセージ
                                if (response.data.truncated) {
                                    const maxRows = Number(response.data.maxRows).toLocaleString();
                                    toast('error', `検索結果が${maxRows}件を超えました。条件を絞り込んでください。`);
                                }
                            })
                            .catch((error) => {
                                console.error('データ取得エラー:', error);
                                toast('error', 'データ取得に失敗しました。条件を絞り込んでください。');
                                Action.onLoading(false);
                            });
                    },
                };
            });
        });

        window.addEventListener('load', () => {
            syncYmToDateRange();

            const targetMonth = document.getElementById('target_month');
            if (targetMonth) {
                targetMonth.addEventListener('change', syncYmToDateRange);
            }

            if ($('#btn_search')) {
                $('#btn_search').addEventListener('click', (e) => {
                    syncYmToDateRange();
                    Alpine.$data($('#grid')).search();
                });
            }
            if ($('#btn_reset')) {
                $('#btn_reset').addEventListener('click', (e) => {
                    Action.resetForm($('#search'));
                    const defYm = document.getElementById('target_month_default').value;
                    const tmEl  = document.getElementById('target_month');
                    if (tmEl && tmEl._flatpickr) {
                        tmEl._flatpickr.setDate(defYm, true);
                    } else if (tmEl) {
                        tmEl.value = defYm;
                    }
                    syncYmToDateRange();
                });
            }
        });
    </script>
    </x-slot>

</x-report.report-list>