@extends('admin.layouts.app')
@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="card b-radius--10">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">@lang('Binding Manager')</h6>
                    <small class="text-muted" id="bindingStatus">@lang('Select a scope to begin.')</small>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-2">
                            <label for="scope_type" class="font-weight-bold">@lang('Scope Type')</label>
                            <select class="select2-basic" name="scope_type" id="scope_type">
                                <option value="category">@lang('Category')</option>
                                <option value="product">@lang('Product')</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="scope_id" class="font-weight-bold">@lang('Scope')</label>
                            <select class="select2-basic" name="scope_id" id="scope_id"></select>
                        </div>
                        <div class="col-md-3">
                            <label for="seller_type_id" class="font-weight-bold">@lang('Seller Type')</label>
                            <select class="select2-basic" name="seller_type_id" id="seller_type_id"></select>
                        </div>
                        <div class="col-md-3">
                            <label for="option_id" class="font-weight-bold">@lang('Option')</label>
                            <select class="select2-basic" name="option_id" id="option_id"></select>
                        </div>
                    </div>
                    <div class="row mt-3 align-items-center">
                        <div class="col-md-6">
                            <div class="text-muted" id="bindingHint">@lang('Pick a seller type and option to bind them for this scope.')</div>
                        </div>
                        <div class="col-md-6 text-end">
                            <button type="button" class="btn btn--primary" id="bindSellerTypeOption">@lang('Bind')</button>
                            <button type="button" class="btn btn--danger" id="unbindSellerTypeOption">@lang('Unbind')</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-lg-4">
                    <div class="card b-radius--10">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">@lang('Unbound Seller Types')</h6>
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control" id="unboundSellerTypeSearch" placeholder="@lang('Search seller types')">
                            <ul class="list-group mt-3" id="unboundSellerTypeList"></ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card b-radius--10">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">@lang('Unmapped Option Items')</h6>
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control" id="unmappedOptionItemSearch" placeholder="@lang('Search option items')">
                            <ul class="list-group mt-3" id="unmappedOptionItemList"></ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card b-radius--10">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">@lang('Unmapped Seller Type Items')</h6>
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control" id="unmappedSellerTypeItemSearch" placeholder="@lang('Search seller type items')">
                            <ul class="list-group mt-3" id="unmappedSellerTypeItemList"></ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card b-radius--10 mt-4" id="itemMappingCard">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">@lang('Item Mapping')</h6>
                    <small class="text-muted" id="mappingSummary"></small>
                </div>
                <div class="card-body">
                    <div class="alert alert--info" id="mappingEmptyState">
                        @lang('Select scope, seller type, and option to manage item mappings.')
                    </div>
                    <div id="mappingContent" style="display:none;">
                        <div class="row g-3">
                            <div class="col-lg-6">
                                <label for="sellerTypeItemSearch" class="font-weight-bold">@lang('Search Seller Type Items')</label>
                                <input type="text" class="form-control" id="sellerTypeItemSearch" placeholder="@lang('Search seller type items')">
                            </div>
                            <div class="col-lg-6">
                                <label for="optionItemSearch" class="font-weight-bold">@lang('Search Option Items')</label>
                                <input type="text" class="form-control" id="optionItemSearch" placeholder="@lang('Search option items')">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-lg-7">
                                <div class="table-responsive--sm table-responsive">
                                    <table class="table table--light style--two custom-data-table" id="mappingTable">
                                        <thead>
                                        <tr>
                                            <th>@lang('Seller Type Item')</th>
                                            <th>@lang('Mapped Option Item')</th>
                                            <th>@lang('Status')</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="list-group" id="optionItemList"></div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col text-end">
                                <button type="button" class="btn btn--secondary" id="autoMapBtn">@lang('Auto-map')</button>
                                <button type="button" class="btn btn--warning" id="clearMappingsBtn">@lang('Clear Mappings')</button>
                                <button type="button" class="btn btn--primary" id="saveMappingsBtn">@lang('Save Mappings')</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function () {
            var categories = @json($categories->map(fn($category) => ['id' => $category->id, 'name' => $category->name]));
            var products = @json($products->map(fn($product) => ['id' => $product->id, 'name' => $product->name, 'category_id' => $product->category_id]));
            var contextUrl = "{{ route('admin.option-binding.context') }}";
            var sellerTypeUrl = "{{ route('admin.option-binding.seller-type.context', ['id' => '__ID__']) }}";
            var bindUrl = "{{ route('admin.option-binding.seller-type-option.store') }}";
            var unbindUrl = "{{ url('admin/option-binding/seller-type-option/delete') }}/";
            var saveMappingsUrl = "{{ route('admin.option-binding.item-map.store') }}";
            var clearMappingsUrl = "{{ route('admin.option-binding.item-map.clear') }}";
            var texts = {
                pickBinding: @json(__('Pick a seller type and option to bind them for this scope.')),
                boundScope: @json(__('Bound in this scope.')),
                notBound: @json(__('Not bound yet.')),
                loadingScope: @json(__('Loading scope data...')),
                scopeLoaded: @json(__('Scope loaded.')),
                scopeLoadFailed: @json(__('Failed to load scope data.')),
                selectSellerType: @json(__('Select seller type')),
                selectOption: @json(__('Select option')),
                allSellerTypesBound: @json(__('All seller types are bound.')),
                allOptionItemsMapped: @json(__('All option items are mapped.')),
                allSellerTypeItemsMapped: @json(__('All seller type items are mapped.')),
                unableLoadMapping: @json(__('Unable to load mapping data.')),
                unmapped: @json(__('Unmapped')),
                mapped: @json(__('Mapped')),
                sellerItemsLabel: @json(__('Seller items:')),
                optionItemsLabel: @json(__('Option items:')),
                noOptionItemsFound: @json(__('No option items found.')),
                selectBoth: @json(__('Select both seller type and option.')),
                bindingSaved: @json(__('Binding saved.')),
                failedToBind: @json(__('Failed to bind.')),
                noBindingFound: @json(__('No binding found for selection.')),
                bindingRemoved: @json(__('Binding removed.')),
                failedRemoveBinding: @json(__('Failed to remove binding.')),
                noChanges: @json(__('No changes to save.')),
                mappingsSaved: @json(__('Mappings saved.')),
                failedSaveMappings: @json(__('Failed to save mappings.')),
                selectSellerAndOption: @json(__('Select seller type and option.')),
                clearConfirm: @json(__('Clear all mappings for this option?')),
                mappingsCleared: @json(__('Mappings cleared.')),
                failedClearMappings: @json(__('Failed to clear mappings.')),
                noLabelMatches: @json(__('No exact label matches found.')),
                autoMappedItems: @json(__('Auto-mapped items:'))
            };

            var state = {
                scopeType: 'category',
                scopeId: null,
                sellerTypes: [],
                options: [],
                bindings: [],
                mappingData: null,
                originalMapping: {}
            };

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            function setStatus(message) {
                $('#bindingStatus').text(message || '');
            }

            function notify(type, message) {
                if (typeof Toast !== 'undefined') {
                    Toast.fire({
                        icon: type,
                        title: message
                    });
                } else {
                    alert(message);
                }
            }

            function normalizeText(value) {
                return (value || '').toString().trim().toLowerCase();
            }

            function populateScopeSelect() {
                var list = state.scopeType === 'category' ? categories : products;
                var scopeSelect = $('#scope_id');
                scopeSelect.empty();
                list.forEach(function (item) {
                    scopeSelect.append(new Option(item.name, item.id));
                });
                state.scopeId = list.length ? list[0].id : null;
                scopeSelect.val(state.scopeId);
            }

            function renderSelect($select, list, placeholder) {
                var current = $select.val();
                $select.empty();
                $select.append(new Option(placeholder, ''));
                list.forEach(function (item) {
                    $select.append(new Option(item.title, item.id));
                });
                if (current && list.find(function (item) { return String(item.id) === String(current); })) {
                    $select.val(current);
                }
            }

            function renderList($list, items, emptyText) {
                $list.empty();
                if (!items || !items.length) {
                    $list.append('<li class="list-group-item text-muted">' + emptyText + '</li>');
                    return;
                }
                items.forEach(function (item) {
                    var label = item.title || item.value || '-';
                    $list.append('<li class="list-group-item" data-label="' + normalizeText(label) + '">' + label + '</li>');
                });
            }

            function applySearch($input, $list) {
                var query = normalizeText($input.val());
                $list.find('li').each(function () {
                    var label = $(this).data('label') || '';
                    $(this).toggle(label.indexOf(query) !== -1 || query === '');
                });
            }

            function updateBindingHint() {
                var sellerTypeId = $('#seller_type_id').val();
                var optionId = $('#option_id').val();
                if (!sellerTypeId || !optionId) {
                    $('#bindingHint').text(texts.pickBinding);
                    return;
                }
                var binding = state.bindings.find(function (row) {
                    return String(row.seller_type_id) === String(sellerTypeId) && String(row.option_id) === String(optionId);
                });
                $('#bindingHint').text(binding ? texts.boundScope : texts.notBound);
            }

            function loadContext() {
                if (!state.scopeId) {
                    return;
                }
                setStatus(texts.loadingScope);
                $.get(contextUrl, {
                    scope_type: state.scopeType,
                    scope_id: state.scopeId
                }).done(function (data) {
                    state.sellerTypes = data.seller_types || [];
                    state.options = data.options || [];
                    state.bindings = data.bindings || [];

                    renderSelect($('#seller_type_id'), state.sellerTypes, texts.selectSellerType);
                    renderSelect($('#option_id'), state.options, texts.selectOption);

                    renderList($('#unboundSellerTypeList'), data.unmapped.seller_types.examples || [], texts.allSellerTypesBound);
                    renderList($('#unmappedOptionItemList'), data.unmapped.option_items.examples || [], texts.allOptionItemsMapped);
                    renderList($('#unmappedSellerTypeItemList'), data.unmapped.seller_type_items.examples || [], texts.allSellerTypeItemsMapped);

                    setStatus(texts.scopeLoaded);
                    updateBindingHint();
                    loadMapping();
                }).fail(function () {
                    setStatus(texts.scopeLoadFailed);
                });
            }

            function loadMapping() {
                var sellerTypeId = $('#seller_type_id').val();
                var optionId = $('#option_id').val();
                if (!sellerTypeId || !optionId) {
                    state.mappingData = null;
                    $('#mappingContent').hide();
                    $('#mappingEmptyState').show();
                    $('#mappingSummary').text('');
                    return;
                }
                $.get(sellerTypeUrl.replace('__ID__', sellerTypeId), {
                    scope_type: state.scopeType,
                    scope_id: state.scopeId,
                    option_id: optionId
                }).done(function (data) {
                    state.mappingData = data;
                    renderMapping(data);
                }).fail(function (xhr) {
                    state.mappingData = null;
                    $('#mappingContent').hide();
                    $('#mappingEmptyState').show().text((xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.binding)
                        ? xhr.responseJSON.errors.binding[0]
                        : texts.unableLoadMapping);
                    $('#mappingSummary').text('');
                });
            }

            function renderMapping(data) {
                var sellerTypeItems = data.seller_type_items || [];
                var optionItems = data.option_items || [];
                var bindings = data.bindings || [];
                var tbody = $('#mappingTable tbody');
                tbody.empty();

                var bindingBySellerTypeItem = {};
                bindings.forEach(function (binding) {
                    bindingBySellerTypeItem[binding.seller_type_item_id] = binding;
                });

                state.originalMapping = {};
                sellerTypeItems.forEach(function (item) {
                    var binding = bindingBySellerTypeItem[item.id];
                    var selected = binding ? String(binding.option_item_id) : '';
                    state.originalMapping[item.id] = selected;
                    var row = $('<tr></tr>').attr('data-item-id', item.id).attr('data-label', normalizeText(item.value));
                    var select = $('<select class="form-control map-select"></select>');
                    select.append(new Option(texts.unmapped, ''));
                    optionItems.forEach(function (opt) {
                        select.append(new Option(opt.value, opt.id));
                    });
                    select.val(selected);
                    row.append('<td>' + (item.value || '-') + '</td>');
                    row.append($('<td></td>').append(select));
                    var badge = selected
                        ? '<span class="badge badge--success">' + texts.mapped + '</span>'
                        : '<span class="badge badge--warning">' + texts.unmapped + '</span>';
                    row.append('<td class="mapping-status">' + badge + '</td>');
                    tbody.append(row);
                });

                updateOptionItemList(optionItems, bindings);
                $('#mappingSummary').text(texts.sellerItemsLabel + ' ' + sellerTypeItems.length + ' | ' + texts.optionItemsLabel + ' ' + optionItems.length);
                $('#mappingEmptyState').hide();
                $('#mappingContent').show();
            }

            function updateOptionItemList(optionItems, bindings) {
                var boundOptionItemIds = {};
                bindings.forEach(function (binding) {
                    boundOptionItemIds[binding.option_item_id] = true;
                });
                var list = $('#optionItemList');
                list.empty();
                if (!optionItems.length) {
                    list.append('<div class="text-muted">' + texts.noOptionItemsFound + '</div>');
                    return;
                }
                optionItems.forEach(function (item) {
                    var mapped = !!boundOptionItemIds[item.id];
                    var badge = mapped
                        ? '<span class="badge badge--success ms-2">' + texts.mapped + '</span>'
                        : '<span class="badge badge--warning ms-2">' + texts.unmapped + '</span>';
                    list.append('<div class="list-group-item d-flex justify-content-between align-items-center" data-label="' + normalizeText(item.value) + '">' + item.value + badge + '</div>');
                });
            }

            function collectMappingChanges() {
                var mappings = [];
                var clearIds = [];
                $('#mappingTable tbody tr').each(function () {
                    var itemId = $(this).data('item-id');
                    var selected = $(this).find('select').val();
                    var original = state.originalMapping[itemId] || '';
                    if (selected && selected !== original) {
                        mappings.push({
                            seller_type_item_id: itemId,
                            option_item_id: selected
                        });
                    }
                    if (!selected && original) {
                        clearIds.push(itemId);
                    }
                });
                return { mappings: mappings, clear_ids: clearIds };
            }

            function refreshMappingStatus() {
                var bindings = [];
                $('#mappingTable tbody tr').each(function () {
                    var itemId = $(this).data('item-id');
                    var selected = $(this).find('select').val();
                    if (selected) {
                        bindings.push({
                            seller_type_item_id: itemId,
                            option_item_id: Number(selected)
                        });
                    }
                });
                updateOptionItemList(state.mappingData ? state.mappingData.option_items : [], bindings);
            }

            $('#scope_type').on('change', function () {
                state.scopeType = $(this).val();
                populateScopeSelect();
                loadContext();
            });

            $('#scope_id').on('change', function () {
                state.scopeId = $(this).val();
                loadContext();
            });

            $('#seller_type_id, #option_id').on('change', function () {
                updateBindingHint();
                loadMapping();
            });

            $('#bindSellerTypeOption').on('click', function () {
                var sellerTypeId = $('#seller_type_id').val();
                var optionId = $('#option_id').val();
                if (!sellerTypeId || !optionId) {
                    notify('error', texts.selectBoth);
                    return;
                }
                $.post(bindUrl, {
                    scope_type: state.scopeType,
                    scope_id: state.scopeId,
                    seller_type_id: sellerTypeId,
                    option_id: optionId
                }).done(function () {
                    notify('success', texts.bindingSaved);
                    loadContext();
                }).fail(function (xhr) {
                    var message = xhr.responseJSON && xhr.responseJSON.errors ? Object.values(xhr.responseJSON.errors)[0][0] : texts.failedToBind;
                    notify('error', message);
                });
            });

            $('#unbindSellerTypeOption').on('click', function () {
                var sellerTypeId = $('#seller_type_id').val();
                var optionId = $('#option_id').val();
                if (!sellerTypeId || !optionId) {
                    notify('error', texts.selectBoth);
                    return;
                }
                var binding = state.bindings.find(function (row) {
                    return String(row.seller_type_id) === String(sellerTypeId) && String(row.option_id) === String(optionId);
                });
                if (!binding) {
                    notify('error', texts.noBindingFound);
                    return;
                }
                $.post(unbindUrl + binding.id, {}).done(function () {
                    notify('success', texts.bindingRemoved);
                    loadContext();
                }).fail(function () {
                    notify('error', texts.failedRemoveBinding);
                });
            });

            $(document).on('change', '.map-select', function () {
                var row = $(this).closest('tr');
                var selected = $(this).val();
                row.find('.mapping-status').html(selected
                    ? '<span class="badge badge--success">' + texts.mapped + '</span>'
                    : '<span class="badge badge--warning">' + texts.unmapped + '</span>');
                refreshMappingStatus();
            });

            $('#saveMappingsBtn').on('click', function () {
                if (!state.mappingData) {
                    return;
                }
                var payload = collectMappingChanges();
                if (!payload.mappings.length && !payload.clear_ids.length) {
                    notify('success', texts.noChanges);
                    return;
                }
                payload.scope_type = state.scopeType;
                payload.scope_id = state.scopeId;
                $.post(saveMappingsUrl, payload).done(function () {
                    notify('success', texts.mappingsSaved);
                    loadMapping();
                }).fail(function (xhr) {
                    var message = xhr.responseJSON && xhr.responseJSON.errors ? Object.values(xhr.responseJSON.errors)[0][0] : texts.failedSaveMappings;
                    notify('error', message);
                });
            });

            $('#clearMappingsBtn').on('click', function () {
                if (!state.mappingData) {
                    return;
                }
                var sellerTypeId = $('#seller_type_id').val();
                var optionId = $('#option_id').val();
                if (!sellerTypeId || !optionId) {
                    notify('error', texts.selectSellerAndOption);
                    return;
                }
                if (!confirm(texts.clearConfirm)) {
                    return;
                }
                $.post(clearMappingsUrl, {
                    seller_type_id: sellerTypeId,
                    option_id: optionId,
                    scope_type: state.scopeType,
                    scope_id: state.scopeId
                }).done(function () {
                    notify('success', texts.mappingsCleared);
                    loadMapping();
                }).fail(function () {
                    notify('error', texts.failedClearMappings);
                });
            });

            $('#autoMapBtn').on('click', function () {
                if (!state.mappingData) {
                    return;
                }
                var sellerTypeItems = state.mappingData.seller_type_items || [];
                var optionItems = state.mappingData.option_items || [];
                var optionMap = {};
                optionItems.forEach(function (item) {
                    optionMap[normalizeText(item.value)] = item;
                });
                var usedOptionIds = {};
                $('#mappingTable tbody tr').each(function () {
                    var selected = $(this).find('select').val();
                    if (selected) {
                        usedOptionIds[selected] = true;
                    }
                });
                var applied = 0;
                sellerTypeItems.forEach(function (item) {
                    var key = normalizeText(item.value);
                    var match = optionMap[key];
                    if (!match || usedOptionIds[match.id]) {
                        return;
                    }
                    var row = $('#mappingTable tbody tr[data-item-id="' + item.id + '"]');
                    if (!row.length) {
                        return;
                    }
                    row.find('select').val(match.id).trigger('change');
                    usedOptionIds[match.id] = true;
                    applied++;
                });
                if (!applied) {
                    notify('error', texts.noLabelMatches);
                    return;
                }
                notify('success', texts.autoMappedItems + ' ' + applied);
            });

            $('#sellerTypeItemSearch').on('input', function () {
                var query = normalizeText($(this).val());
                $('#mappingTable tbody tr').each(function () {
                    var label = $(this).data('label');
                    $(this).toggle(label.indexOf(query) !== -1 || query === '');
                });
            });

            $('#optionItemSearch').on('input', function () {
                applySearch($(this), $('#optionItemList'));
            });

            $('#unboundSellerTypeSearch').on('input', function () {
                applySearch($(this), $('#unboundSellerTypeList'));
            });

            $('#unmappedOptionItemSearch').on('input', function () {
                applySearch($(this), $('#unmappedOptionItemList'));
            });

            $('#unmappedSellerTypeItemSearch').on('input', function () {
                applySearch($(this), $('#unmappedSellerTypeItemList'));
            });

            populateScopeSelect();
            loadContext();
        })();
    </script>
@endpush