// 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 SalesSidebar from './Sales/SalesSidebar'
import ManagementSidebar from './Management/ManagementSidebar'
import DashboardNavigation from './common/DashboardNavigation'
import DashboardBreadcrumb from './common/DashboardBreadcrumb'
import DeveloperSidebar from './Developer/DeveloperSidebar'
import DashboardSidebarSplitter from './common/DashboardSidebarSplitter'
import MobileFooterNavigation from './common/MobileFooterNavigation'
import { useThemeContext } from './context/ThemeContext'
import { MessageProvider } from './context/MessageContext'
import { useDashboardObjectToolsContext } from './context/DashboardObjectToolsContext'
import { useMediaQuery } from 'react-responsive'

const { Content } = Layout

const DashboardLayout = ({ children }) => {
  const location = useLocation()
  const isMobile = useMediaQuery({ maxWidth: 768 })
  const isProduction = location.pathname.startsWith('/dashboard/production')
  const isInventory = location.pathname.startsWith('/dashboard/inventory')
  const isFinance = location.pathname.startsWith('/dashboard/finance')
  const isSales = location.pathname.startsWith('/dashboard/sales')
  const isManagement = location.pathname.startsWith('/dashboard/management')
  const isDeveloper = location.pathname.startsWith('/dashboard/developer')

  const { isDarkMode } = useThemeContext()
  const { currentObjectTools } = useDashboardObjectToolsContext()

  const sidebar = isProduction ? (
    <ProductionSidebar />
  ) : isInventory ? (
    <InventorySidebar />
  ) : isFinance ? (
    <FinanceSidebar />
  ) : isSales ? (
    <SalesSidebar />
  ) : isManagement ? (
    <ManagementSidebar />
  ) : isDeveloper ? (
    <DeveloperSidebar />
  ) : (
    <ProductionSidebar />
  )

  return (
    <MessageProvider>
      <Layout
        style={{ height: 'var(--unit-100vh)' }}
        className={`${isDarkMode ? 'dark-mode' : 'light-mode'} main-layout${isMobile ? ' is-mobile' : ''}`}
      >
        <DashboardNavigation />
        <DashboardSidebarSplitter sidebar={sidebar}>
          <Layout
            style={{ padding: '24px', height: '100%' }}
            className='main-content-layout'
          >
            <Content>
              <Flex vertical style={{ height: '100%' }} gap='20px'>
                <Flex justify='space-between' align='center'>
                  <DashboardBreadcrumb style={{ margin: '16px 0' }} />
                  {currentObjectTools}
                </Flex>
                <div style={{ flex: 1, minHeight: 0 }}>{children}</div>
              </Flex>
            </Content>
          </Layout>
        </DashboardSidebarSplitter>
        {isMobile ? <MobileFooterNavigation /> : null}
      </Layout>
    </MessageProvider>
  )
}

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

export default DashboardLayout