<script lang="ts">
    import { ShieldAlert, ArrowLeft, RefreshCw } from 'lucide-svelte';
    import { Button } from '$lib/components/ui/button';
    import * as Card from '$lib/components/ui/card';
    import { Badge } from '$lib/components/ui/badge';
    import { fade, fly } from 'svelte/transition';

    let { 
        error = '', 
        onRetry = () => {}, 
        onBack = () => history.back() 
    } = $props();

    // Extraer el código del permiso si viene en el error (ej: "Missing required permissions: cat_packages.view")
    let permissionCode = $derived.by(() => {
        const missing = error.match(/Missing required permissions?:\s*([a-z0-9_.]+)/i);
        if (missing) return missing[1];
        const legacy = error.match(/(cat_|settings_)[a-z0-9_.]+/i);
        return legacy ? legacy[0] : null;
    });

    let displayError = $derived(
        error.toLowerCase().includes('permission') || error.toLowerCase().includes('acceso denegado') || error.includes('403')
            ? 'No tienes los permisos necesarios para acceder a esta información.'
            : error || 'Ocurrió un error inesperado al cargar los datos.'
    );
</script>

<div 
    class="flex items-center justify-center p-8 min-h-[400px] w-full"
    in:fade={{ duration: 300 }}
>
    <Card.Root class="max-w-md w-full border-dashed border-2 bg-card/50 backdrop-blur-sm shadow-xl overflow-hidden">
        <div class="h-1.5 w-full bg-gradient-to-r from-primary via-destructive/50 to-primary/30 animate-gradient-x"></div>
        
        <Card.Header class="flex flex-col items-center gap-4 pt-8 text-center">
            <div class="relative">
                <div 
                    class="relative"
                    in:fly={{ y: 20, duration: 500, delay: 200 }}
                >
                    <div class="absolute -inset-4 bg-primary/10 rounded-full blur-xl animate-pulse"></div>
                    <div class="relative bg-background p-4 rounded-full border shadow-inner">
                        <ShieldAlert class="h-12 w-12 text-primary" />
                    </div>
                </div>
            </div>
            
            <div in:fade={{ delay: 400 }}>
                <div class="space-y-2">
                    <Card.Title class="text-2xl font-bold tracking-tight">Acceso Restringido</Card.Title>
                    <Card.Description class="text-sm text-muted-foreground px-4">
                        {displayError}
                    </Card.Description>
                </div>
            </div>
        </Card.Header>

        <Card.Content class="flex flex-col items-center gap-6 pb-8 pt-2">
            <div 
                class="flex flex-col items-center gap-6 w-full"
                in:fade={{ delay: 600 }}
            >
                {#if permissionCode}
                    <div class="flex flex-col items-center gap-2">
                        <span class="text-[10px] uppercase tracking-wider text-muted-foreground font-semibold">Identificador de Permiso</span>
                        <Badge variant="outline" class="font-mono text-[11px] bg-muted/50 border-primary/20 text-primary px-3 py-1">
                            {permissionCode}
                        </Badge>
                    </div>
                {/if}

                <div class="flex items-center justify-center w-full px-6 text-center">
                    <Button variant="outline" class="w-full max-w-[200px] gap-2 shadow-sm" onclick={() => onBack()}>
                        <ArrowLeft class="h-4 w-4" />
                        Regresar al Dashboard
                    </Button>
                </div>
            </div>
        </Card.Content>
        
        <Card.Footer class="bg-muted/30 border-t py-4 justify-center">
            <p class="text-[11px] text-muted-foreground text-center">
                Si consideras que esto es un error, contacta al administrador del sistema.
            </p>
        </Card.Footer>
    </Card.Root>
</div>

<style>
    @keyframes gradient-x {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    .animate-gradient-x {
        background-size: 200% 200%;
        animation: gradient-x 5s ease infinite;
    }
</style>
