{{-- ═══ ICD-10 Diagnosis Picker ═══════════════════════════════════════════ --}}
{{-- Shared partial included in consultation show, visits/show, and inpatient --}}
{{-- Usage: @include('partials._icd10_picker', ['consultation' => $consultation]) --}}
@php
    $existingDiagnoses = isset($consultation) && $consultation
        ? $consultation->diagnoses()->with('icd10Code')->get()
        : collect();
    $consultationId = $consultation->id ?? null;
@endphp

<div class="space-y-3" id="icd10-picker-wrap">
    {{-- Selected diagnoses chips. No min-height — when there are no
         chips the wrapper collapses to zero so it doesn't leave an
         unexplained blank band above the search input on fresh visits. --}}
    <div id="icd10-selected" class="flex flex-wrap gap-2">
        @foreach($existingDiagnoses as $diag)
        <span class="icd10-chip flex items-center gap-1.5 bg-blue-50 border border-blue-200 text-blue-800 text-xs px-2.5 py-1 rounded-full"
              data-id="{{ $diag->icd10_code_id }}"
              data-type="{{ $diag->type }}"
              data-primary="{{ $diag->is_primary ? 'true' : 'false' }}">
            @if($diag->is_primary)<span class="text-xs font-bold uppercase text-blue-500 mr-0.5">PRIMARY</span>@endif
            <span class="font-mono font-semibold">{{ $diag->icd10Code->code }}</span>
            <span>{{ $diag->icd10Code->description }}</span>
            @if($consultationId)
            <button type="button" class="text-blue-400 hover:text-red-500 ml-1 font-bold"
                onclick="removeDiagnosis({{ $diag->id }}, {{ $consultationId }}, this)">×</button>
            @else
            <button type="button" class="text-blue-400 hover:text-red-500 ml-1 font-bold"
                onclick="removeLocalDiagnosis(this)">×</button>
            @endif
        </span>
        @endforeach
    </div>

    {{-- Hidden JSON field posted with the form (for new consultations) --}}
    <input type="hidden" name="icd10_codes" id="icd10CodesJson" value="[]">

    {{-- Search input --}}
    <div class="relative">
        <div class="flex items-center gap-2">
            <div class="flex-1 relative">
                <input type="text" id="icd10SearchInput" autocomplete="off"
                    class="form-input text-sm pr-8"
                    placeholder="Type ICD-10 code or diagnosis name, e.g. B50, malaria, hypertension…">
                <svg class="absolute right-2.5 top-2.5 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
            <select id="icd10TypeSelect" class="form-input text-xs w-32">
                <option value="final">Final Dx</option>
                <option value="differential">Differential</option>
                <option value="working">Working Dx</option>
            </select>
        </div>

        {{-- Dropdown results --}}
        <div id="icd10Dropdown"
             class="hidden absolute z-50 left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-xl shadow-xl max-h-56 overflow-y-auto">
        </div>
    </div>

    {{-- Legacy free-text fallback --}}
    <details class="text-xs">
        <summary class="cursor-pointer text-gray-400 hover:text-gray-600 select-none">
            Can't find the code? Enter free-text diagnosis ▾
        </summary>
        <div class="mt-2">
            <input type="text" name="diagnosis" id="diagnosisFreeText"
                class="form-input text-sm"
                placeholder="Free-text diagnosis (fallback only)"
                value="{{ isset($consultation) && $consultation ? (is_array($consultation->diagnosis) ? implode(', ', $consultation->diagnosis) : $consultation->diagnosis) : '' }}">
            <p class="text-xs text-amber-600 mt-1">⚠ Free-text diagnoses are not linked to ICD-10 and will not appear in MOH reports or analytics.</p>
        </div>
    </details>
</div>

