import { Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@colineapp/ui";
import { GROUPS, RULES } from "./api";
import { entryPath, slug } from "./slug";

/** Inline `code` in the reference's prose. */
export function Prose({ text }: { text: string }) {
  const parts = text.split(/(`[^`]+`)/g);
  return (
    <>
      {parts.map((part, index) =>
        part.startsWith("`") && part.endsWith("`") ? (
          <code key={index} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">
            {part.slice(1, -1)}
          </code>
        ) : (
          part
        ),
      )}
    </>
  );
}

export function Rules() {
  return (
    <ol className="grid gap-3 sm:grid-cols-2">
      {RULES.map((rule, index) => (
        <li key={rule} className="flex gap-3 rounded-xl border border-border bg-card p-4 text-sm text-card-foreground">
          <span className="grid size-6 shrink-0 place-items-center rounded-full bg-muted text-xs font-semibold tabular-nums">{index + 1}</span>
          <span className="leading-relaxed">
            <Prose text={rule} />
          </span>
        </li>
      ))}
    </ol>
  );
}

export function Reference() {
  return (
    <div className="grid gap-12">
      {GROUPS.map((group) => (
        <section key={group.id} id={`api-${group.id}`} className="grid scroll-mt-24 gap-4">
          <div className="grid gap-1.5">
            <h3 className="text-xl font-semibold tracking-tight">{group.title}</h3>
            <p className="max-w-3xl text-sm leading-relaxed text-muted-foreground">
              <Prose text={group.intro} />
            </p>
          </div>
          <div className="overflow-x-auto rounded-xl border border-border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[180px]">Name</TableHead>
                  <TableHead className="w-[220px]">Type</TableHead>
                  <TableHead>Description</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {group.entries.map((entry) => (
                  <TableRow key={entry.name} id={`api-${group.id}-${slug(entry.name)}`}>
                    <TableCell className="align-top">
                      <a
                        href={`/${entryPath(group.id, entry.name)}`}
                        className="font-mono text-[13px] font-medium hover:underline"
                        title="Plain-text page for agents"
                      >
                        {entry.name}
                      </a>
                    </TableCell>
                    <TableCell className="align-top">
                      <code className="font-mono text-xs break-words whitespace-normal text-muted-foreground">{entry.type}</code>
                      {entry.default ? (
                        <div className="mt-1.5">
                          <Badge variant="secondary">default {entry.default}</Badge>
                        </div>
                      ) : null}
                    </TableCell>
                    <TableCell className="min-w-[320px] align-top whitespace-normal">
                      <Prose text={entry.description} />
                      {entry.example ? (
                        <pre className="mt-2 overflow-x-auto rounded-lg bg-muted px-3 py-2 text-xs">
                          <code className="font-mono">{entry.example}</code>
                        </pre>
                      ) : null}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </section>
      ))}
    </div>
  );
}