<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue'

const kpis = [ /* test de v-for*/
  { title: 'Total Empleados', value: '248', meta: '+12% vs mes anterior', icon: 'people' },
  { title: 'Nuevas Contrataciones', value: '18', meta: '+3 vs mes anterior', icon: 'person_add' },
  { title: 'Certificaciones', value: '156', meta: '+8% vs mes anterior', icon: 'school' },
  { title: 'Documentos pendientes', value: '12', meta: '-5 vs mes anterior', icon: 'inventory' },
];

const employees = [ /* test de v-for*/
  { initials: 'MG', name: 'María González', role: 'Desarrolladora Frontend • Tecnología', date: '2024-01-15', status: 'Activo' },
  { initials: 'CR', name: 'Carlos Rodríguez', role: 'Analista de Marketing • Marketing', date: '2024-01-10', status: 'Activo' },
  { initials: 'AM', name: 'Ana Martínez', role: 'Contadora • Finanzas', date: '2024-01-08', status: 'Activo' },
];

</script>

<template>
  <div class="p-6 max-w-auto mx-auto">
    
    <!-- Header -->
    <div class="flex items-start justify-between gap-4 mb-8">
      <div>
        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Dashboard</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Resumen general del sistema de recursos humanos</p>
      </div>
    </div>

    <!-- KPIs -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <template v-for="(kpi, i) in kpis" :key="i">
        <div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg border border-gray-100 p-5 shadow-sm">
          <div class="flex items-start justify-between">
            <div>
              <div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ kpi.title }}</div>
              <div class="mt-3 text-3xl font-bold text-gray-900 dark:text-primary-dt">{{ kpi.value }}</div>
              <div class="mt-1 text-xs text-emerald-600 dark:text-success-dt">{{ kpi.meta }}</div>
            </div>
            <div class="text-gray-300 dark:text-primary-dt/60">
              <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gray-50 dark:bg-primary/10 text-lg">
                <GoogleIcon :name="kpi.icon" class="text-xl text-gray-500 dark:text-primary-dt" />
              </span>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- Left: Empleados recientes (span 2) -->
    <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="md:col-span-2 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
              <GoogleIcon name="groups" class="text-xl text-gray-700 dark:text-primary-dt" />
              Empleados Recientes
            </h3>
            <p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Últimas incorporaciones al equipo</p>
          </div>
        </div>

        <ul class="space-y-4 mt-4">
          <li v-for="(e, idx) in employees" :key="idx" class="flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="flex-none w-12 h-12 rounded-full bg-blue-50 dark:bg-primary/10 flex items-center justify-center text-blue-700 dark:text-primary-dt font-semibold">
                {{ e.initials }}
              </div>
              <div>
                <div class="font-semibold text-gray-800 dark:text-primary-dt">{{ e.name }}</div>
                <div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">{{ e.role }}</div>
              </div>
            </div>

            <div class="flex flex-col items-end">
              <div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ e.date }}</div>
              <span class="mt-2 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt">
                {{ e.status }}
              </span>
            </div>
          </li>
        </ul>
      </div>

      <!-- Acciones Rápidas -->
      <div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
        <div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
            <GoogleIcon name="timeline" class="text-xl text-gray-700 dark:text-primary-dt" />
            Acciones Rápidas
          </h3>
          <p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Tareas frecuentes del sistema</p>
        </div>

        <div class="mt-4 space-y-3">
          <div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
              <GoogleIcon name="person_add" class="text-lg" />
            </span>
            <span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
            <span class="ml-auto text-gray-300 dark:text-primary-dt/50">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
            </span>
          </div>
          <div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
              <GoogleIcon name="person_add" class="text-lg" />
            </span>
            <span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
            <span class="ml-auto text-gray-300 dark:text-primary-dt/50">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
            </span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>