@extends('layouts.app')

@section('title', 'Kuyruk – Pazarlama Destek')

@section('content')
    <div class="container-fluid pd-queue-page" data-active-tab="{{ $activeTab }}" data-force-full-nav>

        {{-- ── Header ── --}}
        <div class="pd-queue-header">
            <div class="pd-queue-header-left">
                <nav class="pd-breadcrumb-dark">
                    <a href="{{ route('admin.marketing.destek') }}">Pazarlama Destek</a>
                    <span>/</span><span>{{ $queueLabel ?? 'Kuyruk' }}</span>
                </nav>
                <h1 class="pd-queue-title">
                    {{ $statusTabs[$activeTab] ?? ucfirst($activeTab) }}
                    <span class="pd-queue-count" data-queue-count>{{ $requests->count() }} iş</span>
                </h1>
            </div>
            <div class="pd-queue-header-right">
                <a href="{{ route('admin.marketing.destek') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-house me-1"></i>Portal
                </a>
                <a href="{{ route('admin.marketing.destek.create', ['category' => 'canakkale']) }}"
                    class="btn btn-sm btn-primary">
                    <i class="bi bi-plus me-1"></i>Yeni Talep
                </a>
            </div>
        </div>

        @if (!$ready)
            <div class="alert alert-warning mx-3">Migration çalıştırılmadı: <code>php artisan migrate</code></div>
        @endif
        @if (session('success'))
        <div class="alert alert-success mx-3">{{ session('success') }}</div>@endif
        @if (session('error'))
        <div class="alert alert-danger mx-3">{{ session('error') }}</div>@endif
        <div id="pdQueueAjaxNotice" class="mx-3 d-none"></div>

        {{-- ── Tabs ── --}}
        <div class="pd-tabs-bar">
            @foreach ($statusTabs as $tabKey => $tabLabel)
                <a href="{{ route($queueRouteName ?? 'admin.marketing.destek.queue', array_merge(request()->query(), ['tab' => $tabKey])) }}"
                    class="pd-tab {{ $activeTab === $tabKey ? 'pd-tab--active' : '' }}" data-tab-key="{{ $tabKey }}">
                    {{ $tabLabel }}
                    <span class="pd-tab-badge">{{ $tabCounts[$tabKey] ?? 0 }}</span>
                </a>
            @endforeach
        </div>

        {{-- ── Filters ── --}}
        <div class="pd-filter-bar">
            <form method="GET" action="{{ route($queueRouteName ?? 'admin.marketing.destek.queue') }}" class="pd-filter-form">
                <input type="hidden" name="tab" value="{{ $activeTab }}">
                @if (!empty($scopeOptions) && is_array($scopeOptions))
                    <select name="scope" class="form-select form-select-sm" style="max-width:220px;">
                        @foreach ($scopeOptions as $scopeKey => $scopeMeta)
                            <option value="{{ $scopeKey }}" {{ (string) ($scope ?? '') === (string) $scopeKey ? 'selected' : '' }}>
                                {{ $scopeMeta['label'] ?? $scopeKey }}
                            </option>
                        @endforeach
                    </select>
                @endif
                <div class="input-group input-group-sm" style="max-width:260px;">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" name="q" class="form-control border-start-0 ps-0" placeholder="Ara..."
                        value="{{ $search }}" style="min-width:160px;">
                </div>
                <select name="category" class="form-select form-select-sm" style="max-width:180px;">
                    <option value="">Tüm Birimler</option>
                    @foreach ($categories as $k => $c)
                        <option value="{{ $k }}" {{ $filterCat === $k ? 'selected' : '' }}>{{ $c['label'] }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn btn-sm btn-outline-secondary">Filtrele</button>
                @if ($search || $filterType || $filterCat || (($scope ?? '') !== ((array_key_exists('all', (array) ($scopeOptions ?? [])) ? 'all' : 'pool'))))
                    <a href="{{ route($queueRouteName ?? 'admin.marketing.destek.queue', ['tab' => $activeTab, 'scope' => ($scope ?? '')]) }}"
                        class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-x"></i>
                    </a>
                @endif
            </form>
        </div>

        {{-- ── Table ── --}}
        <div class="pd-table-wrap">
            @if ($requests->isNotEmpty())
                <table class="pd-table">
                    <thead>
                        <tr>
                            <th style="width:38px;"></th>
                            <th>Talep Türü</th>
                            <th style="width:90px;">Anahtar</th>
                            <th>Başlık</th>
                            <th style="width:130px;">Talep Eden</th>
                            <th style="width:130px;">Atanan</th>
                            <th style="width:115px;">Durum</th>
                            <th style="width:100px;">Öncelik</th>
                            <th style="width:100px;">Termin</th>
                            <th style="width:100px;">Tarih</th>
                            @if ($canManage || !empty($isSharedPool))
                                <th style="width:56px;" class="text-center">İşlem</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($requests as $r)
                            @php
                                $cat = $categories[$r->category_key] ?? ['icon' => 'bi-circle', 'label' => $r->category_key];
                                $st = $statusMap[$r->status] ?? ['label' => $r->status, 'class' => ''];
                                $pr = $priorityMap[$r->priority] ?? ['label' => $r->priority, 'icon' => 'bi-dash', 'class' => ''];
                                $terminDt = $r->termin_date ? \Carbon\Carbon::parse($r->termin_date) : null;
                                $terminOverdue = $terminDt && $terminDt->isPast();
                                $isAdvancedWorkflowStatus = in_array((string) $r->status, ['solution_center', 'control', 'customer_review'], true);
                            @endphp
                            <tr class="pd-table-row" data-request-id="{{ $r->id }}" data-current-status="{{ $r->status }}" data-current-priority="{{ $r->priority }}" data-detail-url="{{ route('admin.marketing.destek.show', $r->id) }}">
                                <td class="text-center">
                                    <span class="pd-type-dot"><i class="bi {{ $cat['icon'] ?? 'bi-circle-fill' }}"></i></span>
                                </td>
                                <td>
                                    <div class="pd-type-label">{{ $r->request_type }}</div>
                                    <div class="pd-cat-tag">{{ $cat['label'] }}</div>
                                </td>
                                <td><span class="pd-key">{{ $r->request_key }}</span></td>
                                <td>
                                    <a href="{{ route('admin.marketing.destek.show', $r->id) }}" class="pd-summary-link">
                                        {{ $r->summary }}
                                    </a>
                                </td>
                                <td class="pd-cell-muted">{{ $r->reporter_name ?? '—' }}</td>
                                <td class="pd-cell-muted">
                                    @if ($canManage)
                                        <form action="{{ route('admin.marketing.destek.status', $r->id) }}" method="POST" class="pd-inline-update-form pd-inline-assignee-form">
                                            @csrf
                                            <input type="hidden" name="redirect_context" value="queue">
                                            <input type="hidden" name="queue_tab" value="{{ $activeTab }}">
                                            <input type="hidden" name="queue_q" value="{{ $search }}">
                                            <input type="hidden" name="queue_type" value="{{ $filterType }}">
                                            <input type="hidden" name="queue_category" value="{{ $filterCat }}">
                                            <input type="hidden" name="queue_scope" value="{{ $scope ?? '' }}">
                                            <input type="hidden" name="assignee_id" value="{{ (int) ($r->assignee_user_id ?? 0) > 0 ? (int) ($r->assignee_user_id ?? 0) : '' }}">
                                            <input type="hidden" name="status" value="{{ $r->status }}" data-status-hidden-input>

                                            <select class="form-select form-select-sm pd-row-assignee-select" data-assignee-editor>
                                                <option value="">Atanmamış</option>
                                                @foreach (($assignableUsers ?? collect()) as $userOption)
                                                    <option value="{{ $userOption->id }}" {{ (int) ($r->assignee_user_id ?? 0) === (int) $userOption->id ? 'selected' : '' }}>
                                                        {{ $userOption->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </form>
                                    @else
                                        <span>{{ $r->assignee_name ?? 'Atanmamış' }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if (!empty($isSharedPool) || $isAdvancedWorkflowStatus)
                                        <span class="pd-status {{ $st['class'] }}" data-status-badge>{{ $st['label'] }}</span>
                                        @if ($isAdvancedWorkflowStatus)
                                            <div class="pd-cell-note">Detaydan yönetin</div>
                                        @endif
                                    @else
                                        <form action="{{ route('admin.marketing.destek.status', $r->id) }}" method="POST" class="pd-inline-update-form pd-inline-update-form--compact">
                                            @csrf
                                            <input type="hidden" name="redirect_context" value="queue">
                                            <input type="hidden" name="queue_tab" value="{{ $activeTab }}">
                                            <input type="hidden" name="queue_q" value="{{ $search }}">
                                            <input type="hidden" name="queue_type" value="{{ $filterType }}">
                                            <input type="hidden" name="queue_category" value="{{ $filterCat }}">
                                            <input type="hidden" name="queue_scope" value="{{ $scope ?? '' }}">
                                            <input type="hidden" name="assignee_id" value="{{ (int) ($r->assignee_user_id ?? 0) > 0 ? (int) ($r->assignee_user_id ?? 0) : '' }}">
                                            <input type="hidden" name="status" value="{{ $r->status }}" data-status-hidden-input>

                                            <select class="form-select form-select-sm pd-row-status-select" {{ (int) ($r->assignee_user_id ?? 0) <= 0 ? 'disabled' : '' }}>
                                                @foreach ($statusMap as $statusKey => $statusValue)
                                                    @if (!$canManage && $statusKey === 'unassigned')
                                                        @continue
                                                    @endif
                                                    @if (in_array($statusKey, ['solution_center', 'control', 'customer_review'], true))
                                                        @continue
                                                    @endif
                                                    <option value="{{ $statusKey }}" {{ (string) $r->status === (string) $statusKey ? 'selected' : '' }}>
                                                        {{ $statusValue['label'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="pd-status {{ $st['class'] }}" data-status-badge>{{ $st['label'] }}</span>
                                        </form>
                                    @endif
                                </td>
                                <td>
                                    @if (!empty($isSharedPool))
                                        <span class="{{ $pr['class'] }}">
                                            <i class="bi {{ $pr['icon'] }}"></i> {{ $pr['label'] }}
                                        </span>
                                    @else
                                        <form action="{{ route('admin.marketing.destek.status', $r->id) }}" method="POST" class="pd-inline-update-form pd-inline-priority-form">
                                            @csrf
                                            <input type="hidden" name="redirect_context" value="queue">
                                            <input type="hidden" name="queue_tab" value="{{ $activeTab }}">
                                            <input type="hidden" name="queue_q" value="{{ $search }}">
                                            <input type="hidden" name="queue_type" value="{{ $filterType }}">
                                            <input type="hidden" name="queue_category" value="{{ $filterCat }}">
                                            <input type="hidden" name="queue_scope" value="{{ $scope ?? '' }}">
                                            <input type="hidden" name="assignee_id" value="{{ (int) ($r->assignee_user_id ?? 0) > 0 ? (int) ($r->assignee_user_id ?? 0) : '' }}">
                                            <input type="hidden" name="status" value="{{ $r->status }}" data-status-hidden-input>
                                            <select name="priority" class="form-select form-select-sm pd-row-priority-select">
                                                @foreach ($priorityMap as $priorityKey => $priorityValue)
                                                    <option value="{{ $priorityKey }}" {{ (string) $r->priority === (string) $priorityKey ? 'selected' : '' }}>
                                                        {{ $priorityValue['label'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </form>
                                    @endif
                                </td>
                                <td class="{{ $terminOverdue ? 'text-danger fw-semibold' : 'pd-cell-muted' }}">
                                    {{ $terminDt ? $terminDt->format('d.m.Y') : '—' }}
                                </td>
                                <td class="pd-cell-muted">
                                    {{ \Carbon\Carbon::parse($r->created_at)->format('d.m.Y') }}
                                </td>
                                @if ($canManage)
                                    <td class="text-center">
                                        <form action="{{ route('admin.marketing.destek.delete', $r->id) }}" method="POST" class="pd-inline-delete-form d-inline-flex" data-skip-global-confirm="1">
                                            @csrf
                                            <input type="hidden" name="redirect_context" value="queue">
                                            <input type="hidden" name="queue_tab" value="{{ $activeTab }}">
                                            <input type="hidden" name="queue_q" value="{{ $search }}">
                                            <input type="hidden" name="queue_type" value="{{ $filterType }}">
                                            <input type="hidden" name="queue_category" value="{{ $filterCat }}">
                                            <input type="hidden" name="queue_scope" value="{{ $scope ?? '' }}">
                                            <button type="submit" class="pd-delete-icon-btn"
                                                data-confirm-title="Talep Sil"
                                                data-confirm-message="Bu talep kalıcı olarak silinsin mi?"
                                                title="Talebi Sil"
                                                aria-label="Talebi Sil">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                @elseif (!empty($isSharedPool))
                                    <td class="text-center">
                                        <form action="{{ route('admin.marketing.destek.assign', $r->id) }}" method="POST" class="pd-inline-claim-form d-inline-flex">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-primary">
                                                Üzerime Al
                                            </button>
                                        </form>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="pd-empty">
                    <i class="bi bi-inbox pd-empty-icon"></i>
                    <div class="pd-empty-title">Bu kuyrukta iş yok</div>
                    <div class="pd-empty-sub">{{ $statusTabs[$activeTab] ?? '' }} durumunda aktif talep bulunmuyor.</div>
                </div>
            @endif
        </div>

    </div>
@endsection

@push('styles')
    <style>
        :root {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
        }

        .pd-queue-page {
            background: #f4f7fc;
            min-height: 100vh;
            padding-bottom: 3rem;
        }

        .pd-queue-page .btn-primary,
        .pd-queue-page .btn-success {
            background: var(--pd-green);
            border-color: var(--pd-green);
            color: #fff;
        }

        .pd-queue-page .btn-primary:hover,
        .pd-queue-page .btn-primary:focus,
        .pd-queue-page .btn-success:hover,
        .pd-queue-page .btn-success:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
            color: #fff;
        }

        .pd-queue-page .btn-outline-secondary {
            color: var(--pd-green-dark);
            border-color: #c8ddd4;
            background: #fff;
        }

        .pd-queue-page .btn-outline-secondary:hover,
        .pd-queue-page .btn-outline-secondary:focus {
            color: var(--pd-green-dark);
            border-color: #afcfc1;
            background: var(--pd-green-light);
        }

        /* Header */
        .pd-queue-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 1.5rem 1.5rem 1rem;
            flex-wrap: wrap;
            gap: .75rem;
        }

        .pd-breadcrumb-dark {
            font-size: .78rem;
            color: #94a3b8;
            margin-bottom: .3rem;
        }

        .pd-breadcrumb-dark a {
            color: #64748b;
            text-decoration: none;
        }

        .pd-breadcrumb-dark a:hover {
            color: var(--pd-green);
        }

        .pd-breadcrumb-dark span {
            margin: 0 .4rem;
        }

        .pd-queue-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: .65rem;
            margin: 0;
        }

        .pd-queue-count {
            font-size: .82rem;
            font-weight: 500;
            color: #64748b;
            background: #f1f5f9;
            padding: .15rem .55rem;
            border-radius: 999px;
        }

        .pd-queue-header-right {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        /* Tabs */
        .pd-tabs-bar {
            display: flex;
            gap: 0;
            padding: 0 1.5rem;
            border-bottom: 2px solid #e2e8f0;
            overflow-x: auto;
        }

        .pd-tab {
            display: flex;
            align-items: center;
            gap: .45rem;
            padding: .65rem 1rem;
            font-size: .85rem;
            font-weight: 600;
            color: #64748b;
            text-decoration: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            white-space: nowrap;
            transition: color .15s ease;
        }

        .pd-tab:hover {
            color: var(--pd-green);
        }

        .pd-tab--active {
            color: var(--pd-green);
            border-bottom-color: var(--pd-green);
        }

        .pd-tab-badge {
            font-size: .7rem;
            background: #e2e8f0;
            color: #64748b;
            padding: .1rem .4rem;
            border-radius: 999px;
            min-width: 20px;
            text-align: center;
        }

        .pd-tab--active .pd-tab-badge {
            background: var(--pd-green-light);
            color: var(--pd-green);
        }

        /* Filter bar */
        .pd-filter-bar {
            padding: .75rem 1.5rem;
        }

        .pd-filter-form {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        /* Table */
        .pd-table-wrap {
            margin: 0 1.5rem;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            overflow: hidden;
        }

        .pd-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .85rem;
        }

        .pd-table thead th {
            padding: .75rem 1rem;
            text-align: left;
            font-weight: 700;
            font-size: .78rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: #64748b;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }

        .pd-table-row {
            cursor: pointer;
            transition: background .12s ease;
        }

        .pd-table-row:hover {
            background: var(--pd-green-light);
        }

        .pd-table td {
            padding: .7rem 1rem;
            vertical-align: middle;
            border-bottom: 1px solid #f1f5f9;
        }

        .pd-table-row:last-child td {
            border-bottom: none;
        }

        .pd-type-dot {
            color: var(--pd-green);
            font-size: .85rem;
        }

        .pd-type-label {
            font-weight: 600;
            color: #0f172a;
        }

        .pd-cat-tag {
            font-size: .72rem;
            color: #64748b;
            margin-top: .1rem;
        }

        .pd-key {
            font-size: .78rem;
            font-weight: 700;
            color: var(--pd-green);
            font-family: monospace;
        }

        .pd-summary-link {
            color: #1e293b;
            text-decoration: none;
            font-weight: 500;
        }

        .pd-summary-link:hover {
            color: var(--pd-green);
        }

        .pd-cell-muted {
            color: #64748b;
            font-size: .82rem;
        }

        .pd-inline-update-form {
            display: flex;
            gap: .45rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .pd-row-assignee-select {
            min-width: 150px;
        }

        .pd-inline-update-form .form-select {
            min-width: 120px;
            flex: 1 1 120px;
        }

        .pd-inline-update-form--compact {
            flex-wrap: nowrap;
            gap: .35rem;
        }

        .pd-row-status-select {
            min-width: 118px;
        }

        .pd-row-priority-select {
            min-width: 108px;
        }

        .pd-delete-icon-btn {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #d7e6df;
            border-radius: .55rem;
            background: #f8fbfa;
            color: var(--pd-green-dark);
            padding: 0;
            transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
        }

        .pd-delete-icon-btn:hover {
            background: var(--pd-green-light);
            border-color: #b9d9cc;
            color: var(--pd-green);
        }

        .pd-delete-icon-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 .2rem rgba(20, 90, 70, .14);
        }

        /* Status badges */
        .pd-status {
            display: inline-block;
            padding: .22rem .6rem;
            border-radius: .4rem;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .04em;
            white-space: nowrap;
        }

        .mkt-status--unassigned {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #fed7aa;
        }

        .mkt-status--assigned {
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .mkt-status--analiz {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .mkt-status--solution {
            background: #ecfeff;
            color: #0f766e;
            border: 1px solid #a5f3fc;
        }

        .mkt-status--control {
            background: #fffbeb;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .mkt-status--review {
            background: #f0f9ff;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }

        .mkt-status--inprogress {
            background: var(--pd-green-light);
            color: var(--pd-green);
            border: 1px solid #b9d9cc;
        }

        .mkt-status--pending {
            background: #fffbeb;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .mkt-status--done {
            background: #f0fdf4;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        .mkt-status--cancelled {
            background: #f8fafc;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }

        .pd-cell-note {
            margin-top: .3rem;
            font-size: .72rem;
            color: #64748b;
        }

        /* Empty state */
        .pd-empty {
            padding: 4rem 2rem;
            text-align: center;
        }

        .pd-empty-icon {
            font-size: 2.5rem;
            color: #cbd5e1;
            display: block;
            margin-bottom: .75rem;
        }

        .pd-empty-title {
            font-weight: 700;
            color: #334155;
            margin-bottom: .3rem;
        }

        .pd-empty-sub {
            color: #64748b;
            font-size: .88rem;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const pageEl = document.querySelector('.pd-queue-page');
            const noticeEl = document.getElementById('pdQueueAjaxNotice');
            const tableWrap = pageEl?.querySelector('.pd-table-wrap');
            const activeTab = String(pageEl?.dataset.activeTab || '').trim();

            if (!pageEl || !tableWrap) {
                return;
            }

            const showNotice = function (message, type = 'success') {
                if (!noticeEl) {
                    return;
                }

                const normalizedType = type === 'danger' ? 'danger' : 'success';
                noticeEl.className = `alert alert-${normalizedType} mx-3`;
                noticeEl.textContent = String(message || '');
            };

            const adjustBadge = function (tabKey, delta) {
                if (!tabKey || !delta) {
                    return;
                }

                const badge = pageEl.querySelector(`.pd-tab[data-tab-key="${tabKey}"] .pd-tab-badge`);
                if (!badge) {
                    return;
                }

                const currentValue = parseInt(String(badge.textContent || '0').replace(/[^\d-]/g, ''), 10) || 0;
                badge.textContent = String(Math.max(currentValue + delta, 0));
            };

            const adjustQueueCount = function (delta) {
                if (!delta) {
                    return;
                }

                const countEl = pageEl.querySelector('[data-queue-count]');
                if (!countEl) {
                    return;
                }

                const currentValue = parseInt(String(countEl.textContent || '0').replace(/[^\d-]/g, ''), 10) || 0;
                countEl.textContent = `${Math.max(currentValue + delta, 0)} iş`;
            };

            const renderEmptyState = function () {
                tableWrap.innerHTML = `
                    <div class="pd-empty">
                        <i class="bi bi-inbox pd-empty-icon"></i>
                        <div class="pd-empty-title">Bu kuyrukta iş yok</div>
                        <div class="pd-empty-sub">Bu sekmede aktif talep bulunmuyor.</div>
                    </div>
                `;
            };

            const setFormBusy = function (form, isBusy) {
                form.querySelectorAll('button, select').forEach((element) => {
                    element.disabled = !!isBusy;
                });
            };

            const applyMutation = function (row, payload) {
                if (!row || !payload || typeof payload !== 'object') {
                    return;
                }

                const oldStatus = String(payload.old_status || row.dataset.currentStatus || '').trim();
                const newStatus = String(payload.new_status || oldStatus).trim();

                if (oldStatus !== '' && newStatus !== '' && oldStatus !== newStatus) {
                    adjustBadge(oldStatus, -1);
                    adjustBadge(newStatus, 1);
                }

                if (oldStatus === activeTab && newStatus !== '' && newStatus !== activeTab) {
                    row.remove();
                    adjustQueueCount(-1);

                    const remainingRows = tableWrap.querySelectorAll('tbody tr').length;
                    if (remainingRows === 0) {
                        renderEmptyState();
                    }

                    return;
                }

                row.dataset.currentStatus = newStatus;
                const nextPriority = String(payload.priority || row.dataset.currentPriority || '').trim();
                if (nextPriority !== '') {
                    row.dataset.currentPriority = nextPriority;
                }

                const assigneeEditor = row.querySelector('[data-assignee-editor]');
                if (assigneeEditor) {
                    assigneeEditor.value = payload.assignee_id ? String(payload.assignee_id) : '';
                }

                const statusBadge = row.querySelector('[data-status-badge]');
                if (statusBadge) {
                    const statusClass = String(payload.status_class || '').trim();
                    statusBadge.className = statusClass !== '' ? `pd-status ${statusClass}` : 'pd-status';
                    statusBadge.textContent = String(payload.status_label || newStatus || '');
                }

                const statusSelect = row.querySelector('.pd-inline-update-form .pd-row-status-select');
                if (statusSelect && newStatus !== '') {
                    statusSelect.value = newStatus;
                    statusSelect.disabled = !(payload.assignee_id && String(payload.assignee_id).trim() !== '');
                }

                row.querySelectorAll('.pd-inline-update-form [data-status-hidden-input]').forEach((statusHiddenInput) => {
                    if (newStatus !== '') {
                        statusHiddenInput.value = newStatus;
                        statusHiddenInput.defaultValue = newStatus;
                    }
                });

                row.querySelectorAll('.pd-inline-update-form input[name="assignee_id"]').forEach((assigneeInput) => {
                    assigneeInput.value = payload.assignee_id ? String(payload.assignee_id) : '';
                    assigneeInput.defaultValue = assigneeInput.value;
                });

                row.querySelectorAll('.pd-row-priority-select').forEach((prioritySelect) => {
                    if (nextPriority !== '') {
                        prioritySelect.value = nextPriority;
                    }
                });
            };

            const submitQuickUpdate = async function (form) {
                if (!form) {
                    return;
                }

                const row = form.closest('tr[data-request-id]');
                const assigneeEditor = row?.querySelector('[data-assignee-editor]');
                const assigneeInput = form.querySelector('input[name="assignee_id"]');
                const statusSelect = form.querySelector('.pd-row-status-select');
                const statusHiddenInput = form.querySelector('[data-status-hidden-input]');

                if (assigneeEditor && assigneeInput) {
                    assigneeInput.value = String(assigneeEditor.value || '').trim();
                }

                if (statusSelect && statusHiddenInput) {
                    statusHiddenInput.value = String(statusSelect.value || row?.dataset.currentStatus || '').trim();
                }

                const selectedStatus = String(statusHiddenInput?.value || row?.dataset.currentStatus || '').trim();
                const selectedAssignee = String(assigneeInput?.value || '').trim();

                if (selectedStatus !== 'unassigned' && selectedAssignee === '') {
                    if (statusSelect) {
                        statusSelect.value = String(row?.dataset.currentStatus || 'unassigned');
                    }

                    if (assigneeEditor && String(assigneeEditor.value || '').trim() === '') {
                        assigneeEditor.value = String(assigneeInput?.defaultValue || '');
                    }

                    showNotice('Durum değiştirmeden önce bir atanan seçin.', 'danger');
                    return;
                }

                const formData = new FormData(form);

                setFormBusy(form, true);

                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        body: formData,
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (!response.ok) {
                        throw new Error(String(payload.message || 'İşlem tamamlanamadı.'));
                    }

                    applyMutation(row, payload);
                    showNotice(String(payload.message || 'İşlem tamamlandı.'), 'success');
                } catch (error) {
                    if (statusSelect) {
                        statusSelect.value = String(row?.dataset.currentStatus || statusSelect.value || '');
                    }

                    if (assigneeEditor && assigneeInput) {
                        assigneeEditor.value = String(assigneeInput.defaultValue || assigneeInput.value || '');
                    }

                    showNotice(String(error.message || 'İşlem tamamlanamadı.'), 'danger');
                } finally {
                    setFormBusy(form, false);
                }
            };

            const submitDelete = async function (form) {
                if (!form) {
                    return;
                }

                const row = form.closest('tr[data-request-id]');
                const submitButton = form.querySelector('button[type="submit"]');

                if (submitButton) {
                    submitButton.disabled = true;
                }

                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        body: new FormData(form),
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (!response.ok) {
                        throw new Error(String(payload.message || 'Talep silinemedi.'));
                    }

                    const oldStatus = String(row?.dataset.currentStatus || '').trim();
                    if (oldStatus !== '') {
                        adjustBadge(oldStatus, -1);
                    }

                    if (row) {
                        row.remove();
                        adjustQueueCount(-1);

                        const remainingRows = tableWrap.querySelectorAll('tbody tr').length;
                        if (remainingRows === 0) {
                            renderEmptyState();
                        }
                    }

                    showNotice(String(payload.message || 'Talep silindi.'), 'success');
                } catch (error) {
                    if (submitButton) {
                        submitButton.disabled = false;
                    }

                    showNotice(String(error.message || 'Talep silinemedi.'), 'danger');
                }
            };

            const submitClaim = async function (form) {
                if (!form) {
                    return;
                }

                const row = form.closest('tr[data-request-id]');
                const submitButton = form.querySelector('button[type="submit"]');

                if (submitButton) {
                    submitButton.disabled = true;
                }

                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        body: new FormData(form),
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (!response.ok) {
                        throw new Error(String(payload.message || 'Talep üstlenilemedi.'));
                    }

                    if (row) {
                        row.remove();
                        adjustBadge('unassigned', -1);
                        adjustQueueCount(-1);

                        const remainingRows = tableWrap.querySelectorAll('tbody tr').length;
                        if (remainingRows === 0) {
                            renderEmptyState();
                        }
                    }

                    showNotice(String(payload.message || 'Talep üstlenildi.'), 'success');
                } catch (error) {
                    if (submitButton) {
                        submitButton.disabled = false;
                    }

                    showNotice(String(error.message || 'Talep üstlenilemedi.'), 'danger');
                }
            };

            pageEl.addEventListener('submit', async (event) => {
                const target = event.target;
                if (!(target instanceof HTMLElement)) {
                    return;
                }

                const form = target.closest('.pd-inline-update-form, .pd-inline-delete-form, .pd-inline-claim-form');
                if (!form) {
                    return;
                }

                if (event.defaultPrevented) {
                    return;
                }

                event.preventDefault();

                if (form.matches('.pd-inline-delete-form')) {
                    await submitDelete(form);
                    return;
                }

                if (form.matches('.pd-inline-claim-form')) {
                    await submitClaim(form);
                    return;
                }

                await submitQuickUpdate(form);
            });

            pageEl.addEventListener('click', (event) => {
                const target = event.target;
                if (!(target instanceof HTMLElement)) {
                    return;
                }

                const deleteButton = target.closest('.pd-delete-icon-btn');
                if (!deleteButton) {
                    return;
                }

                const deleteForm = deleteButton.closest('.pd-inline-delete-form');
                if (!deleteForm) {
                    return;
                }

                event.preventDefault();
                event.stopPropagation();

                if (deleteButton.disabled) {
                    return;
                }

                const confirmMessage = String(
                    deleteButton.getAttribute('data-confirm-message') || 'Bu talep kalıcı olarak silinsin mi?'
                );

                if (!window.confirm(confirmMessage)) {
                    return;
                }

                submitDelete(deleteForm);
            });

            pageEl.addEventListener('change', (event) => {
                const target = event.target;
                if (!(target instanceof HTMLElement)) {
                    return;
                }

                if (!target.matches('.pd-row-assignee-select, .pd-row-status-select, .pd-row-priority-select')) {
                    return;
                }

                const row = target.closest('tr[data-request-id]');
                let form = target.closest('.pd-inline-update-form');
                if (!form && target.matches('.pd-row-assignee-select')) {
                    form = row?.querySelector('.pd-inline-update-form--compact');
                }
                if (!form) {
                    return;
                }

                if (target.matches('.pd-row-assignee-select')) {
                    const assigneeValue = String(target.value || '').trim();
                    const statusSelect = form.querySelector('.pd-row-status-select');
                    const statusHiddenInput = form.querySelector('[data-status-hidden-input]');
                    const currentStatus = String(statusHiddenInput?.value || row?.dataset.currentStatus || '').trim();

                    if (assigneeValue === '') {
                        if (statusSelect) {
                            statusSelect.value = 'unassigned';
                        }
                        if (statusHiddenInput) {
                            statusHiddenInput.value = 'unassigned';
                        }
                    } else if (currentStatus === 'unassigned') {
                        if (statusSelect) {
                            statusSelect.value = 'assigned';
                        }
                        if (statusHiddenInput) {
                            statusHiddenInput.value = 'assigned';
                        }
                    }
                }

                submitQuickUpdate(form);
            });

            pageEl.addEventListener('click', (event) => {
                const target = event.target;
                if (!(target instanceof HTMLElement)) {
                    return;
                }

                if (target.closest('a, button, select, input, form, option')) {
                    return;
                }

                const row = target.closest('tr[data-detail-url]');
                if (!row) {
                    return;
                }

                const detailUrl = String(row.dataset.detailUrl || '').trim();
                if (detailUrl !== '') {
                    if (!window.AdminApp?.navigate?.(detailUrl)) {
                        window.location.assign(detailUrl);
                    }
                }
            });
        })();
    </script>
@endpush