@extends('layouts.app')
@section('title','Base de connaissances')
@section('content')
<style>
.ktoolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:16px}
.kcat{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.kcat>summary{cursor:pointer;padding:14px 18px;font-weight:800;display:flex;align-items:center;gap:10px;list-style:none}
.kcat>summary::-webkit-details-marker{display:none}
.kcat>summary .chev{transition:.2s;color:var(--muted)}
.kcat[open]>summary .chev{transform:rotate(90deg)}
.kcat .ccount{font-size:.78rem;font-weight:800;padding:2px 9px;border-radius:20px;background:var(--bg);color:var(--muted)}
.kcatbody{padding:2px 14px 12px}
.kcard{border-top:1px solid var(--line)}
.kcard>summary{cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 4px;list-style:none}
.kcard>summary::-webkit-details-marker{display:none}
.kcard>summary .chev{color:var(--muted);transition:.2s;flex:none}
.kcard[open]>summary .chev{transform:rotate(90deg)}
.qprev{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard.unpub .qprev{color:var(--muted)}
.kdot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.kcard.unpub .kdot{background:#c9a227}
.kbody{padding:2px 4px 16px}
.kcard.saving{background:rgba(217,163,34,.06)}.kcard.saved .kdot{box-shadow:0 0 0 3px rgba(90,165,68,.25)}.kcard.error{background:rgba(192,57,43,.06)}
.kcard .kq{font-weight:600;width:100%}
.kcard .ka{margin-top:8px;min-height:90px;resize:vertical}
.kmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.kmeta select,.kmeta .kk{max-width:230px}
.kstatus{font-size:.78rem;color:var(--muted);min-width:120px;text-align:right;flex:none}
.kstatus.ok{color:var(--green)}.kstatus.err{color:#c0392b}.kstatus.busy{color:var(--gold)}
.kstats{font-size:.78rem;color:var(--muted);margin-left:auto;white-space:nowrap}
.kpub{display:flex;gap:7px;align-items:center;font-weight:600;font-size:.85rem;margin:0;white-space:nowrap}
.kpub input{width:auto}
.kdel{color:#c0392b;background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer}
.aibtns{margin-top:6px}
</style>

<div class="ktoolbar">
  <div><div class="h1">Base de connaissances</div><div class="sub"><b>{{ $total }}</b> réponses · éditées en direct (enregistrement automatique). Utilisées par le chatbot et la FAQ.</div></div>
  <div class="row">
    <input id="kfilter" placeholder="Filtrer…" style="max-width:220px">
    <button class="btn ghost" id="ktoggleall" data-open="1"><i data-lucide="chevrons-down-up"></i> Plier tout</button>
    @if(auth()->user()->hasRole('super_admin','admin'))<button class="btn ghost" id="kimport"><i data-lucide="download"></i> Importer la base de départ</button>@endif
    <button class="btn" id="knew"><i data-lucide="plus"></i> Nouvel article</button>
  </div>
</div>

<div id="klist">
  @foreach($groups as $g)
  <details class="kcat" open data-cat="{{ $g['id'] }}">
    <summary><i class="chev" data-lucide="chevron-right"></i> {{ $g['name'] }} <span class="ccount">{{ count($g['articles']) }}</span></summary>
    <div class="kcatbody">
      @foreach($g['articles'] as $a)
      <details class="kcard {{ $a->is_published ? '' : 'unpub' }}" data-id="{{ $a->id }}">
        <summary>
          <i class="chev" data-lucide="chevron-right"></i>
          <span class="kdot"></span>
          <span class="qprev">{{ $a->question }}</span>
          <span class="kstatus"></span>
        </summary>
        <div class="kbody">
          <input class="kq" data-f="question" value="{{ $a->question }}" placeholder="Question…">
          <textarea class="ka" data-f="answer" rows="4" placeholder="Réponse…">{{ $a->answer }}</textarea>
          <div class="aibtns">
            <button type="button" onclick="kai(this,'humanize')">Humaniser</button>
            <button type="button" onclick="kai(this,'grammar')">✓ Orthographe</button>
            <button type="button" onclick="kai(this,'generate')">Générer</button>
          </div>
          <div class="kmeta">
            <select class="kc" data-f="category_id">
              <option value="">- Catégorie -</option>
              @foreach($categories as $c)<option value="{{ $c->id }}" @selected($a->category_id==$c->id)>{{ $c->name }}</option>@endforeach
            </select>
            <input class="kk" data-f="keywords" value="{{ $a->keywords }}" placeholder="mots-clés, séparés par virgule">
            <label class="kpub"><input type="checkbox" data-f="is_published" @checked($a->is_published)> Publié</label>
            <button type="button" class="kdel" title="Mettre à la corbeille"><i data-lucide="trash-2"></i></button>
            <span class="kstats">{{ $a->hits ?? 0 }} · {{ $a->faq_opens ?? 0 }}</span>
          </div>
        </div>
      </details>
      @endforeach
    </div>
  </details>
  @endforeach
</div>
<p id="kempty" style="color:var(--muted);text-align:center;padding:30px;@if($total)display:none;@endif">Aucun article. Cliquez sur « Nouvel article ».</p>

@push('scripts')<script>
const KN_BASE="{{ url('admin/knowledge') }}", KN_QUICK="{{ route('admin.knowledge.quick') }}", KN_AI="{{ route('admin.ai.assist') }}";
const CATS=@json($categories->map(fn($c)=>['id'=>$c->id,'name'=>$c->name]));
const hdr={'Content-Type':'application/json','X-CSRF-TOKEN':window.csrf,'Accept':'application/json'};

function setStatus(card,txt,cls){const s=card.querySelector('.kstatus');s.textContent=txt;s.className='kstatus '+(cls||'');}
function payload(card){
  const p={};card.querySelectorAll('[data-f]').forEach(el=>{p[el.dataset.f]=el.type==='checkbox'?(el.checked?1:0):el.value;});
  return p;
}
function save(card){
  const id=card.dataset.id;
  setStatus(card,'Enregistrement…','busy');card.classList.remove('saved','error');card.classList.add('saving');
  fetch(KN_BASE+'/'+id+'/autosave',{method:'PATCH',headers:hdr,body:JSON.stringify(payload(card))})
    .then(r=>r.ok?r.json():Promise.reject(r))
    .then(d=>{card.classList.remove('saving','error');card.classList.add('saved');setStatus(card,'Enregistré ✓ '+d.saved_at,'ok');
      const pub=card.querySelector('[data-f=is_published]');card.classList.toggle('unpub',!pub.checked);})
    .catch(async r=>{card.classList.remove('saving','saved');card.classList.add('error');
      let m='Erreur';if(r&&r.status===422){m='À compléter (question + réponse)';}setStatus(card,m,'err');});
}
const timers=new WeakMap();
function queueSave(card){clearTimeout(timers.get(card));setStatus(card,'Modification…','busy');timers.set(card,setTimeout(()=>save(card),900));}

function wire(card){
  const qInput=card.querySelector('.kq'), prev=card.querySelector('.qprev');
  card.querySelectorAll('input[data-f],textarea[data-f]').forEach(el=>{
    if(el.type==='checkbox')return;
    el.addEventListener('input',()=>queueSave(card));
  });
  if(qInput&&prev){qInput.addEventListener('input',()=>{prev.textContent=qInput.value||'(question vide)';});}
  card.querySelectorAll('select[data-f],input[type=checkbox][data-f]').forEach(el=>el.addEventListener('change',()=>save(card)));
  card.querySelector('.kdel').addEventListener('click',(e)=>{
    e.preventDefault();
    if(!confirm('Mettre cet article à la corbeille ?'))return;
    fetch(KN_BASE+'/'+card.dataset.id,{method:'DELETE',headers:hdr}).then(()=>{card.remove();refreshEmpty();});
  });
}
document.querySelectorAll('.kcard').forEach(wire);

function catOptions(){return '<option value="">- Catégorie -</option>'+CATS.map(c=>`<option value="${c.id}">${c.name}</option>`).join('');}
function buildCard(a){
  const d=document.createElement('details');d.className='kcard unpub';d.dataset.id=a.id;d.open=true;
  d.innerHTML=`<summary><i class="chev" data-lucide="chevron-right"></i><span class="kdot"></span>`+
    `<span class="qprev">${a.question||'(question vide)'}</span><span class="kstatus"></span></summary>`+
    `<div class="kbody"><input class="kq" data-f="question" placeholder="Question…">`+
    `<textarea class="ka" data-f="answer" rows="4" placeholder="Réponse…"></textarea>`+
    `<div class="aibtns"><button type="button" onclick="kai(this,'humanize')">Humaniser</button>`+
    `<button type="button" onclick="kai(this,'grammar')">✓ Orthographe</button>`+
    `<button type="button" onclick="kai(this,'generate')">Générer</button></div>`+
    `<div class="kmeta"><select class="kc" data-f="category_id">${catOptions()}</select>`+
    `<input class="kk" data-f="keywords" placeholder="mots-clés, séparés par virgule">`+
    `<label class="kpub"><input type="checkbox" data-f="is_published"> Publié</label>`+
    `<button type="button" class="kdel" title="Corbeille"><i data-lucide="trash-2"></i></button>`+
    `<span class="kstats">0 · 0</span></div></div>`;
  d.querySelector('[data-f=question]').value=a.question;
  d.querySelector('[data-f=answer]').value=a.answer;
  return d;
}
document.getElementById('knew').addEventListener('click',function(){
  fetch(KN_QUICK,{method:'POST',headers:hdr}).then(r=>r.json()).then(d=>{
    const card=buildCard(d.article);
    const body=document.querySelector('.kcatbody');
    if(body){body.prepend(card);card.closest('.kcat').open=true;}else{document.getElementById('klist').prepend(card);}
    wire(card);window.lucide&&lucide.createIcons();refreshEmpty();
    const q=card.querySelector('.kq');q.focus();q.select();card.scrollIntoView({behavior:'smooth',block:'center'});
  });
});

function kai(btn,action){
  const card=btn.closest('.kcard'),ta=card.querySelector('.ka'),q=card.querySelector('.kq').value;
  if(action!=='generate' && !ta.value.trim()){setStatus(card,"Écrivez d'abord du texte.",'err');return;}
  setStatus(card,'IA en cours…','busy');
  fetch(KN_AI,{method:'POST',headers:hdr,body:JSON.stringify({action,text:ta.value||q,context:q})})
    .then(r=>r.json()).then(d=>{if(d.ok){ta.value=d.result;save(card);}else{setStatus(card,d.message||'IA indisponible.','err');}})
    .catch(()=>setStatus(card,'Erreur IA.','err'));
}

const kimport=document.getElementById('kimport');
if(kimport)kimport.addEventListener('click',function(){
  if(!confirm('Importer la base de connaissances de départ (générée depuis le site) ? Vos articles existants ne seront pas modifiés.'))return;
  this.disabled=true;this.innerHTML='Import en cours…';
  fetch("{{ route('admin.knowledge.import') }}",{method:'POST',headers:hdr}).then(r=>r.json())
    .then(d=>{alert('Base importée : '+(d.total||0)+' articles au total. La page va se recharger.');location.reload();})
    .catch(()=>{alert('Erreur pendant l\'import.');this.disabled=false;this.innerHTML='Importer la base de départ';});
});

// Plier / déplier tout
document.getElementById('ktoggleall').addEventListener('click',function(){
  const open=this.dataset.open==='1';
  document.querySelectorAll('#klist details').forEach(d=>d.open=!open);
  this.dataset.open=open?'0':'1';
  this.innerHTML=open?'<i data-lucide="chevrons-up-down"></i> Déplier tout':'<i data-lucide="chevrons-down-up"></i> Plier tout';
  window.lucide&&lucide.createIcons();
});

// Filtre : on déplie les cartes correspondantes, on masque les autres + les sections vides.
const filter=document.getElementById('kfilter');
filter.addEventListener('input',()=>{const t=filter.value.toLowerCase().trim();
  document.querySelectorAll('.kcat').forEach(cat=>{
    let visible=0;
    cat.querySelectorAll('.kcard').forEach(c=>{
      const hay=(c.querySelector('.kq').value+' '+c.querySelector('.ka').value+' '+c.querySelector('.kk').value).toLowerCase();
      const ok=!t||hay.includes(t);c.style.display=ok?'':'none';if(ok)visible++;if(t&&ok)c.open=true;
    });
    cat.style.display=visible?'':'none';if(t)cat.open=true;
  });
});
function refreshEmpty(){document.getElementById('kempty').style.display=document.querySelectorAll('.kcard').length?'none':'block';}
</script>@endpush
@endsection