import * as React from "react";
import { cn } from "@/lib/utils";

export interface ParamRow {
  name: string;
  type: string;
  /** Rendered in monospace. Omit for "—". */
  default?: string;
  required?: boolean;
  /** Free-form description; may contain inline components. */
  description: React.ReactNode;
  /** Small note under the type, e.g. constraints. */
  constraints?: string;
  /** Marks a field the validator accepts but the platform does not act on yet. */
  reserved?: boolean;
}

export function ParamTable({ rows, className, caption, showDefault = true }: { rows: ParamRow[]; className?: string; caption?: string; showDefault?: boolean }) {
  return (
    <div className={cn("my-5 overflow-x-auto rounded-lg border border-border scrollbar-thin", className)}>
      <table className="w-full border-collapse text-left text-[13.5px] leading-relaxed">
        {caption ? <caption className="border-b border-border bg-bg-subtle px-3.5 py-2 text-left text-[12px] font-medium text-fg-muted">{caption}</caption> : null}
        <thead className="bg-bg-subtle text-[12px] font-medium uppercase tracking-wide text-fg-subtle">
          <tr>
            <th className="px-3.5 py-2 font-medium">Field</th>
            <th className="px-3.5 py-2 font-medium">Type</th>
            {showDefault ? <th className="px-3.5 py-2 font-medium">Default</th> : null}
            <th className="px-3.5 py-2 font-medium">Description</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-border">
          {rows.map((r) => (
            <tr key={r.name} className="align-top">
              <td className="whitespace-nowrap px-3.5 py-2.5">
                <code className="font-mono text-[12.5px] font-medium text-fg">{r.name}</code>
                {r.required ? (
                  <span className="ml-1.5 align-middle text-[10.5px] font-semibold uppercase tracking-wide text-danger" title="Required">
                    required
                  </span>
                ) : null}
                {r.reserved ? (
                  <span className="ml-1.5 align-middle rounded-full bg-warning-soft px-1.5 py-px text-[10.5px] font-medium text-warning" title="Accepted by the validator but not yet active">
                    reserved
                  </span>
                ) : null}
              </td>
              <td className="px-3.5 py-2.5">
                <code className="font-mono text-[12.5px] text-fg-muted">{r.type}</code>
                {r.constraints ? <div className="mt-0.5 text-[12px] text-fg-subtle">{r.constraints}</div> : null}
              </td>
              {showDefault ? <td className="whitespace-nowrap px-3.5 py-2.5 font-mono text-[12.5px] text-fg-muted">{r.default ?? <span className="text-fg-subtle">&mdash;</span>}</td> : null}
              <td className="px-3.5 py-2.5 text-fg-muted [&_code]:rounded-[4px] [&_code]:border [&_code]:border-border [&_code]:bg-bg-muted [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[0.88em] [&_code]:text-fg">{r.description}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}