// 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 WindowAppMenu from './WindowAppMenu'
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 { authenticated } = useContext(AuthContext)
  const { toggleNotificationCenter, unreadCount } =
    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, setSidebarViewMenu, isFullScreen } =
    useContext(ElectronContext)
  const { availableUpdate, checkForUpdates } = useAppUpdateContext()
  const mainMenuItems = useMemo(
    () => [
      {
        key: 'production',
        label: 'Production',
        className: 'electrobun-webkit-app-region-no-drag',
        icon: <ProductionIcon />
      },
      {
        key: 'inventory',
        label: 'Inventory',
        className: 'electrobun-webkit-app-region-no-drag',
        icon: <InventoryIcon />
      },
      {
        key: 'sales',
        label: 'Sales',
        className: 'electrobun-webkit-app-region-no-drag',
        icon: <SalesIcon />
      },
      {
        key: 'finance',
        label: 'Finance',
        className: 'electrobun-webkit-app-region-no-drag',
        icon: <FinanceIcon />
      },
      {
        key: 'management',
        label: 'Management',
        className: 'electrobun-webkit-app-region-no-drag',
        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 isMacOSApp = isElectron && platform == 'darwin'
  const isOtherApp = isElectron && platform != 'darwin'

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

  const showControls = !isElectron || authenticated

  const navigationContents = (
    <Flex style={{ width: '100%' }} align='center'>
      {isMacOSApp ? <DashboardWindowButtons /> : null}
      {isOtherApp ? (
        <>
          <WindowAppMenu />{' '}
          <Divider
            type='vertical'
            style={{ height: '14px', margin: '3px 3px 0 1.5px' }}
          />
        </>
      ) : null}
      {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>
      )}
      <div style={{ flexGrow: 1 }}>
        {showControls && (
          <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' }}
              />
            }
          />
        )}
        {!showControls && (
          <Text
            type='secondary'
            style={{
              fontSize: '14px',
              marginLeft: '8px',
              userSelect: 'none',
              '--webkit-user-select': 'none'
            }}
          >
            Farm Control
          </Text>
        )}
      </div>
      {isMobile && <div style={{ flexGrow: 1 }} />}

      <div className='electrobun-webkit-app-region-no-drag'>
        <Flex
          gap={'small'}
          align='center'
          style={{ marginTop: '-2px', marginRight: '6px' }}
        >
          {showControls && (
            <Space style={{ paddingTop: '2px', marginRight: '8px' }}>
              <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>
          )}
          {showControls && 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}
          {showControls && isElectron && availableUpdate ? (
            <Tag
              icon={<CloudIcon />}
              style={{ cursor: 'pointer', margin: '2px 0 0 0' }}
              color='cyan'
              onClick={() => checkForUpdates()}
            >
              Update Available
            </Tag>
          ) : null}
        </Flex>
      </div>
      {isOtherApp ? <DashboardWindowButtons /> : null}
    </Flex>
  )

  return (
    <>
      {isElectron ? (
        <Flex
          className={`ant-menu-horizontal electron-navigation-wrapper ant-menu-light ${!isFullScreen ? 'electrobun-webkit-app-region-drag' : 'electrobun-webkit-app-region-no-drag'}`}
          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