<template>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="panel p-5">
                    <div class="row justify-content-center">
                        <div class="col-md-8 text-center">
                            <div class="welcome-content">
                                <div class="welcome-icon mb-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck text-primary">
                                        <rect x="1" y="3" width="15" height="13"></rect>
                                        <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
                                        <circle cx="5.5" cy="18.5" r="2.5"></circle>
                                        <circle cx="18.5" cy="18.5" r="2.5"></circle>
                                    </svg>
                                </div>
                                <h2 class="mb-3">Bienvenido al Sistema de Gestión de Lavandería</h2>
                                <p class="lead text-muted mb-4">
                                    Sistema de control interno para gestión de lavandería
                                </p>
                                
                                <div class="row mt-5">
                                    <!-- Módulo de Lavandería -->
                                    <div class="col-md-4 mb-4" v-if="can('lavanderia.recepcion') || can('dashboard.ver')">
                                        <div class="card h-100 text-center lavanderia-panel">
                                            <div class="card-body">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind text-primary mb-3">
                                                    <path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
                                                    <path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
                                                    <path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
                                                </svg>
                                                <h5 class="card-title">Recepción</h5>
                                                <p class="card-text text-muted">Registra nuevas órdenes de lavandería</p>
                                                <router-link to="/lavanderia/recepcion" class="btn btn-primary btn-sm">
                                                    Ir a Recepción
                                                </router-link>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-4" v-if="can('dashboard.ver') || can('lavanderia.dashboard')">
                                        <div class="card h-100 text-center lavanderia-panel">
                                            <div class="card-body">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity text-success mb-3">
                                                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                                                </svg>
                                                <h5 class="card-title">Dashboard Semáforo</h5>
                                                <p class="card-text text-muted">Monitoreo en tiempo real tipo semáforo</p>
                                                <router-link to="/lavanderia/dashboard" class="btn btn-success btn-sm">
                                                    Ver Dashboard
                                                </router-link>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-4" v-if="can('lavanderia.operador') || can('dashboard.ver')">
                                        <div class="card h-100 text-center lavanderia-panel">
                                            <div class="card-body">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle text-info mb-3">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <polyline points="10 8 16 12 10 16 10 8"></polyline>
                                                </svg>
                                                <h5 class="card-title">Operador</h5>
                                                <p class="card-text text-muted">Panel de operador para áreas de proceso</p>
                                                <router-link to="/lavanderia/operador/lavado" class="btn btn-info btn-sm">
                                                    Ir a Operador
                                                </router-link>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-5">
                                    <p class="text-muted">
                                        <small>Selecciona una opción del menú lateral para comenzar</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { onMounted, ref } from "vue";
    import { useMeta } from "../composables/use-meta";
    import { usePermissions } from '@/composables/use-permissions';
    
    useMeta({ title: "Bienvenido" });
    
    const { loadPermissions, hasPermission, hasAnyPermission } = usePermissions();
    const permissionsLoaded = ref(false);
    
    const can = (permission) => {
        if (!permissionsLoaded.value) return false;
        return hasPermission(permission);
    };
    
    const canAny = (permissions) => {
        if (!permissionsLoaded.value) return false;
        return hasAnyPermission(permissions);
    };
    
    onMounted(async () => {
        await loadPermissions();
        permissionsLoaded.value = true;
    });
</script>

<style scoped>
.welcome-content {
    padding: 2rem 0;
}

.welcome-icon {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #e0e0e0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
