import { forwardRef } from "react";
import { createLink, type LinkComponent } from "@tanstack/react-router";
import { Tabs } from "@cloudflare/kumo/components/tabs";
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-kumo-subtle hover:bg-kumo-tint hover:text-kumo-strong [&.active]:bg-kumo-tint [&.active]:text-kumo-strong",
        className,
      )}
      {...rest}
    >
      {children}
    </a>
  );
});
SideNavAnchor.displayName = "SideNavAnchor";

const RouterSideNavLink = createLink(SideNavAnchor);

/** Vertical settings-style navigation item. */
export const SideNavLink: LinkComponent<typeof SideNavAnchor> = (props) => <RouterSideNavLink {...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-kumo-subtle">{title}</h2>}
      {children}
    </nav>
  );
}

export type RouteTab = {
  /** Stable id, usually the route path. */
  value: string;
  label: React.ReactNode;
  /** A router `<Link>` element; Kumo merges tab props and the label into it. */
  link: React.ReactElement;
  active: boolean;
};

/** Underline tabs whose selection follows the current route; each tab navigates via its link. */
export function RouteTabs({ tabs, className }: { tabs: ReadonlyArray<RouteTab>; className?: string }) {
  const active = tabs.find((tab) => tab.active)?.value;
  return (
    <Tabs
      variant="underline"
      value={active}
      className={className}
      tabs={tabs.map((tab) => ({ value: tab.value, label: tab.label, render: tab.link, nativeButton: false }))}
    />
  );
}

/** 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>;
}