// DashboardBreadcrumb.js
import React from 'react'
import { Breadcrumb, Button, Flex, Space } from 'antd'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import ArrowLeftIcon from '../../Icons/ArrowLeftIcon'
import ArrowRightIcon from '../../Icons/ArrowRightIcon'

const breadcrumbNameMap = {
  production: 'Production',
  inventory: 'Inventory',
  management: 'Management',
  developer: 'Developer',
  overview: 'Overview',
  printers: 'Printers',
  hosts: 'Hosts',
  control: 'Control',
  info: 'Info',
  jobs: 'Jobs',
  subjobs: 'Sub Jobs',
  gcodefiles: 'G Code Files',
  filaments: 'Filaments',
  parts: 'Parts',
  products: 'Products',
  vendors: 'Vendors',
  materials: 'Materials',
  notetypes: 'Note Types',
  users: 'Users',
  settings: 'Settings',
  auditlogs: 'Audit Logs',
  filamentstocks: 'Filament Stocks',
  partstocks: 'Part Stocks',
  productstocks: 'Products',
  stockevents: 'Stock Events',
  stockaudits: 'Stock Audits',
  sessionstorage: 'Session Storage',
  authcontextdebug: 'Auth Context Debug',
  printservercontextdebug: 'Print Server Context Debug'
}

const mainSections = ['production', 'inventory', 'management', 'developer']

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

  const breadcrumbItems = pathSnippets.map((segment, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
    if (segment !== 'dashboard') {
      const isMainSection = mainSections.includes(segment)
      const name = breadcrumbNameMap[segment] || segment
      return {
        title: isMainSection ? (
          <span style={{ padding: '0 12px' }}>{name}</span>
        ) : (
          <Link to={url} style={{ padding: '0 12px' }}>
            {name}
          </Link>
        ),
        key: url
      }
    } else {
      return {}
    }
  })

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

export default DashboardBreadcrumb
