@php
    $columns = [
        \App\Models\Task\Task::STATUS_PENDING => ['label' => 'Bekliyor', 'dot' => '#f59e0b', 'bg' => '#fffbeb', 'icon' => 'fa-hourglass-half'],
        \App\Models\Task\Task::STATUS_IN_PROGRESS => ['label' => 'Devam Ediyor', 'dot' => '#4f46e5', 'bg' => '#eef2ff', 'icon' => 'fa-bolt'],
        \App\Models\Task\Task::STATUS_AWAITING_APPROVAL => ['label' => 'Onay Bekliyor', 'dot' => '#0ea5e9', 'bg' => '#f0f9ff', 'icon' => 'fa-user-check'],
        \App\Models\Task\Task::STATUS_COMPLETED => ['label' => 'Tamamlandı', 'dot' => '#16a34a', 'bg' => '#f0fdf4', 'icon' => 'fa-circle-check'],
    ];
@endphp

<div class="tk-kanban">
    @foreach($columns as $statusKey => $col)
        <section class="tk-col" data-status="{{ $statusKey }}">
            <header class="tk-col-head" style="--col-bg: {{ $col['bg'] }}; --col-dot: {{ $col['dot'] }};">
                <span class="tk-col-dot"></span>
                <h6>{{ $col['label'] }}</h6>
                <span class="tk-col-count">{{ $kanban[$statusKey]->count() }}</span>
            </header>

            <div class="tk-col-body" data-status="{{ $statusKey }}">
                @forelse($kanban[$statusKey] as $task)
                    <article class="tk-card {{ $task->isOverdue() ? 'over' : '' }} {{ $statusKey === 'completed' ? 'done' : '' }}"
                             data-id="{{ $task->id }}"
                             data-qv="{{ route('agency.tasks.quick-view', $task) }}"
                             style="--pri: {{ $task->priorityMeta()['color'] }};">
                        <div class="tk-card-top">
                            <span class="tk-badge" style="background: {{ $task->priorityMeta()['color'] }}18; color: {{ $task->priorityMeta()['color'] }};">
                                {{ $task->priorityMeta()['label'] }}
                            </span>
                            @if($task->is_auto)
                                <span class="tk-auto-badge" title="Sistem tarafından oluşturuldu"><i class="fas fa-robot"></i> Otomatik</span>
                            @endif
                        </div>

                        <h5 class="tk-card-title">{{ $task->title }}</h5>

                        @if($task->relations->isNotEmpty())
                            <div class="tk-card-rels">
                                @foreach($task->relations->take(2) as $rel)
                                    <span class="tk-relchip" data-rel-qv="{{ $rel->quickViewUrl() }}" title="{{ $rel->label() }}">
                                        <i class="fas {{ $rel->meta()['icon'] }}"></i>{{ \Illuminate\Support\Str::limit($rel->label(), 26) }}
                                    </span>
                                @endforeach
                                @if($task->relations->count() > 2)
                                    <span class="tk-relchip">+{{ $task->relations->count() - 2 }}</span>
                                @endif
                            </div>
                        @endif

                        @if($task->assignees->isNotEmpty())
                            <div class="tk-people tk-card-people">
                                @foreach($task->assignees->take(2) as $user)
                                    <span class="tk-person"><span class="tk-avatar">{{ $user->initials }}</span>{{ $user->full_name }}</span>
                                @endforeach
                                @if($task->assignees->count() > 2)
                                    <span class="tk-person more" title="{{ $task->assignees->skip(2)->pluck('full_name')->implode(', ') }}">+{{ $task->assignees->count() - 2 }} kişi</span>
                                @endif
                            </div>
                        @endif

                        <div class="tk-card-foot">
                            @if($task->due_date)
                                <span class="tk-due {{ $task->isOverdue() ? 'over' : '' }}">
                                    <i class="fas {{ $task->isOverdue() ? 'fa-fire' : 'fa-clock' }}"></i>
                                    {{ $task->dueLabel('d M') }}
                                </span>
                            @else
                                <span></span>
                            @endif

                            <span class="d-inline-flex align-items-center gap-2">
                                @if(($task->comments_count ?? 0) > 0)
                                    <span class="tk-due" title="{{ $task->comments_count }} not/güncelleme"><i class="far fa-comment"></i> {{ $task->comments_count }}</span>
                                @endif
                                @if($task->completed_at)
                                    <span class="tk-due"><i class="fas fa-check"></i> {{ $task->completed_at->translatedFormat('d M') }}</span>
                                @endif
                            </span>
                        </div>
                    </article>
                @empty
                    <div class="tk-col-empty">
                        <i class="fas {{ $col['icon'] }}"></i>
                        <span>Görev yok</span>
                    </div>
                @endforelse
            </div>
        </section>
    @endforeach
</div>

