// DashboardNavigation.js
import { useContext, useEffect, useState, useMemo } from 'react'
import {
  Menu,
  Flex,
  Tag,
  Space,
  Button,
  Tooltip,
  Badge,
  Divider,
  Typography,
  Popover
} from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import { AuthContext } from '../context/AuthContext'
import { SpotlightContext } from '../context/SpotlightContext'
import { ApiServerContext } from '../context/ApiServerContext'
import { NotificationContext } from '../context/NotificationContext'
import { useNavigate, useLocation } from 'react-router-dom'
import { Header } from 'antd/es/layout/layout'
import { useMediaQuery } from 'react-responsive'
import KeyboardShortcut from './KeyboardShortcut'
import UserProfilePopover from './UserProfilePopover'

import FarmControlLogo from '../../Logos/FarmControlLogo'
import FarmControlLogoSmall from '../../Logos/FarmControlLogoSmall'
import MenuIcon from '../../Icons/MenuIcon'
import ProductionIcon from '../../Icons/ProductionIcon'
import InventoryIcon from '../../Icons/InventoryIcon'
import FinanceIcon from '../../Icons/FinanceIcon'
import SalesIcon from '../../Icons/SalesIcon'
import PersonIcon from '../../Icons/PersonIcon'
import CloudIcon from '../../Icons/CloudIcon'
import BellIcon from '../../Icons/BellIcon'
import SearchIcon from '../../Icons/SearchIcon'
import SettingsIcon from '../../Icons/SettingsIcon'
import DeveloperIcon from '../../Icons/DeveloperIcon'
import { ElectronContext } from '../context/ElectronContext'
import DashboardWindowButtons from './DashboardWindowButtons'
import WebAppSwitcher from './WebAppSwitcher'
import {
  getSidebarDefaultPath,
  getSidebarMenuSections
} from '../../../database/Sidebars'

import { useAppUpdateContext } from '../context/AppUpdateContext'

const { Text } = Typography

