"use client";

import {
  useActiveLabInstance,
  useCurrentLabRemainingSeconds,
} from "@/components/labs/hook";
import SiteHeaderLab, {
  SiteHeaderLabMobile,
} from "@/components/site-header-lab";
import SiteHeaderLanguage from "@/components/site-header-language";
import SiteHeaderUser, {
  SiteHeaderUserMobile,
} from "@/components/site-header-user";
import SiteLogo from "@/components/site-logo";
import { SiteMaintenanceAlert } from "@/components/site-maintenance";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useLocaleFunction } from "@/hooks/use-localed";
import { type Locale, transformPathLocale } from "@/lib/locale";
import { cn, isExamContentPage } from "@/lib/utils";
import {
  MenuIcon,
  SquareArrowOutUpRightIcon,
  TriangleAlertIcon,
} from "lucide-react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
import { DropdownMenu as DropdownMenuPrimitives } from "radix-ui";

export function SiteHeader({ basePath }: { basePath: string }) {
  const pathname = usePathname();
  const { lang } = useParams<{ lang?: Locale }>();
  const t = useLocaleFunction();

  const homeUrl = transformPathLocale("/", lang);
  const liveDemosUrl = transformPathLocale("/live-demos", lang);
  const labsUrl = transformPathLocale("/labs", lang);
  const examsUrl = transformPathLocale("/exams", lang);
  const faqUrl = transformPathLocale("/faq", lang);

  const { data: activeLabInstance, isLoading, error } = useActiveLabInstance();
  const restSeconds = useCurrentLabRemainingSeconds(activeLabInstance);

  // Check if we're on an exam page but not the overview page
  const isExamPage = isExamContentPage(pathname);

  return (
    <header
      className={cn(
        "fixed top-0 left-0 w-full bg-card flex items-center h-header z-50",
        "gap-2 px-4 text-sm",
        "md:gap-5 md:px-8 md:text-base",
        "border-b shadow-sm"
      )}
    >
      <Link href={homeUrl} prefetch={false}>
        <SiteLogo className="h-7 md:h-8" />
      </Link>
      
      {/* Only show navigation if not on exam page */}
      {!isExamPage && (
        <>
          <nav className="hidden lg:block mr-auto">
            <ul className="flex items-center gap-4">
              <li>
                <Link
                  className={cn(
                    pathname.startsWith(liveDemosUrl) && "font-black",
                    "hover:opacity-80"
                  )}
                  href={liveDemosUrl}
                  prefetch={false}
                >
                  {t("live-demos.seo.title")}
                </Link>
              </li>
              <li>
                <Link
                  className={cn(
                    pathname.startsWith(labsUrl) && "font-black",
                    "hover:opacity-80"
                  )}
                  href={labsUrl}
                  prefetch={false}
                >
                  {t("header.nav.labs")}
                </Link>
              </li>
              <li>
                <Link
                  className={cn(
                    pathname.startsWith(examsUrl) && "font-black",
                    "hover:opacity-80"
                  )}
                  href={examsUrl}
                  prefetch={false}
                >
                  {t("header.nav.exams")}
                </Link>
              </li>
              {/* <li>
                <Link
                  href="https://play.tidbcloud.com/"
                  target="_blank"
                  className="hover:opacity-80"
                >
                  {t("header.nav.playground")}
                </Link>
              </li> */}
              <li>
                <Link
                  href={t("header.nav.tidb-docs.url")}
                  className="hover:opacity-80"
                >
                  {t("header.nav.tidb-docs")}
                </Link>
              </li>
              <li>
                <Link
                  className={cn(
                    pathname.startsWith(faqUrl) && "font-black",
                    "hover:opacity-80"
                  )}
                  href={faqUrl}
                  prefetch={false}
                >
                  {t("header.nav.faq")}
                </Link>
              </li>
            </ul>
          </nav>

          <div className="flex items-center gap-2 ml-auto">
            <SiteHeaderLab
              className="hidden lg:flex mr-1"
              activeLabInstance={activeLabInstance}
              isLoading={isLoading}
              restSeconds={restSeconds}
              error={error}
            />
            <TooltipProvider>
              <Tooltip>
                <SiteMaintenanceAlert>
                  <TooltipTrigger asChild>
                    <button className="text-amber-500 p-2 hover:bg-accent">
                      <TriangleAlertIcon className="size-4" />
                    </button>
                  </TooltipTrigger>
                </SiteMaintenanceAlert>
                <TooltipContent side="bottom" sideOffset={8}>
                  {t("alerts.maintenance.title")}
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
            <SiteHeaderLanguage
              className="ml-auto lg:ml-0 px-2"
              basePath={basePath}
            />
            <SiteHeaderUser className="hidden lg:flex text-sm px-2" />
          </div>

          <DropdownMenu>
            <DropdownMenuTrigger className="lg:hidden" aria-hidden>
              <MenuIcon className="size-5" />
            </DropdownMenuTrigger>
            <DropdownMenuContent
              className="w-[calc(100vw-32px)] md:w-[calc(100vw-64px)]"
              align="end"
              side="bottom"
              sideOffset={8}
            >
              <DropdownMenuPrimitives.Arrow className="fill-border"></DropdownMenuPrimitives.Arrow>
              <DropdownMenuItem>
                <Link
                  className={cn(
                    "w-full",
                    pathname.startsWith(liveDemosUrl) && "font-black"
                  )}
                  href={liveDemosUrl}
                  prefetch={false}
                >
                  {t("live-demos.seo.title")}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link
                  className={cn(
                    "w-full",
                    pathname.startsWith(labsUrl) && "font-black"
                  )}
                  href={labsUrl}
                  prefetch={false}
                >
                  {t("header.nav.labs")}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link
                  className={cn(
                    "w-full",
                    pathname.startsWith(examsUrl) && "font-black"
                  )}
                  href={examsUrl}
                  prefetch={false}
                >
                  {t("header.nav.exams")}
                </Link>
              </DropdownMenuItem>
              {/* <DropdownMenuItem>
                <Link
                  href="https://play.tidbcloud.com/"
                  className="w-full flex items-center justify-between"
                  target="_blank"
                >
                  {t("header.nav.playground")}
                  <SquareArrowOutUpRightIcon className="inline-flex size-4" />
                </Link>
              </DropdownMenuItem> */}
              <DropdownMenuItem>
                <Link
                  href="https://www.pingcap.com"
                  className="w-full flex items-center justify-between"
                  target="_blank"
                >
                  {t("header.nav.tidb-home")}
                  <SquareArrowOutUpRightIcon className="inline-flex size-4" />
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Link
                  href={t("header.nav.tidb-docs.url")}
                  className="w-full flex items-center justify-between"
                  target="_blank"
                >
                  {t("header.nav.tidb-docs")}
                  <SquareArrowOutUpRightIcon className="inline-flex ml-1 size-4" />
                </Link>
              </DropdownMenuItem>
              <SiteHeaderLabMobile
                activeLabInstance={activeLabInstance}
                isLoading={isLoading}
                restSeconds={restSeconds}
                error={error}
              />
              <SiteHeaderUserMobile />
            </DropdownMenuContent>
          </DropdownMenu>
        </>
      )}
    </header>
  );
}