import * as React from "react";
import { cn } from "@/lib/utils";
import { CopyButton } from "./copy-button";

export type CodeLang = "bash" | "json" | "javascript" | "typescript" | "python" | "go" | "php" | "ruby" | "java" | "csharp" | "html" | "text";

/** Tiny, dependency-free tokenizer good enough for docs and playground snippets. */
export function highlight(code: string, lang: CodeLang): React.ReactNode[] {
  const esc = (s: string) => s;
  if (lang === "text") return [esc(code)];
  const rules: Array<[RegExp, string]> = [];
  if (lang === "json") {
    rules.push([/"(?:[^"\\]|\\.)*"(?=\s*:)/g, "tok-a"], [/"(?:[^"\\]|\\.)*"/g, "tok-s"], [/\b(?:true|false|null)\b/g, "tok-k"], [/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/gi, "tok-n"]);
  } else if (lang === "bash") {
    rules.push([/#.*$/gm, "tok-c"], [/'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"/g, "tok-s"], [/^\s*(curl|export|echo|pip|npm|pnpm|yarn|go|python|node|fetcha)\b/gm, "tok-k"], [/\s(-{1,2}[a-zA-Z-]+)/g, "tok-a"]);
  } else if (lang === "html") {
    rules.push([/<!--[\s\S]*?-->/g, "tok-c"], [/<\/?[a-zA-Z][^\s>]*/g, "tok-t"], [/"[^"]*"/g, "tok-s"]);
  } else {
    rules.push(
      [/\/\/.*$|#.*$/gm, "tok-c"],
      [/\/\*[\s\S]*?\*\//g, "tok-c"],
      [/`(?:[^`\\]|\\.)*`|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, "tok-s"],
      [/\b(?:import|from|export|const|let|var|function|async|await|return|new|class|def|if|else|elif|for|while|try|except|catch|finally|throw|raise|print|package|func|use|require|public|static|void|string|var|namespace|using|end|do|puts|nil|None|True|False|true|false|null|undefined|with|as|in|not|and|or|fmt|err)\b/g, "tok-k"],
      [/\b\d+(?:\.\d+)?\b/g, "tok-n"],
      [/\b(?:Fetcha|FetchaClient|fetch|json|text|sessions|create|Println|Fatal|NewRequest|Marshal|env|process|os|getenv|environ|std|Console|WriteLine)\b(?=\s*[\(\.])/g, "tok-a"],
    );
  }
  type Span = { s: number; e: number; c: string };
  const spans: Span[] = [];
  for (const [re, c] of rules) {
    re.lastIndex = 0;
    let m: RegExpExecArray | null;
    while ((m = re.exec(code))) {
      if (!m[0]) {
        re.lastIndex++;
        continue;
      }
      const s = m.index;
      const e = s + m[0].length;
      if (spans.some((x) => s < x.e && e > x.s)) continue;
      spans.push({ s, e, c });
    }
  }
  spans.sort((a, b) => a.s - b.s);
  const out: React.ReactNode[] = [];
  let i = 0;
  for (const sp of spans) {
    if (sp.s > i) out.push(esc(code.slice(i, sp.s)));
    out.push(
      <span key={sp.s} className={sp.c}>
        {code.slice(sp.s, sp.e)}
      </span>,
    );
    i = sp.e;
  }
  if (i < code.length) out.push(esc(code.slice(i)));
  return out;
}

export function CodeBlock({
  code,
  lang = "bash",
  title,
  className,
  maxHeight,
  lineNumbers,
  copy = true,
}: {
  code: string;
  lang?: CodeLang;
  title?: string;
  className?: string;
  maxHeight?: number | string;
  lineNumbers?: boolean;
  copy?: boolean;
}) {
  const lines = code.replace(/\n$/, "").split("\n");
  return (
    <div className={cn("group relative overflow-hidden rounded-lg border border-border bg-bg-subtle dark:bg-[#0b0f17] text-[12.5px] leading-[1.6]", className)}>
      {title ? (
        <div className="flex items-center justify-between border-b border-border px-3.5 py-1.5 text-[11.5px] text-fg-subtle">
          <span className="font-mono">{title}</span>
          {copy ? <CopyButton value={code} size="icon-sm" className="-mr-1.5 size-7" /> : null}
        </div>
      ) : copy ? (
        <div className="absolute right-1.5 top-1.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
          <CopyButton value={code} size="icon-sm" className="size-7 bg-bg/80 backdrop-blur" />
        </div>
      ) : null}
      <pre className="overflow-auto p-3.5 scrollbar-thin font-mono" style={{ maxHeight }}>
        <code>
          {lineNumbers
            ? lines.map((l, i) => (
                <span key={i} className="block">
                  <span className="mr-4 inline-block w-6 select-none text-right text-fg-subtle/70">{i + 1}</span>
                  {highlight(l, lang)}
                  {"\n"}
                </span>
              ))
            : highlight(code, lang)}
        </code>
      </pre>
    </div>
  );
}

export function InlineCode({ children, className }: { children: React.ReactNode; className?: string }) {
  return <code className={cn("rounded-[4px] border border-border bg-bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-fg", className)}>{children}</code>;
}