@include('whatsappcenter::admin.partials.styles')
<div class="wac-page container-fluid">

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">AI Training</h4>
      <p class="wac-subtitle">Feed your bot with knowledge — it will only answer from this content</p>
    </div>
    <span class="wac-badge wac-badge-teal" style="font-size:.78rem;padding:.3rem .875rem">{{ $totalChunks }} chunks indexed</span>
  </div>

  @if(session('success'))
    <div class="wac-notice suc">{{ session('success') }}</div>
  @endif

  <div class="row g-4">

    {{-- Add Sources ─────────────────────────────────────────────────────────── --}}
    <div class="col-lg-5">

      <div class="wac-panel" style="margin-bottom:1.25rem">
        <div class="wac-panel-head">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
          Add Website
        </div>
        <div class="wac-panel-body">
          <form action="{{ route('admin.whatsappcenter.training.website') }}" method="POST">
            @csrf
            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Name</label>
              <input type="text" name="name" class="wac-ctrl" placeholder="Company Website" required>
            </div>
            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Page URL</label>
              <input type="url" name="url" class="wac-ctrl" placeholder="https://yourwebsite.com/about" required>
              <p class="wac-hint">All visible text from this page will be indexed for AI.</p>
            </div>
            <button type="submit" class="wac-btn-primary" style="width:100%;justify-content:center">
              <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
              Crawl &amp; Index
            </button>
          </form>
        </div>
      </div>

      <div class="wac-panel" style="margin-bottom:1.25rem">
        <div class="wac-panel-head">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          Upload Document
        </div>
        <div class="wac-panel-body">
          <form action="{{ route('admin.whatsappcenter.training.document') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Name</label>
              <input type="text" name="name" class="wac-ctrl" placeholder="Product Catalogue" required>
            </div>
            <div style="margin-bottom:1rem">
              <label class="wac-lbl">File <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.7rem">(PDF, TXT, DOCX)</span></label>
              <input type="file" name="document" class="wac-ctrl" style="padding:.45rem .875rem" accept=".pdf,.txt,.docx,.doc" required>
            </div>
            <button type="submit" class="wac-btn-primary" style="width:100%;justify-content:center;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 12px rgba(22,163,74,.3)">
              <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
              Upload &amp; Index
            </button>
          </form>
        </div>
      </div>

      <div class="wac-panel" style="margin-bottom:1.25rem">
        <div class="wac-panel-head">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
          Manual Content
        </div>
        <div class="wac-panel-body">
          <form action="{{ route('admin.whatsappcenter.training.manual') }}" method="POST">
            @csrf
            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Title</label>
              <input type="text" name="name" class="wac-ctrl" placeholder="Refund Policy" required>
            </div>
            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Content</label>
              <textarea name="content" class="wac-ctrl" rows="5" placeholder="We accept returns within 7 days of purchase..." required></textarea>
            </div>
            <button type="submit" class="wac-btn-secondary" style="width:100%;justify-content:center">
              <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/></svg>
              Save &amp; Index
            </button>
          </form>
        </div>
      </div>

      <div class="wac-panel">
        <div class="wac-panel-head">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          Test Knowledge Base
        </div>
        <div class="wac-panel-body">
          <div style="margin-bottom:1rem">
            <label class="wac-lbl">Ask a question</label>
            <input type="text" id="testQ" class="wac-ctrl" placeholder="What is your refund policy?">
          </div>
          <button type="button" class="wac-btn-primary" style="width:100%;justify-content:center;background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 12px rgba(245,158,11,.3)" onclick="testKB()">
            <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            Test Search
          </button>
          <div id="kbResults" class="mt-3"></div>
        </div>
      </div>

    </div>

    {{-- Sources + FAQs ──────────────────────────────────────────────────────── --}}
    <div class="col-lg-7">

      <div class="wac-card">
        <div class="wac-card-head">
          <strong>
            <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--wac-green)"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
            Indexed Sources ({{ $sources->count() }})
          </strong>
        </div>
        @forelse($sources as $src)
        <div class="wac-list-item" style="flex-wrap:wrap;gap:.5rem">
          <div style="flex:1;min-width:0">
            <div style="font-weight:600;font-size:.875rem">{{ $src->name }}</div>
            <div style="font-size:.73rem;color:var(--text-secondary);margin-top:.15rem">
              <span class="wac-badge wac-badge-grey" style="font-size:.62rem">{{ $src->type }}</span>
              @if($src->url)
                &nbsp;<a href="{{ $src->url }}" target="_blank" style="color:var(--wac-green);font-size:.72rem">{{ Str::limit($src->url, 40) }}</a>
              @endif
            </div>
          </div>
          <div style="text-align:right">
            <span class="wb {{ $src->status==='indexed'?'wb-s':($src->status==='failed'?'wb-d':'wb-w') }}">{{ $src->status }}</span>
            <div style="font-size:.7rem;color:var(--text-secondary);margin-top:.2rem">{{ $src->chunks_count }} chunks</div>
          </div>
          <div style="display:flex;gap:.4rem">
            <form action="{{ route('admin.whatsappcenter.training.reindex', $src->id) }}" method="POST">
              @csrf
              <button class="wac-btn-secondary" style="padding:.3rem .7rem;font-size:.75rem" title="Re-index">
                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
              </button>
            </form>
            <form action="{{ route('admin.whatsappcenter.training.destroy', $src->id) }}" method="POST" onsubmit="return confirm('Remove this source and all its chunks?')">
              @csrf @method('DELETE')
              <button class="wac-btn-del" style="padding:.3rem .7rem;font-size:.75rem">
                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>
              </button>
            </form>
          </div>
        </div>
        @empty
        <div class="wac-empty" style="padding:2rem">
          <div class="wac-empty-icon">📚</div>
          <p>No sources yet. Add a website, document, or manual content to get started.</p>
        </div>
        @endforelse
      </div>

      <div class="wac-card">
        <div class="wac-card-head">
          <strong>
            <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color:var(--wac-green)"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            FAQs ({{ $faqs->count() }})
          </strong>
          <button class="wac-btn-secondary" style="padding:.3rem .875rem;font-size:.78rem" onclick="toggleFaqForm()">
            <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add FAQ
          </button>
        </div>

        <div id="faqFormWrap" style="display:none;padding:1.25rem;border-bottom:1.5px solid rgba(0,0,0,.07)">
          <form action="{{ route('admin.whatsappcenter.training.faqs.store') }}" method="POST">
            @csrf
            <div class="wac-form-row col2" style="margin-bottom:0">
              <div>
                <label class="wac-lbl">Question</label>
                <input type="text" name="question" class="wac-ctrl" placeholder="What is your return policy?" required>
              </div>
              <div>
                <label class="wac-lbl">Answer</label>
                <textarea name="answer" class="wac-ctrl" rows="3" placeholder="We accept returns within 7 days..." required></textarea>
              </div>
            </div>
            <div class="d-flex gap-2 mt-3">
              <button type="submit" class="wac-btn-primary" style="padding:.45rem 1.1rem;font-size:.82rem">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/></svg>
                Save FAQ
              </button>
              <button type="button" class="wac-btn-secondary" style="padding:.43rem 1rem;font-size:.82rem" onclick="toggleFaqForm()">Cancel</button>
            </div>
          </form>
        </div>

        @forelse($faqs as $faq)
        <div class="wac-list-item" style="align-items:flex-start">
          <div style="flex:1;min-width:0">
            <div style="font-weight:600;font-size:.875rem;color:var(--wac-green)">Q: {{ $faq->question }}</div>
            <div style="font-size:.8rem;color:var(--text-secondary);margin-top:.3rem;line-height:1.55">A: {{ $faq->answer }}</div>
          </div>
          <form action="{{ route('admin.whatsappcenter.training.faqs.destroy', $faq->id) }}" method="POST" onsubmit="return confirm('Delete this FAQ?')">
            @csrf @method('DELETE')
            <button class="wac-btn-del" style="padding:.3rem .7rem;font-size:.75rem;margin-left:.75rem">
              <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>
            </button>
          </form>
        </div>
        @empty
        <div class="wac-empty" style="padding:1.75rem"><p>No FAQs yet. FAQs are included in every AI response as context.</p></div>
        @endforelse
      </div>

    </div>
  </div>
