@extends('cms.layout')

@section('content_header')
  <h1 class="mb-0">Edit Insight</h1>
@endsection

@section('cms')
<form method="post" action="{{ route('cms.insights.update',$item) }}" enctype="multipart/form-data" novalidate>@csrf @method('PUT')
  <div class="row">
    <div class="col-lg-8">
      <div class="card shadow-sm mb-3"><div class="card-body">
        <div class="mb-3">
          <label class="form-label">Title</label>
          <input name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $item->title) }}" maxlength="250" required>
          @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
          <label class="form-label">Slug</label>
          <div class="input-group">
            <span class="input-group-text text-muted">/insights/</span>
            <input name="slug" id="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $item->slug) }}" placeholder="auto-generated">
          </div>
          @error('slug')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
          <label class="form-label">Excerpt</label>
          <textarea name="excerpt" id="excerpt" class="form-control @error('excerpt') is-invalid @enderror" rows="3" maxlength="400">{{ old('excerpt', $item->excerpt) }}</textarea>
          @error('excerpt')<div class="invalid-feedback">{{ $message }}</div>@enderror
          <div class="d-flex justify-content-between mt-1"><small class="text-muted">Short teaser for list & SEO.</small><small id="excerptCount" class="text-muted">0/400</small></div>
        </div>
        <div class="mb-0">
          <label class="form-label">Body</label>
          <textarea name="body" id="body" class="form-control @error('body') is-invalid @enderror" rows="14">{{ old('body', $item->body) }}</textarea>
          @error('body')<div class="invalid-feedback">{{ $message }}</div>@enderror
          <div class="d-flex gap-2 mt-2">
            <button type="button" class="btn btn-outline-success btn-sm" id="btnQaCheck">Check QA</button>
          </div>
        </div>
      </div></div>

      <div class="card shadow-sm mb-3"><div class="card-body">
        <div class="row g-3 align-items-end">
          <div class="col-md-8">
            <label class="form-label">Hero Image</label>
            <input type="file" name="hero" class="form-control @error('hero') is-invalid @enderror" accept="image/*">
            @error('hero')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <input type="hidden" name="hero_image" id="hero_image" value="{{ old('hero_image', $item->hero_image) }}">
            <div class="mt-2">
              <button type="button" class="btn btn-sm btn-outline-primary" id="btnGenImage">Generate with AI</button>
            </div>
          </div>
          <div class="col-12">
            <div id="heroPreviewWrap" class="border rounded p-3 {{ $item->hero_image ? '' : 'd-none' }}">
              <div class="small text-muted mb-2">Preview</div>
              <img id="heroPreview" src="{{ $item->hero_image }}" alt="Preview" class="img-fluid rounded" style="max-height:300px;object-fit:cover">
            </div>
          </div>
        </div>
      </div></div>
    </div>

    <div class="col-lg-4">
      <div class="card shadow-sm mb-3"><div class="card-body">
        <div class="mb-3">
          <div class="d-flex align-items-center justify-content-between">
            <label class="form-label mb-0">Topic & Title Assistant</label>
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-primary" id="btnFetchIdeas">Suggest</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="btnMoreIdeas">Generate more</button>
            </div>
          </div>
          <div class="row mt-2 g-2">
            <div class="col-12">
              <select class="form-select form-select-sm" id="aiPracticeId">
                <option value="">— Select Practice —</option>
                @foreach(($practiceAreas ?? []) as $pa)
                  <option value="{{ $pa->id }}">{{ $pa->name }}</option>
                @endforeach
              </select>
              <input class="form-control form-control-sm mt-1" id="aiPractice" placeholder="Practice (custom)…"/>
            </div>
            <div class="col-12">
              <input class="form-control form-control-sm" id="aiAudience" placeholder="Audience (e.g., Business Leaders)"/>
            </div>
            <div class="col-12">
              <input class="form-control form-control-sm" id="aiTrend" placeholder="Trend/Topic (e.g., New ESG Disclosure Rules)"/>
            </div>
            <div class="col-12">
              <select class="form-select form-select-sm" id="aiTone">
                <option value="practical">Practical</option>
                <option value="authoritative">Authoritative</option>
                <option value="educational">Educational</option>
                <option value="thought-leadership">Thought Leadership</option>
              </select>
            </div>
          </div>
          <div class="d-flex justify-content-between align-items-center mt-2">
            <div id="aiSource" class="small text-muted"></div>
          </div>
          <div id="aiIdeas" class="mt-1 small" style="max-height:260px; overflow:auto; border:1px dashed #ddd; border-radius:.5rem; padding:.5rem"></div>
          <div id="aiTags" class="mt-2"></div>
        </div>
        <div class="mb-3">
          <label class="form-label">Status</label>
          <select class="form-select" name="status">
            <option value="draft" {{ old('status', $item->status)=='draft'?'selected':'' }}>Draft</option>
            <option value="published" {{ old('status', $item->status)=='published'?'selected':'' }}>Published</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Publish At</label>
          <input type="datetime-local" name="published_at" class="form-control" value="{{ old('published_at', optional($item->published_at)->format('Y-m-d\TH:i')) }}">
        </div>
        <div class="d-grid gap-2">
          <button class="btn btn-primary">Save</button>
          <a href="{{ route('cms.insights.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
      </div></div>
    </div>
  </div>
