@php
    $breadcrumbs = [
        'My Document' => url('/my_document_list'),
        'Bulk Import' => url('/my_document_bulk_import'),
        'Match Documents' => ''
    ];
@endphp
@extends('layouts.master')

@section('title')
    Bulk Import - Match Documents
@endsection

@section('style')
<style>
    .nav-pills .nav-link.active { background-color: #6f42c1; }
    .file-select-thumb { font-size: 0.8rem; }
    .pair-row { border: 1px solid #d1d9e6; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
    .pair-row .pair-index-badge { background: #6f42c1; }
    .auto-pair-card { border: 1px solid #d1d9e6; border-radius: 10px; padding: 14px; margin-bottom: 12px; background: #fff; }
    .auto-pair-card.excluded { opacity: 0.4; }
    .max-note { font-size: 0.78rem; color: #6c757d; }
    .unmatched-box { border: 1px dashed #d9a441; border-radius: 10px; padding: 14px; margin-top: 16px; background: #fffaf0; }
    .unmatched-box h6 { color: #a15c00; }
    .unmatched-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0e2c4; font-size: 0.85rem; }
    .unmatched-item:last-child { border-bottom: none; }
    .unmatched-item .reason { color: #6c757d; font-size: 0.78rem; display: block; }
</style>
@endsection

@section('content')
<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-11 mx-auto">

                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 style="font-size:1.3rem;">Bulk Import: จับคู่ Quotation + Invoice</h2>
                    <a href="{{ url('/my_document_bulk_import') }}" class="btn btn-outline-dark rounded-pill btn-sm">
                        <i class="uil uil-arrow-left"></i> Back
                    </a>
                </div>

                <p class="max-note mb-4">
                    มีไฟล์ใน Draft ทั้งหมด {{ $drafts->count() }} ไฟล์ &mdash; เลือกได้สูงสุด 5 คู่ต่อการนำเข้า 1 ครั้ง
                    (ถ้าจับคู่อัตโนมัติได้น้อยกว่า 5 คู่ ระบบจะดึงมาเฉพาะคู่ที่จับคู่ได้เท่านั้น)
                </p>

                <ul class="nav nav-pills mb-4" id="match-tabs">
                    <li class="nav-item">
                        <button class="nav-link active" data-tab="manual">1. จับคู่เอง</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-tab="filename">2. จับคู่จากชื่อไฟล์</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-tab="scan">3. จับคู่จากการ Scan (Project Name)</button>
                    </li>
                </ul>

                {{-- ============ TAB 1: MANUAL ============ --}}
                <div class="match-tab-pane" id="tab-manual">
                    <div class="card">
                        <div class="card-body">
                            <div id="manual-pairs"></div>
                            <button type="button" id="btn-manual-add-row" class="btn btn-outline-violet btn-sm rounded-pill" style="border:1px dashed #6f42c1; color:#6f42c1;">
                                <i class="uil uil-plus"></i> เพิ่มคู่
                            </button>
                            <hr>
                            <button type="button" class="btn btn-dark rounded-pill btn-confirm" data-source="manual">
                                <i class="uil uil-arrow-right"></i> ยืนยันคู่ที่เลือก และไปสแกนข้อมูล
                            </button>
                        </div>
                    </div>
                </div>

                {{-- ============ TAB 2: BY FILENAME ============ --}}
                <div class="match-tab-pane d-none" id="tab-filename">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted" style="font-size:0.85rem;">
                                จับคู่จากเลขท้ายชื่อไฟล์ เช่น <code>quo_1.jpg</code> จะจับคู่กับ <code>inv_1.jpg</code> โดยอัตโนมัติ
                            </p>
                            <button type="button" class="btn btn-violet rounded-pill mb-4" id="btn-run-filename">
                                <i class="uil uil-search"></i> เริ่มจับคู่จากชื่อไฟล์
                            </button>
                            <div id="filename-results"></div>
                            <button type="button" class="btn btn-dark rounded-pill btn-confirm d-none" data-source="filename">
                                <i class="uil uil-arrow-right"></i> ยืนยันคู่ที่เลือก และไปสแกนข้อมูล
                            </button>
                        </div>
                    </div>
                </div>

                {{-- ============ TAB 3: BY SCAN ============ --}}
                <div class="match-tab-pane d-none" id="tab-scan">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted" style="font-size:0.85rem;">
                                ระบบจะสแกนไฟล์ทั้งหมดด้วย AI ก่อน (อาจใช้เวลาสักครู่) แล้วจับคู่ Quotation กับ Invoice ที่มี
                                <strong>Project Name</strong> ตรงกัน
                            </p>
                            <button type="button" class="btn btn-violet rounded-pill mb-4" id="btn-run-scan">
                                <i class="uil uil-robot"></i> เริ่มสแกนและจับคู่
                            </button>
                            <div id="scan-results"></div>
                            <button type="button" class="btn btn-dark rounded-pill btn-confirm d-none" data-source="scan">
                                <i class="uil uil-arrow-right"></i> ยืนยันคู่ที่เลือก และไปสแกนข้อมูล
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    window.APP_BASE_URL = "{{ url('/') }}";
    const CSRF = "{{ csrf_token() }}";
    const DRAFTS = @json($drafts);
    const MAX_PAIRS = 5;

    let filenamePairs = [];
    let scanPairs = [];

    $(document).ready(function() {

        // --------- Tab switching ---------
        $('#match-tabs .nav-link').on('click', function() {
            $('#match-tabs .nav-link').removeClass('active');
            $(this).addClass('active');
            $('.match-tab-pane').addClass('d-none');
            $('#tab-' + $(this).data('tab')).removeClass('d-none');
        });

        // คีย์เวิร์ดกรองไฟล์ตามชื่อสำหรับแท็บ "จับคู่เอง" (ไม่สนตัวพิมพ์เล็ก-ใหญ่)
        // ใช้ boundary กันคำเหล่านี้ไปแมตช์กลางคำอื่นโดยบังเอิญ เช่น "qu" ใน "equipment"
        // หมายเหตุ: ตั้งใจไม่ใส่ "in" ฝั่ง Invoice เพราะกำกวมเกินไป (ไปแมตช์คำทั่วไปได้ง่าย)
        const QUOTATION_KEYWORD_RE = /(?:^|[^a-z0-9])(quotation|quo|qu)(?:[^a-z0-9]|$)/i;
        const INVOICE_KEYWORD_RE   = /(?:^|[^a-z0-9])(invoice|inv)(?:[^a-z0-9]|$)/i;

        function classifyDraftName(name) {
            const isQuo = QUOTATION_KEYWORD_RE.test(name);
            const isInv = INVOICE_KEYWORD_RE.test(name);
            if (isQuo && !isInv) return 'quotation';
            if (isInv && !isQuo) return 'invoice';
            return 'unknown'; // ไม่มีคีย์เวิร์ดชัดเจน (หรือมีทั้งคู่) -> ให้ขึ้นทั้งสองฝั่งไว้ก่อน
        }

        // kind: 'quotation' หรือ 'invoice' -> ใช้ตัดสินว่าจะโชว์ไฟล์ไหนในช่องนี้
        function draftOptionsHtml(kind, selectedId) {
            let html = '<option value="">-- เลือกไฟล์ --</option>';

            const matched = DRAFTS.filter(d => classifyDraftName(d.document_draft_original_name) === kind);
            const others  = DRAFTS.filter(d => classifyDraftName(d.document_draft_original_name) === 'unknown');

            function optionHtml(d) {
                const sel = String(d.document_draft_id) === String(selectedId) ? 'selected' : '';
                return `<option value="${d.document_draft_id}" ${sel}>${d.document_draft_original_name}</option>`;
            }

            if (matched.length > 0) {
                html += `<optgroup label="${kind === 'quotation' ? 'Quotation' : 'Invoice'}">`;
                matched.forEach(d => html += optionHtml(d));
                html += `</optgroup>`;
            }
            if (others.length > 0) {
                html += `<optgroup label="ไฟล์อื่นๆ (ไม่พบคีย์เวิร์ด)">`;
                others.forEach(d => html += optionHtml(d));
                html += `</optgroup>`;
            }

            return html;
        }

        // ไฟล์ที่ถูกเลือกไปแล้วในแถวอื่น (ฝั่งไหนก็ได้) จะถูก disable + ต่อท้ายด้วย "(เลือกแล้ว)"
        // กันผู้ใช้เผลอเอาไฟล์เดียวกันไปใช้ซ้ำหลายคู่ในการนำเข้าครั้งเดียวกัน
        function refreshManualSelectsState() {
            const $allSelects = $('#manual-pairs .manual-q-select, #manual-pairs .manual-inv-select');

            const usedIds = new Set();
            $allSelects.each(function() {
                const v = $(this).val();
                if (v) usedIds.add(String(v));
            });

            $allSelects.each(function() {
                const $select = $(this);
                const currentVal = String($select.val() || '');

                $select.find('option[value!=""]').each(function() {
                    const id = String($(this).val());
                    const baseText = $(this).text().replace(/\s*\(เลือกแล้ว\)$/, '');
                    const usedElsewhere = usedIds.has(id) && id !== currentVal;

                    $(this).prop('disabled', usedElsewhere);
                    $(this).text(usedElsewhere ? baseText + ' (เลือกแล้ว)' : baseText);
                });
            });
        }

        // --------- TAB 1: Manual ---------
        function addManualRow() {
            if ($('#manual-pairs .pair-row').length >= MAX_PAIRS) {
                Swal.fire('ครบจำนวนแล้ว', 'จับคู่ได้สูงสุด 5 คู่ต่อครั้ง', 'info');
                return;
            }
            const idx = $('#manual-pairs .pair-row').length + 1;
            const row = $(`
                <div class="pair-row">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge pair-index-badge text-white">คู่ที่ ${idx}</span>
                        <i class="uil uil-trash-alt text-danger btn-remove-manual-row" style="cursor:pointer;"></i>
                    </div>
                    <div class="row gy-2">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">ไฟล์ Quotation</label>
                            <select class="form-select manual-q-select">${draftOptionsHtml('quotation')}</select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">ไฟล์ Invoice</label>
                            <select class="form-select manual-inv-select">${draftOptionsHtml('invoice')}</select>
                        </div>
                    </div>
                </div>
            `);
            $('#manual-pairs').append(row);
            refreshManualSelectsState();
        }

        $('#btn-manual-add-row').on('click', addManualRow);
        addManualRow(); // เริ่มด้วย 1 แถวเสมอ

        $(document).on('change', '.manual-q-select, .manual-inv-select', refreshManualSelectsState);

        $(document).on('click', '.btn-remove-manual-row', function() {
            $(this).closest('.pair-row').remove();
            $('#manual-pairs .pair-row').each(function(i) {
                $(this).find('.pair-index-badge').text('คู่ที่ ' + (i + 1));
            });
            refreshManualSelectsState();
        });

        // --------- TAB 2: By filename ---------
        $('#btn-run-filename').on('click', function() {
            const $btn = $(this);
            $btn.prop('disabled', true).html('<i class="uil uil-spinner-alt"></i> กำลังจับคู่...');

            $.ajax({
                url: window.APP_BASE_URL + '/my_document_bulk_import/match/filename',
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF },
            }).done(function(res) {
                filenamePairs = res.pairs;
                renderAutoPairs('#filename-results', filenamePairs, '[data-source="filename"]');
            }).always(function() {
                $btn.prop('disabled', false).html('<i class="uil uil-search"></i> เริ่มจับคู่จากชื่อไฟล์');
            });
        });

        // --------- TAB 3: By scan ---------
        $('#btn-run-scan').on('click', function() {
            const $btn = $(this);
            $btn.prop('disabled', true).html('<i class="uil uil-spinner-alt"></i> กำลังสแกน (อาจใช้เวลาสักครู่)...');

            $.ajax({
                url: window.APP_BASE_URL + '/my_document_bulk_import/match/scan',
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF },
                timeout: 120000,
            }).done(function(res) {
                scanPairs = res.pairs;
                renderAutoPairs('#scan-results', scanPairs, '[data-source="scan"]', res.unmatched);
            }).fail(function() {
                Swal.fire('ผิดพลาด', 'สแกนไม่สำเร็จ กรุณาลองใหม่', 'error');
            }).always(function() {
                $btn.prop('disabled', false).html('<i class="uil uil-robot"></i> เริ่มสแกนและจับคู่');
            });
        });

        function renderAutoPairs(containerSelector, pairs, confirmBtnSelector, unmatched) {
            const $container = $(containerSelector);
            $container.empty();

            if (!pairs || pairs.length === 0) {
                $container.html('<div class="alert alert-warning">ไม่พบคู่ที่จับคู่กันได้อัตโนมัติ ลองใช้แท็บ "จับคู่เอง" แทน</div>');
                $(confirmBtnSelector).addClass('d-none');
            } else {
                pairs.forEach(function(p, i) {
                    const qName = p.quotation_data?.project_name ? ` &mdash; ${p.quotation_data.project_name}` : '';
                    $container.append(`
                        <div class="auto-pair-card" data-q="${p.quotation_file.document_draft_id}" data-inv="${p.invoice_file.document_draft_id}">
                            <div class="form-check">
                                <input class="form-check-input auto-pair-checkbox" type="checkbox" checked>
                                <label class="form-check-label">
                                    <strong>คู่ที่ ${i + 1}:</strong>
                                    ${p.quotation_file.document_draft_original_name} <i class="uil uil-arrow-right"></i> ${p.invoice_file.document_draft_original_name}
                                    ${qName}
                                </label>
                            </div>
                        </div>
                    `);
                });

                $container.find('.auto-pair-checkbox').on('change', function() {
                    $(this).closest('.auto-pair-card').toggleClass('excluded', !$(this).is(':checked'));
                });

                $(confirmBtnSelector).removeClass('d-none');
            }

            // แสดงไฟล์ที่จับคู่ไม่ได้ พร้อมเหตุผล แทนที่จะปล่อยให้หายไปเงียบๆ
            if (unmatched && unmatched.length > 0) {
                const typeLabel = { quotation: 'Quotation', invoice: 'Invoice', unknown: 'ไม่ทราบประเภท' };
                let html = `
                    <div class="unmatched-box">
                        <h6 class="mb-2"><i class="uil uil-exclamation-triangle"></i> ไฟล์ที่จับคู่อัตโนมัติไม่ได้ (${unmatched.length} ไฟล์)</h6>`;
                unmatched.forEach(function(u) {
                    html += `
                        <div class="unmatched-item" data-draft-id="${u.file.document_draft_id}">
                            <div>
                                <strong>[${typeLabel[u.type] || u.type}]</strong> ${u.file.document_draft_original_name}
                                <span class="reason">${u.reason}</span>
                            </div>
                            <button type="button" class="btn btn-outline-secondary btn-sm btn-rescan-file" data-id="${u.file.document_draft_id}">
                                <i class="uil uil-redo"></i> สแกนใหม่
                            </button>
                        </div>`;
                });
                html += `
                        <p class="mt-2 mb-0" style="font-size:0.78rem; color:#6c757d;">
                            ไฟล์เหล่านี้ยังจับคู่เองได้จากแท็บ "1. จับคู่เอง"
                        </p>
                    </div>`;
                $container.append(html);
            }
        }

        // ล้างผลสแกนของไฟล์เดียวแล้วรันสแกนทั้งชุดใหม่ (เผื่อ AI อ่านข้อมูลผิดตั้งแต่รอบแรก)
        $(document).on('click', '.btn-rescan-file', function() {
            const $btn = $(this);
            const id = $btn.data('id');
            $btn.prop('disabled', true).html('<i class="uil uil-spinner-alt"></i>');

            $.ajax({
                url: window.APP_BASE_URL + '/my_document_bulk_import/draft/' + id + '/clear-scan',
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': CSRF },
            }).done(function() {
                $('#btn-run-scan').trigger('click');
            }).fail(function() {
                Swal.fire('ผิดพลาด', 'ล้างผลสแกนไม่สำเร็จ กรุณาลองใหม่', 'error');
                $btn.prop('disabled', false).html('<i class="uil uil-redo"></i> สแกนใหม่');
            });
        });

        // --------- Confirm & go to scan/prepare ---------
        $(document).on('click', '.btn-confirm', function() {
            const source = $(this).data('source');
            let pairsPayload = [];

            if (source === 'manual') {
                $('#manual-pairs .pair-row').each(function() {
                    const q = $(this).find('.manual-q-select').val();
                    const inv = $(this).find('.manual-inv-select').val();
                    if (q && inv) {
                        pairsPayload.push({ quotation_draft_id: q, invoice_draft_id: inv });
                    }
                });
            } else if (source === 'filename') {
                $('#filename-results .auto-pair-card').each(function() {
                    if ($(this).find('.auto-pair-checkbox').is(':checked')) {
                        pairsPayload.push({
                            quotation_draft_id: $(this).data('q'),
                            invoice_draft_id: $(this).data('inv'),
                        });
                    }
                });
            } else if (source === 'scan') {
                $('#scan-results .auto-pair-card').each(function() {
                    if ($(this).find('.auto-pair-checkbox').is(':checked')) {
                        pairsPayload.push({
                            quotation_draft_id: $(this).data('q'),
                            invoice_draft_id: $(this).data('inv'),
                        });
                    }
                });
            }

            if (pairsPayload.length === 0) {
                Swal.fire('ยังไม่ได้เลือกคู่', 'กรุณาเลือกอย่างน้อย 1 คู่ก่อนไปต่อ', 'warning');
                return;
            }

            if (pairsPayload.length > MAX_PAIRS) {
                pairsPayload = pairsPayload.slice(0, MAX_PAIRS);
            }

            const $btn = $(this);
            $btn.prop('disabled', true).html('<i class="uil uil-spinner-alt"></i> กำลังเตรียมข้อมูล...');

            $.ajax({
                url: window.APP_BASE_URL + '/my_document_bulk_import/prepare',
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF },
                contentType: 'application/json',
                data: JSON.stringify({ pairs: pairsPayload }),
            }).done(function(res) {
                window.location.href = res.redirect;
            }).fail(function(xhr) {
                $btn.prop('disabled', false).html('<i class="uil uil-arrow-right"></i> ยืนยันคู่ที่เลือก และไปสแกนข้อมูล');
                Swal.fire('ผิดพลาด', xhr.responseJSON?.message || 'ไม่สามารถเตรียมข้อมูลได้', 'error');
            });
        });

    });
</script>
@endsection