"use client";

import Image from "next/image";
import Link from "next/link";
import { MenuIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  useSidebar,
} from "@/components/ui/sidebar";
import { useTranslation } from "@/hooks/useTranslation";

import { NAV_LINKS } from "./lib/content";

/**
 * Mobile navigation drawer, built on the shared shadcn `Sidebar` (a scrim'd
 * off-canvas Sheet below `md`). The desktop top nav lives in `Header`; this
 * only surfaces below `lg`, via the hamburger trigger.
 *
 * `className="contents"` neutralises the provider wrapper's `min-h-svh w-full`
 * so it doesn't disturb the header layout — the trigger just flows inline and
 * the drawer portals out.
 */
export function HomeMobileNav({
  dashboardHref,
}: {
  dashboardHref: string | null;
}) {
  return (
    <SidebarProvider defaultOpen={false} className="contents">
      <MobileNavInner dashboardHref={dashboardHref} />
    </SidebarProvider>
  );
}

function MobileNavInner({ dashboardHref }: { dashboardHref: string | null }) {
  const { t, language } = useTranslation();
  const { toggleSidebar, isMobile, open, setOpen, setOpenMobile } =
    useSidebar();

  // Drawer enters from the reading-end edge (where the hamburger sits): right in
  // LTR, left in RTL.
  const side = language === "ar" ? "left" : "right";
  const close = () => (isMobile ? setOpenMobile(false) : setOpen(false));

  // On mobile the Sidebar is a Sheet (unmounted while closed). Off desktop it
  // is a fixed off-canvas panel that would sit off-screen even when closed and
  // push page-level horizontal overflow — so only mount it while open there.
  const showDrawer = isMobile || open;

  return (
    <>
      <Button
        variant="ghost"
        size="icon"
        className="lg:hidden"
        aria-label={t("home.nav.openMenu")}
        onClick={toggleSidebar}
      >
        <MenuIcon />
      </Button>

      {showDrawer && (
        <Sidebar
          side={side}
          collapsible="offcanvas"
          className="z-50 border-border"
        >
          <SidebarHeader className="border-b border-border p-4">
            {/* self-start: SidebarHeader is a flex column, whose default
              align-items:stretch would otherwise stretch the logo to the full
              drawer width (distorting it) instead of honoring w-auto. */}
            <Image
              src="/icon/horizontal_icon.png"
              alt="Washy"
              width={500}
              height={152}
              className="h-8 w-auto self-start"
            />
          </SidebarHeader>

          <SidebarContent className="p-2">
            <SidebarGroup>
              <SidebarMenu>
                {NAV_LINKS.map((link) => (
                  <SidebarMenuItem key={link.key}>
                    <SidebarMenuButton
                      size="lg"
                      className="font-medium"
                      render={
                        <a
                          //  href={link.href}
                          href={"#"}
                          onClick={close}
                        />
                      }
                    >
                      <span>{t(`home.nav.${link.key}`)}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroup>
          </SidebarContent>

          <SidebarFooter className="gap-2 border-t border-border p-4">
            {dashboardHref ? (
              <Link
                //  href={dashboardHref}
                href={"#"}
                onClick={close}
              >
                <Button className="w-full">{t("dashboard.title")}</Button>
              </Link>
            ) : (
              <>
                <Link
                  // href={ROUTES.AUTH.LOGIN}
                  href={"#"}
                  onClick={close}
                >
                  <Button variant="secondary" className="w-full">
                    {t("home.nav.providerLogin")}
                  </Button>
                </Link>
                <Link
                  href={"#"}
                  // href={ROUTES.AUTH.REGISTER_PROVIDER}
                  onClick={close}
                >
                  <Button className="w-full">
                    {t("home.nav.registerProvider")}
                  </Button>
                </Link>
              </>
            )}
          </SidebarFooter>
        </Sidebar>
      )}
    </>
  );
}