@extends('layouts.admin')

@section('page_title', 'Pharmacist Dashboard')

@section('content')
    <div
        id="pharmacist-dashboard-root"
        class="space-y-6"
        data-queue-url="{{ $prescriptionsQueueUrl ?? route('hospital.pharmacist.prescriptions.queue') }}"
        data-csrf="{{ csrf_token() }}"
    >
    <div class="grid gap-4 md:grid-cols-3">
        <div class="rounded-2xl bg-white p-5 shadow-lg"><p class="text-sm text-slate-500">Pending Prescriptions</p><p id="stat-pending" class="text-3xl font-bold text-amber-700">{{ $stats['pending_prescriptions'] }}</p></div>
        <div class="rounded-2xl bg-white p-5 shadow-lg"><p class="text-sm text-slate-500">Dispensed Today</p><p id="stat-dispensed" class="text-3xl font-bold text-emerald-700">{{ $stats['dispensed_today'] }}</p></div>
        <div class="rounded-2xl bg-white p-5 shadow-lg"><p class="text-sm text-slate-500">Medicines in Inventory</p><p class="text-3xl font-bold text-indigo-700">{{ $stats['medicines'] }}</p></div>
    </div>

    <div class="mt-4 rounded-xl border border-amber-100 bg-amber-50/70 p-4 text-sm text-amber-950">
        <p class="font-semibold">Pharmacy rules</p>
        <p class="mt-1 text-xs">Prescriptions arrive as soon as the doctor submits them (broadcast + this list auto-refreshes). Open a prescription to review the full order (read-only). Use <strong>Prepare &amp; dispense</strong> only when medication is ready—clinical fields cannot be edited here.</p>
    </div>

    <div class="mt-6 rounded-2xl bg-white p-6 shadow-lg">
        <h3 class="font-semibold text-slate-900">Prescription queue</h3>
        <p class="mt-1 text-xs text-slate-500">Sorted by time sent to pharmacy. Updates every 12 seconds and when pharmacy/workspace events fire.</p>
        <div id="pharmacist-rx-list" class="mt-4 space-y-2">
            @foreach($prescriptions as $prescription)
                <div class="flex flex-wrap items-center justify-between gap-2 rounded-xl bg-slate-50 px-3 py-3 text-sm">
                    <div>
                        <p class="font-medium text-slate-900">#{{ $prescription->id }} · {{ $prescription->patient?->name ?? 'Patient #'.$prescription->patient_id }}</p>
                        <p class="text-xs text-slate-500">
                            {{ $prescription->status }}
                            @if($prescription->sent_to_pharmacy_at)
                                · sent {{ $prescription->sent_to_pharmacy_at->format('M j, H:i') }}
                            @endif
                            · {{ $prescription->items->count() }} line(s)
                        </p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('hospital.pharmacist.prescriptions.show', $prescription) }}" class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-800 shadow-sm hover:border-teal-200">View</a>
                        @if($prescription->status !== 'dispensed')
                            <form method="POST" action="{{ route('hospital.prescriptions.dispense', $prescription) }}">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="rounded-lg bg-emerald-600 px-3 py-2 text-xs font-semibold text-white" onclick="return confirm('Mark as dispensed?');">Dispense</button>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    </div>

    <script>
        (function () {
            const root = document.getElementById('pharmacist-dashboard-root');
            if (!root) return;
            const url = root.getAttribute('data-queue-url');
            const token = root.getAttribute('data-csrf');
            const listEl = document.getElementById('pharmacist-rx-list');
            const pendingEl = document.getElementById('stat-pending');
            const dispensedEl = document.getElementById('stat-dispensed');
            if (!url || !listEl) return;

            function escapeHtml(s) {
                return String(s).replace(/[&<>"']/g, function (c) {
                    return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
                });
            }

            function renderRow(p) {
                const disp = p.status === 'dispensed'
                    ? ''
                    : '<form method="POST" action="' + escapeHtml(p.dispense_url) + '">' +
                      '<input type="hidden" name="_token" value="' + escapeHtml(token) + '">' +
                      '<input type="hidden" name="_method" value="PATCH">' +
                      '<button type="submit" class="rounded-lg bg-emerald-600 px-3 py-2 text-xs font-semibold text-white" onclick="return confirm(\'Mark as dispensed?\');">Dispense</button>' +
                      '</form>';
                const sent = p.sent_to_pharmacy_at
                    ? ' · sent ' + escapeHtml(p.sent_to_pharmacy_at.slice(0, 16).replace('T', ' '))
                    : '';
                return (
                    '<div class="flex flex-wrap items-center justify-between gap-2 rounded-xl bg-slate-50 px-3 py-3 text-sm">' +
                    '<div><p class="font-medium text-slate-900">#' + escapeHtml(p.id) + ' · ' + escapeHtml(p.patient_name) + '</p>' +
                    '<p class="text-xs text-slate-500">' + escapeHtml(p.status) + sent + ' · ' + escapeHtml(String(p.line_count)) + ' line(s)</p></div>' +
                    '<div class="flex flex-wrap gap-2">' +
                    '<a href="' + escapeHtml(p.show_url) + '" class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-800 shadow-sm hover:border-teal-200">View</a>' +
                    disp +
                    '</div></div>'
                );
            }

            async function refreshQueue() {
                try {
                    const r = await fetch(url, { headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' });
                    if (!r.ok) return;
                    const j = await r.json();
                    if (pendingEl && j.stats) pendingEl.textContent = j.stats.pending_prescriptions;
                    if (dispensedEl && j.stats) dispensedEl.textContent = j.stats.dispensed_today;
                    if (Array.isArray(j.prescriptions)) {
                        listEl.innerHTML = j.prescriptions.length ? j.prescriptions.map(renderRow).join('') : '<p class="text-sm text-slate-500">No prescriptions in queue.</p>';
                    }
                } catch (e) { /* ignore */ }
            }

            window.addEventListener('hospital:prescription-queue-changed', refreshQueue);
            setInterval(refreshQueue, 12000);
        })();
    </script>
@endsection