{{--
    Linked Records Modal (Phase 6 - G-25)
    Usage: @include('admin.leads.partials.modal_linked_records', ['leadId' => $leadId])
--}}
<div class="modal fade" id="linkedRecordsModal" tabindex="-1" aria-labelledby="linkedRecordsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="linkedRecordsModalLabel">
                    <i class="bx bx-link me-1"></i> Linked Records
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{-- Search to Link --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Link Another Lead</label>
                    <div class="input-group input-group-sm">
                        <input type="text" id="linkedSearchInput" class="form-control" placeholder="Search leads by DBA, name, email, or phone..." autocomplete="off">
                        <button class="green-btn-inner waves-effect" type="button" id="linkedSearchBtn">
                            <i class="bx bx-search"></i>
                        </button>
                    </div>
                    <div id="linkedSearchResults" class="list-group mt-1 d-none" style="max-height:200px; overflow-y:auto; position:absolute; z-index:1050; min-width:300px;"></div>
                </div>

                <hr>

                {{-- Currently Linked Records --}}
                <h6 class="mb-2 text-muted">Currently Linked Records</h6>
                <div id="linkedRecordsList">
                    <div class="text-center text-muted py-3" id="linkedLoadingState">
                        <div class="spinner-border spinner-border-sm me-1" role="status"></div> Loading...
                    </div>
                    <div class="d-none text-center text-muted py-3" id="linkedEmptyState">
                        <i class="bx bx-link-external" style="font-size:1.5rem;"></i>
                        <p class="mb-0 mt-1">No records linked yet.</p>
                    </div>
                    <ul class="list-group" id="linkedListContainer"></ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="black-btn-inner waves-effect btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@push('modals')
<script>
(function () {
    const leadId    = {{ (int)($leadId ?? 0) }};
    const indexUrl  = '{{ route('leads.linked-records.index', ['lead' => '__L__']) }}'.replace('__L__', leadId);
    const storeUrl  = '{{ route('leads.linked-records.store', ['lead' => '__L__']) }}'.replace('__L__', leadId);
    const searchUrl = '{{ route('leads.linked-records.search', ['lead' => '__L__']) }}'.replace('__L__', leadId);
    const CSRF      = '{{ csrf_token() }}';

    let searchTimer = null;

    // Load linked records when modal opens
    var _linkedModal = document.getElementById('linkedRecordsModal');
    if (_linkedModal) _linkedModal.addEventListener('show.bs.modal', loadLinked);

    function loadLinked() {
        document.getElementById('linkedLoadingState').classList.remove('d-none');
        document.getElementById('linkedEmptyState').classList.add('d-none');
        document.getElementById('linkedListContainer').innerHTML = '';

        fetch(indexUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.json())
            .then(json => {
                document.getElementById('linkedLoadingState').classList.add('d-none');
                const items = json.data || [];
                if (!items.length) {
                    document.getElementById('linkedEmptyState').classList.remove('d-none');
                    return;
                }
                items.forEach(appendLinkedItem);
                updateLinkedCount(items.length);
            })
            .catch(err => {
                console.error(err);
                document.getElementById('linkedLoadingState').classList.add('d-none');
            });
    }

    function appendLinkedItem(item) {
        const li = document.createElement('li');
        li.className = 'list-group-item d-flex justify-content-between align-items-center py-2';
        li.dataset.id = item.id;
        li.innerHTML = `
            <div>
                <i class="bx bx-link me-1 text-muted"></i>
                ${item.edit_url
                    ? '<a href="' + item.edit_url + '" target="_blank">' + escHtml(item.label) + '</a>'
                    : escHtml(item.label)}
                ${item.status === 'deleted' ? '<span class="badge bg-danger ms-1">Deleted</span>' : ''}
                <small class="text-muted ms-1">(${escHtml(item.linked_type)} #${item.linked_id})</small>
            </div>
            <button type="button" class="btn btn-sm btn-outline-danger unlink-btn" data-url="${item.delete_url}">
                <i class="bx bx-unlink"></i> Unlink
            </button>`;
        li.querySelector('.unlink-btn').addEventListener('click', handleUnlink);
        document.getElementById('linkedListContainer').appendChild(li);
    }

    function handleUnlink() {
        if (!confirm('Remove this linked record?')) return;
        const btn = this;
        const li  = btn.closest('li');
        btn.disabled = true;
        fetch(btn.dataset.url, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json' }
        })
        .then(r => r.json())
        .then(json => {
            if (json.status === 200) {
                li.remove();
                const remaining = document.querySelectorAll('#linkedListContainer li').length;
                if (!remaining) document.getElementById('linkedEmptyState').classList.remove('d-none');
                updateLinkedCount(remaining);
            } else {
                alert(json.message || 'Unlink failed.');
                btn.disabled = false;
            }
        })
        .catch(() => { btn.disabled = false; });
    }

    // Search
    const searchInput = document.getElementById('linkedSearchInput');
    const searchResultsEl = document.getElementById('linkedSearchResults');

    searchInput.addEventListener('input', function () {
        clearTimeout(searchTimer);
        const val = this.value.trim();
        if (val.length < 2) { searchResultsEl.classList.add('d-none'); return; }
        searchTimer = setTimeout(() => doSearch(val), 300);
    });

    var _linkedSearchBtn = document.getElementById('linkedSearchBtn');
    if (_linkedSearchBtn) _linkedSearchBtn.addEventListener('click', () => {
        doSearch(searchInput.value.trim());
    });

    function doSearch(q) {
        if (q.length < 2) return;
        fetch(searchUrl + '?q=' + encodeURIComponent(q), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.json())
            .then(json => {
                const items = json.data || [];
                searchResultsEl.innerHTML = '';
                if (!items.length) {
                    searchResultsEl.innerHTML = '<div class="list-group-item text-muted">No leads found.</div>';
                    searchResultsEl.classList.remove('d-none');
                    return;
                }
                items.forEach(item => {
                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'list-group-item list-group-item-action';
                    btn.textContent = item.label;
                    btn.addEventListener('click', () => linkLead(item.id, item.label));
                    searchResultsEl.appendChild(btn);
                });
                searchResultsEl.classList.remove('d-none');
            })
            .catch(err => console.error(err));
    }

    function linkLead(linkedId, label) {
        searchResultsEl.classList.add('d-none');
        searchInput.value = '';

        fetch(storeUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': CSRF },
            body: new URLSearchParams({ _token: CSRF, linked_id: linkedId })
        })
        .then(r => r.json())
        .then(json => {
            if (json.status === 200) {
                document.getElementById('linkedEmptyState').classList.add('d-none');
                const newItem = {
                    id: Date.now(),
                    edit_url: json.data.edit_url,
                    label: json.data.label,
                    linked_type: 'Lead',
                    linked_id: json.data.linked_id,
                    status: 'active',
                    delete_url: '{{ route('leads.linked-records.destroy', ['lead' => '__L__', 'linked' => '__LD__']) }}'.replace('__L__', leadId).replace('__LD__', '')
                };
                // Reload to get proper delete URL
                loadLinked();
            } else {
                alert(json.message || 'Failed to link record.');
            }
        })
        .catch(err => { console.error(err); alert('Failed to link record.'); });
    }

    // Close search results when clicking outside
    document.addEventListener('click', e => {
        if (!searchInput.contains(e.target) && !searchResultsEl.contains(e.target)) {
            searchResultsEl.classList.add('d-none');
        }
    });

    function updateLinkedCount(count) {
        const btn = document.querySelector('[data-bs-target="#linkedRecordsModal"]');
        if (btn) {
            btn.innerHTML = btn.innerHTML.replace(/\(\d+\)/, '(' + count + ')');
        }
    }

    function escHtml(str) {
        const d = document.createElement('div');
        d.appendChild(document.createTextNode(String(str)));
        return d.innerHTML;
    }
})();
</script>
@endpush