@extends('layouts.admin')

@section('title', 'Care Team')

@php
    $roleLabels = [
        'clinic_admin' => 'Clinic Admin',
        'pcp' => 'PCP',
        'bhcm' => 'BHCM',
        'psychiatrist' => 'Psychiatrist',
        'billing_staff' => 'Billing Staff',
        'practice_manager' => 'Practice Manager',
        'clinical_support' => 'Clinical Support',
        'front_desk' => 'Front Desk',
    ];
    $canSendTestPush = request()->user()?->isClinicAdmin() || request()->user()?->isSuperAdmin();
@endphp

@section('content')
<div class="max-w-7xl space-y-6">
    <div class="modern-hero-panel flex flex-wrap items-start justify-between gap-4 p-5 sm:p-6">
        <div>
            <p class="text-sm font-semibold text-white/70">Practice access</p>
            <h2 class="mt-2 text-3xl font-bold text-white">Care team directory</h2>
            <p class="mt-2 max-w-2xl text-sm text-white/70 leading-relaxed">Invite clinical staff, monitor access status, and keep BHCM capacity aligned before assigning patients.</p>
        </div>
        <a href="{{ route('admin.onboarding.index') }}" class="rounded-lg border border-white/20 bg-white/10 px-4 py-2 text-sm font-semibold text-white/80 backdrop-blur hover:bg-white/20">Patient onboarding</a>
    </div>

    @if ($errors->any())
        <div class="rounded-lg border border-status-critical/30 bg-status-critical/10 px-4 py-3 text-sm text-status-critical">
            {{ $errors->first() }}
        </div>
    @endif

    @if (session('setup_link'))
        <div class="rounded-lg border border-brand-orange/30 bg-brand-orange-muted px-4 py-3">
            <p class="text-sm font-semibold text-accent">One-time setup link</p>
            <p class="mt-1 text-xs text-ink-secondary">Email delivery is queued through the configured mailer. For local testing, use this link now; it will not be shown again.</p>
            <input readonly value="{{ session('setup_link') }}" class="mt-3 input-field font-mono text-xs">
        </div>
    @endif

    <div class="grid gap-4 md:grid-cols-4">
        <div class="card p-4">
            <p class="text-xs font-medium text-ink-muted">Active accounts</p>
            <p class="mt-1 text-3xl font-bold text-accent">{{ $metrics['active_staff'] }}</p>
            <p class="mt-1 text-xs text-ink-muted">Accepted staff logins</p>
        </div>
        <div class="card p-4">
            <p class="text-xs font-medium text-ink-muted">BHCM accounts</p>
            <p class="mt-1 text-3xl font-bold text-accent">{{ $metrics['bhcms'] }}</p>
            <p class="mt-1 text-xs text-ink-muted">Available for assignment</p>
        </div>
        <div class="card p-4">
            <p class="text-xs font-medium text-ink-muted">Pending invites</p>
            <p class="mt-1 text-3xl font-bold text-brand-orange">{{ $metrics['pending_invites'] }}</p>
            <p class="mt-1 text-xs text-ink-muted">Waiting for setup</p>
        </div>
        <div class="card p-4">
            <p class="text-xs font-medium text-ink-muted">Suspended accounts</p>
            <p class="mt-1 text-3xl font-bold text-status-critical">{{ $metrics['suspended_staff'] }}</p>
            <p class="mt-1 text-xs text-ink-muted">Cannot access portal</p>
        </div>
    </div>

    <section class="grid gap-6 lg:grid-cols-[0.78fr_1.22fr]">
        <div class="card p-5">
            <h3 class="text-sm font-semibold text-accent">Invite staff member</h3>
            <p class="mt-1 text-xs text-ink-muted">The invited person creates their own password from a secure email link.</p>

            <form method="POST" action="{{ route('admin.staff.invite') }}" class="mt-5 space-y-4">
                @csrf
                <div>
                    <label for="email" class="block text-sm font-medium text-accent mb-1.5">Work email</label>
                    <input id="email" name="email" type="email" value="{{ old('email') }}" required class="input-field" autocomplete="email">
                </div>

                <div>
                    <label for="role" class="block text-sm font-medium text-accent mb-1.5">Role</label>
                    <select id="role" name="role" required class="input-field">
                        <option value="practice_manager" @selected(old('role', 'practice_manager') === 'practice_manager')>Practice Manager</option>
                        <option value="billing_staff" @selected(old('role') === 'billing_staff')>Billing Staff</option>
                        <option value="clinical_support" @selected(old('role') === 'clinical_support')>Clinical Support</option>
                        <option value="front_desk" @selected(old('role') === 'front_desk')>Front Desk</option>
                        <option value="bhcm" @selected(old('role') === 'bhcm')>BHCM</option>
                        <option value="pcp" @selected(old('role') === 'pcp')>PCP</option>
                        <option value="psychiatrist" @selected(old('role') === 'psychiatrist')>Psychiatrist</option>
                        <option value="clinic_admin" @selected(old('role') === 'clinic_admin')>Clinic Admin</option>
                    </select>
                </div>

                <div class="rounded-lg border border-border-subtle bg-surface-2 px-3 py-3 text-xs text-ink-secondary leading-relaxed">
                    BHCM accounts use the default capacity of {{ $defaultBhcmCaseload }} patients until a clinic admin updates the value after activation.
                </div>

                <button type="submit" class="btn-primary w-full">Send secure invite</button>
            </form>
        </div>

        <div class="card overflow-hidden">
            <div class="flex items-center justify-between gap-3 border-b border-border-subtle px-4 py-3">
                <div>
                    <h3 class="text-sm font-semibold text-accent">Care team members</h3>
                    <p class="text-xs text-ink-muted">Accepted staff accounts. Pending invitations appear below until setup is complete.</p>
                </div>
            </div>

            <div class="divide-y divide-border-subtle">
                @forelse ($staff as $member)
                    @php
                        $panelText = null;

                        if ($member->isPcp()) {
                            $panelText = $member->pcp_patient_count.' PCP patients';
                        } elseif ($member->isBhcm()) {
                            $panelText = $member->bhcm_patient_count.' BHCM patients';
                        }
                    @endphp

                    <div x-data="{ open: false }" class="px-4 py-4">
                        <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
                            <div class="min-w-0">
                                <p class="truncate text-sm font-semibold text-accent">{{ $member->name }}</p>
                                <p class="truncate text-xs text-ink-muted">{{ $member->email }}</p>
                            </div>

                            <div class="flex flex-wrap items-center gap-2 text-xs">
                                <span class="status-pill-neutral">{{ $roleLabels[$member->role] ?? $member->role }}</span>

                                @if ($member->status === 'active')
                                    <span class="status-pill-good">Active</span>
                                @else
                                    <span class="status-pill-critical">Suspended</span>
                                @endif

                                @if ($panelText)
                                    <span class="status-pill-neutral">{{ $panelText }}</span>
                                @endif

                                @if ($member->isBhcm())
                                    <span class="status-pill-neutral">{{ $member->max_caseload ?? $defaultBhcmCaseload }} capacity</span>
                                @endif

                                @if ((int) $member->active_provider_device_count > 0)
                                    <span class="status-pill-good">Push ready</span>
                                @else
                                    <span class="status-pill-warning">No push token</span>
                                @endif
                            </div>

                            <div class="flex shrink-0 flex-col gap-2 sm:flex-row">
                                @if ($canSendTestPush)
                                    <form method="POST" action="{{ route('admin.staff.test-notification', $member) }}">
                                        @csrf
                                        <button
                                            type="submit"
                                            class="btn-secondary w-full sm:w-auto"
                                            @disabled($member->status !== 'active' || (int) $member->active_provider_device_count === 0)
                                        >
                                            Test push
                                        </button>
                                    </form>
                                @endif

                                <button type="button" class="btn-secondary w-full xl:w-auto" x-on:click="open = true; $nextTick(() => $refs.nameInput.focus())">
                                    Update
                                </button>
                            </div>
                        </div>

                        <div x-show="open" x-cloak x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 py-6" role="dialog" aria-modal="true" aria-labelledby="staff-modal-title-{{ $member->id }}" x-on:keydown.escape.window="open = false">
                            <div class="absolute inset-0" x-on:click="open = false"></div>
                            <div class="relative w-full max-w-lg rounded-2xl border border-border-subtle bg-white shadow-2xl">
                                <form method="POST" action="{{ route('admin.staff.update', $member) }}">
                                    @csrf
                                    @method('PATCH')

                                    <div class="border-b border-border-subtle px-5 py-4">
                                        <h4 id="staff-modal-title-{{ $member->id }}" class="text-base font-semibold text-accent">Update staff member</h4>
                                        <p class="mt-1 text-xs text-ink-muted">{{ $member->email }}</p>
                                    </div>

                                    <div class="space-y-4 px-5 py-5">
                                        <div>
                                            <label for="staff-name-{{ $member->id }}" class="mb-1.5 block text-sm font-medium text-accent">Full name</label>
                                            <input id="staff-name-{{ $member->id }}" x-ref="nameInput" name="name" value="{{ $member->name }}" required class="input-field">
                                        </div>

                                        <div class="grid gap-4 sm:grid-cols-2">
                                            <div>
                                                <p class="mb-1.5 text-sm font-medium text-accent">Role</p>
                                                <div class="rounded-lg border border-border-default bg-surface-2 px-3 py-2.5 text-sm font-semibold text-accent">
                                                    {{ $roleLabels[$member->role] ?? $member->role }}
                                                </div>
                                            </div>

                                            <div>
                                                <label for="staff-status-{{ $member->id }}" class="mb-1.5 block text-sm font-medium text-accent">Access status</label>
                                                <select id="staff-status-{{ $member->id }}" name="status" class="input-field">
                                                    <option value="active" @selected($member->status === 'active')>Active</option>
                                                    <option value="suspended" @selected($member->status === 'suspended')>Suspended</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="rounded-lg border border-border-subtle bg-surface-2 px-3 py-3">
                                            <p class="text-xs font-semibold uppercase tracking-wider text-accent">Current panel</p>
                                            <p class="mt-1 text-sm text-ink-secondary">{{ $panelText ?? 'Panel tracking does not apply to this role yet.' }}</p>
                                        </div>

                                        @if ($member->isBhcm())
                                            <div>
                                                <label for="staff-capacity-{{ $member->id }}" class="mb-1.5 block text-sm font-medium text-accent">BHCM patient capacity</label>
                                                <input id="staff-capacity-{{ $member->id }}" name="max_caseload" type="number" min="1" max="500" value="{{ $member->max_caseload ?? $defaultBhcmCaseload }}" class="input-field">
                                            </div>
                                        @endif
                                    </div>

                                    <div class="flex flex-col-reverse gap-3 border-t border-border-subtle px-5 py-4 sm:flex-row sm:justify-end">
                                        <button type="button" class="btn-secondary" x-on:click="open = false">Cancel</button>
                                        <button type="submit" class="btn-primary">Save changes</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="px-4 py-8 text-center text-sm text-ink-muted">No staff members have accepted an invitation for this practice yet.</p>
                @endforelse
            </div>
        </div>
    </section>

    <section class="card overflow-hidden">
        <div class="border-b border-border-subtle px-4 py-3">
            <h3 class="text-sm font-semibold text-accent">Invitation history</h3>
            <p class="mt-1 text-xs text-ink-muted">These are invite records, not active users. A pending invite moves into the care team after the recipient accepts the setup link.</p>
        </div>
        <div class="overflow-x-auto">
            <table class="table-shell min-w-[720px]">
                <thead>
                    <tr>
                        <th class="text-left px-4 py-3 font-medium">Email</th>
                        <th class="text-left px-4 py-3 font-medium">Role</th>
                        <th class="text-left px-4 py-3 font-medium">Status</th>
                        <th class="text-left px-4 py-3 font-medium">Invited by</th>
                        <th class="text-left px-4 py-3 font-medium">Expires</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($invitations as $invitation)
                        <tr>
                            <td class="px-4 py-3 font-medium text-accent">{{ $invitation->email }}</td>
                            <td class="px-4 py-3 text-ink-secondary">{{ $roleLabels[$invitation->role] ?? $invitation->role }}</td>
                            <td class="px-4 py-3">
                                @if ($invitation->isAccepted())
                                    <span class="status-pill-good">Accepted</span>
                                @elseif ($invitation->isExpired())
                                    <span class="status-pill-critical">Expired</span>
                                @else
                                    <span class="status-pill-warning">Pending</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-ink-secondary">{{ $invitation->invitedBy?->name ?? 'System' }}</td>
                            <td class="px-4 py-3 text-ink-secondary">{{ \App\Support\UsFormat::date($invitation->expires_at) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-sm text-ink-muted">No staff invitations yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection