<template>
    <div class="d-flex" id="wrapper">
        <!-- Sidebar -->
        <div class="bg-dark text-white p-3" id="sidebar-wrapper" style="min-width: 250px; min-height: 100vh;">
            <div class="sidebar-heading text-center py-4 fs-4 fw-bold border-bottom">Admin Panel</div>
            <div class="list-group list-group-flush my-3">
                <NuxtLink to="/admin" class="list-group-item list-group-item-action bg-transparent text-white border-0">
                    <i class="fas fa-tachometer-alt me-2"></i> Dashboard
                </NuxtLink>
                <NuxtLink to="/admin/settings"
                    class="list-group-item list-group-item-action bg-transparent text-white border-0">
                    <i class="fas fa-cogs me-2"></i> Settings
                </NuxtLink>
                <NuxtLink to="/admin/security"
                    class="list-group-item list-group-item-action bg-transparent text-white border-0">
                    <i class="fas fa-shield-alt me-2"></i> Güvenlik & Ağ
                </NuxtLink>
                <NuxtLink to="/admin/users"
                    class="list-group-item list-group-item-action bg-transparent text-white border-0">
                    <i class="fas fa-users me-2"></i> Kullanıcılar
                </NuxtLink>

                <div class="sidebar-heading text-white-50 mt-3 mb-1 small text-uppercase">Blog</div>
                <NuxtLink to="/admin/blog/categories"
                    class="list-group-item list-group-item-action bg-transparent text-white border-0">
                    <i class="fas fa-tags me-2"></i> Kategoriler
                </NuxtLink>
                <NuxtLink to="/admin/blog/tags"
                    class="list-group-item list-group-item-action bg-transparent text-white border-0">
                    <i class="fas fa-hashtag me-2"></i> Etiketler
                </NuxtLink>
                <NuxtLink to="/admin/blog/posts"
                    class="list-group-item list-group-item-action bg-transparent text-white border-0">
                    <i class="fas fa-newspaper me-2"></i> Postlar
                </NuxtLink>
                <NuxtLink to="/" class="list-group-item list-group-item-action bg-transparent text-white border-0 mt-5">
                    <i class="fas fa-home me-2"></i> Siteye Dön
                </NuxtLink>
                <button @click="handleLogout"
                    class="list-group-item list-group-item-action bg-transparent text-danger border-0">
                    <i class="fas fa-sign-out-alt me-2"></i> Çıkış
                </button>
            </div>
        </div>

        <!-- Page Content -->
        <div id="page-content-wrapper" class="w-100">
            <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom px-4">
                <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                            <span class="nav-link">Hoşgeldin, Admin</span>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="container-fluid px-4 py-4">
                <slot />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const { signOut } = useAuth();

const handleLogout = async () => {
    await signOut({ callbackUrl: '/auth/login' });
};
</script>

<style scoped>
#sidebar-wrapper {
    transition: all 0.3s;
}

.list-group-item-action:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.router-link-active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px;
}
</style>
