"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

import {
  BuildingsIcon,
  DashboardIcon,
  DocumentIcon,
  MessageIcon,
  ShieldIcon,
  UsersIcon,
  WalletIcon,
  WrenchIcon,
} from "@/components/dashboard-ui";

const navigation = [
  { href: "/app", label: "Home", icon: DashboardIcon },
  { href: "/properties", label: "Homes", icon: BuildingsIcon },
  { href: "/tenants", label: "People", icon: UsersIcon },
  { href: "/maintenance", label: "Repairs", icon: WrenchIcon },
  { href: "/finance", label: "Money", icon: WalletIcon },
  { href: "/compliance", label: "Safety", icon: ShieldIcon },
  { href: "/documents", label: "Vault", icon: DocumentIcon },
  { href: "/communications", label: "Messages", icon: MessageIcon },
];

const mobileNavigation = navigation.filter((item) =>
  [
    "/app",
    "/properties",
    "/finance",
    "/compliance",
    "/documents",
    "/communications",
  ].includes(item.href),
);

function isActive(pathname: string, href: string) {
  if (href === "/") {
    return pathname === "/";
  }

  return pathname.startsWith(href);
}

export function SidebarNav() {
  const pathname = usePathname();

  return (
    <>
      <div className="w-full overflow-x-auto pb-1 xl:w-auto xl:pb-0">
        <nav
          aria-label="Primary navigation"
          className="mx-auto flex w-max items-center justify-center gap-2"
        >
          {navigation.map((item) => {
            const active = isActive(pathname, item.href);
            const Icon = item.icon;

            return (
              <Link
                key={item.href}
                href={item.href}
                style={active ? { color: "#fffdf7" } : undefined}
                className={[
                  "flex items-center gap-2 rounded-full border px-4 py-2.5 text-sm font-semibold transition",
                  active
                    ? "border-primary bg-primary text-white"
                    : "border-border bg-surface-strong text-foreground hover:border-primary/35 hover:text-primary",
                ].join(" ")}
              >
                <Icon className="h-4 w-4" />
                {item.label}
              </Link>
            );
          })}
        </nav>
      </div>

      <nav
        aria-label="Mobile primary navigation"
        className="fixed inset-x-3 bottom-3 z-[120] grid grid-cols-6 gap-1 rounded-[28px] border border-border bg-surface-strong/95 p-2 shadow-[0_24px_80px_rgba(0,0,0,0.25)] backdrop-blur md:hidden"
      >
        {mobileNavigation.map((item) => {
          const active = isActive(pathname, item.href);
          const Icon = item.icon;

          return (
            <Link
              style={active ? { color: "#fffdf7" } : undefined}
              className={[
                "flex min-w-0 flex-col items-center gap-1 rounded-[20px] px-2 py-2 text-[11px] font-bold transition",
                active
                  ? "bg-primary text-white"
                  : "text-muted hover:bg-primary-soft hover:text-primary",
              ].join(" ")}
              href={item.href}
              key={item.href}
            >
              <Icon className="h-5 w-5" />
              <span className="truncate">{item.label}</span>
            </Link>
          );
        })}
      </nav>
    </>
  );
}