@extends($layout ?? 'layouts.webphone')

@push('style')
<style>
/* ═══════════════════════════════════════════════
   WEBPHONE — VitXi-Inspired Dark UI
   ═══════════════════════════════════════════════ */
:root {
    --wp-bg: #0d1b2a;
    --wp-surface: #132238;
    --wp-border: rgba(255,255,255,.06);
    --wp-text: #e2e8f0;
    --wp-muted: rgba(255,255,255,.4);
    --wp-accent: #6366f1;
    --wp-green: #10b981;
    --wp-red: #ef4444;
    --wp-orange: #f59e0b;
}

/* ── LAYOUT ── */
.wp-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ── ICON SIDEBAR (far-left) ── */
.wp-nav {
    width: 60px;
    background: #091520;
    border-right: 1px solid var(--wp-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    flex-shrink: 0;
}
.wp-nav-brand {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wp-accent), #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.wp-nav-brand svg { width: 20px; height: 20px; color: #fff; }
.wp-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--wp-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    gap: 2px;
}
.wp-nav-btn svg { width: 18px; height: 18px; }
.wp-nav-btn span { font-size: .55rem; letter-spacing: .3px; }
.wp-nav-btn:hover { color: #fff; background: rgba(255,255,255,.05); }
.wp-nav-btn.active { color: #fff; background: rgba(99,102,241,.15); }
.wp-nav-btn .nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--wp-red);
    color: #fff;
    font-size: .5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-nav-spacer { flex: 1; }
.wp-nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(99,102,241,.15);
    color: var(--wp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .7rem;
    cursor: pointer;
}

/* ── SECONDARY PANEL ── */
.wp-panel {
    width: 320px;
    background: var(--wp-surface);
    border-right: 1px solid var(--wp-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.wp-panel-head {
    padding: 16px;
    border-bottom: 1px solid var(--wp-border);
}
.wp-panel-head h5 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.wp-panel-nav {
    padding: 8px;
}
.wp-panel-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--wp-muted);
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.wp-panel-nav-item:hover { background: rgba(255,255,255,.04); color: #fff; }
.wp-panel-nav-item.active { background: rgba(99,102,241,.12); color: #fff; }
.wp-panel-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.wp-panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.wp-panel-body::-webkit-scrollbar { width: 3px; }
.wp-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* ── MAIN CONTENT ── */
.wp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--wp-bg);
}
.wp-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--wp-border);
    background: var(--wp-surface);
}
.wp-main-header h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.wp-main-header .subtitle {
    color: var(--wp-muted);
    font-size: .78rem;
}
.wp-main-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
}
.wp-main-body::-webkit-scrollbar { width: 4px; }
.wp-main-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* ── SEARCH BAR ── */
.wp-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--wp-border);
}
.wp-search input {
    width: 100%;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--wp-border);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px 8px 34px;
    font-size: .82rem;
    outline: none;
    transition: border-color .2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}
.wp-search input:focus { border-color: rgba(99,102,241,.4); }
.wp-search input::placeholder { color: var(--wp-muted); }

/* ── CONTACT LIST ITEMS ── */
.wp-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid rgba(255,255,255,.02);
}
.wp-list-item:hover { background: rgba(99,102,241,.05); }
.wp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .7rem;
    flex-shrink: 0;
}
.wp-avatar.online { background: rgba(16,185,129,.12); color: #34d399; }
.wp-avatar.offline { background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); }
.wp-avatar.busy { background: rgba(239,68,68,.12); color: #f87171; }
.wp-avatar .presence-dot {
    display: none;
}
.item-name { font-size: .82rem; font-weight: 500; color: var(--wp-text); }
.item-sub { font-size: .7rem; color: var(--wp-muted); margin-top: 1px; }

/* ── HISTORY BADGES ── */
.wp-history-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .65rem;
    font-weight: 700;
}
.wp-history-badge.inbound { background: rgba(16,185,129,.12); color: #34d399; }
.wp-history-badge.outbound { background: rgba(99,102,241,.12); color: #818cf8; }
.wp-history-badge.missed { background: rgba(239,68,68,.12); color: #f87171; }
.wp-history-badge svg { width: 14px; height: 14px; }
.callback-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(16,185,129,.08);
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all .15s;
}
.wp-list-item:hover .callback-btn { opacity: 1; }
.callback-btn:hover { background: rgba(16,185,129,.2); transform: scale(1.1); }
.callback-btn svg { width: 14px; height: 14px; }

/* ── DIALPAD AREA ── */
.wp-dialpad-area {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-left: 1px solid var(--wp-border);
}
.wp-display {
    text-align: center;
    padding: 16px 12px;
    margin-bottom: 12px;
}
.wp-display .number {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
    min-height: 36px;
    word-break: break-all;
}
.wp-display .info {
    font-size: .78rem;
    color: var(--wp-muted);
    margin-top: 4px;
}
.wp-display .timer {
    font-size: 1rem;
    color: var(--wp-accent);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
    font-weight: 500;
}
.wp-input-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.wp-input-row input {
    flex: 1;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--wp-border);
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 2px;
    outline: none;
}
.wp-input-row input:focus { border-color: rgba(99,102,241,.4); }
.wp-input-row .clear-btn {
    width: 40px;
    border-radius: 8px;
    border: 1px solid var(--wp-border);
    background: transparent;
    color: var(--wp-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wp-input-row .clear-btn:hover { background: rgba(255,255,255,.04); color: #fff; }

/* ── DIALPAD GRID ── */
.wp-dialpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.wp-key {
    aspect-ratio: 1.5;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,.03);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .1s;
    user-select: none;
}
.wp-key:hover { background: rgba(255,255,255,.06); }
.wp-key:active { background: rgba(99,102,241,.15); transform: scale(.95); }
.wp-key .sub { font-size: .5rem; color: var(--wp-muted); letter-spacing: 2px; margin-top: -2px; }

/* ── CALL BUTTONS ── */
.wp-call-btns { display: flex; gap: 16px; justify-content: center; padding: 8px 0; }
.wp-call-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}
.wp-call-btn svg { width: 24px; height: 24px; }
.wp-call-btn.call { background: var(--wp-green); color: #fff; }
.wp-call-btn.call:hover { box-shadow: 0 4px 16px rgba(16,185,129,.35); transform: scale(1.05); }
.wp-call-btn.hangup { background: var(--wp-red); color: #fff; }
.wp-call-btn.hangup:hover { box-shadow: 0 4px 16px rgba(239,68,68,.35); }
.wp-call-btn.answer { background: var(--wp-green); color: #fff; animation: wp-pulse 1.5s infinite; }
@keyframes wp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); } 50% { box-shadow: 0 0 0 12px rgba(16,185,129,0); } }

/* ── IN-CALL CONTROLS ── */
.wp-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.wp-ctrl {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--wp-border);
    background: transparent;
    color: var(--wp-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    font-size: .55rem;
    gap: 2px;
}
.wp-ctrl svg { width: 18px; height: 18px; }
.wp-ctrl:hover { background: rgba(255,255,255,.04); color: #fff; }
.wp-ctrl.active { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); color: var(--wp-accent); }

/* ── TRANSFER DIALOG ── */
.wp-transfer {
    background: rgba(0,0,0,.2);
    border: 1px solid var(--wp-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

/* ── INCOMING OVERLAY ── */
.wp-incoming-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10,15,28,.98);
    border: 1px solid var(--wp-border);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 40px 60px;
    gap: 16px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.wp-incoming-overlay .caller-name { font-size: 1.3rem; font-weight: 600; color: #fff; }
.wp-incoming-overlay .caller-sub { font-size: .85rem; color: var(--wp-muted); }
.wp-incoming-overlay .ring-anim {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(16,185,129,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wp-pulse 1.5s infinite;
}
.wp-incoming-btns { display: flex; gap: 32px; margin-top: 8px; }

/* ── SETTINGS OVERLAY ── */
.wp-settings {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-height: 80vh;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: 16px;
    z-index: 50;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.wp-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wp-border);
}
.wp-settings-head h6 { margin: 0; font-weight: 600; color: #fff; font-size: .9rem; }
.wp-settings-content { padding: 20px; flex: 1; }
.wp-settings-section { margin-bottom: 20px; }
.wp-settings-section .sec-title {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wp-muted);
    font-weight: 600;
    margin-bottom: 10px;
}
.wp-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.wp-settings-row label { font-size: .78rem; color: rgba(255,255,255,.6); min-width: 70px; margin: 0; }
.wp-settings-row select,
.wp-settings-row input[type=text],
.wp-settings-row input[type=password] {
    flex: 1;
    min-width: 0;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--wp-border);
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: .78rem;
}
.wp-settings-row input[type=range] { flex: 1; accent-color: var(--wp-accent); }
.wp-meter-bar { height: 5px; background: rgba(255,255,255,.05); border-radius: 3px; overflow: hidden; flex: 1; }
.wp-meter-fill { height: 100%; background: var(--wp-green); border-radius: 3px; width: 0%; transition: width .1s; }
.wp-test-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--wp-border);
    background: transparent;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    transition: all .15s;
    font-size: .78rem;
}
.wp-test-btn:hover { background: rgba(255,255,255,.04); color: #fff; }
.wp-test-btn.active { border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.06); color: var(--wp-accent); }
.wp-test-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.wp-save-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--wp-accent), #4f46e5);
    color: #fff;
    font-weight: 500;
    font-size: .82rem;
    cursor: pointer;
}
.wp-save-btn:hover { box-shadow: 0 4px 16px rgba(99,102,241,.3); }
.wp-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--wp-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wp-icon-btn:hover { background: rgba(255,255,255,.05); color: #fff; }
.wp-icon-btn svg { width: 16px; height: 16px; }

/* ── FOOTER STATUS BAR ── */
.wp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--wp-border);
    background: #091520;
    font-size: .72rem;
}
.wp-footer-left { color: var(--wp-muted); }
.wp-footer-right { display: flex; align-items: center; gap: 8px; }
.wp-reg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.wp-reg-dot.registered { background: var(--wp-green); box-shadow: 0 0 6px rgba(16,185,129,.5); }
.wp-reg-dot.unregistered { background: var(--wp-red); }
.wp-reg-dot.registering { background: var(--wp-orange); animation: wp-blink 1.5s infinite; }
@keyframes wp-blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* ── BADGE COUNT ── */
.wp-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--wp-red);
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    padding: 0 4px;
    margin-left: 4px;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .wp-panel { display: none; }
    .wp-dialpad-area { width: 100%; border-left: none; }
    .wp-main-body { flex-direction: column; }
}