@once
@push('scripts')
<script>
(function() {
    const searchInput = document.getElementById('icd10SearchInput');
    const dropdown    = document.getElementById('icd10Dropdown');
    const jsonField   = document.getElementById('icd10CodesJson');
    const typeSelect  = document.getElementById('icd10TypeSelect');
    const selected    = document.getElementById('icd10-selected');

    if (!searchInput) return;

    // Track codes selected in this session (for new consultations without a DB id)
    let localCodes = [];

    function updateJsonField() {
        jsonField.value = JSON.stringify(localCodes);
    }

    function addChip(code, description, type, isPrimary, localId) {
        const chip = document.createElement('span');
        chip.className = 'icd10-chip flex items-center gap-1.5 bg-blue-50 border border-blue-200 text-blue-800 text-xs px-2.5 py-1 rounded-full';
        chip.dataset.id   = localId;
        chip.dataset.type = type;
        chip.innerHTML = `
            ${isPrimary ? '<span class="text-xs font-bold uppercase text-blue-500 mr-0.5">PRIMARY</span>' : ''}
            <span class="font-mono font-semibold">${code}</span>
            <span>${description}</span>
            <button type="button" class="text-blue-400 hover:text-red-500 ml-1 font-bold"
                onclick="removeLocalDiagnosis(this)">×</button>`;
        selected.appendChild(chip);
    }

    // Search with debounce
    let debounce;
    searchInput.addEventListener('input', function() {
        clearTimeout(debounce);
        const q = this.value.trim();
        if (q.length < 2) { dropdown.classList.add('hidden'); return; }
        debounce = setTimeout(() => {
            fetch(`${window.HMIS_BASE}/icd10/search?q=${encodeURIComponent(q)}`, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(results => {
                if (!results.length) {
                    dropdown.innerHTML = '<div class="px-4 py-3 text-xs text-gray-400">No codes found | try free-text below.</div>';
                } else {
                    dropdown.innerHTML = results.map(r => `
                        <div class="px-3 py-2.5 hover:bg-blue-50 cursor-pointer border-b border-gray-50 flex items-start gap-3 icd10-result"
                             data-id="${r.id}" data-code="${r.code}" data-description="${r.description}">
                            <span class="font-mono font-semibold text-blue-700 text-xs min-w-[3.5rem]">${r.code}</span>
                            <span class="text-xs text-gray-800 leading-snug">${r.description}</span>
                            <span class="ml-auto text-xs text-gray-400 whitespace-nowrap">${r.category ?? ''}</span>
                        </div>`).join('');
                }
                dropdown.classList.remove('hidden');

                dropdown.querySelectorAll('.icd10-result').forEach(row => {
                    row.addEventListener('click', () => selectCode(row));
                });
            })
            .catch(() => {});
        }, 250);
    });

    function selectCode(row) {
        const id          = parseInt(row.dataset.id);
        const code        = row.dataset.code;
        const description = row.dataset.description;
        const type        = typeSelect ? typeSelect.value : 'final';
        const consultId   = {{ $consultationId ?? 'null' }};
        const isPrimary   = localCodes.filter(c => c.type === type).length === 0 &&
                            !selected.querySelector(`[data-type="${type}"]`);

        // ── If consultation already exists, post via AJAX ──────────────────────
        if (consultId) {
            fetch(`${window.HMIS_BASE}/consultations/${consultId}/diagnoses`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({ icd10_code_id: id, type, is_primary: isPrimary })
            })
            .then(r => r.json())
            .then(data => {
                if (data.id) {
                    addSavedChip(data);
                    showToast(`${code} added`, 'success');
                }
            })
            .catch(() => showToast('Error adding diagnosis', 'error'));
        } else {
            // ── New consultation | collect locally, post with form ─────────────
            if (localCodes.find(c => c.id === id && c.type === type)) {
                dropdown.classList.add('hidden');
                searchInput.value = '';
                return;
            }
            localCodes.push({ id, type, is_primary: isPrimary });
            updateJsonField();
            addChip(code, description, type, isPrimary, id);
        }

        dropdown.classList.add('hidden');
        searchInput.value = '';
    }

    function addSavedChip(data) {
        const chip = document.createElement('span');
        chip.className = 'icd10-chip flex items-center gap-1.5 bg-blue-50 border border-blue-200 text-blue-800 text-xs px-2.5 py-1 rounded-full';
        chip.dataset.diagId = data.id;
        chip.innerHTML = `
            ${data.is_primary ? '<span class="text-xs font-bold uppercase text-blue-500 mr-0.5">PRIMARY</span>' : ''}
            <span class="font-mono font-semibold">${data.code}</span>
            <span>${data.description}</span>
            <button type="button" class="text-blue-400 hover:text-red-500 ml-1 font-bold"
                onclick="removeDiagnosis(${data.id}, {{ $consultationId ?? 'null' }}, this)">×</button>`;
        selected.appendChild(chip);
    }

    // Close dropdown on outside click
    document.addEventListener('click', e => {
        if (!searchInput.contains(e.target) && !dropdown.contains(e.target)) {
            dropdown.classList.add('hidden');
        }
    });

    function showToast(msg, type) {
        const t = document.createElement('div');
        t.className = `fixed bottom-4 right-4 z-[9999] text-xs font-semibold px-4 py-2.5 rounded-lg shadow-lg
            ${type === 'success' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'}`;
        t.textContent = msg;
        document.body.appendChild(t);
        setTimeout(() => t.remove(), 3000);
    }

    // Expose globals for inline onclick handlers
    window.removeLocalDiagnosis = function(btn) {
        const chip = btn.closest('.icd10-chip');
        const id   = parseInt(chip.dataset.id);
        localCodes = localCodes.filter(c => c.id !== id);
        updateJsonField();
        chip.remove();
    };

    window.removeDiagnosis = function(diagId, consultId, btn) {
        if (!consultId) { window.removeLocalDiagnosis(btn); return; }
        fetch(`${window.HMIS_BASE}/consultations/${consultId}/diagnoses/${diagId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
        .then(r => r.json())
        .then(() => {
            btn.closest('.icd10-chip').remove();
        })
        .catch(() => {});
    };
})();
</script>
@endpush
@endonce