import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { InlineCode } from "@/components/ui/code-block";

/**
 * Prose primitives for the documentation. Implemented with plain Tailwind classes
 * (no typography plugin) so the docs share the exact tokens used by the product.
 */

function textOf(node: React.ReactNode): string {
  if (node == null || typeof node === "boolean") return "";
  if (typeof node === "string" || typeof node === "number") return String(node);
  if (Array.isArray(node)) return node.map(textOf).join("");
  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return textOf(node.props.children);
  return "";
}

export function headingId(children: React.ReactNode, explicit?: string): string {
  if (explicit) return explicit;
  return (
    textOf(children)
      .normalize("NFD")
      .replace(/[̀-ͯ]/g, "")
      .toLowerCase()
      .trim()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/^-+|-+$/g, "")
      .slice(0, 80) || "section"
  );
}

function AnchorLink({ id }: { id: string }) {
  return (
    <a
      href={`#${id}`}
      aria-label="Link to this section"
      className="ml-2 inline-block select-none text-fg-subtle/0 transition-colors group-hover:text-fg-subtle focus-visible:text-fg-subtle"
    >
      #
    </a>
  );
}

export function H2({ id, children, className }: { id?: string; children: React.ReactNode; className?: string }) {
  const hid = headingId(children, id);
  return (
    <h2 id={hid} data-toc data-toc-level="2" className={cn("group mt-12 mb-4 scroll-mt-24 text-[20px] font-semibold tracking-tight text-fg first:mt-0", className)}>
      {children}
      <AnchorLink id={hid} />
    </h2>
  );
}

export function H3({ id, children, className }: { id?: string; children: React.ReactNode; className?: string }) {
  const hid = headingId(children, id);
  return (
    <h3 id={hid} data-toc data-toc-level="3" className={cn("group mt-8 mb-3 scroll-mt-24 text-[15.5px] font-semibold tracking-tight text-fg", className)}>
      {children}
      <AnchorLink id={hid} />
    </h3>
  );
}

export function H4({ children, className }: { children: React.ReactNode; className?: string }) {
  return <h4 className={cn("mt-6 mb-2 text-[13.5px] font-semibold text-fg", className)}>{children}</h4>;
}

export function P({ children, className }: { children: React.ReactNode; className?: string }) {
  return <p className={cn("my-4 text-[14.5px] leading-[1.7] text-fg-muted", className)}>{children}</p>;
}

export function Lead({ children, className }: { children: React.ReactNode; className?: string }) {
  return <p className={cn("my-4 text-[16px] leading-[1.65] text-fg-muted", className)}>{children}</p>;
}

export function Strong({ children }: { children: React.ReactNode }) {
  return <strong className="font-medium text-fg">{children}</strong>;
}

export function Ul({ children, className }: { children: React.ReactNode; className?: string }) {
  return <ul className={cn("my-4 list-disc space-y-1.5 pl-5 text-[14.5px] leading-[1.7] text-fg-muted marker:text-fg-subtle", className)}>{children}</ul>;
}

export function Ol({ children, className }: { children: React.ReactNode; className?: string }) {
  return <ol className={cn("my-4 list-decimal space-y-1.5 pl-5 text-[14.5px] leading-[1.7] text-fg-muted marker:text-fg-subtle marker:tabular", className)}>{children}</ol>;
}

export function Li({ children, className }: { children: React.ReactNode; className?: string }) {
  return <li className={cn("pl-0.5", className)}>{children}</li>;
}

export function Code({ children }: { children: React.ReactNode }) {
  return <InlineCode>{children}</InlineCode>;
}

export function A({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
  const external = /^https?:\/\//.test(href) || href.startsWith("mailto:");
  const cls = cn("font-medium text-accent underline decoration-accent/30 underline-offset-[3px] transition-colors hover:decoration-accent", className);
  if (external) {
    return (
      <a href={href} className={cls} target={href.startsWith("mailto:") ? undefined : "_blank"} rel="noreferrer">
        {children}
      </a>
    );
  }
  return (
    <Link href={href} className={cls}>
      {children}
    </Link>
  );
}

export function Kbd({ children }: { children: React.ReactNode }) {
  return <kbd className="rounded-[4px] border border-border bg-bg-muted px-1.5 py-0.5 font-mono text-[0.8em] text-fg">{children}</kbd>;
}

export function Hr() {
  return <hr className="my-10 border-border" />;
}

/* ---------------------------------------------------------------------------------------------- */
/* Tables                                                                                          */
/* ---------------------------------------------------------------------------------------------- */

export function Table({ children, className, dense }: { children: React.ReactNode; className?: string; dense?: boolean }) {
  return (
    <div className={cn("my-5 overflow-x-auto rounded-lg border border-border scrollbar-thin", className)}>
      <table className={cn("w-full border-collapse text-left text-[13.5px] leading-relaxed", dense && "text-[13px]")}>{children}</table>
    </div>
  );
}

export function THead({ children }: { children: React.ReactNode }) {
  return <thead className="bg-bg-subtle text-[12px] font-medium uppercase tracking-wide text-fg-subtle">{children}</thead>;
}

export function TBody({ children }: { children: React.ReactNode }) {
  return <tbody className="divide-y divide-border">{children}</tbody>;
}

export function Tr({ children, className }: { children: React.ReactNode; className?: string }) {
  return <tr className={cn("align-top", className)}>{children}</tr>;
}

export function Th({ children, className }: { children?: React.ReactNode; className?: string }) {
  return <th className={cn("px-3.5 py-2 font-medium", className)}>{children}</th>;
}

export function Td({ children, className, mono }: { children?: React.ReactNode; className?: string; mono?: boolean }) {
  return <td className={cn("px-3.5 py-2.5 text-fg-muted", mono && "font-mono text-[12.5px] text-fg", className)}>{children}</td>;
}

/* ---------------------------------------------------------------------------------------------- */
/* Small layout helpers                                                                            */
/* ---------------------------------------------------------------------------------------------- */

export function Steps({ children }: { children: React.ReactNode }) {
  return <ol className="my-6 space-y-0 border-l border-border pl-0 [counter-reset:step]">{children}</ol>;
}

export function Step({ title, children }: { title: React.ReactNode; children?: React.ReactNode }) {
  return (
    <li className="relative pb-8 pl-8 last:pb-0 [counter-increment:step]">
      <span
        aria-hidden
        className="absolute -left-[13px] top-0 flex size-[26px] items-center justify-center rounded-full border border-border bg-bg font-mono text-[11.5px] font-medium text-fg-muted tabular before:content-[counter(step)]"
      />
      <div className="text-[15px] font-semibold text-fg">{title}</div>
      {children ? <div className="mt-1 [&>p]:my-2 [&>ul]:my-2">{children}</div> : null}
    </li>
  );
}

export function CardGrid({ children, className }: { children: React.ReactNode; className?: string }) {
  return <div className={cn("my-6 grid gap-3 sm:grid-cols-2", className)}>{children}</div>;
}

export function LinkCard({ href, title, description }: { href: string; title: string; description: string }) {
  return (
    <Link href={href} className="group rounded-lg border border-border bg-bg p-4 transition-colors hover:border-border-strong hover:bg-bg-subtle">
      <div className="flex items-center justify-between gap-2 text-[14px] font-medium text-fg">
        {title}
        <span aria-hidden className="text-fg-subtle transition-transform group-hover:translate-x-0.5">
          &rarr;
        </span>
      </div>
      <p className="mt-1 text-[13px] leading-relaxed text-fg-muted">{description}</p>
    </Link>
  );
}