</form>

<!-- AI Draft Generation Overlay -->
<div id="aiDraftOverlay" class="ai-overlay d-none" aria-live="polite" aria-busy="true">
  <div class="ai-overlay-backdrop"></div>
  <div class="ai-overlay-content">
    <div class="spinner-border text-primary" role="status" aria-hidden="true"></div>
    <div>
      <div class="fw-semibold">Menghasilkan draf artikel…</div>
      <div class="small text-muted ai-overlay-message">Mohon tunggu hingga proses selesai.</div>
    </div>
  </div>
</div>

<!-- AI Image Modal -->
<div class="modal fade" id="aiImageModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Generate Hero Image (AI)</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-2">
          <label class="form-label">Prompt</label>
          <textarea id="aiImgPrompt" class="form-control" rows="3" placeholder="e.g., abstract illustration of business law, minimalist, blue and gold color palette, high-contrast"></textarea>
        </div>
        <div class="row g-2 align-items-end">
          <div class="col-md-4">
            <label class="form-label">Size</label>
            <select id="aiImgSize" class="form-select">
              <option value="1024x1024">1024 x 1024 (square)</option>
              <option value="1536x1024">1536 x 1024 (landscape)</option>
              <option value="1024x1536">1024 x 1536 (portrait)</option>
              <option value="auto">Auto</option>
            </select>
          </div>
          <div class="col-md-4">
            <label class="form-label">Count</label>
            <select id="aiImgCount" class="form-select">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </div>
          <div class="col-md-4">
            <button type="button" id="btnRunImg" class="btn btn-primary w-100">Generate</button>
          </div>
        </div>
        <div class="mt-3 small text-muted">Gunakan prompt yang bersih tanpa teks/angka besar, hindari wajah realistis.</div>
        <div id="aiImgResults" class="row mt-3 g-2"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  </div>

<!-- QA Result Modal -->
<div class="modal fade" id="qaModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">QA Check Result</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="qaSummary" class="mb-2"></div>
        <div id="qaDetails" class="small"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

