@php
    $stageIcons = [1=>'document', 2=>'journey', 3=>'plane', 4=>'person', 5=>'home', 6=>'book'];
    $stageLabels = [1=>'Prepare and apply', 2=>'Track application', 3=>'Prepare to move', 4=>'Register in Sweden', 5=>'Everyday essentials', 6=>'Learn Swedish & settle in'];
    $stageDescriptions = [
        1=>'Find your route and prepare with guidance from the relevant authority.',
        2=>'Record your own updates and check messages directly with the authority.',
        3=>'Make room for travel, housing and the practical details of your move.',
        4=>'Check population-registration requirements for your circumstances.',
        5=>'Find your way through ID cards, healthcare, social insurance and banking.',
        6=>'Connect with your kommun for SFI guidance and your next steps in Swedish.',
    ];
    $applicableTasks = $tasks->where('status', '!=', 'Not applicable');
    $toDoCount = $applicableTasks->whereIn('status', ['Not started', 'Interested'])->count();
    $inProgressCount = $applicableTasks->whereNotIn('status', ['Completed', 'Not started', 'Interested'])->count();
    $waitingTasks = $tasks->where('status', 'Waiting');
    $currentStage = (int) $user->stage;
    $stageSummaries = collect(config('swedenstart.stages'))->map(function ($label, $stage) use ($tasks) {
        $stageTasks = $tasks->where('stage', $stage);
        $applicable = $stageTasks->where('status', '!=', 'Not applicable');
        return ['tasks'=>$stageTasks, 'total'=>$applicable->count(), 'completed'=>$applicable->where('status', 'Completed')->count(), 'done'=>$applicable->isNotEmpty() && $applicable->every(fn ($task) => $task->status === 'Completed'), 'skipped'=>$stageTasks->isNotEmpty() && $applicable->isEmpty()];
    });
    $undoTask = session('dashboard_undo') ? $tasks->firstWhere('id', session('dashboard_undo.id')) : null;
