"use client";
import React from "react";
import { PropsBaseLayout, TContextBaseLayout } from "./interface";
import clsx from "clsx";
import Header from "./componets/Header";
import Navbar from "./componets/Navbar";
import RequireAuth from "@/components/protected/RequiredAuth";

export const ContextBaseLayout = React.createContext<TContextBaseLayout>({});

const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
  const [showFull, setShowFull] = React.useState(false);
  const [openMenuMobile, setOpenMenuMobile] = React.useState(false);
  return (
    <RequireAuth>
      <ContextBaseLayout
        value={{ showFull, setShowFull, openMenuMobile, setOpenMenuMobile }}
      >
        <div className="min-h-screen bg-[#f8f8f8]">
          {/* OVERLAY cho Mobile */}
          <div
            className={clsx(
              "fixed inset-0 bg-black/50 backdrop-blur-sm z-[20] transition-opacity duration-300 xl:hidden",
              openMenuMobile ? "opacity-100 visible" : "opacity-0 invisible",
            )}
            onClick={() => setOpenMenuMobile(false)}
          />

          {/* SIDEBAR (Dùng chung cho cả Desktop & Mobile) */}
          <nav
            className={clsx(
              "fixed top-0 left-0 h-full w-[240px] z-[21] bg-white transition-all duration-300 border-r border-[#f4f7fa]",
              // Desktop logic
              showFull ? "xl:translate-x-0" : "xl:-translate-x-full",
              // Mobile logic
              openMenuMobile ? "translate-x-0" : "-translate-x-full",
            )}
          >
            <Navbar />
          </nav>

          {/* HEADER */}
          <header
            className={clsx(
              "fixed top-0 right-0 h-[68px] z-[11] bg-white transition-all duration-300 border-b border-[#f4f7fa]",
              showFull
                ? "xl:left-[240px] xl:w-[calc(100%-240px)]"
                : "left-0 w-full",
              "left-0 w-full", // Mặc định full width trên mobile
            )}
          >
            <Header title={title} breadcrumb={breadcrumb} />
          </header>

          {/* MAIN CONTENT */}
          <main
            className={clsx(
              "pt-[92px] pb-6 px-6 transition-all duration-300",
              showFull ? "xl:pl-[264px]" : "xl:pl-6",
              "pl-6", // Mặc định padding trên mobile
            )}
          >
            {children}
          </main>
        </div>
      </ContextBaseLayout>
    </RequireAuth>
  );
};

export default BaseLayout;