<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — AdminLayout.vue
//  Location: resources/js/Layouts/AdminLayout.vue
//
//  Shell for the admin panel. Simpler than AppLayout — no hub
//  switcher, no notification bell. Clean sidebar on desktop,
//  horizontal top nav on mobile.
//
//  Always uses Navy theme — admin panel is always authoritative.
// ══════════════════════════════════════════════════════════════════

// 1. Imports
import { onMounted, computed, ref, watch } from 'vue';
import { usePage, Link, router }           from '@inertiajs/vue3';
import { useAuthStore }                    from '@/Stores/useAuthStore';

// 2. Props
defineProps({
    title: {
        type: String,
        default: 'Admin',
    },
});

// 3. Stores
const authStore = useAuthStore();
const page      = usePage();

// 4. Reactive state
const showFlash    = ref(false);
const flashMessage = ref('');
const flashType    = ref('success');
const sidebarOpen  = ref(false);

// 5. Computed
const auth = computed(() => page.props.auth);

const navItems = [
    { label: 'Dashboard',  route: 'admin.dashboard',   icon: 'grid' },
    { label: 'Cases',      route: 'admin.cases.index',  icon: 'book-open' },
    { label: 'Users',      route: 'admin.users.index',  icon: 'users' },
    { label: 'Forum',      route: 'admin.forum.index',  icon: 'message-circle' },
    { label: 'Documents',  route: 'admin.documents.index', icon: 'file' },
];

// 6. Methods
function showFlashToast(message, type = 'success') {
    flashMessage.value = message;
    flashType.value    = type;
    showFlash.value    = true;
    setTimeout(() => { showFlash.value = false; }, 3500);
}

function logout() {
    router.post(route('logout'));
}

// 7. Lifecycle
onMounted(() => {
    // Admin panel always forces navy theme
    document.documentElement.setAttribute('data-theme', 'navy');
    document.documentElement.setAttribute('lang', 'en');
    document.documentElement.setAttribute('dir', 'ltr');

    const flash = page.props.flash ?? {};
    if (flash.success) showFlashToast(flash.success, 'success');
    if (flash.error)   showFlashToast(flash.error,   'error');
});

watch(
    () => page.props.flash,
    (flash) => {
        if (!flash) return;
        if (flash.success) showFlashToast(flash.success, 'success');
        if (flash.error)   showFlashToast(flash.error,   'error');
    }
);
</script>

