import { useCallback, useMemo, useState, type CSSProperties } from "react";import { dualThemeOptions, getHighlighter, type ShikiThemeProp } from "../lib/shiki";import { toast } from "sonner";import { cn } from "../lib/utils";import { copyToClipboard } from "../lib/clipboard";import { Button } from "./button";import type { ThemedToken } from "shiki/core"; // ---------------------------------------------------------------------------// Types// --------------------------------------------------------------------------- type Definition = {  readonly name: string;  /** The full type body string, e.g. `{ login: string; id: number }` */  readonly code: string;}; // ---------------------------------------------------------------------------// Simple TypeScript formatter — expands single-line types into readable form// --------------------------------------------------------------------------- const formatTypeScript = (code: string): string => {  let result = "";  let indent = 0;  let i = 0;  const len = code.length;   // Track brace depth so we only break `|` and `&` at the top level of a union  let braceDepth = 0;   while (i < len) {    const ch = code[i]!;     if (ch === "{") {      braceDepth++;      indent++;      result += "{\n" + "  ".repeat(indent);      i++;      while (i < len && code[i] === " ") i++;    } else if (ch === "}") {      braceDepth = Math.max(0, braceDepth - 1);      indent = Math.max(0, indent - 1);      result += "\n" + "  ".repeat(indent) + "}";      i++;    } else if (ch === ";" && i + 1 < len && code[i + 1] === " ") {      result += ";\n" + "  ".repeat(indent);      i += 2;    } else if (ch === ";" && indent > 0) {      result += ";\n" + "  ".repeat(indent);      i++;      while (i < len && code[i] === " ") i++;    } else if (ch === "|" && i > 0 && code[i - 1] === " " && i + 1 < len && code[i + 1] === " ") {      // Union operator ` | ` — break onto new line      result += "\n" + "  ".repeat(indent) + "| ";      i += 2; // skip the operator and trailing space    } else {      result += ch;      i++;    }  }   return result;}; // ---------------------------------------------------------------------------// Copy icons// --------------------------------------------------------------------------- const CopyIcon = () => (  <svg viewBox="0 0 16 16" className="size-3">    <rect      x="5"      y="5"      width="8"      height="8"      rx="1"      fill="none"      stroke="currentColor"      strokeWidth="1.2"    />    <path d="M3 11V3h8" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />  </svg>); const CheckIcon = () => (  <svg viewBox="0 0 16 16" className="size-3">    <path      d="M3 8l3 3 7-7"      fill="none"      stroke="currentColor"      strokeWidth="1.4"      strokeLinecap="round"      strokeLinejoin="round"    />  </svg>); // ---------------------------------------------------------------------------// Shiki tokenization hook — non-blocking// --------------------------------------------------------------------------- function useTokens(code: string, theme?: ShikiThemeProp): ThemedToken[][] {  const highlighter = getHighlighter();  // Dual-theme light-dark() colors (token.htmlStyle): correct in both color  // schemes from the first frame — no JS dark-mode probe to catch up to.  const result = highlighter.codeToTokens(code, {    lang: "typescript",    ...dualThemeOptions(theme),  });  return result.tokens;} /** A dual-theme token's inline style (light-dark color + per-theme CSS vars). */const tokenStyle = (token: Pick<ThemedToken, "color" | "htmlStyle">): CSSProperties | undefined =>  (token.htmlStyle as CSSProperties | undefined) ??  (token.color ? { color: token.color } : undefined); // ---------------------------------------------------------------------------// Inline-expand logic//// When a user clicks a ref name like `NonEmptyTrimmedString`, we replace// that name with the resolved body inline. So `firstName: NonEmptyTrimmedString`// becomes `firstName: string`.//// We rebuild the full code string with expansions applied, then re-tokenize.// --------------------------------------------------------------------------- /** * Given a code string, a set of ref names to expand, and their definitions, * produce a new code string with each expanded ref replaced by its body. * Applies recursively — if an expanded body itself contains expanded refs, * those get replaced too. Tracks ancestors to prevent infinite loops. */const applyExpansions = (  code: string,  expanded: ReadonlySet<string>,  definitions: ReadonlyMap<string, string>,  ancestors: ReadonlySet<string>,): string => {  if (expanded.size === 0) return code;   let result = "";  let i = 0;   // Sort expanded names longest-first to match greedily  const sortedNames = [...expanded]    .filter((n) => !ancestors.has(n))    .sort((a, b) => b.length - a.length);   while (i < code.length) {    let matched = false;     for (const name of sortedNames) {      if (code.startsWith(name, i)) {        const body = definitions.get(name);        if (body) {          // Recursively expand the body, adding this name to ancestors          const childAncestors = new Set(ancestors);          childAncestors.add(name);          result += applyExpansions(body, expanded, definitions, childAncestors);          i += name.length;          matched = true;          break;        }      }    }     if (!matched) {      result += code[i];      i++;    }  }   return result;}; // ---------------------------------------------------------------------------// Split tokens to find ref names that can be clicked// --------------------------------------------------------------------------- type RenderToken =  | { kind: "text"; content: string; style?: CSSProperties }  | { kind: "ref"; name: string; style?: CSSProperties }; const splitToken = (token: ThemedToken, clickableNames: ReadonlySet<string>): RenderToken[] => {  const style = tokenStyle(token);  if (clickableNames.size === 0) {    return [{ kind: "text", content: token.content, style }];  }   const text = token.content;  const results: RenderToken[] = [];  let remaining = text;   while (remaining.length > 0) {    let earliest = -1;    let matchedName = "";    for (const name of clickableNames) {      const idx = remaining.indexOf(name);      if (        idx !== -1 &&        (earliest === -1 ||          idx < earliest ||          (idx === earliest && name.length > matchedName.length))      ) {        earliest = idx;        matchedName = name;      }    }     if (earliest === -1) {      results.push({ kind: "text", content: remaining, style });      break;    }     if (earliest > 0) {      results.push({ kind: "text", content: remaining.slice(0, earliest), style });    }    results.push({ kind: "ref", name: matchedName, style });    remaining = remaining.slice(earliest + matchedName.length);  }   return results;}; // ---------------------------------------------------------------------------// HighlightedCode — renders tokenized code with clickable unexpanded refs// --------------------------------------------------------------------------- function HighlightedCode(props: {  tokens: ThemedToken[][];  /** Ref names that are NOT yet expanded and can be clicked */  clickableNames: ReadonlySet<string>;  onToggle: (name: string) => void;  expanded: ReadonlySet<string>;}) {  const { tokens, clickableNames, onToggle, expanded } = props;   return (    <>      {tokens.map((line, li) => (        <span key={li}>          {li > 0 && "\n"}          {line.map((token, ti) => {            const parts = splitToken(token, clickableNames);            return parts.map((part, pi) => {              if (part.kind === "text") {                return (                  <span key={`${ti}-${pi}`} style={part.style}>                    {part.content}                  </span>                );              }               const isExpanded = expanded.has(part.name);               return (                <span                  key={`${ti}-${pi}`}                  role="button"                  tabIndex={0}                  onClick={(e) => {                    e.stopPropagation();                    onToggle(part.name);                  }}                  onKeyDown={(e) => {                    if (e.key === "Enter" || e.key === " ") {                      e.preventDefault();                      onToggle(part.name);                    }                  }}                  className={cn(                    "cursor-pointer underline underline-offset-2 hover:opacity-80",                    isExpanded ? "decoration-current/50" : "decoration-current/30",                  )}                  style={part.style}                  title={isExpanded ? `Collapse ${part.name}` : `Expand ${part.name}`}                >                  {part.name}                </span>              );            });          })}        </span>      ))}    </>  );} // ---------------------------------------------------------------------------// ExpandableCodeBlock — main export// --------------------------------------------------------------------------- export function ExpandableCodeBlock(props: {  code: string;  definitions?: readonly Definition[];  className?: string;  theme?: ShikiThemeProp;}) {  const { code, definitions = [], className, theme } = props;  // Auto-expand trivial aliases (primitives, simple unions, string literals)  const trivialNames = useMemo(() => {    const trivial = new Set<string>();    const trivialPattern =      /^(?:string|number|boolean|null|undefined|void|never|unknown|any|true|false|(?:"[^"]*"(?:\s*\|\s*"[^"]*")*))$/;    for (const d of definitions) {      const body = d.code.trim();      if (trivialPattern.test(body)) {        trivial.add(d.name);      }    }    return trivial;  }, [definitions]);   const [expanded, setExpanded] = useState<Set<string>>(() => new Set());  const [copied, setCopied] = useState(false);   const definitionMap = useMemo(    () => new Map(definitions.map((d) => [d.name, d.code])),    [definitions],  );   const definitionNames = useMemo(() => new Set(definitions.map((d) => d.name)), [definitions]);   // Names that can be clicked — exclude trivial aliases (already inlined)  const clickableNames = useMemo(() => {    const names = new Set(definitionNames);    for (const name of trivialNames) names.delete(name);    return names;  }, [definitionNames, trivialNames]);   const emptyAncestors = useMemo(() => new Set<string>(), []);   // Merge user-expanded + trivial auto-expanded  const allExpanded = useMemo(() => {    const merged = new Set(expanded);    for (const name of trivialNames) merged.add(name);    return merged;  }, [expanded, trivialNames]);   // Build the display code: start with raw code, apply expansions, then format  const displayCode = useMemo(() => {    const withExpansions = applyExpansions(code, allExpanded, definitionMap, emptyAncestors);    return formatTypeScript(withExpansions);  }, [code, allExpanded, definitionMap, emptyAncestors]);   const tokens = useTokens(displayCode, theme);   const handleToggle = useCallback((name: string) => {    setExpanded((prev) => {      const next = new Set(prev);      if (next.has(name)) {        next.delete(name);      } else {        next.add(name);      }      return next;    });  }, []);   const handleCopy = useCallback(() => {    void copyToClipboard(displayCode).then((ok) => {      if (!ok) {        toast.error("Failed to copy to clipboard");        return;      }      setCopied(true);      setTimeout(() => setCopied(false), 1500);    });  }, [displayCode]);   return (    <div className={cn("rounded-lg border border-border/40 bg-card/60 overflow-hidden", className)}>      <div className="group relative">        <Button          variant="ghost"          size="icon-xs"          onClick={handleCopy}          className="absolute right-2 top-2 z-10 rounded-md border border-border bg-card/90 p-1.5 text-muted-foreground opacity-0 backdrop-blur-sm hover:text-foreground group-hover:opacity-100 transition-opacity"          title="Copy to clipboard"        >          {copied ? <CheckIcon /> : <CopyIcon />}        </Button>         <pre className="overflow-auto p-3 font-mono text-xs leading-6 !bg-transparent">          <code>            <HighlightedCode              tokens={tokens}              clickableNames={clickableNames}              onToggle={handleToggle}              expanded={allExpanded}            />          </code>        </pre>      </div>    </div>  );}