</div>
<script>
function toggleFaqForm(){
  const f=document.getElementById('faqFormWrap');
  f.style.display=f.style.display==='none'?'block':'none';
}
function testKB(){
  const query=document.getElementById('testQ').value.trim();
  if(!query) return;
  document.getElementById('kbResults').innerHTML='<div style="color:var(--text-secondary);font-size:.85rem;padding:.5rem 0">Searching...</div>';
  fetch('{{ route("admin.whatsappcenter.training.test") }}',{
    method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({query})
  }).then(r=>r.json()).then(d=>{
    let html='';
    if(!d.results||!d.results.length){
      html='<div class="wac-notice war">No matching content found in knowledge base.</div>';
    } else {
      d.results.forEach(r=>{
        html+=`<div class="wac-card" style="margin-bottom:.5rem"><div class="wac-card-body" style="padding:.75rem">
          <div style="display:flex;justify-content:space-between;margin-bottom:.35rem">
            <small style="color:var(--text-secondary)">${r.source||'KB'}</small>
            <span class="wac-badge wac-badge-teal">${r.score}% match</span>
          </div>
          <div style="font-size:.8rem">${(r.text||'').substring(0,200)}...</div>
        </div></div>`;
      });
    }
    if(d.ai_answer) html+=`<div class="wac-notice inf"><strong>AI Answer:</strong><br>${d.ai_answer}</div>`;
    document.getElementById('kbResults').innerHTML=html;
  });
}
</script>