"use client";

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { LayoutWrapper } from "../features/dashboard/layout/layoutWrapper";
import { MainContent } from "../features/dashboard/layout/mainContent";
import SideBar from "../features/dashboard/sidebar/Sidebar";
import Header from "../features/dashboard/header/Header";
import { useTokenExpiration } from "../hooks/useTokenExpiration";
import TokenExpirationInfo from "../components/TokenExpirationInfo";
import { toggleSidebar } from "../redux/ui/uiSlice";
import { RootState } from "../redux/types";

const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  // Monitor token expiration and auto-logout
  useTokenExpiration();

  const dispatch = useDispatch();
  const isSidebarOpen = useSelector((state: RootState) => state.ui.sidebarOpen);

  const handleToggleSidebar = () => {
    dispatch(toggleSidebar());
  };

  return (
    <LayoutWrapper>
      <SideBar isOpen={isSidebarOpen} onClose={handleToggleSidebar} />
      <div style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
        <MainContent>
          <Header />
          <TokenExpirationInfo />
          {children}
        </MainContent>
      </div>
    </LayoutWrapper>
  );
};

export default DashboardLayout;