{{-- Header Görevler toolbar'ı (Hızlı Ekle'nin yerine) --}}
@php
    $tkAgencyId = auth()->user()?->currentAgencyId();
    $tkCounts = ['pending' => 0, 'overdue' => 0, 'completed_today' => 0];
    if ($tkAgencyId) {
        $tkBase = fn () => \App\Models\Task\Task::byAgency($tkAgencyId)->notArchived()->assignedTo(auth()->id());
        $tkCounts = [
            'pending' => $tkBase()->pendingNotOverdue()->count(),
            'overdue' => $tkBase()->overdue()->count(),
            'completed_today' => $tkBase()->completedToday()->count(),
        ];
    }
@endphp

<div class="hdr-tasks" id="hdrTasks">
    <a href="{{ route('agency.tasks.index') }}" class="hdr-tasks-brand" title="Görev Merkezi">
        <i class="fas fa-list-check"></i><span>Görevler</span>
    </a>

    <a href="{{ route('agency.tasks.index', ['filter' => 'pending']) }}" class="hdr-tk-chip amber" title="Bekleyen görevleriniz">
        <i class="fas fa-hourglass-half"></i>
        <b data-tk-count="pending">{{ $tkCounts['pending'] }}</b>
    </a>

    <a href="{{ route('agency.tasks.index', ['filter' => 'overdue']) }}"
       class="hdr-tk-chip red {{ $tkCounts['overdue'] > 0 ? 'alert' : '' }}" title="Süresi geçen görevleriniz">
        <i class="fas fa-fire"></i>
        <b data-tk-count="overdue">{{ $tkCounts['overdue'] }}</b>
    </a>

    <a href="{{ route('agency.tasks.index', ['filter' => 'completed']) }}" class="hdr-tk-chip green" title="Bugün tamamladıklarınız">
        <i class="fas fa-circle-check"></i>
        <b data-tk-count="completed_today">{{ $tkCounts['completed_today'] }}</b>
    </a>

    <a href="{{ route('agency.tasks.index', ['new' => 1]) }}" class="hdr-tk-new" title="Yeni Görev">
        <i class="fas fa-plus"></i>
    </a>
</div>

<style>
    /* Sabit yükseklik: sayaçlar/rozetler değişse de widget boyu asla oynamaz
       (header'da dikey kayma/CLS önlenir) */
    .hdr-tasks {
        display: inline-flex; align-items: center; gap: .35rem;
        background: #f8fafc; border: 1px solid #e9edf3; border-radius: 12px; padding: 0 .35rem;
        height: 40px; flex-shrink: 0; align-self: center;
    }
    .hdr-tasks-brand {
        display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
        font-size: .78rem; font-weight: 800; color: #92400e; padding: 0 .55rem; border-radius: 9px;
        transition: background .15s ease; height: 28px;
    }
    .hdr-tasks-brand i { color: #d97706; font-size: .82rem; }
    .hdr-tasks-brand:hover { background: #fef3c7; color: #78350f; }

    .hdr-tk-chip {
        display: inline-flex; align-items: center; gap: .32rem; text-decoration: none;
        font-size: .74rem; padding: 0 .55rem; border-radius: 9px; transition: background .15s ease;
        border: 1px solid transparent; height: 28px;
    }
    .hdr-tk-chip i { font-size: .7rem; width: 12px; text-align: center; }
    /* Sabit rakam kutusu: 0 → 9 → 12 geçişlerinde genişlik değişip kayma yapmasın */
    .hdr-tk-chip b {
        font-weight: 800; font-size: .8rem; line-height: 1;
        min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums;
    }
    .hdr-tk-chip.amber { color: #b45309; background: #fef3c7; }
    .hdr-tk-chip.amber:hover { background: #fde68a; }
    .hdr-tk-chip.red { color: #b91c1c; background: #fee2e2; }
    .hdr-tk-chip.red:hover { background: #fecaca; }
    .hdr-tk-chip.green { color: #15803d; background: #dcfce7; }
    .hdr-tk-chip.green:hover { background: #bbf7d0; }
    /* Uyarı vurgusu: layout'a dokunmayan box-shadow nabzı (ikon animasyonu
       piksel kaymasına yol açabiliyordu) */
    .hdr-tk-chip.alert { animation: hdrTkPulse 1.6s ease-in-out infinite; }
    @keyframes hdrTkPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); }
        50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
    }

    .hdr-tk-new {
        display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
        width: 26px; height: 26px; border-radius: 8px; font-size: .7rem;
        background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
        box-shadow: 0 4px 10px -4px rgba(217,119,6,.55); transition: all .15s ease;
    }
    .hdr-tk-new:hover { color: #fff; transform: scale(1.08); }

    @media (max-width: 992px) {
        .hdr-tasks-brand span { display: none; }
    }
</style>

<script>
    (function () {
        const COUNTS_URL = "{{ route('agency.tasks.counts') }}";

        function refreshTaskCounts() {
            if (document.hidden) return;
            fetch(COUNTS_URL, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.ok ? r.json() : null)
                .then(data => {
                    if (!data) return;
                    document.querySelectorAll('[data-tk-count]').forEach(el => {
                        const key = el.dataset.tkCount;
                        if (data[key] !== undefined) el.textContent = data[key];
                    });
                    const overdueChip = document.querySelector('#hdrTasks .hdr-tk-chip.red');
                    if (overdueChip) overdueChip.classList.toggle('alert', (data.overdue || 0) > 0);
                })
                .catch(() => {});
        }

        setInterval(refreshTaskCounts, 60000);
    })();
</script>