@extends('layouts.app')
@section('title', 'Tasks to be done')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/dynamic-dashboard.css') }}?v={{ filemtime(public_path('css/dynamic-dashboard.css')) }}">
@endpush

@section('contents')
@php
    $bucketMeta = [
        'pending' => [
            'label' => 'Pending',
            'hint' => 'Actions waiting on you right now',
            'icon' => 'fa-clock',
            'mod' => 'pending',
        ],
        'approved' => [
            'label' => 'Approved',
            'hint' => 'Recent approvals you completed',
            'icon' => 'fa-check-circle',
            'mod' => 'approved',
        ],
        'returned' => [
            'label' => 'Returned',
            'hint' => 'Items you returned for revision',
            'icon' => 'fa-undo-alt',
            'mod' => 'returned',
        ],
    ];
    $activeMeta = $bucketMeta[$selectedBucket] ?? $bucketMeta['pending'];
@endphp
<section class="content dd-dashboard dd-tasks-page">
    <div class="container-fluid">
        <div class="dd-tasks-page__hero">
            <div>
                <a href="{{ route('dashboard') }}" class="dd-priority-page__back"><i class="fas fa-arrow-left"></i> Back to dashboard</a>
                <h1 class="dd-tasks-page__title">Tasks to be done</h1>
                <p class="dd-tasks-page__lead">Your actionable work queue — meetings, signatures, forwards, approvals, and returns — in one place.</p>
            </div>
            <div class="dd-tasks-page__hero-stat">
                <span class="dd-tasks-page__hero-stat-value">{{ number_format($pendingCount) }}</span>
                <span class="dd-tasks-page__hero-stat-label">open pending tasks</span>
            </div>
        </div>

        <div class="dd-tasks-page__buckets" role="tablist" aria-label="Task buckets">
            @foreach ($bucketMeta as $key => $meta)
                <a href="{{ route('dashboard.tasks', ['bucket' => $key]) }}"
                   class="dd-pending-summary__card dd-pending-summary__card--{{ $meta['mod'] }} dd-pending-summary__card--link {{ $selectedBucket === $key ? 'is-active' : '' }}"
                   role="tab"
                   aria-selected="{{ $selectedBucket === $key ? 'true' : 'false' }}">
                    <span class="dd-pending-summary__icon"><i class="fas {{ $meta['icon'] }}" aria-hidden="true"></i></span>
                    <span class="dd-pending-summary__value">{{ number_format((int) ($bucketCounts[$key] ?? 0)) }}</span>
                    <span class="dd-pending-summary__label">{{ $meta['label'] }}</span>
                </a>
            @endforeach
        </div>

        <div class="dd-tasks-page__panel">
            <div class="dd-tasks-page__panel-head">
                <div>
                    <h2 class="dd-tasks-page__panel-title">
                        <i class="fas {{ $activeMeta['icon'] }}" aria-hidden="true"></i>
                        {{ $activeMeta['label'] }}
                    </h2>
                    <p class="dd-tasks-page__panel-hint">{{ $activeMeta['hint'] }} · {{ count($items) }} shown</p>
                </div>
                <a href="{{ route('notifications.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="far fa-bell"></i> All notifications
                </a>
            </div>

            @if (count($items) === 0)
                <div class="dd-tasks-page__empty">
                    <i class="fas fa-check-circle" aria-hidden="true"></i>
                    <h3>Nothing here</h3>
                    <p>
                        @if ($selectedBucket === 'pending')
                            You’re all caught up — no pending tasks right now.
                        @else
                            No {{ strtolower($activeMeta['label']) }} items in the recent window.
                        @endif
                    </p>
                </div>
            @else
                <div class="dd-tasks-page__list">
                    @foreach ($items as $item)
                        @php
                            $href = trim((string) ($item['action_url'] ?? ''));
                            $badge = (string) ($item['badge'] ?? $item['kind_label'] ?? '');
                            $badgeTone = (string) ($item['badge_tone'] ?? 'awaiting');
                            $icon = (string) ($item['icon'] ?? 'fa-bell');
                            $iconClass = (string) ($item['icon_class'] ?? 'dd-pending-icon--other');
                            $tag = $href !== '' ? 'a' : 'div';
                        @endphp
                        <{{ $tag }}
                            @if ($href !== '') href="{{ $href }}" @endif
                            class="dd-tasks-page__row"
                        >
                            <span class="dd-pending-row__icon {{ $iconClass }}" aria-hidden="true">
                                <i class="fas {{ $icon }}"></i>
                            </span>
                            <span class="dd-tasks-page__row-body">
                                <span class="dd-tasks-page__row-title">{{ $item['title'] ?? 'Task' }}</span>
                                @if (! empty($item['message']))
                                    <span class="dd-tasks-page__row-message">{{ $item['message'] }}</span>
                                @endif
                                <span class="dd-tasks-page__row-meta">
                                    @if ($badge !== '')
                                        <span class="dd-pending-row__badge dd-pending-row__badge--{{ $badgeTone }}">{{ $badge }}</span>
                                    @endif
                                    @if (! empty($item['return_to']))
                                        <span class="dd-pending-row__time">Return to: {{ $item['return_to'] }}</span>
                                    @endif
                                    @if (! empty($item['occurred_at_formatted']))
                                        <span class="dd-pending-row__time">
                                            {{ $item['date_label'] ?? 'Submitted' }}: {{ $item['occurred_at_formatted'] }}
                                        </span>
                                    @endif
                                </span>
                            </span>
                            @if ($href !== '')
                                <span class="dd-tasks-page__row-go" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
                            @endif
                        </{{ $tag }}>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</section>
@endsection