@extends('layouts.adminlte')

@section('title', 'MASTER BARANG')
@section('page_title', 'MASTER BARANG')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master Barang</h3>
            <div class="d-flex gap-2 flex-wrap">
                <button class="btn btn-outline-secondary btn-sm" id="btnLoadMergeLogs">
                    <i class="fas fa-clock-rotate-left me-1"></i>Riwayat Merge
                </button>
                <button class="btn btn-primary btn-sm" id="btnAddBarang">
                    <i class="fas fa-plus me-1"></i>Tambah Barang
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="barangTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th style="width:60px">#</th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Satuan Default</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th style="width:220px">Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Riwayat Merge Barang</h3>
            <div class="small text-muted">Menampilkan 50 merge terakhir untuk audit.</div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="mergeLogTable" class="table table-sm table-bordered align-middle w-100">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Barang Sumber</th>
                            <th>Barang Tujuan</th>
                            <th>Dampak</th>
                            <th>Catatan</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="barangModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="barangModalTitle">Tambah Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="barangForm">
                    <div class="modal-body">
                        <input type="hidden" id="barangId" />
                        <div class="mb-3">
                            <label class="form-label">Code</label>
                            <input type="text" class="form-control" id="barangCode" maxlength="80" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" id="barangName" maxlength="180" required />
                        </div>
                        <div class="alert alert-warning d-none" id="barangSimilarAlert">
                            <div class="fw-semibold mb-1">Kemungkinan nama barang mirip dengan data existing:</div>
                            <div id="barangSimilarList" class="small"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Satuan Default</label>
                            <select class="form-select" id="barangSatuanId">
                                <option value="">- Pilih Satuan -</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="barangDescription" rows="3"></textarea>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="barangActive" checked />
                            <label class="form-check-label" for="barangActive">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mergeBarangModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Merge Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="mergeBarangForm">
                    <div class="modal-body">
                        <input type="hidden" id="mergeSourceId" />
                        <div class="alert alert-warning">
                            Gunakan merge hanya jika barang sumber dan target memang barang fisik yang sama. Barang sumber akan dinonaktifkan otomatis setelah merge.
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Barang Sumber</label>
                            <input type="text" class="form-control" id="mergeSourceText" readonly />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Barang Tujuan</label>
                            <select class="form-select" id="mergeTargetId" required></select>
                        </div>
                        <div class="alert alert-light border d-none" id="mergePreviewBox">
                            <div class="fw-semibold mb-2">Preview Dampak Merge</div>
                            <div class="small mb-2" id="mergePreviewMessage"></div>
                            <div class="row g-2 text-center">
                                <div class="col-6 col-md-3">
                                    <div class="border rounded p-2 bg-light">
                                        <div class="small text-muted">RAB</div>
                                        <div class="fw-semibold" id="mergePreviewRab">0</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="border rounded p-2 bg-light">
                                        <div class="small text-muted">Stock Move</div>
                                        <div class="fw-semibold" id="mergePreviewStock">0</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="border rounded p-2 bg-light">
                                        <div class="small text-muted">Issue</div>
                                        <div class="fw-semibold" id="mergePreviewIssue">0</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="border rounded p-2 bg-light">
                                        <div class="small text-muted">Transfer</div>
                                        <div class="fw-semibold" id="mergePreviewTransfer">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="small text-muted" id="mergeTargetInfo">Pilih barang utama yang akan dipakai seterusnya.</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-warning">Merge Sekarang</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            const modal = new bootstrap.Modal(document.getElementById('barangModal'));
            const mergeModal = new bootstrap.Modal(document.getElementById('mergeBarangModal'));
            const table = $('#barangTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'code' },
                    { data: 'name' },
                    {
                        data: null,
                        render: (row) => row.default_satuan_code
                            ? `${row.default_satuan_code} - ${row.default_satuan_name || ''}`
                            : '-'
                    },
                    { data: 'description', render: (v) => v || '-' },
                    {
                        data: 'is_active',
                        render: (value) => value
                            ? '<span class="badge text-bg-success">Active</span>'
                            : '<span class="badge text-bg-secondary">Inactive</span>'
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (data, type, row) => `
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${row.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-warning btn-merge" data-id="${row.id}">Merge</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${row.id}">Delete</button>
                        `
                    }
                ]
            });
            const mergeLogTable = $('#mergeLogTable').DataTable({
                paging: false,
                searching: false,
                info: false,
                ordering: false,
                responsive: true,
                data: [],
                columns: [
                    { data: 'created_at', render: (v) => v || '-' },
                    { data: null, render: (r) => `${r.source_code || '-'} - ${r.source_name || '-'}` },
                    { data: null, render: (r) => `${r.target_code || '-'} - ${r.target_name || '-'}` },
                    {
                        data: 'summary_json',
                        render: (v) => {
                            const row = v || {};
                            return `
                                <div class="small">
                                    RAB: <strong>${Number(row.rab_items || 0).toLocaleString('id-ID')}</strong><br>
                                    Stock Move: <strong>${Number(row.stock_movements || 0).toLocaleString('id-ID')}</strong><br>
                                    Issue: <strong>${Number(row.stock_issues || 0).toLocaleString('id-ID')}</strong><br>
                                    Transfer: <strong>${Number(row.warehouse_transfers || 0).toLocaleString('id-ID')}</strong>
                                </div>
                            `;
                        }
                    },
                    { data: 'notes', render: (v) => v || '-' }
                ]
            });

            let rowsCache = [];
            let satuanOptions = [];
            let similarRows = [];
            let similarCheckTimer = null;
            let mergePreviewState = null;

            const fillMergeTargets = (sourceId) => {
                const options = ['<option value="">- Pilih Barang Tujuan -</option>'];
                rowsCache
                    .filter((row) => Number(row.id) !== Number(sourceId))
                    .forEach((row) => {
                        const status = row.is_active ? 'Active' : 'Inactive';
                        options.push(`<option value="${row.id}">${row.code} - ${row.name} | ${row.default_satuan_name || '-'} | ${status}</option>`);
                    });
                $('#mergeTargetId').html(options.join(''));
                $('#mergeTargetInfo').text('Pilih barang utama yang akan dipakai seterusnya.');
            };

            const loadSatuans = () => {
                return $.getJSON('{{ route('master_satuan.data') }}')
                    .done((resp) => {
                        satuanOptions = resp.data || [];
                    });
            };

            const fillSatuanSelect = (selectedId = '') => {
                const options = ['<option value="">- Pilih Satuan -</option>'];
                satuanOptions.forEach((row) => {
                    options.push(`<option value="${row.id}">${row.code} - ${row.name}</option>`);
                });
                $('#barangSatuanId').html(options.join(''));
                $('#barangSatuanId').val(selectedId || '');
            };

            const loadData = () => {
                $.getJSON('{{ route('master_barang.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error');
                    });
            };

            const loadMergeLogs = () => {
                return $.getJSON('{{ route('master_barang.merge_logs') }}')
                    .done((resp) => {
                        mergeLogTable.clear().rows.add(resp.data || []).draw();
                    })
                    .fail(() => {
                        mergeLogTable.clear().draw();
                    });
            };

            const resetMergePreview = () => {
                mergePreviewState = null;
                $('#mergePreviewBox').addClass('d-none');
                $('#mergePreviewMessage').removeClass('text-success text-danger').text('');
                $('#mergePreviewRab').text('0');
                $('#mergePreviewStock').text('0');
                $('#mergePreviewIssue').text('0');
                $('#mergePreviewTransfer').text('0');
            };

            const loadMergePreview = () => {
                const sourceId = Number($('#mergeSourceId').val() || 0);
                const targetId = Number($('#mergeTargetId').val() || 0);
                if (!sourceId || !targetId) {
                    resetMergePreview();
                    return $.Deferred().resolve().promise();
                }

                return $.getJSON('{{ route('master_barang.merge_preview') }}', {
                    source_id: sourceId,
                    target_id: targetId
                }).done((resp) => {
                    const data = resp.data || {};
                    const counts = data.counts || {};
                    mergePreviewState = data;
                    $('#mergePreviewBox').removeClass('d-none');
                    $('#mergePreviewMessage')
                        .removeClass('text-success text-danger')
                        .addClass(data.compatible ? 'text-success' : 'text-danger')
                        .text(data.message || '');
                    $('#mergePreviewRab').text(Number(counts.rab_items || 0).toLocaleString('id-ID'));
                    $('#mergePreviewStock').text(Number(counts.stock_movements || 0).toLocaleString('id-ID'));
                    $('#mergePreviewIssue').text(Number(counts.stock_issues || 0).toLocaleString('id-ID'));
                    $('#mergePreviewTransfer').text(Number(counts.warehouse_transfers || 0).toLocaleString('id-ID'));
                }).fail((xhr) => {
                    resetMergePreview();
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat preview merge.', 'error');
                });
            };

            const renderSimilarAlert = () => {
                if (!similarRows.length) {
                    $('#barangSimilarAlert').addClass('d-none');
                    $('#barangSimilarList').html('');
                    return;
                }

                const html = similarRows.map((row) => {
                    const badge = row.score >= 90 ? 'danger' : row.score >= 75 ? 'warning' : 'secondary';
                    const status = row.is_active ? 'Active' : 'Inactive';
                    return `<div class="mb-1">
                        <span class="badge text-bg-${badge} me-1">${Number(row.score || 0).toLocaleString('id-ID')}%</span>
                        <strong>${row.code || '-'}</strong> - ${row.name || '-'}
                        <span class="text-muted">| ${row.default_satuan_name || '-'} | ${status}</span>
                    </div>`;
                }).join('');

                $('#barangSimilarList').html(html);
                $('#barangSimilarAlert').removeClass('d-none');
            };

            const checkSimilarBarang = () => {
                const id = Number($('#barangId').val() || 0);
                const name = ($('#barangName').val() || '').toString().trim();
                const code = ($('#barangCode').val() || '').toString().trim();

                if (!name && !code) {
                    similarRows = [];
                    renderSimilarAlert();
                    return $.Deferred().resolve().promise();
                }

                return $.getJSON('{{ route('master_barang.similar') }}', {
                    exclude_id: id || '',
                    name,
                    code,
                }).done((resp) => {
                    similarRows = resp.data || [];
                    renderSimilarAlert();
                }).fail(() => {
                    similarRows = [];
                    renderSimilarAlert();
                });
            };

            $('#btnAddBarang').on('click', function () {
                $('#barangModalTitle').text('Tambah Barang');
                $('#barangId').val('');
                $('#barangCode').val('');
                $('#barangName').val('');
                fillSatuanSelect('');
                $('#barangDescription').val('');
                $('#barangActive').prop('checked', true);
                similarRows = [];
                renderSimilarAlert();
                modal.show();
            });

            $('#barangTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((item) => Number(item.id) === id);
                if (!row) return;

                $('#barangModalTitle').text('Edit Barang');
                $('#barangId').val(row.id);
                $('#barangCode').val(row.code || '');
                $('#barangName').val(row.name || '');
                fillSatuanSelect(row.default_satuan_id || '');
                $('#barangDescription').val(row.description || '');
                $('#barangActive').prop('checked', !!row.is_active);
                similarRows = [];
                renderSimilarAlert();
                modal.show();
            });

            $('#barangName, #barangCode').on('input blur', function () {
                clearTimeout(similarCheckTimer);
                similarCheckTimer = setTimeout(() => {
                    checkSimilarBarang();
                }, 250);
            });

            $('#barangForm').on('submit', function (e) {
                e.preventDefault();

                const id = $('#barangId').val();
                const payload = {
                    code: ($('#barangCode').val() || '').toString().trim(),
                    name: ($('#barangName').val() || '').toString().trim(),
                    default_satuan_id: $('#barangSatuanId').val(),
                    description: ($('#barangDescription').val() || '').toString().trim(),
                    is_active: $('#barangActive').is(':checked') ? 1 : 0
                };

                if (!payload.code || !payload.name) {
                    Swal.fire('Warning', 'Code dan Name wajib diisi', 'warning');
                    return;
                }

                checkSimilarBarang().always(() => {
                    const proceedSave = () => {
                        $.ajax({
                            url: id ? `{{ url('/master-barang') }}/${id}` : '{{ route('master_barang.store') }}',
                            type: id ? 'PUT' : 'POST',
                            data: payload
                        }).done((resp) => {
                            modal.hide();
                            loadData();
                            Swal.fire('Success', resp?.message || 'Saved', 'success');
                        }).fail((xhr) => {
                            Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
                        });
                    };

                    if (similarRows.length) {
                        Swal.fire({
                            title: 'Ada nama barang yang mirip',
                            html: `
                                <div class="text-start small">
                                    Sistem menemukan barang existing yang mirip. Lanjut simpan hanya jika memang barangnya berbeda.
                                    <div class="mt-2">${$('#barangSimilarList').html()}</div>
                                </div>
                            `,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Lanjut Simpan',
                            cancelButtonText: 'Cek Lagi'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                proceedSave();
                            }
                        });
                        return;
                    }

                    proceedSave();
                });
            });

            $('#barangTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete barang?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-barang') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
                    });
                });
            });

            $('#barangTable').on('click', '.btn-merge', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((item) => Number(item.id) === id);
                if (!row) return;
                $('#mergeSourceId').val(row.id);
                $('#mergeSourceText').val(`${row.code || ''} - ${row.name || ''} | ${row.default_satuan_name || '-'}`);
                fillMergeTargets(row.id);
                resetMergePreview();
                mergeModal.show();
            });

            $('#btnLoadMergeLogs').on('click', function () {
                loadMergeLogs().always(() => {
                    document.getElementById('mergeLogTable')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            });

            $('#mergeTargetId').on('change', function () {
                const sourceId = Number($('#mergeSourceId').val() || 0);
                const targetId = Number($(this).val() || 0);
                const source = rowsCache.find((item) => Number(item.id) === sourceId);
                const target = rowsCache.find((item) => Number(item.id) === targetId);
                if (!source || !target) {
                    $('#mergeTargetInfo').text('Pilih barang utama yang akan dipakai seterusnya.');
                    return;
                }

                if ((source.default_satuan_id || 0) !== (target.default_satuan_id || 0)) {
                    $('#mergeTargetInfo').html('<span class="text-danger">Satuan default berbeda. Merge akan ditolak sistem.</span>');
                } else {
                    $('#mergeTargetInfo').html('<span class="text-success">Satuan default cocok. Merge bisa dilanjutkan.</span>');
                }

                loadMergePreview();
            });

            $('#mergeBarangForm').on('submit', function (e) {
                e.preventDefault();
                const sourceId = Number($('#mergeSourceId').val() || 0);
                const targetId = Number($('#mergeTargetId').val() || 0);
                if (!sourceId || !targetId) {
                    Swal.fire('Warning', 'Pilih barang sumber dan barang tujuan.', 'warning');
                    return;
                }

                loadMergePreview().done(() => {
                    if (mergePreviewState && mergePreviewState.compatible === false) {
                        Swal.fire('Tidak Bisa Merge', mergePreviewState.message || 'Merge ditolak.', 'warning');
                        return;
                    }

                    const counts = mergePreviewState?.counts || {};
                    Swal.fire({
                        title: 'Lanjut merge barang?',
                        html: `
                            <div class="text-start small">
                                Semua referensi transaksi akan dipindahkan ke barang target dan barang sumber dinonaktifkan.
                                <hr>
                                <div>RAB terdampak: <strong>${Number(counts.rab_items || 0).toLocaleString('id-ID')}</strong></div>
                                <div>Stock movement terdampak: <strong>${Number(counts.stock_movements || 0).toLocaleString('id-ID')}</strong></div>
                                <div>Project issue terdampak: <strong>${Number(counts.stock_issues || 0).toLocaleString('id-ID')}</strong></div>
                                <div>Transfer gudang terdampak: <strong>${Number(counts.warehouse_transfers || 0).toLocaleString('id-ID')}</strong></div>
                            </div>
                        `,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, merge',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (!result.isConfirmed) return;
                        $.ajax({
                            url: '{{ route('master_barang.merge') }}',
                            type: 'POST',
                            data: {
                                source_id: sourceId,
                                target_id: targetId
                            }
                        }).done((resp) => {
                            mergeModal.hide();
                            loadData();
                            loadMergeLogs();
                            const summary = resp?.data || {};
                            Swal.fire('Success', `${resp?.message || 'Merge berhasil.'}\nRAB: ${summary.rab_items || 0}\nStock Movement: ${summary.stock_movements || 0}\nProject Issue: ${summary.stock_issues || 0}\nTransfer Gudang: ${summary.warehouse_transfers || 0}`, 'success');
                        }).fail((xhr) => {
                            Swal.fire('Error', xhr.responseJSON?.message || 'Merge gagal.', 'error');
                        });
                    });
                });
            });

            $.when(loadSatuans()).always(function () {
                loadData();
                loadMergeLogs();
            });
        });
    </script>
@endpush