<template>
  <div>
    <h1 class="mb-6 text-2xl font-bold text-gray-900">Дашборд</h1>

    <div v-if="loading" class="text-gray-500">Загрузка...</div>

    <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <div class="rounded-xl border border-gray-200 bg-white p-5">
        <p class="text-sm text-gray-500">Заказов сегодня</p>
        <p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.orders_today }}</p>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5">
        <p class="text-sm text-gray-500">Ожидают обработки</p>
        <p class="mt-1 text-3xl font-bold text-amber-600">{{ stats.pending_orders }}</p>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5">
        <p class="text-sm text-gray-500">Всего заказов</p>
        <p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.total_orders }}</p>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5">
        <p class="text-sm text-gray-500">Выручка</p>
        <p class="mt-1 text-3xl font-bold text-green-600">{{ fmt(stats.total_revenue) }} &#8381;</p>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5">
        <p class="text-sm text-gray-500">Расчётов</p>
        <p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.total_calculations }}</p>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5">
        <p class="text-sm text-gray-500">Материалов</p>
        <p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.materials_count }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../../api/client'

const loading = ref(true)
const stats = ref({})

onMounted(async () => {
  try {
    const { data } = await api.get('/admin/dashboard')
    stats.value = data
  } finally {
    loading.value = false
  }
})

function fmt(n) {
  return new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 0 }).format(n || 0)
}
</script>
