import { forwardRef } from "react";
import { createLink, type LinkComponent } from "@tanstack/react-router";
import { cn } from "~/utils/cn";

type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;

const SideNavAnchor = forwardRef<HTMLAnchorElement, AnchorProps>(function SideNavAnchor(
  { className, children, ...rest },
  ref,
) {
  return (
    <a
      ref={ref}
      className={cn(
        "rounded-md px-3 py-1.5 text-gray-400 hover:bg-gray-900 hover:text-white [&.active]:bg-gray-900 [&.active]:text-white",
        className,
      )}
      {...rest}
    >
      {children}
    </a>
  );
});
SideNavAnchor.displayName = "SideNavAnchor";

const TabAnchor = forwardRef<HTMLAnchorElement, AnchorProps>(function TabAnchor({ className, children, ...rest }, ref) {
  return (
    <a
      ref={ref}
      className={cn(
        "-mb-px flex shrink-0 items-center gap-2 border-b-2 border-transparent px-3 py-2 text-sm whitespace-nowrap text-gray-400 hover:text-white [&.active]:border-accent-500 [&.active]:text-white",
        className,
      )}
      {...rest}
    >
      {children}
    </a>
  );
});
TabAnchor.displayName = "TabAnchor";

const RouterSideNavLink = createLink(SideNavAnchor);
const RouterTabLink = createLink(TabAnchor);

/** Vertical settings-style navigation item. */
export const SideNavLink: LinkComponent<typeof SideNavAnchor> = (props) => <RouterSideNavLink {...props} />;

/** Horizontal underline tab. */
export const TabLink: LinkComponent<typeof TabAnchor> = (props) => <RouterTabLink {...props} />;

export function SideNav({
  title,
  className,
  children,
}: {
  title?: React.ReactNode;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <nav className={cn("flex flex-col gap-1 text-sm", className)}>
      {title && <h2 className="label-small mb-2 text-gray-500">{title}</h2>}
      {children}
    </nav>
  );
}

export function TabBar({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <nav
      className={cn(
        "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-gray-800 [scrollbar-width:thin]",
        className,
      )}
    >
      {children}
    </nav>
  );
}

/** Two-column layout: side navigation on the left, content on the right. */
export function SideNavLayout({ className, children }: { className?: string; children: React.ReactNode }) {
  return <div className={cn("grid gap-8 md:grid-cols-[200px_1fr]", className)}>{children}</div>;
}