'use client';

import { Center, Flexbox } from '@lobehub/ui';
import { cx } from 'antd-style';
import NextLink from 'next/link';
import { type PropsWithChildren } from 'react';
import { memo, Suspense } from 'react';
import { Link, Outlet } from 'react-router-dom';

import { ProductLogo } from '@/components/Branding';
import Loading from '@/components/Loading/BrandTextLoading';
import { RouteMetaBridge } from '@/features/RouteMeta';
import { trackLoginOrSignupClicked } from '@/features/User/UserLoginOrSignup/trackLoginOrSignupClicked';
import { useIsDark } from '@/hooks/useIsDark';
import { useUserStore } from '@/store/user';
import { authSelectors } from '@/store/user/slices/auth/selectors';

import SharePortal from '../features/Portal';
import HeaderMenu from './HeaderMenu';
import { styles } from './style';
import Title from './Title';

const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
  const isDarkMode = useIsDark();
  const isLogin = useUserStore(authSelectors.isLogin);

  return (
    <Flexbox className={styles.outerContainer} height={'100%'} padding={8} width={'100%'}>
      <RouteMetaBridge />
      <Flexbox
        className={cx(isDarkMode ? styles.innerContainerDark : styles.innerContainerLight)}
        height={'100%'}
        width={'100%'}
      >
        <Flexbox
          horizontal
          align={'center'}
          gap={8}
          justify={'space-between'}
          padding={8}
          width={'100%'}
        >
          <Flexbox horizontal align="center" flex={1} gap={12}>
            {isLogin ? (
              <Link style={{ color: 'inherit' }} to="/">
                <ProductLogo size={32} />
              </Link>
            ) : (
              <NextLink
                href="/signin"
                style={{ color: 'inherit' }}
                onClick={(event) => {
                  event.preventDefault();
                  void trackLoginOrSignupClicked({ spm: 'share.logo_to_signin.click' }).finally(
                    () => {
                      window.location.href = '/signin';
                    },
                  );
                }}
              >
                <ProductLogo size={32} />
              </NextLink>
            )}
          </Flexbox>
          <Center horizontal flex={2} gap={12}>
            <Suspense>
              <Title />
            </Suspense>
          </Center>
          <Flexbox horizontal align="center" flex={1} gap={12} justify={'flex-end'}>
            <HeaderMenu />
          </Flexbox>
        </Flexbox>
        <Flexbox horizontal className={styles.content} style={{ overflow: 'hidden' }}>
          <Flexbox flex={1} style={{ overflow: 'hidden' }}>
            <Suspense fallback={<Loading debugId="share layout" />}>
              {children ?? <Outlet />}
            </Suspense>
          </Flexbox>
          <SharePortal />
        </Flexbox>
      </Flexbox>
    </Flexbox>
  );
});

export default ShareTopicLayout;
