import * as React from "react";
import Link from "next/link";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { getPrevNext } from "./nav-config";

export type DocStatus = "Stable" | "Beta" | "Coming soon" | "Reference";

const STATUS_VARIANT: Record<DocStatus, "success" | "info" | "warning" | "default"> = {
  Stable: "success",
  Beta: "info",
  "Coming soon": "warning",
  Reference: "default",
};

export function DocPage({
  path,
  eyebrow,
  title,
  description,
  status,
  children,
  className,
}: {
  /** Route of this page, e.g. `/docs/fetch`. Used for prev/next links. */
  path: string;
  eyebrow?: string;
  title: string;
  description?: React.ReactNode;
  status?: DocStatus;
  children: React.ReactNode;
  className?: string;
}) {
  const { prev, next } = getPrevNext(path);
  return (
    <article data-docs-article className={cn("min-w-0 animate-fade-in", className)}>
      <header className="border-b border-border pb-6">
        <div className="flex flex-wrap items-center gap-2 text-[12px] font-medium uppercase tracking-wide text-fg-subtle">
          <span>{eyebrow ?? "Documentation"}</span>
          {status ? (
            <Badge variant={STATUS_VARIANT[status]} dot>
              {status}
            </Badge>
          ) : null}
        </div>
        <h1 className="mt-2 text-[30px] font-semibold leading-tight tracking-tight text-fg sm:text-[34px]">{title}</h1>
        {description ? <p className="mt-3 max-w-2xl text-[16px] leading-relaxed text-fg-muted">{description}</p> : null}
      </header>

      <div className="pt-6">{children}</div>

      <footer className="mt-14 border-t border-border pt-6">
        <div className="grid gap-3 sm:grid-cols-2">
          {prev ? (
            <Link href={prev.href} className="group flex flex-col rounded-lg border border-border p-4 transition-colors hover:border-border-strong hover:bg-bg-subtle">
              <span className="flex items-center gap-1 text-[12px] text-fg-subtle">
                <ArrowLeft className="size-3.5" aria-hidden /> Previous
              </span>
              <span className="mt-1 text-[14.5px] font-medium text-fg">{prev.title}</span>
            </Link>
          ) : (
            <span />
          )}
          {next ? (
            <Link href={next.href} className="group flex flex-col items-end rounded-lg border border-border p-4 text-right transition-colors hover:border-border-strong hover:bg-bg-subtle">
              <span className="flex items-center gap-1 text-[12px] text-fg-subtle">
                Next <ArrowRight className="size-3.5" aria-hidden />
              </span>
              <span className="mt-1 text-[14.5px] font-medium text-fg">{next.title}</span>
            </Link>
          ) : null}
        </div>
        <p className="mt-6 text-[12.5px] text-fg-subtle">
          Questions or a mistake in this page? Email{" "}
          <a href="mailto:support@fetcha.co" className="text-fg-muted underline underline-offset-2 hover:text-fg">
            support@fetcha.co
          </a>{" "}
          and include the request ID when it concerns a specific call.
        </p>
      </footer>
    </article>
  );
}