@section('js')
  <script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    // Inline styles for the overlay
    const __style = document.createElement('style');
    __style.textContent = `
      .ai-overlay { position: fixed; inset: 0; z-index: 1080; }
      .ai-overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
      .ai-overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #212529; border-radius: .75rem; padding: 1rem 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; gap: .75rem; align-items: center; min-width: 280px; }
    `;
    document.head.appendChild(__style);
  const __style2 = document.createElement('style');
  __style2.textContent = `#aiImgResults img{width:100%;height:180px;object-fit:cover;border-radius:.5rem;border:1px solid #e5e7eb} .aiPick{position:absolute;top:.5rem;right:.5rem}`;
  document.head.appendChild(__style2);

    function showDraftOverlay(msg){
      const ov = document.getElementById('aiDraftOverlay');
      if(!ov) return; const m = ov.querySelector('.ai-overlay-message');
      if(m && msg) m.textContent = msg; else if(m && !msg) m.textContent = 'Mohon tunggu hingga proses selesai.';
      ov.classList.remove('d-none');
    }
    function hideDraftOverlay(){
      const ov = document.getElementById('aiDraftOverlay');
      if(!ov) return; ov.classList.add('d-none');
    }
    function slugify(text){return text.toString().normalize('NFKD').replace(/[\u0300-\u036f]/g,'').toLowerCase().replace(/[^a-z0-9\s-]/g,'').trim().replace(/[\s-]+/g,'-').replace(/-+/g,'-');}
    const titleInput=document.querySelector('input[name="title"]');
    const slugInput=document.getElementById('slug');
    const excerpt=document.getElementById('excerpt');
    const excerptCount=document.getElementById('excerptCount');
    let slugDirty=!!(slugInput && slugInput.value);
    if(slugInput){slugInput.addEventListener('input',()=>{slugDirty=true;});}
    if(titleInput&&slugInput){titleInput.addEventListener('input',e=>{if(!slugDirty){slugInput.value=slugify(e.target.value);}});}
    function updateCounter(){const val=excerpt.value||'';excerptCount.textContent=`${val.length}/400`;}
    if(excerpt&&excerptCount){updateCounter();excerpt.addEventListener('input',updateCounter);}
    tinymce.init({selector:'#body',menubar:false,plugins:'lists link autolink code',toolbar:'bold italic underline | bullist numlist | link | removeformat | code',branding:false,height:420,content_style:'body{font-family:Inter, Roboto, sans-serif; font-size:14px}',link_default_target:'_blank',convert_urls:false});
    const hero=document.querySelector('input[name="hero"]');
    const wrap=document.getElementById('heroPreviewWrap');
    const img=document.getElementById('heroPreview');
    if(hero){hero.addEventListener('change',e=>{const f=e.target.files&&e.target.files[0]; if(!f) return; const r=new FileReader(); r.onload=ev=>{img.src=ev.target.result; wrap.classList.remove('d-none');}; r.readAsDataURL(f);});}

    // AI Image generation handlers
  const btnGenImage = document.getElementById('btnGenImage');
  const modalEl = document.getElementById('aiImageModal');
  let bsModal = null; let jq = window.jQuery || window.$;
  if (modalEl && window.bootstrap && window.bootstrap.Modal) { bsModal = new bootstrap.Modal(modalEl); }
  const showImgModal = ()=>{
    const promptEl = document.getElementById('aiImgPrompt');
    const titleEl = document.querySelector('input[name="title"]');
    if (promptEl && titleEl) {
      const t = (titleEl.value||'').trim(); if (t && !(promptEl.value||'').trim()) { promptEl.value = t; }
    }
    if(bsModal) bsModal.show(); else if(jq && jq.fn && jq.fn.modal){ jq(modalEl).modal('show'); } else { modalEl.classList.add('show'); modalEl.style.display='block'; }
  };
  const hideImgModal = ()=>{ if(bsModal) bsModal.hide(); else if(jq && jq.fn && jq.fn.modal){ jq(modalEl).modal('hide'); } else { modalEl.classList.remove('show'); modalEl.style.display='none'; } };
  if (btnGenImage && modalEl) { btnGenImage.addEventListener('click', showImgModal); }
    async function runImageGen(){
      const promptEl = document.getElementById('aiImgPrompt');
      const sizeEl = document.getElementById('aiImgSize');
      const countEl = document.getElementById('aiImgCount');
      const results = document.getElementById('aiImgResults');
      results.innerHTML = '';
      let prompt = (promptEl.value||'').trim();
      if(!prompt){
        const titleEl = document.querySelector('input[name="title"]');
        const t = (titleEl && titleEl.value||'').trim();
        if (t) { prompt = t; promptEl.value = t; } else { alert('Prompt wajib diisi'); return; }
      }
      showDraftOverlay('Menghasilkan gambar…');
      try{
        const res = await fetch("{{ route('cms.insights.generate-image') }}", { method:'POST', headers: { 'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}' }, body: JSON.stringify({ prompt, size: sizeEl.value, n: parseInt(countEl.value||'1',10) }) });
        const json = await res.json();
        if(!json || !json.ok){ throw new Error(json && json.error ? json.error : 'Gagal generate gambar'); }
        const urls = json.images||[];
        if(!urls.length){ results.innerHTML = '<div class="text-muted">No images generated.</div>'; return; }
        urls.forEach(u=>{
          const col = document.createElement('div'); col.className='col-6 col-md-4 position-relative';
          const im = document.createElement('img'); im.src = u; im.alt = 'AI image';
          const pick = document.createElement('button'); pick.type='button'; pick.className='btn btn-sm btn-primary aiPick'; pick.textContent='Use';
          pick.addEventListener('click',()=>{
            const hidden = document.getElementById('hero_image'); hidden.value = u;
            img.src = u; wrap.classList.remove('d-none');
            hideImgModal();
          });
          col.appendChild(im); col.appendChild(pick); results.appendChild(col);
        });
      }catch(e){ alert(e.message||'Gagal generate gambar'); }
      finally{ hideDraftOverlay(); }
    }
    const btnRunImg = document.getElementById('btnRunImg'); if(btnRunImg){ btnRunImg.addEventListener('click', runImageGen); }

    // QA Check
    const btnQa = document.getElementById('btnQaCheck');
    const qaModalEl = document.getElementById('qaModal');
    let qaModal = null; if (qaModalEl && window.bootstrap && window.bootstrap.Modal) { qaModal = new bootstrap.Modal(qaModalEl); }
    const showQaModal = ()=>{
      if (qaModal) qaModal.show();
      else if (window.jQuery && window.jQuery.fn && window.jQuery.fn.modal) { window.jQuery(qaModalEl).modal('show'); }
      else { qaModalEl.classList.add('show'); qaModalEl.style.display='block'; qaModalEl.removeAttribute('aria-hidden'); }
    };
    const hideQaModal = ()=>{
      if (qaModal) qaModal.hide();
      else if (window.jQuery && window.jQuery.fn && window.jQuery.fn.modal) { window.jQuery(qaModalEl).modal('hide'); }
      else { qaModalEl.classList.remove('show'); qaModalEl.style.display='none'; qaModalEl.setAttribute('aria-hidden','true'); }
    };
    if (qaModalEl) {
      const hdrClose = qaModalEl.querySelector('.modal-header .btn-close');
      const ftrClose = qaModalEl.querySelector('.modal-footer .btn');
      if (hdrClose) hdrClose.addEventListener('click', hideQaModal);
      if (ftrClose) ftrClose.addEventListener('click', hideQaModal);
    }
    async function runQa(){
      const ed = tinymce.get('body'); const bodyHtml = ed ? ed.getContent() : (document.getElementById('body').value||'');
      const title = document.querySelector('input[name="title"]').value||'';
      const excerptVal = document.getElementById('excerpt').value||'';
      if(!title.trim()){ alert('Title wajib diisi'); return; }
      if(!bodyHtml.trim()){ alert('Body/draft wajib diisi'); return; }
      showDraftOverlay('Memeriksa kualitas & risiko artikel…');
      try{
        const res = await fetch("{{ route('cms.insights.qa-check') }}", { method:'POST', headers: { 'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}' }, body: JSON.stringify({ title, excerpt: excerptVal, body: bodyHtml }) });
        const json = await res.json();
        if(!json || !json.ok){ throw new Error(json && json.error ? json.error : 'Gagal melakukan QA'); }
        const r = json.result || {};
        const sum = document.getElementById('qaSummary'); const det = document.getElementById('qaDetails');
        if(sum){
          const badge = r.ok_to_publish ? '<span class="badge bg-success">OK to publish</span>' : '<span class="badge bg-warning text-dark">Review needed</span>';
          sum.innerHTML = `<div class="d-flex align-items-center gap-2"><div class="fs-5">Score: <strong>${r.overall_score ?? '-'}</strong>/100</div>${badge}<div class="small text-muted">Source: ${json.source||'-'}</div></div>`;
        }
        if(det){
          const list = (r.flagged_items||[]).map(it=>{
            const sev = it.severity||'medium'; const cat = it.category||'other';
            const sevClass = sev==='high'?'danger':(sev==='low'?'secondary':'warning');
            return `<div class="mb-2 p-2 border rounded"><div class="d-flex justify-content-between"><span class="badge bg-${sevClass}">${sev}</span><span class="badge bg-light text-dark">${cat}</span></div><div class="mt-1">${(it.message||'').replace(/</g,'&lt;')}</div><div class="text-muted">${(it.suggestion||'').replace(/</g,'&lt;')}</div></div>`;
          }).join('');
          det.innerHTML = `
            <div class="row g-2">
              <div class="col-md-6">
                <div class="mb-2"><strong>Writing</strong><div class="text-muted">${(r.writing_quality||'').replace(/</g,'&lt;')}</div></div>
                <div class="mb-2"><strong>Structure</strong><div class="text-muted">${(r.structure||'').replace(/</g,'&lt;')}</div></div>
                <div class="mb-2"><strong>SEO</strong><div class="text-muted">${(r.seo||'').replace(/</g,'&lt;')}</div></div>
              </div>
              <div class="col-md-6">
                <div class="mb-2"><strong>Legal risk</strong><div class="text-muted">${(r.legal_risk||'').replace(/</g,'&lt;')}</div></div>
                <div class="mb-2"><strong>Reputation risk</strong><div class="text-muted">${(r.reputation_risk||'').replace(/</g,'&lt;')}</div></div>
              </div>
            </div>
            <div class="mt-2"><strong>Flagged Items</strong></div>
            ${list || '<div class="text-muted">No issues flagged.</div>'}
            <div class="mt-2"><strong>Recommendations</strong><ul>${(r.recommendations||[]).map(x=>`<li>${(x||'').replace(/</g,'&lt;')}</li>`).join('')}</ul></div>
          `;
        }
  showQaModal();
      }catch(e){ alert(e.message||'Gagal melakukan QA'); }
      finally{ hideDraftOverlay(); }
    }
    if(btnQa){ btnQa.addEventListener('click', runQa); }

    // Topic & Title Assistant
    const ideasBox = document.getElementById('aiIdeas');
    const btnIdeas = document.getElementById('btnFetchIdeas');
    const tagsBox = document.getElementById('aiTags');
    const btnMore = document.getElementById('btnMoreIdeas');
    function saveAssistantState(){
      try { localStorage.setItem('cms_insights_ai_state', JSON.stringify({
        practice_id: document.getElementById('aiPracticeId').value,
        practice: document.getElementById('aiPractice').value,
        audience: document.getElementById('aiAudience').value,
        trend: document.getElementById('aiTrend').value,
        tone: document.getElementById('aiTone').value
      })); } catch(e) {}
    }
    function loadAssistantState(){
      try { const s = JSON.parse(localStorage.getItem('cms_insights_ai_state')||'null'); if(!s) return; 
        if(document.getElementById('aiPracticeId')) document.getElementById('aiPracticeId').value = s.practice_id||'';
        if(document.getElementById('aiPractice')) document.getElementById('aiPractice').value = s.practice||'';
        if(document.getElementById('aiAudience')) document.getElementById('aiAudience').value = s.audience||'';
        if(document.getElementById('aiTrend')) document.getElementById('aiTrend').value = s.trend||'';
        if(document.getElementById('aiTone')) document.getElementById('aiTone').value = s.tone||'practical';
      } catch(e) {}
    }
    loadAssistantState();
    ['aiPracticeId','aiPractice','aiAudience','aiTrend','aiTone'].forEach(id=>{ const el=document.getElementById(id); if(el){ el.addEventListener('change', saveAssistantState); el.addEventListener('input', saveAssistantState); }});
    function renderIdeas(items){
      if(!ideasBox) return; ideasBox.innerHTML='';
      if(!items || !items.length){ ideasBox.innerHTML = '<div class="text-muted">No ideas yet.</div>'; return; }
      items.forEach(it=>{
        const card = document.createElement('div');
        card.className = 'p-2 border rounded mb-1';
        const h = document.createElement('div'); h.className='fw-semibold'; h.textContent = it.title; card.appendChild(h);
        const d = document.createElement('div'); d.className='text-muted'; d.textContent = it.excerpt; card.appendChild(d);
        const actions = document.createElement('div'); actions.className='mt-1';
  const b1 = document.createElement('button'); b1.type='button'; b1.className='btn btn-xs btn-primary me-1'; b1.textContent='Use title';
  b1.addEventListener('click',()=>{ document.querySelector('input[name="title"]').value = it.title; const slugInput=document.getElementById('slug'); if(slugInput && (!slugInput.value)){ slugInput.value = slugify(it.title); } const p=document.getElementById('aiImgPrompt'); if(p){ p.value = it.title; } });
        const b2 = document.createElement('button'); b2.type='button'; b2.className='btn btn-xs btn-outline-primary me-1'; b2.textContent='Use excerpt';
        b2.addEventListener('click',()=>{ const e=document.getElementById('excerpt'); e.value = it.excerpt; const c=document.getElementById('excerptCount'); if(c){ c.textContent = `${e.value.length}/400`; } });
        const b3 = document.createElement('button'); b3.type='button'; b3.className='btn btn-xs btn-outline-secondary'; b3.textContent='Generate draft';
        const triggerGenerate = async ()=>{
          const ed = tinymce.get('body');
          try{
            const payload = {
              title: it.title || (document.querySelector('input[name="title"]').value),
              practice_id: document.getElementById('aiPracticeId').value,
              practice: document.getElementById('aiPractice').value,
              audience: document.getElementById('aiAudience').value,
              trend: document.getElementById('aiTrend').value,
              tone: document.getElementById('aiTone').value
            };
            showDraftOverlay('Mohon tunggu hingga proses selesai.');
            const res = await fetch("{{ route('cms.insights.generate-draft') }}", { method:'POST', headers: { 'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}' }, body: JSON.stringify(payload)});
            const json = await res.json();
            if (json && json.ok && json.source === 'local') {
              const proceed = confirm('AI tidak tersedia atau lambat. Gunakan draf lokal?');
              if (!proceed) { return; }
            }
            if(json && json.html){ if(ed){ ed.setContent(json.html); } else { document.getElementById('body').value = json.html; } }
            const exEl=document.getElementById('excerpt'); const countEl=document.getElementById('excerptCount');
            if(json && json.meta){ if(exEl){ exEl.value = json.meta.recommended_excerpt || exEl.value; if(countEl){ countEl.textContent = `${exEl.value.length}/400`; } } const slugInput=document.getElementById('slug'); if(slugInput && !slugInput.value){ slugInput.value = json.meta.recommended_slug; } }
          }catch(e){ alert('Gagal membuat draft'); }
          finally { hideDraftOverlay(); }
        };
        b3.addEventListener('click', triggerGenerate);
        const b4 = document.createElement('button'); b4.type='button'; b4.className='btn btn-xs btn-outline-secondary ms-1'; b4.textContent='Regenerate';
        b4.addEventListener('click', triggerGenerate);
  actions.appendChild(b1); actions.appendChild(b2); actions.appendChild(b3); actions.appendChild(b4);
        card.appendChild(actions);
        ideasBox.appendChild(card);
      });
    }
  async function fetchIdeas(){
      if(!btnIdeas) return;
  btnIdeas.disabled = true; const prev = btnIdeas.textContent; btnIdeas.textContent = 'Generating…';
  showDraftOverlay('Menghasilkan rekomendasi topik & judul… Mohon tunggu hingga proses selesai.');
      try{
        const payload = {
          practice_id: document.getElementById('aiPracticeId').value,
          practice: document.getElementById('aiPractice').value,
          audience: document.getElementById('aiAudience').value,
          trend: document.getElementById('aiTrend').value,
          tone: document.getElementById('aiTone').value,
          count: 8
        };
        const res = await fetch("{{ route('cms.insights.suggest-topics') }}", {
          method:'POST',
          headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
          body: JSON.stringify(payload)
        });
        let json = await res.json();
        if(json && json.ok===false && json.source==='ai'){
          const useLocal = confirm(json.error || 'Gagal menggunakan AI. Gunakan sumber lokal?');
          if(useLocal){
            const res2 = await fetch("{{ route('cms.insights.suggest-topics') }}", {
              method:'POST', headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
              body: JSON.stringify({...payload, force_local: true})
            });
            json = await res2.json();
          } else {
            json = { ok:false, data:[], source:'ai' };
          }
        }
        const items = (json && json.data) || [];
        const sourceEl = document.getElementById('aiSource');
        if(sourceEl){ sourceEl.textContent = items.length ? ('Sumber: ' + (json.source==='ai'?'AI (ChatGPT/OpenAI)':'Lokal')) : ''; }
        renderIdeas(items);
        if(tagsBox){
          tagsBox.innerHTML = '';
          const first = items[0];
          if(first && first.tags){
            const label = document.createElement('div');
            label.className='small text-muted mb-1';
            label.textContent='Tags:';
            tagsBox.appendChild(label);
            first.tags.forEach(t=>{
              const b=document.createElement('button'); b.type='button'; b.className='btn btn-xs btn-outline-secondary me-1 mb-1'; b.textContent='#'+t;
              b.addEventListener('click',()=>{
                const ed=tinymce.get('body');
                const hash = ' #'+t+' ';
                if(ed){ ed.insertContent(hash); } else { const ta=document.getElementById('body'); ta.value += hash; }
              });
              tagsBox.appendChild(b);
            });
          }
        }
  }catch(e){ ideasBox.innerHTML = '<div class="text-danger">Failed to generate ideas.</div>'; }
  finally{ hideDraftOverlay(); btnIdeas.disabled=false; btnIdeas.textContent = prev; }
    }
  if(btnIdeas) btnIdeas.addEventListener('click', fetchIdeas);
  if(btnMore) btnMore.addEventListener('click', fetchIdeas);
  </script>
@endsection
@endsection