import { Outlet, Link, useHref, useNavigate, NavLink } from 'react-router-dom'
import { useEffect, useState } from 'react'
import {
  Popover, Layout, Menu, ConfigProvider, theme, Dropdown, message, FloatButton, Space, Row, Col, Badge, App as AntApp,
  Button, Form, Input,
  Alert
} from 'antd'
import { DownOutlined } from '@ant-design/icons'
import 'antd/dist/reset.css'
import AppLogo from '@/assets/highlights_travel_600_550.png'
import { isEmpty } from '@/utils/commons'
import { useTranslation } from 'react-i18next'
import zhLocale from 'antd/locale/zh_CN'
import enLocale from 'antd/locale/en_US'
import 'dayjs/locale/zh-cn'
import ErrorBoundary from '@/components/ErrorBoundary'
import { BUILD_VERSION, GIT_HEAD, PERM_PRODUCTS_INFO_PUT } from '@/config'
import useNoticeStore from '@/stores/Notice'
import useAuthStore from '@/stores/Auth'
import { useThemeContext } from '@/stores/ThemeContext'
import { usingStorage } from '@/hooks/usingStorage'
import { useDefaultLgc } from '@/i18n/LanguageSwitcher'
import { appendRequestParams } from '@/utils/request'
import LogUploader from '@/components/LogUploader'

import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_REVIEW_ALL, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT,PERM_TRAIN_TICKET,
  PERM_RESERVATION_ALL, PERM_FEEDBACK_ALL, PERM_INVOICE_ALL, PERM_REPORT_ALL
 } from '@/config'
import ReloadUpdate from './ReloadUpdate'

const { Header, Content, Footer } = Layout

function App() {

  const { t, i18n } = useTranslation()

  const { colorPrimary } = useThemeContext()

  const [isPermitted, currentUser] = useAuthStore(
    (state) => [state.isPermitted, state.currentUser])

  const { loginToken } = usingStorage()

  const noticeUnRead = useNoticeStore((state) => state.noticeUnRead)
	const href = useHref()
  const navigate = useNavigate()

  const needToLogin = href !== '/login' && isEmpty(loginToken)

	useEffect(() => {
    if (needToLogin) {
      navigate('/login')
    }
	}, [href])

	const splitPath = href.split('/')
	let defaultPath = 'notice'

	if (splitPath.length > 1) {
		defaultPath = splitPath[1]
	}

  const { language } = useDefaultLgc()
  const [antdLng, setAntdLng] = useState(enLocale)
  useEffect(() => {
    setAntdLng(i18n.language === 'en' ? enLocale : zhLocale)
    appendRequestParams('lgc', language)
  }, [i18n.language])

  // 地接和客服权限不同，产品管理页面也不同
  const isProductPermitted = isPermitted(PERM_PRODUCTS_MANAGEMENT) || isPermitted(PERM_PRODUCTS_INFO_PUT)
  const productLink = isPermitted(PERM_PRODUCTS_MANAGEMENT) ? '/products' : '/products/pick-year'

	return (
		<ConfigProvider locale={antdLng}
			theme={{
				token: {
					colorPrimary: colorPrimary,
				},
				algorithm: theme.defaultAlgorithm,
			}}>
			<AntApp>
      <FloatButton.Group
        shape='square'
        style={{
          insetInlineEnd: 94,
        }}
      >
        <LogUploader />
        <FloatButton.BackTop />
      </FloatButton.Group>
      <ErrorBoundary>
				<Layout className='min-h-screen h-dvh'>
					<Header className='sticky top-0 z-10 w-full'>
						<Row gutter={{ md: 24 }} justify='end' align='middle'>
							<Col span={15}>
								<NavLink to='/'>
                <img src={AppLogo} className='float-left h-12 my-2 mr-6 ml-0' alt='App logo' />
								</NavLink>
								<Menu
									theme='dark'
									mode='horizontal'
									selectedKeys={[defaultPath]}
									items={[
                    isPermitted(PERM_RESERVATION_ALL) ? { key: 'reservation', label: <Link to='/reservation/newest'>{t('menu.Reservation')}</Link> } : null,
										isPermitted(PERM_INVOICE_ALL) ? { key: 'invoice', label: <Link to='/invoice'>{t('menu.Invoice')}</Link> } : null,
										isPermitted(PERM_FEEDBACK_ALL) ? { key: 'feedback', label: <Link to='/feedback'>{t('menu.Feedback')}</Link> } : null,
										isPermitted(PERM_REPORT_ALL) ? { key: 'report', label: <Link to='/report'>{t('menu.Report')}</Link> } : null,
										isPermitted(PERM_REVIEW_ALL) ? { key: 'external-reviews', label: <Link to='/external-reviews'>{t('menu.external-reviews')}</Link> } : null,
										isPermitted(PERM_AIR_TICKET) ? { key: 'airticket', label: <Link to='/airticket'>{t('menu.Airticket')}</Link> } : null,
										isPermitted(PERM_TRAIN_TICKET) ? { key: 'trainticket', label: <Link to='/trainticket'>{t('menu.Trainticket')}</Link> } : null,
										isProductPermitted ? { key: 'products', label: <Link to={productLink}>{t('menu.Products')}</Link> } : null,
										{
											key: 'notice',
											label: (
												<Link to='/notice'>
													{t('menu.Notice')}
													{noticeUnRead ? <Badge dot /> : ''}
												</Link>
											),
										},
									]}
								/>
							</Col>
							<Col span={7}>
								<h3 className='text-white mb-0 line-clamp-1 text-end'>
									{currentUser?.travelAgencyName}
								</h3>
							</Col>
							<Col span={2}>
								<Dropdown
									menu={{
										items: [...[
                      { label: <Link to='/account/change-password'>{t('ChangePassword')}</Link>, key: '0' },
                      { label: <Link to='/account/profile'>{t('Profile')}</Link>, key: '1' },
                      isPermitted(PERM_ACCOUNT_MANAGEMENT) ? { label: <Link to='/account/management'>{t('account:accountList')}</Link>, key: '3' } : null,
                      isPermitted(PERM_ROLE_NEW) ? { label: <Link to='/account/role-list'>{t('account:roleList')}</Link>, key: '4' } : null,
                      { type: 'divider' },
                      { label: <Link to='/logout'>{t('Logout')}</Link>, key: '99' },
                    ]
                    ],
									}}
                  trigger={['click']}
                  >
									<a onClick={e => e.preventDefault()}>
										<Space>
											<div className='line-clamp-1'>{currentUser?.realname}</div>
											<DownOutlined />
										</Space>
									</a>
								</Dropdown>
							</Col>
						</Row>
					</Header>
					<Content className='p-6 m-0 min-h-72 bg-white overflow-auto'>
            {needToLogin ? <>login...</> : <Outlet />}
					</Content>
          <Footer>China Highlights International Travel Service Co., LTD, Version: {BUILD_VERSION}({GIT_HEAD})
            <ReloadUpdate />
          </Footer>
				</Layout>
        </ErrorBoundary>
			</AntApp>
		</ConfigProvider>
	)
}

export default App