<template>
    <div class="ip-admin-shell" data-theme="navy">

        <!-- ═══════════════════════════════════════════════════════
             ADMIN HEADER
        ════════════════════════════════════════════════════════════ -->
        <header class="ip-admin-header">
            <div class="ip-admin-header__left">
                <!-- Mobile sidebar toggle -->
                <button
                    class="ip-admin-menu-btn"
                    @click="sidebarOpen = !sidebarOpen"
                    aria-label="Toggle sidebar"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
                    </svg>
                </button>

                <span class="ip-admin-header__brand">
                    In<span>Practice</span>
                    <span class="ip-admin-badge">Admin</span>
                </span>
            </div>

            <div class="ip-admin-header__right">
                <!-- View as member -->
                <Link :href="route('member.dashboard')" class="ip-admin-header__link">
                    View Platform
                </Link>

                <!-- Logout -->
                <button class="ip-admin-header__link ip-admin-header__link--danger" @click="logout">
                    Logout
                </button>
            </div>
        </header>

        <div class="ip-admin-body">

            <!-- ═══════════════════════════════════════════════
                 SIDEBAR
            ════════════════════════════════════════════════════ -->
            <aside
                class="ip-admin-sidebar"
                :class="{ 'ip-admin-sidebar--open': sidebarOpen }"
            >
                <nav class="ip-admin-nav">
                    <Link
                        v-for="item in navItems"
                        :key="item.route"
                        :href="route(item.route)"
                        class="ip-admin-nav__item"
                        :class="{ 'ip-admin-nav__item--active': route().current(item.route) }"
                        @click="sidebarOpen = false"
                    >
                        <!-- Grid icon -->
                        <svg v-if="item.icon === 'grid'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                        </svg>
                        <!-- Book icon -->
                        <svg v-if="item.icon === 'book-open'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
                        </svg>
                        <!-- Users icon -->
                        <svg v-if="item.icon === 'users'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                        <!-- Message icon -->
                        <svg v-if="item.icon === 'message-circle'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        </svg>
                        <!-- File icon -->
                        <svg v-if="item.icon === 'file'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
                        </svg>

                        <span>{{ item.label }}</span>
                    </Link>
                </nav>
            </aside>

            <!-- Sidebar overlay (mobile) -->
            <div
                v-if="sidebarOpen"
                class="ip-admin-overlay"
                @click="sidebarOpen = false"
            />

            <!-- ═══════════════════════════════════════════════
                 MAIN CONTENT
            ════════════════════════════════════════════════════ -->
            <main class="ip-admin-main">
                <slot />
            </main>

        </div>

        <!-- ═══════════════════════════════════════════════════════
             FLASH TOAST
        ════════════════════════════════════════════════════════════ -->
        <Transition name="ip-toast">
            <div
                v-if="showFlash"
                class="ip-toast"
                :class="flashType === 'error' ? 'ip-toast--error' : 'ip-toast--success'"
                role="alert"
            >
                <svg v-if="flashType === 'success'" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
                <span>{{ flashMessage }}</span>
            </div>
        </Transition>

    </div>
</template>

<style scoped>
/* ── Admin shell ─────────────────────────────────────────────── */
.ip-admin-shell {
    min-height: 100vh;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
}

/* ── Admin header ────────────────────────────────────────────── */
.ip-admin-header {
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-header-border);
    box-shadow: var(--shadow-header);
    padding: 0 var(--space-5);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    flex-shrink: 0;
}

.ip-admin-header__left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ip-admin-header__brand {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--color-header-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ip-admin-header__brand span:first-child {
    color: var(--color-primary);
}

.ip-admin-badge {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    background: rgba(29, 158, 117, 0.20);
    color: var(--color-primary);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ip-admin-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ip-admin-header__link {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: rgba(255,255,255,0.65);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.ip-admin-header__link:hover {
    color: #FFFFFF;
}

.ip-admin-header__link--danger:hover {
    color: var(--color-danger);
}

.ip-admin-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-header-text);
    opacity: 0.70;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.ip-admin-menu-btn:hover { opacity: 1; }

/* ── Body layout ─────────────────────────────────────────────── */
.ip-admin-body {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.ip-admin-sidebar {
    width: 220px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    flex-shrink: 0;

    /* Mobile: hidden off-screen */
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
}

.ip-admin-sidebar--open {
    transform: translateX(0);
}

/* Desktop: always visible */
@media (min-width: 768px) {
    .ip-admin-sidebar {
        position: static;
        transform: none;
        top: auto;
        z-index: auto;
    }
}

.ip-admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.40);
    z-index: calc(var(--z-modal) - 1);
}

@media (min-width: 768px) {
    .ip-admin-overlay { display: none; }
}

/* ── Sidebar nav ─────────────────────────────────────────────── */
.ip-admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-3);
}

.ip-admin-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ip-admin-nav__item:hover {
    background: var(--color-surface-alt);
    color: var(--color-text-primary);
}

.ip-admin-nav__item--active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* ── Main content ────────────────────────────────────────────── */
.ip-admin-main {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
    max-width: 100%;
}

/* ── Toast transition ────────────────────────────────────────── */
.ip-toast-enter-active,
.ip-toast-leave-active {
    transition: all 0.3s ease;
}
.ip-toast-enter-from,
.ip-toast-leave-to {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
}
</style>
