<script setup>
import { ref } from 'vue'

defineProps({
    title: { type: String, default: 'Nexus' },
})

const sidebarOpen = ref(false)
const currentPath = typeof window !== 'undefined' ? window.location.pathname : '/'

const mainNav = [
    { label: 'Startseite', icon: 'house', href: '/' },
    { label: 'Finanzen', icon: 'money-bill-wave', href: '/finanzen' },
    { label: 'Dokumente', icon: 'folder', href: '/dokumente' },
    { label: 'Verwaltung', icon: 'gear', href: '/verwaltung' },
    { label: 'Kommunikation', icon: 'envelope', href: '/kommunikation' },
    { label: 'Externe Anwendungen', icon: 'arrow-up-right-from-square', href: '/extern' },
]

const secondaryNav = [
    { label: 'Favoriten', icon: 'star', href: '/favoriten' },
    { label: 'Hilfe & Support', icon: 'circle-question', href: '/hilfe' },
    { label: 'Einstellungen', icon: 'sliders', href: '/einstellungen' },
]

function isActive(href) {
    if (href === '/') return currentPath === '/'
    return currentPath.startsWith(href)
}
</script>

<template>
    <div class="app-layout">
        <div class="sidebar-overlay" :class="{ active: sidebarOpen }" @click="sidebarOpen = false"></div>

        <aside class="sidebar" :class="{ open: sidebarOpen }">
            <!-- BdP NEXUS Logo -->
            <div class="logo">
                <!-- BdP Badge: gelber Ring · blauer Kreis · weiße Lilie -->
                <svg viewBox="0 0 100 100" width="42" height="42" class="logo-badge">
                    <circle cx="50" cy="50" r="49" fill="#f5c400"/>
                    <circle cx="50" cy="50" r="38" fill="#1a4799"/>
                    <!-- Lilie: Mittelblatt -->
                    <path d="M50,44 C47,36 44,24 47,16 C48.5,12 51.5,12 53,16 C56,24 53,36 50,44Z" fill="white"/>
                    <!-- Lilie: linkes Blatt -->
                    <path d="M49,44 C45,41 38,37 30,32 C25,28 25,22 29,20 C33,18 38,23 43,32 C46,37 48,41 49,44Z" fill="white"/>
                    <!-- Lilie: rechtes Blatt -->
                    <path d="M51,44 C55,41 62,37 70,32 C75,28 75,22 71,20 C67,18 62,23 57,32 C54,37 52,41 51,44Z" fill="white"/>
                    <!-- Lilie: Ring -->
                    <ellipse cx="50" cy="47" rx="8.5" ry="3.5" fill="white"/>
                    <!-- Lilie: Stiel -->
                    <rect x="48" y="50" width="4" height="13" rx="1.5" fill="white"/>
                    <!-- Lilie: Querbalken -->
                    <rect x="41" y="62" width="18" height="4" rx="2" fill="white"/>
                </svg>
                <div class="logo-text-group">
                    <span class="logo-title">NEXUS</span>
                    <span class="logo-sub">BdP Landesverband</span>
                </div>
            </div>

            <nav class="nav">
                <ul class="nav-list">
                    <li v-for="item in mainNav" :key="item.href">
                        <a :href="item.href" class="nav-item" :class="{ active: isActive(item.href) }"
                           @click="sidebarOpen = false">
                            <span class="nav-icon"><font-awesome-icon :icon="item.icon" /></span>
                            <span class="nav-label">{{ item.label }}</span>
                        </a>
                    </li>
                </ul>

                <div class="nav-divider"></div>

                <ul class="nav-list">
                    <li v-for="item in secondaryNav" :key="item.href">
                        <a :href="item.href" class="nav-item" :class="{ active: isActive(item.href) }"
                           @click="sidebarOpen = false">
                            <span class="nav-icon"><font-awesome-icon :icon="item.icon" /></span>
                            <span class="nav-label">{{ item.label }}</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <div class="sidebar-footer">
                <a href="/logout" class="logout-btn">
                    <font-awesome-icon icon="arrow-right-from-bracket" />
                    <span>Abmelden</span>
                </a>
            </div>
        </aside>

        <div class="main">
            <header class="header">
                <button class="hamburger-btn" @click="sidebarOpen = !sidebarOpen" aria-label="Menü öffnen">
                    <span></span><span></span><span></span>
                </button>
                <div class="header-search">
                    <span class="search-icon"><font-awesome-icon icon="magnifying-glass" /></span>
                    <input type="text" placeholder="Suche nach Funktionen, Dokumenten..." class="search-input" />
                </div>
                <div class="header-right">
                    <button class="icon-btn" aria-label="Benachrichtigungen">
                        <font-awesome-icon icon="bell" />
                    </button>
                    <div class="user-avatar">
                        <font-awesome-icon icon="user" />
                    </div>
                </div>
            </header>

            <main class="content">
                <slot />
            </main>
        </div>
    </div>
</template>

<style scoped>
*, *::before, *::after { box-sizing: border-box; }

.app-layout {
    display: flex;
    height: 100vh;
    background: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0,0,0,0.06);
    z-index: 100;
    transition: transform 0.3s ease;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.logo-badge { flex-shrink: 0; }

.logo-text-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.logo-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1d4899;
    letter-spacing: 0.04em;
    line-height: 1;
}

.logo-sub {
    font-size: 0.62rem;
    color: #9ca3af;
    letter-spacing: 0.02em;
    line-height: 1;
}

.nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 0;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0 10px;
}

.nav-list li { margin-bottom: 1px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    border-radius: 8px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.nav-item:hover { background: #f3f4f6; color: #111827; }
.nav-item.active { background: #1d4899; color: #fff; }

.nav-icon { width: 17px; text-align: center; flex-shrink: 0; font-size: 0.88rem; }

.nav-divider { height: 1px; background: #f0f0f0; margin: 10px 10px; }

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    transition: color 0.15s;
}

.logout-btn:hover { color: #ef4444; }

/* ── Main ── */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Header ── */
.header {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 64px;
    padding: 0 24px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    flex-shrink: 0;
    z-index: 50;
}

.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 6px;
}

.hamburger-btn span { display: block; width: 20px; height: 2px; background: #374151; border-radius: 2px; }
.hamburger-btn:hover { background: #f3f4f6; }

.header-search {
    flex: 1;
    position: relative;
    max-width: 480px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.85rem;
}

.search-input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    background: #f9fafb;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.search-input:focus { border-color: #1d4899; background: #fff; }
.search-input::placeholder { color: #9ca3af; }

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.icon-btn:hover { background: #e5e7eb; color: #374151; }

.user-avatar {
    width: 36px;
    height: 36px;
    background: #1d4899;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ── Content ── */
.content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 28px;
    background: #f5f6fa;
}

/* ── Mobile overlay ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
}

@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }
    .hamburger-btn { display: flex; }
    .content { padding: 20px 16px; }
}

@media (max-width: 639px) {
    .header { padding: 0 12px; gap: 10px; }
    .header-search { max-width: none; }
    .content { padding: 16px 12px; }
}
</style>
