"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";

import { AdminLanguageSwitcher } from "@/components/admin/admin-language-switcher";
import { DocsAdminConsoleLink } from "@/components/docs/docs-admin-console-link";
import { DocsTopNav } from "@/components/docs/docs-top-nav";
import { cn } from "@/lib/utils";

type DocsShellProps = {
  children: React.ReactNode;
  className?: string;
};

export function DocsShell({ children, className }: DocsShellProps): React.ReactElement {
  const pathname = usePathname();
  const isAdminDocs = pathname === "/docs/admin" || pathname.startsWith("/docs/admin/");
  const namespace = isAdminDocs ? "adminDocs" : "integrationDocs";
  const homeHref = isAdminDocs ? "/docs/admin" : "/docs/integration";
  const { t } = useTranslation(namespace);

  return (
    <div className={cn("docs-site min-h-dvh bg-[#f4f6f9] text-slate-900", className)}>
      <header className="sticky top-0 z-40 border-b border-slate-200 bg-white/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-white/90">
        <div className="mx-auto flex h-[3.25rem] max-w-6xl items-center justify-between gap-3 px-4 sm:px-6 lg:gap-4 lg:px-8">
          <div className="flex min-w-0 items-center gap-4">
            <Link
              href={homeHref}
              className="truncate text-[15px] font-semibold tracking-tight text-slate-900"
            >
              {t("shell.title")}
            </Link>
            <DocsTopNav />
          </div>
          <div className="flex shrink-0 items-center gap-2">
            <AdminLanguageSwitcher />
            <DocsAdminConsoleLink namespace={namespace} />
          </div>
        </div>
      </header>
      {children}
    </div>
  );
}

export function DocsBody({
  sidebar,
  children,
}: {
  sidebar?: React.ReactNode;
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-8 sm:px-6 lg:flex-row lg:items-start lg:gap-10 lg:px-8 lg:py-10 lg:[--docs-sticky-top:calc(3.25rem+2.5rem)]">
      {sidebar}
      <main className="min-w-0 flex-1 rounded-xl border border-slate-200/80 bg-white p-6 shadow-sm sm:p-8 lg:pb-12">
        {children}
      </main>
    </div>
  );
}