<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link } from '@inertiajs/vue3';

defineProps({
    stats: {
        type: Object,
        default: () => ({
            cattle_active: 0,
            open_lots: 0,
            expenses_month: 0,
        }),
    },
});

const money = (n) =>
    new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(Number(n || 0));
</script>

<template>
    <Head title="Dashboard — Control Ganadero" />

    <AuthenticatedLayout>
        <template #header>
            <h3 class="mb-0">Dashboard</h3>
        </template>
        <template #breadcrumb>
            <li class="breadcrumb-item"><Link :href="route('dashboard')">Inicio</Link></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </template>

        <div class="row">
            <div class="col-lg-4 col-6">
                <div class="small-box text-bg-success">
                    <div class="inner">
                        <h3>{{ stats.cattle_active }}</h3>
                        <p>Animales activos</p>
                    </div>
                    <div class="icon"><i class="fa-solid fa-cow"></i></div>
                    <Link :href="route('admin.ranch.cattle.index')" class="small-box-footer link-light link-underline-opacity-0">
                        Ver inventario <i class="fa-solid fa-arrow-circle-right"></i>
                    </Link>
                </div>
            </div>
            <div class="col-lg-4 col-6">
                <div class="small-box text-bg-primary">
                    <div class="inner">
                        <h3>{{ stats.open_lots }}</h3>
                        <p>Lotes de engorda abiertos</p>
                    </div>
                    <div class="icon"><i class="fa-solid fa-boxes-stacked"></i></div>
                    <Link :href="route('admin.ranch.fattening.index')" class="small-box-footer link-light link-underline-opacity-0">
                        Ver engorda <i class="fa-solid fa-arrow-circle-right"></i>
                    </Link>
                </div>
            </div>
            <div class="col-lg-4 col-12">
                <div class="small-box text-bg-warning">
                    <div class="inner">
                        <h3 class="fs-3">{{ money(stats.expenses_month) }}</h3>
                        <p>Gastos del mes</p>
                    </div>
                    <div class="icon"><i class="fa-solid fa-receipt"></i></div>
                    <Link :href="route('admin.ranch.expenses.index')" class="small-box-footer link-dark link-underline-opacity-0">
                        Ver gastos <i class="fa-solid fa-arrow-circle-right"></i>
                    </Link>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 class="card-title">Accesos rápidos</h3>
                    </div>
                    <div class="card-body d-flex flex-wrap gap-2">
                        <Link :href="route('admin.ranch.cattle.create')" class="btn btn-success btn-sm">
                            <i class="fa-solid fa-plus me-1"></i> Nuevo animal
                        </Link>
                        <Link :href="route('admin.ranch.weights.create')" class="btn btn-outline-primary btn-sm">
                            <i class="fa-solid fa-weight-scale me-1"></i> Registrar pesaje
                        </Link>
                        <Link :href="route('admin.ranch.alerts.index')" class="btn btn-outline-warning btn-sm">
                            <i class="fa-solid fa-bell me-1"></i> Centro de alertas
                        </Link>
                        <Link :href="route('admin.ranch.reports.index')" class="btn btn-outline-secondary btn-sm">
                            <i class="fa-solid fa-chart-line me-1"></i> Balance del periodo
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
