// DashboardLayout.js
import PropTypes from 'prop-types'
import { Layout, Flex } from 'antd'
import { useLocation } from 'react-router-dom'
import ProductionSidebar from './Production/ProductionSidebar'
import InventorySidebar from './Inventory/InventorySidebar'
import FinanceSidebar from './Finance/FinanceSidebar'
import ManagementSidebar from './Management/ManagementSidebar'
import DashboardNavigation from './common/DashboardNavigation'
import DashboardBreadcrumb from './common/DashboardBreadcrumb'
import DeveloperSidebar from './Developer/DeveloperSidebar'
import { useThemeContext } from './context/ThemeContext'
import { MessageProvider } from './context/MessageContext'

const { Content } = Layout

const DashboardLayout = ({ children }) => {
  const location = useLocation()
  const isProduction = location.pathname.startsWith('/dashboard/production')
  const isInventory = location.pathname.startsWith('/dashboard/inventory')
  const isFinance = location.pathname.startsWith('/dashboard/finance')
  const isManagement = location.pathname.startsWith('/dashboard/management')
  const isDeveloper = location.pathname.startsWith('/dashboard/developer')

  const { isDarkMode } = useThemeContext()

  return (
    <MessageProvider>
      <Layout
        style={{ height: 'var(--unit-100vh)' }}
        className={isDarkMode ? 'dark-mode' : 'light-mode'}
      >
        <DashboardNavigation />
        <Layout>
          {isProduction ? (
            <ProductionSidebar />
          ) : isInventory ? (
            <InventorySidebar />
          ) : isFinance ? (
            <FinanceSidebar />
          ) : isManagement ? (
            <ManagementSidebar />
          ) : isDeveloper ? (
            <DeveloperSidebar />
          ) : (
            <ProductionSidebar /> // Default to production sidebar
          )}
          <Layout style={{ padding: '24px' }}>
            <Content>
              <Flex vertical style={{ height: '100%' }} gap='20px'>
                <Flex justify='space-between'>
                  <DashboardBreadcrumb style={{ margin: '16px 0' }} />
                </Flex>

                {children}
              </Flex>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </MessageProvider>
  )
}

DashboardLayout.propTypes = {
  children: PropTypes.node.isRequired
}

export default DashboardLayout
