"use client";

import { useState } from "react";
import Link from "next/link";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { useTranslation } from "@/lib/hooks/use-translation";
import { visibleNav, type PublicNavDesk } from "@/lib/constants/public-nav";
import { usePaymentsEnabled } from "@/lib/hooks/use-payments-enabled";

function deskLabel(desk: { labelHi: string; labelEn: string }, language: string) {
  return language === "hi" ? desk.labelHi : desk.labelEn;
}

/**
 * Desktop desk bar — the seven public "desks" rendered as a slim bar under
 * the main navbar, each with a hover/focus dropdown. Hidden on mobile;
 * the drawer uses <MobileDeskLinks /> instead.
 */
export function PublicMegaMenu() {
  const { language } = useTranslation("NAVBAR");
  const { paymentsEnabled } = usePaymentsEnabled();
  const nav = visibleNav(paymentsEnabled);

  return (
    <div className="hidden border-t border-indigo-700/60 bg-indigo-800 md:block">
      <div className="mx-auto flex max-w-7xl items-stretch px-4 sm:px-6 lg:px-8">
        {nav.map((desk) => (
          <div key={desk.href} className="group relative">
            <Link
              href={desk.href}
              className="flex items-center gap-1 px-4 py-2.5 text-[13px] font-medium text-indigo-100 transition-colors hover:bg-indigo-700 hover:text-white focus-visible:bg-indigo-700 focus-visible:text-white focus-visible:outline-none"
            >
              {deskLabel(desk, language)}
              {desk.children && <ChevronDown className="h-3 w-3 opacity-70" />}
            </Link>

            {desk.children && (
              <div className="invisible absolute left-0 top-full z-50 min-w-64 rounded-b-md border border-gray-200 bg-white opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100">
                {desk.children.map((child) => (
                  <Link
                    key={child.href}
                    href={child.href}
                    className="block border-b border-gray-100 px-4 py-2.5 text-sm text-gray-700 transition-colors last:border-b-0 hover:bg-indigo-50 hover:text-indigo-700 focus-visible:bg-indigo-50 focus-visible:text-indigo-700 focus-visible:outline-none"
                  >
                    {deskLabel(child, language)}
                  </Link>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

/** Mobile accordion of the same desks, for use inside the navbar drawer. */
export function MobileDeskLinks({ onNavigate }: { onNavigate: () => void }) {
  const { language } = useTranslation("NAVBAR");
  const [openDesk, setOpenDesk] = useState<string | null>(null);
  const { paymentsEnabled } = usePaymentsEnabled();
  const nav = visibleNav(paymentsEnabled);

  const renderLeaf = (desk: PublicNavDesk) => (
    <Link
      key={desk.href}
      href={desk.href}
      onClick={onNavigate}
      className="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"
    >
      {deskLabel(desk, language)}
    </Link>
  );

  return (
    <div className="flex flex-col gap-1">
      {nav.map((desk) =>
        desk.children ? (
          <div key={desk.href}>
            <button
              onClick={() => setOpenDesk(openDesk === desk.href ? null : desk.href)}
              className="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-indigo-50 hover:text-indigo-600"
              aria-expanded={openDesk === desk.href}
            >
              {deskLabel(desk, language)}
              <ChevronDown
                className={cn(
                  "h-4 w-4 transition-transform",
                  openDesk === desk.href && "rotate-180"
                )}
              />
            </button>
            {openDesk === desk.href && (
              <div className="ml-3 flex flex-col gap-0.5 border-l border-gray-200 pl-3">
                {desk.children.map((child) => (
                  <Link
                    key={child.href}
                    href={child.href}
                    onClick={onNavigate}
                    className="rounded-md px-3 py-1.5 text-sm text-gray-600 hover:bg-indigo-50 hover:text-indigo-600"
                  >
                    {deskLabel(child, language)}
                  </Link>
                ))}
              </div>
            )}
          </div>
        ) : (
          renderLeaf(desk)
        )
      )}
    </div>
  );
}