"use client";

import { useState } from "react";
import Menu from "@/components/Menu";
import Navbar from "@/components/Navbar";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function DashboardShell({
    children,
    role,
    userMetadata,
    canManageSchool,
}: {
    children: React.ReactNode;
    role: string;
    userMetadata: any;
    canManageSchool: boolean;
}) {
    const [isCollapsed, setIsCollapsed] = useState(false);

    const toggleSidebar = () => {
        setIsCollapsed((prev) => !prev);
    };

    return (
        <div className="h-screen flex overflow-hidden">
            {/* LEFT SIDEBAR */}
            <div
                className={`${isCollapsed ? "w-[80px]" : "w-[14%] md:w-[8%] lg:w-[16%] xl:w-[14%]"
                    } p-4 transition-all duration-300 ease-in-out border-r bg-white z-20 overflow-y-auto no-scrollbar`}
            >
                {/* Logo Area (Hidden when collapsed, moves to Navbar) */}
                <div
                    className={`flex items-center justify-center lg:justify-start gap-2 mb-4 transition-all duration-300 ${isCollapsed ? "opacity-0 h-0 hidden" : "opacity-100 h-8"
                        }`}
                >
                    <Link href="/" className="flex items-center gap-2">
                        <Image src="/logo.png" alt="logo" width={32} height={32} />
                        <span className="hidden lg:block font-bold">SchooLama</span>
                    </Link>
                </div>

                {/* Collapsed Logo (Shows only when collapsed) */}
                <div
                    className={`flex items-center justify-center gap-2 mb-4 transition-all duration-300 ${!isCollapsed ? "opacity-0 h-0 hidden" : "opacity-100 h-8"
                        }`}
                >
                    <Link href="/" className="flex items-center justify-center w-full">
                        <Image src="/logo.png" alt="logo" width={32} height={32} />
                    </Link>
                </div>

                <Menu
                    role={role}
                    isCollapsed={isCollapsed}
                    canManageSchool={canManageSchool}
                />
            </div>

            {/* RIGHT MAIN CONTENT */}
            <div className="flex-1 bg-[#F7F8FA] overflow-y-auto flex flex-col relative w-full">
                <Navbar
                    role={role}
                    userMetadata={userMetadata}
                    toggleSidebar={toggleSidebar}
                    isCollapsed={isCollapsed}
                />
                <main className="flex-1 relative">
                    {children}
                </main>
            </div>
        </div>
    );
}
