@extends('layouts.app')
@section('title', 'Profit & Loss')
@section('body-class', 'page-profit-loss')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Profit & Loss</li>
@endsection

@section('content')
@php
    $companyId = auth()->user()->company_id;
    $money = function ($amount) use ($companyId) {
        $amount = (float) $amount;
        if (abs($amount) < 0.005) return '—';
        $formatted = \App\Helpers\NumberHelper::formatAmount(abs($amount), $companyId);
        return $amount < 0 ? '(' . $formatted . ')' : $formatted;
    };
    $dateQuery = ['date_from' => $dateFrom, 'date_to' => $dateTo];
    $companyName = auth()->user()->company?->name ?? config('app.name');
    $periodLabel = \Carbon\Carbon::parse($dateFrom)->format('d M Y') . ' to ' . \Carbon\Carbon::parse($dateTo)->format('d M Y');
@endphp

<div class="pl-report-wrap">
    <div class="pl-report-toolbar no-print">
        <div class="pl-report-actions">
            <button type="button" class="pl-report-action-btn" id="plPrintReport">
                <i class="bi bi-printer"></i><span>Print</span>
            </button>
            <a href="{{ route('reports.profit-loss.export', $exportQuery ?? request()->query()) }}" class="pl-report-action-btn">
                <i class="bi bi-download"></i><span>Export</span>
            </a>
            <button type="button" class="pl-report-action-btn" data-bs-toggle="modal" data-bs-target="#plEmailModal">
                <i class="bi bi-envelope"></i><span>Email</span>
            </button>
        </div>
    </div>

    <div class="pl-report-heading">
        <div class="pl-report-company">{{ $companyName }}</div>
        <h2 class="pl-report-title">Profit & Loss</h2>
        <div class="pl-report-period">{{ $periodLabel }}</div>
    </div>

    <div class="pl-report-filters no-print">
        <form method="GET" action="{{ route('reports.profit-loss') }}" id="plReportFilterForm">
            <div class="pl-report-filter-row pl-report-filter-row-4">
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">From</label>
                    <div class="input-group axis-date-field">
                        <input type="text" name="date_from" class="form-control axis-report-datepicker" value="{{ $dateFrom }}" autocomplete="off" placeholder="dd-mm-yyyy">
                        <button type="button" class="input-group-text axis-date-trigger" data-axis-date-open aria-label="Open calendar">
                            <i class="bi bi-calendar3"></i>
                        </button>
                    </div>
                </div>
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">To</label>
                    <div class="input-group axis-date-field">
                        <input type="text" name="date_to" class="form-control axis-report-datepicker" value="{{ $dateTo }}" autocomplete="off" placeholder="dd-mm-yyyy">
                        <button type="button" class="input-group-text axis-date-trigger" data-axis-date-open aria-label="Open calendar">
                            <i class="bi bi-calendar3"></i>
                        </button>
                    </div>
                </div>
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">Columns</label>
                    <select name="columns" class="form-select">
                        @foreach($filterOptions['columns'] as $value => $label)
                            <option value="{{ $value }}" {{ ($filters['columns'] ?? 'total') === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">Dimension</label>
                    @include('reports.profit-loss._dimension-picker', [
                        'dimensionTree' => $filterOptions['dimensionTree'] ?? [],
                        'selectedIds' => $filters['dimension_value_ids'] ?? [],
                    ])
                </div>
            </div>
            <div class="pl-report-filter-row pl-report-filter-row-5">
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">Account Type</label>
                    @include('reports.profit-loss._multi-filter-picker', [
                        'pickerId' => 'plAccountSectionPicker',
                        'emptyLabel' => 'All account types',
                        'searchPlaceholder' => 'Search account types...',
                        'inputName' => 'account_sections[]',
                        'selectedValues' => $filters['account_sections'] ?? [],
                        'options' => $filterOptions['accountTypes'],
                        'toggleLabel' => $selectedAccountSectionsLabel ?? 'All account types',
                    ])
                </div>
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">Voucher Type</label>
                    @include('reports.profit-loss._multi-filter-picker', [
                        'pickerId' => 'plVoucherTypePicker',
                        'emptyLabel' => 'All voucher types',
                        'searchPlaceholder' => 'Search voucher types...',
                        'inputName' => 'voucher_types[]',
                        'selectedValues' => $filters['voucher_types'] ?? [],
                        'options' => $filterOptions['voucherTypes'],
                        'toggleLabel' => $selectedVoucherTypesLabel ?? 'All voucher types',
                    ])
                </div>
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">Names</label>
                    @include('reports.profit-loss._party-picker', [
                        'filterOptions' => $filterOptions,
                        'filters' => $filters,
                        'selectedPartyLabel' => $selectedPartyLabel ?? 'All names',
                    ])
                </div>
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">Amount min</label>
                    <input type="number" name="amount_min" class="form-control" value="{{ $filters['amount_min'] ?? '' }}" step="0.01" min="0" placeholder="">
                </div>
                <div class="pl-report-filter-field">
                    <label class="form-label fw-semibold">Amount max</label>
                    <input type="number" name="amount_max" class="form-control" value="{{ $filters['amount_max'] ?? '' }}" step="0.01" min="0" placeholder="">
                </div>
            </div>
            <div class="pl-report-filter-actions">
                <div class="d-flex align-items-center gap-3">
                    <div class="form-check mb-0">
                        <input class="form-check-input" type="checkbox" name="include_zero" value="1" id="includeZero" {{ $includeZero ? 'checked' : '' }}>
                        <label class="form-check-label" for="includeZero">Include zero rows</label>
                    </div>
                    <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" id="plCollapseAll">
                        <i class="bi bi-chevron-bar-contract me-1"></i>Collapse all
                    </button>
                </div>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-search me-1"></i>Apply</button>
                    <a href="{{ route('reports.profit-loss') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-x-lg me-1"></i>Clear</a>
                </div>
            </div>
        </form>
    </div>

    <div class="pl-report-body">
        <div class="table-responsive">
            <table class="table mb-0 pl-report-table">
                @if(!empty($columnPeriods))
                    <thead>
                        <tr>
                            <th class="pl-report-column-header"></th>
                            @foreach($columnPeriods as $period)
                                <th class="text-end pl-report-column-header">{{ $period['label'] }}</th>
                            @endforeach
                            <th class="text-end pl-report-column-header">Total</th>
                        </tr>
                    </thead>
                @endif
                <tbody>
                    @foreach(['income', 'cost_of_goods_sold'] as $section)
                        @include('reports.profit-loss._section', ['group' => $groups[$section]])
                    @endforeach

                    <tr class="pl-report-total-row">
                        <td class="fw-bold text-end">Gross Profit</td>
                        @include('reports.profit-loss._period-amount-cells', [
                            'amounts' => $totals['periods']['gross_profit'] ?? $totals['gross_profit'],
                            'total' => $totals['gross_profit'],
                            'cellClass' => 'fw-bold',
                        ])
                    </tr>

                    @include('reports.profit-loss._section', ['group' => $groups['expenses']])

                    <tr class="pl-report-total-row">
                        <td class="fw-bold text-end">Net Operating Income</td>
                        @include('reports.profit-loss._period-amount-cells', [
                            'amounts' => $totals['periods']['operating_income'] ?? $totals['operating_income'],
                            'total' => $totals['operating_income'],
                            'cellClass' => 'fw-bold',
                        ])
                    </tr>

                    @foreach(['other_income', 'other_expense'] as $section)
                        @include('reports.profit-loss._section', ['group' => $groups[$section]])
                    @endforeach

                    <tr class="pl-report-total-row pl-report-row-final">
                        <td class="fw-bold text-end">Net Income</td>
                        @include('reports.profit-loss._period-amount-cells', [
                            'amounts' => $totals['periods']['net_income'] ?? $totals['net_income'],
                            'total' => $totals['net_income'],
                            'cellClass' => 'fw-bold',
                        ])
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('modals')
@php
    $emailFormat = old('format', 'pdf');
    $defaultPaperSize = old('paper_size', 'a4');
    $defaultLayout = old('layout', 'portrait');
    $paperSizeOptions = ['a4' => 'A4', 'letter' => 'Letter', 'legal' => 'Legal'];
    $layoutOptions = ['portrait' => 'Portrait', 'landscape' => 'Landscape'];
@endphp
<div class="modal fade" id="plEmailModal" tabindex="-1" aria-labelledby="plEmailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('reports.profit-loss.email', $exportQuery ?? request()->query()) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="plEmailModalLabel">Email Profit &amp; Loss Report</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold d-block">Attachment Format</label>
                        <div class="btn-group w-100 pl-email-format-group" role="group" aria-label="Attachment format">
                            <input type="radio" class="btn-check" name="format" id="plEmailFormatPdf" value="pdf" {{ $emailFormat === 'pdf' ? 'checked' : '' }} required>
                            <label class="btn btn-outline-primary" for="plEmailFormatPdf">
                                <i class="bi bi-file-earmark-pdf me-1"></i>PDF (.pdf)
                            </label>
                            <input type="radio" class="btn-check" name="format" id="plEmailFormatXlsx" value="xlsx" {{ $emailFormat === 'xlsx' ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="plEmailFormatXlsx">
                                <i class="bi bi-file-earmark-excel me-1"></i>Excel (.xlsx)
                            </label>
                        </div>
                    </div>
                    <div class="mb-3" id="plEmailPdfOptions">
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold" for="plEmailPaperSize">Paper Size</label>
                                <select name="paper_size" id="plEmailPaperSize" class="form-select">
                                    @foreach($paperSizeOptions as $value => $label)
                                        <option value="{{ $value }}" {{ $defaultPaperSize === $value ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label class="form-label fw-semibold" for="plEmailLayout">Layout</label>
                                <select name="layout" id="plEmailLayout" class="form-select">
                                    @foreach($layoutOptions as $value => $label)
                                        <option value="{{ $value }}" {{ $defaultLayout === $value ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Recipient Email</label>
                        <input type="email" name="recipient" class="form-control" value="{{ old('recipient', auth()->user()->email) }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Subject</label>
                        <input type="text" name="subject" class="form-control" value="{{ old('subject', 'Profit & Loss — ' . $companyName . ' (' . $periodLabel . ')') }}">
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-semibold">Message</label>
                        <textarea name="message" class="form-control" rows="4">{{ old('message', "Please find the attached Profit & Loss report for {$companyName}.\n\nPeriod: {$periodLabel}") }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-send me-1"></i>Send Email
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    initPlEmailModal();
    initPlDimensionPicker();
    initPlMultiFilterPickers();
    initPlPartyPicker();
});

function initPlEmailModal() {
    var modalEl = document.getElementById('plEmailModal');
    if (!modalEl) {
        return;
    }

    function syncPlEmailPdfOptions() {
        var pdfSelected = modalEl.querySelector('#plEmailFormatPdf')?.checked;
        var pdfOptions = document.getElementById('plEmailPdfOptions');

        if (!pdfOptions) {
            return;
        }

        pdfOptions.style.display = pdfSelected ? '' : 'none';
        pdfOptions.querySelectorAll('select').forEach(function (field) {
            field.disabled = !pdfSelected;
        });
    }

    modalEl.querySelectorAll('input[name="format"]').forEach(function (input) {
        input.addEventListener('change', syncPlEmailPdfOptions);
    });

    syncPlEmailPdfOptions();

    @if(old('recipient'))
    if (typeof bootstrap !== 'undefined') {
        bootstrap.Modal.getOrCreateInstance(modalEl).show();
    }
    @endif
}

function initPlDimensionPicker() {
    var picker = document.getElementById('plDimensionPicker');
    if (!picker) {
        return;
    }

    var tree = [];
    var selected = new Set();

    try {
        tree = JSON.parse(picker.dataset.tree || '[]');
        JSON.parse(picker.dataset.selected || '[]').forEach(function (id) {
            selected.add(String(id));
        });
    } catch (error) {
        tree = [];
    }

    var toggleBtn = document.getElementById('plDimensionPickerToggle');
    var menu = document.getElementById('plDimensionPickerMenu');
    var treeEl = document.getElementById('plDimensionPickerTree');
    var searchInput = document.getElementById('plDimensionPickerSearch');
    var emptyEl = document.getElementById('plDimensionPickerEmpty');
    var labelEl = document.getElementById('plDimensionPickerLabel');
    var inputsEl = document.getElementById('plDimensionPickerInputs');
    var clearBtn = document.getElementById('plDimensionPickerClear');
    var expanded = new Set();
    var nameMap = {};

    function walk(nodes, fn) {
        nodes.forEach(function (node) {
            fn(node);
            if (node.children && node.children.length) {
                walk(node.children, fn);
            }
        });
    }

    walk(tree, function (node) {
        if (node.selectable) {
            nameMap[String(node.id)] = node.name;
        } else if (node.children && node.children.length) {
            expanded.add(String(node.id));
        }
    });

    function syncInputs() {
        if (!inputsEl) {
            return;
        }

        inputsEl.innerHTML = '';
        Array.from(selected).sort(function (a, b) {
            return Number(a) - Number(b);
        }).forEach(function (id) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'dimension_value_ids[]';
            input.value = id;
            inputsEl.appendChild(input);
        });
    }

    function syncLabel() {
        if (!labelEl) {
            return;
        }

        if (selected.size === 0) {
            labelEl.textContent = 'All dimensions';
            return;
        }

        if (selected.size === 1) {
            labelEl.textContent = nameMap[Array.from(selected)[0]] || '1 dimension selected';
            return;
        }

        labelEl.textContent = selected.size + ' dimensions selected';
    }

    function nodeMatches(node, term) {
        if (!term) {
            return true;
        }

        var haystack = ((node.name || '') + ' ' + (node.code || '')).toLowerCase();
        return haystack.indexOf(term) !== -1;
    }

    function subtreeMatches(node, term) {
        if (!term) {
            return true;
        }

        if (nodeMatches(node, term)) {
            return true;
        }

        return (node.children || []).some(function (child) {
            return subtreeMatches(child, term);
        });
    }

    function renderNodes(nodes, depth) {
        return nodes.map(function (node) {
            var id = String(node.id);
            var term = (searchInput?.value || '').trim().toLowerCase();
            var hasChildren = !!(node.children && node.children.length);

            if (term && !subtreeMatches(node, term)) {
                return '';
            }

            if (!node.selectable) {
                var groupChildren = renderNodes(node.children || [], depth + 1);
                if (!groupChildren) {
                    return '';
                }

                return `
                    <div class="pl-dimension-picker-item" style="padding-left:${depth * 16}px">
                        <button type="button" class="pl-dimension-picker-toggle-btn ${hasChildren ? '' : 'is-hidden'}" data-dimension-expand="${id}" aria-label="Expand">
                            <i class="bi ${expanded.has(id) ? 'bi-chevron-down' : 'bi-chevron-right'}" style="font-size:11px"></i>
                        </button>
                        <div class="pl-dimension-picker-group">${node.name}</div>
                    </div>
                    <div class="${expanded.has(id) ? '' : 'd-none'}" data-dimension-children="${id}">
                        ${groupChildren}
                    </div>
                `;
            }

            var childHtml = hasChildren && expanded.has(id) ? renderNodes(node.children, depth + 1) : '';
            var code = node.code ? `<span class="pl-dimension-picker-option-code">${node.code}</span>` : '';

            return `
                <div class="pl-dimension-picker-item" style="padding-left:${depth * 16}px">
                    <button type="button" class="pl-dimension-picker-toggle-btn ${hasChildren ? '' : 'is-hidden'}" data-dimension-expand="${id}" aria-label="Expand">
                        <i class="bi ${expanded.has(id) ? 'bi-chevron-down' : 'bi-chevron-right'}" style="font-size:11px"></i>
                    </button>
                    <label class="pl-dimension-picker-option">
                        <input type="checkbox" value="${id}" data-dimension-checkbox ${selected.has(id) ? 'checked' : ''}>
                        <span class="pl-dimension-picker-option-label">${node.name}</span>
                        ${code}
                    </label>
                </div>
                ${hasChildren ? `<div class="${expanded.has(id) ? '' : 'd-none'}" data-dimension-children="${id}">${childHtml}</div>` : ''}
            `;
        }).join('');
    }

    function renderTree() {
        if (!treeEl) {
            return;
        }

        var html = renderNodes(tree, 0);
        treeEl.innerHTML = html;
        emptyEl?.classList.toggle('d-none', html.trim() !== '');
    }

    function closeMenu() {
        menu?.classList.add('d-none');
        toggleBtn?.setAttribute('aria-expanded', 'false');
    }

    toggleBtn?.addEventListener('click', function () {
        var isOpen = !menu?.classList.contains('d-none');
        if (isOpen) {
            closeMenu();
            return;
        }

        menu?.classList.remove('d-none');
        toggleBtn.setAttribute('aria-expanded', 'true');
        searchInput?.focus();
    });

    document.addEventListener('click', function (event) {
        if (!picker.contains(event.target)) {
            closeMenu();
        }
    });

    treeEl?.addEventListener('click', function (event) {
        var expandBtn = event.target.closest('[data-dimension-expand]');
        if (expandBtn) {
            event.preventDefault();
            var nodeId = expandBtn.getAttribute('data-dimension-expand');
            if (expanded.has(nodeId)) {
                expanded.delete(nodeId);
            } else {
                expanded.add(nodeId);
            }
            renderTree();
            return;
        }
    });

    treeEl?.addEventListener('change', function (event) {
        var checkbox = event.target.closest('[data-dimension-checkbox]');
        if (!checkbox) {
            return;
        }

        if (checkbox.checked) {
            selected.add(checkbox.value);
        } else {
            selected.delete(checkbox.value);
        }

        syncInputs();
        syncLabel();
    });

    searchInput?.addEventListener('input', function () {
        if (searchInput.value.trim()) {
            walk(tree, function (node) {
                if (!node.selectable && node.children && node.children.length) {
                    expanded.add(String(node.id));
                }
                if (node.selectable && node.children && node.children.length) {
                    expanded.add(String(node.id));
                }
            });
        }
        renderTree();
    });

    clearBtn?.addEventListener('click', function () {
        selected.clear();
        syncInputs();
        syncLabel();
        renderTree();
    });

    syncInputs();
    syncLabel();
    renderTree();
}

function initPlMultiFilterPickers() {
    document.querySelectorAll('.pl-multi-filter-picker').forEach(function (picker) {
        var selected = new Set();
        var labelMap = {};

        try {
            JSON.parse(picker.dataset.selected || '[]').forEach(function (value) {
                selected.add(String(value));
            });
            labelMap = JSON.parse(picker.dataset.labels || '{}');
        } catch (error) {
            selected = new Set();
            labelMap = {};
        }

        var toggleBtn = picker.querySelector('[data-multi-filter-toggle]');
        var menu = picker.querySelector('[data-multi-filter-menu]');
        var listEl = picker.querySelector('[data-multi-filter-list]');
        var searchInput = picker.querySelector('[data-multi-filter-search]');
        var emptyEl = picker.querySelector('[data-multi-filter-empty]');
        var labelEl = picker.querySelector('[data-multi-filter-label]');
        var inputsEl = picker.querySelector('[data-multi-filter-inputs]');
        var clearBtn = picker.querySelector('[data-multi-filter-clear]');
        var emptyLabel = picker.dataset.emptyLabel || 'All';

        function syncInputs() {
            if (!inputsEl) {
                return;
            }

            var inputName = picker.dataset.inputName || 'items[]';
            inputsEl.innerHTML = '';
            Array.from(selected).sort().forEach(function (value) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = inputName;
                input.value = value;
                inputsEl.appendChild(input);
            });
        }

        function syncLabel() {
            if (!labelEl) {
                return;
            }

            if (selected.size === 0) {
                labelEl.textContent = emptyLabel;
                return;
            }

            if (selected.size === 1) {
                var only = Array.from(selected)[0];
                labelEl.textContent = labelMap[only] || only;
                return;
            }

            labelEl.textContent = selected.size + ' selected';
        }

        function syncCheckboxes() {
            picker.querySelectorAll('[data-multi-filter-checkbox]').forEach(function (checkbox) {
                checkbox.checked = selected.has(checkbox.value);
            });
        }

        function filterOptions() {
            var term = (searchInput?.value || '').trim().toLowerCase();
            var visible = 0;

            picker.querySelectorAll('[data-multi-filter-option]').forEach(function (option) {
                var label = (option.dataset.label || option.textContent || '').toLowerCase();
                var show = !term || label.indexOf(term) !== -1;
                option.classList.toggle('d-none', !show);
                if (show) {
                    visible++;
                }
            });

            emptyEl?.classList.toggle('d-none', visible > 0);
            listEl?.classList.toggle('d-none', visible === 0);
        }

        function closeMenu() {
            menu?.classList.add('d-none');
            toggleBtn?.setAttribute('aria-expanded', 'false');
        }

        toggleBtn?.addEventListener('click', function () {
            var isOpen = !menu?.classList.contains('d-none');
            if (isOpen) {
                closeMenu();
                return;
            }

            menu?.classList.remove('d-none');
            toggleBtn.setAttribute('aria-expanded', 'true');
            searchInput?.focus();
            filterOptions();
        });

        document.addEventListener('click', function (event) {
            if (!picker.contains(event.target)) {
                closeMenu();
            }
        });

        picker.addEventListener('change', function (event) {
            var checkbox = event.target.closest('[data-multi-filter-checkbox]');
            if (!checkbox) {
                return;
            }

            if (checkbox.checked) {
                selected.add(checkbox.value);
            } else {
                selected.delete(checkbox.value);
            }

            syncInputs();
            syncLabel();
        });

        searchInput?.addEventListener('input', filterOptions);

        clearBtn?.addEventListener('click', function () {
            selected.clear();
            syncInputs();
            syncLabel();
            syncCheckboxes();
            if (searchInput) {
                searchInput.value = '';
            }
            filterOptions();
        });

        syncInputs();
        syncLabel();
        syncCheckboxes();
        filterOptions();
    });
}

function initPlPartyPicker() {
    var picker = document.getElementById('plPartyPicker');
    if (!picker) {
        return;
    }

    var tree = [];
    var selected = new Set();

    try {
        tree = JSON.parse(picker.dataset.tree || '[]');
        JSON.parse(picker.dataset.selected || '[]').forEach(function (value) {
            if (value) {
                selected.add(String(value));
            }
        });
    } catch (error) {
        tree = [];
        selected = new Set();
    }

    var toggleBtn = document.getElementById('plPartyPickerToggle');
    var menu = document.getElementById('plPartyPickerMenu');
    var treeEl = document.getElementById('plPartyPickerTree');
    var searchInput = document.getElementById('plPartyPickerSearch');
    var emptyEl = document.getElementById('plPartyPickerEmpty');
    var labelEl = document.getElementById('plPartyPickerLabel');
    var inputsEl = document.getElementById('plPartyPickerInputs');
    var clearBtn = document.getElementById('plPartyPickerClear');
    var expanded = new Set();
    var labelMap = {};

    function walk(nodes, fn) {
        nodes.forEach(function (node) {
            fn(node);
            if (node.children && node.children.length) {
                walk(node.children, fn);
            }
        });
    }

    walk(tree, function (node) {
        if (node.selectable && node.value) {
            labelMap[node.value] = node.name + (node.type_label ? ' (' + node.type_label + ')' : '');
        } else if (node.children && node.children.length) {
            expanded.add(String(node.id));
        }
    });

    function syncInputs() {
        if (!inputsEl) {
            return;
        }

        inputsEl.innerHTML = '';
        Array.from(selected).sort().forEach(function (value) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'parties[]';
            input.value = value;
            inputsEl.appendChild(input);
        });
    }

    function syncLabel() {
        if (!labelEl) {
            return;
        }

        if (selected.size === 0) {
            labelEl.textContent = 'All names';
            return;
        }

        if (selected.size === 1) {
            var only = Array.from(selected)[0];
            labelEl.textContent = labelMap[only] || '1 name selected';
            return;
        }

        labelEl.textContent = selected.size + ' names selected';
    }

    function nodeMatches(node, term) {
        if (!term) {
            return true;
        }

        var haystack = ((node.code || '') + ' ' + (node.name || '') + ' ' + (node.type_label || '')).toLowerCase();
        return haystack.indexOf(term) !== -1;
    }

    function subtreeMatches(node, term) {
        if (!term) {
            return true;
        }

        if (nodeMatches(node, term)) {
            return true;
        }

        return (node.children || []).some(function (child) {
            return subtreeMatches(child, term);
        });
    }

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function renderNodes(nodes, depth) {
        return nodes.map(function (node) {
            var id = String(node.id);
            var term = (searchInput?.value || '').trim().toLowerCase();
            var hasChildren = !!(node.children && node.children.length);

            if (term && !subtreeMatches(node, term)) {
                return '';
            }

            if (!node.selectable) {
                var groupChildren = renderNodes(node.children || [], depth + 1);
                if (!groupChildren) {
                    return '';
                }

                return `
                    <div class="pl-party-picker-item pl-party-picker-item-group" style="padding-left:${depth * 16}px">
                        <button type="button" class="pl-party-picker-toggle-btn ${hasChildren ? '' : 'is-hidden'}" data-party-expand="${id}" aria-label="Expand">
                            <i class="bi ${expanded.has(id) ? 'bi-chevron-down' : 'bi-chevron-right'}" style="font-size:11px"></i>
                        </button>
                        <div class="pl-party-picker-group">${escapeHtml(node.name)}</div>
                    </div>
                    <div class="${expanded.has(id) ? '' : 'd-none'}" data-party-children="${id}">
                        ${groupChildren}
                    </div>
                `;
            }

            var childHtml = hasChildren && expanded.has(id) ? renderNodes(node.children, depth + 1) : '';
            var isSelected = selected.has(node.value);

            return `
                <div class="pl-party-picker-item pl-party-picker-row ${isSelected ? 'is-selected' : ''}"
                     style="padding-left:${depth * 16}px">
                    <button type="button" class="pl-party-picker-toggle-btn ${hasChildren ? '' : 'is-hidden'}" data-party-expand="${id}" aria-label="Expand">
                        <i class="bi ${expanded.has(id) ? 'bi-chevron-down' : 'bi-chevron-right'}" style="font-size:11px"></i>
                    </button>
                    <label class="pl-party-picker-choice">
                        <input type="checkbox" value="${escapeHtml(node.value)}" data-party-checkbox ${isSelected ? 'checked' : ''}>
                    </label>
                    <span class="pl-party-picker-code">${escapeHtml(node.code || '—')}</span>
                    <span class="pl-party-picker-name">${escapeHtml(node.name || '')}</span>
                    <span class="pl-party-picker-type">${escapeHtml(node.type_label || '')}</span>
                </div>
                ${hasChildren ? `<div class="${expanded.has(id) ? '' : 'd-none'}" data-party-children="${id}">${childHtml}</div>` : ''}
            `;
        }).join('');
    }

    function renderTree() {
        if (!treeEl) {
            return;
        }

        var html = renderNodes(tree, 0);
        treeEl.innerHTML = html;
        emptyEl?.classList.toggle('d-none', html.trim() !== '');
    }

    function closeMenu() {
        menu?.classList.add('d-none');
        toggleBtn?.setAttribute('aria-expanded', 'false');
    }

    toggleBtn?.addEventListener('click', function () {
        var isOpen = !menu?.classList.contains('d-none');
        if (isOpen) {
            closeMenu();
            return;
        }

        menu?.classList.remove('d-none');
        toggleBtn.setAttribute('aria-expanded', 'true');
        searchInput?.focus();
    });

    document.addEventListener('click', function (event) {
        if (!picker.contains(event.target)) {
            closeMenu();
        }
    });

    treeEl?.addEventListener('click', function (event) {
        var expandBtn = event.target.closest('[data-party-expand]');
        if (expandBtn) {
            event.preventDefault();
            event.stopPropagation();
            var nodeId = expandBtn.getAttribute('data-party-expand');
            if (expanded.has(nodeId)) {
                expanded.delete(nodeId);
            } else {
                expanded.add(nodeId);
            }
            renderTree();
        }
    });

    treeEl?.addEventListener('change', function (event) {
        var checkbox = event.target.closest('[data-party-checkbox]');
        if (!checkbox) {
            return;
        }

        if (checkbox.checked) {
            selected.add(checkbox.value);
        } else {
            selected.delete(checkbox.value);
        }

        syncInputs();
        syncLabel();
        renderTree();
    });

    searchInput?.addEventListener('input', function () {
        if (searchInput.value.trim()) {
            walk(tree, function (node) {
                if (node.children && node.children.length) {
                    expanded.add(String(node.id));
                }
            });
        }
        renderTree();
    });

    clearBtn?.addEventListener('click', function () {
        selected.clear();
        syncInputs();
        syncLabel();
        if (searchInput) {
            searchInput.value = '';
        }
        renderTree();
    });

    syncInputs();
    syncLabel();
    renderTree();
}
</script>
@endpush