@extends('layouts.admin')

@section('page_kicker', 'Clinical')
@section('page_title', 'Doctor workspace')

@section('content')
    <p class="text-sm text-slate-600">
        Lists refresh automatically (no full page reload). Sorting is always <strong class="font-semibold text-slate-800">Emergency</strong> first, then <strong class="font-semibold text-violet-800">VIP</strong>, then routine. Only the assigned doctor completes the primary exam and sends prescriptions; progress notes follow RBAC on each visit.
    </p>

    <div
        class="admin-content-card mt-6"
        x-data="{
            visits: [],
            departmentVisits: [],
            labOrders: [],
            lastSync: '—',
            tier(r) {
                const approvedEr = r.triage_priority === 'emergency' && r.emergency_approval_status === 'approved';
                const bypass = r.emergency_financial_bypass === true || r.emergency_financial_bypass === 1;
                if (approvedEr || bypass) return 0;
                if (r.is_vip) return 1;
                return 2;
            },
            orderedVisits() {
                const rows = [...this.visits];
                rows.sort((a, b) => this.tier(a) - this.tier(b));
                return rows;
            },
            orderedDepartmentVisits() {
                const rows = [...this.departmentVisits];
                rows.sort((a, b) => this.tier(a) - this.tier(b));
                return rows;
            },
            async poll() {
                try {
                    const r = await fetch(@json(route('hospital.doctor.assigned-patients')), {
                        credentials: 'same-origin',
                        headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    });
                    const j = await r.json();
                    this.visits = j.visits || [];
                    this.departmentVisits = j.department_visits || [];
                    this.labOrders = j.lab_orders || [];
                    this.lastSync = new Date().toLocaleTimeString();
                } catch (e) {
                    this.lastSync = 'error';
                }
            },
        }"
        x-init="
            poll();
            setInterval(() => poll(), 4000);
            window.addEventListener('hospital:emergency-approved', () => poll());
            window.addEventListener('hospital:prescription-queue-changed', () => poll());
        "
    >
        <div id="doctor-workspace-emergency" class="scroll-mt-28 rounded-xl border border-red-500/40 bg-red-950/[0.12] p-4">
            <h3 class="text-sm font-bold uppercase tracking-wide text-red-800">Emergency patients</h3>
            <p class="mt-1 text-xs text-red-900/80">Pending activation, approval, and queue steps happen on <a href="{{ route('hospital.visits.index') }}" class="font-semibold text-red-950 underline decoration-red-800/60">OP visit flow</a>. Once triage tags <strong>emergency</strong>, an authorized clinician must approve before the patient can be queued; approval (who, when) is stored on the visit and in the EMR audit trail. <strong>Approved</strong> emergencies appear in <em>My patients</em> below with EMRG tier and float to the top.</p>
            <p class="mt-2 text-[10px] uppercase tracking-wide text-red-900/70">In treatment = waiting / in consultation / completed statuses in your assigned list.</p>
        </div>

        <div id="doctor-workspace-vip" class="scroll-mt-28 mt-4 rounded-xl border border-violet-400/50 bg-violet-950/[0.07] p-4">
            <h3 class="text-sm font-bold uppercase tracking-wide text-violet-900">VIP patients</h3>
            <p class="mt-1 text-xs text-violet-900/85">When <span class="font-mono">chart_restricted</span> is on, only the <strong>assigned</strong> doctor can open the full visit chart from this portal; department colleagues see department list rows only if policy allows (server-side). VIP rows use the VIP tier below emergency.</p>
        </div>

        <div id="doctor-workspace-labs" class="scroll-mt-28 mt-6 rounded-xl border border-slate-200 bg-slate-50/90 p-4">
            <h3 class="text-sm font-bold uppercase tracking-wide text-slate-800">Lab &amp; imaging requests</h3>
            <p class="mt-1 text-xs text-slate-600">Live from your assigned visits: orders you placed (or pipeline orders) with current fulfilment status. Open the visit for full context.</p>
            <div class="admin-table-wrap mt-3">
                <table class="admin-table min-w-full text-xs">
                    <thead>
                        <tr>
                            <th>MRN</th>
                            <th>Patient</th>
                            <th>Kind</th>
                            <th>Request</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-if="labOrders.length === 0">
                            <tr><td colspan="6" class="text-slate-500">No lab or imaging orders on your assigned visits yet.</td></tr>
                        </template>
                        <template x-for="row in labOrders" :key="'lab-' + row.id">
                            <tr>
                                <td class="font-mono" x-text="row.mrn || '—'"></td>
                                <td class="min-w-0 truncate max-w-[8rem]" x-text="row.patient_name || '—'"></td>
                                <td class="uppercase text-slate-600" x-text="row.kind"></td>
                                <td class="min-w-0" x-text="row.description"></td>
                                <td class="capitalize text-slate-700" x-text="row.status"></td>
                                <td><a :href="row.visit_url" class="admin-btn-secondary inline-flex py-1 text-[10px]">Visit</a></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="doctor-workspace-assigned" class="scroll-mt-28 mt-8 flex flex-wrap items-center justify-between gap-3">
            <h3 class="admin-card-title mb-0">My patients (assigned)</h3>
            <p class="text-xs text-slate-500">Last sync: <span x-text="lastSync"></span></p>
        </div>
        <div class="admin-table-wrap mt-4">
            <table class="admin-table min-w-full text-sm">
                <thead>
                    <tr>
                        <th>Tier</th>
                        <th>MRN</th>
                        <th>Patient</th>
                        <th>Status</th>
                        <th>Visit stage</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <template x-if="visits.length === 0">
                        <tr><td colspan="6" class="text-slate-500">No assigned visits. Patients appear after triage assigns you.</td></tr>
                    </template>
                    <template x-for="row in orderedVisits()" :key="row.id">
                        <tr
                            :class="{
                                'bg-red-50/90': row.triage_priority === 'emergency',
                                'bg-violet-50/80': row.is_vip && row.triage_priority !== 'emergency',
                            }"
                        >
                            <td class="whitespace-nowrap">
                                <span class="text-[10px] font-bold uppercase text-red-600" x-show="row.triage_priority === 'emergency'">EMRG</span>
                                <span class="text-[10px] font-bold uppercase text-violet-700" x-show="row.is_vip && row.triage_priority !== 'emergency'">VIP</span>
                                <span class="text-[10px] font-bold uppercase text-slate-400" x-show="row.triage_priority !== 'emergency' && !row.is_vip">—</span>
                            </td>
                            <td class="font-mono" x-text="row.mrn"></td>
                            <td class="min-w-0">
                                <span x-text="row.patient_name"></span>
                                <span class="ml-1 inline-flex items-center rounded border border-violet-300/80 bg-violet-100/80 px-1 py-px text-[9px] font-bold uppercase text-violet-900" x-show="row.is_vip && row.chart_restricted" title="Restricted chart">Privacy</span>
                            </td>
                            <td class="capitalize">
                                <span
                                    class="rounded-full px-2 py-0.5 text-xs font-semibold"
                                    :class="{
                                        'bg-amber-100 text-amber-900': row.doctor_status === 'waiting',
                                        'bg-sky-100 text-sky-900': row.doctor_status === 'in_consultation',
                                        'bg-emerald-100 text-emerald-900': row.doctor_status === 'completed',
                                    }"
                                    x-text="row.doctor_status.split('_').join(' ')"
                                ></span>
                            </td>
                            <td class="capitalize text-slate-600" x-text="row.stage.split('_').join(' ')"></td>
                            <td>
                                <a :href="'{{ url('/hospital/doctor/visits') }}/' + row.id" class="admin-btn-secondary inline-flex text-xs py-1.5">Open</a>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <div id="doctor-workspace-department" class="scroll-mt-28 mt-10 flex flex-wrap items-center justify-between gap-3">
            <h3 class="admin-card-title mb-0">Department patients (follow-up &amp; handoffs)</h3>
            <p class="text-xs text-slate-500">Same department · emergency and VIP floated to top</p>
        </div>
        <div class="admin-table-wrap mt-4">
            <table class="admin-table min-w-full text-sm">
                <thead>
                    <tr>
                        <th>Tier</th>
                        <th>MRN</th>
                        <th>Patient</th>
                        <th>Dept</th>
                        <th>Assigned</th>
                        <th>Stage</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <template x-if="departmentVisits.length === 0">
                        <tr><td colspan="7" class="text-slate-500">No department visits in this list (ensure you are rostered to a department with queued patients).</td></tr>
                    </template>
                    <template x-for="row in orderedDepartmentVisits()" :key="'d-' + row.id">
                        <tr
                            :class="{
                                'bg-teal-50/60': row.is_assigned_to_me,
                                'bg-red-50/90': row.triage_priority === 'emergency',
                                'bg-violet-50/80': row.is_vip && row.triage_priority !== 'emergency',
                            }"
                        >
                            <td class="whitespace-nowrap">
                                <span class="text-[10px] font-bold uppercase text-red-600" x-show="row.triage_priority === 'emergency'">EMRG</span>
                                <span class="text-[10px] font-bold uppercase text-violet-700" x-show="row.is_vip && row.triage_priority !== 'emergency'">VIP</span>
                                <span class="text-[10px] font-bold uppercase text-slate-400" x-show="row.triage_priority !== 'emergency' && !row.is_vip">—</span>
                            </td>
                            <td class="font-mono" x-text="row.mrn"></td>
                            <td x-text="row.patient_name"></td>
                            <td class="text-slate-600" x-text="row.department_name || '—'"></td>
                            <td class="text-slate-700" x-text="row.assigned_doctor_name || '—'"></td>
                            <td class="capitalize text-slate-600" x-text="row.stage.split('_').join(' ')"></td>
                            <td>
                                <a :href="'{{ url('/hospital/doctor/visits') }}/' + row.id" class="admin-btn-secondary inline-flex text-xs py-1.5">Open</a>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
@endsection