import { Outlet, Link, useHref, useNavigate, useLocation, NavLink } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col, Badge, Typography, Modal, Input, Button, App as AntApp } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import 'antd/dist/reset.css';
import AppLogo from '@/assets/logo-gh.png';
import { isEmpty, isNotEmpty } from '@/utils/commons';
import Language from '../i18n/LanguageSwitcher';
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,  } from '@/config';
import useNoticeStore from '@/stores/Notice';
import useAuthStore from '@/stores/Auth'
import { fetchUserDetail} from '@/stores/Auth'
import { usingStorage } from '@/hooks/usingStorage'

import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA, PERM_AIR_TICKET } from '@/config'

const { Header, Content, Footer } = Layout;
const { Title } = Typography;

function App() {

  const { t, i18n } = useTranslation();

  const [password, setPassword] = useState('')
  const [userDetail, setUserDetail] = useState({})

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

  const { loginToken } = usingStorage()

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

  // 除了路由 /p...以外都需要登陆系统
  const needToLogin = href !== '/login' && isEmpty(loginToken)

	useEffect(() => {
    if (isNotEmpty(loginToken)) {
      fetchUserDetail(loginToken)
        .then(u => {
          setUserDetail({
            username: u.LoginName,
            realname: u.real_name,
            travelAgencyName: u.VName,
          })
        })
      }
  }, [loginToken])

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

  const onSubmit = () => {
    authenticate(userDetail?.username, password)
      .catch(ex => {
        console.error(ex)
        alert(t('Validation.LoginFailed'))
      })
    setPassword('')
  }

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

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

	const {
		token: { colorBgContainer },
	} = theme.useToken()

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

	return (
		<ConfigProvider locale={antdLng}
			theme={{
				token: {
					colorPrimary: '#00b96b',
          // "sizeStep": 3,
          // "sizeUnit": 3,
				},
				algorithm: theme.defaultAlgorithm,
			}}>
			<AntApp>
      <ErrorBoundary>
      <Modal
        centered
        closable={false}
        maskClosable={false}
        footer={null}
        open={tokenTimeout}
      >
        <Title level={3}>{t('LoginTimeout')}</Title>
        <div>{t('LoginTimeoutTip')}</div>
        <Space direction='horizontal'>
          <Input.Password value={password}
          onChange={(e) => setPassword(e.target.value)}
          onPressEnter={onSubmit}
          addonBefore={userDetail?.username} />
        <Button
          onClick={onSubmit}
        >{t('Submit')}</Button></Space>

      </Modal>
				<Layout
					style={{
						minHeight: '100vh',
					}}>
					<Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
						<Row gutter={{ md: 24 }} justify='end' align='middle'>
							<Col span={16}>
								<NavLink to='/'>
									<img src={AppLogo} className='logo' alt='App logo' />
								</NavLink>
								<Menu
									theme='dark'
									mode='horizontal'
									selectedKeys={[defaultPath]}
									items={[
                    isPermitted(PERM_OVERSEA) ? { key: 'reservation', label: <Link to='/reservation/newest'>{t('menu.Reservation')}</Link> } : null,
										isPermitted(PERM_OVERSEA) ? { key: 'invoice', label: <Link to='/invoice'>{t('menu.Invoice')}</Link> } : null,
										isPermitted(PERM_OVERSEA) ? { key: 'feedback', label: <Link to='/feedback'>{t('menu.Feedback')}</Link> } : null,
										isPermitted(PERM_OVERSEA) ? { key: 'report', label: <Link to='/report'>{t('menu.Report')}</Link> } : null,
										isPermitted(PERM_AIR_TICKET) ? { key: 'airticket', label: <Link to='/airticket'>{t('menu.Airticket')}</Link> } : null,
										{ key: 'products', label: <Link to='/products'>{t('menu.Products')}</Link> },
										{
											key: 'notice',
											label: (
												<Link to='/notice'>
													{t('menu.Notice')}
													{noticeUnRead ? <Badge dot /> : ''}
												</Link>
											),
										},
									]}
								/>
							</Col>
							<Col span={4}>
								<Title level={3} style={{ color: 'white', marginBottom: '0', display: 'flex', justifyContent: 'end' }}>
									{userDetail?.travelAgencyName}
								</Title>
							</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>
											{userDetail?.realname}
											<DownOutlined />
										</Space>
									</a>
								</Dropdown>
							</Col>
							<Col span={2}>
                <Language />
							</Col>
						</Row>
					</Header>
					<Content
						style={{
							padding: 24,
							margin: 0,
							minHeight: 280,
							background: colorBgContainer,
						}}>
            {needToLogin ? <>login...</> : <Outlet />}
					</Content>
          <Footer>China Highlights International Travel Service Co., LTD, Version: {BUILD_VERSION}</Footer>
				</Layout>
        </ErrorBoundary>
			</AntApp>
		</ConfigProvider>
	)
}

export default App