@push('styles')
<style>
    .tk-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
    @media (max-width: 1200px) { .tk-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .tk-col { background: #f1f5f9; border: 1px solid #e9edf3; border-radius: 16px; overflow: hidden; }
    .tk-col-head {
        display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem;
        background: var(--col-bg); border-bottom: 1px solid #e9edf3;
    }
    .tk-col-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--col-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-dot) 18%, transparent); }
    .tk-col-head h6 { margin: 0; font-size: .84rem; font-weight: 800; color: #1e293b; letter-spacing: -0.01em; }
    .tk-col-count { margin-left: auto; font-size: .72rem; font-weight: 800; color: #64748b; background: #fff; border: 1px solid #e2e8f0; padding: .1rem .55rem; border-radius: 999px; }

    .tk-col-body { padding: .7rem; display: flex; flex-direction: column; gap: .6rem; min-height: 180px; max-height: calc(100vh - 320px); overflow-y: auto; }
    .tk-col-body::-webkit-scrollbar { width: 5px; }
    .tk-col-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

    .tk-card {
        position: relative; background: #fff; border: 1px solid #e9edf3; border-left: 4px solid var(--pri, #94a3b8);
        border-radius: 12px; padding: .75rem .85rem; cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .tk-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(15,23,42,.2); }
    .tk-card.over { background: #fffafa; border-color: #fecaca; border-left-color: #ef4444; }
    .tk-card.done { opacity: .72; }
    .tk-card.done .tk-card-title { text-decoration: line-through; text-decoration-color: #cbd5e1; }

    .tk-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
    .tk-card-title { font-size: .86rem; font-weight: 700; color: #0f172a; line-height: 1.35; margin: 0 0 .5rem; word-break: break-word; }
    .tk-card-rels { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
    .tk-card-people { margin-bottom: .55rem; }
    .tk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

    /* Sürükleme durumları */
    .tk-card.sortable-ghost { opacity: .35; background: var(--tk-soft, #fef3c7); border-style: dashed; }
    .tk-card.sortable-drag { box-shadow: 0 18px 40px -12px rgba(15,23,42,.35); transform: rotate(2deg); }

    .tk-col-empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
        border: 2px dashed #e2e8f0; border-radius: 12px; padding: 1.6rem .5rem; color: #b6c2d2;
        font-size: .78rem; font-weight: 700;
    }
    .tk-col-empty i { font-size: 1.2rem; opacity: .6; }

    @media (max-width: 992px) { .tk-kanban { grid-template-columns: 1fr; } .tk-col-body { max-height: none; } }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
    const REORDER_URL = "{{ route('agency.tasks.reorder') }}";
    const CSRF = document.querySelector('meta[name="csrf-token"]')?.content;
    let dragging = false;

    function sendColumn(colEl) {
        const ids = [...colEl.querySelectorAll('.tk-card')].map(c => c.dataset.id);
        return fetch(REORDER_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
            body: JSON.stringify({ status: colEl.dataset.status, ordered_ids: ids })
        }).then(r => { if (!r.ok) throw new Error(); return r.json(); });
    }

    // Sunucu nihai durumu değiştirmiş olabilir (onay akışı: completed → awaiting_approval);
    // kartı gerçek durumunun kolonuna taşı.
    function applyServerStatuses(results) {
        const merged = Object.assign({}, ...results.map(d => (d && d.statuses) || {}));
        Object.entries(merged).forEach(([id, status]) => {
            const card = document.querySelector(`.tk-card[data-id="${id}"]`);
            if (!card) return;
            const colBody = card.closest('.tk-col-body');
            if (!colBody || colBody.dataset.status === status) return;
            const target = document.querySelector(`.tk-col-body[data-status="${status}"]`);
            if (!target) return;
            target.prepend(card);
            card.classList.toggle('done', status === 'completed');
            if (status === 'awaiting_approval') {
                appAlert({
                    icon: 'info',
                    title: 'Görev onay gerektiriyor',
                    text: 'Görevi atayan kişi onaylayana kadar görev tamamlanmış sayılmaz; '
                        + 'tamamlandı bilgisi onayına gönderildi.',
                    confirmButtonText: 'Anladım'
                });
            }
        });
    }

    function refreshCounts() {
        document.querySelectorAll('.tk-col').forEach(col => {
            const n = col.querySelectorAll('.tk-card').length;
            col.querySelector('.tk-col-count').textContent = n;
        });
    }

    document.querySelectorAll('.tk-col-body').forEach(colEl => {
        new Sortable(colEl, {
            group: 'tk-kanban',
            animation: 180,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            onStart: () => { dragging = true; },
            onEnd: (evt) => {
                setTimeout(() => { dragging = false; }, 80);
                const jobs = [sendColumn(evt.to)];
                if (evt.from !== evt.to) jobs.push(sendColumn(evt.from));
                Promise.all(jobs)
                    .then(rs => { applyServerStatuses(rs); refreshCounts(); })
                    .catch(() => {
                        // Sayfa yenilemeden geri al: kart eski kolonuna, eski sırasına döner
                        const ref = evt.from.children[evt.oldIndex] || null;
                        evt.from.insertBefore(evt.item, ref);
                        evt.item.classList.toggle('done', evt.from.dataset.status === 'completed');
                        refreshCounts();
                        if (window.Swal) Swal.fire({ toast: true, position: 'top-end', timer: 2400, showConfirmButton: false, icon: 'error', title: 'Taşıma kaydedilemedi, geri alındı.' });
                    });

                // Tamamlandı kolonuna taşınan kart görsel olarak işaretlensin
                evt.item.classList.toggle('done', evt.to.dataset.status === 'completed');
                evt.item.classList.remove('over');
            }
        });
    });

    // Kart tıklaması → quick-view (sürükleme sonrası tetiklenmesin)
    document.querySelector('.tk-kanban').addEventListener('click', (e) => {
        if (dragging) return;
        const chip = e.target.closest('[data-rel-qv]');
        if (chip) {
            e.stopPropagation();
            if (chip.dataset.relQv && typeof openQuickView === 'function') openQuickView(chip.dataset.relQv);
            return;
        }
        const card = e.target.closest('.tk-card');
        if (card && typeof openQuickView === 'function') openQuickView(card.dataset.qv);
    });
})();
</script>
@endpush