import { Icon, Stack, Text } from '@chakra-ui/react';
import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
import React from 'react';
import { Button } from '../components/ui/button';
import { Tooltip } from '../components/ui/tooltip';
import { useAuth } from '../hooks/auth';
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 { isAuthenticated, logout } = useAuth();
    return (
      <Stack padding={3}>
        <Stack flexDirection="row" justifyContent="space-between" alignItems="center">
          <Stack flexDirection="row" alignItems="center" gap={4}>
            <Link to="/">
              <Text color="colorPalette.500" fontSize="xl">
                [{appName}]
              </Text>
            </Link>
            <Link to="/about">
              <Icon color="colorPalette.500" fontSize="md">
                <i className="nf nf-oct-question" />
              </Icon>
            </Link>
          </Stack>

          <Stack flexDirection="row" alignItems="center">
            {!isAuthenticated ? (
              <>
                <Link to="/login">
                  <Button>Sign in</Button>
                </Link>
                <Link to="/register">
                  <Button>Sign up</Button>
                </Link>
              </>
            ) : (
              <Tooltip content="Log out">
                <Icon color="colorPalette.500" fontSize="xl" onClick={async () => logout()}>
                  <i className="nf nf-fa-sign_out" />
                </Icon>
              </Tooltip>
            )}
          </Stack>
        </Stack>
        <hr style={{ padding: '4px' }} />
        <Outlet />
        <TanStackRouterDevtools />
      </Stack>
    );
  }
});