@extends('layouts.admin')

@section('title', 'Patients')

@section('content')
<div class="max-w-7xl space-y-6" data-patient-registration-root x-data="{ patientModalOpen: @js($errors->any()) }" x-on:keydown.escape.window="patientModalOpen = false">
    <section class="min-w-0">
        <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h2 class="text-lg font-bold text-accent">Patient registry</h2>
                <p class="text-sm text-ink-muted">Search by name, DOB, email, or exact MRN.</p>
            </div>

            @can('create', App\Models\PatientProfile::class)
                <button type="button" class="btn-primary self-start sm:self-auto" x-on:click="patientModalOpen = true">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    Register Patient
                </button>
            @endcan
        </div>

        <form method="GET" action="{{ route('admin.patients.index') }}" class="mb-4 flex gap-2">
            <input name="q" value="{{ $search }}" class="input-field" placeholder="Search name, DOB, email, or MRN">
            <button type="submit" class="btn-primary">Search</button>
        </form>

        <div class="card overflow-hidden">
            <table class="table-shell">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left font-medium">Patient</th>
                        <th class="px-4 py-3 text-left font-medium">DOB</th>
                        <th class="px-4 py-3 text-left font-medium">PCP</th>
                        <th class="px-4 py-3 text-left font-medium">BHCM</th>
                        <th class="px-4 py-3 text-left font-medium">Status</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($patients as $patient)
                        @php
                            $patientEmail = $patient->user->email ?? '';
                            $hasPatientEmail = $patientEmail !== '' && ! str_ends_with($patientEmail, '@no-email.meduvo.local');
                        @endphp
                        <tr>
                            <td class="px-4 py-3">
                                <p class="font-semibold text-accent">{{ $patient->user->name }}</p>
                                <p class="text-xs text-ink-muted">{{ $hasPatientEmail ? $patientEmail : 'Email not provided' }}</p>
                            </td>
                            <td class="px-4 py-3 text-ink-secondary">{{ $patient->date_of_birth?->format('M j, Y') ?? '—' }}</td>
                            <td class="px-4 py-3 text-ink-secondary">{{ $patient->pcp?->name ?? '—' }}</td>
                            <td class="px-4 py-3 text-ink-secondary">{{ $patient->bhcm?->name ?? '—' }}</td>
                            <td class="px-4 py-3">
                                <span class="status-pill-neutral capitalize">{{ str_replace('_', ' ', $patient->co_cm_status) }}</span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                @can('view', $patient)
                                    <a href="{{ route('admin.patients.show', $patient) }}" class="font-medium text-accent-hover hover:underline">Open</a>
                                @elsecan('kioskHandoff', $patient)
                                    <a href="{{ route('admin.kiosk.confirm', $patient) }}" class="font-medium text-accent-hover hover:underline">Launch kiosk</a>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-sm text-ink-muted">No patients found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">{{ $patients->links() }}</div>
    </section>

    @can('create', App\Models\PatientProfile::class)
        <template x-teleport="body">
        <div
            x-show="patientModalOpen"
            x-cloak
            x-transition.opacity
            class="fixed inset-0 z-[80] flex items-start justify-center overflow-y-auto bg-accent/35 px-2 pb-4 pt-2 backdrop-blur-sm sm:px-4 sm:pt-3"
            role="dialog"
            aria-modal="true"
            aria-labelledby="patient-registration-title"
        >
            <div class="absolute inset-0" x-on:click="patientModalOpen = false" aria-hidden="true"></div>

            <div
                x-show="patientModalOpen"
                x-transition
                class="relative flex max-h-[calc(100vh-1rem)] w-full max-w-6xl flex-col overflow-hidden rounded-lg border border-white/80 bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.96),0_28px_90px_-48px_rgba(11,39,84,0.85)] sm:max-h-[calc(100vh-1.5rem)]"
            >
                <div class="flex items-start justify-between gap-4 border-b border-border-subtle px-5 py-3">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Patient registration</p>
                        <h2 id="patient-registration-title" class="mt-1 text-lg font-bold text-accent">Register Patient</h2>
                        <p class="mt-1 text-sm leading-relaxed text-ink-secondary">Add the patient to your practice so they can begin screening.</p>
                    </div>
                    <button type="button" class="rounded-lg border border-border-subtle bg-white p-2 text-ink-muted transition-colors hover:bg-surface-2 hover:text-accent" x-on:click="patientModalOpen = false" aria-label="Close registration form">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="overflow-y-auto">
                    @if ($errors->any())
                        <div @class([
                            'mx-5 mt-5 rounded-lg border px-3 py-2 text-sm',
                            'border-status-warning/35 bg-status-warning/10 text-accent' => $errors->has('possible_duplicate'),
                            'border-status-critical/30 bg-status-critical/10 text-status-critical' => ! $errors->has('possible_duplicate'),
                        ])>
                            <p class="font-semibold">
                                {{ $errors->has('possible_duplicate') ? 'Possible existing patient found.' : 'Please fix the highlighted fields.' }}
                            </p>
                            <p class="mt-1 text-xs leading-relaxed {{ $errors->has('possible_duplicate') ? 'text-ink-secondary' : 'text-status-critical' }}">
                                {{ $errors->first() }}
                            </p>

                            @if ($duplicate = session('possible_duplicate_patient'))
                                <div class="mt-3 rounded-lg border border-status-warning/25 bg-white/75 p-3 text-xs text-ink-secondary">
                                    <p class="font-semibold text-accent">{{ $duplicate['name'] }}</p>
                                    <p class="mt-0.5">DOB {{ $duplicate['dob'] }} · {{ $duplicate['pcp'] }}</p>
                                    <div class="mt-3 flex flex-wrap gap-2">
                                        <a href="{{ $duplicate['url'] }}" class="btn-secondary px-3 py-1.5 text-xs">View Existing Patient</a>
                                        <button type="submit" form="patient-registration-form" name="duplicate_override" value="1" class="btn-secondary px-3 py-1.5 text-xs">
                                            Continue Anyway
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif

                    <form id="patient-registration-form" method="POST" action="{{ route('admin.patients.store') }}" class="space-y-4 p-4 sm:p-5" data-patient-registration-form data-success-refresh-delay="3000">
                        @csrf
                        <div>
                            <h3 class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Patient information</h3>
                            <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                <div>
                                    <label for="first_name" class="text-sm font-medium text-accent">First Name <span class="text-status-critical">*</span></label>
                                    <input id="first_name" name="first_name" value="{{ old('first_name') }}" required autocomplete="given-name" class="input-field mt-1.5" placeholder="Enter first name" aria-describedby="first_name_error">
                                    @error('first_name')<p id="first_name_error" class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                <div>
                                    <label for="middle_name" class="text-sm font-medium text-accent">Middle Name</label>
                                    <input id="middle_name" name="middle_name" value="{{ old('middle_name') }}" autocomplete="additional-name" class="input-field mt-1.5" placeholder="Optional">
                                    @error('middle_name')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                <div>
                                    <label for="last_name" class="text-sm font-medium text-accent">Last Name <span class="text-status-critical">*</span></label>
                                    <input id="last_name" name="last_name" value="{{ old('last_name') }}" required autocomplete="family-name" class="input-field mt-1.5" placeholder="Enter last name" aria-describedby="last_name_error">
                                    @error('last_name')<p id="last_name_error" class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                <div>
                                    <label for="date_of_birth" class="text-sm font-medium text-accent">Date of Birth <span class="text-status-critical">*</span></label>
                                    <input id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}" type="date" max="{{ now()->toDateString() }}" required autocomplete="bday" class="input-field mt-1.5" aria-describedby="date_of_birth_error">
                                    @error('date_of_birth')<p id="date_of_birth_error" class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                <div>
                                    <label for="medical_record_number" class="text-sm font-medium text-accent">MRN <span class="text-status-critical">*</span></label>
                                    <input id="medical_record_number" name="medical_record_number" value="{{ old('medical_record_number') }}" required class="input-field mt-1.5" placeholder="Enter medical record number" aria-describedby="medical_record_number_error">
                                    @error('medical_record_number')<p id="medical_record_number_error" class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                <div>
                                    <label for="sex" class="text-sm font-medium text-accent">Sex</label>
                                    <select id="sex" name="sex" class="input-field mt-1.5">
                                        <option value="">Not specified</option>
                                        @foreach (['female', 'male', 'other'] as $sex)
                                            <option value="{{ $sex }}" @selected(old('sex') === $sex)>{{ ucfirst($sex) }}</option>
                                        @endforeach
                                    </select>
                                    @error('sex')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                <div>
                                    <label for="phone" class="text-sm font-medium text-accent">Mobile Phone</label>
                                    <input id="phone" name="phone" value="{{ old('phone') }}" type="tel" autocomplete="tel" class="input-field mt-1.5" placeholder="Optional" data-us-phone>
                                    @error('phone')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                <div>
                                    <label for="email" class="text-sm font-medium text-accent">Email</label>
                                    <input id="email" name="email" value="{{ old('email') }}" type="email" autocomplete="email" class="input-field mt-1.5" placeholder="Optional">
                                    @error('email')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>

                        <div class="border-t border-border-subtle pt-5">
                            <h3 class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Care assignment</h3>
                            <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                <div>
                                    <label for="pcp_id" class="text-sm font-medium text-accent">Primary PCP <span class="text-status-critical">*</span></label>
                                    <select id="pcp_id" name="pcp_id" required class="input-field mt-1.5" aria-describedby="pcp_id_help pcp_id_error">
                                        <option value="">Select PCP</option>
                                        @foreach ($pcps as $pcp)
                                            <option value="{{ $pcp->id }}" @selected(old('pcp_id', auth()->user()?->isPcp() ? auth()->id() : null) == $pcp->id)>{{ $pcp->name }}</option>
                                        @endforeach
                                    </select>
                                    <p id="pcp_id_help" class="mt-1.5 text-xs leading-relaxed text-ink-muted">Reviews this patient's screening results.</p>
                                    @error('pcp_id')<p id="pcp_id_error" class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                </div>

                                @if ($practiceLocations->count() > 1)
                                    <div>
                                        <label for="practice_location_id" class="text-sm font-medium text-accent">Practice Location <span class="text-status-critical">*</span></label>
                                        <select id="practice_location_id" name="practice_location_id" required class="input-field mt-1.5">
                                            <option value="">Select location</option>
                                            @foreach ($practiceLocations as $location)
                                                <option value="{{ $location->id }}" @selected(old('practice_location_id') == $location->id)>{{ $location->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('practice_location_id')<p class="mt-1.5 text-xs font-medium text-status-critical">{{ $message }}</p>@enderror
                                    </div>
                                @elseif ($practiceLocations->count() === 1)
                                    @php $location = $practiceLocations->first(); @endphp
                                    <div>
                                        <input type="hidden" name="practice_location_id" value="{{ $location->id }}">
                                        <p class="text-sm font-medium text-accent">Practice Location</p>
                                        <div class="mt-1.5 rounded-lg border border-border-subtle bg-surface-2 px-3 py-2.5 text-sm text-ink-secondary">
                                            {{ $location->name }}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="flex flex-col-reverse gap-2 border-t border-border-subtle pt-5 sm:flex-row sm:justify-end">
                            <button type="button" class="btn-secondary" x-on:click="patientModalOpen = false">Cancel</button>
                            <button type="submit" class="btn-primary min-w-36" data-loading-text="Creating...">Create Patient</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </template>
    @endcan
</div>
@endsection