@extends('layouts.app')

@section('title', 'WebRTC Softphone')

@section('content')
<style>
  .softphone-card{ background:#ffffff; border:1px solid #e5e7eb; }
  .keypad-btn{ background:#0f172a; color:#ffffff; }
  .keypad-btn:hover{ background:#1f2937; }
  .btn-disabled{ background:#e5e7eb !important; color:#64748b !important; border-color:#e5e7eb !important; cursor:not-allowed !important; }
</style>

<div class="px-4 sm:px-6 lg:px-8 py-6" id="softphone-root">
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl font-semibold text-gray-900">WebRTC Softphone</h1>
    <div id="uaState" class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-slate-800 text-white">UA: idle</div>
  </div>

  <div class="rounded-2xl softphone-card shadow p-6 mb-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div>
        <label class="block text-sm mb-1">WSS URL</label>
        <input id="wss" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
               value="{{ $defaults['wss'] }}" placeholder="wss://IP_OR_DOMAIN:8089/ws">
      </div>
      <div>
        <label class="block text-sm mb-1">Domain / Realm</label>
        <input id="realm" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
               value="{{ $defaults['realm'] }}" placeholder="your.sip.realm">
      </div>
      <div>
        <label class="block text-sm mb-1">Username</label>
        <input id="username" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
               value="{{ $defaults['username'] }}" placeholder="1001">
      </div>
      <div>
        <label class="block text-sm mb-1">Password</label>
        <input id="password" type="password" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
               placeholder="••••••••">
      </div>
      <div>
        <label class="block text-sm mb-1">Display Name (optional)</label>
        <input id="displayName" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
               value="{{ $defaults['displayName'] }}" placeholder="Agent Name">
      </div>
      <div class="flex items-end gap-2">
        <button id="btnRegister" class="inline-flex items-center justify-center rounded-xl px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white shadow w-full">
          <x-lucide-plug class="w-4 h-4 mr-2" /> Register
        </button>
        <button id="btnUnregister" class="inline-flex items-center justify-center rounded-xl px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white shadow w-28 btn-disabled" disabled>
          <x-lucide-power class="w-4 h-4 mr-2" /> Unreg
        </button>
      </div>
    </div>
  </div>

  <div class="flex items-center gap-4 mb-4 text-sm">
    <button class="tab-btn px-4 py-2 rounded-lg font-medium bg-slate-800 text-white" data-tab="tab-phone"><x-lucide-phone class="w-4 h-4 inline mr-1.5" /> Phone</button>
    <button class="tab-btn px-4 py-2 rounded-lg font-medium text-slate-700 hover:bg-slate-100" data-tab="tab-av"><x-lucide-settings class="w-4 h-4 inline mr-1.5" /> Audio/Video</button>
    <button class="tab-btn px-4 py-2 rounded-lg font-medium text-slate-700 hover:bg-slate-100" data-tab="tab-logs"><x-lucide-list class="w-4 h-4 inline mr-1.5" /> Logs</button>
  </div>

  <section id="tab-phone" class="rounded-2xl softphone-card shadow p-6">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="space-y-4">
        <div>
          <label class="block text-sm mb-1">Dial</label>
          <input id="dial" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                 value="{{ $defaults['dial'] }}" placeholder="1000">
        </div>
        <div class="flex flex-wrap gap-2">
          <button id="btnCall"   class="inline-flex items-center rounded-xl px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white shadow"><x-lucide-phone-call class="w-4 h-4 mr-2"/> Call</button>
          <button id="btnAnswer" class="inline-flex items-center rounded-xl px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white shadow btn-disabled" disabled><x-lucide-phone class="w-4 h-4 mr-2"/> Answer</button>
          <button id="btnReject" class="inline-flex items-center rounded-xl px-4 py-2 bg-rose-600 hover:bg-rose-500 text-white shadow btn-disabled" disabled><x-lucide-phone-off class="w-4 h-4 mr-2"/> Reject</button>
          <button id="btnHangup" class="inline-flex items-center rounded-xl px-4 py-2 bg-rose-600 hover:bg-rose-500 text-white shadow btn-disabled" disabled><x-lucide-phone-off class="w-4 h-4 mr-2"/> Hangup</button>
        </div>

        <div class="flex flex-wrap gap-2">
          <button id="btnMute" class="inline-flex items-center rounded-xl px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white shadow btn-disabled" disabled>
            <x-lucide-mic-off class="w-4 h-4 mr-2" data-icon="mute-on"/>
            <x-lucide-mic     class="w-4 h-4 mr-2 hidden" data-icon="mute-off"/>
            <span data-label="mute">Mute</span>
          </button>

          <button id="btnHold" class="inline-flex items-center rounded-xl px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white shadow btn-disabled" disabled>
            <x-lucide-pause class="w-4 h-4 mr-2" data-icon="hold-on"/>
            <x-lucide-play  class="w-4 h-4 mr-2 hidden" data-icon="hold-off"/>
            <span data-label="hold">Hold</span>
          </button>

          <button id="btnKeypad" class="inline-flex items-center rounded-xl px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white shadow">
            <x-lucide-grid-3x3 class="w-4 h-4 mr-2"/> Keypad
          </button>
        </div>

        <div id="callState" class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-slate-800 text-white">Call: idle</div>
      </div>

      <div id="keypad" class="grid grid-cols-3 gap-3 place-content-start">
        @php $keys = ['1','2','3','4','5','6','7','8','9','*','0','#']; @endphp
        @foreach($keys as $k)
          <button class="keypad-btn inline-flex items-center justify-center rounded-xl px-4 py-3 text-xl shadow" data-key="{{ $k }}">{{ $k }}</button>
        @endforeach
      </div>

      <div class="space-y-2">
        <label class="block text-sm">Remote Audio</label>
        <audio id="remoteAudio" autoplay playsinline class="w-full"></audio>
        <div class="text-xs text-slate-500">Tip: press any button to unlock audio in the browser.</div>
      </div>
    </div>
  </section>

  <section id="tab-av" class="rounded-2xl softphone-card shadow p-6 hidden">
    <div class="grid md:grid-cols-2 gap-6">
      <div class="space-y-3">
        <h3 class="text-lg font-semibold">Inputs</h3>
        <label class="block text-sm">Microphone</label>
        <select id="micSelect" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"></select>

        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-sm">Mic Level</span>
            <span id="micPct" class="text-xs text-slate-500">0%</span>
          </div>
          <div class="w-full bg-slate-200 rounded-full overflow-hidden">
            <div id="micMeter" style="height:10px; border-radius:9999px; background:linear-gradient(90deg,#22c55e 0%,#f59e0b 60%,#ef4444 85%); transform-origin:left center; transform:scaleX(0);"></div>
          </div>
        </div>
      </div>

      <div class="space-y-3">
        <h3 class="text-lg font-semibold">Outputs</h3>
        <label class="block text-sm">Speaker</label>
        <select id="spkSelect" class="w-full rounded-xl bg-white border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"></select>
        <div class="flex gap-2">
          <button id="btnTestTone" class="inline-flex items-center rounded-xl px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white shadow"><x-lucide-play class="w-4 h-4 mr-2"/> Play test</button>
          <button id="btnStopTone" class="inline-flex items-center rounded-xl px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white shadow"><x-lucide-square class="w-4 h-4 mr-2"/> Stop</button>
        </div>
        <div class="text-xs text-slate-500">Speaker routing uses <code>setSinkId</code> (Chrome/Edge).</div>
      </div>
    </div>

    <div class="mt-4 flex items-center gap-2">
      <button id="btnSaveDevices" class="inline-flex items-center rounded-xl px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white shadow"><x-lucide-save class="w-4 h-4 mr-2"/> Save</button>
      <div id="saveHint" class="text-sm text-slate-500">Saved to browser; applied to new calls.</div>
    </div>
  </section>

  <section id="tab-logs" class="rounded-2xl softphone-card shadow p-0 hidden">
    <textarea id="log" class="w-full h-72 p-4 bg-slate-50 rounded-2xl outline-none" readonly></textarea>
  </section>
</div>

{{-- pass defaults to JS safely --}}
<script id="softphone-defaults" type="application/json">@json($defaults)</script>

{{-- Loader: try CDN, then /vendor/jssip/JsSIP.min.js, then /vendor/jssip/jssip.min.js. When loaded, init. --}}
<script>
(function(){
  const badge = document.getElementById('uaState');
  function setBadge(text, cls){ badge.textContent = 'UA: ' + text; badge.className = 'inline-flex items-center rounded-full px-3 py-1 text-xs font-medium '+cls+' text-white'; }
  function load(src, onok, onfail){
    const s=document.createElement('script'); s.src=src; s.async=false;
    s.onload=onok; s.onerror=onfail; document.head.appendChild(s);
  }
  function bootWhenReady(tries=0){
    if (window.JsSIP){ setBadge('ready','bg-emerald-600'); window.__initSoftphone && window.__initSoftphone(); return; }
    if (tries>60){ setBadge('JsSIP missing','bg-rose-600'); return; }
    setTimeout(()=>bootWhenReady(tries+1),100);
  }
  // 1) CDN -> 2) Uppercase local -> 3) lowercase local
  load('https://cdn.jsdelivr.net/npm/jssip@3.10.0/lib/JsSIP.min.js',
    ()=>bootWhenReady(),
    ()=>load('{{ asset('vendor/jssip/JsSIP.min.js') }}',
      ()=>bootWhenReady(),
      ()=>load('{{ asset('vendor/jssip/jssip.min.js') }}', ()=>bootWhenReady(), ()=>bootWhenReady(61))
    )
  );
})();
</script>

{{-- Softphone logic (runs only after window.JsSIP exists) --}}
<script>
window.__initSoftphone = function(){
  const $ = (s)=>document.querySelector(s);
  const tabs = document.querySelectorAll('.tab-btn');
  tabs.forEach(btn => btn.addEventListener('click', () => {
    tabs.forEach(b=>b.classList.remove('bg-slate-800','text-white'));
    btn.classList.add('bg-slate-800','text-white');
    const id = btn.getAttribute('data-tab');
    document.querySelectorAll('section[id^="tab-"]').forEach(s=>s.classList.add('hidden'));
    document.getElementById(id).classList.remove('hidden');
  }));

  const uaState = $('#uaState'), callState = $('#callState');
  const wss = $('#wss'), realm = $('#realm'), username = $('#username'), password = $('#password'), displayName = $('#displayName');
  const dial = $('#dial'), remoteAudio = $('#remoteAudio'), logEl = $('#log');

  const btnRegister = $('#btnRegister'), btnUnregister = $('#btnUnregister');
  const btnCall = $('#btnCall'), btnAnswer = $('#btnAnswer'), btnReject = $('#btnReject'), btnHangup = $('#btnHangup');
  const btnMute = $('#btnMute'), btnHold = $('#btnHold'), btnKeypad = $('#btnKeypad'), keypad = $('#keypad');

  const micSelect = $('#micSelect'), spkSelect = $('#spkSelect'), micMeter = $('#micMeter'), micPct = $('#micPct');
  const btnTestTone = $('#btnTestTone'), btnStopTone = $('#btnStopTone'), btnSaveDevices = $('#btnSaveDevices');

  const muteOnIcon  = btnMute.querySelector('[data-icon="mute-on"]');
  const muteOffIcon = btnMute.querySelector('[data-icon="mute-off"]');
  const muteLabel   = btnMute.querySelector('[data-label="mute"]');
  const holdOnIcon  = btnHold.querySelector('[data-icon="hold-on"]');
  const holdOffIcon = btnHold.querySelector('[data-icon="hold-off"]');
  const holdLabel   = btnHold.querySelector('[data-label="hold"]');

  const SERVER_DEFAULTS = JSON.parse(document.getElementById('softphone-defaults').textContent||'{}');
  function prefs(){ try{ return Object.assign({}, SERVER_DEFAULTS, JSON.parse(localStorage.getItem('webrtc-softphone')||'{}')); }catch(_){ return SERVER_DEFAULTS; } }

  function log(m){ const t=new Date().toTimeString().slice(0,8); if(logEl){ logEl.value += `[${t}] ${m}\n`; logEl.scrollTop=logEl.scrollHeight; } }
  function setUAState(t,cls){ uaState.className=`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${cls} text-white`; uaState.textContent=`UA: ${t}`; }

  (function initInputs(){ const P=prefs(); wss.value=P.wss||''; realm.value=P.realm||''; username.value=P.username||''; displayName.value=P.displayName||P.username||'Agent'; dial.value=P.dial||'1000'; })();

  function setDisabled(el, disabled){ el.disabled = disabled; el.classList.toggle('btn-disabled', disabled); }

  let audioCtx, analyser, micSrc, micStream, testOsc;
  async function refreshDevices(){
    const devices = await navigator.mediaDevices.enumerateDevices();
    const P=prefs();
    micSelect.innerHTML = devices.filter(d=>d.kind==='audioinput').map(d=>`<option value="${d.deviceId}">${d.label||'Microphone'}</option>`).join('');
    spkSelect.innerHTML = devices.filter(d=>d.kind==='audiooutput').map(d=>`<option value="${d.deviceId}">${d.label||'Speaker'}</option>`).join('');
    if(P.micId && [...micSelect.options].some(o=>o.value===P.micId)) micSelect.value=P.micId;
    if(P.spkId && [...spkSelect.options].some(o=>o.value===P.spkId)) spkSelect.value=P.spkId;
    if(typeof remoteAudio.setSinkId==='function' && spkSelect.value){ try{ await remoteAudio.setSinkId(spkSelect.value);}catch(e){log('Speaker route: '+e.message);} }
  }
  async function initMicMeter(){
    try{
      if(micStream){ micStream.getTracks().forEach(t=>t.stop()); micStream=null; }
      const P = prefs();
      micStream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: micSelect.value?{exact:micSelect.value}:(P.micId?{exact:P.micId}:undefined) }});
      const AC = window.AudioContext||window.webkitAudioContext; audioCtx = audioCtx || new AC();
      micSrc && micSrc.disconnect(); analyser = audioCtx.createAnalyser(); analyser.fftSize=512;
      micSrc = audioCtx.createMediaStreamSource(micStream); micSrc.connect(analyser);
      const data = new Uint8Array(analyser.frequencyBinCount);
      (function loop(){ analyser.getByteTimeDomainData(data); let min=255,max=0; for(const v of data){ if(v<min)min=v; if(v>max)max=v; }
        const amp=(max-min)/255; micMeter.style.transform=`scaleX(${Math.min(1,amp*3)})`; micPct.textContent=`${Math.round(amp*100)}%`; requestAnimationFrame(loop);
      })();
    }catch(e){ log('Mic meter: '+e.message); }
  }
  btnTestTone?.addEventListener('click', ()=>{ const AC=window.AudioContext||window.webkitAudioContext; audioCtx = audioCtx || new AC(); testOsc && testOsc.stop();
    const g=audioCtx.createGain(); g.gain.value=0.05; testOsc=audioCtx.createOscillator(); testOsc.frequency.value=440; testOsc.connect(g).connect(audioCtx.destination); testOsc.start(); log('Test tone'); });
  btnStopTone?.addEventListener('click', ()=>{ if(testOsc){ testOsc.stop(); testOsc=null; log('Stop tone'); }});
  btnSaveDevices?.addEventListener('click', async ()=>{ const P=prefs(); localStorage.setItem('webrtc-softphone', JSON.stringify(Object.assign({}, P, { micId:micSelect.value||'', spkId:spkSelect.value||'' })));
    if(typeof remoteAudio.setSinkId==='function' && spkSelect.value){ try{ await remoteAudio.setSinkId(spkSelect.value);}catch(e){log('Speaker route: '+e.message);} }
    await initMicMeter(); log('Device prefs saved.');
  });
  navigator.mediaDevices?.addEventListener?.('devicechange', async()=>{ await refreshDevices(); log('Devices changed.'); });
  ['click','keydown','touchstart'].forEach(ev=>window.addEventListener(ev, ()=>{ remoteAudio.muted=false; }, {once:true}));

  keypad?.querySelectorAll('button[data-key]').forEach(b=> b.addEventListener('click', ()=>{ if(currentSession){ try{ currentSession.sendDTMF(b.dataset.key); log('DTMF: '+b.dataset.key);}catch(_){ } }}));

  let ua=null, currentSession=null, onHold=false, muted=false;
  function setButtonsIdle(){ setDisabled(btnCall,false); setDisabled(btnHangup,true); setDisabled(btnAnswer,true); setDisabled(btnReject,true); setDisabled(btnMute,true); setDisabled(btnHold,true); callState.textContent='Call: idle'; }
  function setButtonsInCall(){ setDisabled(btnCall,true); setDisabled(btnHangup,false); setDisabled(btnAnswer,true); setDisabled(btnReject,true); setDisabled(btnMute,false); setDisabled(btnHold,false); callState.textContent='Call: established'; }
  function setButtonsRingingIncoming(){ setDisabled(btnCall,true); setDisabled(btnHangup,true); setDisabled(btnAnswer,false); setDisabled(btnReject,false); setDisabled(btnMute,true); setDisabled(btnHold,true); callState.textContent='Call: incoming'; }
  setButtonsIdle();

  btnRegister.addEventListener('click', ()=>{
    if(!window.JsSIP){ log('JsSIP not loaded'); setUAState('missing','bg-rose-600'); return; }
    const wssUrl=wss.value.trim(), realmHost=realm.value.trim(), user=username.value.trim(), disp=(displayName.value.trim()||user);
    if(!wssUrl||!realmHost||!user){ log('Missing WSS/Realm/Username'); return; }
    const P=prefs(); localStorage.setItem('webrtc-softphone', JSON.stringify(Object.assign({}, P, { wss:wssUrl, realm:realmHost, username:user, displayName:disp })));

    try{
      if(ua){ try{ ua.stop(); }catch(_){ } }
      const socket = new JsSIP.WebSocketInterface(wssUrl);
      ua = new JsSIP.UA({ sockets:[socket], uri:`sip:${user}@${realmHost}`, password:password.value, display_name:disp, session_timers:false, register:true });

      ua.on('connected',      ()=>{ log('WS connected'); setUAState('ws-ok','bg-emerald-600'); });
      ua.on('disconnected',   ()=>{ log('WS disconnected'); setUAState('ws-down','bg-rose-600'); });
      ua.on('registered',     ()=>{ log('Registered'); setDisabled(btnRegister,true); setDisabled(btnUnregister,false); });
      ua.on('unregistered',   ()=>{ log('Unregistered'); setDisabled(btnRegister,false); setDisabled(btnUnregister,true); });
      ua.on('registrationFailed', (e)=>{ log('Registration failed: '+(e.cause||e.status_code)); setUAState('reg-failed','bg-rose-600'); });

      ua.on('newRTCSession', e=>{
        const session = e.session; if(currentSession){ try{ currentSession.terminate(); }catch(_){ } }
        currentSession = session;

        if(e.originator==='local'){ log('Outgoing call'); setButtonsInCall(); }
        if(e.originator==='remote'){ log('Incoming call...'); setButtonsRingingIncoming(); }

        session.on('progress', ()=>{ log('progress'); callState.textContent='Call: ringing'; });
        session.on('accepted', ()=>{ log('established'); setButtonsInCall(); });
        session.on('ended',   ()=>{ log('ended'); currentSession=null; setButtonsIdle(); onHold=false; muted=false; resetMuteHoldUI(); });
        session.on('failed',  ev=>{ log('failed: '+(ev.cause||ev.status_code)); currentSession=null; setButtonsIdle(); onHold=false; muted=false; resetMuteHoldUI(); });

        session.on('addstream', ev=>{ remoteAudio.srcObject = ev.stream; });
        session.on('peerconnection', ev=>{ ev.peerconnection.addEventListener('track', t=>{ remoteAudio.srcObject = t.streams[0]; }); });
      });

      ua.start();
    }catch(e){ log('UA: '+e.message); }
  });

  btnUnregister.addEventListener('click', ()=>{ try{ ua?.unregister(); }catch(e){ log(e.message); }});
  btnCall.addEventListener('click', ()=>{ if(!ua) return log('UA not ready'); const P=prefs();
    ua.call(`sip:${dial.value.trim()}@${(realm.value||'').trim()}`, { mediaConstraints:{ audio:{ deviceId:P.micId?{exact:P.micId}:undefined }}, pcConfig:{ iceServers:[] }, rtcOfferConstraints:{ offerToReceiveAudio:true, offerToReceiveVideo:false }});
  });
  btnAnswer.addEventListener('click', ()=>{ if(!currentSession) return; const P=prefs();
    try{ currentSession.answer({ mediaConstraints:{ audio:{ deviceId:P.micId?{exact:P.micId}:undefined }}, pcConfig:{ iceServers:[] } }); setButtonsInCall(); log('Answer'); }catch(e){ log('Answer: '+e.message); }
  });
  btnReject.addEventListener('click', ()=>{ try{ currentSession?.terminate(); }catch(_){ } });
  btnHangup.addEventListener('click', ()=>{ try{ currentSession?.terminate(); }catch(_){ } });

  function resetMuteHoldUI(){ muteOnIcon.classList.remove('hidden'); muteOffIcon.classList.add('hidden'); muteLabel.textContent='Mute'; holdOnIcon.classList.remove('hidden'); holdOffIcon.classList.add('hidden'); holdLabel.textContent='Hold'; }
  btnMute.addEventListener('click', ()=>{ if(!currentSession) return; if(!window.__muted){ currentSession.mute({audio:true}); window.__muted=true; muteOnIcon.classList.add('hidden'); muteOffIcon.classList.remove('hidden'); muteLabel.textContent='Unmute'; } else { currentSession.unmute({audio:true}); window.__muted=false; muteOffIcon.classList.add('hidden'); muteOnIcon.classList.remove('hidden'); muteLabel.textContent='Mute'; }});
  btnHold.addEventListener('click', ()=>{ if(!currentSession) return; if(!window.__onHold){ currentSession.hold(); window.__onHold=true; holdOnIcon.classList.add('hidden'); holdOffIcon.classList.remove('hidden'); holdLabel.textContent='Resume'; } else { currentSession.unhold(); window.__onHold=false; holdOffIcon.classList.add('hidden'); holdOnIcon.classList.remove('hidden'); holdLabel.textContent='Hold'; }});
  btnKeypad.addEventListener('click', ()=> document.getElementById('keypad').classList.toggle('hidden'));

  (async function bootAV(){ try{ await navigator.mediaDevices.getUserMedia({audio:true}); await refreshDevices(); await initMicMeter(); }catch(e){ log('Mic permission required.'); }})();
};
</script>
@endsection