const DashboardNavigation = () => {
  const { userProfile } = useContext(AuthContext)
  const { showSpotlight } = useContext(SpotlightContext)
  const { connecting, connected } = useContext(ApiServerContext)
  const { toggleNotificationCenter, unreadCount, notificationCenterVisible } =
    useContext(NotificationContext)
  const [apiServerState, setApiServerState] = useState('disconnected')
  const navigate = useNavigate()
  const location = useLocation()
  const [selectedKey, setSelectedKey] = useState('production')
  const [selectedMenuItem, setSelectedMenuItem] = useState({
    key: 'production',
    label: 'Production',
    icon: <ProductionIcon />
  })
  const isMobile = useMediaQuery({ maxWidth: 768 })
  const { platform, isElectron, isFullScreen, setSidebarViewMenu } =
    useContext(ElectronContext)
  const { availableUpdate, checkForUpdates } = useAppUpdateContext()
  const mainMenuItems = useMemo(
    () => [
      {
        key: 'production',
        label: 'Production',
        icon: <ProductionIcon />
      },
      {
        key: 'inventory',
        label: 'Inventory',
        icon: <InventoryIcon />
      },
      {
        key: 'sales',
        label: 'Sales',
        icon: <SalesIcon />
      },
      {
        key: 'finance',
        label: 'Finance',
        icon: <FinanceIcon />
      },
      {
        key: 'management',
        label: 'Management',
        icon: <SettingsIcon />
      }
    ],
    []
  )

  const [userPopoverOpen, setUserPopoverOpen] = useState(false)

  const userPopoverContent = (
    <UserProfilePopover onClose={() => setUserPopoverOpen(false)} />
  )

  useEffect(() => {
    const pathParts = location.pathname.split('/').filter(Boolean)
    if (pathParts.length > 2) {
      setSelectedMenuItem(
        mainMenuItems.filter((item) => item.key == pathParts[1])[0]
      )
      setSelectedKey(pathParts[1]) // Return the section (production/management)
    }
  }, [location.pathname, mainMenuItems])

  useEffect(() => {
    if (connecting == true) {
      setApiServerState('connecting')
    } else if (connected == true) {
      setApiServerState('connected')
    } else {
      setApiServerState('disconnected')
    }
  }, [connecting, connected])

  const handleMainMenuClick = ({ key }) => {
    navigate(getSidebarDefaultPath(key, { includeDev: import.meta.env.DEV }))
  }

  useEffect(() => {
    if (!isElectron || !setSidebarViewMenu) return
    const includeDev = import.meta.env.DEV
    const sections = getSidebarMenuSections({ includeDev })
    setSidebarViewMenu(sections)
  }, [isElectron, setSidebarViewMenu])

  const showAppLogo =
    (isElectron && platform == 'darwin' && isFullScreen == true) ||
    (isElectron && platform != 'darwin')
  const isMacOSApp = isElectron && platform == 'darwin'
  const isOtherApp = isElectron && platform != 'darwin'

  const showDesktopLogo = !isElectron && !isMobile
  const showMobileLogo = !isElectron && isMobile

  const navigationContents = (
    <Flex style={{ width: '100%' }} align='center'>
      {isMacOSApp ? <DashboardWindowButtons /> : null}
      {showAppLogo == true && (
        <FarmControlLogoSmall
          style={{
            fontSize: '46px',
            height: '16px',
            marginLeft: '15px',
            marginRight: '8px'
          }}
        />
      )}
      {showDesktopLogo == true ? (
        <FarmControlLogo
          style={{
            fontSize: '200px',
            height: '18px',
            marginRight: '15px'
          }}
        />
      ) : showMobileLogo == true ? (
        <FarmControlLogoSmall
          style={{
            fontSize: '48px',
            marginRight: isElectron ? '20px' : '25px'
          }}
        />
      ) : null}
      {isMobile && (
        <Flex
          gap={'small'}
          align='center'
          style={{
            marginLeft: '16px',
            minWidth: 0, // allow children to shrink
            maxWidth: '100%' // responsive
          }}
        >
          {selectedMenuItem.icon}
          <Text
            ellipsis
            style={{
              minWidth: 0, // CRUCIAL for flex children
              maxWidth: '100%', // Responsive
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              flex: 1 // Take available space, shrink as needed
            }}
          >
            {selectedMenuItem.label}
          </Text>
        </Flex>
      )}
      <Menu
        mode='horizontal'
        className={isElectron ? 'electron-navigation' : null}
        items={mainMenuItems}
        style={{
          flexWrap: 'wrap',
          flexGrow: isMobile ? 0 : 1,
          border: 0,
          width: isMobile ? '64px' : 'unset'
        }}
        onClick={handleMainMenuClick}
        selectedKeys={[selectedKey]}
        overflowedIndicator={
          <Button
            type='text'
            icon={<MenuIcon />}
            style={{ marginBottom: '4px' }}
          />
        }
      />
      {isMobile && <div style={{ flexGrow: 1 }} />}
      <Flex
        gap={'small'}
        align='center'
        style={{ marginTop: '-2px', marginRight: '6px' }}
      >
        <Space>
          <WebAppSwitcher />
          <KeyboardShortcut
            shortcut='alt+q'
            hint='ALT Q'
            onTrigger={() => showSpotlight()}
          >
            <Button
              icon={<SearchIcon />}
              type='text'
              style={{ marginTop: '4px' }}
              onClick={() => showSpotlight()}
            />
          </KeyboardShortcut>
          <Badge
            count={unreadCount}
            size='small'
            offset={[-5, 8]}
            style={{ padding: 0, fontWeight: 600 }}
          >
            <KeyboardShortcut
              shortcut='alt+n'
              hint='ALT N'
              onTrigger={() => toggleNotificationCenter()}
            >
              <Button
                icon={<BellIcon />}
                type='text'
                style={{ marginTop: '2px' }}
                onClick={() => toggleNotificationCenter()}
              />
            </KeyboardShortcut>
          </Badge>
        </Space>
        {import.meta.env.MODE === 'development' && (
          <Space>
            {apiServerState === 'connected' ? (
              <Tooltip title='Connected to api server' arrow={false}>
                <Tag
                  color='success'
                  style={{ marginRight: 0 }}
                  icon={<CloudIcon />}
                />
              </Tooltip>
            ) : null}
            {apiServerState === 'connecting' ? (
              <Tooltip title='Connecting to api erver...' arrow={false}>
                <Tag
                  color='warning'
                  style={{ marginRight: 0 }}
                  icon={<LoadingOutlined />}
                />
              </Tooltip>
            ) : null}
            {apiServerState === 'disconnected' ? (
              <Tooltip title='Disconnected from api server' arrow={false}>
                <Tag
                  color='error'
                  style={{ marginRight: 0 }}
                  icon={<CloudIcon />}
                />
              </Tooltip>
            ) : null}
            <Tooltip title='Developer' arrow={false}>
              <Tag
                color='yellow'
                style={{ marginRight: 0 }}
                icon={<DeveloperIcon />}
                onClick={() => {
                  navigate('/dashboard/developer/sessionstorage')
                }}
              />
            </Tooltip>
          </Space>
        )}
        {userProfile ? (
          <Space>
            <Popover
              content={userPopoverContent}
              placement='bottomRight'
              trigger='hover'
              open={userPopoverOpen}
              onOpenChange={setUserPopoverOpen}
              arrow={false}
            >
              <Tag style={{ marginRight: 0 }} icon={<PersonIcon />}>
                {!isMobile && (userProfile?.name || userProfile.username)}
              </Tag>
            </Popover>
          </Space>
        ) : null}
        {isElectron && availableUpdate ? (
          <Tag
            icon={<CloudIcon />}
            style={{ cursor: 'pointer', margin: '2px 0 0 0' }}
            color='cyan'
            onClick={() => checkForUpdates()}
          >
            Update Available
          </Tag>
        ) : null}
      </Flex>
      {isOtherApp ? <DashboardWindowButtons /> : null}
    </Flex>
  )

  return (
    <>
      {isElectron ? (
        <Flex
          className={`ant-menu-horizontal ant-menu-light${!notificationCenterVisible ? ' electron-navigation-wrapper' : ''}`}
          style={{ lineHeight: '40px', padding: '0 2px 0 2px' }}
        >
          {navigationContents}
        </Flex>
      ) : (
        <Flex vertical>
          <Header
            style={{
              width: '100vw',
              padding: 0,
              marginBottom: '0.1px',
              background: 'unset'
            }}
            theme='light'
            className='ant-menu-horizontal'
          >
            <Flex
              gap={'large'}
              align='center'
              className='ant-menu-light'
              style={{
                padding: '0 26px',
                height: '100%',
                borderBottom: '1px solid rgba(5, 5, 5, 0.00)'
              }}
            >
              {navigationContents}
            </Flex>
            <Divider style={{ margin: 0 }} />
          </Header>
        </Flex>
      )}
    </>
  )
}

export default DashboardNavigation