@extends('layouts.app')
@section('title', 'Assistant conversations')
@section('page', 'conversations')
@section('content')
@php
  $flag = fn ($c) => match (true) {
    $c->rating === 'not_helpful' || $c->messages->contains('rating', 'not_helpful') => ['bad', badge('Rated not helpful', 'b-red')],
    $c->status === 'handed_over' => ['handoff', badge('Handed to team', 'b-blue')],
    $c->status === 'missed' => ['missed', badge('No answer', 'b-amber')],
    default => ['answered', badge('Answered', 'b-green')],
  };
  $first = $convs->first();
@endphp
<div class="page-head">
  <div><h1>Assistant conversations</h1><p>Read what clients asked {{ agency()->assistant?->name ?? 'Desk Assistant' }}. Fix weak answers and they're used from the next question on.</p></div>
  <div class="actions"><a class="btn" href="{{ route('admin.knowledge') }}"><i data-icon="sparkles"></i>Knowledge Hub</a><a class="btn" href="{{ route('admin.assistant.export') }}"><i data-icon="download"></i>Export</a></div>
</div>
<section class="stats">
  <div class="stat"><div class="label">Conversations this month</div><div class="value">{{ $stats['total'] }}</div>@if ($stats['change'] !== null)<div class="sub {{ $stats['change'] >= 0 ? 'up' : '' }}">{{ abs($stats['change']) }}% {{ $stats['change'] >= 0 ? 'more' : 'fewer' }} than {{ $stats['lastMonth'] }}</div>@else<div class="sub">First month of data</div>@endif</div>
  <div class="stat"><div class="label">Answered by the assistant</div><div class="value">{{ $stats['answeredPct'] }}%</div><div class="sub">{{ $stats['answered'] }} of {{ $stats['total'] }}</div></div>
  <div class="stat"><div class="label">Handed to your team</div><div class="value">{{ $stats['handedPct'] }}%</div><div class="sub">{{ plural($stats['handed'], 'conversation') }}</div></div>
  <div class="stat"><div class="label">Rated helpful</div><div class="value">{{ $stats['helpfulPct'] !== null ? $stats['helpfulPct'].'%' : 'No ratings' }}</div><div class="sub {{ $stats['bad'] ? 'warn' : '' }}">{{ $stats['bad'] ? $stats['bad'].' rated not helpful' : 'None rated not helpful' }}</div></div>
</section>
@if ($convs->isEmpty())
<section class="panel"><div class="empty"><strong>No conversations yet</strong>When clients ask {{ agency()->assistant?->name ?? 'Desk Assistant' }} something, the conversation shows up here.</div></section>
@else
<section class="panel chat-layout">
  <aside class="threads">
    <div class="toolbar" style="padding:12px"><div class="chips" data-filter-target="#convos">
      <button class="chip active" data-filter="all">All</button><button class="chip" data-filter="missed">No answer</button><button class="chip" data-filter="bad">Not helpful</button><button class="chip" data-filter="handoff">Handed over</button>
    </div></div>
    <div id="convos">
      @foreach ($convs as $c)
      @php [$st, $b] = $flag($c); $u = $c->user; $firstQ = $c->messages->firstWhere('role', 'user'); @endphp
      <button class="thread {{ $loop->first ? 'active' : '' }}" data-thread="c{{ $c->id }}" data-status="{{ $st }}" data-name="{{ $u?->name ?? 'Visitor' }}" data-sub="{{ $c->client?->company_name }}" data-ini="{{ $u?->initials() }}" data-c="{{ $u?->avatar_color ?? 'c1' }}" data-link="{{ $c->client ? route('admin.clients.show', $c->client) : '' }}">{{ av($u) }}<div class="grow"><div class="t-top"><strong>{{ $u?->name ?? 'Visitor' }}</strong><time>{{ d_thread($c->last_message_at ?? $c->created_at) }}</time></div><div class="t-sub">{{ $c->client?->company_name }}</div><div class="t-prev">{{ $firstQ?->body }}</div><div class="convo-flag">{{ $b }}</div></div></button>
      @endforeach
    </div>
  </aside>
  <div class="conv">
    <div class="conv-head">{{ av($first->user) }}<div class="grow"><strong data-conv-name>{{ $first->user?->name ?? 'Visitor' }}</strong><small data-conv-sub>{{ $first->client?->company_name }}</small></div>@if ($first->client)<a class="btn btn-sm" data-conv-link href="{{ route('admin.clients.show', $first->client) }}">Client profile</a>@endif</div>
    @foreach ($convs as $c)
    <div class="conv-body {{ $loop->first ? '' : 'hidden' }}" data-thread="c{{ $c->id }}">
      @php $lastQ = null; @endphp
      @foreach ($c->messages as $m)
        @if ($m->role === 'user')
          @php $lastQ = $m->body; @endphp
          <div class="cm user" style="align-self:flex-end">{{ $m->body }}</div>
        @else
          <div class="cm bot {{ $m->is_miss ? 'miss' : '' }}">{!! nl2br(e($m->body)) !!}@if ($m->source_label)<span class="src"><i data-icon="book"></i>{{ $m->source_label }}</span>@endif
            <div class="cm-tools">
              @if ($m->rating === 'helpful')<span class="rate"><i data-icon="thumbs-up"></i>Client rated helpful</span>@elseif ($m->rating === 'not_helpful')<span class="rate bad"><i data-icon="thumbs-down"></i>Client rated not helpful</span>@endif
              @if ($canTrain && $lastQ)<button class="btn btn-sm" data-fix="{{ $lastQ }}"><i data-icon="edit"></i>Improve this answer</button>@endif
            </div></div>
        @endif
      @endforeach
    </div>
    @endforeach
  </div>
