@extends('cms.layout')

@section('content_header')
  <h1>Consultation Detail</h1>
@endsection

@section('cms')
<div class="container-fluid">
  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif
  @if($errors->any())
    <div class="alert alert-danger">
      <ul class="mb-0">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif
  <div class="d-flex justify-content-between align-items-center mb-2">
    <div>
      @if(isset($prev))
        <a href="{{ route('cms.consultations.show', $prev) }}" class="btn btn-sm btn-outline-secondary">← Newer</a>
      @endif
    </div>
    <div>
      @if(isset($next))
        <a href="{{ route('cms.consultations.show', $next) }}" class="btn btn-sm btn-outline-secondary">Older →</a>
      @endif
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="card mb-3">
        <div class="card-body">
          <dl class="row">
            <dt class="col-sm-3">Created</dt><dd class="col-sm-9">{{ $consultation->created_at->format('Y-m-d H:i') }}</dd>
            <dt class="col-sm-3">Name</dt><dd class="col-sm-9">{{ $consultation->name }}</dd>
            <dt class="col-sm-3">Email</dt><dd class="col-sm-9">{{ $consultation->email }}</dd>
            <dt class="col-sm-3">Phone</dt><dd class="col-sm-9">{{ $consultation->phone }}</dd>
            <dt class="col-sm-3">Practice</dt><dd class="col-sm-9">{{ optional($consultation->practiceArea)->name }}</dd>
            <dt class="col-sm-3">Subject</dt><dd class="col-sm-9">{{ $consultation->subject }}</dd>
            <dt class="col-sm-3">Message</dt>
            <dd class="col-sm-9">
              <div class="p-2 bg-light border rounded text-break" style="white-space: pre-wrap; overflow-wrap: anywhere;">{{ $consultation->message }}</div>
            </dd>
            <dt class="col-sm-3">IP / UA</dt>
            <dd class="col-sm-9">
              {{ $consultation->ip_address }}
              @php
                $parts = array_filter([ $consultation->geo_city, $consultation->geo_region, $consultation->geo_country ]);
                $loc = $parts ? implode(', ', $parts) : null;
              @endphp
              @if($loc)
                <span class="badge bg-light text-dark ms-2">{{ $loc }}</span>
              @endif
              @if($consultation->geo_timezone)
                <span class="badge bg-secondary ms-1">{{ $consultation->geo_timezone }}</span>
              @endif
              @if($consultation->geo_org)
                <div class="small text-muted mt-1">Net: {{ $consultation->geo_org }}</div>
              @endif
              <div><small class="text-muted text-break">{{ $consultation->user_agent }}</small></div>
              <form action="{{ route('cms.consultations.refresh-geo', $consultation) }}" method="post" class="d-inline-block mt-2">
                @csrf
                <button class="btn btn-xs btn-outline-secondary">Refresh Location</button>
              </form>
            </dd>
          </dl>
        </div>
      </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
      <form action="{{ route('cms.consultations.update', $consultation) }}" method="post" class="card">
        @csrf
        @method('PUT')
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label">Status</label>
            <select name="status" class="form-select @error('status') is-invalid @enderror">
              @foreach(['new','in_progress','answered','closed'] as $st)
                <option value="{{ $st }}" {{ $consultation->status===$st?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$st)) }}</option>
              @endforeach
            </select>
            @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="mb-3">
            <label class="form-label">Assign To</label>
            <select name="assigned_to" class="form-select @error('assigned_to') is-invalid @enderror">
              <option value="">— Unassigned —</option>
              @foreach($lawyers as $u)
                <option value="{{ $u->id }}" {{ (int)$consultation->assigned_to===$u->id?'selected':'' }}>{{ $u->name }}</option>
              @endforeach
            </select>
            @error('assigned_to')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="mb-3">
            <label class="form-label">Practice Area</label>
            <select name="practice_area_id" class="form-select @error('practice_area_id') is-invalid @enderror">
              <option value="">— Not set —</option>
              @foreach($practiceAreas as $pa)
                <option value="{{ $pa->id }}" {{ (int)$consultation->practice_area_id===$pa->id?'selected':'' }}>{{ $pa->name }}</option>
              @endforeach
            </select>
            @error('practice_area_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="mb-3">
            <label class="form-label">Advisory / Response</label>
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
              <div class="btn-group btn-group-sm me-2" role="group" aria-label="Formatting">
                <button type="button" class="btn btn-outline-secondary" id="fmtBold" title="Bold (Ctrl+B)"><strong>B</strong></button>
                <button type="button" class="btn btn-outline-secondary" id="fmtItalic" title="Italic (Ctrl+I)"><em>I</em></button>
                <button type="button" class="btn btn-outline-secondary" id="fmtBullets" title="Bullets (Ctrl+Shift+8)">• Bullets</button>
              </div>
              <div class="d-flex flex-wrap align-items-center small text-muted">
                <span class="chip-insert me-2" data-insert="Salam {name},\n\n">Pembuka</span>
                <span class="chip-insert me-2" data-insert="Ringkasan:\n• \n\n">Ringkasan</span>
                <span class="chip-insert me-2" data-insert="Saran/Tindak Lanjut:\n• \n• \n\n">Saran</span>
                <span class="chip-insert me-2" data-insert="Pertanyaan klarifikasi:\n1) \n2) \n\n">Klarifikasi</span>
                <span class="chip-insert" data-insert="Disclaimer: Tanggapan ini bersifat informasi umum dan bukan nasihat hukum final.\n">Disclaimer</span>
              </div>
            </div>
            <textarea name="advisory" rows="8" class="form-control @error('advisory') is-invalid @enderror">{{ old('advisory', $consultation->advisory) }}</textarea>
            <div class="d-flex justify-content-between align-items-center mt-1">
              <small id="charCount" class="text-muted">0 chars</small>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="toggleLivePreview">
                <label class="form-check-label" for="toggleLivePreview">Live Preview</label>
              </div>
            </div>
            <div id="livePreviewContainer" class="mt-2" style="display:none;">
              <div class="border rounded p-2 bg-light">
                <div class="small text-muted mb-1">Client message preview</div>
                <pre id="livePreview" class="mb-0" style="white-space: pre-wrap; word-break: break-word;"></pre>
              </div>
            </div>
            @error('advisory')<div class="invalid-feedback">{{ $message }}</div>@enderror
            @if(session('qa_report'))
              <div class="alert alert-warning mt-2">
                <div class="d-flex justify-content-between align-items-center">
                  <strong>QA Report{{ session('qa_risk') ? ' — Risk: '.session('qa_risk') : '' }}</strong>
                  <a href="#qaReportModal" data-toggle="modal" class="btn btn-sm btn-outline-secondary">View Full</a>
                </div>
                <div class="small text-muted mt-1" style="white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow:auto;">{{ session('qa_report') }}</div>
              </div>
            @endif
            @if(\App\Models\Setting::get('ai_qa_block_on_high','0'))
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" name="qa_override" id="qaOverride" value="1" {{ old('qa_override') ? 'checked' : '' }}>
                <label class="form-check-label" for="qaOverride">Override QA block (saya sudah review dan menyetujui untuk mengirim pesan ini)</label>
              </div>
            @endif
            @if($consultation->responded_at)
              <div class="form-text">Last responded at: {{ $consultation->responded_at->format('Y-m-d H:i') }}</div>
            @endif
          </div>
            <div class="d-flex gap-2 mb-2 align-items-center">
              <button type="button" id="btnGenerateDraft" class="btn btn-sm btn-outline-primary">Generate AI Draft</button>&nbsp;
              <div class="form-check form-check-inline ms-2">
                <input class="form-check-input" type="checkbox" id="cbAppendDraft" />
                <label class="form-check-label" for="cbAppendDraft">Append (don’t replace)</label>
              </div>
              <span id="draftSpinner" class="spinner-border spinner-border-sm text-primary ms-2" role="status" aria-hidden="true" style="display:none;"></span>
              <button type="button" id="btnPreview" class="btn btn-sm btn-outline-secondary ms-2" data-toggle="modal" data-target="#previewClientMessage">Preview Client Message</button>&nbsp;
              <button type="button" id="btnQaCheck" class="btn btn-sm btn-outline-warning ms-2" data-toggle="modal" data-target="#qaReportModal">Run QA Check</button>&nbsp;
              <span id="qaRiskBadge" class="badge bg-secondary ms-2 align-self-center">QA: —</span>
            </div>
          <div class="alert alert-light">
            <div class="small text-muted mb-1">Pengiriman</div>
            <ul class="mb-0 small">
              <li>Ketika Anda menekan Save dengan field Advisory terisi, sistem otomatis akan: kirim Email ke klien (jika ada), kirim WhatsApp ke klien (jika nomor tersedia dan Wablas aktif), dan broadcast ke WAG internal agar tim bisa memonitor.</li>
              <li>Tidak perlu input terpisah untuk pengiriman WhatsApp—gunakan satu field Advisory.</li>
            </ul>
          </div>
        </div>
        <div class="card-footer d-flex ">
          <button class="btn btn-primary">Save</button>&nbsp;
          <a href="{{ route('cms.consultations.index') }}" class="btn btn-secondary">Back</a>&nbsp;
          <form action="{{ route('cms.consultations.wag-broadcast', $consultation) }}" method="post">
            @csrf
            <button class="btn btn-outline-secondary">Re-Broadcast to Internal WAG</button>
          </form>
        </div>
      </form>

      
    </div>
  </div>
</div>
@endsection

@push('modals')
<div class="modal fade" id="previewClientMessage" tabindex="-1" role="dialog" aria-labelledby="previewClientMessageLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="previewClientMessageLabel">Preview Client Message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <pre id="previewClientMessageContent" class="mb-0" style="white-space: pre-wrap; word-break: break-word;">Loading preview…</pre>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
    </div>

    <div class="modal fade" id="qaReportModal" tabindex="-1" role="dialog" aria-labelledby="qaReportLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="qaReportLabel">AI QA Check</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div id="qaReportBody" class="markdown-body" style="white-space: pre-wrap; word-break: break-word;">Isi QA akan muncul di sini…</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
</div>
@endpush

@push('scripts')
<style>
  .chip-insert {
    padding: 2px 8px; border: 1px solid #ced4da; border-radius: 999px; cursor: pointer; user-select: none;
  }
  .chip-insert:hover { background: #f8f9fa; }
</style>
@php
  $tplClientStr = \App\Models\Setting::get('template_consultation_reply_client', "Halo {name},\n\nTerima kasih telah menghubungi {firm} terkait “{subject}”. Saya {lawyer} akan membantu meninjau pertanyaan Anda. Berikut tanggapan awal kami:\n\n{advisory}\n\nCatatan: Tanggapan ini bersifat informasi umum dan bukan nasihat hukum final. Kami mungkin memerlukan dokumen/klarifikasi tambahan sebelum memberikan pendapat resmi.\n\nHormat kami,\n{firm}");
  $firmNameStr = \App\Models\Setting::get('firm_name', \App\Models\Setting::get('organization_name', config('app.name')));
  $clientNameStr = $consultation->name;
  $subjectStr = $consultation->subject ?: 'Tanpa subjek';
  $lawyerNameStr = optional(\App\Models\User::find($consultation->assigned_to))->name ?: 'tim hukum kami';
  $lawyerEmailStr = optional(\App\Models\User::find($consultation->assigned_to))->email ?: (\App\Models\Setting::get('contact.consultation_email') ?: \App\Models\Setting::get('contact.email'));
  $lawyerPhoneStr = optional(\App\Models\User::find($consultation->assigned_to))->phone ?: (\App\Models\Setting::get('contact.phone') ?: \App\Models\Setting::get('firm_phone'));
  $lawyerTitleStr = optional(\App\Models\User::find($consultation->assigned_to))->job_title ?? null;
  if (!$lawyerTitleStr) { $lawyerTitleStr = \App\Models\Setting::get('default_lawyer_title', 'Pengacara'); }
@endphp
<script>
document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('btnGenerateDraft');
  const spinner = document.getElementById('draftSpinner');
  const advisory = document.querySelector('textarea[name="advisory"]');
  const cbAppend = document.getElementById('cbAppendDraft');
  const btnPreview = document.getElementById('btnPreview');
  const previewEl = document.getElementById('previewClientMessageContent');
  const btnQaCheck = document.getElementById('btnQaCheck');
  const qaReportBody = document.getElementById('qaReportBody');
  const qaRiskBadge = document.getElementById('qaRiskBadge');
  const charCount = document.getElementById('charCount');
  const toggleLivePreview = document.getElementById('toggleLivePreview');
  const livePreviewWrap = document.getElementById('livePreviewContainer');
  const livePreviewEl = document.getElementById('livePreview');
  const fmtBold = document.getElementById('fmtBold');
  const fmtItalic = document.getElementById('fmtItalic');
  const fmtBullets = document.getElementById('fmtBullets');
  const tplClient = @json($tplClientStr);
  const firmName = @json($firmNameStr);
  const clientName = @json($clientNameStr);
  const subject = @json($subjectStr);
  const lawyerName = @json($lawyerNameStr);
  const lawyerTitle = @json($lawyerTitleStr);
  const lawyerEmail = @json((string) $lawyerEmailStr);
  const lawyerPhoneRaw = @json((string) $lawyerPhoneStr);
  const lawyerPhone = String(lawyerPhoneRaw || '');

  function showToast(message, type = 'success') {
    try {
      // If there is a global toast system listening
      window.dispatchEvent(new CustomEvent('toast', { detail: { type, message } }));
      // Fallback: small non-blocking banner
      const t = document.createElement('div');
      t.className = 'position-fixed top-0 end-0 p-2';
      t.style.zIndex = 1080;
      t.innerHTML = '<div class="alert alert-' + (type==='success'?'success':'danger') + ' py-1 px-2 shadow">' + message + '</div>';
      document.body.appendChild(t);
      setTimeout(() => { t.remove(); }, 2500);
    } catch (e) {
      alert(message);
    }
  }

  function renderPreview() {
    if (!previewEl) return;
    const phoneForPreview = (() => {
      const lp = (lawyerPhone || '').toString();
      if (!lp.trim()) return '-';
      return lp.startsWith('+') ? lp : ('+'+lp);
    })();

    const rendered = tplClient
      .replace('{name}', clientName)
      .replace('{subject}', subject)
      .replace('{advisory}', advisory ? advisory.value : '')
  .replace('{firm}', firmName)
  .replace('{lawyer}', lawyerName)
  .replace('{lawyer_title}', lawyerTitle)
      .replace('{lawyer_email}', lawyerEmail || '-')
      .replace('{lawyer_phone}', phoneForPreview);
    previewEl.textContent = rendered;
  if (livePreviewEl) { livePreviewEl.textContent = rendered; }
  }

  if (btnPreview) {
    // Render before opening the modal
    btnPreview.addEventListener('click', renderPreview);
  }
  // Keep preview in sync while typing
  if (advisory) {
    advisory.addEventListener('input', function() {
      // Debounce lightly
      if (window.__pvTimer) clearTimeout(window.__pvTimer);
      window.__pvTimer = setTimeout(renderPreview, 150);
      // Char count
      if (charCount) charCount.textContent = (advisory.value || '').length + ' chars';
    });
    // Init count
    if (charCount) charCount.textContent = (advisory.value || '').length + ' chars';
  }
  // Initial preview content
  renderPreview();
  if (!btn || !advisory) return;

  btn.addEventListener('click', function() {
    spinner.style.display = 'inline-block';
    btn.disabled = true;

    fetch(@json(route('cms.consultations.generate-draft', $consultation)), {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': @json(csrf_token()),
        'Accept': 'application/json'
      }
    }).then(async (res) => {
      const ct = res.headers.get('content-type') || '';
      const data = ct.includes('application/json') ? await res.json() : { success: false, message: 'Unexpected response' };
      if (res.ok && data.success && data.draft) {
        if (cbAppend && cbAppend.checked && advisory.value.trim() !== '') {
          advisory.value = advisory.value.replace(/\s*$/, '\n\n') + data.draft;
        } else {
          advisory.value = data.draft;
        }
        showToast('AI draft generated.');
        renderPreview();
      } else {
        const msg = (data && data.message) ? data.message : 'Failed to generate AI draft.';
        showToast(msg, 'danger');
      }
    }).catch(() => {
      showToast('Network error while generating AI draft.', 'danger');
    }).finally(() => {
      spinner.style.display = 'none';
      btn.disabled = false;
    });
  });

  // QA Check handler
  if (btnQaCheck) {
    btnQaCheck.addEventListener('click', function() {
      const content = advisory ? advisory.value.trim() : '';
      if (!content) {
        qaReportBody.textContent = 'Tidak ada isi Advisory untuk diperiksa.';
        if (qaRiskBadge) qaRiskBadge.textContent = 'QA: —';
        return;
      }
      qaReportBody.textContent = 'Memeriksa…';
      fetch(@json(route('cms.consultations.qa-check', $consultation)), {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': @json(csrf_token()),
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message: content })
      }).then(async (res) => {
        const ct = res.headers.get('content-type') || '';
        const data = ct.includes('application/json') ? await res.json() : { success: false, message: 'Unexpected response' };
        if (res.ok && data.success) {
          qaReportBody.textContent = data.report || '(Tidak ada laporan)';
          if (qaRiskBadge) {
            const risk = (data.risk || '').toString();
            qaRiskBadge.textContent = 'QA: ' + (risk || 'OK');
            qaRiskBadge.className = 'badge ms-2 ' + (risk==='High' ? 'bg-danger' : risk==='Medium' ? 'bg-warning text-dark' : 'bg-success');
          }
        } else {
          qaReportBody.textContent = data.message || 'Gagal menjalankan QA check.';
          if (qaRiskBadge) {
            qaRiskBadge.textContent = 'QA: error';
            qaRiskBadge.className = 'badge bg-secondary ms-2';
          }
        }
      }).catch(() => {
        qaReportBody.textContent = 'Jaringan bermasalah saat menjalankan QA check.';
        if (qaRiskBadge) {
          qaRiskBadge.textContent = 'QA: error';
          qaRiskBadge.className = 'badge bg-secondary ms-2';
        }
      });
    });
  }

  // Live Preview toggle
  if (toggleLivePreview && livePreviewWrap) {
    toggleLivePreview.addEventListener('change', () => {
      livePreviewWrap.style.display = toggleLivePreview.checked ? 'block' : 'none';
      if (toggleLivePreview.checked) renderPreview();
    });
  }

  // Quick insert chips
  document.querySelectorAll('.chip-insert').forEach(ch => {
    ch.addEventListener('click', () => {
      if (!advisory) return;
      const txt = ch.getAttribute('data-insert') || '';
      const start = advisory.selectionStart || advisory.value.length;
      const end = advisory.selectionEnd || advisory.value.length;
      advisory.setRangeText(txt, start, end, 'end');
      advisory.dispatchEvent(new Event('input'));
      advisory.focus();
    });
  });

  // Simple formatting helpers for plain text
  function wrapSelection(prefix, suffix = prefix) {
    if (!advisory) return;
    const selStart = advisory.selectionStart || 0;
    const selEnd = advisory.selectionEnd || 0;
    const before = advisory.value.slice(0, selStart);
    const selected = advisory.value.slice(selStart, selEnd);
    const after = advisory.value.slice(selEnd);
    advisory.value = before + prefix + selected + suffix + after;
    const newPos = (before + prefix + selected + suffix).length;
    advisory.setSelectionRange(newPos, newPos);
    advisory.dispatchEvent(new Event('input'));
    advisory.focus();
  }
  if (fmtBold) fmtBold.addEventListener('click', () => wrapSelection('**','**'));
  if (fmtItalic) fmtItalic.addEventListener('click', () => wrapSelection('*','*'));
  if (fmtBullets) fmtBullets.addEventListener('click', () => {
    if (!advisory) return;
    const lines = (advisory.value || '').split(/\n/);
    const cur = advisory.selectionStart || 0;
    // find current line index
    let acc = 0, idx = 0;
    for (let i=0;i<lines.length;i++){ const L=lines[i]; if (acc + L.length + 1 > cur) { idx = i; break; } acc += L.length + 1; }
    lines.splice(idx, 0, '• ');
    advisory.value = lines.join('\n');
    advisory.setSelectionRange(acc + 2, acc + 2);
    advisory.dispatchEvent(new Event('input'));
    advisory.focus();
  });
});
</script>
@endpush