@extends('layouts.app')
@section('title', 'Workflow Bypass')

@push('stylesheets')
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <style>
        .wb-scheme-select2-wrap .select2-container { width: 100% !important; }
        .wb-scheme-select2-wrap .select2-container .select2-selection--single { height: auto; min-height: calc(2.25rem + 2px); }
        .select2-container--open { z-index: 2000; }
        .mws-scheme-kind-badge {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            vertical-align: middle;
            white-space: nowrap;
            margin-left: 0.35rem;
        }
        .select2-results__option .mws-scheme-select2-option { white-space: normal; word-break: break-word; line-height: 1.35; }
        .wb-impact-panel { border: 1px solid #dee2e6; border-radius: .35rem; overflow: hidden; }
        .wb-impact-summary {
            background: #343a40;
            color: #fff;
            padding: .9rem 1.1rem;
        }
        .wb-impact-summary .wb-impact-kicker {
            font-size: .7rem;
            letter-spacing: .04em;
            text-transform: uppercase;
            opacity: .75;
            margin-bottom: .25rem;
        }
        .wb-impact-summary .wb-impact-title { font-size: 1rem; font-weight: 600; margin: 0; }
        .wb-impact-summary .wb-impact-steps { font-size: .85rem; opacity: .9; margin: .45rem 0 0; }
        .wb-impact-body { padding: 1rem 1.1rem; background: #fff; }
        .wb-impact-state {
            display: none;
            padding: 1.25rem 1rem;
            text-align: center;
        }
        .wb-impact-panel.is-loading .wb-impact-state-loading,
        .wb-impact-panel.is-error .wb-impact-state-error,
        .wb-impact-panel.is-blocked .wb-impact-state-blocked,
        .wb-impact-panel.is-ready .wb-impact-state-ready { display: block; }
        .wb-impact-panel.is-loading .wb-impact-state-ready,
        .wb-impact-panel.is-error .wb-impact-state-ready,
        .wb-impact-panel.is-blocked .wb-decision-block,
        .wb-impact-panel.is-loading .wb-decision-block,
        .wb-impact-panel.is-error .wb-decision-block { display: none !important; }
        .wb-highlight-option {
            background: #fff3cd;
            border-radius: .25rem;
            padding: .5rem .65rem;
            margin-left: -.65rem;
            margin-right: -.65rem;
            border: 1px solid #ffc107;
        }
        .wb-impact-skeleton {
            height: .75rem;
            background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
            background-size: 200% 100%;
            animation: wbSkeleton 1.1s ease-in-out infinite;
            border-radius: .25rem;
            margin: .4rem auto;
            max-width: 18rem;
        }
        @keyframes wbSkeleton {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .wb-impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
        @media (max-width: 767.98px) { .wb-impact-grid { grid-template-columns: 1fr; } }
        .wb-impact-card {
            border: 1px solid #e9ecef;
            border-radius: .35rem;
            background: #f8f9fa;
            padding: .75rem .85rem;
            min-height: 5rem;
        }
        .wb-impact-card h6 {
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #6c757d;
            margin: 0 0 .55rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .wb-impact-card .wb-count {
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 999px;
            padding: .05rem .45rem;
            font-size: .72rem;
            color: #495057;
            font-weight: 600;
        }
        .wb-impact-card.wb-impact-card-wide { grid-column: 1 / -1; }
        .wb-impact-list { list-style: none; margin: 0; padding: 0; }
        .wb-impact-list li {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: .3rem;
            padding: .55rem .65rem;
            margin-bottom: .4rem;
        }
        .wb-impact-list li:last-child { margin-bottom: 0; }
        .wb-impact-item-title { font-weight: 600; font-size: .9rem; color: #212529; }
        .wb-impact-item-detail { font-size: .8rem; color: #6c757d; margin-top: .2rem; line-height: 1.35; word-break: break-word; }
        .wb-impact-empty { font-size: .85rem; color: #adb5bd; font-style: italic; }
        .wb-pill {
            display: inline-block;
            font-size: .68rem;
            font-weight: 600;
            border-radius: .25rem;
            padding: .1rem .4rem;
            margin-left: .35rem;
            vertical-align: middle;
        }
        .wb-pill-bypass { background: #fff3cd; color: #856404; }
        .wb-pill-related { background: #e2e3e5; color: #383d41; }
        .wb-pill-real { background: #f8d7da; color: #721c24; }
    </style>
@endpush

@section('contents')
<x-layouts.page-wrapper
    title="Workflow Bypass"
    :breadcrumbs="[
        'Admin Controls' => null,
        'Workflow Bypass' => null,
    ]"
>
    <div class="col-12 col-xl-10 mx-auto">
        <div class="alert alert-warning">
            Only users with the <strong>Workflow Bypass</strong> permission can open this screen.
            Skipping or reverting steps is recorded in Activity Logs and on the form’s forward timeline.
            Revert asks what to do with notifications, reviews, and forwards; it does <strong>not</strong> unapprove BPMS,
            delete MoM/letters/working papers, or unlink meetings (you will be warned when those exist).
        </div>

        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title mb-0">1. Select scheme, ADP No. &amp; UID</h3>
            </div>
            <div class="card-body">
                @php
                    $wbSelectedId = $selected['id'] ?? '';
                    $wbSelectedName = $selected['text'] ?? '';
                    $wbSelectedAdp = ($selected['adp'] ?? '') !== '' ? $selected['adp'] : '—';
                    $wbSelectedUid = ($selected['uid'] ?? '') !== '' ? $selected['uid'] : '—';
                    $wbLookupUrl = route('admin-controls.workflow-bypass.search');
                @endphp
                <div class="row" id="wbSchemeLookupRow">
                    <div class="form-group col-md-6">
                        <label for="wbScheme">Scheme <span class="text-danger">*</span></label>
                        <div class="wb-scheme-select2-wrap">
                            <x-select2-lookup
                                id="wbScheme"
                                name=""
                                :lookupUrl="$wbLookupUrl"
                                lookupType="scheme_name"
                                :selectedValue="$wbSelectedId"
                                :selectedText="$wbSelectedName"
                                placeholder="Search schemes..."
                                :syncOnly="true"
                                :mergeFormParams="false"
                                inputClass="wb-scheme-sync form-control"
                            />
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="wbAdp">ADP No.</label>
                        <div class="wb-scheme-select2-wrap">
                            <x-select2-lookup
                                id="wbAdp"
                                name=""
                                :lookupUrl="$wbLookupUrl"
                                lookupType="adp"
                                :selectedValue="$wbSelectedId"
                                :selectedText="$wbSelectedAdp"
                                placeholder="Enter ADP #..."
                                :syncOnly="true"
                                :mergeFormParams="false"
                                inputClass="wb-scheme-sync form-control"
                            />
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="wbUid">UID</label>
                        <div class="wb-scheme-select2-wrap">
                            <x-select2-lookup
                                id="wbUid"
                                name=""
                                :lookupUrl="$wbLookupUrl"
                                lookupType="uid"
                                :selectedValue="$wbSelectedId"
                                :selectedText="$wbSelectedUid"
                                placeholder="Enter UID..."
                                :syncOnly="true"
                                :mergeFormParams="false"
                                inputClass="wb-scheme-sync form-control"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($snapshot)
            <div class="card card-outline card-success">
                <div class="card-header">
                    <h3 class="card-title mb-0">2. Full flow — {{ $snapshot['label'] }}</h3>
                </div>
                <div class="card-body">
                    <p class="text-muted">Current step: <strong>{{ $snapshot['current_label'] }}</strong></p>
                    @if (! empty($snapshot['forum']))
                        <p class="small mb-3">
                            Workflow stage: <code>{{ $snapshot['forum']['stage'] !== '' ? $snapshot['forum']['stage'] : '—' }}</code>
                            · Actor ID: {{ $snapshot['forum']['actor_id'] > 0 ? $snapshot['forum']['actor_id'] : '—' }}
                            · Modified: {{ ! empty($snapshot['forum']['is_modified']) ? 'yes' : 'no' }}
                            · Forum: {{ $snapshot['forum']['outcome'] !== '' ? $snapshot['forum']['outcome'] : 'none' }}
                            @if (! empty($snapshot['forum']['track']))
                                ({{ $snapshot['forum']['track'] }})
                            @endif
                            @if (! empty($snapshot['forum']['return_only']))
                                · Return-only
                            @endif
                        </p>
                    @endif
                    @if (! empty($snapshot['locked']))
                        <div class="alert alert-info mb-3">{{ $snapshot['locked_reason'] }} Forward skip is locked; you can still use Revert / back below.</div>
                    @else
                        <form method="POST" action="{{ route('admin-controls.workflow-bypass.apply') }}" id="wbApplyForm">
                            @csrf
                            <input type="hidden" name="type" value="{{ $snapshot['type'] }}">
                            <input type="hidden" name="id" value="{{ $snapshot['id'] }}">
                            <p class="small text-muted">Select the step you want to jump <strong>up to</strong> (optional if you only need to record a forum decision that already happened outside PMS). Every unfinished step from the current one through that pointer is skipped. Do <strong>not</strong> skip the forum step when the scheme is already at Concerned Section — record Modification Required only.</p>
                            <ul class="list-group mb-3">
                                @foreach ($snapshot['steps'] as $step)
                                    @php
                                        $status = $step['status'];
                                        $canSkip = $status !== 'done' && empty($snapshot['locked']);
                                    @endphp
                                    <li class="list-group-item d-flex align-items-start {{ $canSkip ? 'wb-pointer-row' : '' }}" @if ($canSkip) data-wb-pointer="{{ $step['key'] }}" style="cursor: pointer;" @endif>
                                        <div class="custom-control custom-radio mr-3">
                                            @if ($canSkip)
                                                <input type="radio"
                                                       class="custom-control-input"
                                                       id="skip-{{ $step['key'] }}"
                                                       name="skip"
                                                       value="{{ $step['key'] }}"
                                                       @disabled(! $canApply)>
                                                <label class="custom-control-label" for="skip-{{ $step['key'] }}"></label>
                                            @else
                                                <span class="text-muted"><i class="fas fa-check text-success"></i></span>
                                            @endif
                                        </div>
                                        <div>
                                            <div class="font-weight-bold">{{ $step['label'] }}</div>
                                            @if (! empty($step['sublabel']))
                                                <div class="small text-muted wb-step-sublabel">{{ $step['sublabel'] }}</div>
                                            @endif
                                            <div class="small text-muted">
                                                @if ($status === 'done') Completed
                                                @elseif ($status === 'current') Current — select a pointer at or after this step
                                                @else Pending
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="form-group">
                                <label>Forum decision (meetings not in PMS)</label>
                                <p class="small text-muted mb-2">Stamps Approved, Deferred, or Modification Required, sets the live track, current actor, and enabled actions. For ADP schemes already at Concerned Section after an off-system modification, choose <strong>Modification Required</strong> without skipping steps.</p>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="wbForumNone" name="forum_outcome" value="" class="custom-control-input" @checked(old('forum_outcome', '') === '') @disabled(! $canApply)>
                                    <label class="custom-control-label" for="wbForumNone">No extra forum stamp (skip steps only)</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="wbForumApproved" name="forum_outcome" value="approved" class="custom-control-input" @checked(old('forum_outcome') === 'approved') @disabled(! $canApply)>
                                    <label class="custom-control-label" for="wbForumApproved">Approved — Concerned Chief, then Advice/Concurrence</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="wbForumDeferred" name="forum_outcome" value="deferred" class="custom-control-input" @checked(old('forum_outcome') === 'deferred') @disabled(! $canApply)>
                                    <label class="custom-control-label" for="wbForumDeferred">Deferred — department Return-only inbound</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="wbForumMod" name="forum_outcome" value="modification_required" class="custom-control-input" @checked(old('forum_outcome') === 'modification_required') @disabled(! $canApply)>
                                    <label class="custom-control-label" for="wbForumMod">Modification Required — mark modified; keep actor if already at Concerned Section</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Forum type (when no meeting is linked)</label>
                                <select name="forum_meeting_type" class="form-control" @disabled(! $canApply)>
                                    <option value="pdwp" @selected(old('forum_meeting_type', 'pdwp') === 'pdwp')>PDWP</option>
                                    <option value="ddwp" @selected(old('forum_meeting_type') === 'ddwp')>DDWP</option>
                                    <option value="pre-pdwp" @selected(old('forum_meeting_type') === 'pre-pdwp')>Pre-PDWP</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="wbRemarks">Remarks (required, stored in activity log)</label>
                                <textarea id="wbRemarks" name="remarks" class="form-control" rows="3" required minlength="3" @disabled(! $canApply)>{{ old('remarks') }}</textarea>
                            </div>
                            @if ($canApply)
                                <button type="submit" class="btn btn-primary">Apply skip / forum decision</button>
                            @else
                                <p class="text-muted mb-0">You can view this screen but do not have <strong>Skip / bypass / revert steps</strong> permission.</p>
                            @endif
                        </form>
                    @endif
                </div>
            </div>

            @if (! empty($snapshot['can_revert']))
                <div class="card card-outline card-warning mt-3">
                    <div class="card-header">
                        <h3 class="card-title mb-0">3. Revert / back</h3>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted">Choose where the scheme should <strong>wait next</strong> (become Current again). After you pick a step, we show what will be cleaned up — then you decide what to keep or remove.</p>
                        <form method="POST" action="{{ route('admin-controls.workflow-bypass.revert') }}" id="wbRevertForm">
                            @csrf
                            <input type="hidden" name="type" value="{{ $snapshot['type'] }}">
                            <input type="hidden" name="id" value="{{ $snapshot['id'] }}">
                            <ul class="list-group mb-3" id="wbRevertSteps">
                                @foreach ($snapshot['steps'] as $step)
                                    @php
                                        $status = $step['status'];
                                        $canTarget = $status === 'done' || (! empty($snapshot['locked']) && $status === 'current');
                                    @endphp
                                    <li class="list-group-item d-flex align-items-start {{ $canTarget ? 'wb-revert-row' : '' }}"
                                        @if ($canTarget) data-wb-revert="{{ $step['key'] }}" style="cursor: pointer;" @endif>
                                        <div class="custom-control custom-radio mr-3">
                                            @if ($canTarget)
                                                <input type="radio"
                                                       class="custom-control-input wb-revert-target"
                                                       id="revert-{{ $step['key'] }}"
                                                       name="target"
                                                       value="{{ $step['key'] }}"
                                                       required
                                                       @disabled(! $canApply)>
                                                <label class="custom-control-label" for="revert-{{ $step['key'] }}"></label>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </div>
                                        <div>
                                            <div class="font-weight-bold">{{ $step['label'] }}</div>
                                            @if (! empty($step['sublabel']))
                                                <div class="small text-muted wb-step-sublabel">{{ $step['sublabel'] }}</div>
                                            @endif
                                            <div class="small text-muted font-monospace" style="font-size: 0.7rem;">{{ $step['key'] }}</div>
                                            <div class="small text-muted">
                                                @if ($status === 'done') Finished — can wait here again
                                                @elseif ($status === 'current') Waiting here now
                                                @else Not reached yet
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>

                            <div id="wbRevertImpact" class="wb-impact-panel d-none mb-3">
                                <div class="wb-impact-summary" id="wbRevertSummary">
                                    <div class="wb-impact-kicker">Revert preview</div>
                                    <p class="wb-impact-title mb-0" id="wbRevertSummaryTitle">Select a step to preview impact</p>
                                    <p class="wb-impact-steps mb-0" id="wbRevertSummarySteps"></p>
                                </div>
                                <div class="wb-impact-body">
                                    <div class="wb-impact-state wb-impact-state-loading">
                                        <div class="spinner-border text-secondary mb-2" role="status" style="width:1.75rem;height:1.75rem;">
                                            <span class="sr-only">Loading</span>
                                        </div>
                                        <div class="font-weight-bold text-secondary">Checking what will change…</div>
                                        <div class="wb-impact-skeleton mt-3"></div>
                                        <div class="wb-impact-skeleton" style="max-width:12rem;"></div>
                                        <div class="wb-impact-skeleton" style="max-width:15rem;"></div>
                                    </div>
                                    <div class="wb-impact-state wb-impact-state-error">
                                        <div class="text-danger font-weight-bold mb-1"><i class="fas fa-exclamation-circle"></i> Could not load preview</div>
                                        <div class="small text-muted" id="wbImpactErrorText">Something went wrong. Try selecting the step again.</div>
                                    </div>
                                    <div class="wb-impact-state wb-impact-state-blocked">
                                        <div class="alert alert-danger mb-2" id="wbImpactBlockedText"></div>
                                        <div class="small text-muted">Resolve the blocker above, or choose a later target step.</div>
                                    </div>
                                    <div class="wb-impact-state wb-impact-state-ready">
                                        <div id="wbLeftoverWarnings"></div>
                                        <div id="wbImpactDetails" class="mb-0"></div>
                                    </div>
                                </div>
                                <div class="card card-body bg-light mb-0 border-0 border-top wb-decision-block" id="wbDecisionPanel">
                                    <h5 class="mb-2">What should we remove?</h5>
                                    <p class="small text-muted mb-3">Items created by an admin skip are removed by default. Normal workflow history stays unless you tick those options.</p>
                                    <div class="form-group mb-2">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="remove_bypass_reviews" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decBypassReviews" name="remove_bypass_reviews" value="1" checked>
                                            <label class="custom-control-label" for="decBypassReviews">Remove <strong>bypass-created</strong> approval stamps</label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-2">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="remove_real_reviews" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decRealReviews" name="remove_real_reviews" value="1">
                                            <label class="custom-control-label" for="decRealReviews">Also remove <strong>real</strong> approval stamps in this range <span class="text-danger">(careful)</span></label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-2">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="remove_bypass_forwards" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decBypassForwards" name="remove_bypass_forwards" value="1" checked>
                                            <label class="custom-control-label" for="decBypassForwards">Remove <strong>bypass</strong> timeline entries</label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-2">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="remove_real_forwards" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decRealForwards" name="remove_real_forwards" value="1">
                                            <label class="custom-control-label" for="decRealForwards">Also remove <strong>real</strong> timeline entries in this range</label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-2" id="decNotificationsWrap">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="remove_notifications" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decNotifications" name="remove_notifications" value="1" checked>
                                            <label class="custom-control-label" for="decNotifications">Delete related in-app notifications</label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-2 d-none" id="decMeetingLinkedWrap">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="clear_meeting_linked_at" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decMeetingLinked" name="clear_meeting_linked_at" value="1">
                                            <label class="custom-control-label" for="decMeetingLinked">Clear “meeting linked” timestamp <span class="text-muted">(does not unlink meetings)</span></label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-2 d-none" id="decClearedWrap">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="clear_cleared_for_cdwp_at" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decCleared" name="clear_cleared_for_cdwp_at" value="1">
                                            <label class="custom-control-label" for="decCleared">Clear “cleared for CDWP” timestamp</label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0 d-none" id="decRestoreDraftWrap">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="restore_draft" value="0">
                                            <input type="checkbox" class="custom-control-input" id="decRestoreDraft" name="restore_draft" value="1">
                                            <label class="custom-control-label" for="decRestoreDraft">Restore as draft (clear submitted status)</label>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="form-group mb-2">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="wbConfirmHistory" name="confirm_real_history" value="1" @disabled(! $canApply)>
                                            <label class="custom-control-label" for="wbConfirmHistory">I understand this may remove real workflow history.</label>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0 d-none" id="wbAckLeftoversWrap">
                                        <div class="custom-control custom-checkbox">
                                            <input type="hidden" name="acknowledge_leftovers" value="0">
                                            <input type="checkbox" class="custom-control-input" id="wbAckLeftovers" name="acknowledge_leftovers" value="1" @disabled(! $canApply)>
                                            <label class="custom-control-label" for="wbAckLeftovers">I understand meetings / MoM / letters / BPMS are <strong>not</strong> changed by this revert and may need separate action.</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="wbRevertRemarks">Remarks (required, stored in activity log)</label>
                                <textarea id="wbRevertRemarks" name="remarks" class="form-control" rows="3" required minlength="3" @disabled(! $canApply)>{{ old('remarks') }}</textarea>
                            </div>
                            @if ($canApply)
                                <button type="submit" class="btn btn-warning" id="wbRevertSubmit" disabled>Revert to selected step</button>
                            @else
                                <p class="text-muted mb-0">You can view this screen but do not have <strong>Skip / bypass / revert steps</strong> permission.</p>
                            @endif
                        </form>
                    </div>
                </div>
            @endif
        @endif
    </div>
</x-layouts.page-wrapper>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
(function () {
    if (!window.jQuery || typeof jQuery.fn.select2 === 'undefined') {
        return;
    }
    var indexUrl = @json(route('admin-controls.workflow-bypass.index'));
    var impactUrl = @json(route('admin-controls.workflow-bypass.impact'));
    var lookupUrl = @json(route('admin-controls.workflow-bypass.search'));
    var selectedKind = @json($selected['kind_mark'] ?? '');
    var syncing = false;
    var lookupsReady = false;

    function badgeClass(mark) {
        var m = String(mark || '').toUpperCase();
        if (m === 'PCN' || m === 'CCP') return 'badge badge-warning mws-scheme-kind-badge';
        if (m === 'PC-II') return 'badge badge-info mws-scheme-kind-badge';
        if (m === 'PC-I') return 'badge badge-primary mws-scheme-kind-badge';
        return 'badge badge-secondary mws-scheme-kind-badge';
    }

    function itemKind(item) {
        if (!item) return '';
        return item.kind_mark || (item.element ? (jQuery(item.element).data('kindMark') || item.element.getAttribute('data-kind-mark') || '') : '') || '';
    }

    function optionHtml(item) {
        if (!item.id) return item.text;
        var mark = itemKind(item);
        var $wrap = jQuery('<span class="mws-scheme-select2-option"></span>').attr('title', String(item.text || '') + (mark ? ' [' + mark + ']' : ''));
        $wrap.append(document.createTextNode(item.text || ''));
        if (mark) {
            $wrap.append(jQuery('<span></span>').addClass(badgeClass(mark)).text(mark));
        }
        return $wrap;
    }

    function labelForLookupType(lookupType, item) {
        if (!item) return '';
        if (lookupType === 'adp') return item.adp_number || item.text || '—';
        if (lookupType === 'uid') return item.uid || item.code || item.text || '—';
        return item.name || item.text || '—';
    }

    function goToKey(id) {
        if (!id) {
            window.location = indexUrl;
            return;
        }
        var parts = String(id).split(':');
        if (parts.length !== 2) return;
        window.location = indexUrl + '?type=' + encodeURIComponent(parts[0]) + '&id=' + encodeURIComponent(parts[1]);
    }

    function setSyncValue($sel, id, itemData) {
        if (!$sel || !$sel.length) return;
        var pid = id ? String(id) : '';
        if (pid === '') {
            $sel.val(null).trigger('change.select2');
            return;
        }
        if (!$sel.find('option').filter(function () { return String(this.value) === pid; }).length) {
            var lookupType = $sel.data('lookup-type') || 'scheme_name';
            var label = labelForLookupType(lookupType, itemData || {});
            var $opt = new Option(label, pid, true, true);
            if (itemData) {
                jQuery($opt).data('select2Data', itemData);
                if (itemData.kind_mark) {
                    jQuery($opt).attr('data-kind-mark', itemData.kind_mark);
                }
            }
            $sel.append($opt);
        }
        $sel.val(pid).trigger('change.select2');
    }

    function wbInitLookup($el) {
        if (!$el || !$el.length) return;
        if ($el.hasClass('select2-hidden-accessible')) {
            try { $el.select2('destroy'); } catch (e) {}
        }

        var lookupType = $el.data('lookup-type') || 'scheme_name';
        var selectedVal = $el.data('selected-value');
        var selectedTxt = $el.data('selected-text') || '';
        var placeholder = $el.data('placeholder') || 'Search...';
        var allowClear = $el.data('allow-clear') !== false;

        $el.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: placeholder,
            allowClear: allowClear,
            dropdownParent: jQuery(document.body),
            templateResult: optionHtml,
            templateSelection: optionHtml,
            language: {
                searching: function () { return 'Loading schemes…'; },
                loadingMore: function () { return 'Loading more schemes…'; },
                inputTooShort: function () { return 'Type to search schemes'; },
                noResults: function () { return 'No schemes found'; },
                errorLoading: function () { return 'Could not load schemes'; }
            },
            ajax: {
                url: lookupUrl,
                type: 'GET',
                dataType: 'json',
                delay: 250,
                data: function (s2p) {
                    return {
                        lookup_type: lookupType,
                        search: s2p.term || '',
                        page: s2p.page || 1
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.data || [],
                        pagination: { more: !!(data.pagination && data.pagination.more) }
                    };
                },
                cache: true
            }
        });

        if (selectedVal !== undefined && selectedVal !== null && selectedVal !== '' && selectedVal !== 'null') {
            var label = selectedTxt || String(selectedVal);
            var $opt = new Option(label, selectedVal, true, true);
            if (selectedKind) {
                jQuery($opt).attr('data-kind-mark', selectedKind);
            }
            $el.append($opt).trigger('change.select2');
        }
    }

    jQuery(function () {
        var $sync = jQuery('#wbScheme, #wbAdp, #wbUid');
        $sync.each(function () {
            wbInitLookup(jQuery(this));
        });
        lookupsReady = true;

        $sync.on('change.wbSync select2:select.wbSync select2:clear.wbSync', function (e) {
            if (syncing) return;
            var $this = jQuery(this);
            var id = String($this.val() || '');
            var itemData = null;
            if (id !== '') {
                var $selectedOption = $this.find('option:selected');
                if ($selectedOption.length && $selectedOption.data('select2Data')) {
                    itemData = $selectedOption.data('select2Data');
                } else {
                    var s2data = $this.select2('data');
                    if (s2data && s2data.length > 0) {
                        itemData = s2data[0];
                    }
                }
            }

            syncing = true;
            try {
                $sync.not(this).each(function () {
                    setSyncValue(jQuery(this), id, itemData);
                });
            } finally {
                syncing = false;
            }

            if (!lookupsReady) {
                return;
            }
            if (e.type === 'select2:clear') {
                goToKey('');
                return;
            }
            if (e.type === 'select2:select' && id) {
                goToKey(id);
            }
        });
    });

    document.querySelectorAll('.wb-pointer-row').forEach(function (row) {
        row.addEventListener('click', function (e) {
            if (e.target.closest('input, label')) {
                return;
            }
            var key = row.getAttribute('data-wb-pointer');
            var input = key ? document.getElementById('skip-' + key) : null;
            if (input && !input.disabled) {
                input.checked = true;
            }
        });
    });

    var applyForm = document.getElementById('wbApplyForm');
    if (applyForm) {
        applyForm.addEventListener('submit', function (e) {
            var skip = applyForm.querySelector('input[name="skip"]:checked');
            var forum = applyForm.querySelector('input[name="forum_outcome"]:checked');
            var outcome = forum ? String(forum.value || '') : '';
            if (!skip && outcome === '') {
                e.preventDefault();
                window.alert('Select a step to skip, or record a forum decision.');
            }
        });
    }

    document.querySelectorAll('.wb-revert-row').forEach(function (row) {
        row.addEventListener('click', function (e) {
            if (e.target.closest('input, label')) {
                return;
            }
            var key = row.getAttribute('data-wb-revert');
            var input = key ? document.getElementById('revert-' + key) : null;
            if (input && !input.disabled) {
                input.checked = true;
                input.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    });

    var revertForm = document.getElementById('wbRevertForm');
    if (revertForm) {
        revertForm.addEventListener('submit', function (e) {
            var targetInput = revertForm.querySelector('input[name="target"]:checked');
            if (!targetInput) {
                e.preventDefault();
                window.alert('Select the step the scheme should wait at after revert.');
                return;
            }
            var row = targetInput.closest('.list-group-item');
            var title = row ? row.querySelector('.font-weight-bold') : null;
            var subEl = row ? row.querySelector('.wb-step-sublabel') : null;
            var label = title ? title.textContent.trim() : targetInput.value;
            var sublabel = subEl ? subEl.textContent.trim() : '';
            var msg = 'Revert this scheme to wait at:\n\n• ' + label
                + (sublabel ? '\n  (' + sublabel + ')' : '')
                + '\n• Step key: ' + targetInput.value
                + '\n\nContinue?';
            if (!window.confirm(msg)) {
                e.preventDefault();
            }
        });
    }

    function esc(s) {
        return String(s == null ? '' : s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function setImpactState(state) {
        var panel = document.getElementById('wbRevertImpact');
        if (!panel) return;
        panel.classList.remove('d-none', 'is-loading', 'is-error', 'is-blocked', 'is-ready');
        panel.classList.add('is-' + state);
    }

    function setSummary(title, stepsHtml) {
        var t = document.getElementById('wbRevertSummaryTitle');
        var s = document.getElementById('wbRevertSummarySteps');
        if (t) t.textContent = title || '';
        if (s) s.innerHTML = stepsHtml || '';
    }

    function impactCard(title, count, itemsHtml, wide) {
        return '<div class="wb-impact-card' + (wide ? ' wb-impact-card-wide' : '') + '">' +
            '<h6><span>' + esc(title) + '</span><span class="wb-count">' + esc(String(count)) + '</span></h6>' +
            itemsHtml +
            '</div>';
    }

    function listItems(items, emptyLabel, pillClass, pillLabel) {
        if (!items || !items.length) {
            return '<div class="wb-impact-empty">' + esc(emptyLabel) + '</div>';
        }
        return '<ul class="wb-impact-list">' + items.map(function (it) {
            var title = it.title || it.action || it.type || it.workflow_stage || 'Item';
            var detail = it.detail || it.remarks || '';
            if (!detail && it.source_label) detail = it.source_label;
            var cls = pillClass || 'wb-pill-related';
            var label = pillLabel || it.classification_label || '';
            if (!pillLabel && it.classification === 'bypass') {
                cls = 'wb-pill-bypass';
                label = it.classification_label || 'From bypass';
            } else if (!pillLabel && it.classification === 'related') {
                cls = 'wb-pill-related';
                label = it.classification_label || 'Related';
            }
            var pill = label ? ' <span class="wb-pill ' + esc(cls) + '">' + esc(label) + '</span>' : '';
            return '<li>' +
                '<div class="wb-impact-item-title">' + esc(title) + pill + '</div>' +
                (detail ? '<div class="wb-impact-item-detail">' + esc(detail) + '</div>' : '') +
                '</li>';
        }).join('') + '</ul>';
    }

    function setChecked(id, on) {
        var el = document.getElementById(id);
        if (el) el.checked = !!on;
    }

    function toggleWrap(id, show) {
        var el = document.getElementById(id);
        if (!el) return;
        if (show) el.classList.remove('d-none');
        else el.classList.add('d-none');
    }

    function renderImpact(data) {
        var panel = document.getElementById('wbRevertImpact');
        var submit = document.getElementById('wbRevertSubmit');
        if (!panel) return;

        var toLabel = data.to_label || data.to || 'selected step';
        var fromLabel = data.from_label || data.from || '—';
        var reopen = (data.unwind_labels || []).slice();
        var reopenText = reopen.length ? reopen.join(', ') : 'none';
        setSummary(
            'Wait again at “' + toLabel + '”',
            'Target step: <code class="text-white">' + esc(data.to || '') + '</code><br>' +
            'Now waiting at <strong>' + esc(fromLabel) + '</strong>.<br>' +
            'After revert, the scheme will wait at <strong>' + esc(toLabel) + '</strong> again ' +
            '(that step is no longer treated as finished).<br>' +
            '<span class="text-white-50">Steps reopened: ' + esc(reopenText) + '</span>'
        );

        var leftovers = data.leftover_warnings || [];
        var blockers = (data.blockers && data.blockers.length) ? data.blockers : leftovers.filter(function (w) {
            return w.severity === 'blocker';
        });
        var warningsOnly = leftovers.filter(function (w) { return w.severity !== 'blocker'; });

        if (data.can_apply === false || blockers.length) {
            setImpactState('blocked');
            var blockedEl = document.getElementById('wbImpactBlockedText');
            if (blockedEl) {
                blockedEl.innerHTML = blockers.map(function (w) {
                    return '<div class="mb-2"><strong>' + esc(w.title || 'Cannot revert here') + '</strong><br>' + esc(w.detail || '') + '</div>';
                }).join('') || 'This target cannot be reached with the current linked meetings or kept history.';
            }
            if (submit) submit.disabled = true;
            return;
        }

        setImpactState('ready');

        var lw = document.getElementById('wbLeftoverWarnings');
        if (!warningsOnly.length) {
            lw.innerHTML = '';
            toggleWrap('wbAckLeftoversWrap', leftovers.length > 0);
            var ack = document.getElementById('wbAckLeftovers');
            if (ack) {
                ack.required = leftovers.length > 0;
                if (!leftovers.length) ack.checked = false;
            }
        } else {
            lw.innerHTML = warningsOnly.map(function (w) {
                return '<div class="alert alert-warning"><strong>' + esc(w.title) + '</strong><br>' + esc(w.detail) + '</div>';
            }).join('');
            toggleWrap('wbAckLeftoversWrap', true);
            var ack2 = document.getElementById('wbAckLeftovers');
            if (ack2) { ack2.required = true; ack2.checked = false; }
        }
        if (leftovers.length && !warningsOnly.length) {
            toggleWrap('wbAckLeftoversWrap', true);
            var ack3 = document.getElementById('wbAckLeftovers');
            if (ack3) { ack3.required = true; }
        }

        var bypassReviews = (data.reviews && data.reviews.bypass) || [];
        var realReviews = (data.reviews && data.reviews.real) || [];
        var bypassForwards = (data.forwards && data.forwards.bypass) || [];
        var realForwards = (data.forwards && data.forwards.real) || [];
        var notifications = data.notifications || [];

        var details = document.getElementById('wbImpactDetails');
        details.innerHTML = '<div class="wb-impact-grid">' +
            impactCard('Admin skip — approval stamps', bypassReviews.length, listItems(bypassReviews, 'None from admin skip', 'wb-pill-bypass', 'Admin skip'), false) +
            impactCard('Normal workflow — approvals', realReviews.length, listItems(realReviews, 'None in this range', 'wb-pill-real', 'Normal'), false) +
            impactCard('Admin skip — timeline notes', bypassForwards.length, listItems(bypassForwards, 'None from admin skip', 'wb-pill-bypass', 'Admin skip'), false) +
            impactCard('Normal workflow — timeline', realForwards.length, listItems(realForwards, 'None in this range', 'wb-pill-real', 'Normal'), false) +
            impactCard('Alerts already sent to users', notifications.length, listItems(notifications, 'No alerts to clean up', 'wb-pill-related', null), true) +
            '</div>';

        var d = data.defaults || {};
        var o = data.offers || {};
        setChecked('decBypassReviews', d.remove_bypass_reviews !== false);
        setChecked('decRealReviews', !!d.remove_real_reviews);
        setChecked('decBypassForwards', d.remove_bypass_forwards !== false);
        setChecked('decRealForwards', !!d.remove_real_forwards);
        setChecked('decNotifications', d.remove_notifications !== false);
        setChecked('decMeetingLinked', !!d.clear_meeting_linked_at);
        setChecked('decCleared', !!d.clear_cleared_for_cdwp_at);
        setChecked('decRestoreDraft', !!d.restore_draft);

        var realFwdRow = document.getElementById('decRealForwards');
        var realFwdGroup = realFwdRow ? realFwdRow.closest('.form-group') : null;
        if (realFwdGroup) {
            realFwdGroup.classList.toggle('wb-highlight-option', !!data.suggest_remove_real_forwards);
        }
        if (data.suggest_remove_real_forwards) {
            var decisionPanel = document.getElementById('wbDecisionPanel');
            if (decisionPanel) {
                setTimeout(function () {
                    decisionPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }, 100);
            }
        }

        toggleWrap('decNotificationsWrap', o.notifications !== false);
        toggleWrap('decMeetingLinkedWrap', !!o.clear_meeting_linked_at);
        toggleWrap('decClearedWrap', !!o.clear_cleared_for_cdwp_at);
        toggleWrap('decRestoreDraftWrap', !!o.restore_draft);

        if (submit) {
            submit.disabled = false;
        }
        var confirmHistory = document.getElementById('wbConfirmHistory');
        if (confirmHistory) {
            confirmHistory.required = true;
            confirmHistory.checked = false;
        }
    }

    var impactRequestSeq = 0;
    document.querySelectorAll('.wb-revert-target').forEach(function (input) {
        input.addEventListener('change', function () {
            if (!input.checked) return;
            var form = document.getElementById('wbRevertForm');
            if (!form) return;
            var type = form.querySelector('input[name="type"]').value;
            var id = form.querySelector('input[name="id"]').value;
            var target = input.value;
            var panel = document.getElementById('wbRevertImpact');
            var submit = document.getElementById('wbRevertSubmit');
            if (submit) submit.disabled = true;

            if (panel) {
                panel.classList.remove('d-none');
                setImpactState('loading');
                setSummary('Checking what will change…', 'Looking up approval stamps, timeline notes, and alerts for this move.');
                var lw = document.getElementById('wbLeftoverWarnings');
                var details = document.getElementById('wbImpactDetails');
                if (lw) lw.innerHTML = '';
                if (details) details.innerHTML = '';
                toggleWrap('wbAckLeftoversWrap', false);
            }

            var seq = ++impactRequestSeq;
            fetch(impactUrl + '?type=' + encodeURIComponent(type) + '&id=' + encodeURIComponent(id) + '&target=' + encodeURIComponent(target), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            }).then(function (res) {
                return res.json().then(function (body) {
                    if (!res.ok) throw new Error((body && body.error) || 'Could not load impact');
                    return body;
                });
            }).then(function (data) {
                if (seq !== impactRequestSeq) return;
                renderImpact(data);
            }).catch(function (err) {
                if (seq !== impactRequestSeq) return;
                setImpactState('error');
                setSummary('Preview failed', 'Select the step again, or refresh the page.');
                var errEl = document.getElementById('wbImpactErrorText');
                if (errEl) errEl.textContent = String(err.message || err || 'Something went wrong.');
                if (submit) submit.disabled = true;
            });
        });
    });
})();
</script>
@endpush