@extends('layouts.front.app')

@section('title', 'Dashboard')

@section('content')
@php
$user = auth()->guard('user')->user();

$greeting = match (true) {
now()->hour < 12=> 'morning',
    now()->hour < 17=> 'afternoon',
        default => 'evening',
        };

        $quickActions = [
        ['label' => 'Edit profile', 'icon' => 'heroicon-o-user-circle', 'href' => route('user.profile')],
        ['label' => 'Update password', 'icon' => 'heroicon-o-key', 'click' => true],
        ['label' => 'Notifications', 'icon' => 'heroicon-o-bell', 'href' => 'javascript:void(0)'],
        ['label' => 'Help & support', 'icon' => 'heroicon-o-lifebuoy', 'href' => 'javascript:void(0)'],
        ];

        $recentActivity = [
        ['icon' => 'heroicon-o-check-circle', 'title' => 'Profile details updated', 'time' => '2 hours ago'],
        ['icon' => 'heroicon-o-shield-check', 'title' => 'Signed in from a new device', 'time' => 'Yesterday'],
        ['icon' => 'heroicon-o-document-text', 'title' => 'A new item was added to your list', 'time' => '3 days ago'],
        ['icon' => 'heroicon-o-bell', 'title' => 'Notification preferences changed', 'time' => '1 week ago'],
        ];

        $upcoming = [
        ['title' => 'Review pending submission', 'date' => 'Tomorrow', 'tone' => 'sky'],
        ['title' => 'Complete profile verification', 'date' => 'May 24, 2026', 'tone' => 'violet'],
        ['title' => 'Scheduled account check-in', 'date' => 'May 28, 2026', 'tone' => 'amber'],
        ];
        @endphp

        <x-layouts.user.dashboard>
            <div class="animate-fade-in">
                <header class="mb-5 sm:mb-6 lg:mb-8">
                    <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Overview</p>
                    <h1 class="mt-1 text-xl font-bold tracking-tight text-foreground sm:text-2xl lg:text-3xl">
                        Good {{ $greeting }}, {{ $user->first_name }}
                    </h1>
                    <p class="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">
                        Your personal hub for account activity, progress, and what needs attention next.
                    </p>
                </header>

                <div class="space-y-5 sm:space-y-6">
                    {{-- Summary --}}
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        <article class="rounded-2xl border border-border/80 bg-card p-5 shadow-card dark:shadow-soft">
                            <div class="flex items-center gap-3">
                                <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-950/40 dark:text-sky-400">
                                    <x-heroicon-o-arrow-path class="h-5 w-5" />
                                </span>
                                <div>
                                    <p class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">In progress</p>
                                    <p class="text-2xl font-bold tracking-tight text-foreground">4</p>
                                </div>
                            </div>
                            <p class="mt-3 text-sm text-muted-foreground">Items currently active on your account</p>
                        </article>

                        <article class="rounded-2xl border border-border/80 bg-card p-5 shadow-card dark:shadow-soft">
                            <div class="flex items-center gap-3">
                                <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-400">
                                    <x-heroicon-o-check-circle class="h-5 w-5" />
                                </span>
                                <div>
                                    <p class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">Completed</p>
                                    <p class="text-2xl font-bold tracking-tight text-foreground">18</p>
                                </div>
                            </div>
                            <p class="mt-3 text-sm text-muted-foreground">Finished since you joined</p>
                        </article>

                        <article class="rounded-2xl border border-border/80 bg-card p-5 shadow-card dark:shadow-soft">
                            <div class="flex items-center gap-3">
                                <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400">
                                    <x-heroicon-o-clock class="h-5 w-5" />
                                </span>
                                <div>
                                    <p class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">Pending</p>
                                    <p class="text-2xl font-bold tracking-tight text-foreground">2</p>
                                </div>
                            </div>
                            <p class="mt-3 text-sm text-muted-foreground">Waiting on your action or review</p>
                        </article>
                    </div>

                    <div class="grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-12">
                        {{-- Quick actions --}}
                        <section class="lg:col-span-5" aria-labelledby="quick-actions-heading">
                            <div class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:shadow-soft">
                                <div class="border-b border-border/80 px-5 py-4 sm:px-6">
                                    <h2 id="quick-actions-heading" class="text-base font-semibold text-foreground">Quick actions</h2>
                                    <p class="mt-0.5 text-sm text-muted-foreground">Shortcuts to common account tasks</p>
                                </div>
                                <ul class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-2" role="list">
                                    @foreach ($quickActions as $action)
                                    <li>
                                        @if (! empty($action['click']))
                                        <button
                                            type="button"
                                            @click="$dispatch('open-modal', 'change-password-modal')"
                                            class="group flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-medium text-foreground transition hover:bg-muted/60 dark:hover:bg-muted/30">
                                            <x-dynamic-component :component="$action['icon']" class="h-5 w-5 shrink-0 text-muted-foreground group-hover:text-brand dark:group-hover:text-primary-400" />
                                            {{ $action['label'] }}
                                        </button>
                                        @else
                                        <a
                                            href="{{ $action['href'] }}"
                                            class="group flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-medium text-foreground transition hover:bg-muted/60 dark:hover:bg-muted/30">
                                            <x-dynamic-component :component="$action['icon']" class="h-5 w-5 shrink-0 text-muted-foreground group-hover:text-brand dark:group-hover:text-primary-400" />
                                            {{ $action['label'] }}
                                        </a>
                                        @endif
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </section>

                        {{-- Account snapshot --}}
                        <section class="space-y-5 sm:space-y-6 lg:col-span-7" aria-labelledby="account-snapshot-heading">
                            <article class="overflow-hidden rounded-2xl border border-border/80 bg-card p-5 shadow-card dark:shadow-soft sm:p-6">
                                <h2 id="account-snapshot-heading" class="text-base font-semibold text-foreground">Account snapshot</h2>
                                <p class="mt-1 text-sm text-muted-foreground">A quick look at your profile and setup</p>

                                <div class="mt-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-5">
                                    <x-utility.avatar :src="$user->avatar" :name="$user->full_name" size="lg" />
                                    <div class="min-w-0 flex-1">
                                        <p class="font-medium text-foreground">{{ $user->full_name }}</p>
                                        <p class="truncate text-sm text-muted-foreground">{{ $user->email }}</p>
                                        @if ($user->phone)
                                        <p class="mt-0.5 truncate text-sm text-muted-foreground">{{ format_phone($user->phone) }}</p>
                                        @endif
                                        <p class="mt-2 text-xs text-muted-foreground">
                                            Member since {{ $user->created_at?->format('M Y') ?? '—' }}
                                        </p>
                                    </div>
                                    <a
                                        href="{{ route('user.profile') }}"
                                        class="inline-flex w-full shrink-0 items-center justify-center gap-2 rounded-xl border border-border/80 bg-muted/40 px-4 py-2.5 text-sm font-medium text-foreground transition hover:bg-muted/70 sm:w-auto dark:bg-muted/20 dark:hover:bg-muted/40">
                                        View profile
                                        <x-heroicon-o-arrow-right class="h-4 w-4" />
                                    </a>
                                </div>

                                <div class="mt-6">
                                    <div class="flex items-center justify-between gap-3">
                                        <span class="text-sm font-medium text-foreground">Profile completeness</span>
                                        <span class="text-sm font-semibold text-brand dark:text-primary-400">82%</span>
                                    </div>
                                    <div class="mt-3 h-2 overflow-hidden rounded-full bg-muted dark:bg-muted/50">
                                        <div class="h-full w-[82%] rounded-full bg-gradient-to-r from-brand via-primary-500 to-violet-500"></div>
                                    </div>
                                    <ul class="mt-4 flex flex-wrap gap-x-4 gap-y-2 text-sm text-muted-foreground" role="list">
                                        <li class="flex items-center gap-1.5">
                                            <x-heroicon-o-check-circle class="h-4 w-4 text-emerald-500" />
                                            Email verified
                                        </li>
                                        <li class="flex items-center gap-1.5">
                                            <x-heroicon-o-check-circle class="h-4 w-4 text-emerald-500" />
                                            Password set
                                        </li>
                                        <li class="flex items-center gap-1.5 text-foreground">
                                            <x-heroicon-o-minus-circle class="h-4 w-4 text-amber-500" />
                                            Add optional details
                                        </li>
                                    </ul>
                                </div>
                            </article>

                            <article class="overflow-hidden rounded-2xl border border-border/80 bg-gradient-to-br from-brand/5 via-card to-primary-50/20 p-5 shadow-card dark:from-brand/10 dark:via-card dark:to-primary-950/20 dark:shadow-soft sm:p-6">
                                <div class="flex items-start gap-3">
                                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand/10 text-brand dark:bg-primary-500/20 dark:text-primary-300">
                                        <x-heroicon-o-information-circle class="h-5 w-5" />
                                    </span>
                                    <div>
                                        <h2 class="text-base font-semibold text-foreground">Updates</h2>
                                        <p class="mt-1 text-sm leading-relaxed text-muted-foreground">
                                            Welcome to your dashboard. This space adapts to your product—whether learning, payments, matching, or anything else you build on top of it.
                                        </p>
                                    </div>
                                </div>
                            </article>
                        </section>

                        {{-- Recent activity --}}
                        <section class="lg:col-span-7" aria-labelledby="recent-activity-heading">
                            <div class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:shadow-soft">
                                <div class="border-b border-border/80 px-5 py-4 sm:px-6">
                                    <h2 id="recent-activity-heading" class="text-base font-semibold text-foreground">Recent activity</h2>
                                    <p class="mt-0.5 text-sm text-muted-foreground">Latest events on your account</p>
                                </div>
                                <ol class="divide-y divide-border/60 px-5 sm:px-6" role="list">
                                    @foreach ($recentActivity as $activity)
                                    <li class="flex gap-4 py-4">
                                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-border/80 bg-muted/50 text-muted-foreground dark:bg-muted/30">
                                            <x-dynamic-component :component="$activity['icon']" class="h-4 w-4" />
                                        </span>
                                        <div class="min-w-0 flex-1 pt-0.5">
                                            <p class="text-sm font-medium text-foreground">{{ $activity['title'] }}</p>
                                            <p class="mt-0.5 text-xs text-muted-foreground">{{ $activity['time'] }}</p>
                                        </div>
                                    </li>
                                    @endforeach
                                </ol>
                            </div>
                        </section>

                        {{-- Security + upcoming --}}
                        <section class="space-y-5 sm:space-y-6 lg:col-span-5">
                            <article class="overflow-hidden rounded-2xl border border-border/80 bg-card p-5 shadow-card dark:shadow-soft sm:p-6">
                                <div class="flex items-start gap-3">
                                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-400">
                                        <x-heroicon-o-shield-check class="h-5 w-5" />
                                    </span>
                                    <div>
                                        <h2 class="text-base font-semibold text-foreground">Security</h2>
                                        <p class="mt-1 text-sm text-muted-foreground">Account protection at a glance</p>
                                    </div>
                                </div>
                                <ul class="mt-5 space-y-3 text-sm" role="list">
                                    <li class="flex flex-col gap-1 rounded-xl bg-muted/40 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3 dark:bg-muted/25">
                                        <span class="text-muted-foreground">Two-factor authentication</span>
                                        <span class="shrink-0 font-medium text-amber-700 dark:text-amber-400">Not enabled</span>
                                    </li>
                                    <li class="flex flex-col gap-1 rounded-xl bg-muted/40 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3 dark:bg-muted/25">
                                        <span class="text-muted-foreground">Last sign-in</span>
                                        <span class="shrink-0 font-medium text-foreground">{{ $user->last_login_at?->diffForHumans() ?? 'Recently' }}</span>
                                    </li>
                                    <li class="flex flex-col gap-1 rounded-xl bg-muted/40 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3 dark:bg-muted/25">
                                        <span class="text-muted-foreground">Session</span>
                                        <span class="shrink-0 font-medium text-emerald-700 dark:text-emerald-400">Active</span>
                                    </li>
                                </ul>
                                <button
                                    type="button"
                                    @click="$dispatch('open-modal', 'change-password-modal')"
                                    class="mt-4 text-sm font-medium text-brand transition hover:text-brand/80 dark:text-primary-400">
                                    Manage credentials
                                </button>
                            </article>

                            <article class="overflow-hidden rounded-2xl border border-border/80 bg-card p-5 shadow-card dark:shadow-soft sm:p-6">
                                <div class="flex items-center justify-between gap-3">
                                    <h2 class="text-base font-semibold text-foreground">Coming up</h2>
                                    <span class="text-xs font-medium text-muted-foreground">{{ count($upcoming) }} items</span>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground">Reminders and items that need attention</p>
                                <ul class="mt-5 space-y-3" role="list">
                                    @foreach ($upcoming as $item)
                                    @php
                                    $toneRing = match ($item['tone']) {
                                    'sky' => 'border-sky-200/80 dark:border-sky-800/60',
                                    'violet' => 'border-violet-200/80 dark:border-violet-800/60',
                                    default => 'border-amber-200/80 dark:border-amber-800/60',
                                    };
                                    @endphp
                                    <li class="rounded-xl border {{ $toneRing }} bg-muted/20 px-4 py-3 dark:bg-muted/10">
                                        <p class="text-sm font-medium text-foreground">{{ $item['title'] }}</p>
                                        <p class="mt-1 text-xs text-muted-foreground">{{ $item['date'] }}</p>
                                    </li>
                                    @endforeach
                                </ul>
                            </article>
                        </section>
                    </div>
                </div>
            </div>
        </x-layouts.user.dashboard>
        @endsection