@extends('layouts.webphone')

@push('style')
<style>
 html, body {
     height: 100%;
     width: 100%;
     margin: 0;
 }
 html body .wp-standalone-wrapper {
     width: 100vw !important;
     max-width: 100vw !important;
     margin: 0 !important;
     padding: 4px 6px !important;
     height: 100vh !important;
     min-height: 100vh !important;
     box-sizing: border-box !important;
     overflow: hidden !important;
     background: #e9edf4;
 }
 body .main-wrapper,
 body .page-wrapper,
 body .page-content,
 .wp-standalone-wrapper,
 .wp-standalone-content,
 .container-fluid.py-4 {
     height: 100%;
     min-height: 100%;
 }
 .container-fluid.py-4 {
     max-width: 100% !important;
     padding: 0 !important;
 }
 .operator-shell {
     height: 100%;
     min-height: calc(100vh - 8px);
     display: grid;
     grid-template-rows: auto auto auto minmax(0, 1fr) auto;
     gap: 6px;
     width: 100%;
     overflow: hidden;
     color: #1f2937;
     font-size: 12px;
 }
 .operator-topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 6px 10px;
     border: 1px solid #b7c4d6;
     background: linear-gradient(180deg, #f9fbfe 0%, #dfe8f5 100%);
     color: #1e3a5f;
     border-radius: 4px;
 }
 .operator-brand {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 700;
 }
 .operator-brand-mark {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #1f4f8d;
     color: #fff;
     font-size: 13px;
 }
 .operator-top-actions {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 .operator-toolstrip {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 6px 8px;
     border: 1px solid #c6d2e1;
     background: #f8fbff;
     border-radius: 4px;
     overflow-x: auto;
 }
 .operator-tool-btn {
     min-width: 34px;
     height: 30px;
     border: 1px solid #b8c7da;
     border-radius: 4px;
     background: linear-gradient(180deg, #ffffff 0%, #e4edf7 100%);
     color: #1f4f8d;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 .operator-summary-strip {
     display: grid;
     grid-template-columns: 120px repeat(4, minmax(0, 1fr));
     gap: 6px;
     align-items: stretch;
 }
 .operator-summary-box,
 .operator-strip-box {
     border: 1px solid #bfccdb;
     border-radius: 4px;
     background: #fff;
     min-height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
 }
 .operator-strip-box.internal {
     background: linear-gradient(180deg, #e33b46 0%, #c91f2f 100%);
     color: #fff;
 }
 .operator-strip-box.park {
     background: linear-gradient(180deg, #71dd73 0%, #45b649 100%);
     color: #103d11;
 }
 .operator-strip-box.external {
     background: linear-gradient(180deg, #ffb08a 0%, #ff8a5a 100%);
     color: #5f2508;
 }
 .operator-main-grid {
     min-height: 0;
     display: grid;
     grid-template-columns: minmax(0, 1.45fr) minmax(290px, .9fr);
     gap: 6px;
     overflow: hidden;
 }
 .operator-left-grid {
     min-height: 0;
     display: grid;
     grid-template-rows: 118px 52px 178px minmax(0, 1fr);
     gap: 6px;
     overflow: hidden;
 }
 .operator-right-grid {
     min-height: 0;
     display: grid;
     grid-template-rows: 160px 96px;
     gap: 6px;
     overflow: hidden;
 }
 .operator-panel {
     min-height: 0;
     display: flex;
     flex-direction: column;
     border: 1px solid #b9c8da;
     border-radius: 4px;
     background: #fff;
     overflow: hidden;
 }
 .operator-panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     padding: 5px 8px;
     border-bottom: 1px solid #ccd8e6;
     background: linear-gradient(180deg, #f8fbff 0%, #e6eef8 100%);
     color: #284d73;
     font-weight: 700;
 }
 .operator-panel-body {
     min-height: 0;
     flex: 1;
     overflow: auto;
     background: #fff;
 }
 .operator-browser-workflow {
     display: grid;
     grid-template-columns: minmax(240px, .95fr) minmax(0, 1.25fr);
     gap: 10px;
     padding: 10px;
     min-height: 156px;
     align-items: stretch;
     overflow: hidden;
 }
 .operator-incoming-card {
     border: 1px solid #c8d5e5;
     border-radius: 4px;
     background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
     padding: 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 6px;
 }
 .operator-incoming-card.is-ringing {
     border-color: #dc3545;
     box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.15);
 }
 .operator-incoming-title {
     font-size: 11px;
     font-weight: 700;
     color: #46688d;
     text-transform: uppercase;
 }
 .operator-incoming-caller {
     font-size: 24px;
     font-weight: 700;
     color: #1f4f8d;
     line-height: 1.05;
 }
 .operator-incoming-meta {
     color: #6b7280;
     font-size: 12px;
 }
 .operator-browser-dialpad {
     display: flex;
     flex-direction: column;
     gap: 8px;
     justify-content: center;
 }
 .operator-queue-table,
 .operator-directory-table {
     width: 100%;
     border-collapse: collapse;
 }
 .operator-queue-table th,
 .operator-queue-table td,
 .operator-directory-table th,
 .operator-directory-table td {
     padding: 4px 6px;
     border-bottom: 1px solid #dde5f0;
     white-space: nowrap;
 }
 .operator-queue-table th,
 .operator-directory-table th {
     position: sticky;
     top: 0;
     z-index: 1;
     background: #eef4fb;
     color: #46688d;
     font-size: 11px;
 }
 .operator-focus-grid {
     min-height: 0;
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
     height: 100%;
 }
 .operator-focus-left,
 .operator-focus-right {
     padding: 10px 12px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 6px;
 }
 .operator-focus-left {
     border-right: 2px solid #254d7a;
 }
 .operator-focus-right {
     background: #b9c8da;
 }
 .operator-focus-name {
     font-size: 28px;
     line-height: 1.05;
     font-weight: 700;
     color: #17324c;
 }
 .operator-focus-number {
     font-size: 26px;
     line-height: 1.05;
     font-weight: 700;
     color: #102a43;
     align-self: flex-end;
 }
 .operator-focus-state {
     color: #486581;
     font-weight: 700;
 }
 .operator-search-row {
     display: grid;
     grid-template-columns: 98px minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.1fr) 124px;
     gap: 6px;
     align-items: center;
     padding: 6px;
     border: 1px solid #c7d3e3;
     border-radius: 4px;
     background: #f7fbff;
 }
 .operator-search-row .form-control,
 .operator-dial-input,
 .operator-transfer-input {
     min-height: 29px;
     border-color: #b8c7da;
     border-radius: 3px;
     font-size: 12px;
 }
 .operator-detail-grid {
     min-height: 0;
     display: grid;
     grid-template-columns: minmax(220px, .8fr) minmax(0, 1.25fr);
     height: 100%;
 }
 .operator-contact-card {
     border-right: 1px solid #d7e0eb;
     padding: 10px;
 }
 .operator-contact-name {
     font-size: 14px;
     font-weight: 700;
     color: #17324c;
 }
 .operator-contact-state {
     margin-top: 4px;
     color: #d62839;
     font-weight: 700;
 }
 .operator-detail-table {
     width: 100%;
     border-collapse: collapse;
 }
 .operator-detail-table td,
 .operator-detail-table th {
     padding: 5px 6px;
     border: 1px solid #dde5f0;
     font-size: 11px;
 }
 .operator-detail-table th {
     background: #eef4fb;
     color: #46688d;
 }
 .operator-blf-grid {
     padding: 6px;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 5px;
 }
 .operator-blf-tile {
     min-height: 52px;
     border: 1px solid #b9c8da;
     border-top: 4px solid #95a8be;
     background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
     border-radius: 3px;
     padding: 4px;
     text-align: center;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 2px;
 }
 .operator-blf-tile.online { border-top-color: #27ae60; }
 .operator-blf-tile.busy { border-top-color: #d62839; }
 .operator-blf-tile.ringing { border-top-color: #f39c12; }
 .operator-blf-tile.transfer-armed {
     box-shadow: inset 0 0 0 2px rgba(243, 156, 18, .45);
 }
 .operator-blf-extension {
     font-weight: 700;
     color: #16324d;
 }
 .operator-blf-state {
     font-size: 10px;
     color: #5d7288;
 }
 .operator-parking-grid {
     padding: 8px;
     display: grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: 6px;
 }
 .operator-park-slot {
     min-height: 44px;
     border: 1px solid #b9c8da;
     border-radius: 3px;
     background: linear-gradient(180deg, #ffffff 0%, #edf3fa 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #294d71;
     font-weight: 700;
 }
 .operator-dial-panel {
     padding: 8px;
     display: grid;
     grid-template-columns: minmax(0, 1fr) 84px;
     gap: 6px;
     align-items: center;
 }
 .operator-statusbar {
     display: grid;
     grid-template-columns: 190px minmax(0, 1fr) 250px;
     gap: 6px;
     align-items: stretch;
 }
 .operator-status-box {
     min-height: 28px;
     border: 1px solid #b9c8da;
     border-radius: 4px;
     background: linear-gradient(180deg, #ffffff 0%, #edf3fa 100%);
     display: flex;
     align-items: center;
     padding: 0 8px;
     color: #294d71;
 }
 .operator-status-box.right {
     justify-content: space-between;
 }
 .operator-banner {
     display: none;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 6px 10px;
     border-radius: 4px;
     border: 1px solid #b9c8da;
     background: #f8fbff;
     color: #284d73;
 }
 .operator-banner.show {
     display: flex;
 }
 .operator-banner.success {
     border-color: #8bc79d;
     background: #eefbf1;
     color: #22693c;
 }
 .operator-banner.error {
     border-color: #e0a3aa;
     background: #fff1f2;
     color: #aa1d2f;
 }
 .operator-empty {
     padding: 18px;
     text-align: center;
     color: #6b7f95;
 }
 .operator-call-row {
     cursor: grab;
 }
 .operator-call-row.transfer-selected {
     background: #fff3d7;
 }
 .operator-directory-row.transfer-target {
     cursor: pointer;
 }
 .operator-directory-row.transfer-target.transfer-armed {
     background: #fff7df;
     box-shadow: inset 3px 0 0 #f39c12;
 }
 @media (max-width: 1280px) {
     .operator-main-grid {
         grid-template-columns: 1fr;
     }
     .operator-right-grid {
         grid-template-rows: 260px 160px 96px;
     }
 }
 @media (max-width: 992px) {
     html body .wp-standalone-wrapper {
         overflow: auto !important;
         height: auto !important;
         min-height: 100vh !important;
     }
     .operator-shell {
         min-height: auto;
         height: auto;
         grid-template-rows: repeat(5, auto);
     }
     .operator-summary-strip,
     .operator-search-row,
     .operator-detail-grid,
     .operator-focus-grid,
     .operator-statusbar {
         grid-template-columns: 1fr;
     }
     .operator-blf-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }
</style>
@endpush

@section('content')
<div class="operator-shell">
@if($authenticated)
<div class="operator-topbar">
    <div class="operator-brand">
        <span class="operator-brand-mark">O</span>
        <div>
            <div>InAttend Operator</div>
            <div class="text-muted">Extension {{ $operatorExtension }}</div>
        </div>
    </div>
    <div class="operator-top-actions">
        <div class="text-muted small">Last refresh: <span id="operatorGeneratedAt">--</span></div>
        <form method="POST" action="{{ route('operator.logout') }}">
            @csrf
            <button type="submit" class="btn btn-sm btn-outline-danger">Logout</button>
        </form>
    </div>
</div>

<div class="operator-toolstrip">
    <button type="button" class="operator-tool-btn" id="operatorDialAction">D</button>
    <button type="button" class="operator-tool-btn" id="operatorHangupAction">H</button>
    <button type="button" class="operator-tool-btn" id="operatorTransferAction">T</button>
    <button type="button" class="operator-tool-btn" id="operatorParkAction">P</button>
    <button type="button" class="operator-tool-btn" id="operatorPickupAction">Q</button>
    <div class="text-muted small ms-2">Drag a live call onto an extension tile or parking slot.</div>
</div>

<div id="operatorBanner" class="operator-banner"></div>

<div class="operator-summary-strip">
    <div class="operator-summary-box">Recall <span class="ms-1" id="summaryRecallCount">0</span></div>
    <div class="operator-strip-box internal">Internal (<span id="summaryInternalCount">0</span>)</div>
    <div class="operator-strip-box park">Park (<span id="summaryParkCount">0</span>)</div>
    <div class="operator-strip-box external">External (<span id="summaryExternalCount">0</span>)</div>
    <div class="operator-summary-box">Queue <span class="ms-1" id="summaryQueueCount">0</span></div>
</div>

<div class="operator-main-grid">
    <div class="operator-left-grid">
        <div class="operator-panel">
            <div class="operator-panel-header">
                <span>Queue / Calls</span>
                <span id="callCount">0</span>
            </div>
            <div class="operator-panel-body">
                <table class="operator-queue-table mb-0">
                    <thead>
                        <tr>
                            <th>Queue</th>
                            <th>Caller</th>
                            <th>Called</th>
                            <th>Origin</th>
                            <th>State</th>
                            <th>Time</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="callsBody"></tbody>
                </table>
            </div>
        </div>

        <div class="operator-panel">
            <div class="operator-focus-grid">
                <div class="operator-focus-left">
                    <div class="operator-focus-name" id="focusCaller">Waiting for call</div>
                    <div class="operator-focus-state" id="focusDirection">INT</div>
                    <div id="focusMeta" class="text-muted">No active conversation selected.</div>
                </div>
                <div class="operator-focus-right">
                    <div class="operator-focus-number" id="focusCallee">---</div>
                    <div class="operator-focus-state text-end" id="focusState">Idle</div>
                </div>
            </div>
        </div>

        <div class="operator-panel">
            <div class="operator-panel-header">
                <span>Browser Call</span>
                <span id="operatorBrowserPanelState">Idle</span>
            </div>
            <div class="operator-panel-body" style="overflow: hidden;">
                <div class="operator-browser-workflow">
                    <div class="operator-incoming-card" id="incomingCallCard">
                        <div class="operator-incoming-title">Incoming call</div>
                        <div class="operator-incoming-caller" id="incomingCallerName">No incoming call</div>
                        <div class="operator-incoming-meta" id="incomingCallerMeta">Your browser phone is ready.</div>
                        <div class="d-flex gap-2 flex-wrap mt-2">
                            <button type="button" class="btn btn-success btn-sm" id="answerIncomingButton" disabled>Answer</button>
                            <button type="button" class="btn btn-outline-danger btn-sm" id="rejectIncomingButton" disabled>Reject</button>
                        </div>
                    </div>
                    <div class="operator-browser-dialpad">
                        <div class="operator-dial-panel">
                            <input id="dialInput" class="form-control operator-dial-input" placeholder="Enter extension or number">
                            <button type="button" class="btn btn-success btn-sm" id="dialButton">Call</button>
                        </div>
                        <div>
                            <input id="transferInput" class="form-control operator-transfer-input" placeholder="Transfer target">
                        </div>
                        <div class="small text-muted">Answer/reject incoming calls here and place browser calls from the center workflow.</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="operator-panel">
            <div class="operator-panel-header">
                <span>Search</span>
                <span class="text-muted fw-normal">Directory</span>
            </div>
            <div class="operator-panel-body p-2">
                <div class="operator-search-row mb-2">
                    <label class="mb-0 fw-semibold">Search:</label>
                    <input type="text" id="directorySearch" class="form-control" placeholder="Name">
                    <input type="text" id="directoryDepartment" class="form-control" placeholder="Department">
                    <input type="text" id="directoryCompany" class="form-control" placeholder="Company / Information">
                    <input type="text" id="directoryNumberSearch" class="form-control" placeholder="Number">
                </div>
                <div class="operator-detail-grid">
                    <div class="operator-contact-card">
                        <div class="operator-contact-name" id="selectedDirectoryName">No contact selected</div>
                        <div class="operator-contact-state" id="selectedDirectoryState">Ready</div>
                        <div class="mt-3 text-muted" id="selectedDirectoryNumber">Phone no:</div>
                        <div class="mt-3 d-flex gap-2 flex-wrap">
                            <button type="button" class="btn btn-sm btn-primary" id="selectedDirectoryDesk">Call</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="selectedDirectoryTransfer">Transfer</button>
                        </div>
                    </div>
                    <div class="p-2">
                        <table class="operator-detail-table mb-0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Number</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="directoryBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="operator-right-grid">
        <div class="operator-panel">
            <div class="operator-panel-header">
                <span>Parking</span>
                <span>701-712</span>
            </div>
            <div class="operator-panel-body">
                <div class="operator-parking-grid" id="parkingGrid"></div>
            </div>
        </div>

        <div class="operator-panel">
            <div class="operator-panel-body p-2">
                <div class="p-2 border-bottom bg-light d-none" id="transferBanner">Transfer armed</div>
                <div class="d-flex align-items-center gap-2 flex-wrap" id="callChipBar"></div>
            </div>
        </div>
    </div>
</div>

<div class="operator-statusbar">
    <div class="operator-status-box">Phone: {{ $operatorExtension }}</div>
    <div class="operator-status-box">Status: <span class="ms-1" id="operatorStatusText">Connected</span></div>
    <div class="operator-status-box">Browser: <span class="ms-1" id="operatorBrowserStatus">{{ !empty($browserCredentials) ? 'Connecting...' : 'Unavailable' }}</span></div>
    <div class="operator-status-box right">
        <span>Attendant 1/1</span>
        <span id="operatorClock"></span>
    </div>
</div>
@else
<div class="d-flex align-items-center justify-content-center h-100">
    <div class="operator-panel" style="width: 100%; max-width: 420px; min-height: auto;">
        <div class="operator-panel-header">
            <span>Operator Login</span>
            <span>Mitel Style Console</span>
        </div>
        <div class="operator-panel-body p-3">
            <div class="text-muted mb-3">Choose the extension that should run the operator console.</div>
            <form method="POST" action="{{ route('operator.authenticate') }}">
                @csrf
                <div class="mb-3">
                    <label class="form-label">Operator Extension</label>
                    <select name="extension" class="form-select" required>
                        <option value="">Select extension</option>
                        @foreach(($extensions ?? collect()) as $extension)
                            <option value="{{ $extension->id }}">{{ $extension->id }}{{ !empty($extension->description) ? ' · ' . $extension->description : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('webphone.index') }}" class="btn btn-outline-secondary">Webphone</a>
                    <button type="submit" class="btn btn-primary">Open Operator</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
</div>

<audio id="operatorRemoteAudio" autoplay></audio>
<script src="{{ asset('js/jssip.min.js') }}"></script>
<script>
const initialSnapshot = @json($initialSnapshot ?? []);
const operatorBrowserConfig = @json($browserCredentials ?? null);

window.OperatorConsole = {
    state: {
        snapshot: initialSnapshot,
        directory: [],
        selectedDirectory: null,
        extensionFilter: '',
        draggedCall: null,
        focusedCall: null,
        bannerTimer: null,
        browserRegistered: false,
        browserRegistering: false,
        browserStatusText: operatorBrowserConfig ? 'Connecting...' : 'Unavailable',
        browserUa: null,
        browserSession: null,
        incomingSession: null,
    },
    init() {
        this.initParking();
        this.bindUi();
        this.renderSnapshot(this.state.snapshot || {});
        this.initBrowserPhone();
        this.loadDirectory();
        this.startPolling();
        this.updateClock();
        window.setInterval(() => this.updateClock(), 1000);
    },
    bindUi() {
        document.getElementById('dialButton')?.addEventListener('click', () => this.makeCall());
        document.getElementById('operatorDialAction')?.addEventListener('click', () => this.makeCall());
        document.getElementById('operatorHangupAction')?.addEventListener('click', () => {
            const channel = this.state.focusedCall?.transfer_target || this.state.draggedCall?.channel || '';
            if (!channel) {
                this.showBanner('Select a live call first.', 'error');
                return;
            }
            this.hangup(channel);
        });
        document.getElementById('operatorTransferAction')?.addEventListener('click', () => {
            const call = this.state.focusedCall;
            const target = (document.getElementById('transferInput')?.value || '').trim();
            if (!call?.transfer_target || !target) {
                this.showBanner('Choose a live call and enter a transfer target.', 'error');
                return;
            }
            this.transfer(call.transfer_target, target, call);
        });
        document.getElementById('operatorParkAction')?.addEventListener('click', () => {
            const call = this.state.focusedCall;
            if (!call?.transfer_target) {
                this.showBanner('Choose a live call to park.', 'error');
                return;
            }
            this.park(call.transfer_target, 701);
        });
        document.getElementById('operatorPickupAction')?.addEventListener('click', () => {
            const queue = this.state.snapshot?.queues?.[0]?.number || '';
            if (!queue) {
                this.showBanner('No queue is waiting right now.', 'error');
                return;
            }
            this.pickupQueue(queue);
        });
        document.getElementById('answerIncomingButton')?.addEventListener('click', () => this.answerIncomingCall());
        document.getElementById('rejectIncomingButton')?.addEventListener('click', () => this.rejectIncomingCall());
        ['directorySearch', 'directoryDepartment', 'directoryCompany', 'directoryNumberSearch'].forEach((id) => {
            document.getElementById(id)?.addEventListener('input', () => this.renderDirectory());
        });
        document.getElementById('selectedDirectoryDesk')?.addEventListener('click', () => {
            const target = this.state.selectedDirectory?.number || this.state.selectedDirectory?.extension || '';
            if (!target) {
                this.showBanner('Choose a directory entry first.', 'error');
                return;
            }
            this.makeCall(target);
        });
        document.getElementById('selectedDirectoryTransfer')?.addEventListener('click', () => {
            const call = this.state.focusedCall;
            const target = this.state.selectedDirectory?.number || this.state.selectedDirectory?.extension || '';
            if (!call?.transfer_target || !target) {
                this.showBanner('Choose a live call and a directory entry first.', 'error');
                return;
            }
            this.transfer(call.transfer_target, target, call);
        });
        document.addEventListener('click', (event) => {
            const target = event.target instanceof Element ? event.target.closest('[data-call-channel], [data-queue-pickup], [data-directory-call], [data-transfer-extension]') : null;
            if (!target) {
                return;
            }
            event.preventDefault();
            if (target.matches('[data-call-channel]')) {
                const channel = target.getAttribute('data-call-channel') || '';
                const callId = target.getAttribute('data-call-id') || '';
                this.armCall(channel, callId);
                return;
            }
            if (target.matches('[data-queue-pickup]')) {
                this.pickupQueue(target.getAttribute('data-queue-pickup') || '');
                return;
            }
            if (target.matches('[data-directory-call]')) {
                this.makeCall(target.getAttribute('data-directory-call') || '');
                return;
            }
            if (target.matches('[data-transfer-extension]')) {
                const rowButton = event.target instanceof Element ? event.target.closest('[data-directory-call]') : null;
                if (rowButton) {
                    return;
                }
                const rows = Array.from(document.querySelectorAll('#directoryBody [data-transfer-extension]'));
                const rowIndex = rows.indexOf(target);
                if (rowIndex >= 0) {
                    this.selectDirectory(rowIndex);
                }
            }
        });
    },
    startPolling() {
        window.setInterval(() => this.loadSnapshot(), 8000);
        window.setInterval(() => this.loadDirectory(), 15000);
    },
    async loadSnapshot() {
        try {
            const response = await fetch('{{ route('operator.live') }}', { headers: { 'Accept': 'application/json' } });
            if (!response.ok) {
                return;
            }
            this.state.snapshot = await response.json();
            this.renderSnapshot(this.state.snapshot);
        } catch (error) {
        }
    },
    async loadDirectory() {
        try {
            const response = await fetch('{{ route('operator.directory') }}', { headers: { 'Accept': 'application/json' } });
            if (!response.ok) {
                return;
            }
            this.state.directory = await response.json();
            if (!this.state.selectedDirectory && this.state.directory.length) {
                this.state.selectedDirectory = this.state.directory[0];
            }
            this.renderDirectory();
        } catch (error) {
        }
    },
    renderSnapshot(snapshot) {
        const calls = snapshot.active_calls || [];
        const queues = snapshot.queues || [];
        const extensions = snapshot.extensions || [];
        document.getElementById('operatorGeneratedAt').textContent = this.formatTime(snapshot.generated_at || '');
        document.getElementById('callCount').textContent = String(calls.length);
        document.getElementById('summaryQueueCount').textContent = String(queues.reduce((sum, row) => sum + Number(row.waiting || 0), 0));
        document.getElementById('summaryInternalCount').textContent = String(calls.filter((row) => (row.direction || '') === 'internal').length);
        document.getElementById('summaryParkCount').textContent = String(calls.filter((row) => (row.direction || '') === 'park').length);
        document.getElementById('summaryExternalCount').textContent = String(calls.filter((row) => (row.direction || '') === 'external').length);
        document.getElementById('summaryRecallCount').textContent = String(calls.length);
        this.renderCalls(calls);
        this.renderFocus();
        this.renderExtensions(extensions);
        this.renderQueues(queues);
        this.renderCallChips(calls);
        const extensionCount = document.getElementById('extensionCount');
        if (extensionCount) {
            extensionCount.textContent = String(extensions.length);
        }
    },
    renderCalls(calls) {
        const body = document.getElementById('callsBody');
        if (!calls.length) {
            body.innerHTML = '<tr><td colspan="7" class="operator-empty">No active calls.</td></tr>';
            this.state.focusedCall = null;
            this.state.draggedCall = null;
            return;
        }
        if (!this.state.focusedCall || !calls.some((row) => row.id === this.state.focusedCall.id)) {
            this.state.focusedCall = calls[0];
        }
        body.innerHTML = calls.map((call) => `
            <tr class="operator-call-row ${this.state.focusedCall?.id === call.id ? 'transfer-selected' : ''}" draggable="true" data-call-id="${this.escapeAttr(call.id || '')}" data-call-channel="${this.escapeAttr(call.transfer_target || call.channel || '')}" data-peer-channel="${this.escapeAttr(call.peer_channel || '')}" data-call-caller="${this.escapeAttr(call.caller || '')}" data-call-callee="${this.escapeAttr(call.callee || '')}">
                <td>${this.escape(this.queueLabel(call))}</td>
                <td>${this.escape(call.caller || '')}</td>
                <td>${this.escape(call.callee || '')}</td>
                <td>${this.escape((call.direction || 'internal').toUpperCase())}</td>
                <td>${this.escape(call.state || '')}</td>
                <td>${this.escape(call.duration || '')}</td>
                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-outline-primary btn-sm" data-call-channel="${this.escapeAttr(call.transfer_target || call.channel || '')}" data-call-id="${this.escapeAttr(call.id || '')}">Select</button>
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="OperatorConsole.hangup('${this.escapeJs(call.transfer_target || call.channel || '')}')">Hangup</button>
                    </div>
                </td>
            </tr>
        `).join('');
        body.querySelectorAll('.operator-call-row').forEach((row) => {
            row.addEventListener('dragstart', () => {
                this.state.draggedCall = {
                    id: row.getAttribute('data-call-id') || '',
                    channel: row.getAttribute('data-call-channel') || '',
                    peer_channel: row.getAttribute('data-peer-channel') || '',
                    caller: row.getAttribute('data-call-caller') || '',
                    callee: row.getAttribute('data-call-callee') || '',
                };
                this.renderTransferBanner();
            });
            row.addEventListener('click', () => {
                this.armCall(row.getAttribute('data-call-channel') || '', row.getAttribute('data-call-id') || '');
            });
        });
    },
    renderFocus() {
        const call = this.state.focusedCall;
        document.getElementById('focusCaller').textContent = call?.caller || 'Waiting for call';
        document.getElementById('focusDirection').textContent = call ? String(call.direction || 'internal').toUpperCase() : 'INT';
        document.getElementById('focusMeta').textContent = call ? `${call.channel || ''} · ${call.duration || ''}` : 'No active conversation selected.';
        document.getElementById('focusCallee').textContent = call?.callee || '---';
        document.getElementById('focusState').textContent = call?.state || 'Idle';
    },
    renderExtensions(extensions) {
        const filter = this.state.extensionFilter;
        const rows = extensions.filter((row) => !filter || `${row.extension} ${row.state} ${row.status}`.toLowerCase().includes(filter));
        const body = document.getElementById('extensionsBody');
        if (!body) {
            return;
        }
        if (!rows.length) {
            body.innerHTML = '<div class="operator-empty">No extensions found.</div>';
            return;
        }
        body.innerHTML = rows.map((row) => {
            const state = String(row.state || row.status || '').toLowerCase();
            const cls = state.includes('busy') ? 'busy' : (state.includes('ring') ? 'ringing' : 'online');
            const armed = !!this.state.draggedCall?.channel;
            return `
                <div class="operator-blf-tile ${cls} ${armed ? 'transfer-armed' : ''}" data-transfer-extension="${this.escapeAttr(row.extension || '')}">
                    <div class="operator-blf-extension">${this.escape(row.extension || '')}</div>
                    <div class="operator-blf-state">${this.escape(row.status || row.state || 'Idle')}</div>
                </div>
            `;
        }).join('');
        body.querySelectorAll('[data-transfer-extension]').forEach((tile) => {
            tile.addEventListener('dblclick', () => this.makeCall(tile.getAttribute('data-transfer-extension') || ''));
            tile.addEventListener('dragover', (event) => event.preventDefault());
            tile.addEventListener('drop', (event) => {
                event.preventDefault();
                const channel = this.state.draggedCall?.channel || this.state.focusedCall?.transfer_target || '';
                const target = tile.getAttribute('data-transfer-extension') || '';
                if (!channel || !target) {
                    this.showBanner('Transfer target is missing.', 'error');
                    return;
                }
                this.transfer(channel, target);
            });
        });
        this.renderTransferBanner();
    },
    renderQueues(queues) {
        const baseStatus = queues.length ? `${queues.length} queue(s) monitored` : 'Connected';
        document.getElementById('operatorStatusText').textContent = baseStatus;
        const browserStatus = document.getElementById('operatorBrowserStatus');
        if (browserStatus) {
            browserStatus.textContent = this.state.browserStatusText || 'Unavailable';
        }
    },
    renderDirectory() {
        const filters = [
            document.getElementById('directorySearch')?.value || '',
            document.getElementById('directoryDepartment')?.value || '',
            document.getElementById('directoryCompany')?.value || '',
            document.getElementById('directoryNumberSearch')?.value || '',
        ].map((value) => String(value).toLowerCase());
        const rows = (this.state.directory || []).filter((row) => {
            const haystack = `${row.name || ''} ${row.department || ''} ${row.source || ''} ${row.number || ''} ${row.extension || ''}`.toLowerCase();
            return filters.every((value) => !value || haystack.includes(value));
        });
        const body = document.getElementById('directoryBody');
        if (!rows.length) {
            body.innerHTML = '<tr><td colspan="3" class="operator-empty">No directory results.</td></tr>';
            return;
        }
        body.innerHTML = rows.slice(0, 100).map((row, index) => `
            <tr class="operator-directory-row transfer-target ${this.state.selectedDirectory?.number === row.number ? 'table-active' : ''} ${this.state.draggedCall?.channel ? 'transfer-armed' : ''}" data-transfer-extension="${this.escapeAttr(row.number || row.extension || '')}">
                <td><button type="button" class="btn btn-link btn-sm p-0 text-start" onclick="OperatorConsole.selectDirectory(${index})">${this.escape(row.name || row.extension || '')}</button></td>
                <td>${this.escape(row.number || row.extension || '')}</td>
                <td><button type="button" class="btn btn-outline-primary btn-sm" data-directory-call="${this.escapeAttr(row.number || row.extension || '')}">Call</button></td>
            </tr>
        `).join('');
        body.querySelectorAll('[data-transfer-extension]').forEach((row) => {
            row.addEventListener('dragover', (event) => event.preventDefault());
            row.addEventListener('drop', (event) => {
                event.preventDefault();
                const destination = row.getAttribute('data-transfer-extension') || '';
                const call = this.state.focusedCall;
                const channel = this.state.draggedCall?.channel || call?.transfer_target || '';
                if (!channel || !destination) {
                    this.showBanner('Arm a live call first, then drop it on a directory entry.', 'error');
                    return;
                }
                this.transfer(channel, destination, call);
            });
        });
        if (!this.state.selectedDirectory && rows.length) {
            this.state.selectedDirectory = rows[0];
        }
        this.renderSelectedDirectory();
    },
    renderSelectedDirectory() {
        const row = this.state.selectedDirectory;
        document.getElementById('selectedDirectoryName').textContent = row?.name || 'No contact selected';
        document.getElementById('selectedDirectoryState').textContent = row?.department || row?.source || 'Ready';
        document.getElementById('selectedDirectoryNumber').textContent = row ? `Phone no: ${row.number || row.extension || ''}` : 'Phone no:';
    },
    renderCallChips(calls) {
        const bar = document.getElementById('callChipBar');
        if (!bar) {
            return;
        }
        if (!calls.length) {
            bar.innerHTML = '<span class="text-muted">No live calls.</span>';
            return;
        }
        bar.innerHTML = calls.slice(0, 6).map((call, index) => `
            <button type="button" class="btn btn-sm ${index === 0 ? 'btn-outline-danger' : 'btn-outline-secondary'}" onclick="OperatorConsole.armCall('${this.escapeJs(call.transfer_target || call.channel || '')}','${this.escapeJs(call.id || '')}')">
                ${this.escape(call.caller || call.callee || `Call ${index + 1}`)}
            </button>
        `).join('');
    },
    initParking() {
        const grid = document.getElementById('parkingGrid');
        if (!grid || grid.childElementCount) {
            return;
        }
        for (let slot = 701; slot <= 712; slot += 1) {
            const div = document.createElement('div');
            div.className = 'operator-park-slot';
            div.textContent = String(slot);
            div.addEventListener('dragover', (event) => event.preventDefault());
            div.addEventListener('drop', (event) => {
                event.preventDefault();
                const channel = this.state.draggedCall?.channel || this.state.focusedCall?.transfer_target || '';
                if (!channel) {
                    this.showBanner('Select a live call to park.', 'error');
                    return;
                }
                this.park(channel, slot);
            });
            grid.appendChild(div);
        }
    },
    selectDirectory(index) {
        const filters = [
            document.getElementById('directorySearch')?.value || '',
            document.getElementById('directoryDepartment')?.value || '',
            document.getElementById('directoryCompany')?.value || '',
            document.getElementById('directoryNumberSearch')?.value || '',
        ].map((value) => String(value).toLowerCase());
        const rows = (this.state.directory || []).filter((row) => {
            const haystack = `${row.name || ''} ${row.department || ''} ${row.source || ''} ${row.number || ''} ${row.extension || ''}`.toLowerCase();
            return filters.every((value) => !value || haystack.includes(value));
        });
        this.state.selectedDirectory = rows[index] || null;
        this.renderDirectory();
    },
    armCall(channel, callId) {
        const calls = this.state.snapshot?.active_calls || [];
        this.state.focusedCall = calls.find((row) => String(row.id) === String(callId)) || calls.find((row) => String(row.transfer_target || row.channel) === String(channel)) || null;
        this.state.draggedCall = this.state.focusedCall ? {
            id: this.state.focusedCall.id || callId,
            channel: this.state.focusedCall.transfer_target || this.state.focusedCall.channel || channel,
            peer_channel: this.state.focusedCall.peer_channel || '',
            caller: this.state.focusedCall.caller || '',
            callee: this.state.focusedCall.callee || '',
        } : (channel ? { channel, id: callId } : null);
        this.renderCalls(calls);
        this.renderFocus();
        this.renderExtensions(this.state.snapshot.extensions || []);
        this.renderTransferBanner();
    },
    renderTransferBanner() {
        const banner = document.getElementById('transferBanner');
        if (!banner) {
            return;
        }
        if (!this.state.draggedCall?.channel) {
            banner.classList.add('d-none');
            banner.textContent = '';
            return;
        }
        banner.classList.remove('d-none');
        banner.textContent = `Transfer armed for ${this.state.focusedCall?.caller || 'selected call'}. Drop onto a directory row or parking slot, or use the transfer box.`;
    },
    initBrowserPhone() {
        if (!operatorBrowserConfig || !window.JsSIP) {
            this.state.browserRegistered = false;
            this.state.browserRegistering = false;
            this.state.browserStatusText = operatorBrowserConfig ? 'JsSIP unavailable' : 'Unavailable';
            this.renderQueues(this.state.snapshot?.queues || []);
            return;
        }

        this.state.browserRegistering = true;
        this.state.browserStatusText = `Connecting ${operatorBrowserConfig.extension}...`;
        this.renderQueues(this.state.snapshot?.queues || []);

        try {
            if (this.state.browserUa) {
                try {
                    this.state.browserUa.stop();
                } catch (error) {
                }
            }

            const socket = new JsSIP.WebSocketInterface(operatorBrowserConfig.wssUrl);
            const configuration = {
                sockets: [socket],
                uri: `sip:${operatorBrowserConfig.extension}@${operatorBrowserConfig.sipDomain}`,
                authorization_user: operatorBrowserConfig.username,
                password: operatorBrowserConfig.password,
                display_name: `Ext ${operatorBrowserConfig.extension}`,
                register: true,
                session_timers: false,
                user_agent: 'PBXAdmin-Operator/1.0',
            };

            const ua = new JsSIP.UA(configuration);
            this.state.browserUa = ua;

            ua.on('newRTCSession', (event) => {
                if (event.originator === 'remote') {
                    this.state.incomingSession = event.session;
                    this.renderIncomingCall();
                    return;
                }

                this.state.browserSession = event.session;
                this.bindBrowserSession(event.session);
            });

            ua.on('connected', () => {
                this.state.browserStatusText = `WS connected (${operatorBrowserConfig.extension})`;
                this.renderQueues(this.state.snapshot?.queues || []);
            });

            ua.on('registered', () => {
                this.state.browserRegistering = false;
                this.state.browserRegistered = true;
                this.state.browserStatusText = `Registered (${operatorBrowserConfig.extension})`;
                this.renderQueues(this.state.snapshot?.queues || []);
                this.loadSnapshot();
            });

            ua.on('unregistered', () => {
                this.state.browserRegistering = false;
                this.state.browserRegistered = false;
                this.state.browserStatusText = `Unregistered (${operatorBrowserConfig.extension})`;
                this.renderQueues(this.state.snapshot?.queues || []);
                this.loadSnapshot();
            });

            ua.on('registrationFailed', (event) => {
                this.state.browserRegistering = false;
                this.state.browserRegistered = false;
                this.state.browserStatusText = `Reg failed: ${event?.cause || 'Unknown'}`;
                this.renderQueues(this.state.snapshot?.queues || []);
            });

            ua.on('disconnected', () => {
                this.state.browserRegistering = false;
                this.state.browserRegistered = false;
                this.state.browserStatusText = `WS disconnected (${operatorBrowserConfig.extension})`;
                this.renderQueues(this.state.snapshot?.queues || []);
            });

            ua.start();
        } catch (error) {
            this.state.browserRegistering = false;
            this.state.browserRegistered = false;
            this.state.browserStatusText = `Browser phone error: ${error?.message || 'Failed to start'}`;
            this.renderQueues(this.state.snapshot?.queues || []);
        }
    },
    bindBrowserSession(session) {
        if (!session) {
            return;
        }

        this.renderIncomingCall();

        session.on('progress', () => {
            this.showBanner('Browser call ringing...', 'success');
            const panelState = document.getElementById('operatorBrowserPanelState');
            if (panelState) {
                panelState.textContent = 'Ringing';
            }
        });

        session.on('accepted', () => {
            this.showBanner('Browser call connected.', 'success');
            this.attachBrowserMedia(session);
            const panelState = document.getElementById('operatorBrowserPanelState');
            if (panelState) {
                panelState.textContent = 'Connected';
            }
            this.loadSnapshot();
        });

        session.on('confirmed', () => {
            this.attachBrowserMedia(session);
            this.loadSnapshot();
        });

        session.on('failed', async (event) => {
            this.state.browserSession = null;
            const cause = String(event?.cause || 'Unknown');
            const panelState = document.getElementById('operatorBrowserPanelState');
            if (panelState) {
                panelState.textContent = 'Idle';
            }
            const targetNumber = session.remote_identity?.uri?.user || '';
            if (targetNumber && /denied media access|user denied media access|getusermedia/i.test(cause)) {
                await this.placePbxCall(targetNumber, `Browser media blocked, retried via PBX for ${targetNumber}.`);
                return;
            }
            this.showBanner(`Browser call failed: ${cause}`, 'error');
            this.loadSnapshot();
        });

        session.on('ended', () => {
            this.state.browserSession = null;
            this.showBanner('Browser call ended.', 'success');
            const panelState = document.getElementById('operatorBrowserPanelState');
            if (panelState) {
                panelState.textContent = 'Idle';
            }
            this.loadSnapshot();
        });
    },
    renderIncomingCall() {
        const card = document.getElementById('incomingCallCard');
        const caller = document.getElementById('incomingCallerName');
        const meta = document.getElementById('incomingCallerMeta');
        const answer = document.getElementById('answerIncomingButton');
        const reject = document.getElementById('rejectIncomingButton');
        const panelState = document.getElementById('operatorBrowserPanelState');

        if (!card || !caller || !meta || !answer || !reject) {
            return;
        }

        if (!this.state.incomingSession) {
            card.classList.remove('is-ringing');
            caller.textContent = this.state.browserSession ? 'Call in progress' : 'No incoming call';
            meta.textContent = this.state.browserSession ? 'Use Hangup when you are done.' : 'Your browser phone is ready.';
            answer.disabled = true;
            reject.disabled = true;
            if (panelState && !this.state.browserSession) {
                panelState.textContent = 'Idle';
            }
            return;
        }

        const session = this.state.incomingSession;
        const name = session.remote_identity?.display_name || session.remote_identity?.uri?.user || 'Incoming caller';
        const number = session.remote_identity?.uri?.user || '';

        card.classList.add('is-ringing');
        caller.textContent = name;
        meta.textContent = number ? `Incoming call from ${number}` : 'Incoming call waiting';
        answer.disabled = false;
        reject.disabled = false;
        if (panelState) {
            panelState.textContent = 'Incoming';
        }
    },
    answerIncomingCall() {
        if (!this.state.incomingSession) {
            this.showBanner('No incoming call to answer.', 'error');
            return;
        }

        const session = this.state.incomingSession;
        this.state.incomingSession = null;
        this.state.browserSession = session;
        this.renderIncomingCall();

        try {
            session.answer(this.buildBrowserCallOptions());
            this.bindBrowserSession(session);
            this.showBanner('Answering incoming call...', 'success');
        } catch (error) {
            this.state.browserSession = null;
            this.showBanner(`Answer failed: ${error?.message || 'Unknown error'}`, 'error');
            this.renderIncomingCall();
        }
    },
    rejectIncomingCall() {
        if (!this.state.incomingSession) {
            this.showBanner('No incoming call to reject.', 'error');
            return;
        }

        try {
            this.state.incomingSession.terminate();
        } catch (error) {
        }

        this.state.incomingSession = null;
        this.renderIncomingCall();
        this.showBanner('Incoming call rejected.', 'success');
    },
    attachBrowserMedia(session) {
        const audio = document.getElementById('operatorRemoteAudio');
        if (!audio || !session?.connection) {
            return;
        }

        const remoteStream = new MediaStream();
        session.connection.getReceivers().forEach((receiver) => {
            if (receiver.track) {
                remoteStream.addTrack(receiver.track);
            }
        });

        if (remoteStream.getTracks().length) {
            audio.srcObject = remoteStream;
        }
    },
    buildBrowserCallOptions() {
        return {
            mediaConstraints: {
                audio: {
                    echoCancellation: true,
                    noiseSuppression: true,
                    autoGainControl: true,
                },
                video: false,
            },
            pcConfig: {
                iceServers: [
                    { urls: 'stun:stun.l.google.com:19302' },
                    { urls: 'stun:stun1.l.google.com:19302' },
                ],
            },
            rtcOfferConstraints: { offerToReceiveAudio: true, offerToReceiveVideo: false },
        };
    },
    async placePbxCall(number, browserFailureMessage = null) {
        try {
            const response = await fetch('{{ route('operator.call') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
                body: JSON.stringify({ target: number, source_mode: 'desk' }),
            });
            const payload = await response.json().catch(() => ({}));
            if (!response.ok) {
                this.showBanner(payload.message || `Call to ${number} failed.`, 'error');
                return false;
            }
            this.showBanner(browserFailureMessage || `Calling ${number} from extension ${payload.source_extension || '{{ $operatorExtension }}'}.`, 'success');
            this.loadSnapshot();
            return true;
        } catch (error) {
            this.showBanner(`Call to ${number} failed.`, 'error');
            return false;
        }
    },
    async makeCall(target = null) {
        const number = String(target || document.getElementById('dialInput')?.value || '').trim();
        if (!number) {
            this.showBanner('Enter a number or choose an extension.', 'error');
            return;
        }
        if (operatorBrowserConfig && this.state.browserRegistered && this.state.browserUa) {
            try {
                this.state.browserSession = this.state.browserUa.call(`sip:${number}@${operatorBrowserConfig.sipDomain}`, this.buildBrowserCallOptions());
                this.bindBrowserSession(this.state.browserSession);
                this.showBanner(`Calling ${number} from extension ${operatorBrowserConfig.extension}.`, 'success');
                return;
            } catch (error) {
                await this.placePbxCall(number, `Browser call failed, retried via PBX for ${number}.`);
                return;
            }
        } else if (operatorBrowserConfig && !this.state.browserRegistered) {
            this.showBanner(this.state.browserStatusText || 'Browser phone is not registered yet. Retrying via PBX.', 'error');
        }
        await this.placePbxCall(number);
    },
    async transfer(channel, target, call = null) {
        if (!channel || !target) {
            this.showBanner('Transfer requires a call and destination.', 'error');
            return;
        }
        const transferCall = call || this.state.focusedCall || null;
        if (this.state.browserSession && this.state.focusedCall?.id === transferCall?.id) {
            try {
                const response = await fetch('{{ route('operator.transfer') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    },
                    body: JSON.stringify({
                        channel,
                        target,
                        call_id: transferCall?.id || '',
                        peer_channel: transferCall?.peer_channel || this.state.draggedCall?.peer_channel || '',
                        caller: transferCall?.caller || this.state.draggedCall?.caller || '',
                        callee: transferCall?.callee || this.state.draggedCall?.callee || '',
                    }),
                });
                const payload = await response.json().catch(() => ({}));
                if (!response.ok) {
                    this.showBanner(payload.message || `Transfer to ${target} failed.`, 'error');
                    return;
                }
                this.state.draggedCall = null;
                this.renderTransferBanner();
                this.showBanner(`Transferred call to ${target}.`, 'success');
                this.loadSnapshot();
                return;
            } catch (error) {
                try {
                    this.state.browserSession.refer(`sip:${target}@${operatorBrowserConfig.sipDomain}`);
                    this.state.draggedCall = null;
                    this.renderTransferBanner();
                    this.showBanner(`Transfer requested to ${target}.`, 'success');
                    return;
                } catch (referError) {
                    this.showBanner(`Browser transfer failed: ${referError?.message || error?.message || 'Transfer unavailable'}`, 'error');
                    return;
                }
            }
        }
        try {
            const response = await fetch('{{ route('operator.transfer') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
                body: JSON.stringify({
                    channel,
                    target,
                    call_id: transferCall?.id || '',
                    peer_channel: transferCall?.peer_channel || this.state.draggedCall?.peer_channel || '',
                    caller: transferCall?.caller || this.state.draggedCall?.caller || '',
                    callee: transferCall?.callee || this.state.draggedCall?.callee || '',
                }),
            });
            const payload = await response.json().catch(() => ({}));
            if (!response.ok) {
                this.showBanner(payload.message || `Transfer to ${target} failed.`, 'error');
                return;
            }
            this.state.draggedCall = null;
            this.renderTransferBanner();
            this.showBanner(`Transferred call to ${target}.`, 'success');
            this.loadSnapshot();
        } catch (error) {
            this.showBanner(`Transfer to ${target} failed.`, 'error');
        }
    },
    async hangup(channel) {
        if (this.state.browserSession) {
            try {
                this.state.browserSession.terminate();
                this.state.browserSession = null;
                this.showBanner('Browser call hangup requested.', 'success');
                return;
            } catch (error) {
            }
        }
        if (!channel) {
            this.showBanner('No call selected to hang up.', 'error');
            return;
        }
        try {
            const response = await fetch('{{ route('operator.hangup') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
                body: JSON.stringify({ channel }),
            });
            if (!response.ok) {
                this.showBanner('Hangup failed.', 'error');
                return;
            }
            this.showBanner('Call hangup requested.', 'success');
            this.loadSnapshot();
        } catch (error) {
            this.showBanner('Hangup failed.', 'error');
        }
    },
    async park(channel, slot) {
        try {
            const response = await fetch('{{ route('operator.park') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
                body: JSON.stringify({ channel, slot }),
            });
            if (!response.ok) {
                this.showBanner(`Parking to ${slot} failed.`, 'error');
                return;
            }
            this.state.draggedCall = null;
            this.renderTransferBanner();
            this.showBanner(`Call parked on ${slot}.`, 'success');
            this.loadSnapshot();
        } catch (error) {
            this.showBanner(`Parking to ${slot} failed.`, 'error');
        }
    },
    async pickupQueue(queue) {
        try {
            const response = await fetch('{{ route('operator.queue.pickup') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                },
                body: JSON.stringify({ queue }),
            });
            if (!response.ok) {
                this.showBanner(`Queue pickup for ${queue} failed.`, 'error');
                return;
            }
            this.showBanner(`Picking up queue ${queue}.`, 'success');
            this.loadSnapshot();
        } catch (error) {
            this.showBanner(`Queue pickup for ${queue} failed.`, 'error');
        }
    },
    queueLabel(call) {
        if ((call.direction || '') === 'park') {
            return 'Park';
        }
        if ((call.direction || '') === 'external') {
            return 'External';
        }
        return 'Internal';
    },
    updateClock() {
        const clock = document.getElementById('operatorClock');
        if (clock) {
            clock.textContent = new Date().toLocaleString();
        }
    },
    showBanner(message, type = 'success') {
        const banner = document.getElementById('operatorBanner');
        if (!banner) {
            return;
        }
        banner.className = `operator-banner show ${type}`;
        banner.textContent = message;
        if (this.state.bannerTimer) {
            window.clearTimeout(this.state.bannerTimer);
        }
        this.state.bannerTimer = window.setTimeout(() => {
            banner.className = 'operator-banner';
            banner.textContent = '';
        }, 3500);
    },
    formatTime(value) {
        if (!value) {
            return '--';
        }
        try {
            return new Date(value).toLocaleTimeString();
        } catch (error) {
            return value;
        }
    },
    escape(value) {
        return String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    },
    escapeAttr(value) {
        return this.escape(value).replace(/`/g, '&#096;');
    },
    escapeJs(value) {
        return String(value ?? '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
    },
};

document.addEventListener('DOMContentLoaded', () => window.OperatorConsole.init());
</script>
@endsection