<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-6">Rendszer Statisztika (Admin)</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-blue-600 text-white p-6 rounded-lg shadow-lg">
        <p class="text-blue-100 uppercase text-xs font-bold">Összes Felhasználó</p>
        <p class="text-4xl font-black">1,248</p>
      </div>
      <div class="bg-emerald-600 text-white p-6 rounded-lg shadow-lg">
        <p class="text-emerald-100 uppercase text-xs font-bold">Aktív Voucherek</p>
        <p class="text-4xl font-black">42</p>
      </div>
      <div class="bg-amber-600 text-white p-6 rounded-lg shadow-lg">
        <p class="text-amber-100 uppercase text-xs font-bold">Bot Találatok (Új)</p>
        <p class="text-4xl font-black">156</p>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow overflow-hidden">
      <div class="p-4 border-b bg-gray-50 flex justify-between items-center">
        <span class="font-bold text-gray-700">Jóváhagyásra váró szervizek</span>
        <button class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600">Összes frissítése</button>
      </div>
      <table class="w-full text-left border-collapse">
        <thead class="bg-gray-100 text-gray-600 text-xs uppercase">
          <tr>
            <th class="p-3">Név</th>
            <th class="p-3">Város</th>
            <th class="p-3">Típus</th>
            <th class="p-3 text-right">Művelet</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 text-sm">
          <tr v-for="i in 3" :key="i" class="hover:bg-gray-50">
            <td class="p-3 font-semibold">Profi Gumiszerviz #{{i}}</td>
            <td class="p-3">Budapest</td>
            <td class="p-3"><span class="bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs">Gumis</span></td>
            <td class="p-3 text-right">
              <button class="text-blue-600 hover:underline mr-3">Szerkeszt</button>
              <button class="text-green-600 hover:underline font-bold text-lg">✓</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>