@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? 'Dupe Checker',
        $subTitle ?? 'My Leads',
        [],
        []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="container-fluid" id="dupe-checker-root">
    <div class="main_title d-flex justify-content-between align-items-center">
        <h2>Dupe Checker</h2>
        <a href="{{ route('leads.index') }}" class="{{ \Config::get('view.buttons.secondary') }}">
            <i class="{{ \Config::get('settings.icon_back') }}"></i> Back to My Leads
        </a>
    </div>

    {{-- Filter Panel --}}
    <div class="project-box mb-3">
        <h5 class="mb-3"><i class="bx bx-filter-alt me-1"></i> Search Filters</h5>
        <div class="row g-3 align-items-end" id="dupeFilterForm">
            <div class="col-lg-3 col-md-6">
                <label class="form-label">Find Dupes For</label>
                <select class="form-select" id="dupeScope">
                    <option value="all">All Leads</option>
                    <option value="mine">My Leads</option>
                    <option value="user">By User</option>
                    <option value="campaign">By Campaign</option>
                    <option value="status">By Status</option>
                </select>
            </div>
            <div class="col-lg-3 col-md-6 d-none" id="scopeUserWrap">
                <label class="form-label">Select User</label>
                <select class="form-select" id="scopeUserId">
                    <option value="">-- Select User --</option>
                    @foreach($users as $u)
                        <option value="{{ $u->id }}">{{ trim($u->first_name . ' ' . $u->last_name) ?: $u->email }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-3 col-md-6 d-none" id="scopeCampaignWrap">
                <label class="form-label">Select Campaign</label>
                <select class="form-select" id="scopeCampaignId">
                    <option value="">-- Select Campaign --</option>
                    @foreach($campaigns as $c)
                        <option value="{{ $c->id }}">{{ $c->title }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-3 col-md-6 d-none" id="scopeStatusWrap">
                <label class="form-label">Select Status</label>
                <select class="form-select" id="scopeStatusId">
                    <option value="">-- Select Status --</option>
                    @foreach($statuses as $s)
                        <option value="{{ $s->id }}">{{ $s->title }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-3 col-md-6">
                <label class="form-label">Search By</label>
                <select class="form-select" id="dupeSearchBy">
                    <option value="dba_name">DBA Name</option>
                    <option value="phone">Phone</option>
                    <option value="email">Email</option>
                </select>
            </div>
            <div class="col-lg-3 col-md-6">
                <label class="form-label">Ignore Status(es)</label>
                <select class="form-select" id="ignoreStatuses" multiple style="height:80px;">
                    @foreach($statuses as $s)
                        <option value="{{ $s->id }}">{{ $s->title }}</option>
                    @endforeach
                </select>
                <small class="text-muted">Hold Ctrl/Cmd to multi-select</small>
            </div>
            <div class="col-lg-2 col-md-6">
                <button type="button" class="green-btn-inner waves-effect w-100" id="dupeSearchBtn">
                    <i class="bx bx-search me-1"></i> Search
                </button>
            </div>
        </div>
    </div>

    {{-- Results Area --}}
    <div id="dupeResultsArea" class="d-none">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 id="dupeGroupCounter" class="mb-0 text-muted"></h5>
            <div id="dupePagination" class="d-flex gap-2"></div>
        </div>
        <div id="dupeGroupsContainer"></div>
    </div>

    <div id="dupeEmptyState" class="d-none text-center py-5">
        <i class="bx bx-check-circle text-success" style="font-size:3rem;"></i>
        <p class="mt-2 text-muted">No duplicate groups found.</p>
    </div>

    <div id="dupeLoadingState" class="d-none text-center py-5">
        <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
        <p class="mt-2 text-muted">Scanning for duplicates...</p>
    </div>
</div>

{{-- Group Card Template (hidden) --}}
<template id="dupeGroupTemplate">
    <div class="dupe-group card mb-4" data-pair-index="">
        <div class="card-header d-flex justify-content-between align-items-center py-2">
            <span class="fw-semibold">Duplicate Group</span>
            <span class="badge confidence-badge"></span>
        </div>
        <div class="card-body p-0">
            <div class="row g-0">
                <div class="col-md-6 border-end p-3 lead-card" data-side="a">
                    <div class="d-flex align-items-center mb-2">
                        <input type="radio" name="primary___IDX__" value="" class="form-check-input me-2 primary-radio" id="radioA___IDX__">
                        <label class="form-check-label fw-semibold" for="radioA___IDX__">Select as Primary</label>
                    </div>
                    <table class="table custom-table mb-0">
                        <tbody class="lead-fields-a"></tbody>
                    </table>
                </div>
                <div class="col-md-6 p-3 lead-card" data-side="b">
                    <div class="d-flex align-items-center mb-2">
                        <input type="radio" name="primary___IDX__" value="" class="form-check-input me-2 primary-radio" id="radioB___IDX__">
                        <label class="form-check-label fw-semibold" for="radioB___IDX__">Select as Primary</label>
                    </div>
                    <table class="table custom-table mb-0">
                        <tbody class="lead-fields-b"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex gap-2 justify-content-end">
            <button type="button" class="black-btn-inner waves-effect btn-sm not-dupe-btn">
                <i class="bx bx-x-circle me-1"></i> Not a Duplicate
            </button>
            <button type="button" class="btn btn-sm btn-danger merge-btn">
                <i class="bx bx-git-merge me-1"></i> Merge
            </button>
        </div>
    </div>
</template>
@endsection

@push('page_script')
<script>
(function () {
    const SEARCH_URL = '{{ route('leads.dupe-checker.search') }}';
    const MERGE_URL  = '{{ route('leads.dupe-checker.merge') }}';
    const CSRF       = '{{ csrf_token() }}';

    let currentPage = 1;
    let lastPage    = 1;
    let currentGroups = [];

    const FIELDS = ['dba', 'phone', 'email', 'address', 'status', 'assigned_to', 'created_at'];
    const LABELS = {
        dba: 'DBA Name', phone: 'Phone', email: 'Email',
        address: 'Address', status: 'Status',
        assigned_to: 'Assigned To', created_at: 'Created'
    };

    // Scope visibility
    document.getElementById('dupeScope').addEventListener('change', function () {
        ['scopeUserWrap', 'scopeCampaignWrap', 'scopeStatusWrap'].forEach(id => {
            document.getElementById(id).classList.add('d-none');
        });
        if (this.value === 'user') document.getElementById('scopeUserWrap').classList.remove('d-none');
        if (this.value === 'campaign') document.getElementById('scopeCampaignWrap').classList.remove('d-none');
        if (this.value === 'status') document.getElementById('scopeStatusWrap').classList.remove('d-none');
    });

    document.getElementById('dupeSearchBtn').addEventListener('click', function () {
        currentPage = 1;
        doSearch();
    });

    function buildPayload(page) {
        const scope      = document.getElementById('dupeScope').value;
        const searchBy   = document.getElementById('dupeSearchBy').value;
        const ignoreEls  = document.getElementById('ignoreStatuses').selectedOptions;
        const ignoreIds  = Array.from(ignoreEls).map(o => o.value);

        const payload = new URLSearchParams({
            _token: CSRF,
            scope, search_by: searchBy, page
        });

        if (scope === 'user') payload.set('user_id', document.getElementById('scopeUserId').value);
        if (scope === 'campaign') payload.set('campaign_id', document.getElementById('scopeCampaignId').value);
        if (scope === 'status') payload.set('status_id', document.getElementById('scopeStatusId').value);
        ignoreIds.forEach(id => payload.append('ignore_status_ids[]', id));
        return payload;
    }

    function doSearch() {
        showState('loading');
        fetch(SEARCH_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': CSRF },
            body: buildPayload(currentPage).toString()
        })
        .then(r => r.json())
        .then(json => {
            if (json.status !== 200) { alert(json.message || 'Search error'); showState('empty'); return; }
            const d = json.data;
            lastPage = d.last_page;
            currentGroups = d.groups || [];

            if (currentGroups.length === 0) { showState('empty'); return; }

            document.getElementById('dupeGroupCounter').textContent =
                `Found ${d.total} duplicate group${d.total !== 1 ? 's' : ''}`;

            renderGroups(currentGroups);
            renderPagination(d.page, d.last_page);
            showState('results');
        })
        .catch(err => { console.error(err); showState('empty'); });
    }

    function renderGroups(groupsOfPairs) {
        const container = document.getElementById('dupeGroupsContainer');
        container.innerHTML = '';
        let idx = 0;
        groupsOfPairs.forEach(pairs => {
            pairs.forEach(pair => {
                container.appendChild(buildGroupCard(pair, idx++));
            });
        });

        // Bind merge / not-dupe handlers
        container.querySelectorAll('.merge-btn').forEach(btn => {
            btn.addEventListener('click', handleMerge);
        });
        container.querySelectorAll('.not-dupe-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                this.closest('.dupe-group').remove();
                updateCounter();
            });
        });
    }

    function buildGroupCard(pair, idx) {
        const tmpl = document.getElementById('dupeGroupTemplate').content.cloneNode(true);
        const card = tmpl.querySelector('.dupe-group');
        card.dataset.pairIndex = idx;
        card.dataset.primaryId = '';
        card.dataset.aId = pair.a.id;
        card.dataset.bId = pair.b.id;

        // Confidence badge
        const badge = card.querySelector('.confidence-badge');
        badge.textContent = pair.confidence + '% match';
        if (pair.confidence >= 80) {
            badge.classList.add('bg-danger');
        } else if (pair.confidence >= 60) {
            badge.classList.add('bg-warning', 'text-dark');
        } else {
            badge.classList.add('bg-secondary');
        }

        // Radio name
        card.querySelectorAll('[name^="primary__"]').forEach(el => {
            el.name = 'primary_' + idx;
        });
        card.querySelectorAll('[id^="radioA__"]').forEach(el => {
            el.id = 'radioA_' + idx;
            el.value = pair.a.id;
            card.querySelector('[for^="radioA__"]').setAttribute('for', 'radioA_' + idx);
        });
        card.querySelectorAll('[id^="radioB__"]').forEach(el => {
            el.id = 'radioB_' + idx;
            el.value = pair.b.id;
            card.querySelector('[for^="radioB__"]').setAttribute('for', 'radioB_' + idx);
        });

        // Populate fields
        populateLeadFields(card.querySelector('.lead-fields-a'), pair.a, pair.b);
        populateLeadFields(card.querySelector('.lead-fields-b'), pair.b, pair.a);

        return card;
    }

    function populateLeadFields(tbody, lead, other) {
        FIELDS.forEach(f => {
            const tr = document.createElement('tr');
            const valA = lead[f] || '';
            const valB = other[f] || '';
            const matches = valA && valB && valA.toLowerCase() === valB.toLowerCase();
            tr.innerHTML = `<th class="text-muted" style="width:120px;">${LABELS[f]}</th>
                <td class="${matches ? 'fw-semibold text-success' : ''}">
                    ${valA ? (f === 'dba' ? `<a href="${lead.edit_url}" target="_blank">${escHtml(valA)}</a>` : escHtml(valA)) : '<span class="text-muted">—</span>'}
                </td>`;
            tbody.appendChild(tr);
        });
    }

    function handleMerge() {
        const card = this.closest('.dupe-group');
        const radios = card.querySelectorAll('.primary-radio');
        let primaryId = null, secondaryId = null;

        radios.forEach(r => {
            if (r.checked) primaryId = r.value;
            else secondaryId = r.value;
        });

        if (!primaryId) { alert('Please select which lead is the PRIMARY record.'); return; }
        if (!secondaryId) { alert('Could not determine secondary lead.'); return; }

        if (!confirm('Merge secondary lead into primary? This cannot be undone.')) return;

        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Merging...';

        fetch(MERGE_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': CSRF },
            body: new URLSearchParams({ _token: CSRF, primary_id: primaryId, secondary_id: secondaryId }).toString()
        })
        .then(r => r.json())
        .then(json => {
            if (json.status === 200) {
                card.style.transition = 'opacity .3s';
                card.style.opacity = '0';
                setTimeout(() => { card.remove(); updateCounter(); }, 300);
            } else {
                alert(json.message || 'Merge failed');
                btn.disabled = false;
                btn.innerHTML = '<i class="bx bx-git-merge me-1"></i> Merge';
            }
        })
        .catch(err => { console.error(err); btn.disabled = false; btn.innerHTML = '<i class="bx bx-git-merge me-1"></i> Merge'; });
    }

    function updateCounter() {
        const remaining = document.querySelectorAll('.dupe-group').length;
        document.getElementById('dupeGroupCounter').textContent =
            `Showing ${remaining} duplicate group${remaining !== 1 ? 's' : ''}`;
    }

    function renderPagination(page, last) {
        const el = document.getElementById('dupePagination');
        el.innerHTML = '';
        if (last <= 1) return;

        const make = (label, p, disabled) => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'black-btn-inner waves-effect btn-sm' + (disabled ? ' disabled' : '');
            btn.innerHTML = label;
            if (!disabled) {
                btn.addEventListener('click', () => { currentPage = p; doSearch(); });
            }
            return btn;
        };

        el.appendChild(make('&laquo; First', 1, page === 1));
        el.appendChild(make('&lsaquo; Prev', page - 1, page === 1));
        const info = document.createElement('span');
        info.className = 'black-btn-inner waves-effect btn-sm disabled';
        info.textContent = `Page ${page} of ${last}`;
        el.appendChild(info);
        el.appendChild(make('Next &rsaquo;', page + 1, page === last));
        el.appendChild(make('Last &raquo;', last, page === last));
    }

    function showState(state) {
        document.getElementById('dupeResultsArea').classList.add('d-none');
        document.getElementById('dupeEmptyState').classList.add('d-none');
        document.getElementById('dupeLoadingState').classList.add('d-none');
        if (state === 'results') document.getElementById('dupeResultsArea').classList.remove('d-none');
        if (state === 'empty')   document.getElementById('dupeEmptyState').classList.remove('d-none');
        if (state === 'loading') document.getElementById('dupeLoadingState').classList.remove('d-none');
    }

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