<script setup>
import { computed, onMounted, ref } from 'vue';
import { Link, usePage } from '@inertiajs/vue3';
import { usePermissions } from '@/composables/usePermissions';

const page = usePage();
const { can } = usePermissions();
const user = computed(() => page.props.auth.user);
const flashSuccess = computed(() => page.props.flash?.success);
const flashError = computed(() => page.props.flash?.error);
const avatarUrl = computed(
    () =>
        `https://ui-avatars.com/api/?name=${encodeURIComponent(user.value.name)}&background=2E7D32&color=fff`,
);
const avatarLightUrl = computed(
    () =>
        `https://ui-avatars.com/api/?name=${encodeURIComponent(user.value.name)}&background=ffffff&color=2E7D32`,
);
const sidebarOpen = ref(true);

const toggleSidebar = () => {
    document.body.classList.toggle('sidebar-collapse');
    sidebarOpen.value = !sidebarOpen.value;
};

onMounted(() => {
    document.body.classList.add('layout-fixed', 'sidebar-expand-lg', 'bg-body-tertiary');
});

const isActive = (names) => {
    const current = route().current();
    return names.some((name) => current === name || current?.startsWith(`${name}.`) || current?.startsWith(name));
};
</script>

<template>
    <div class="app-wrapper">
        <nav class="app-header navbar navbar-expand bg-body border-bottom">
            <div class="container-fluid">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#" role="button" @click.prevent="toggleSidebar">
                            <i class="fa-solid fa-bars"></i>
                        </a>
                    </li>
                    <li class="nav-item d-none d-md-block">
                        <Link :href="route('dashboard')" class="nav-link">Inicio</Link>
                    </li>
                </ul>

                <ul class="navbar-nav ms-auto">
                    <li class="nav-item dropdown user-menu">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                            <img :src="avatarUrl" class="user-image rounded-circle shadow" alt="User" width="32" height="32" />
                            <span class="d-none d-md-inline">{{ user.name }}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
                            <li class="user-header text-bg-success">
                                <img :src="avatarLightUrl" class="rounded-circle shadow" alt="User" />
                                <p>
                                    {{ user.name }}
                                    <small>{{ user.email }}</small>
                                </p>
                            </li>
                            <li class="user-footer">
                                <Link :href="route('profile.edit')" class="btn btn-default btn-flat">Perfil</Link>
                                <Link :href="route('logout')" method="post" as="button" class="btn btn-default btn-flat float-end">
                                    Salir
                                </Link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
            <div class="sidebar-brand">
                <Link :href="route('dashboard')" class="brand-link">
                    <i class="fa-solid fa-cow brand-image opacity-75 fs-4"></i>
                    <span class="brand-text app-brand-text">Control Ganadero</span>
                </Link>
            </div>

            <div class="sidebar-wrapper">
                <nav class="mt-2">
                    <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="navigation" data-accordion="false">
                        <li class="nav-header">PRINCIPAL</li>
                        <li v-if="can('ranch.dashboard')" class="nav-item">
                            <Link :href="route('dashboard')" class="nav-link" :class="{ active: isActive(['dashboard']) }">
                                <i class="nav-icon fa-solid fa-gauge-high"></i>
                                <p>Dashboard</p>
                            </Link>
                        </li>

                        <li class="nav-header">GANADERÍA</li>
                        <li v-if="can('ranch.cattle.view') || can('ranch.cattle.manage')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.cattle.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.cattle']) }"
                            >
                                <i class="nav-icon fa-solid fa-cow"></i>
                                <p>Animales</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.weight.record') || can('ranch.cattle.view')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.weights.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.weights']) }"
                            >
                                <i class="nav-icon fa-solid fa-weight-scale"></i>
                                <p>Pesajes</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.fattening.manage') || can('ranch.cattle.view')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.fattening.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.fattening']) }"
                            >
                                <i class="nav-icon fa-solid fa-boxes-stacked"></i>
                                <p>Engorda</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.expenses.manage') || can('ranch.reports.view')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.expenses.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.expenses']) }"
                            >
                                <i class="nav-icon fa-solid fa-receipt"></i>
                                <p>Gastos</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.cattle.view') || can('ranch.cattle.manage')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.pastures.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.pastures']) }"
                            >
                                <i class="nav-icon fa-solid fa-fence"></i>
                                <p>Potreros</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.health.view') || can('ranch.health.manage')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.health.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.health']) }"
                            >
                                <i class="nav-icon fa-solid fa-syringe"></i>
                                <p>Salud</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.cattle.view') || can('ranch.cattle.manage')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.calvings.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.calvings']) }"
                            >
                                <i class="nav-icon fa-solid fa-baby"></i>
                                <p>Partos</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.reports.view')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.reports.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.reports']) }"
                            >
                                <i class="nav-icon fa-solid fa-chart-line"></i>
                                <p>Reportes</p>
                            </Link>
                        </li>
                        <li v-if="can('ranch.dashboard') || can('ranch.reports.view') || can('ranch.cattle.view')" class="nav-item">
                            <Link
                                :href="route('admin.ranch.alerts.index')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.alerts']) }"
                            >
                                <i class="nav-icon fa-solid fa-bell"></i>
                                <p>Alertas</p>
                            </Link>
                        </li>
                        <li class="nav-item">
                            <Link
                                :href="route('admin.ranch.config.edit')"
                                class="nav-link"
                                :class="{ active: isActive(['admin.ranch.config']) }"
                            >
                                <i class="nav-icon fa-solid fa-building"></i>
                                <p>Empresa</p>
                            </Link>
                        </li>

                        <li class="nav-header">CUENTA</li>
                        <li class="nav-item">
                            <Link :href="route('profile.edit')" class="nav-link" :class="{ active: isActive(['profile.edit']) }">
                                <i class="nav-icon fa-solid fa-user-gear"></i>
                                <p>Perfil</p>
                            </Link>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>

        <main class="app-main">
            <div class="app-content-header" v-if="$slots.header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <slot name="header" />
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-end" v-if="$slots.breadcrumb">
                                <slot name="breadcrumb" />
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="app-content">
                <div class="container-fluid">
                    <div v-if="flashSuccess" class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ flashSuccess }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    <div v-if="flashError" class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ flashError }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    <slot />
                </div>
            </div>
        </main>

        <footer class="app-footer">
            <div class="float-end d-none d-sm-inline">Laravel 12 · Vue 3 · AdminLTE 4</div>
            <strong>
                Copyright &copy; {{ new Date().getFullYear() }}
                <a href="#">Control Ganadero</a>.
            </strong>
            Todos los derechos reservados.
        </footer>
    </div>
</template>
