"use client";

import { useState } from "react";
import Link from "next/link";
import { Dialog, DialogPanel } from "@headlessui/react";
import { IconMenu2, IconX } from "@tabler/icons-react";

import { DocsNav } from "@/components/docs/docs-nav";
import { DocsSearch } from "@/components/docs/docs-search";
import { LanguageSwitcher } from "@/components/shared/language-switcher";
import { Logo } from "@/components/shared/logo";
import { ModeToggle } from "@/components/shared/mode-toggle";
import { Button } from "@/components/ui/button";
import { loginUrl } from "@/lib/env";
import type { DocsNavGroup } from "@/lib/docs/navigation";
import type { DocsSearchRecord } from "@/lib/docs/search-index";

export function DocsTopBar({
  lang,
  records,
  groups,
  labels,
}: {
  lang: string;
  records: DocsSearchRecord[];
  groups: DocsNavGroup[];
  labels: {
    home: string;
    pricing: string;
    signin: string;
    openMenu: string;
    closeMenu: string;
  };
}) {
  const [open, setOpen] = useState(false);

  return (
    <header className="border-hairline bg-background/80 sticky top-0 z-30 border-b backdrop-blur-xl">
      <div className="flex items-center gap-3 px-4 py-3 sm:gap-4 sm:px-6 lg:px-8">
        <DocsSearch
          records={records}
          lang={lang}
          className="min-w-0 flex-1 lg:max-w-md"
        />
        <div className="ml-auto flex items-center gap-3 sm:gap-5">
          <Link
            href={`/${lang}`}
            className="text-ink-2 hover:text-ink-1 hidden text-sm font-medium md:block"
          >
            {labels.home}
          </Link>
          <Link
            href={`/${lang}/pricing`}
            className="text-ink-2 hover:text-ink-1 hidden text-sm font-medium md:block"
          >
            {labels.pricing}
          </Link>
          <span className="bg-hairline hidden h-5 w-px md:block" />
          <LanguageSwitcher lang={lang} align="end" />
          <ModeToggle />
          <Button asChild size="sm" className="hidden sm:inline-flex">
            <a href={loginUrl}>{labels.signin}</a>
          </Button>
          <button
            type="button"
            onClick={() => setOpen(true)}
            aria-label={labels.openMenu}
            className="text-ink-2 -m-2.5 p-2.5 lg:hidden"
          >
            <IconMenu2 className="size-5" />
          </button>
        </div>
      </div>

      <Dialog open={open} onClose={setOpen} className="relative z-50 lg:hidden">
        <div
          className="fixed inset-0 bg-black/40 backdrop-blur-sm"
          aria-hidden="true"
        />
        <DialogPanel
          transition
          className="bg-background ring-hairline fixed inset-y-0 right-0 flex w-full flex-col overflow-y-auto p-6 transition duration-300 ease-out data-[closed]:translate-x-full sm:max-w-sm sm:ring-1"
        >
          <div className="flex items-center justify-between">
            <Logo lang={lang} />
            <button
              type="button"
              onClick={() => setOpen(false)}
              aria-label={labels.closeMenu}
              className="text-ink-2 -m-2.5 p-2.5"
            >
              <IconX className="size-5" />
            </button>
          </div>
          <DocsNav
            lang={lang}
            groups={groups}
            className="mt-8"
            onNavigate={() => setOpen(false)}
          />
        </DialogPanel>
      </Dialog>
    </header>
  );
}