@extends('layouts.app')
@section('title','Tableau de bord')
@section('content')
<div class="row" style="justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap">
  <div>
    <div class="h1">Tableau de bord</div>
    <div class="sub">Vue d'ensemble du chatbot et de la base de connaissances.</div>
  </div>
  @if(auth()->user()->hasRole('super_admin','admin'))
  <form method="post" action="{{ route('admin.resync') }}" onsubmit="var b=this.querySelector('button');b.disabled=true;b.textContent='Synchronisation en cours… (jusqu\'à 2 minutes)'">@csrf
    <button class="btn" style="font-size:1.05rem;padding:14px 22px"><i data-lucide="refresh-cw"></i> Tout resynchroniser</button>
    <div class="sub" style="margin-top:4px;text-align:right">La Comte · Orgexpo · Photographes</div>
  </form>
  @endif
</div>

<div id="onboarding" class="card" style="display:none;border-left:4px solid var(--orange)">
  <div class="row" style="justify-content:space-between;align-items:flex-start">
    <div>
      <b>Bienvenue dans le back-office Yggdrasil</b>
      <div style="color:var(--muted);margin-top:6px;font-size:.9rem;line-height:1.6">
        Quelques repères pour démarrer :
        <ul style="margin:6px 0 0 18px">
          <li>Enrichissez la <a href="{{ route('admin.knowledge.index') }}">base de connaissances</a> : c'est elle qui alimente les réponses du chatbot.</li>
          <li>Surveillez les <a href="{{ route('admin.leads.index') }}">questions sans réponse</a> pour repérer ce qui manque.</li>
          <li>Astuce : appuyez sur <b>Ctrl/+ K</b> pour la recherche rapide.</li>
          <li>Pensez à activer la <a href="{{ route('2fa.setup') }}">double authentification</a> sur votre compte.</li>
        </ul>
      </div>
    </div>
    <button class="btn ghost sm" onclick="document.getElementById('onboarding').style.display='none';localStorage.setItem('ygg_onboarded','1')">J'ai compris</button>
  </div>
</div>
<script>if(!localStorage.getItem('ygg_onboarded')){var o=document.getElementById('onboarding');if(o)o.style.display='block';}</script>

{{-- Tuiles cliquables : chacune mène à sa page --}}
<div class="grid g4">
  <a class="stat statlink" href="{{ route('admin.knowledge.index') }}" title="Ouvrir la base de connaissances"><div class="n">{{ $articles }}</div><div class="l">Articles de connaissance →</div></a>
  <a class="stat statlink" href="{{ route('admin.conversations.index') }}" title="Voir les conversations du chatbot"><div class="n">{{ $conversations }}</div><div class="l">Conversations →</div></a>
  <a class="stat statlink" href="{{ route('admin.leads.index') }}" title="Traiter les questions en attente"><div class="n">{{ $leadsNew }}</div><div class="l">Questions à traiter →</div></a>
  @if(auth()->user()->hasRole('super_admin','admin'))
  <a class="stat statlink" href="{{ route('admin.ai-usage.index') }}" title="Détail de l'usage et des coûts IA"><div class="n">{{ number_format($costMonth/1000000,2,',',' ') }} €</div><div class="l">Coût IA ce mois →</div></a>
  @else
  <div class="stat"><div class="n">{{ number_format($costMonth/1000000,2,',',' ') }} €</div><div class="l">Coût IA ce mois</div></div>
  @endif
</div>
<style>
a.stat{color:inherit;display:block;transition:.15s}
a.statlink:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.08)}
tr.rowlink{cursor:pointer}tr.rowlink:hover td{background:rgba(232,114,44,.06)}
</style>

@php($statuts = ['new' => 'nouveau', 'sent' => 'transmis', 'handled' => 'traité'])
<div class="card" style="margin-top:18px">
  <div class="row" style="justify-content:space-between"><b>Dernières questions sans réponse</b><a class="btn ghost sm" href="{{ route('admin.leads.index') }}">Tout voir</a></div>
  <table style="margin-top:10px"><thead><tr><th>Email</th><th>Question</th><th>Statut</th><th>Reçu</th></tr></thead><tbody>
    @forelse($recentLeads as $l)
      <tr class="rowlink" onclick="location.href='{{ route('admin.leads.show',$l) }}'" title="Ouvrir cette question">
        <td>{{ $l->email }}</td><td>{{ \Illuminate\Support\Str::limit($l->question,60) }}</td>
        <td><span class="badge {{ $l->status }}">{{ $statuts[$l->status] ?? $l->status }}</span></td>
        <td>{{ $l->created_at->diffForHumans() }}</td>
      </tr>
    @empty<tr><td colspan="4" style="color:var(--muted)">Aucune question pour l'instant.</td></tr>@endforelse
  </tbody></table>
</div>
@endsection