/***********************************************************************************************************************************************************************
* 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 { useAuth } from "@/contexts/AuthContext"

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

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

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

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

    async function handleLogout() {
        // setSignOutOpen(true);
        // setSignOutLoading(true);

        // try {
        //     await logout();
        //     navigate("/", { replace: true });
        // } finally {
        //     setSignOutLoading(false);
        //     setSignOutOpen(false);
        // }
    }

    return (
        <section id="philproperties-admin">
            <TooltipProvider>
                <div className={cn('')} >
                    <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="xs:hidden sm:block w-40 cursor-pointer" onClick={() => navigate(`/admin/${id}`)}>
                                <img src="/philpro-white.png" alt="" className="object-cover" />
                            </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-2">
                            <UserMenu />
                        </div>
                    </div>
                    <div id="side-tabs">
                        <AdminSideTabs />
                    </div>
                </div>
                <div id="main-body">
                    <Outlet />
                    <Toaster position="bottom-right" richColors />
                </div>
            </TooltipProvider>
        </section>
    )
}

export default AdminLayout