import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

export { DocCode } from "@/components/docs/doc-code";

export function DocPageHeader({
  title,
  description,
}: {
  title: string;
  description?: string;
}): React.ReactElement {
  return (
    <header className="border-b border-border pb-6">
      <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
      {description ? (
        <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">{description}</p>
      ) : null}
    </header>
  );
}

export function DocSection({
  title,
  children,
  className,
}: {
  title?: string;
  children: ReactNode;
  className?: string;
}): React.ReactElement {
  return (
    <section className={cn("space-y-3", className)}>
      {title ? <h2 className="text-base font-semibold text-foreground">{title}</h2> : null}
      {children}
    </section>
  );
}

export function DocNote({ children }: { children: ReactNode }): React.ReactElement {
  return (
    <p className="border-l-2 border-border pl-3 text-sm leading-6 text-muted-foreground">{children}</p>
  );
}

export function DocList({ items }: { items: readonly string[] }): React.ReactElement {
  return (
    <ul className="space-y-1 text-sm leading-6 text-muted-foreground">
      {items.map((item) => (
        <li key={item} className="flex gap-2">
          <span className="text-muted-foreground/50">·</span>
          <span>{item}</span>
        </li>
      ))}
    </ul>
  );
}

export function DocOrderedList({ items }: { items: readonly string[] }): React.ReactElement {
  return (
    <ol className="list-decimal space-y-1 pl-5 text-sm leading-6 text-muted-foreground">
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ol>
  );
}

export function DocTable({
  headers,
  rows,
  compact,
}: {
  headers: readonly string[];
  rows: readonly (readonly string[])[];
  compact?: boolean;
}): React.ReactElement {
  return (
    <div className="overflow-x-auto rounded-lg border border-border">
      <table className="w-full min-w-[480px] border-collapse text-sm">
        <thead>
          <tr className="border-b border-border bg-muted/30">
            {headers.map((header) => (
              <th
                key={header}
                className="px-3 py-2 text-left text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
              >
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, rowIndex) => (
            <tr key={`${row[0]}-${rowIndex}`} className="border-b border-border/60 last:border-0">
              {row.map((cell, cellIndex) => (
                <td
                  key={`${row[0]}-${cellIndex}`}
                  className={cn(
                    "px-3 align-top text-muted-foreground",
                    compact ? "py-1.5 text-[13px] leading-5" : "py-2 text-[13px] leading-6",
                  )}
                >
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function DocEndpoint({ method, path }: { method: string; path: string }): React.ReactElement {
  return (
    <div className="inline-flex items-center gap-2 font-mono text-xs">
      <span className="rounded bg-primary/10 px-1.5 py-0.5 font-semibold text-primary">{method}</span>
      <span className="text-foreground">{path}</span>
    </div>
  );
}

export function DocInlineCode({ children }: { children: ReactNode }): React.ReactElement {
  return (
    <code className="rounded bg-muted px-1 py-0.5 font-mono text-[12px] text-foreground">{children}</code>
  );
}
