@extends('layouts.app')
@section('title', 'Normalize Drug Categories')

@section('content')

<style>
  .cat-sheet { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; background: #fff; }
  .cat-sheet thead th { position: sticky; top: 0; background: #f8fafc; font-size: 10px; font-weight: 700; color: #475569;
                        text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; text-align: left;
                        border-bottom: 2px solid #cbd5e1; border-right: 1px solid #e2e8f0; white-space: nowrap; z-index: 5; }
  .cat-sheet tbody td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: middle; }
  .cat-sheet tbody tr:hover td { background: #fafbfd; }
  .cat-sheet tbody tr.dirty td { background: #fef9c3; }
  .cat-sheet tbody tr.dirty td:first-child { border-left: 3px solid #eab308; }
  .cat-sheet tbody tr.has-error td { background: #fee2e2 !important; }
  .cat-sheet tbody tr.has-error td:first-child { border-left: 3px solid #dc2626; }
  .cat-sheet tbody tr.uncategorized td.name-cell::before { content: '◆ '; color: #dc2626; font-weight: 700; }
  .cat-sheet select { width: 100%; padding: 6px 8px; border: 1px solid #e2e8f0; background: #fff;
                      font-size: 12px; border-radius: 4px; cursor: pointer; }
  .cat-sheet select:hover { border-color: #94a3b8; }
  .cat-sheet select:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
  .cat-sheet .accept-btn { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; padding: 3px 8px;
                           border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .cat-sheet .accept-btn:hover { background: #cffafe; }
  .cat-sheet .accept-btn:disabled { opacity: .3; cursor: not-allowed; }

  .cat-legacy { background: #fee2e2; color: #991b1b; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .cat-canon  { background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .cat-empty  { color: #94a3b8; font-style: italic; font-size: 11px; }
  .cat-suggest{ background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }

  .progress-bar { height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; width: 200px; }
  .progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #059669); transition: width .3s; }
</style>

<div class="flex justify-between items-center mb-3">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Normalize Drug Categories</h1>
        <p class="text-sm text-gray-500">Collapse legacy categories onto the approved 20-category list. One click per row.</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('pharmacy.drugs.bulk-edit') }}" class="btn-secondary text-xs">Bulk Editor →</a>
        <a href="{{ route('pharmacy.drugs') }}" class="btn-secondary text-xs">← Back to Drug List</a>
    </div>
</div>

{{-- Summary + legacy-category counts --}}
@php
    $total       = $drugs->count();
    $canonInUse  = $drugs->filter(fn($d) => $d->category && in_array($d->category, $canonical, true))->count();
    $uncategorized = $drugs->filter(fn($d) => !$d->category)->count();
    $legacy      = $total - $canonInUse - $uncategorized;
@endphp
<div class="bg-white rounded-xl border shadow-sm mb-4 p-4">
    <div class="flex items-center gap-6 flex-wrap">
        <div>
            <p class="text-xs text-gray-500 uppercase font-semibold">Status</p>
            <div class="flex items-center gap-3 mt-1">
                <div class="progress-bar"><div class="progress-fill" style="width: {{ $total ? round($canonInUse / $total * 100) : 0 }}%"></div></div>
                <span class="text-sm font-semibold text-gray-700">{{ $canonInUse }} / {{ $total }} on approved list</span>
            </div>
        </div>
        <div>
            <p class="text-xs text-gray-500 uppercase font-semibold">Need attention</p>
            <p class="text-sm mt-1">
                <span class="text-red-600 font-semibold">{{ $legacy }}</span> legacy
                · <span class="text-amber-600 font-semibold">{{ $uncategorized }}</span> uncategorized
            </p>
        </div>
        @if($legacyCounts->count())
        <div class="flex-1">
            <p class="text-xs text-gray-500 uppercase font-semibold mb-1">Legacy categories in use</p>
            <div class="flex flex-wrap gap-1.5">
                @foreach($legacyCounts as $legacyName => $count)
                <button type="button" onclick="filterByLegacy('{{ addslashes($legacyName) }}')" class="text-xs bg-red-50 text-red-700 border border-red-200 px-2 py-0.5 rounded hover:bg-red-100">
                    {{ $legacyName }} <span class="text-red-500">({{ $count }})</span>
                </button>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

<div class="bg-white rounded-xl border shadow-sm overflow-hidden">

    {{-- Toolbar --}}
    <div class="px-4 py-3 flex flex-wrap items-center gap-3 border-b">
        <input type="text" id="catSearch" placeholder="Search name, generic, code…"
               class="form-input text-xs" style="width: 280px">

        <select id="catFilter" class="form-input text-xs" style="width: 220px">
            <option value="">Show all</option>
            <option value="legacy">Needs review (legacy or blank)</option>
            <option value="uncategorized">Uncategorized only</option>
            <option value="legacy-only">Legacy only (has a non-approved category)</option>
            <option value="approved">Already on approved list</option>
        </select>

        <span id="catVisibleCount" class="text-xs text-gray-500"></span>

        <div class="ml-auto flex items-center gap-3">
            <button id="catAcceptAllBtn" class="btn-secondary text-xs" title="Accept every auto-suggestion shown (only applies to currently-visible rows)">
                ✓ Accept all visible suggestions
            </button>
            <span id="catDirtyStatus" class="text-xs text-gray-500">No changes</span>
            <button id="catResetAllBtn" class="btn-secondary text-xs" disabled>Discard</button>
            <button id="catSaveBtn" class="btn-primary text-sm" disabled>
                💾 Save <span id="catSaveCount"></span>
            </button>
        </div>
    </div>

    <div id="catBanner" class="hidden px-4 py-3 text-sm font-medium border-b"></div>

    {{-- Sheet --}}
    <div class="overflow-x-auto" style="max-height: calc(100vh - 320px)">
        <table class="cat-sheet">
            <thead>
                <tr>
                    <th style="width:30px"></th>
                    <th style="width:90px">Code</th>
                    <th style="min-width:260px">Drug (name · generic)</th>
                    <th style="width:170px">Current</th>
                    <th style="width:170px">Suggested</th>
                    <th style="min-width:220px">Assign Category *</th>
                    <th style="width:100px"></th>
                </tr>
            </thead>
            <tbody id="catRows">
            @foreach($drugs as $d)
            @php
                $isCanon    = $d->category && in_array($d->category, $canonical, true);
                $isUncat    = !$d->category;
                $isLegacy   = $d->category && !$isCanon;
                // Initial value for the dropdown: whichever is most useful
                // — if already canonical, keep it; else suggest; else blank.
                $initial    = $isCanon ? $d->category : ($d->suggested_category ?: '');
            @endphp
            <tr data-id="{{ $d->id }}"
                data-original="{{ $d->category }}"
                data-category-state="@if($isCanon)canon @elseif($isLegacy)legacy @else uncategorized @endif"
                data-legacy-name="{{ $d->category }}"
                class="@if($isUncat)uncategorized @endif">
                <td class="text-center"><span class="dirty-indicator text-gray-300 text-xs">●</span></td>
                <td class="font-mono text-xs text-gray-500">{{ $d->code }}</td>
                <td class="name-cell">
                    <div class="font-semibold text-gray-800">{{ $d->name }}</div>
                    @if($d->generic_name)<div class="text-xs text-gray-400">{{ $d->generic_name }}</div>@endif
                </td>
                <td>
                    @if($isCanon)
                        <span class="cat-canon">{{ $d->category }}</span>
                    @elseif($isLegacy)
                        <span class="cat-legacy" title="Not on approved list">{{ $d->category }}</span>
                    @else
                        <span class="cat-empty">— none —</span>
                    @endif
                </td>
                <td>
                    @if($d->suggested_category && $d->suggested_category !== $d->category)
                        <span class="cat-suggest">{{ $d->suggested_category }}</span>
                    @elseif($d->suggested_category && $d->suggested_category === $d->category)
                        <span class="cat-empty">(same)</span>
                    @else
                        <span class="cat-empty">No match</span>
                    @endif
                </td>
                <td>
                    <select data-field="category">
                        <option value="">— Select category —</option>
                        @foreach($canonical as $c)
                        <option value="{{ $c }}" {{ $initial === $c ? 'selected' : '' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </td>
                <td style="text-align:center">
                    @if($d->suggested_category)
                    <button type="button" class="accept-btn"
                            data-suggested="{{ $d->suggested_category }}"
                            title="Set category to the suggestion">✓ Use</button>
                    @endif
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>

<script>
(function() {
    const sheet     = document.querySelector('.cat-sheet');
    const saveBtn   = document.getElementById('catSaveBtn');
    const saveCount = document.getElementById('catSaveCount');
    const resetAll  = document.getElementById('catResetAllBtn');
    const statusEl  = document.getElementById('catDirtyStatus');
    const banner    = document.getElementById('catBanner');
    const search    = document.getElementById('catSearch');
    const filter    = document.getElementById('catFilter');
    const countEl   = document.getElementById('catVisibleCount');
    const acceptAll = document.getElementById('catAcceptAllBtn');
    const rows      = Array.from(document.querySelectorAll('#catRows tr'));

    // ─── Dirty tracking ────────────────────────────────────────────────────
    // Row is dirty when its current SELECT value differs from data-original.
    // Blank original + a picked value = dirty. Non-blank + same pick = not dirty.
    function currentCat(tr) {
        return tr.querySelector('select[data-field="category"]').value || '';
    }
    function isRowDirty(tr) {
        const orig = tr.dataset.original || '';
        const curr = currentCat(tr);
        return orig.trim() !== curr.trim();
    }
    function refreshDirty() {
        let dirtyCount = 0;
        rows.forEach(tr => {
            const dirty = isRowDirty(tr);
            tr.classList.toggle('dirty', dirty);
            tr.querySelector('.dirty-indicator').textContent = dirty ? '●' : '○';
            tr.querySelector('.dirty-indicator').style.color = dirty ? '#eab308' : '#cbd5e1';
            if (dirty) dirtyCount++;
        });
        saveBtn.disabled = dirtyCount === 0;
        resetAll.disabled = dirtyCount === 0;
        if (dirtyCount === 0) {
            statusEl.textContent = 'No changes';
            statusEl.className = 'text-xs text-gray-500';
            saveCount.textContent = '';
        } else {
            statusEl.textContent = dirtyCount + ' to save';
            statusEl.className = 'text-xs font-semibold text-amber-700';
            saveCount.textContent = '(' + dirtyCount + ')';
        }
    }

    // ─── Listeners ─────────────────────────────────────────────────────────
    sheet.addEventListener('change', e => {
        if (e.target.tagName === 'SELECT') refreshDirty();
    });

    // Accept-suggestion button per row
    sheet.addEventListener('click', e => {
        if (!e.target.classList.contains('accept-btn')) return;
        const suggested = e.target.dataset.suggested;
        if (!suggested) return;
        const tr  = e.target.closest('tr');
        const sel = tr.querySelector('select[data-field="category"]');
        sel.value = suggested;
        refreshDirty();
    });

    // Accept all visible suggestions
    acceptAll.addEventListener('click', () => {
        let n = 0;
        rows.forEach(tr => {
            if (tr.style.display === 'none') return;
            const btn = tr.querySelector('.accept-btn');
            if (!btn) return;
            const sel = tr.querySelector('select[data-field="category"]');
            const suggested = btn.dataset.suggested;
            if (suggested && sel.value !== suggested) {
                sel.value = suggested;
                n++;
            }
        });
        refreshDirty();
        if (n > 0) showBanner('Applied ' + n + ' suggestion(s). Review and save.', 'info');
        else showBanner('No visible suggestions to apply.', 'info');
    });

    // ─── Filters ───────────────────────────────────────────────────────────
    function applyFilters() {
        const q = (search.value || '').toLowerCase().trim();
        const f = filter.value;
        let visible = 0;
        rows.forEach(tr => {
            const name    = tr.querySelector('.name-cell').textContent.toLowerCase();
            const code    = tr.cells[1].textContent.toLowerCase();
            const hay     = name + ' ' + code;
            const state   = tr.dataset.categoryState;
            let show = true;
            if (q && !hay.includes(q)) show = false;
            if (f === 'legacy' && state === 'canon') show = false;
            if (f === 'uncategorized' && state !== 'uncategorized') show = false;
            if (f === 'legacy-only' && state !== 'legacy') show = false;
            if (f === 'approved' && state !== 'canon') show = false;
            tr.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        countEl.textContent = visible + ' of ' + rows.length + ' drugs shown';
    }
    [search, filter].forEach(el => el.addEventListener('input', applyFilters));
    applyFilters();

    // One-click "show me only drugs with this legacy category"
    window.filterByLegacy = function(legacyName) {
        search.value = '';
        filter.value = '';
        let visible = 0;
        rows.forEach(tr => {
            const show = tr.dataset.legacyName === legacyName;
            tr.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        countEl.textContent = visible + ' of ' + rows.length + ' drugs shown (filter: legacy "' + legacyName + '")';
    };

    // ─── Reset ─────────────────────────────────────────────────────────────
    resetAll.addEventListener('click', () => {
        if (!confirm('Discard all unsaved category changes?')) return;
        rows.forEach(tr => {
            tr.querySelector('select[data-field="category"]').value = tr.dataset.original || '';
        });
        rows.forEach(tr => tr.classList.remove('has-error'));
        refreshDirty();
    });

    // ─── Save ──────────────────────────────────────────────────────────────
    function showBanner(msg, kind) {
        banner.className = 'px-4 py-3 text-sm font-medium border-b ' +
            (kind === 'success' ? 'bg-green-50 text-green-800 border-green-200' :
             kind === 'error'   ? 'bg-red-50 text-red-800 border-red-200' :
                                  'bg-blue-50 text-blue-800 border-blue-200');
        banner.textContent = msg;
        banner.classList.remove('hidden');
        if (kind === 'success' || kind === 'info') setTimeout(() => banner.classList.add('hidden'), 4000);
    }
    saveBtn.addEventListener('click', async () => {
        const dirty = rows.filter(isRowDirty);
        if (!dirty.length) return;
        // Validation: cannot save blank categories
        const blank = dirty.filter(tr => !currentCat(tr));
        if (blank.length) {
            showBanner('Some rows have no category selected. Either pick one or discard those row changes.', 'error');
            blank.forEach(tr => tr.classList.add('has-error'));
            return;
        }

        const payload = dirty.map(tr => ({ id: Number(tr.dataset.id), category: currentCat(tr) }));
        saveBtn.disabled = true;
        const oldLabel = saveBtn.innerHTML;
        saveBtn.innerHTML = '⏳ Saving…';
        rows.forEach(tr => tr.classList.remove('has-error'));

        try {
            const resp = await fetch('{{ route('pharmacy.drugs.categorize.save') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ rows: payload })
            });
            const data = await resp.json();
            if (data.ok) {
                dirty.forEach(tr => {
                    tr.dataset.original = currentCat(tr);
                    tr.dataset.categoryState = 'canon';
                });
                showBanner('✓ ' + data.message + ' · reload the page to see updated counts.', 'success');
                refreshDirty();
            } else {
                (data.errors || []).forEach(err => {
                    const tr = sheet.querySelector(`tr[data-id="${err.id}"]`);
                    if (tr) {
                        tr.classList.add('has-error');
                        tr.title = err.message;
                    }
                });
                showBanner('✗ ' + (data.message || 'Save failed.'), 'error');
            }
        } catch (err) {
            showBanner('✗ Network error: ' + err.message, 'error');
        } finally {
            saveBtn.innerHTML = oldLabel;
            refreshDirty();
        }
    });

    // Ctrl/Cmd+S
    document.addEventListener('keydown', e => {
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            if (!saveBtn.disabled) saveBtn.click();
        }
    });

    // Warn before leaving with unsaved
    window.addEventListener('beforeunload', e => {
        if (rows.some(isRowDirty)) { e.preventDefault(); e.returnValue = ''; }
    });

    refreshDirty();
})();
</script>

@endsection