@endphp
<div class="overview-page">
    @if($undoTask && $undoTask->previous_state && $undoTask->revision === session('dashboard_undo.revision'))
        <div class="overview-undo"><span><x-icon name="check"/>{{ $undoTask->title }}</span><form method="post" action="/dashboard/tasks/{{ $undoTask->id }}/undo">@csrf<input type="hidden" name="revision" value="{{ $undoTask->revision }}"><button class="text-button">Undo completion</button></form></div>
    @endif
    <section class="overview-welcome" aria-labelledby="overview-title">
        <img class="overview-welcome-image" src="/images/stockholm-harbor-1920.webp" srcset="/images/stockholm-harbor-640.webp 640w, /images/stockholm-harbor-1280.webp 1280w, /images/stockholm-harbor-1920.webp 1920w" sizes="(max-width: 1000px) 100vw, 80vw" width="1920" height="1280" alt="Stockholm’s Gamla stan waterfront and skyline in afternoon light" fetchpriority="high">
        <div class="overview-welcome-copy"><span class="eyebrow">WELCOME BACK, {{ $user->name }}</span><h1 id="overview-title">Your journey to Sweden continues.</h1><p>Find your next step.<br>Make a little progress, at your pace.</p><a class="button" href="/journey">View my journey <x-icon/></a></div>
        <div class="overview-photo-credit"><x-icon name="pin"/><span>Stockholm<a href="https://commons.wikimedia.org/wiki/File:Sweden,_Stockholm,_Gamla_Stan_(Old_Town),_Afternoon_View_With_the_Harbor_of_Skeppsbron_150628-85.jpg" target="_blank" rel="noopener noreferrer">Photo: Richard Maack <span class="sr-only">(opens source in a new tab)</span></a><a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">CC BY 4.0 · cropped <span class="sr-only">(opens license in a new tab)</span></a></span></div>
    </section>
    <div class="overview-grid">
        <section class="journey-explorer" data-journey-explorer aria-labelledby="journey-explorer-title">
            <div class="overview-section-heading"><div><h2 id="journey-explorer-title">Your journey</h2><p>From your first application to everyday life in Sweden.</p></div><a href="/journey">See all steps <x-icon/></a></div>
            <div class="journey-map" role="tablist" aria-label="Explore your journey stages">
                @foreach(config('swedenstart.stages') as $stage=>$label)
                    @php($summary = $stageSummaries[$stage])
                    <button type="button" id="journey-tab-{{ $stage }}" role="tab" aria-selected="{{ $stage === $currentStage ? 'true' : 'false' }}" aria-controls="journey-panel-{{ $stage }}" tabindex="0" data-journey-stage="{{ $stage }}" @class(['journey-stop', 'is-done'=>$summary['done'], 'is-current'=>$stage === $currentStage, 'is-skipped'=>$summary['skipped']])>
                        <span class="journey-stop-icon"><x-icon :name="$summary['done'] ? 'tick' : $stageIcons[$stage]"/></span><span class="journey-stop-label">{{ $stageLabels[$stage] }}</span><span class="journey-stop-state">{{ $summary['done'] ? 'Completed' : ($summary['skipped'] ? 'Not applicable' : ($stage === $currentStage ? 'Current stage' : ($stage === 6 ? ($summary['tasks']->first()?->status ?? 'Not started') : $summary['completed'].' / '.$summary['total'].' complete'))) }}</span>
                    </button>
                @endforeach
            </div>
            @foreach(config('swedenstart.stages') as $stage=>$label)
                @php($summary = $stageSummaries[$stage])
                <div class="journey-preview" id="journey-panel-{{ $stage }}" role="tabpanel" aria-labelledby="journey-tab-{{ $stage }}" tabindex="0" @if($stage !== $currentStage) hidden @endif>
                    <div class="journey-preview-heading"><span class="journey-preview-icon"><x-icon :name="$stageIcons[$stage]"/></span><div><span class="fine-print">{{ $stage === $currentStage ? 'Your current stage' : 'Explore stage '.$stage }}</span><h3>{{ $label }}</h3></div><a href="/journey#journey-stage-{{ $stage }}" aria-label="View {{ $label }} in my journey"><x-icon/></a></div>
                    <p>{{ $stageDescriptions[$stage] }}</p>
                    <details class="journey-preview-details"><summary>Explore {{ $summary['tasks']->count() }} {{ $summary['tasks']->count() === 1 ? 'task' : 'tasks' }} in this stage <x-icon name="chevron"/></summary><div class="journey-preview-tasks">
                        @forelse($summary['tasks'] as $task)
                            <a href="/{{ $task->is_sfi ? 'learn-swedish' : 'tasks' }}#task-{{ $task->id }}"><x-icon :name="$task->status === 'Completed' ? 'check' : 'document'"/><span>{{ $task->title }}</span><span @class(['status-badge', 'waiting'=>$task->status==='Waiting', 'action'=>$task->status==='Action needed'])>{{ $task->status }}</span><x-icon name="chevron"/></a>
                        @empty<p class="fine-print">No tasks in this stage yet.</p>@endforelse
                    </div></details>
                    <span class="journey-preview-note">Explore any stage. Your saved starting point stays the same.</span>
                </div>
            @endforeach
        </section>
        <div class="overview-lower">
            <section class="panel overview-progress" aria-labelledby="progress-title"><div class="overview-card-heading"><h2 id="progress-title">Progress overview</h2><span class="overview-card-icon"><x-icon name="chart"/></span></div>
                <div class="overview-progress-label"><span>{{ $progress['completed'] }} of {{ $progress['total'] }} applicable tasks completed</span><strong>{{ $progress['percent'] === null ? '—' : $progress['percent'].'%' }}</strong></div>
                @if($progress['percent'] !== null)<progress max="100" value="{{ $progress['percent'] }}" aria-label="Tasks completed"></progress>@else<p class="fine-print">No applicable tasks</p>@endif
                <div class="overview-stats"><div><span class="stat-icon complete"><x-icon name="tick"/></span><strong>{{ $progress['completed'] }}</strong><span>Completed</span></div><div><span class="stat-icon"><x-icon name="document"/></span><strong>{{ $inProgressCount }}</strong><span>In progress</span></div><div><span class="stat-icon todo"><x-icon name="clock"/></span><strong>{{ $toDoCount }}</strong><span>To do</span></div></div>
                <p class="overview-progress-note">Progress you record yourself. Not government processing progress.</p><a class="underlined" href="/checklist">Open document checklist <x-icon/></a>
            </section>
            <section class="panel overview-links" aria-labelledby="quick-links-title"><div class="overview-card-heading"><h2 id="quick-links-title">Quick links</h2><a href="/resources" aria-label="View all official resources"><x-icon/></a></div><div class="overview-authorities">
                @foreach(['migration'=>['Migrationsverket','Residence permits','document'],'population-registration'=>['Skatteverket','Population registration & ID cards','person'],'social-insurance'=>['Försäkringskassan','Social insurance','shield'],'healthcare'=>['1177','Healthcare guidance','heart']] as $key=>[$name,$description,$icon])
                    @if($resources->has($key))<a href="{{ $resources[$key]->url }}" target="_blank" rel="noopener noreferrer"><span class="authority-symbol {{ $key }}"><x-icon :name="$icon"/></span><span><strong>{{ $name }}</strong><span>{{ $description }}</span></span><x-icon name="external"/><span class="sr-only"> (opens official website in a new tab)</span></a>@endif
                @endforeach
            </div></section>
        </div>
        <section class="overview-waiting panel" aria-labelledby="waiting-title"><div class="overview-card-heading"><h2 id="waiting-title">While you’re waiting</h2><span class="waiting-count">{{ $waitingTasks->count() }} {{ $waitingTasks->count() === 1 ? 'task' : 'tasks' }}</span></div>
            @forelse($waitingTasks as $task)<a class="overview-waiting-task" href="/tasks#task-{{ $task->id }}"><span class="stat-icon todo"><x-icon name="clock"/></span><span><strong>{{ $task->title }}</strong><span>Waiting · recorded by you</span></span><x-icon name="chevron"/></a>@empty<p class="fine-print">No tasks marked Waiting. You can update a task whenever you’re waiting for a response.</p>@endforelse
            <p class="overview-progress-note">Check updates directly with the relevant authority. No verified time estimate is available.</p>
        </section>
        <aside class="overview-rail" aria-label="Next actions and useful guidance">
            <section class="panel overview-next"><div class="overview-card-heading"><h2>Next tasks</h2><a href="/tasks">View all <x-icon/></a></div><p class="overview-next-hint">Check off a task when it’s done.</p>
                @forelse($priorities as $task)
                    <div class="overview-task"><form method="post" action="/dashboard/tasks/{{ $task->id }}/complete" data-pending>@csrf<input type="hidden" name="revision" value="{{ $task->revision }}"><button class="task-complete" type="submit" aria-label="Mark {{ $task->title }} completed" title="Mark completed"><x-icon name="tick"/></button></form><a class="overview-task-link" href="/tasks#task-{{ $task->id }}"><strong>{{ $task->title }}</strong><span>{{ $stageLabels[$task->stage] }}</span><span @class(['status-badge', 'action'=>$task->status==='Action needed'])>{{ $task->status }}</span>@if($task->task_date)<span class="overview-task-date">Your date · {{ $task->task_date->format('j M Y') }}</span>@endif</a></div>
                @empty<div class="overview-tasks-clear"><x-icon name="check"/><h3>A little breathing room.</h3><p>No next tasks right now. You can review any stage of your journey.</p><a class="underlined" href="/journey">Review my journey <x-icon/></a></div>@endforelse
            </section>
            <section class="overview-sfi"><span class="stat-icon"><x-icon name="book"/></span><div><h2>Learn Swedish (SFI)</h2><p>Your kommun is your starting point for official SFI guidance and application information.</p><a href="/learn-swedish">{{ $user->municipality ? 'Explore SFI in '.$user->municipality : 'Find your kommun' }} <x-icon/></a></div></section>
            <a class="overview-city-card" href="/guides"><img src="/images/stockholm-riddarholmen-800.webp" width="800" height="526" loading="lazy" alt=""><span class="overview-city-copy"><span>A new place.<br>New possibilities.</span><span>Find your feet with practical guides <x-icon/></span></span></a>
            <p class="overview-self-paced"><x-icon name="shield"/>Your journey. Your pace.<br>Every stage is open to explore.</p>
        </aside>
    </div>
</div>