/***********************************************************************************************************************************************************************
* File Name: AdminAppLayout.jsx
* Type of Program: Layout Route
* Description: A Layout designated for Admin End-User. 
* Module: Admin
* Author: lash0000
* Date Created: November. 28, 2025
***********************************************************************************************************************************************************************
* Change History:
* DATE                AUTHOR            LOG NUMBER     DESCRIPTION                                                      
* Oct. 10, 2025       lash0000          001            Initial creation - STAR Phase 1 Project
***********************************************************************************************************************************************************************/
import { Outlet, useNavigate } from "react-router-dom"
import { useRef, useEffect } from "react"
import { useAuth } from "@/contexts/AuthContext"
import { AdminProvider } from "@/contexts/provider/AdminProvider"  // ← add

import { TooltipProvider } from "@/components/ui/tooltip"
import { Badge } from "@/components/ui/badge"
import { Toaster } from "sonner"
import { cn } from "@/lib/utils"

import UserMenu from "@/components/generic/UserMenu"
import NotificationBell from "@/components/generic/NotificationBell"
import { ROLE_CONFIG } from "@/data/profile.data"

const AdminLayout = () => {
    const { user, logout } = useAuth();
    const navigate = useNavigate();
    const headerRef = useRef(null)

    const role = ROLE_CONFIG[user?.acc_type] ?? { label: user?.acc_type, variant: 'outline' }

    useEffect(() => {
        if (!headerRef.current) return
        const update = () => {
            document.documentElement.style.setProperty('--navbar-h', `${headerRef.current.offsetHeight}px`)
        }
        update()
        const ro = new ResizeObserver(update)
        ro.observe(headerRef.current)
        return () => ro.disconnect()
    }, [])

    return (
        <section id="philproperties-admin" className="min-h-screen flex flex-col">
            <TooltipProvider>
                {/* AdminProvider wraps header + body so UserMenu can access ProfileProvider */}
                <AdminProvider>
                    <div ref={headerRef} className={cn('fixed top-0 z-50 w-full bg-background border-b')} >
                        <div className="w-full flex items-center justify-between xs:px-4 lg:px-5 py-3">
                            <div className="flex gap-4 items-center">
                                <div className="w-40 cursor-pointer" onClick={() => navigate("/")}>
                                    <img src="/philpro-white.png" alt="Philproperties" className="object-cover dark:hidden" />
                                    <img src="/philpro-dark.png" alt="Philproperties" className="object-cover hidden dark:block" />
                                </div>
                                <div>
                                    <svg
                                        data-testid="geist-icon"
                                        height="16"
                                        width="16"
                                        viewBox="0 0 16 16"
                                        strokeLinejoin="round"
                                        className="xs:hidden sm:block fill-slate-300"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            fillRule="evenodd"
                                            clipRule="evenodd"
                                            d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
                                        />
                                    </svg>
                                </div>
                                <div id="name" className="lg:-ml-1 font-medium text-sm flex items-center gap-2">
                                    <Badge variant={role.variant} className="xs:hidden md:block capitalize">
                                        {role.label}
                                    </Badge>
                                </div>
                            </div>
                            <div className="flex items-center gap-3">
                                <NotificationBell />
                                <UserMenu />
                            </div>
                        </div>
                    </div>

                    <div id="main-body" className="bg-slate-100 flex-1 flex flex-col" style={{ paddingTop: 'var(--navbar-h)' }}>
                        <Outlet />
                        <Toaster position="bottom-right" richColors />
                    </div>
                </AdminProvider>

                {/* Footer sits outside AdminProvider intentionally */}
                <footer className="w-full py-4 px-5 text-right text-sm text-muted-foreground">
                    © Philproperties, 2026
                </footer>
            </TooltipProvider>
        </section>
    )
}

export default AdminLayout