// DashboardBreadcrumb.js
import React from 'react'
import { Breadcrumb, Button, Flex, Space } from 'antd'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'

const breadcrumbNameMap = {
  '/dashboard/production': 'Production',
  '/dashboard/inventory': 'Inventory',
  '/dashboard/management': 'Management',
  '/dashboard/production/overview': 'Overview',
  '/dashboard/production/printers': 'Printers',
  '/dashboard/production/printers/control': 'Control',
  '/dashboard/production/printers/info': 'Info',
  '/dashboard/production/printjobs': 'Print Jobs',
  '/dashboard/production/printjobs/info': 'Info',
  '/dashboard/production/gcodefiles': 'G Code Files',
  '/dashboard/production/gcodefiles/info': 'Info',
  '/dashboard/management/filaments': 'Filaments',
  '/dashboard/management/filaments/info': 'Info',
  '/dashboard/management/parts': 'Parts',
  '/dashboard/management/parts/info': 'Info',
  '/dashboard/management/products': 'Products',
  '/dashboard/management/products/info': 'Info',
  '/dashboard/management/vendors': 'Vendors',
  '/dashboard/management/vendors/info': 'Info',
  '/dashboard/management/materials': 'Materials',
  '/dashboard/management/materials/info': 'Info',
  '/dashboard/inventory/filamentstocks': 'Filaments',
  '/dashboard/inventory/filamentstocks/info': 'Info',
  '/dashboard/inventory/partstocks': 'Parts',
  '/dashboard/inventory/partstocks/info': 'Info'
}

const DashboardBreadcrumb = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const pathSnippets = location.pathname.split('/').filter((i) => i)

  const breadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
    if (url != '/dashboard') {
      // Check if this is a main section (Production, Inventory, or Management)
      const isMainSection =
        url === '/dashboard/production' ||
        url === '/dashboard/inventory' ||
        url === '/dashboard/management'

      return {
        title: isMainSection ? (
          <span style={{ padding: '0 12px' }}>{breadcrumbNameMap[url]}</span>
        ) : (
          <Link to={url} style={{ padding: '0 12px' }}>
            {breadcrumbNameMap[url]}
          </Link>
        ),
        key: url
      }
    } else {
      return {}
    }
  })

  return (
    <Flex align='center' gap={'large'}>
      <Flex gap={'small'}>
        <Space.Compact>
          <Button
            type='text'
            icon={<ArrowLeftOutlined style={{ fontSize: '14px' }} />}
            onClick={() => navigate(-1)}
            style={{ padding: '0 2px', height: '22px' }}
          />
          <Button
            type='text'
            icon={<ArrowRightOutlined style={{ fontSize: '14px' }} />}
            onClick={() => navigate(1)}
            style={{ padding: '0 2px', height: '22px' }}
          />
        </Space.Compact>
      </Flex>
      <Breadcrumb items={breadcrumbItems} />
    </Flex>
  )
}

export default DashboardBreadcrumb