@extends('layouts.patient')

@section('title', 'Patient Dashboard')

@section('content')
@php
    $statusLabel = str_replace('_', ' ', $patientProfile?->co_cm_status ?? 'not enrolled');
    $latestAssessment = $latestAssessments->first();
    $consentLabel = match ($latestConsent?->decision) {
        App\Models\CoCmConsent::DECISION_SIGNED => 'Signed',
        App\Models\CoCmConsent::DECISION_REFUSED => 'Declined',
        default => 'Not completed',
    };
    $consentClass = match ($latestConsent?->decision) {
        App\Models\CoCmConsent::DECISION_SIGNED => 'status-pill-good',
        App\Models\CoCmConsent::DECISION_REFUSED => 'status-pill-critical',
        default => 'status-pill-warning',
    };
    $pendingAssessmentCount = $pendingAssessmentPacket?->items->count() ?? 0;
    $taskLabels = [
        App\Models\FollowUpTask::TYPE_REPEAT_ASSESSMENT_DUE => 'Repeat assessment due',
        App\Models\FollowUpTask::TYPE_PSYCHIATRIC_REVIEW_REQUEST => 'Care team review',
        App\Models\FollowUpTask::TYPE_WARM_HANDOFF_FOLLOW_UP => 'Warm handoff follow-up',
        'referral_scheduling' => 'Care coordinator follow-up',
        'decline_follow_up' => 'Follow-up check-in',
    ];
@endphp