</section>
@endif
@if ($canTrain)
<div class="modal-bg" id="fix-modal"><div class="modal" role="dialog" aria-modal="true" aria-labelledby="fx-title">
  <div class="modal-head"><h2 id="fx-title">Improve this answer</h2><button class="icon-btn sm" data-close aria-label="Close"><i data-icon="x"></i></button></div>
  <form id="fix-form"><div class="modal-body">
    <p class="small muted">This saves to the Knowledge Hub. The assistant uses it for every client from the next question.</p>
    <div class="field"><label for="fx-q">Question</label><input class="input" id="fx-q" required></div>
    <div class="field"><label for="fx-a">Better answer</label><textarea class="input" id="fx-a" required></textarea></div>
    <div class="field"><label for="fx-t">Keywords</label><input class="input" id="fx-t" placeholder="Comma separated"></div>
  </div><div class="modal-foot"><button type="button" class="btn" data-close>Cancel</button><button class="btn btn-primary" type="submit">Save to Knowledge Hub</button></div></form>
</div></div>
@endif
@endsection
@if ($canTrain)
@push('scripts')
<script>
var KB = {!! json_encode($kb) !!};
document.addEventListener("click", function(e){
  var b = e.target.closest("[data-fix]"); if (!b) return;
  var q = b.dataset.fix, existing = KB.find(function(x){ return x.q.toLowerCase() === q.toLowerCase(); });
  document.getElementById("fx-q").value = q; document.getElementById("fx-a").value = existing ? existing.a : "";
  document.getElementById("fx-t").value = existing ? (existing.tags||[]).join(", ") : "";
  AD.openModal("fix-modal");
});
document.getElementById("fix-form").addEventListener("submit", function(e){
  e.preventDefault();
  var form = this, q = document.getElementById("fx-q").value.trim(), a = document.getElementById("fx-a").value.trim(), t = document.getElementById("fx-t").value;
  AD.post("{{ route('admin.kb.save') }}", { q: q, a: a, tags: t }).then(function(){
    var i = KB.findIndex(function(x){ return x.q.toLowerCase() === q.toLowerCase(); }), item = { q: q, a: a, tags: t.split(",").map(function(s){ return s.trim().toLowerCase(); }).filter(Boolean) };
    if (i > -1) KB[i] = item; else KB.push(item);
    AD.closeModal(form); AD.toast("Saved to the Knowledge Hub");
  }).catch(function(){});
});
</script>
@endpush
@endif