import { Icon, Input, InputGroup, Kbd, Menu, Separator, Stack, Text } from '@chakra-ui/react';
import { createRootRouteWithContext, Outlet, Link } from '@tanstack/react-router';
import React from 'react';
import { Avatar } from '../components/ui/avatar';
import { Button } from '../components/ui/button';
import { ColorModeButton } from '../components/ui/color-mode';
import { Tooltip } from '../components/ui/tooltip';
import { useAuth } from '../hooks/auth';
import { useIdentity } from '../hooks/identity';
import { appName } from '../main';

const TanStackRouterDevtools =
  process.env.NODE_ENV === 'production'
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import('@tanstack/router-devtools').then(res => ({
          default: res.TanStackRouterDevtools
          // For Embedded Mode
          // default: res.TanStackRouterDevtoolsPanel
        }))
      );

interface RouterContext {
  isAuthenticated: boolean;
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => {
    const { logout } = useAuth();
    const identity = useIdentity();

    return (
      <Stack padding={3}>
        <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
          <Stack flexDirection="row" justifyContent="center" alignItems="center" gap={10}>
            <Link to="/">
              <Stack direction="row" justifyContent="center" alignItems="center" gap={1}>
                <Icon fontSize={24} color="colorPalette.500">
                  <i className="nf nf-md-bird" />
                </Icon>
                <Text fontSize="lg" fontWeight="bold">
                  {appName}
                </Text>
              </Stack>
            </Link>
            {/* <Stack hideBelow="md"> */}
            {/*   <Link to="/about"> */}
            {/*     <Icon color="colorPalette.500" fontSize="md"> */}
            {/*       <i className="nf nf-oct-question" /> */}
            {/*     </Icon> */}
            {/*   </Link> */}
            {/* </Stack> */}

            {identity != null && (
              <>
                <Stack direction="row" alignItems="center">
                  <Link to="/editor">
                    <Text
                      color="colorPalette.400"
                      _hover={{
                        textDecoration: 'underline',
                        textDecorationColor: 'colorPalette.700'
                      }}
                    >
                      editor
                    </Text>
                  </Link>
                </Stack>
                <Stack direction="row" alignItems="center">
                  <Link to="/new/book">
                    <Text
                      color="colorPalette.400"
                      _hover={{
                        textDecoration: 'underline',
                        textDecorationColor: 'colorPalette.700'
                      }}
                    >
                      create
                    </Text>
                  </Link>
                </Stack>
              </>
            )}
          </Stack>

          <Stack flexDirection="row" alignItems="center" gap={4}>
            <InputGroup
              hideBelow="md"
              flex={1}
              alignItems="center"
              startElement={
                <Icon color="colorPalette.500">
                  <i className="nf nf-oct-search" />
                </Icon>
              }
              endElement={<Kbd>⌘K</Kbd>}
            >
              <Input height={8} placeholder="Search works..." />
            </InputGroup>

            <ColorModeButton />

            {identity != null ? (
              <Menu.Root>
                <Menu.Trigger css={{ '&:hover': { cursor: 'pointer' } }}>
                  <Avatar size="sm" />
                </Menu.Trigger>
                <Menu.Positioner mt={2}>
                  <Menu.Content backgroundColor={'bg.subtle'}>
                    <Link to={`/profile/${identity.data.user.username}`}>
                      <Menu.Item value="/">
                        <Tooltip content="My profile">
                          <Stack direction="row">
                            <Icon color="colorPalette.500" fontSize="xl">
                              <i className="nf nf-fa-user" />
                            </Icon>
                            My profile
                          </Stack>
                        </Tooltip>
                      </Menu.Item>
                    </Link>

                    <Menu.Item value="logout" onClick={async () => logout()}>
                      <Tooltip content="Log out">
                        <Stack direction="row">
                          <Icon color="colorPalette.500" fontSize="xl">
                            <i className="nf nf-fa-sign_out" />
                          </Icon>
                          Log out
                        </Stack>
                      </Tooltip>
                    </Menu.Item>
                  </Menu.Content>
                </Menu.Positioner>
              </Menu.Root>
            ) : (
              <>
                <Separator orientation="vertical" height={5} />
                <Link to="/login">
                  <Button height={8}>Sign in</Button>
                </Link>
                <Link to="/register">
                  <Button height={8}>Sign up</Button>
                </Link>
              </>
            )}
          </Stack>
        </Stack>
        <Separator style={{ padding: '4px' }} />
        <Outlet />
        <TanStackRouterDevtools />
      </Stack>
    );
  }
});