import { Suspense } from 'react';
import Link from 'next/link';

import { auth, sessionUser } from '@/auth';
import { Button } from '@/components/ui/Button';
import { UserMenu } from '@/components/UserMenu';
import { IconPlus, IconSeparator } from '@/components/ui/Icons';
import { LoginMenu } from './LoginMenu';
import { redirect } from 'next/navigation';
import Image from 'next/image';
import LandingLogo from '@/assets/svg/LandingAI_white.svg';
import ChatSelectServer from './ChatSelectServer';
import Loading from './ui/Loading';
import { Skeleton } from './ui/Skeleton';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/Tooltip';
import { IconDiscord, IconGitHub } from '@/components/ui/Icons';

export async function Header() {
  const session = await auth();
  // const { isAdmin } = await sessionUser();

  if (process.env.NEXT_PUBLIC_IS_HUGGING_FACE) {
    return (
      <header className="sticky top-0 z-50 flex items-center justify-end w-full h-16 px-8 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
        <Button variant="link" asChild className="mr-2">
          <Link href="/">New conversation</Link>
        </Button>
      </header>
    );
  }

  return (
    <header className="sticky top-0 z-50 flex items-center justify-start w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
      <Link
        className="overflow-hidden w-[150px] h-[45px] shrink-0 grow-0 relative mr-4 cursor-pointer"
        href="/"
      >
        <Image src={LandingLogo} alt="Landing AI" fill />
      </Link>
      {session?.user && (
        <Suspense fallback={<Skeleton className="w-[240px] h-[24px]" />}>
          <ChatSelectServer />
        </Suspense>
      )}
      <div className="grow" />
      {/* <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="link" asChild className="mr-2">
            <Link href="/chat">
              <IconPlus />
            </Link>
          </Button>
        </TooltipTrigger>
        <TooltipContent>New chat</TooltipContent>
      </Tooltip> */}
      {/* {isAdmin && (
        <Button variant="link" asChild className="mr-2">
          <Link href="/all">All Chats (Internal)</Link>
        </Button>
      )}
      {isAdmin && (
        <Button variant="link" asChild className="mr-2">
          <Link href="/project">Projects (Internal)</Link>
        </Button>
      )} */}
      <Button variant="link" asChild className="mr-2">
        <Link href="/">New conversation</Link>
      </Button>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="link" size="icon" asChild className="mr-2">
            <Link
              href="https://github.com/landing-ai/vision-agent"
              target="_blank"
            >
              <IconGitHub className="size-5" />
            </Link>
          </Button>
        </TooltipTrigger>
        <TooltipContent>Github</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="link" size="icon" asChild className="mr-2">
            <Link href="https://discord.gg/gSC5p7ED" target="_blank">
              <IconDiscord className="size-5" />
            </Link>
          </Button>
        </TooltipTrigger>
        <TooltipContent>Discord</TooltipContent>
      </Tooltip>
      <IconSeparator className="size-6 text-muted-foreground/50" />
      <div className="flex items-center grow-0">
        {session?.user ? <UserMenu user={session!.user} /> : <LoginMenu />}
      </div>
    </header>
  );
}