@extends('layouts.admin')

@section('title', 'Overview')

@section('content')
<div class="max-w-5xl">
    @if (! ($agoraConfigStatus['ready'] ?? false))
        <div class="mb-6 rounded-lg border border-status-warning/30 bg-status-warning/10 px-5 py-4 text-sm text-status-warning">
            <p class="font-semibold">Agora telehealth is not configured.</p>
            <p class="mt-1">Missing: {{ implode(', ', $agoraConfigStatus['missing_keys'] ?? []) }}. Live warm-handoff calls will not issue video tokens until this is fixed.</p>
        </div>
    @endif

    <div class="grid gap-4 sm:grid-cols-2">
        <div class="relative overflow-hidden rounded-lg border border-accent/20 bg-white p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.96),0_18px_42px_-28px_rgba(11,39,84,0.46)] before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-accent">
            <p class="pl-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Patients in care</p>
            <p class="mt-1 pl-2 text-3xl font-bold tabular-nums text-accent">{{ $patientCount }}</p>
        </div>
        <div @class([
            'relative overflow-hidden rounded-lg p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.96),0_18px_42px_-28px_rgba(11,39,84,0.46)] before:absolute before:inset-y-0 before:left-0 before:w-1',
            'border border-status-critical/35 bg-[linear-gradient(135deg,rgba(255,255,255,0.98),rgba(255,238,238,0.88))] before:bg-status-critical' => $activeAlerts > 0,
            'border border-status-good/30 bg-[linear-gradient(135deg,rgba(255,255,255,0.98),rgba(232,248,232,0.78))] before:bg-status-good' => $activeAlerts === 0,
        ])>
            <p class="pl-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Active safety alerts</p>
            <p @class([
                'mt-1 pl-2 text-3xl font-bold tabular-nums',
                'text-status-critical' => $activeAlerts > 0,
                'text-status-good' => $activeAlerts === 0,
            ])>{{ $activeAlerts }}</p>
        </div>
    </div>

    <div class="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ route('admin.patients.index') }}" class="card card-hover p-4 group">
            <div class="icon-badge bg-accent-muted mb-3">
                <svg class="w-4.5 h-4.5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.75a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
            </div>
            <p class="text-sm font-semibold text-accent">Patient Registry</p>
            <p class="text-xs text-ink-muted mt-0.5">Search, register, assign assessment</p>
        </a>
        <a href="{{ route('admin.billing.index') }}" class="card card-hover p-4 group">
            <div class="icon-badge bg-status-good/10 mb-3">
                <svg class="w-4.5 h-4.5 text-status-good" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
            </div>
            <p class="text-sm font-semibold text-accent">Billing Dashboard</p>
            <p class="text-xs text-ink-muted mt-0.5">Traffic-light minute tracking</p>
        </a>
        <a href="{{ route('admin.declines.index') }}" class="card card-hover p-4 group">
            <div class="icon-badge bg-status-warning/10 mb-3">
                <svg class="w-4.5 h-4.5 text-status-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
            </div>
            <p class="text-sm font-semibold text-accent">Decline Tracker</p>
            <p class="text-xs text-ink-muted mt-0.5">30-day soft follow-ups</p>
        </a>
        <a href="{{ route('admin.audit.index') }}" class="card card-hover p-4 group">
            <div class="icon-badge bg-brand-orange-muted mb-3">
                <svg class="w-4.5 h-4.5 text-brand-orange" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.75h-.152c-3.196 0-6.1-1.248-8.25-3.286z" /></svg>
            </div>
            <p class="text-sm font-semibold text-accent">Audit Trail</p>
            <p class="text-xs text-ink-muted mt-0.5">Read-only PHI access log</p>
        </a>
    </div>

    <div class="mt-8 grid gap-6 xl:grid-cols-[1.35fr_0.65fr]">
        <section class="card overflow-hidden">
            <div class="flex items-center justify-between px-5 py-4 border-b border-border-subtle">
                <div>
                    <h2 class="text-sm font-semibold text-accent">Registry snapshot</h2>
                    <p class="text-xs text-ink-muted">Recently updated patients.</p>
                </div>
                <a href="{{ route('admin.patients.index') }}" class="text-sm font-medium text-accent-hover hover:underline">Open registry</a>
            </div>
            <table class="table-shell">
                <thead>
                    <tr>
                        <th class="text-left px-4 py-3 font-medium">Patient</th>
                        <th class="text-left px-4 py-3 font-medium">PCP</th>
                        <th class="text-left px-4 py-3 font-medium">BHCM</th>
                        <th class="text-left px-4 py-3 font-medium">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($registryPatients as $patient)
                        <tr>
                            <td class="px-4 py-3">
                                <a href="{{ route('admin.patients.show', $patient) }}" class="font-semibold text-accent hover:underline">{{ $patient->user->name }}</a>
                                <p class="text-xs text-ink-muted">{{ $patient->date_of_birth?->format('M j, Y') ?? 'DOB missing' }}</p>
                            </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>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-ink-muted">No patients yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </section>

        <aside class="space-y-6">
            <div class="card p-5">
                <h2 class="text-sm font-semibold text-accent">Assessment-ready</h2>
                <div class="mt-3 space-y-2">
                    @forelse ($assessmentReady as $response)
                        <a href="{{ route('admin.patients.show', $response->patientProfile) }}" class="block rounded-lg border border-border-subtle bg-surface-2 px-3 py-2 text-sm hover:bg-accent-muted/50 transition-colors">
                            <p class="font-medium text-accent">{{ $response->patientProfile?->user?->name }}</p>
                            <p class="text-xs text-ink-muted">{{ $response->assessmentTemplate?->name ?? 'Assessment' }} assigned {{ $response->created_at->diffForHumans() }}</p>
                        </a>
                    @empty
                        <p class="text-sm text-ink-muted">No assigned assessments waiting.</p>
                    @endforelse
                </div>
            </div>

            <div
                class="card p-5"
                x-data="{ selectedAlert: null }"
                data-dashboard-alert-modal
            >
                <h2 class="text-sm font-semibold text-accent">Alerts and tasks</h2>
                <div class="mt-3 space-y-2">
                    @foreach ($alertRows as $alert)
                        <button
                            type="button"
                            @click="selectedAlert = @js([
                                'patient_name' => $alert->patientProfile?->user?->name ?? 'Patient',
                                'question_text' => $alert->question_text ?? 'Question not captured',
                                'answer_value' => $alert->answer_value ?? 'Answer not captured',
                                'triggered_at' => $alert->triggered_at?->format('M j, Y g:ia') ?? '—',
                                'triggered_relative' => $alert->triggered_at?->diffForHumans() ?? '',
                                'show_url' => route('admin.emergency-alerts.show', $alert),
                                'acknowledge_url' => route('admin.emergency-alerts.acknowledge', $alert),
                            ])"
                            class="block w-full rounded-lg border border-status-critical/25 bg-status-critical/10 px-3 py-2 text-left text-sm text-status-critical transition-colors hover:bg-status-critical/15"
                        >
                            <span class="font-semibold">Safety alert</span>
                            <span> · {{ $alert->patientProfile?->user?->name ?? 'Patient' }}</span>
                            <span class="mt-0.5 block text-xs text-status-critical/80">{{ $alert->triggered_at?->diffForHumans() }}</span>
                        </button>
                    @endforeach
                    @foreach ($tasks as $task)
                        <a href="{{ route('admin.patients.show', $task->patientProfile) }}" class="block rounded-lg border border-border-subtle bg-surface-2 px-3 py-2 text-sm">
                            <span class="font-medium text-accent">{{ str_replace('_', ' ', $task->type) }}</span>
                            <span class="block text-xs text-ink-muted">{{ $task->patientProfile?->user?->name }} · due {{ $task->due_at->format('M j') }}</span>
                        </a>
                    @endforeach
                    @if ($alertRows->isEmpty() && $tasks->isEmpty())
                        <p class="text-sm text-ink-muted">No active alerts or open tasks.</p>
                    @endif
                </div>

                <template x-teleport="body">
                    <div
                        x-show="selectedAlert !== null"
                        x-cloak
                        x-transition.opacity.duration.150ms
                        @keydown.escape.window="selectedAlert = null"
                        class="fixed inset-0 z-[100] flex items-center justify-center bg-accent/70 px-4 py-6 backdrop-blur-sm sm:px-6"
                        role="presentation"
                    >
                        <div
                            x-show="selectedAlert !== null"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 translate-y-3 scale-95"
                            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                            x-transition:leave-end="opacity-0 translate-y-2 scale-95"
                            @click.outside="selectedAlert = null"
                            class="w-full max-w-lg overflow-hidden rounded-lg border border-border-subtle bg-white shadow-[0_28px_80px_-28px_rgba(11,39,84,0.55)]"
                            role="dialog"
                            aria-modal="true"
                            aria-labelledby="dashboard-alert-modal-title"
                        >
                            <div class="border-b border-status-critical/20 bg-status-critical/5 px-5 py-4">
                                <div class="flex items-start justify-between gap-4">
                                    <div>
                                        <p class="text-xs font-bold uppercase tracking-wider text-status-critical">Emergency safety alert</p>
                                        <h3 id="dashboard-alert-modal-title" class="mt-1 text-lg font-semibold text-accent" x-text="selectedAlert?.patient_name ?? 'Patient'"></h3>
                                        <p class="mt-1 text-xs text-ink-muted" x-text="selectedAlert?.triggered_at"></p>
                                    </div>
                                    <button type="button" @click="selectedAlert = null" class="rounded-lg p-2 text-ink-muted transition-colors hover:bg-white hover:text-ink-primary" aria-label="Close alert detail">
                                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <div class="space-y-3 px-5 py-4">
                                <div class="rounded-lg border border-status-critical/25 bg-status-critical/10 px-4 py-3">
                                    <p class="text-xs font-semibold uppercase tracking-wide text-status-critical">Question</p>
                                    <p class="mt-1 text-sm font-medium leading-relaxed text-status-critical" x-text="selectedAlert?.question_text"></p>
                                </div>
                                <div class="rounded-lg border border-border-subtle bg-surface-2 px-4 py-3">
                                    <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Recorded answer</p>
                                    <p class="mt-1 text-sm font-semibold text-ink-primary" x-text="selectedAlert?.answer_value"></p>
                                </div>
                                <p class="text-xs text-ink-muted" x-show="selectedAlert?.triggered_relative" x-text="'Triggered ' + selectedAlert?.triggered_relative"></p>
                            </div>

                            <div class="flex flex-col-reverse gap-2 border-t border-border-subtle bg-surface-1 px-5 py-4 sm:flex-row sm:justify-end">
                                <a :href="selectedAlert?.show_url" class="btn-secondary text-center">Open full review</a>
                                <form method="POST" :action="selectedAlert?.acknowledge_url">
                                    @csrf
                                    <button type="submit" class="inline-flex min-h-10 w-full items-center justify-center rounded-lg bg-status-critical px-5 text-sm font-semibold text-white transition-all hover:opacity-90 active:scale-[0.98] sm:w-auto">
                                        Acknowledge alert
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <div class="card p-5">
                <h2 class="text-sm font-semibold text-accent">Recent activity</h2>
                <div class="mt-3 space-y-2">
                    @forelse ($recentHandoffs as $handoff)
                        <a href="{{ route('admin.patients.show', $handoff->patientProfile) }}" class="block rounded-lg border border-border-subtle bg-surface-2 px-3 py-2 text-sm">
                            <span class="font-medium text-accent">Warm handoff {{ $handoff->status }}</span>
                            <span class="block text-xs text-ink-muted">{{ $handoff->patientProfile?->user?->name }} · {{ $handoff->initiated_at?->diffForHumans() }}</span>
                        </a>
                    @empty
                        <p class="text-sm text-ink-muted">No recent handoffs.</p>
                    @endforelse
                </div>
            </div>
        </aside>
    </div>
</div>
@endsection