<script lang="ts">
    import { page } from '$app/stores';
    import { fade } from 'svelte/transition';

    interface NavItem {
        id: 'home' | 'search' | 'add' | 'notifications' | 'messages';
        path: string;
        icon: {
            active: string;
            inactive: string;
        };
        label: string;
        badge?: number;
    }

    // Configurable props
    export let showLabels = true;
    export let animate = true;
    export let darkMode = false;

    // Icons with distinct active/inactive states
    const icons = {
    home: {
        active: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
        inactive: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
    },
    search: {
        active: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
        inactive: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
    },
    add: {
        active: 'M12 4v16m8-8H4',
        inactive: 'M12 4v16m8-8H4',
    },
    notifications: {
        active: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9',
        inactive: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9',
    },
    messages: {
        active: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-18 8h18a2 2 0 002-2V6a2 2 0 00-2-2H3a2 2 0 00-2 2v8a2 2 0 002 2z',
        inactive: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-18 8h18a2 2 0 002-2V6a2 2 0 00-2-2H3a2 2 0 00-2 2v8a2 2 0 002 2z',
    }
};

    const navItems: NavItem[] = [
        { id: 'home', path: '/home', icon: icons.home, label: 'Home' },
        { id: 'search', path: '/search', icon: icons.search, label: 'Search' },
        { id: 'add', path: '/add', icon: icons.add, label: '+' },
        { id: 'notifications', path: '/notifications', icon: icons.notifications, label: 'Notifications', badge: 3 },
        { id: 'messages', path: '/dm', icon: icons.messages, label: 'DM' }
    ];

    // Check if current route matches
    const isActive = (path: string) => {
        return $page.url.pathname === path;
    };
</script>

<nav
    class="btm-nav fixed bottom-0 z-50 w-full border-t {darkMode ? 'border-gray-700 bg-gray-900' : 'border-base-200 bg-base-100'}"
    aria-label="Main navigation"
>
    {#each navItems as tab (tab.id)}
        <a
            href={tab.path}
            class="btm-nav-btn relative flex flex-col items-center justify-center gap-1 p-2 {isActive(tab.path) ? 'active text-primary' : 'text-base-content'}"
            aria-label={tab.label}
            aria-current={isActive(tab.path) ? 'page' : undefined}
        >
            <div class="relative">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-6 w-6 transition-all duration-200 {animate && isActive(tab.path) ? 'scale-110' : 'scale-105'}"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width={isActive(tab.path) ? 2 : 1.5}
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d={isActive(tab.path) ? tab.icon.active : tab.icon.inactive}
                    />
                </svg>
                
                {#if tab.badge}
                    <span
                        class="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white"
                        transition:fade
                    >
                        {tab.badge}
                    </span>
                {/if}
            </div>

            {#if showLabels}
                <span
                    class="btm-nav-label text-xs font-medium transition-opacity {isActive(tab.path) ? 'opacity-100' : 'opacity-0'}"
                >
                    {tab.label}
                </span>
            {/if}
        </a>
    {/each}
</nav>

<style>
    .btm-nav {
        height: 64px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .btm-nav-btn {
        position: relative;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    /* .btm-nav-btn.active::after {
        content: '';
        position: absolute;
        bottom: 8px;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    } */

    /* @media (min-width: 640px) {
        .btm-nav {
            max-width: 480px;
            margin: 0 auto;
            border-radius: 16px 16px 0 0;
        }
    } */
</style>