<script setup>
defineProps({
    userProfile: {
        type: Object,
        default: null
    },
    activeTab: {
        type: String,
        default: 'welcome'
    }
})

const emit = defineEmits(['logout', 'navigate'])
</script>

<template>
    <aside class="settings-sidebar">
        <div class="sidebar-header archivo-black">
            MOD PORTAL
        </div>

        <div v-if="userProfile" class="user-badge" style="display: flex; align-items: center; gap: 0.75rem;">
            <img :src="userProfile.pid ? `https://mii.spbr.net/${userProfile.pid}/main.png` : '/img_unknown_MiiIcon.png'"
                :alt="userProfile.sfid || 'Mii Avatar'"
                style="width: 40px; height: 40px; border-radius: 50%; background: #161b22; object-fit: contain; flex-shrink: 0;"
                @error="(e) => e.target.src = '/img_unknown_MiiIcon.png'" />

            <div style="display: flex; flex-direction: column; overflow: hidden; text-align: left;">
                <span class="user-sfid"
                    style="font-weight: 600; color: #f0f6fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                    {{ userProfile.sfid || 'No SFID Linked' }}
                </span>
            </div>
        </div>

        <nav class="sidebar-menu">
            <button type="button" class="nav-item" :class="{ 'active-nav': activeTab === 'welcome' }"
                @click="emit('navigate', '/')">
                <span>Welcome</span>
            </button>
            <button type="button" class="nav-item" :class="{ 'active-nav': activeTab === 'search' }"
                @click="emit('navigate', '/search')">
                <span>Search Users</span>
            </button>

            <button type="button" class="nav-item"
                :class="{ 'active-nav': activeTab === 'audit' || activeTab === 'audit/log' }"
                @click="emit('navigate', '/audit/log')">
                <span>Audit Logs</span>
            </button>

            <button type="button" class="nav-item logout-btn" @click="emit('logout')">
                <span>Sign Out</span>
            </button>
        </nav>
    </aside>
</template>