<div class="mx-auto max-w-7xl space-y-6">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div class="min-w-0">
            <p class="text-sm font-semibold text-brand-orange">Patient Portal</p>
            <h2 class="mt-1 text-2xl font-bold tracking-tight text-accent">Welcome, {{ auth()->user()->name }}</h2>
            <p class="mt-2 max-w-3xl text-sm leading-relaxed text-ink-secondary">
                Your care team, care plan, screening history, messages, and secure video handoff access live here.
            </p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a href="#care-plan" class="glass-nav-chip">Care Plan</a>
            <a href="#assessments" class="glass-nav-chip">Assessments</a>
            <a href="#messages" class="glass-nav-chip">Messages</a>
        </div>
    </div>

    <div class="gradient-rule"></div>

    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <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">
            <div class="flex items-start justify-between gap-3 pl-2">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Program Status</p>
                    <p class="mt-2 text-lg font-bold capitalize text-accent">{{ $statusLabel }}</p>
                </div>
                <div class="icon-badge h-9 w-9 bg-accent-muted">
                    <svg class="h-4 w-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border border-status-good/30 bg-[linear-gradient(135deg,rgba(255,255,255,0.98),rgba(232,248,232,0.78))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.96),0_18px_42px_-28px_rgba(12,163,12,0.42)] before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-status-good">
            <div class="flex items-start justify-between gap-3 pl-2">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Consent</p>
                    <p class="mt-2"><span class="{{ $consentClass }}">{{ $consentLabel }}</span></p>
                    @if ($latestConsent?->signed_at)
                        <p class="mt-1 text-xs text-ink-muted">{{ $latestConsent->signed_at->format('M j, Y') }}</p>
                    @endif
                </div>
                <div class="icon-badge h-9 w-9 bg-status-good/10">
                    <svg class="h-4 w-4 text-status-good" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 0h10.5A2.25 2.25 0 0 1 19.5 12.75v6A2.25 2.25 0 0 1 17.25 21H6.75A2.25 2.25 0 0 1 4.5 18.75v-6A2.25 2.25 0 0 1 6.75 10.5Z" /></svg>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border border-brand-orange/35 bg-[linear-gradient(135deg,rgba(255,255,255,0.98),rgba(255,241,233,0.88))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.96),0_18px_42px_-28px_rgba(255,122,53,0.50)] before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-brand-orange">
            <div class="flex items-start justify-between gap-3 pl-2">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Latest Score</p>
                    @if ($latestAssessment)
                        <p class="mt-2 text-lg font-bold text-accent">Score {{ $latestAssessment->total_score }}</p>
                        <p class="mt-1 text-xs text-ink-muted">{{ $latestAssessment->assessmentTemplate?->name ?? 'Assessment' }}</p>
                    @else
                        <p class="mt-2 text-lg font-bold text-accent">No scores yet</p>
                    @endif
                </div>
                <div class="icon-badge h-9 w-9 bg-brand-orange-muted">
                    <svg class="h-4 w-4 text-brand-orange" 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 0 1 3 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 0 1-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 0 1-1.125-1.125V4.125Z" /></svg>
                </div>
            </div>
        </div>
        <div class="relative overflow-hidden rounded-lg border border-status-warning/35 bg-[linear-gradient(135deg,rgba(255,255,255,0.98),rgba(255,248,230,0.84))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.96),0_18px_42px_-28px_rgba(250,178,25,0.48)] before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-status-warning">
            <div class="flex items-start justify-between gap-3 pl-2">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Unread Messages</p>
                    <p class="mt-1 text-3xl font-bold tabular-nums text-status-warning">{{ $unreadMessageCount }}</p>
                </div>
                <div class="icon-badge h-9 w-9 bg-status-warning/10">
                    <svg class="h-4 w-4 text-status-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75 12 12.375 15.375 9.75M21.75 8.25v7.5A2.25 2.25 0 0 1 19.5 18h-15a2.25 2.25 0 0 1-2.25-2.25v-7.5A2.25 2.25 0 0 1 4.5 6h15a2.25 2.25 0 0 1 2.25 2.25Z" /></svg>
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <div id="care-plan" class="card overflow-hidden">
            <div class="flex items-center justify-between gap-3 border-b border-border-subtle px-5 py-4">
                <div>
                    <h3 class="text-sm font-semibold text-accent">Care Plan Goals</h3>
                    <p class="text-xs text-ink-muted">Goals shared by your care coordinator.</p>
                </div>
                <span class="status-pill-neutral">{{ $activeCareGoals->count() }} active</span>
            </div>

            <div class="overflow-x-auto">
                <table class="table-shell min-w-[720px]">
                    <thead>
                        <tr>
                            <th class="px-4 py-3 text-left font-medium">Goal</th>
                            <th class="px-4 py-3 text-left font-medium">Action Steps</th>
                            <th class="px-4 py-3 text-left font-medium">Target</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($activeCareGoals as $goal)
                            <tr>
                                <td class="px-4 py-3">
                                    <p class="font-semibold text-accent">{{ $goal->goal_statement }}</p>
                                </td>
                                <td class="px-4 py-3 text-ink-secondary">{{ $goal->action_steps ?: 'No action steps recorded yet.' }}</td>
                                <td class="px-4 py-3 text-ink-secondary">{{ $goal->target_date?->format('M j, Y') ?? 'Not set' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-ink-muted">No active care goals have been added yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <aside class="space-y-6">
            <div class="card p-5">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h3 class="text-sm font-semibold text-accent">Care Team</h3>
                        <p class="text-xs text-ink-muted">People coordinating your care.</p>
                    </div>
                    <div class="icon-badge h-9 w-9 bg-accent-muted">
                        <svg class="h-4 w-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772A5.971 5.971 0 0 0 6 18.719m6-7.469a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" /></svg>
                    </div>
                </div>

                <div class="mt-4 divide-y divide-border-subtle">
                    <div class="py-3 first:pt-0">
                        <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Primary Care Provider</p>
                        <p class="mt-1 text-sm font-semibold text-accent">{{ $patientProfile?->pcp?->name ?? 'Not assigned yet' }}</p>
                    </div>
                    <div class="py-3 last:pb-0">
                        <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Care Coordinator</p>
                        <p class="mt-1 text-sm font-semibold text-accent">{{ $patientProfile?->bhcm?->name ?? 'Not assigned yet' }}</p>
                    </div>
                </div>
            </div>

            <div id="secure-video" class="card p-5">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h3 class="text-sm font-semibold text-accent">Secure Video</h3>
                        <p class="text-xs text-ink-muted">Warm handoffs open only when your care team starts a call.</p>
                    </div>
                    <span class="status-pill-good">Ready</span>
                </div>
                <p class="mt-4 rounded-lg border border-status-good/25 bg-status-good/10 px-3 py-2 text-sm leading-relaxed text-status-good">
                    Incoming video calls appear in the top-right corner with a ring.
                </p>
            </div>
        </aside>
    </section>

    <section id="assessments" class="card overflow-hidden">
        <div class="flex flex-col gap-3 border-b border-border-subtle px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h3 class="text-sm font-semibold text-accent">Assessments</h3>
                <p class="text-xs text-ink-muted">Recent PHQ-9, GAD-7, and assigned screening history.</p>
            </div>
            <span class="{{ $pendingAssessmentCount > 0 ? 'status-pill-warning' : 'status-pill-neutral' }}">
                {{ $pendingAssessmentCount }} assigned
            </span>
        </div>

        @if ($pendingAssessmentPacket)
            <div class="border-b border-border-subtle bg-brand-orange-muted/70 px-5 py-3 text-sm text-accent">
                {{ $pendingAssessmentCount }} assessment{{ $pendingAssessmentCount === 1 ? '' : 's' }} assigned for kiosk or patient completion.
            </div>
        @endif

        <div class="overflow-x-auto">
            <table class="table-shell min-w-[720px]">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left font-medium">Assessment</th>
                        <th class="px-4 py-3 text-left font-medium">Score</th>
                        <th class="px-4 py-3 text-left font-medium">Completed</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($latestAssessments as $response)
                        <tr>
                            <td class="px-4 py-3">
                                <p class="font-semibold text-accent">{{ $response->assessmentTemplate?->name ?? 'Assessment' }}</p>
                            </td>
                            <td class="px-4 py-3"><span class="status-pill-neutral">Score {{ $response->total_score }}</span></td>
                            <td class="px-4 py-3 text-ink-secondary">{{ $response->created_at->format('M j, Y') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-ink-muted">No completed assessments yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[0.85fr_1.15fr]">
        <div class="card p-5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="text-sm font-semibold text-accent">Next Steps</h3>
                    <p class="text-xs text-ink-muted">Open follow-up items from your care team.</p>
                </div>
                <span class="status-pill-neutral">{{ $openFollowUps->count() }} open</span>
            </div>

            <div class="mt-4 divide-y divide-border-subtle">
                @forelse ($openFollowUps as $task)
                    <div class="py-3 first:pt-0 last:pb-0">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-accent">{{ $taskLabels[$task->type] ?? ucfirst(str_replace('_', ' ', $task->type)) }}</p>
                                @if ($task->assessmentTemplate)
                                    <p class="mt-1 text-sm text-ink-secondary">{{ $task->assessmentTemplate->name }}</p>
                                @endif
                            </div>
                            <span class="status-pill-warning shrink-0">Due {{ $task->due_at?->format('M j') ?? 'soon' }}</span>
                        </div>
                    </div>
                @empty
                    <p class="text-sm text-ink-muted">No open follow-up items.</p>
                @endforelse
            </div>
        </div>

        <div id="messages" class="card overflow-hidden">
            <div class="flex items-center justify-between gap-3 border-b border-border-subtle px-5 py-4">
                <div>
                    <h3 class="text-sm font-semibold text-accent">Recent Messages</h3>
                    <p class="text-xs text-ink-muted">Secure messages from your care team.</p>
                </div>
                <span class="status-pill-neutral">{{ $recentMessages->count() }} recent</span>
            </div>

            <div class="divide-y divide-border-subtle">
                @forelse ($recentMessages as $message)
                    <div class="px-5 py-4">
                        <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                            <div class="min-w-0">
                                <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">
                                    {{ $message->sender?->id === auth()->id() ? 'You' : ($message->sender?->name ?? 'Care team') }}
                                </p>
                                <p class="mt-1 line-clamp-2 text-sm font-medium text-accent">{{ $message->body }}</p>
                            </div>
                            <span class="shrink-0 text-xs text-ink-muted">{{ $message->created_at->format('M j, g:ia') }}</span>
                        </div>
                    </div>
                @empty
                    <p class="px-5 py-8 text-center text-sm text-ink-muted">No secure messages yet.</p>
                @endforelse
            </div>
        </div>
    </section>
</div>
@endsection