{{define "title"}}Dashboard{{end}}
{{define "header"}}Dashboard{{end}}
{{define "content"}}
<!-- Stat cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
  <div class="bg-discord-card rounded-lg p-5 border border-discord-border">
    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Tickets ouverts</p>
    <p class="text-3xl font-bold text-white">{{.Stats.OpenTickets}}</p>
  </div>
  <div class="bg-discord-card rounded-lg p-5 border border-discord-border">
    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Fermés (30j)</p>
    <p class="text-3xl font-bold text-white">{{.Stats.ClosedLast30}}</p>
  </div>
  <div class="bg-discord-card rounded-lg p-5 border border-discord-border">
    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Moy. claim (30j)</p>
    <p class="text-3xl font-bold text-white">
      {{if .Stats.AvgClaimMinutes}}{{.Stats.AvgClaimMinutes}}<span class="text-lg text-gray-400">min</span>{{else}}—{{end}}
    </p>
  </div>
  <div class="bg-discord-card rounded-lg p-5 border border-discord-border">
    <p class="text-xs text-gray-400 uppercase tracking-wide mb-1">Moy. résolution (30j)</p>
    <p class="text-3xl font-bold text-white">
      {{if .Stats.AvgResolutionMinutes}}{{.Stats.AvgResolutionMinutes}}<span class="text-lg text-gray-400">min</span>{{else}}—{{end}}
    </p>
  </div>
</div>

<!-- Chart + Bot status -->
<div class="grid grid-cols-1 xl:grid-cols-4 gap-6 mb-6">
  <!-- Chart tickets / jour -->
  <div class="xl:col-span-3 bg-discord-card rounded-lg p-5 border border-discord-border">
    <h3 class="font-semibold text-white mb-4">Tickets ouverts — 30 derniers jours</h3>
    {{if .Chart}}
    <div class="flex items-end gap-1 h-32">
      {{range .Chart}}
      <div class="flex-1 flex flex-col items-center gap-1 group relative">
        <div class="w-full rounded-t bg-indigo-500/70 hover:bg-indigo-400 transition-colors"
             style="height: {{if $.ChartMax}}{{percent .Count $.ChartMax}}%{{else}}0%{{end}}; min-height: {{if .Count}}2px{{else}}0{{end}}">
        </div>
        <span class="text-[9px] text-gray-500 rotate-45 origin-left whitespace-nowrap">{{.Day}}</span>
        <span class="absolute bottom-8 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 pointer-events-none">{{.Count}}</span>
      </div>
      {{end}}
    </div>
    {{else}}
    <p class="text-gray-500 text-sm">Pas encore de données.</p>
    {{end}}
  </div>

  <!-- Bot status -->
  <div class="bg-discord-card rounded-lg p-5 border border-discord-border">
    <h3 class="font-semibold text-white mb-4">Statut du bot</h3>
    <dl class="space-y-2 text-sm">
      <div class="flex justify-between">
        <dt class="text-gray-400">Connexion</dt>
        <dd class="{{if .BotOnline}}text-green-400{{else}}text-red-400{{end}} font-medium flex items-center gap-1">
          <span class="w-2 h-2 rounded-full {{if .BotOnline}}bg-green-400{{else}}bg-red-400{{end}}"></span>
          {{if .BotOnline}}En ligne{{else}}Hors ligne{{end}}
        </dd>
      </div>
      <div class="flex justify-between">
        <dt class="text-gray-400">Uptime</dt>
        <dd class="text-white">{{.Uptime}}</dd>
      </div>
      <div class="flex justify-between">
        <dt class="text-gray-400">Latence</dt>
        <dd class="text-white">{{if .LatencyMs}}{{.LatencyMs}}ms{{else}}—{{end}}</dd>
      </div>
      {{if .GuildName}}
      <div class="flex justify-between">
        <dt class="text-gray-400">Serveur</dt>
        <dd class="text-white truncate max-w-[120px]">{{.GuildName}}</dd>
      </div>
      {{end}}
    </dl>
  </div>
</div>

<!-- Staff table + Panels -->
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
  <!-- Staff stats -->
  <div class="xl:col-span-2 bg-discord-card rounded-lg border border-discord-border overflow-hidden">
    <div class="px-5 py-4 border-b border-discord-border">
      <h3 class="font-semibold text-white">Tickets par staff (30j)</h3>
    </div>
    {{if .Staff}}
    <table class="w-full text-sm">
      <thead>
        <tr class="text-xs text-gray-400 uppercase">
          <th class="px-5 py-2 text-left">Staff</th>
          <th class="px-4 py-2 text-right">Claimés</th>
          <th class="px-4 py-2 text-right">Fermés</th>
          <th class="px-4 py-2 text-right">Moy. claim</th>
          <th class="px-4 py-2 text-right">Moy. résol.</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-discord-border">
        {{range .Staff}}
        <tr class="hover:bg-white/5 transition-colors">
          <td class="px-5 py-3 text-white font-mono text-xs">{{.StaffID}}</td>
          <td class="px-4 py-3 text-right text-indigo-400 font-semibold">{{.Claimed}}</td>
          <td class="px-4 py-3 text-right text-gray-300">{{.Closed}}</td>
          <td class="px-4 py-3 text-right text-gray-400">{{fmtMin .AvgClaimMinutes}}</td>
          <td class="px-4 py-3 text-right text-gray-400">{{fmtMin .AvgResolutionMinutes}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
    {{else}}
    <p class="px-5 py-8 text-gray-500 text-sm text-center">Aucun ticket claimé sur les 30 derniers jours.</p>
    {{end}}
  </div>

  <!-- Panels actifs -->
  <div class="bg-discord-card rounded-lg border border-discord-border overflow-hidden">
    <div class="px-5 py-4 border-b border-discord-border flex items-center justify-between">
      <h3 class="font-semibold text-white">Panels</h3>
      <a href="/panels/new" class="text-xs text-indigo-400 hover:text-indigo-300">+ Créer</a>
    </div>
    {{if .Panels}}
    <ul class="divide-y divide-discord-border">
      {{range .Panels}}
      <li class="px-5 py-3 flex items-center justify-between text-sm">
        <span class="flex items-center gap-2">
          <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color:{{.EmbedColor}}"></span>
          <span class="text-white font-medium">{{.Name}}</span>
          <span class="text-gray-500">{{len .Types}}</span>
        </span>
        <a href="/panels/{{.ID}}/edit" class="text-indigo-400 hover:text-indigo-300">Éditer →</a>
      </li>
      {{end}}
    </ul>
    {{else}}
    <p class="px-5 py-8 text-gray-500 text-sm text-center">
      <a href="/panels/new" class="text-indigo-400 hover:text-indigo-300">Créer un panel →</a>
    </p>
    {{end}}
  </div>
</div>
{{end}}