import {
  RiPokerHeartsLine,
  RiShoppingCartLine,
  RiUser3Line,
} from "@remixicon/react";
import Link from "next/link";
import React from "react";
import { Button } from "../ui/button";
import Image from "next/image";
import Logo from "@/public/logo.png";
import { cn } from "@/lib/utils";
import CategoryList, { type NavCategory } from "./CategoryList";
import MobileNav from "./MobileNav";
import SearchBar from "./SearchBar";
import { listCategories } from "@/lib/actions/catalog";
import { getCurrentSession } from "@/lib/auth/current-user";
import { getStoreIdentity } from "@/lib/actions/store-info";

async function Navbar() {
  const categories = await listCategories();
  const navTree = buildNavTree(categories);
  const session = await getCurrentSession();
  const identity = await getStoreIdentity();

  return (
    <>
      <nav className="w-full bg-surface dark:bg-surface-container-low border-b border-outline-variant dark:border-outline flat no bg-background">
        <div className="flex gap-3 py-3 items-center justify-between md:h-20 px-gutter max-w-container-max mx-auto">
          {/* Brand */}
          <div className="flex items-start gap-2 md:items-center md:gap-8">
            <Link prefetch href="/" className="flex items-center gap-2">
              <Image
                alt={`${identity.name} logo`}
                src={identity.logoUrl ?? Logo}
                width={1400}
                height={1400}
                className="w-16"
                priority
              />
            </Link>
            {/* Desktop Navigation Links */}
            <div className="hidden md:flex gap-6 items-center">
              <NavbarItem href="/products">Categories</NavbarItem>
              <NavbarItem href="/pages/shipping">Shipping</NavbarItem>
              <NavbarItem href="/orders">Order</NavbarItem>
            </div>
          </div>
          {/* Search Bar */}
          <div className="w-full flex-1 md:max-w-xl md:mx-8 relative">
            <SearchBar />
          </div>
          {/* Actions */}
          <div className="hidden md:flex items-center gap-5">
            <Link
              prefetch
              href="/wishlist"
              className="text-on-surface-variant hover:text-primary transition-colors duration-200"
              aria-label="Wishlist"
            >
              <RiPokerHeartsLine size={20} />
            </Link>
            <Link
              prefetch
              href={session ? "/account" : "/login"}
              className="text-on-surface-variant hover:text-primary transition-colors duration-200"
              aria-label="Account"
            >
              <RiUser3Line size={20} />
            </Link>
            <Link prefetch href="/cart">
              <Button>
                <RiShoppingCartLine className="text-on-primary" />
                <span className="ml-2">Cart</span>
              </Button>
            </Link>
          </div>
        </div>
      </nav>

      <div className="hidden md:flex sticky top-0 z-50 bg-background border-b border-outline-variant">
        <CategoryList categories={navTree} />
      </div>

      <MobileNav hasSession={!!session} />
    </>
  );
}

function NavbarItem({
  href,
  children,
  className,
  ...props
}: {
  href: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <Link
      prefetch
      className={cn(
        "font-body-md text-body-md text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-all duration-200",
        className,
      )}
      href={href}
      {...props}
    >
      {children}
    </Link>
  );
}

/** Build the mega-menu nav tree from DB categories (grouped by parent). */
function buildNavTree(
  categories: { id: string; name: string; slug: string; parentId?: string }[],
): NavCategory[] {
  const parentMap = new Map<string, typeof categories>();
  for (const c of categories) {
    if (!c.parentId) continue;
    const group = parentMap.get(c.parentId) ?? [];
    group.push(c);
    parentMap.set(c.parentId, group);
  }
  return categories
    .filter((c) => !c.parentId)
    .map((parent) => {
      const children = (parentMap.get(parent.id) ?? []).map((child) => ({
        label: child.name,
        href: `/products/${parent.slug}/${child.slug}`,
      }));
      return {
        label: parent.name,
        href: `/products/${parent.slug}`,
        subCategories: children,
      };
    });
}

export default Navbar;