<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
import Adding from '@Holos/Button/ButtonRh.vue';
</script>

<template>
  <div class="p-6 max-w-auto mx-auto">
    <!-- Header -->
    <div class="flex items-start justify-between gap-4">
      <div>
        <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">Nómina</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información bancaria y salarios de empleados</p>
      </div>

      <div>
        <Adding text="Procesar Nómina" />
      </div>
    </div>

    <!-- KPI Cards -->
    <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
        <div class="text-sm text-gray-500 dark:text-primary-dt/70">Nómina Total Mensual</div>
        <div class="mt-4 text-3xl font-bold text-gray-900 dark:text-primary-dt">$125,000</div>
        <div class="mt-1 text-xs text-gray-400 dark:text-primary-dt/70">3 empleados activos</div>
      </div>

      <div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
        <div class="text-sm text-gray-500 dark:text-primary-dt/70">Último Procesamiento</div>
        <div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">31 Enero</div>
        <div class="mt-1 text-sm text-emerald-600 dark:text-success-dt">Procesado exitosamente</div>
      </div>

      <div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
        <div class="text-sm text-gray-500 dark:text-primary-dt/70">Próximo Procesamiento</div>
        <div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">29 Feb</div>
        <div class="mt-1 text-sm text-amber-600 dark:text-warning-dt">En 5 días</div>
      </div>
    </div>

    <!-- Employee Payroll Card -->
    <section class="mt-8 bg-white rounded-lg border border-gray-100 shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
      <header class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
            <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="account_balance_wallet" />
          </div>
          <div>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">$ María González López</h2>
            <p class="text-sm text-gray-500 dark:text-primary-dt/70">Información bancaria y detalles de nómina</p>
          </div>
        </div>
      </header>

      <!-- Información Bancaria -->
      <div class="mt-6">
        <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="account_balance" />
          Información Bancaria
        </h3>

        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-3">
          <div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Banco</div>
            <div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">BBVA Bancomer</div>
          </div>

          <div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
            <div class="text-sm text-gray-500 dark:text-primary-dt/70">CLABE</div>
            <div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">012180001234567890</div>
          </div>

          <div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Crédito INFONAVIT</div>
            <div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">5020123456789</div>
          </div>
        </div>
      </div>

      <!-- Desglose Salarial -->
      <div class="mt-8">
        <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="payments" />
          Desglose Salarial
        </h3>

        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-6">
          <div class="md:col-span-1 col-span-2 rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Salario Base</div>
            <div class="mt-2 text-xl font-bold text-[#2563eb] dark:text-primary-dt">$35,000</div>
          </div>

          <div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-emerald-50/40 dark:bg-success-d/10 dark:border-primary/20">
            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Bonos</div>
            <div class="mt-2 text-xl font-bold text-emerald-600 dark:text-success-dt">+$8,000</div>
          </div>

          <div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-rose-50/40 dark:bg-danger-d/10 dark:border-primary/20">
            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Deducciones</div>
            <div class="mt-2 text-xl font-bold text-rose-600 dark:text-danger-dt">-$2,000</div>
          </div>

          <div class="md:col-span-1 col-span-2 rounded-lg p-4 border border-gray-100 bg-rose-50/40 flex items-center justify-between dark:bg-primary/5 dark:border-primary/20">
            <div class="text-black dark:text-primary-dt">
              <div class="text-sm dark:text-primary-dt">Total Mensual</div>
              <div class="mt-2 text-xl font-bold dark:text-primary-dt">$45,000</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Último Pago -->
      <div class="mt-8">
        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt">Último Pago</h3>
        <div class="mt-3 rounded-lg border border-gray-100 p-4 bg-white flex items-center justify-between dark:bg-primary-d dark:border-primary/20">
          <div>
            <div class="text-lg font-semibold text-gray-900 dark:text-primary-dt">$43,000</div>
            <div class="text-xs text-gray-500 dark:text-primary-dt/70">Fecha: 2024-01-31</div>
          </div>
          <span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Procesado</span>
        </div>
      </div>

      <!-- Acciones -->
      <div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
          <GoogleIcon class="text-black dark:text-primary-dt text-lg" name="sync" />
          Actualizar Cuenta
        </button>

        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
          <GoogleIcon class="text-black dark:text-primary-dt text-lg" name="calculate" />
          Recalcular Salario
        </button>

        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
          <GoogleIcon class="text-black dark:text-primary-dt text-lg" name="history" />
          Historial de Pagos
        </button>
      </div>
    </section>
  </div>
</template>