/* ── UTILITY ── */
.d-none { display: none !important; }

/* ── NOTIFICATION-PERMISSION BANNER ── */
/* Fixed overlay at the very top so it does NOT become a flex child of the
   horizontal .wp-app row (which would squash the layout). It floats above the
   UI and only appears when notifications aren't granted. */
.wp-notif-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 9px 14px;
    background: #b45309;          /* amber-700: noticeable but not alarming */
    color: #fff;
    font-size: .82rem;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.wp-notif-text { flex: 1; line-height: 1.3; }
.wp-notif-btn {
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.wp-notif-btn:hover { background: rgba(255,255,255,.22); }
.wp-notif-close {
    flex-shrink: 0;
    border: none;
    background: none;
    color: rgba(255,255,255,.85);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.wp-notif-close:hover { color: #fff; }
</style>
@endpush

@section('content')
<div class="wp-app">

    {{-- Notification-permission banner: shown only when desktop notifications
         are not granted, so users know why they're not getting Windows alerts
         for incoming calls and how to fix it. Hidden by default; JS reveals it. --}}
    <div id="notifBanner" class="wp-notif-banner" style="display:none;">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
        <span id="notifBannerText" class="wp-notif-text">Enable desktop notifications to get a Windows alert when a call comes in.</span>
        <button type="button" class="wp-notif-btn" id="notifBannerAction" onclick="WP.enableNotifications()">Enable</button>
        <button type="button" class="wp-notif-close" onclick="WP.dismissNotifBanner()" title="Dismiss" aria-label="Dismiss">&times;</button>
    </div>

    {{-- ═══ ICON NAV (far-left) ═══ --}}
    <div class="wp-nav">
        <div class="wp-nav-brand"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
        <button class="wp-nav-btn" data-panel="contacts" onclick="WP.switchTab(this)" title="Colleagues"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg><span>Colleagues</span></button>
        <button class="wp-nav-btn" data-panel="phonebook" onclick="WP.switchTab(this)" title="Phonebook"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg><span>Phonebook</span></button>
        <button class="wp-nav-btn active" data-panel="history" onclick="WP.switchTab(this)" title="Calls"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><span>Calls</span><span class="nav-badge d-none" id="missedBadge">0</span></button>
        <button class="wp-nav-btn" data-panel="voicemail" onclick="WP.switchTab(this)" title="Voicemail"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5.5" cy="11.5" r="4.5"/><circle cx="18.5" cy="11.5" r="4.5"/><line x1="5.5" x2="18.5" y1="16" y2="16"/></svg><span>VM</span><span class="nav-badge d-none" id="vmBadge">0</span></button>
        <button class="wp-nav-btn" data-panel="speed" onclick="WP.switchTab(this)" title="Speed Dials"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg><span>Quick</span></button>
        <div class="wp-nav-spacer"></div>
        <button class="wp-nav-btn d-none" data-webphone-install title="Install App"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg><span>Install</span></button>
        <button class="wp-nav-btn" onclick="WP.toggleSettings()" title="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
        <div class="wp-nav-avatar" title="{{ $credentials['displayName'] }}">{{ substr($credentials['extension'], -2) }}</div>
    </div>

    {{-- ═══ LEFT PANEL (nav + dialpad) ═══ --}}
    <div class="wp-panel">
        <div class="wp-panel-head"><h5>Calls</h5></div>
        <div class="wp-panel-nav">
            <button class="wp-panel-nav-item active" onclick="WP.switchTab(this)" data-panel="history">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Call History
            </button>
            <button class="wp-panel-nav-item" onclick="WP.switchTab(this)" data-panel="voicemail">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5.5" cy="11.5" r="4.5"/><circle cx="18.5" cy="11.5" r="4.5"/><line x1="5.5" x2="18.5" y1="16" y2="16"/></svg> Voice Messages
                <span class="wp-badge-count d-none" id="vmBadge" style="margin-left:auto;">0</span>
            </button>
        </div>
        <div style="padding:12px 16px 0;">
            <div class="wp-input-row">
                <input type="text" id="dialInput" placeholder="Number" autocomplete="off">
                <button class="clear-btn" onclick="WP.clearInput()" title="Clear"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/><line x1="18" y1="9" x2="12" y2="15"/><line x1="12" y1="9" x2="18" y2="15"/></svg></button>
            </div>
        </div>
        <div style="padding:8px 16px;">
            <div class="wp-dialpad" id="dialpad">
                <button class="wp-key" onclick="WP.pressKey('1')">1<span class="sub">&nbsp;</span></button>
                <button class="wp-key" onclick="WP.pressKey('2')">2<span class="sub">ABC</span></button>
                <button class="wp-key" onclick="WP.pressKey('3')">3<span class="sub">DEF</span></button>
                <button class="wp-key" onclick="WP.pressKey('4')">4<span class="sub">GHI</span></button>
                <button class="wp-key" onclick="WP.pressKey('5')">5<span class="sub">JKL</span></button>
                <button class="wp-key" onclick="WP.pressKey('6')">6<span class="sub">MNO</span></button>
                <button class="wp-key" onclick="WP.pressKey('7')">7<span class="sub">PQRS</span></button>
                <button class="wp-key" onclick="WP.pressKey('8')">8<span class="sub">TUV</span></button>
                <button class="wp-key" onclick="WP.pressKey('9')">9<span class="sub">WXYZ</span></button>
                <button class="wp-key" onclick="WP.pressKey('*')">*<span class="sub">&nbsp;</span></button>
                <button class="wp-key" onclick="WP.pressKey('0')">0<span class="sub">+</span></button>
                <button class="wp-key" onclick="WP.pressKey('#')">#<span class="sub">&nbsp;</span></button>
            </div>
            <div class="wp-call-btns" id="idleActions"><button class="wp-call-btn call" onclick="WP.makeCall()" title="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.14.94.37 1.86.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.95.33 1.87.56 2.81.7A2 2 0 0 1 22 16.92z"/></svg></button></div>
            <div class="wp-controls d-none" id="callControls">
                <button class="wp-ctrl" id="btnMute" onclick="WP.toggleMute()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg><span>Mute</span></button>
                <button class="wp-ctrl" id="btnHold" onclick="WP.toggleHold()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg><span>Hold</span></button>
                <button class="wp-ctrl" id="btnTransfer" onclick="WP.showTransfer()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 8 4 4-4 4"/><path d="M2 12h20"/></svg><span>Xfer</span></button>
                <button class="wp-ctrl" id="btnRecord" onclick="WP.toggleRecord()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg><span>Rec</span></button>
                <button class="wp-ctrl" id="btnDtmf" onclick="WP.toggleDtmfPad()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><circle cx="8" cy="8" r="1"/><circle cx="12" cy="8" r="1"/><circle cx="16" cy="8" r="1"/></svg><span>DTMF</span></button>
            </div>
            <div class="wp-call-btns d-none" id="callActions"><button class="wp-call-btn hangup" onclick="WP.hangup();setTimeout(function(){document.getElementById('callActions').classList.add('d-none');document.getElementById('idleActions').classList.remove('d-none');document.getElementById('callControls').classList.add('d-none');document.getElementById('dialpad').style.display='grid';document.getElementById('displayInfo').textContent='Ready';document.getElementById('displayNumber').textContent='';document.getElementById('dialInput').value='';},400)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45c.95.33 1.87.56 2.81.7A2 2 0 0 1 22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.14.94.37 1.86.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91"/><line x1="1" y1="1" x2="23" y2="23"/></svg></button></div>
            <div class="wp-transfer d-none" id="transferDialog">
                <div style="font-size:.78rem;font-weight:500;color:#fff;margin-bottom:6px;">Transfer</div>
                <div style="display:flex;gap:4px;margin-bottom:4px;"><input type="text" id="transferTarget" placeholder="Ext..." style="flex:1;background:rgba(0,0,0,.3);border:1px solid var(--wp-border);color:#fff;border-radius:6px;padding:5px 8px;font-size:.78rem;outline:none;"><button onclick="WP.blindTransfer()" style="padding:5px 8px;border-radius:6px;border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.08);color:#818cf8;font-size:.68rem;cursor:pointer;">Blind</button><button onclick="WP.attendedTransfer()" style="padding:5px 8px;border-radius:6px;border:1px solid rgba(14,165,233,.3);background:rgba(14,165,233,.08);color:#38bdf8;font-size:.68rem;cursor:pointer;">Att</button></div>
                <button onclick="WP.hideTransfer()" style="width:100%;padding:4px;border-radius:6px;border:1px solid var(--wp-border);background:transparent;color:var(--wp-muted);font-size:.68rem;cursor:pointer;">Cancel</button>
            </div>
        </div>
        <div class="wp-display" id="callDisplay" style="border-top:1px solid var(--wp-border);margin:8px 16px 0;padding-top:12px;">
            <div class="number" id="displayNumber">&nbsp;</div>
            <div class="info" id="displayInfo">Ready</div>
            <div class="timer d-none" id="displayTimer">00:00</div>
        </div>
    </div>

    {{-- ═══ MAIN CONTENT (full-width — call history / phonebook) ═══ --}}
    <div class="wp-main">
        <div class="wp-main-header">
            <div><h4 id="panelTitle">Call History</h4><div class="subtitle" id="panelSubtitle"></div></div>
            <div style="display:flex;align-items:center;gap:12px;">
                {{-- Filters --}}
                <div id="historyFilters" style="display:flex;gap:6px;">
                    <label style="display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--wp-muted);cursor:pointer;"><input type="radio" name="hFilter" value="all" checked onchange="WP.filterHistory(this.value)" style="accent-color:var(--wp-accent);"> All</label>
                    <label style="display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--wp-muted);cursor:pointer;"><input type="radio" name="hFilter" value="noanswer" onchange="WP.filterHistory(this.value)" style="accent-color:var(--wp-red);"> No Answer</label>
                    <label style="display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--wp-muted);cursor:pointer;"><input type="radio" name="hFilter" value="answered" onchange="WP.filterHistory(this.value)" style="accent-color:var(--wp-green);"> Answered</label>
                    <label style="display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--wp-muted);cursor:pointer;"><input type="radio" name="hFilter" value="busy" onchange="WP.filterHistory(this.value)" style="accent-color:var(--wp-orange);"> Busy</label>
                    <label style="display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--wp-muted);cursor:pointer;"><input type="radio" name="hFilter" value="failed" onchange="WP.filterHistory(this.value)" style="accent-color:var(--wp-red);"> Failed</label>
                </div>
                <div class="wp-search" style="padding:0;border:none;width:200px;"><input type="text" id="contactSearch" placeholder="Search by source or ..."></div>
            </div>
        </div>
        <div class="wp-main-body" style="flex-direction:column;overflow-y:auto;">
            <div id="panelContacts" style="display:none;width:100%;"><div id="contactList" style="padding:0;"><div style="text-align:center;color:var(--wp-muted);font-size:.82rem;padding:40px 0;">Loading contacts...</div></div></div>
            <div id="panelPhonebook" style="display:none;width:100%;">
                <div style="padding:8px 0 12px;">
                    <div class="wp-search" style="padding:8px 12px;width:100%;max-width:340px;">
                        <input type="text" id="phonebookSearch" placeholder="Search client name, company or number…" oninput="WP.searchPhonebook(this.value)" autocomplete="off">
                    </div>
                </div>
                <div id="phonebookList" style="padding:0;"><div style="text-align:center;color:var(--wp-muted);font-size:.82rem;padding:40px 0;">Loading…</div></div>
            </div>
            <div id="panelHistory" style="width:100%;"><div id="historyList" style="padding:0;"><div style="text-align:center;color:var(--wp-muted);font-size:.82rem;padding:40px 0;">Loading...</div></div></div>
            <div id="panelSpeed" style="display:none;width:100%;"><div id="speedDialList" style="padding:0;"><div style="text-align:center;color:var(--wp-muted);font-size:.82rem;padding:40px 0;">Loading...</div></div></div>
            <div id="panelVoicemail" style="display:none;width:100%;"><div id="voicemailList" style="padding:0;"><div style="text-align:center;color:var(--wp-muted);font-size:.82rem;padding:40px 0;">Loading...</div></div></div>
        </div>
        <div class="wp-footer">
            <div class="wp-footer-left">ShiftBridge V-Connect WebRTC</div>
            <div class="wp-footer-right"><span id="extLabel" style="color:var(--wp-muted);">{{ $credentials['extension'] }}</span> <span style="color:var(--wp-muted);">&bull;</span> <span class="wp-reg-dot registering" id="regDot"></span> <span id="regStatus" style="color:var(--wp-muted);">Connecting...</span></div>
        </div>
    </div>

    {{-- INCOMING --}}
    <div class="wp-incoming-overlay d-none" id="incomingOverlay"><div class="ring-anim"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.14.94.37 1.86.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.95.33 1.87.56 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div><div class="caller-name" id="incomingCaller">Unknown</div><div class="caller-sub" id="incomingInfo">Incoming Call</div><div class="wp-incoming-btns"><button class="wp-call-btn hangup" onclick="WP.rejectCall()"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button><button class="wp-call-btn answer" onclick="WP.answerCall()"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.14.94.37 1.86.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.95.33 1.87.56 2.81.7A2 2 0 0 1 22 16.92z"/></svg></button></div></div>

    {{-- SETTINGS --}}
    <div class="wp-settings d-none" id="settingsPanel"><div class="wp-settings-head"><h6>Settings</h6><button class="wp-icon-btn" onclick="WP.toggleSettings()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><div class="wp-settings-content"><div class="wp-settings-section"><div class="sec-title">Audio</div><div class="wp-settings-row"><label>Mic</label><select id="micSelect"></select></div><div class="wp-settings-row"><label>Speaker</label><select id="spkSelect"></select></div><div class="wp-settings-row"><label>Volume</label><input type="range" id="volumeSlider" min="0" max="100" value="80"><span style="font-size:.72rem;color:var(--wp-muted);min-width:28px;" id="volumeLabel">80%</span></div><div class="wp-settings-row"><label>Ringtone</label><input type="range" id="ringtoneVolume" min="0" max="100" value="80"><span style="font-size:.72rem;color:var(--wp-muted);min-width:28px;" id="ringtoneLabel">80%</span></div></div><div class="wp-settings-section"><div class="sec-title">Test</div><button class="wp-test-btn" id="btnTestMic" onclick="WP.testMicrophone()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg><div style="flex:1;"><div>Microphone</div><div class="wp-meter-bar" style="margin-top:4px;"><div class="wp-meter-fill" id="micMeter"></div></div></div></button><button class="wp-test-btn mt-1" id="btnTestSpk" onclick="WP.testSpeaker()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg><div id="testSpkLabel">Speaker</div></button></div><div class="wp-settings-section"><div class="sec-title">SIP Account</div><div class="wp-settings-row"><label>Ext</label><input type="text" id="cfgExtension" value="{{ $credentials['extension'] }}"></div><div class="wp-settings-row"><label>User</label><input type="text" id="cfgUsername" value="{{ $credentials['username'] }}" readonly style="opacity:.5;"></div><div class="wp-settings-row"><label>Pass</label><input type="password" id="cfgPassword" value="{{ $credentials['password'] }}"></div><div class="wp-settings-row"><label>Server</label><input type="text" id="cfgServer" value="{{ $credentials['sipDomain'] }}"></div><div class="wp-settings-row"><label>WSS</label><input type="text" id="cfgWssUrl" value="{{ $credentials['wssUrl'] }}"></div><div class="wp-settings-row"><label>Status</label><span id="settingsRegStatus" style="font-size:.82rem;color:#f59e0b;">Connecting...</span></div><button class="wp-save-btn" onclick="WP.reconnectSIP()">Save &amp; Reconnect</button></div><div class="wp-settings-section" style="margin-bottom:0;"><form method="POST" action="{{ route('webphone.logout') }}">@csrf<button type="submit" class="wp-test-btn" style="color:#f87171;border-color:rgba(239,68,68,.15);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg><div>Logout</div></button></form></div></div></div>
</div>

{{-- Audio elements --}}
<audio id="remoteAudio" autoplay></audio>
<audio id="localAudio" autoplay muted></audio>
<audio id="ringtone" loop preload="auto"></audio>
<audio id="ringback" loop preload="auto"></audio>{{-- caller-side ringback while the far end rings --}}

{{-- JsSIP --}}
<script src="{{ asset('js/jssip.min.js') }}"></script>

{{-- ═══════════════════════════════════════════════
     WEBPHONE ENGINE
     ═══════════════════════════════════════════════ --}}
<script>
const WP = (function() {
    'use strict';

    const CONFIG = {
        extension: @json($credentials['extension']),
        username: @json($credentials['username']),
        password: @json($credentials['password']),
        wssUrl: @json($credentials['wssUrl']),
        sipDomain: @json($credentials['sipDomain']),
    };

    let ua = null, currentSession = null, incomingSession = null;
    let callTimer = null, callSeconds = 0;
    let isMuted = false, isOnHold = false, isRecording = false;
    let lastDialed = '', dtmfPadVisible = false, selectedMicDeviceId = '';
    let reconnectAttempts = 0, reconnectTimer = null;

    const $ = id => document.getElementById(id);

    // ── RINGTONE (WAV data URI) ──
    function createRingtoneWav() {
        const sr = 8000, dur = 4, fc = sr * dur;
        const buf = new ArrayBuffer(44 + fc * 2), v = new DataView(buf);
        const ws = (o, s) => { for (let i = 0; i < s.length; i++) v.setUint8(o + i, s.charCodeAt(i)); };
        ws(0,'RIFF'); v.setUint32(4,36+fc*2,true); ws(8,'WAVE'); ws(12,'fmt ');
        v.setUint32(16,16,true); v.setUint16(20,1,true); v.setUint16(22,1,true);
        v.setUint32(24,sr,true); v.setUint32(28,sr*2,true); v.setUint16(32,2,true);
        v.setUint16(34,16,true); ws(36,'data'); v.setUint32(40,fc*2,true);
        for (let i = 0; i < fc; i++) {
            const t = i/sr, c = t%4, env = c<2?1:0;
            const s = env ? (Math.sin(2*Math.PI*440*t)+Math.sin(2*Math.PI*480*t))*.22 : 0;
            v.setInt16(44+i*2, Math.max(-1,Math.min(1,s))*32767, true);
        }
        let bin = ''; const bytes = new Uint8Array(buf);
        for (let i = 0; i < bytes.length; i += 0x8000) bin += String.fromCharCode(...bytes.subarray(i, i+0x8000));
        return 'data:audio/wav;base64,' + btoa(bin);
    }

    function init() {
        const ring = $('ringtone');
        if (ring && !ring.src) ring.src = createRingtoneWav();
        // Caller-side ringback uses the same standard 440+480Hz / 2s-on-2s-off
        // cadence. Played locally while the far end rings, because internal
        // calls get a plain 180 Ringing with NO early media — so without this
        // the caller hears dead silence until the callee answers.
        const rb = $('ringback');
        if (rb && !rb.src) rb.src = createRingtoneWav();
        loadAudioDevices();
        loadContacts();
        loadHistory();
        loadSpeedDials();
        loadVoicemails();
        setupKeyboard();
        setupVolumeControls();
        registerSIP();
        requestNotificationPermission();
        refreshNotifBanner();
    }

    // ── SIP REGISTRATION ──
    // IMPORTANT: JsSIP's UA already manages BOTH socket recovery
    // (connection_recovery_*) AND periodic registration refresh internally.
    // An earlier version ALSO tore down and rebuilt the whole UA (new
    // WebSocket, new contact) on every 'disconnected'/'unregistered' event.
    // That raced with JsSIP's own recovery and made the webphone re-register
    // every 2-3 seconds — each new socket replaced the contact in Asterisk and
    // KILLED any in-progress INVITE, so incoming calls flashed up and vanished.
    //
    // Rules now:
    //   • Build the UA ONCE. Never rebuild it for a normal refresh.
    //   • 'unregistered' is a NORMAL lifecycle event (fires on every refresh /
    //     graceful stop) — do NOT reconnect on it.
    //   • On 'disconnected', let JsSIP try to recover the socket itself. Only
    //     if it stays down past a grace window do we do a single, debounced
    //     full rebuild as a last resort.
    function registerSIP() {
        updateRegStatus('registering', 'Connecting...');
        clearTimeout(reconnectTimer);
        reconnectTimer = null;

        const socket = new JsSIP.WebSocketInterface(CONFIG.wssUrl);
        console.log('[WP] Connecting WSS:', CONFIG.wssUrl);
        console.log('[WP] SIP URI:', 'sip:' + CONFIG.username + '@' + CONFIG.sipDomain);
        const cfg = {
            sockets: [socket],
            uri: 'sip:' + CONFIG.username + '@' + CONFIG.sipDomain,
            password: CONFIG.password,
            display_name: @json($credentials['displayName'] ?: 'Ext ' . $credentials['extension']),
            register: true,
            register_expires: 300,
            session_timers: false,
            no_answer_timeout: 60,
            user_agent: 'OmbutelWebPhone/2.0',
            // Let JsSIP recover the WebSocket on its own, with a gentle backoff.
            connection_recovery_min_interval: 5,
            connection_recovery_max_interval: 30,
        };

        if (ua) { try { ua.stop(); } catch(e) {} ua = null; }
        ua = new JsSIP.UA(cfg);

        ua.on('registered', () => {
            console.log('[WP] Registered!');
            updateRegStatus('registered', 'Registered');
            reconnectAttempts = 0;
            clearTimeout(reconnectTimer); reconnectTimer = null;
            loadContacts();
        });

        // Normal lifecycle event — JsSIP re-registers on its own schedule and
        // also fires this on graceful stop. Reflect status only; do NOT rebuild.
        ua.on('unregistered', () => {
            console.log('[WP] Unregistered (normal lifecycle — not reconnecting)');
        });

        // A registration that actually FAILED (auth/timeout). JsSIP will retry
        // registration itself; just surface the status.
        ua.on('registrationFailed', (e) => {
            console.warn('[WP] Registration failed:', e.cause);
            updateRegStatus('unregistered', 'Failed: ' + (e.cause || 'Unknown'));
        });

        ua.on('newRTCSession', (data) => {
            console.log('[WP] newRTCSession:', data.originator, data.session.direction);
            if (data.originator === 'remote') handleIncoming(data.session);
        });

        ua.on('connected', () => { console.log('[WP] Socket connected'); clearTimeout(reconnectTimer); reconnectTimer = null; });

        // Socket dropped. Let JsSIP recover it (connection_recovery_*). Only if
        // it's STILL down after a grace window do we rebuild the UA once.
        ua.on('disconnected', () => {
            console.log('[WP] Disconnected — letting JsSIP recover the socket');
            updateRegStatus('registering', 'Reconnecting...');
            scheduleReconnect();
        });

        ua.start();
    }

    // Debounced LAST-RESORT full rebuild. Only fires if the socket is still
    // down after the grace window — i.e. JsSIP's own recovery didn't take.
    // A successful 'connected'/'registered' clears this timer first.
    function scheduleReconnect() {
        if (reconnectTimer) return; // already scheduled — never stack rebuilds
        reconnectAttempts++;
        // Long, backed-off grace window so we don't fight JsSIP's recovery.
        const delay = Math.min(60000, 15000 * Math.pow(1.5, Math.min(reconnectAttempts - 1, 4)));
        reconnectTimer = setTimeout(() => {
            reconnectTimer = null;
            // If JsSIP already recovered (socket connected), do nothing.
            if (ua && ua.isConnected && ua.isConnected()) {
                console.log('[WP] Socket recovered on its own — no rebuild needed');
                return;
            }
            console.log('[WP] Socket still down after grace window — rebuilding UA');
            registerSIP();
        }, delay);
    }

    function updateRegStatus(state, text) {
        $('regDot').className = 'wp-reg-dot ' + state;
        $('regStatus').textContent = text;
        const sr = $('settingsRegStatus');
        if (sr) { sr.textContent = text; sr.style.color = state === 'registered' ? '#10b981' : state === 'registering' ? '#f59e0b' : '#ef4444'; }
    }

    // ── ICE/STUN/TURN CONFIGURATION ──
    // Loaded from GUI settings (Settings → System → WebRTC tab)
    const ICE_CONFIG = {
        stunServer: @json($iceConfig['stun_server'] ?? ''),
        turnServer: @json($iceConfig['turn_server'] ?? ''),
        turnUsername: @json($iceConfig['turn_username'] ?? ''),
        turnPassword: @json($iceConfig['turn_password'] ?? ''),
        // Local network ranges — auto-detected from SIP/NAT settings
        localNets: @json($iceConfig['local_nets'] ?? []),
        // Max time to wait for ICE gathering before sending INVITE (ms)
        iceGatheringTimeout: @json($iceConfig['ice_gathering_timeout'] ?? 500),
    };

    // Diagnostics state
    const DIAG = { callStartTime: 0, iceStartTime: 0, iceCompleteTime: 0, inviteSentTime: 0, ringingTime: 0, answeredTime: 0, candidateType: '' };

    function getIceServers() {
        const servers = [];
        // Only add STUN/TURN if configured
        if (ICE_CONFIG.stunServer) {
            servers.push({ urls: ICE_CONFIG.stunServer });
        }
        if (ICE_CONFIG.turnServer) {
            const turnEntry = { urls: ICE_CONFIG.turnServer };
            if (ICE_CONFIG.turnUsername) turnEntry.username = ICE_CONFIG.turnUsername;
            if (ICE_CONFIG.turnPassword) turnEntry.credential = ICE_CONFIG.turnPassword;
            servers.push(turnEntry);
        }
        return servers;
    }

    // ── CALLS ──
    function getAudioConstraints() {
        const audio = { echoCancellation: true, noiseSuppression: true, autoGainControl: true };
        if (selectedMicDeviceId) audio.deviceId = { exact: selectedMicDeviceId };
        return { audio, video: false };
    }

    function buildCallOptions() {
        const iceServers = getIceServers();
        console.log('[WP] ICE servers:', JSON.stringify(iceServers));
        return {
            mediaConstraints: getAudioConstraints(),
            pcConfig: {
                iceServers: iceServers,
                iceTransportPolicy: 'all',
                bundlePolicy: 'max-bundle',
                rtcpMuxPolicy: 'require',
                iceCandidatePoolSize: 0,
            },
            rtcOfferConstraints: { offerToReceiveAudio: true, offerToReceiveVideo: false },
            sessionTimersExpires: 1800,
        };
    }

    function makeCall() {
        const target = $('dialInput').value.trim();
        if (!target) { console.warn('[WP] No target'); return; }
        if (!ua) { console.warn('[WP] UA not ready'); updateDisplay('', 'Phone not ready', false); return; }
        if (!ua.isRegistered()) { console.warn('[WP] Not registered, state:', ua.status); updateDisplay('', 'Not registered!', false); return; }

        DIAG.callStartTime = performance.now();
        const sipUri = 'sip:' + target + '@' + CONFIG.sipDomain;
        console.log('[WP] ──── CALL START ────');
        console.log('[WP] T+0ms: makeCall -> target:', target);
        console.log('[WP] UA registered:', ua.isRegistered(), 'connected:', ua.isConnected());
        lastDialed = target;
        updateDisplay(target, 'Calling...', false);
        showCallUI();
        try {
            const opts = buildCallOptions();

            currentSession = ua.call(sipUri, opts);
            console.log('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: session created, status:', currentSession.status);

            currentSession.on('peerconnection', (e) => {
                DIAG.iceStartTime = performance.now();
                console.log('[WP] T+' + Math.round(DIAG.iceStartTime - DIAG.callStartTime) + 'ms: PeerConnection created, ICE gathering starting');
                let hostCandidateFound = false;

                e.peerconnection.addEventListener('icecandidate', (ev) => {
                    const elapsed = Math.round(performance.now() - DIAG.callStartTime);
                    if (ev.candidate) {
                        const cand = ev.candidate.candidate;
                        const type = cand.includes('srflx') ? 'srflx' : cand.includes('relay') ? 'relay' : 'host';
                        console.log('[WP] T+' + elapsed + 'ms: ICE candidate [' + type + ']:', cand.substring(0, 80));
                        if (type === 'host') hostCandidateFound = true;
                    } else {
                        DIAG.iceCompleteTime = performance.now();
                        console.log('[WP] T+' + elapsed + 'ms: ICE gathering COMPLETE (took ' + Math.round(DIAG.iceCompleteTime - DIAG.iceStartTime) + 'ms)');
                    }
                });
                e.peerconnection.addEventListener('iceconnectionstatechange', () => {
                    const state = e.peerconnection.iceConnectionState;
                    console.log('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: ICE connection: ' + state);
                    if (state === 'connected' || state === 'completed') {
                        // Log selected candidate pair
                        e.peerconnection.getStats().then(stats => {
                            stats.forEach(r => {
                                if (r.type === 'candidate-pair' && r.state === 'succeeded') {
                                    const local = stats.get(r.localCandidateId);
                                    const remote = stats.get(r.remoteCandidateId);
                                    if (local) DIAG.candidateType = local.candidateType || 'unknown';
                                    console.log('[WP] Selected candidate: local=' + (local ? local.candidateType + ' ' + local.address + ':' + local.port : '?') + ', remote=' + (remote ? remote.candidateType + ' ' + remote.address + ':' + remote.port : '?'));
                                }
                            });
                        });
                    }
                });
                e.peerconnection.addEventListener('connectionstatechange', () => {
                    console.log('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: Connection: ' + e.peerconnection.connectionState);
                });
            });

            // TRICKLE ICE with smart timeout:
            // - Send INVITE as soon as ICE gathering completes OR after a short timeout.
            // - This ensures STUN candidates (needed for remote users) are included if
            //   STUN responds quickly, but we don't block for 20-30s if STUN is unreachable.
            // - ICE gathering timeout: 500ms (STUN usually responds in <100ms)
            let iceReadyCalled = false;
            let iceTimeout = null;
            currentSession.on('icecandidate', (e) => {
                const elapsed = Math.round(performance.now() - DIAG.callStartTime);
                if (e.candidate) {
                    const cand = e.candidate.candidate;
                    const type = cand.includes('srflx') ? 'srflx' : cand.includes('relay') ? 'relay' : 'host';
                    console.log('[WP] T+' + elapsed + 'ms: ICE candidate [' + type + ']');

                    // Start a short timeout on first candidate (host candidate)
                    if (!iceTimeout && type === 'host') {
                        iceTimeout = setTimeout(() => {
                            if (!iceReadyCalled) {
                                iceReadyCalled = true;
                                console.log('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: ICE timeout reached, sending INVITE with available candidates');
                                e.ready();
                            }
                        }, ICE_CONFIG.iceGatheringTimeout);
                    }
                    // If we get a srflx or relay candidate, we have what we need — send immediately
                    if (type === 'srflx' || type === 'relay') {
                        if (!iceReadyCalled) {
                            iceReadyCalled = true;
                            clearTimeout(iceTimeout);
                            console.log('[WP] T+' + elapsed + 'ms: Got ' + type + ' candidate, sending INVITE now');
                            e.ready();
                        }
                    }
                } else {
                    // null candidate = gathering fully complete
                    clearTimeout(iceTimeout);
                    if (!iceReadyCalled) {
                        iceReadyCalled = true;
                        console.log('[WP] T+' + elapsed + 'ms: ICE gathering complete, sending INVITE');
                        e.ready();
                    }
                }
            });

            currentSession.on('sending', (e) => {
                DIAG.inviteSentTime = performance.now();
                console.log('[WP] T+' + Math.round(DIAG.inviteSentTime - DIAG.callStartTime) + 'ms: ★ SIP INVITE SENT');
            });

            currentSession.on('getusermediafailed', (e) => {
                console.error('[WP] getUserMedia FAILED:', e);
                endCall('Microphone access denied');
            });

            currentSession.on('sdp', (e) => {
                console.log('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: SDP ' + e.type + ' (' + e.originator + ')');
            });

            setupSessionEvents(currentSession);
        } catch (e) {
            console.error('[WP] Call EXCEPTION:', e.name, e.message, e.stack);
            hideCallUI();
            updateDisplay('', 'Call failed: ' + e.message, false);
        }
    }

    function handleIncoming(session) {
        incomingSession = session;
        const caller = session.remote_identity.display_name || session.remote_identity.uri.user || 'Unknown';
        const number = session.remote_identity.uri.user || '';
        $('incomingCaller').textContent = caller;
        $('incomingInfo').textContent = number ? 'Extension ' + number : 'Incoming Call';
        $('incomingOverlay').classList.remove('d-none');
        try { $('ringtone').play().catch(()=>{}); } catch(e){}
        activeCallNotification = showNotification('Incoming Call', caller + (number ? ' (' + number + ')' : ''));
        session.on('failed', () => hideIncoming());
        session.on('ended', () => hideIncoming());
    }

    function answerCall() {
        if (!incomingSession) { console.warn('[WP] No incoming session to answer'); return; }
        DIAG.callStartTime = performance.now();
        console.log('[WP] ──── ANSWER START ────');
        hideIncoming();
        try {
            const opts = buildCallOptions();
            incomingSession.on('peerconnection', (e) => {
                DIAG.iceStartTime = performance.now();
                console.log('[WP] T+' + Math.round(DIAG.iceStartTime - DIAG.callStartTime) + 'ms: Answer PeerConnection created');
                e.peerconnection.addEventListener('icecandidate', (ev) => {
                    const elapsed = Math.round(performance.now() - DIAG.callStartTime);
                    if (ev.candidate) {
                        const type = ev.candidate.candidate.includes('srflx') ? 'srflx' : ev.candidate.candidate.includes('relay') ? 'relay' : 'host';
                        console.log('[WP] T+' + elapsed + 'ms: Answer ICE [' + type + ']:', ev.candidate.candidate.substring(0, 60));
                    } else {
                        DIAG.iceCompleteTime = performance.now();
                        console.log('[WP] T+' + elapsed + 'ms: Answer ICE gathering COMPLETE');
                    }
                });
                e.peerconnection.addEventListener('iceconnectionstatechange', () => {
                    console.log('[WP] Answer ICE connection: ' + e.peerconnection.iceConnectionState);
                });
            });
            // Trickle ICE on answer — same strategy: timeout after first host candidate
            let ansIceReady = false;
            let ansIceTimeout = null;
            incomingSession.on('icecandidate', (e) => {
                if (e.candidate) {
                    const cand = e.candidate.candidate;
                    const type = cand.includes('srflx') ? 'srflx' : cand.includes('relay') ? 'relay' : 'host';
                    if (!ansIceTimeout && type === 'host') {
                        ansIceTimeout = setTimeout(() => {
                            if (!ansIceReady) { ansIceReady = true; e.ready(); }
                        }, ICE_CONFIG.iceGatheringTimeout);
                    }
                    if ((type === 'srflx' || type === 'relay') && !ansIceReady) {
                        ansIceReady = true;
                        clearTimeout(ansIceTimeout);
                        console.log('[WP] Answer: ' + type + ' candidate ready, sending 200 OK');
                        e.ready();
                    }
                } else {
                    clearTimeout(ansIceTimeout);
                    if (!ansIceReady) { ansIceReady = true; e.ready(); }
                }
            });
            incomingSession.on('getusermediafailed', (e) => {
                console.error('[WP] Answer getUserMedia FAILED:', e);
            });
            incomingSession.answer(opts);
        } catch(e) { console.error('[WP] Answer EXCEPTION:', e); hideCallUI(); return; }
        currentSession = incomingSession;
        incomingSession = null;
        setupSessionEvents(currentSession);
        const caller = currentSession.remote_identity.display_name || currentSession.remote_identity.uri.user || 'Unknown';
        updateDisplay(caller, 'Connected', false);
        showCallUI();
    }

    function rejectCall() { if (incomingSession) { incomingSession.terminate(); incomingSession = null; } hideIncoming(); }
    function hideIncoming() { $('incomingOverlay').classList.add('d-none'); clearCallNotification(); try { $('ringtone').pause(); $('ringtone').currentTime = 0; } catch(e){} }

    // ── CALLER-SIDE RINGBACK ──
    // Play the local ringback tone while an OUTGOING call is ringing, stop it
    // the moment the call is answered, fails, or ends. Honors the speaker
    // selection and volume slider so it comes out the right device.
    function startRingback() {
        try {
            const rb = $('ringback');
            if (!rb) return;
            rb.volume = (parseInt($('volumeSlider')?.value || '100') / 100);
            // Route to the chosen speaker (same one remoteAudio uses), if any.
            const spk = $('spkSelect');
            if (typeof rb.setSinkId === 'function' && spk && spk.value) {
                rb.setSinkId(spk.value).catch(()=>{});
            }
            rb.currentTime = 0;
            rb.play().catch(()=>{});
        } catch(e){}
    }
    function stopRingback() {
        try { const rb = $('ringback'); if (rb) { rb.pause(); rb.currentTime = 0; } } catch(e){}
    }

    function setupSessionEvents(session) {
        // Watchdog: poll session every 2s — detects when call ends without events firing
        const watchdog = setInterval(() => {
            if (!currentSession || currentSession !== session) { clearInterval(watchdog); return; }
            // Check JsSIP session state
            if (session.isEnded()) {
                console.log('[WP] Watchdog: session.isEnded()=true, cleaning up');
                clearInterval(watchdog);
                endCall('Call Ended');
                return;
            }
            // Also check WebRTC peer connection — if it's closed/failed/disconnected, call is dead
            if (session.connection) {
                const pcState = session.connection.connectionState || session.connection.iceConnectionState;
                if (pcState === 'closed' || pcState === 'failed' || pcState === 'disconnected') {
                    console.log('[WP] Watchdog: PeerConnection state=' + pcState + ', cleaning up');
                    clearInterval(watchdog);
                    endCall('Call Ended');
                    return;
                }
            }
        }, 2000);
        session.on('progress', (e) => {
            DIAG.ringingTime = performance.now();
            const code = e.response?.status_code || 'no status';
            console.log('[WP] T+' + Math.round(DIAG.ringingTime - DIAG.callStartTime) + 'ms: ★ Progress/Ringing (' + code + ')');
            if (code === 180 || code === 183) {
                updateDisplay(session.remote_identity.display_name || session.remote_identity.uri.user || $('dialInput').value, 'Ringing...', false);
                // Audible ringback for the caller. Skip for 183 (early media):
                // when the far end sends 183 it usually means it will provide
                // its own audio, so playing our tone on top would double up.
                if (code === 180) startRingback();
            }
        });
        session.on('accepted', (e) => {
            DIAG.answeredTime = performance.now();
            stopRingback();
            console.log('[WP] T+' + Math.round(DIAG.answeredTime - DIAG.callStartTime) + 'ms: ★ ANSWERED');
            console.log('[WP] ──── TIMING SUMMARY ────');
            console.log('[WP]   Call setup → INVITE sent: ' + Math.round((DIAG.inviteSentTime || DIAG.callStartTime) - DIAG.callStartTime) + 'ms');
            console.log('[WP]   INVITE sent → Ringing: ' + Math.round((DIAG.ringingTime || DIAG.answeredTime) - (DIAG.inviteSentTime || DIAG.callStartTime)) + 'ms');
            console.log('[WP]   Total call setup: ' + Math.round(DIAG.answeredTime - DIAG.callStartTime) + 'ms');
            console.log('[WP]   ICE candidate type: ' + (DIAG.candidateType || 'pending'));
            console.log('[WP] ────────────────────────');
            updateDisplay(session.remote_identity.display_name || session.remote_identity.uri.user || $('dialInput').value, 'Connected', true);
            startTimer(); attachMedia(session); startQualityMonitoring();
        });
        session.on('confirmed', () => { console.log('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: Confirmed (media ready)'); attachMedia(session); });
        session.on('failed', (e) => { stopRingback(); console.error('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: FAILED:', e.cause, e.originator, e.message?.status_code); endCall('Call failed: ' + (e.cause||'Unknown')); });
        session.on('ended', (e) => { stopRingback(); console.log('[WP] T+' + Math.round(performance.now() - DIAG.callStartTime) + 'ms: Ended:', e.cause); endCall('Call Ended'); });
        session.on('hold', () => { isOnHold = true; $('btnHold').classList.add('active'); $('btnHold').querySelector('span').textContent = 'Resume'; });
        session.on('unhold', () => { isOnHold = false; $('btnHold').classList.remove('active'); $('btnHold').querySelector('span').textContent = 'Hold'; });
        session.on('muted', () => { isMuted = true; $('btnMute').classList.add('active'); $('btnMute').querySelector('span').textContent = 'Unmute'; });
        session.on('unmuted', () => { isMuted = false; $('btnMute').classList.remove('active'); $('btnMute').querySelector('span').textContent = 'Mute'; });
    }

    function attachMedia(session) {
        if (session.connection) {
            const receivers = session.connection.getReceivers();
            if (receivers.length > 0) {
                const stream = new MediaStream();
                receivers.forEach(r => { if (r.track) stream.addTrack(r.track); });
                $('remoteAudio').srcObject = stream;
                $('remoteAudio').volume = parseInt($('volumeSlider').value) / 100;
            }
        }
    }

    // ── CALL CONTROLS ──
    function hangup() {
        console.log('[WP] hangup() called, currentSession:', !!currentSession);
        if (currentSession) {
            try {
                currentSession.terminate();
                console.log('[WP] terminate() called OK');
            } catch(e) {
                console.error('[WP] terminate() error:', e);
            }
        }
        // ALWAYS reset UI — whether session exists or not
        setTimeout(() => { endCall('Call Ended'); }, 300);
    }
    function toggleMute() { if (!currentSession) return; isMuted ? currentSession.unmute({audio:true}) : currentSession.mute({audio:true}); }
    function toggleHold() { if (!currentSession) return; isOnHold ? currentSession.unhold() : currentSession.hold(); }
    function showTransfer() { $('transferDialog').classList.remove('d-none'); $('transferTarget').focus(); }
    function hideTransfer() { $('transferDialog').classList.add('d-none'); $('transferTarget').value = ''; }
    function blindTransfer() {
        const t = $('transferTarget').value.trim();
        if (!t || !currentSession) return;
        console.log('[WP] Blind transfer to:', t);
        currentSession.refer('sip:'+t+'@'+CONFIG.sipDomain, {
            eventHandlers: {
                requestSucceeded: () => {
                    console.log('[WP] REFER accepted, ending our leg');
                    endCall('Transferred to ' + t);
                },
                requestFailed: (e) => {
                    console.error('[WP] REFER failed:', e);
                    updateDisplay('', 'Transfer failed', false);
                }
            }
        });
        hideTransfer();
        // Fallback: if no REFER response within 3s, end anyway
        setTimeout(() => { if(currentSession) endCall('Transferred'); }, 3000);
    }
    function attendedTransfer() {
        const t = $('transferTarget').value.trim();
        if (!t || !currentSession) return;
        console.log('[WP] Attended transfer to:', t);
        currentSession.refer('sip:'+t+'@'+CONFIG.sipDomain, {
            eventHandlers: {
                requestSucceeded: () => {
                    console.log('[WP] Attended REFER accepted');
                    endCall('Transferred to ' + t);
                },
                requestFailed: (e) => {
                    console.error('[WP] Attended REFER failed:', e);
                }
            }
        });
        hideTransfer();
        setTimeout(() => { if(currentSession) endCall('Transferred'); }, 5000);
    }
    function parkCall() { if (currentSession) currentSession.refer('sip:700@'+CONFIG.sipDomain); }
    function toggleRecord() { if (!currentSession) return; sendDTMF('*'); setTimeout(()=>sendDTMF('1'),200); isRecording=!isRecording; $('btnRecord').classList.toggle('active',isRecording); $('btnRecord').querySelector('span').textContent=isRecording?'Stop Rec':'Record'; }
    function sendDTMF(d) { if (currentSession) currentSession.sendDTMF(d); }
    function toggleDtmfPad() { dtmfPadVisible=!dtmfPadVisible; $('dialpad').style.display=dtmfPadVisible?'grid':'none'; $('btnDtmf').classList.toggle('active',dtmfPadVisible); }

    // ── UI HELPERS ──
    function pressKey(k) { if (currentSession) sendDTMF(k); else $('dialInput').value += k; }
    function clearInput() { $('dialInput').value = ''; updateDisplay('', 'Ready', false); }
    function updateDisplay(num, info, showTimer) { $('displayNumber').textContent = num || '\u00a0'; $('displayInfo').textContent = info; showTimer ? $('displayTimer').classList.remove('d-none') : $('displayTimer').classList.add('d-none'); }
    function showCallUI() {
        $('idleActions').classList.add('d-none');
        $('callActions').classList.remove('d-none');
        $('callControls').classList.remove('d-none');
        $('dialpad').style.display='none';
    }
    function hideCallUI() {
        $('idleActions').classList.remove('d-none');
        $('callActions').classList.add('d-none');
        $('callControls').classList.add('d-none');
        $('dialpad').style.display='grid';
        const td = $('transferDialog'); if(td) td.classList.add('d-none');
    }
    function endCall(reason) {
        console.log('[WP] endCall() called, reason:', reason);
        stopRingback();
        if (currentSession) { try { currentSession.terminate(); } catch(e){} }
        currentSession = null;
        stopTimer(); stopQualityMonitoring(); isMuted = isOnHold = isRecording = false;
        updateDisplay('', reason || 'Call Ended', false);
        hideCallUI();
        ['btnMute','btnHold','btnRecord','btnDtmf'].forEach(id => { const el=$(id); if(el) el.classList.remove('active'); });
        const muteSpan = $('btnMute'); if(muteSpan) muteSpan.querySelector('span').textContent='Mute';
        const holdSpan = $('btnHold'); if(holdSpan) holdSpan.querySelector('span').textContent='Hold';
        const recSpan = $('btnRecord'); if(recSpan) recSpan.querySelector('span').textContent='Record';
        setTimeout(loadHistory, 2000);
        try { $('remoteAudio').srcObject = null; } catch(e){}
        setTimeout(() => { if(!currentSession) updateDisplay('', 'Ready', false); }, 2000);
        console.log('[WP] endCall() done, UI reset');
    }

    // ── TIMER ──
    function startTimer() { callSeconds=0; updateTimerDisplay(); callTimer=setInterval(()=>{callSeconds++;updateTimerDisplay();},1000); }
    function stopTimer() { if (callTimer) { clearInterval(callTimer); callTimer=null; } }
    function updateTimerDisplay() { const m=Math.floor(callSeconds/60).toString().padStart(2,'0'), s=(callSeconds%60).toString().padStart(2,'0'); $('displayTimer').textContent=m+':'+s; }

    // ── QOS MONITORING ──
    let qosInterval = null;
    function startQualityMonitoring() {
        qosInterval = setInterval(() => {
            if (!currentSession || !currentSession.connection) return;
            currentSession.connection.getStats(null).then(stats => {
                stats.forEach(r => {
                    if (r.type === 'inbound-rtp' && r.kind === 'audio') {
                        const loss = r.packetsLost||0, recv = r.packetsReceived||0, total = loss+recv;
                        const lr = total>0?((loss/total)*100).toFixed(1):'0.0';
                        const jit = r.jitter?(r.jitter*1000).toFixed(1):'-';
                        $('qosLoss').textContent = lr+'%'; $('qosJitter').textContent = jit+'ms';
                        let mos = 4.5 - parseFloat(lr)*0.1 - (parseFloat(jit)||0)*0.01;
                        mos = Math.max(1,Math.min(5,mos));
                        $('qosMos').textContent = mos.toFixed(1);
                        $('qosMos').style.color = mos>=4?'#10b981':mos>=3?'#f59e0b':'#ef4444';
                    }
                    if (r.type === 'candidate-pair' && r.state === 'succeeded' && r.currentRoundTripTime !== undefined) {
                        $('qosLatency').textContent = (r.currentRoundTripTime*1000).toFixed(0)+'ms';
                    }
                });
            });
        }, 3000);
    }
    function stopQualityMonitoring() { if (qosInterval) { clearInterval(qosInterval); qosInterval=null; } ['qosMos','qosLoss','qosJitter','qosLatency'].forEach(id=>{$(id).textContent='-';$(id).style.color='';}); }

    // ── AUDIO DEVICES ──
    async function loadAudioDevices() {
        try {
            await navigator.mediaDevices.getUserMedia({audio:true});
            const devices = await navigator.mediaDevices.enumerateDevices();
            const mic=$('micSelect'), spk=$('spkSelect');
            mic.innerHTML=''; spk.innerHTML='';
            mic.appendChild(new Option('Default microphone','')); spk.appendChild(new Option('Default speaker',''));
            devices.forEach(d => {
                if (d.kind==='audioinput') mic.appendChild(new Option(d.label||'Microphone',d.deviceId));
                if (d.kind==='audiooutput') spk.appendChild(new Option(d.label||'Speaker',d.deviceId));
            });
            mic.addEventListener('change',()=>{selectedMicDeviceId=mic.value||'';});
            spk.addEventListener('change',()=>{const a=$('remoteAudio');if(a.setSinkId&&spk.value)a.setSinkId(spk.value);});
        } catch(e) { console.warn('Audio devices:', e); }
    }

    // ── CONTACTS ──
    function loadContacts() {
        const list = $('contactList');
        fetch('/api/webphone/contacts',{headers:{'Accept':'application/json'},credentials:'same-origin'})
            .then(r=>r.json()).then(data=>{
                if (!Array.isArray(data)||!data.length) { list.innerHTML='<div style="text-align:center;color:rgba(255,255,255,.25);font-size:.78rem;padding:24px 0;">No contacts</div>'; return; }
                list.innerHTML = data.map(c=>`
                    <div class="wp-list-item" onclick="WP.dialContact('${c.extension}')">
                        <div class="wp-avatar ${c.presence}">
                            ${c.extension.slice(-2)}
                            <span class="presence-dot ${c.presence}"></span>
                        </div>
                        <div style="flex:1;min-width:0;">
                            <div class="item-name">${c.display_name||('Ext '+c.extension)}</div>
                            <div class="item-sub">Ext ${c.extension}</div>
                        </div>
                    </div>
                `).join('');
                $('contactSearch').oninput = function() {
                    const q=this.value.toLowerCase();
                    list.querySelectorAll('.wp-list-item').forEach(el=>el.style.display=el.textContent.toLowerCase().includes(q)?'':'none');
                };
            }).catch(()=>{list.innerHTML='<div style="text-align:center;color:#f87171;font-size:.78rem;padding:24px 0;">Error loading contacts</div>';});
    }

    // ── PHONEBOOK (client contacts from webphone-enabled phonebooks) ──
    let phonebookLoaded = false;
    let phonebookTimer = null;
    function loadPhonebook(q) {
        const list = $('phonebookList');
        phonebookLoaded = true;
        list.innerHTML = '<div style="text-align:center;color:var(--wp-muted);font-size:.82rem;padding:40px 0;">Loading…</div>';
        fetch('/api/webphone/phonebook?q='+encodeURIComponent(q||''),{headers:{'Accept':'application/json'},credentials:'same-origin'})
            .then(r=>r.json()).then(data=>{
                if (!Array.isArray(data)||!data.length) {
                    list.innerHTML='<div style="text-align:center;color:rgba(255,255,255,.25);font-size:.78rem;padding:24px 0;">'+((q&&q.length)?'No matching contacts':'No phonebook enabled for the webphone yet')+'</div>';
                    return;
                }
                list.innerHTML = data.map(c=>{
                    const initials=((c.name||'?').replace(/[^A-Za-z0-9]/g,' ').trim().slice(0,2).toUpperCase())||'#';
                    const sub = (c.number||'') + (c.tag?(' • '+c.tag):'');
                    return `<div class="wp-list-item" onclick="WP.dialContact('${c.dial}')">
                        <div class="wp-avatar" style="background:rgba(16,185,129,.12);color:#34d399;">${initials}</div>
                        <div style="flex:1;min-width:0;"><div class="item-name" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${c.name}</div><div class="item-sub">${sub}</div></div>
                        <button class="callback-btn" onclick="event.stopPropagation();WP.dialContact('${c.dial}');WP.makeCall();" title="Call">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/></svg>
                        </button>
                    </div>`;
                }).join('');
            }).catch(()=>{list.innerHTML='<div style="text-align:center;color:#f87171;font-size:.78rem;padding:24px 0;">Error loading phonebook</div>';});
    }
    function searchPhonebook(q) {
        clearTimeout(phonebookTimer);
        phonebookTimer = setTimeout(()=>loadPhonebook(q), 250);
    }

    // ── HISTORY ──
    function loadHistory() {
        const list = $('historyList');
        fetch('/api/webphone/history',{credentials:'same-origin'}).then(r=>r.json()).then(data=>{
            if (!data.length) { list.innerHTML='<div style="text-align:center;color:rgba(255,255,255,.25);font-size:.78rem;padding:24px 0;">No call history</div>'; return; }

            // Count missed calls
            const missedCount = data.filter(h => h.status==='NO ANSWER'||h.status==='FAILED').length;
            const badge = $('missedBadge');
            if (badge) {
                if (missedCount > 0) { badge.textContent = missedCount; badge.classList.remove('d-none'); }
                else { badge.classList.add('d-none'); }
            }

            list.innerHTML = data.map(h=>{
                const missed = h.status==='NO ANSWER'||h.status==='FAILED';
                const dir = missed?'missed':h.direction;
                const other = h.other || (h.direction==='outbound'?h.dst:h.src);
                const label = h.name || other;
                const dur = h.billsec>0?fmtDur(h.billsec):(missed?'Missed':'0s');
                const dt = new Date(h.date);
                const ds = dt.toLocaleDateString('en-ZA',{day:'2-digit',month:'short'})+' '+dt.toLocaleTimeString('en-ZA',{hour:'2-digit',minute:'2-digit'});
                const icon = dir==='outbound'?'<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>'
                    : dir==='missed'?'<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>'
                    :'<line x1="17" y1="7" x2="7" y2="17"/><polyline points="17 17 7 17 7 7"/>';
                return `<div class="wp-list-item" data-status="${h.status}">
                    <div class="wp-history-badge ${dir}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">${icon}</svg></div>
                    <div style="flex:1;min-width:0;" onclick="WP.dialContact('${other}')"><div class="item-name" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${label}</div><div class="item-sub">${h.name?(other+' · '):''}${ds} | ${h.direction} | Duration: ${dur}</div></div>
                    <div style="text-align:right;display:flex;align-items:center;gap:6px;">
                        <span style="font-size:.72rem;${missed?'color:#f87171;':''}">${dur}</span>
                        <button class="callback-btn" onclick="WP.dialContact('${other}');WP.makeCall();" title="Call back">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/></svg>
                        </button>
                    </div>
                </div>`;
            }).join('');
        }).catch(()=>{});
    }

    // ── SPEED DIALS ──
    function loadSpeedDials() {
        const list = $('speedDialList');
        fetch('/api/webphone/speed-dials',{credentials:'same-origin'}).then(r=>r.json()).then(data=>{
            if (!Array.isArray(data)||!data.length) { list.innerHTML='<div style="text-align:center;color:rgba(255,255,255,.25);font-size:.78rem;padding:24px 0;">No speed dials</div>'; return; }
            list.innerHTML = data.map(s=>`
                <div class="wp-list-item" onclick="WP.dialContact('${s.dst_value}')">
                    <div class="wp-avatar online" style="background:rgba(99,102,241,.1);color:#818cf8;">${s.code||'#'}</div>
                    <div style="flex:1;min-width:0;"><div class="item-name">${s.label}</div><div class="item-sub">${s.dst_value}</div></div>
                </div>
            `).join('');
        }).catch(()=>{list.innerHTML='<div style="text-align:center;color:#f87171;font-size:.78rem;padding:24px 0;">Error loading speed dials</div>';});
    }

    // ── HELPERS ──
    function dialContact(ext) { $('dialInput').value=ext; updateDisplay(ext,'Press call to dial',false); }
    function redial() { if(lastDialed){$('dialInput').value=lastDialed;makeCall();} }
    function checkVoicemail() { $('dialInput').value='*97'; makeCall(); }

    function loadVoicemails() {
        const list = $('voicemailList');
        fetch('/api/webphone/voicemails',{credentials:'same-origin'}).then(r=>r.json()).then(data=>{
            const badge = $('vmBadge');
            if (!Array.isArray(data)||!data.length) {
                list.innerHTML='<div style="text-align:center;color:rgba(255,255,255,.25);font-size:.78rem;padding:24px 0;"><svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5" style="display:block;margin:0 auto 8px;opacity:.3;"><circle cx="5.5" cy="11.5" r="4.5"/><circle cx="18.5" cy="11.5" r="4.5"/><line x1="5.5" x2="18.5" y1="16" y2="16"/></svg>No voicemail messages</div>';
                if(badge) badge.classList.add('d-none');
                return;
            }
            if(badge) { badge.textContent=data.length; badge.classList.remove('d-none'); }

            list.innerHTML = data.map(vm=>{
                const dt = vm.date ? new Date(vm.date) : null;
                const ds = dt ? dt.toLocaleDateString('en-ZA',{day:'2-digit',month:'short'})+' '+dt.toLocaleTimeString('en-ZA',{hour:'2-digit',minute:'2-digit'}) : '';
                const dur = vm.duration > 0 ? fmtDur(vm.duration) : '';
                return `<div class="wp-list-item">
                    <div class="wp-history-badge inbound" style="background:rgba(99,102,241,.1);color:#818cf8;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5.5" cy="11.5" r="4.5"/><circle cx="18.5" cy="11.5" r="4.5"/><line x1="5.5" x2="18.5" y1="16" y2="16"/></svg>
                    </div>
                    <div style="flex:1;min-width:0;" onclick="WP.dialContact('*97');WP.makeCall();">
                        <div class="item-name">${vm.callerid||'Unknown'}</div>
                        <div class="item-sub">${ds} ${dur ? '• '+dur : ''}</div>
                    </div>
                    <button class="callback-btn" onclick="WP.dialContact('${vm.callerid}');WP.makeCall();" title="Call back">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/></svg>
                    </button>
                </div>`;
            }).join('');
        }).catch(()=>{list.innerHTML='<div style="text-align:center;color:#f87171;font-size:.78rem;padding:24px 0;">Error loading voicemail</div>';});
    }
    function fmtDur(s) { return s<60?s+'s':Math.floor(s/60)+'m '+(s%60>0?(s%60)+'s':''); }
    function setupKeyboard() {
        document.addEventListener('keydown', e => {
            const a=document.activeElement;
            if(a&&a.tagName==='INPUT'&&a.id!=='dialInput')return;
            if(e.key==='Enter'&&!currentSession){e.preventDefault();makeCall();}
            else if(e.key==='Escape'){if(currentSession)hangup();else clearInput();}
        });
    }

    // ── DESKTOP (WINDOWS) NOTIFICATIONS ──
    // Chrome surfaces these as native Windows toast notifications even when the
    // browser window is MINIMISED (it must still be running — a fully closed
    // browser can't notify without a service worker, which we don't use here).
    // Requires HTTPS (we have it) and the user granting permission once.
    let activeCallNotification = null;

    function showNotification(title, body) {
        try {
            if (!('Notification' in window) || Notification.permission !== 'granted') {
                return null;
            }
            const n = new Notification(title, {
                body: body,
                icon: '/favicon.ico',
                tag: 'wp-incoming-call',   // collapse duplicates into one toast
                renotify: true,
                requireInteraction: true,  // stay visible while the phone rings
                silent: false,
            });
            // Clicking the Windows toast focuses the webphone so they can answer.
            n.onclick = function () {
                try { window.focus(); } catch (e) {}
                try { n.close(); } catch (e) {}
            };
            return n;
        } catch (e) {
            return null;
        }
    }

    // Dismiss the ringing toast once the call is answered / missed / cancelled.
    function clearCallNotification() {
        try { if (activeCallNotification) { activeCallNotification.close(); } } catch (e) {}
        activeCallNotification = null;
    }

    function requestNotificationPermission() {
        // Re-ask whenever permission is not already decided as granted/denied.
        // (Browsers only show the prompt while it is "default"; once the user
        // has explicitly blocked it we can't re-prompt — that's their choice.)
        if ('Notification' in window && Notification.permission === 'default') {
            try { Notification.requestPermission(); } catch (e) {}
        }
    }

    // ── NOTIFICATION-PERMISSION BANNER ──
    // Shows a small amber bar at the top ONLY when desktop notifications aren't
    // granted, so users understand why they're not getting Windows alerts for
    // incoming calls — and can fix it. Dismissible per browser session.
    function refreshNotifBanner() {
        const banner = $('notifBanner');
        if (!banner) return;

        // Not supported, already granted, or dismissed this session → hide.
        const unsupported = !('Notification' in window);
        if (unsupported || Notification.permission === 'granted'
            || sessionStorage.getItem('wpNotifBannerDismissed') === '1') {
            banner.style.display = 'none';
            return;
        }

        const txt = $('notifBannerText');
        const action = $('notifBannerAction');
        if (Notification.permission === 'denied') {
            // Can't re-prompt once blocked — tell them how to re-enable it.
            if (txt) txt.textContent = 'Desktop call alerts are blocked. Click the padlock in your browser\'s address bar → Notifications → Allow, then refresh.';
            if (action) action.style.display = 'none';
        } else {
            // 'default' — we can still prompt via the Enable button.
            if (txt) txt.textContent = 'Enable desktop notifications to get a Windows alert when a call comes in.';
            if (action) action.style.display = '';
        }
        banner.style.display = 'flex';
    }

    function enableNotifications() {
        if (!('Notification' in window)) return;
        try {
            Notification.requestPermission().then(refreshNotifBanner).catch(refreshNotifBanner);
        } catch (e) {
            // Older browsers use the callback form.
            try { Notification.requestPermission(refreshNotifBanner); } catch (e2) {}
        }
    }

    function dismissNotifBanner() {
        try { sessionStorage.setItem('wpNotifBannerDismissed', '1'); } catch (e) {}
        const banner = $('notifBanner');
        if (banner) banner.style.display = 'none';
    }

    // ── SIDEBAR TABS ──
    function switchTab(btn) {
        // Update nav buttons (both icon nav and panel nav)
        document.querySelectorAll('.wp-nav-btn[data-panel],.wp-panel-nav-item[data-panel]').forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        // Also sync the other nav (icon<->panel)
        const panel = btn.dataset.panel;
        document.querySelectorAll('[data-panel="'+panel+'"]').forEach(b=>b.classList.add('active'));

        const panels = ['contacts','phonebook','history','speed','voicemail'];
        const titles = {contacts:'Colleagues', phonebook:'Phonebook', history:'Call History', speed:'Speed Dials', voicemail:'Voice Messages'};
        panels.forEach(p=>{
            const el = $('panel'+p.charAt(0).toUpperCase()+p.slice(1));
            if(el) el.style.display = panel===p?'':'none';
        });
        const titleEl = $('panelTitle');
        if (titleEl) titleEl.textContent = titles[panel] || 'Call History';
        // Lazy-load the phonebook the first time it's opened.
        if (panel==='phonebook' && !phonebookLoaded) loadPhonebook('');
        // Show/hide filters (only for history)
        const filters = $('historyFilters');
        if (filters) filters.style.display = panel==='history' ? 'flex' : 'none';
    }

    function filterHistory(value) {
        const items = document.querySelectorAll('#historyList .wp-list-item');
        items.forEach(el => {
            if (value === 'all') { el.style.display = ''; return; }
            const status = el.dataset.status || '';
            if (value === 'noanswer') el.style.display = (status==='NO ANSWER'||status==='FAILED') ? '' : 'none';
            else if (value === 'answered') el.style.display = status==='ANSWERED' ? '' : 'none';
            else if (value === 'busy') el.style.display = status==='BUSY' ? '' : 'none';
            else if (value === 'failed') el.style.display = status==='FAILED' ? '' : 'none';
            else el.style.display = '';
        });
    }

    // ── SETTINGS ──
    function toggleSettings() { $('settingsPanel').classList.toggle('d-none'); }
    function reconnectSIP() {
        CONFIG.extension = $('cfgExtension').value.trim();
        CONFIG.username = $('cfgUsername').value.trim() || CONFIG.extension;
        CONFIG.password = $('cfgPassword').value.trim();
        CONFIG.sipDomain = $('cfgServer').value.trim();
        CONFIG.wssUrl = $('cfgWssUrl').value.trim();
        $('extLabel').textContent = CONFIG.extension;
        reconnectAttempts = 0;
        registerSIP();
        toggleSettings();
    }
    function setupVolumeControls() {
        const vs=$('volumeSlider'),vl=$('volumeLabel'),rv=$('ringtoneVolume'),rl=$('ringtoneLabel');
        if(vs) vs.addEventListener('input',function(){if(vl)vl.textContent=this.value+'%';$('remoteAudio').volume=this.value/100;});
        if(rv) rv.addEventListener('input',function(){if(rl)rl.textContent=this.value+'%';$('ringtone').volume=this.value/100;});
    }

    // ── MIC TEST ──
    let micTestStream=null,micTestAnalyser=null,micTestRaf=null;
    function testMicrophone() {
        const btn=$('btnTestMic');
        if(micTestStream){micTestStream.getTracks().forEach(t=>t.stop());micTestStream=null;cancelAnimationFrame(micTestRaf);$('micMeter').style.width='0%';btn.classList.remove('active');return;}
        const c=selectedMicDeviceId?{audio:{deviceId:{exact:selectedMicDeviceId}}}:{audio:true};
        navigator.mediaDevices.getUserMedia(c).then(stream=>{
            micTestStream=stream;btn.classList.add('active');
            const ctx=new(window.AudioContext||window.webkitAudioContext)(),src=ctx.createMediaStreamSource(stream);
            micTestAnalyser=ctx.createAnalyser();micTestAnalyser.fftSize=256;src.connect(micTestAnalyser);
            const data=new Uint8Array(micTestAnalyser.frequencyBinCount);
            (function animate(){if(!micTestStream)return;micTestAnalyser.getByteFrequencyData(data);let sum=0;for(let i=0;i<data.length;i++)sum+=data[i];const pct=Math.min(100,(sum/data.length/128)*100);$('micMeter').style.width=pct+'%';$('micMeter').style.background=pct>60?'#10b981':pct>20?'#f59e0b':'#ef4444';micTestRaf=requestAnimationFrame(animate);})();
            setTimeout(()=>{if(micTestStream)testMicrophone();},10000);
        }).catch(()=>alert('Could not access microphone.'));
    }

    // ── SPEAKER TEST ──
    let spkCtx=null,spkOsc=null;
    function testSpeaker() {
        const btn=$('btnTestSpk');
        if(spkOsc){spkOsc.stop();spkOsc=null;spkCtx.close();spkCtx=null;btn.classList.remove('active');$('testSpkLabel').textContent='Test Speaker';return;}
        btn.classList.add('active');$('testSpkLabel').textContent='Playing...';
        spkCtx=new(window.AudioContext||window.webkitAudioContext)();const g=spkCtx.createGain();g.gain.value=(parseInt($('volumeSlider').value)/100)*.3;g.connect(spkCtx.destination);
        spkOsc=spkCtx.createOscillator();spkOsc.type='sine';spkOsc.frequency.value=440;spkOsc.connect(g);spkOsc.start();
        setTimeout(()=>{if(spkOsc)testSpeaker();},3000);
    }

    return {
        init, pressKey, clearInput, makeCall, hangup, toggleMute, toggleHold,
        showTransfer, hideTransfer, blindTransfer, attendedTransfer,
        parkCall, toggleRecord, toggleDtmfPad, answerCall, rejectCall,
        dialContact, redial, checkVoicemail, switchTab, filterHistory,
        searchPhonebook,
        toggleSettings, testMicrophone, testSpeaker, reconnectSIP,
        enableNotifications, dismissNotifBanner,
    };
})();
document.addEventListener('DOMContentLoaded', WP.init);
</script>
@endsection