@extends('public.layout')
@section('title','Live Chat — '.\App\Models\Setting::get('site.brand','Noesantara Law Firm'))
@section('content')
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <h1 class="h3 mb-3">Live Chat</h1>
      <p class="text-muted">Pilih mode percakapan: Asisten AI atau Tim Pengacara kami. Jawaban AI bersifat informatif dan bukan nasihat hukum resmi.</p>

      <div class="card shadow-sm">
        <div class="card-body">
          <div id="chatSetup" class="row g-2 align-items-end">
            <div class="col-md-4">
              <label class="form-label">Nama</label>
              <input id="vcName" class="form-control" maxlength="120" placeholder="Opsional" />
            </div>
            <div class="col-md-4">
              <label class="form-label">No. HP</label>
              <input id="vcPhone" class="form-control" maxlength="32" placeholder="62812xxxx" />
            </div>
            <div class="col-md-4">
              <label class="form-label">Email</label>
              <input id="vcEmail" type="email" class="form-control" maxlength="191" placeholder="nama@contoh.com" />
            </div>
            <div class="col-md-4">
              <label class="form-label">Mode</label>
              <select id="vcMode" class="form-select">
                <option value="ai">AI Assistant</option>
                <option value="human">Tim Pengacara</option>
              </select>
            </div>
            <div class="col-md-4">
              <button id="btnStart" class="btn btn-primary w-100">Mulai Chat</button>
            </div>
          </div>

          <div id="chatBox" class="mt-3 d-none">
            <div id="chatStatus" class="alert alert-info py-2 px-3 d-none" role="status"></div>
            <div id="chatMessages" class="border rounded p-2" style="height:380px; overflow:auto; background:#fafafa"></div>
            <div class="d-flex gap-2 mt-2">
              <input id="chatInput" class="form-control" placeholder="Ketik pesan…" maxlength="4000" />
              <button id="btnSend" class="btn btn-primary">Kirim</button>
              <button id="btnEnd" class="btn btn-outline-secondary">Akhiri</button>
              <button id="btnHandoff" class="btn btn-outline-warning">Chat dengan Pengacara</button>
            </div>
            <div class="small text-muted mt-2">Catatan: Tanggapan AI bukan nasihat hukum resmi. Untuk kasus spesifik, mohon hubungi tim kami.</div>
            <div id="typing" class="small text-muted mt-1 d-none">Asisten sedang mengetik…</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
  (function(){
    const startBtn = document.getElementById('btnStart');
    const nameEl = document.getElementById('vcName');
  const modeEl = document.getElementById('vcMode');
  const phoneEl = document.getElementById('vcPhone');
  const emailEl = document.getElementById('vcEmail');
    const box = document.getElementById('chatBox');
    const setup = document.getElementById('chatSetup');
    const list = document.getElementById('chatMessages');
    const input = document.getElementById('chatInput');
    const sendBtn = document.getElementById('btnSend');
    const endBtn = document.getElementById('btnEnd');
  let token = null; let pollTimer = null; let sending = false; let mode = 'ai'; let statusVal = 'open';
  const SCROLL_PAD = 80; // px distance from bottom to still auto-scroll
  let lastNonVisitorCount = 0; let lastStatusSent = '';

    function formatMessage(t){
      try {
        const esc = (t||'').toString()
          .replace(/&/g,'&amp;')
          .replace(/</g,'&lt;')
          .replace(/>/g,'&gt;');
        // Bold only: **text** -> <strong>text</strong>
        return esc.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
      } catch(e) { return (t||''); }
    }

    function append(sender, text, doScroll){
      const wrap = document.createElement('div'); wrap.className = 'mb-2';
      const b = document.createElement('div'); b.className = sender==='visitor' ? 'bg-primary text-white p-2 rounded-3 ms-auto' : 'bg-light p-2 rounded-3'; b.style.maxWidth='80%'; b.style.whiteSpace='pre-wrap';
      b.innerHTML = formatMessage(text); wrap.appendChild(b);
      wrap.style.display='flex'; wrap.style.flexDirection='column'; wrap.style.alignItems = sender==='visitor' ? 'flex-end' : 'flex-start';
      list.appendChild(wrap);
      if(doScroll){ list.scrollTop = list.scrollHeight; }
    }

    function persistToken(tok){ try{ localStorage.setItem('lc_token', tok||''); if(window.parent && window.parent !== window){ window.parent.postMessage(JSON.stringify({ type:'lc_token', token: tok }), '*'); } }catch(e){} }

    async function ensureStarted(desiredMode){
      if(token) return token; const m = desiredMode || 'ai';
      const res = await fetch('{{ route('public.livechat.start') }}', { method:'POST', headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'}, body: JSON.stringify({ name: null, mode: m }) });
      const json = await res.json(); if(!json.ok) throw new Error('Gagal mulai chat');
      token = json.token; mode = m; persistToken(token); setup.classList.add('d-none'); box.classList.remove('d-none');
      if(!pollTimer){ poll(); pollTimer=setInterval(poll, 3000); }
      if(mode==='ai'){ append('ai', 'Halo, saya Asisten AI. Silakan jelaskan singkat pertanyaan Anda. Jawaban ini bukan nasihat hukum resmi.'); }
      else { append('ai', 'Terima kasih. Tim pengacara kami akan segera bergabung dalam percakapan.'); showStatus('Menunggu pengacara bergabung…'); }
      return token;
    }

    async function start(){
      startBtn.disabled = true;
      try{
  const res = await fetch('{{ route('public.livechat.start') }}', { method:'POST', headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'}, body: JSON.stringify({ name: nameEl.value||null, phone: phoneEl.value||null, email: emailEl.value||null, mode: modeEl.value }) });
        const json = await res.json(); if(!json.ok) throw new Error('Gagal mulai chat');
  token = json.token; mode = modeEl.value; persistToken(token); setup.classList.add('d-none'); box.classList.remove('d-none');
        poll(); pollTimer = setInterval(poll, 3000);
  if(mode==='ai'){ append('ai', 'Halo, saya Asisten AI. Silakan jelaskan singkat pertanyaan Anda. Jawaban ini bukan nasihat hukum resmi.'); }
  else { append('ai', 'Terima kasih. Tim pengacara kami akan segera bergabung dalam percakapan.'); showStatus('Menunggu pengacara bergabung…'); }
      }catch(e){ alert(e.message||'Gagal mulai chat'); }
      finally{ startBtn.disabled = false; }
    }

    function showStatus(text){ const b=document.getElementById('chatStatus'); if(!b) return; if(text){ b.textContent=text; b.classList.remove('d-none'); } else { b.classList.add('d-none'); } }
    function setTyping(on){ const t=document.getElementById('typing'); if(!t) return; if(on){ t.classList.remove('d-none'); } else { t.classList.add('d-none'); } }

  async function poll(){
      if(!token) return; try{
    const atBottom = (list.scrollHeight - list.scrollTop - list.clientHeight) <= SCROLL_PAD;
    const prevBottomOffset = list.scrollHeight - list.scrollTop;
        const res = await fetch('{{ url('/livechat') }}/'+encodeURIComponent(token)+'/history');
        const json = await res.json(); if(!json.ok) return;
        list.innerHTML = '';
    const msgs = json.messages||[];
    msgs.forEach(m=> append(m.sender, m.content, false));
    // Restore scroll position or auto-scroll
    if(atBottom){ list.scrollTop = list.scrollHeight; }
    else { const target = Math.max(0, list.scrollHeight - prevBottomOffset); list.scrollTop = target; }
        // Detect new non-visitor messages (for unread badges in widget)
        const nonVisitorCount = msgs.filter(m=> m.sender !== 'visitor').length;
        if(nonVisitorCount > lastNonVisitorCount && window.parent && window.parent!==window){
          try { window.parent.postMessage(JSON.stringify({ type:'lc_new_message', countDelta: nonVisitorCount - lastNonVisitorCount }), '*'); } catch(e) {}
        }
        lastNonVisitorCount = nonVisitorCount;
        mode = json.mode || mode; statusVal = json.status || statusVal;
        if(mode==='human'){
          showStatus(statusVal==='pending' ? 'Menunggu pengacara bergabung…' : (statusVal==='open' ? 'Sedang terhubung dengan pengacara.' : 'Sesi ditutup.'));
        } else { showStatus(null); }
        if(statusVal==='closed') { input.disabled = true; document.getElementById('btnSend').disabled = true; document.getElementById('btnHandoff').disabled = true; }
        // Notify parent of status updates
        if(window.parent && window.parent!==window){
          const payload = JSON.stringify({ type:'lc_status', status: statusVal, mode });
          if(payload !== lastStatusSent){ try{ window.parent.postMessage(payload,'*'); lastStatusSent = payload; }catch(e){} }
        }
      }catch(e){ /* ignore */ }
    }

    async function send(){
      if(sending || !token) return; const text = (input.value||'').trim(); if(!text) return;
      sending = true; input.value=''; append('visitor', text, true); if(mode==='ai') setTyping(true);
      try{
        await fetch('{{ url('/livechat') }}/'+encodeURIComponent(token)+'/send', { method:'POST', headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'}, body: JSON.stringify({ content: text }) });
        setTimeout(poll, 800);
      }catch(e){ alert('Gagal mengirim'); }
      finally{ sending = false; if(mode==='ai') setTyping(false); }
    }

    async function end(){
      if(!token) return; try{ await fetch('{{ url('/livechat') }}/'+encodeURIComponent(token)+'/close', { method:'POST', headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'} }); }catch(e){}
      try{ localStorage.removeItem('lc_token'); }catch(e){}
      if(pollTimer) clearInterval(pollTimer); token=null; append('ai','Sesi chat diakhiri.');
      try{ if(window.parent && window.parent!==window){ window.parent.postMessage(JSON.stringify({ type:'lc_status', status:'closed' }), '*'); } }catch(e){}
    }

    async function handoff(){
      if(!token) return; try{ const res=await fetch('{{ url('/livechat') }}/'+encodeURIComponent(token)+'/handoff', { method:'POST', headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'} }); const j=await res.json(); if(j && j.ok){ mode='human'; showStatus('Menunggu pengacara bergabung…'); append('ai','Permintaan Anda untuk berbicara dengan pengacara telah dikirim. Harap tunggu.'); } }catch(e){ alert('Gagal mengalihkan'); }
    }

    startBtn.addEventListener('click', start);
    sendBtn.addEventListener('click', send);
    input.addEventListener('keydown', (e)=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); send(); } });
    endBtn.addEventListener('click', end);
    document.getElementById('btnHandoff').addEventListener('click', handoff);

  // Auto-restore existing session if present
  (function restore(){ try{ const tok = localStorage.getItem('lc_token'); if(tok){ token = tok; persistToken(tok); setup.classList.add('d-none'); box.classList.remove('d-none'); poll(); pollTimer = setInterval(poll, 3000); } }catch(e){} })();

  // Receive commands from widget (parent)
  window.addEventListener('message', async (ev)=>{
    if(!ev || !ev.data) return; let data=null; try{ data = typeof ev.data==='string' ? JSON.parse(ev.data) : ev.data; }catch(e){ return; }
    if(!data || !data.type) return;
    if(data.type==='lc_focus'){ try{ input && input.focus(); }catch(e){} }
    if(data.type==='lc_send'){
      const desired = data.mode || 'ai'; const content = (data.content||'').toString().slice(0,4000).trim(); if(!content) return;
      try{ await ensureStarted(desired); input.value = content; send(); }catch(e){ /* ignore */ }
    }
  });
  })();
</script>
@endpush
@endsection