import { Fragment, isValidElement } from 'react';
import type { ReactElement, ReactNode } from 'react';

import * as iconModule from '@/icons';

/**
 * Turns what the showcase is rendering back into the code that would render it.
 *
 * The registry stores components, not source: `Entry.render` and
 * `Composition.render` return an element tree and the JSX that produced them is
 * erased at build time. So the snippet is derived from the tree itself — the
 * same rule the icons page follows for SVG geometry. Nothing is authored twice
 * and a snippet cannot drift from what is on screen.
 *
 * The load-bearing part is `exportIndex`. No kit component sets `displayName`,
 * and a production `showcase:build` mangles `fn.name`, so a component's own
 * identity tells you nothing about what to call it. Instead every component
 * module is indexed by the *value* it exports, which yields both the exported
 * name and the published subpath — meaning `<Button>` prints as `Button` and
 * brings `import { Button } from '<pkg>/button';` with it, and folded exports
 * (`DateRangePicker` → `date-picker`, `ProgressCircle` → `progress`) land on
 * the right subpath without a lookup table to maintain.
 */

/* Re-exported so the existing call sites keep working; it lives in its own
   module because reading it must not drag this file's eager globs along. */
export { PACKAGE } from './package-name';
import { PACKAGE } from './package-name';

interface ExportRef {
  /** Exported binding name — what the JSX tag says. */
  name: string;
  /** Subpath under the package: `button`, `date-picker`, `icons`. */
  subpath: string;
}

const exportIndex = new Map<unknown, ExportRef>();
/** The same refs by name, for the identifier scan over inline handlers. */
const byName = new Map<string, ExportRef>();

function indexModule(subpath: string, mod: Record<string, unknown>) {
  for (const [name, value] of Object.entries(mod)) {
    /* Components and the odd helper (`buttonVariants`) both land here; a helper
       is simply never reached as an element type. Anything else — a string
       constant, a number — cannot be a tag and is skipped. */
    const indexable =
      typeof value === 'function' || (typeof value === 'object' && value !== null);
    if (!indexable) continue;
    /* First module wins, so a re-export never renames a component. Modules are
       walked in sorted path order, which makes that deterministic. */
    if (!exportIndex.has(value)) exportIndex.set(value, { name, subpath });
    if (!byName.has(name)) byName.set(name, { name, subpath });
  }
}

/* Eager on purpose: the registry already imports every component module and
   `pages/icons.tsx` already imports the whole icon barrel, so this adds no
   bytes to the bundle — it only inverts what is there. */
const componentModules = import.meta.glob<Record<string, unknown>>(
  /* Through the `@` alias rather than a counted `../` chain: Vite resolves
     `resolve.alias` inside a glob pattern, and a pattern that misses resolves
     to an empty object rather than failing — every snippet would then fall back
     to a mangled `fn.name` with nothing in the build to catch it. */
  '@/components/*/index.ts',
  { eager: true }
);

for (const path of Object.keys(componentModules).sort()) {
  const subpath = /\/components\/([^/]+)\//.exec(path)?.[1];
  const mod = componentModules[path];
  if (subpath && mod) indexModule(subpath, mod);
}

indexModule('icons', iconModule as unknown as Record<string, unknown>);

/* ------------------------------------------------------------------ */
/* Printing                                                            */
/* ------------------------------------------------------------------ */

const INDENT = '  ';

/** Collapse a multi-line value so it can sit inside a prop or a text child. */
const oneLine = (source: string) => source.replace(/\s*\n\s*/g, ' ').trim();

function tagOf(type: unknown): string {
  if (typeof type === 'string') return type;
  const ref = exportIndex.get(type);
  if (ref) return ref.name;
  const named = type as { displayName?: string; name?: string };
  return named.displayName || named.name || 'Unknown';
}

/* The bookkeeping the JSX dev runtime appends to every call: `, void 0, false,
   { fileName, lineNumber, columnNumber }, this`. Pure noise in a snippet. */
const JSX_DEV_TAIL = /,\s*void 0,\s*(?:true|false),\s*\{[^{}]*\},\s*this(?=\s*\))/g;

/**
 * An inline handler is printed from its own source.
 *
 * Under `pnpm showcase` that is what the registry wrote, minus the compiler's
 * bookkeeping. Two things it cannot give you: after a production
 * `showcase:build` the identifiers inside the body are mangled (the tag names
 * are not — they come from `exportIndex`, not from `fn.name`), and a function
 * that *returns* JSX shows the compiled `_jsx(...)` call, because the source
 * it was written in no longer exists at runtime. Both are read-and-adapt
 * cases; every other snippet on the page pastes as it stands.
 */
const functionSource = (value: (...args: never[]) => unknown) =>
  oneLine(value.toString())
    .replace(/\/\* @__PURE__ \*\/\s*/g, '')
    .replace(JSX_DEV_TAIL, '');

/** `{ key: 1 }` when the key is a plain identifier, `{ 'data-x': 1 }` otherwise. */
const objectKey = (key: string) => (/^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key));

/**
 * A prop value as JavaScript rather than as JSON.
 *
 * A `DataTable` is handed columns and rows, and `JSON.stringify` would print
 * them as one unreadable line — and would silently drop a column's `render`
 * function, which is the part you most want to see. So objects and arrays are
 * walked, indented against the tag they belong to, and their functions and
 * elements printed the same way a prop's would be.
 */
function printValue(value: unknown, indent: string): string {
  if (value === null) return 'null';
  if (typeof value === 'string') return JSON.stringify(value);
  if (typeof value === 'number' || typeof value === 'bigint' || typeof value === 'boolean') {
    return String(value);
  }
  if (typeof value === 'function') return functionSource(value as (...args: never[]) => unknown);
  if (isValidElement(value)) return oneLine(printNode(value, ''));

  const inner = indent + INDENT;

  if (Array.isArray(value)) {
    if (value.length === 0) return '[]';
    const items = value.map((item) => `${inner}${printValue(item, inner)}`).join(',\n');
    return `[\n${items},\n${indent}]`;
  }

  if (typeof value === 'object') {
    const entries = Object.entries(value as Record<string, unknown>).filter(
      ([, v]) => v !== undefined
    );
    if (entries.length === 0) return '{}';
    const body = entries
      .map(([key, v]) => `${inner}${objectKey(key)}: ${printValue(v, inner)}`)
      .join(',\n');
    return `{\n${body},\n${indent}}`;
  }

  return String(value);
}

function formatProp(key: string, value: unknown, indent: string): string {
  if (value === undefined || value === null || value === false) return '';
  /* `key` never reaches props; `ref` does in React 19 and is noise in a snippet. */
  if (key === 'ref' || key === 'key') return '';
  if (value === true) return ` ${key}`;
  /* A string prop is the one value that goes in quotes rather than in braces. */
  if (typeof value === 'string') {
    return value.includes('"') ? ` ${key}={${JSON.stringify(value)}}` : ` ${key}="${value}"`;
  }
  return ` ${key}={${printValue(value, indent)}}`;
}

/** Text that would be read as markup has to travel as an expression. */
function printText(text: string, indent: string): string {
  if (!text.trim()) return '';
  return /[{}<>]/.test(text) ? `${indent}{${JSON.stringify(text)}}` : `${indent}${text.trim()}`;
}

function printChildren(children: ReactNode, indent: string): string {
  if (children === undefined || children === null || typeof children === 'boolean') return '';
  if (Array.isArray(children)) {
    return children
      .map((child) => printChildren(child as ReactNode, indent))
      .filter(Boolean)
      .join('\n');
  }
  if (typeof children === 'string' || typeof children === 'number') {
    return printText(String(children), indent);
  }
  return printNode(children, indent);
}

function printNode(node: ReactNode, indent: string): string {
  if (node === undefined || node === null || typeof node === 'boolean') return '';
  if (typeof node === 'string' || typeof node === 'number') return printText(String(node), indent);
  if (Array.isArray(node)) return printChildren(node, indent);
  if (!isValidElement(node)) return '';

  const element = node as ReactElement<Record<string, unknown>>;
  const { children, ...rest } = element.props;

  /* A fragment has no tag of its own — a `.map()` in a composition prints as
     the siblings it produced, which is what you would paste. */
  if (element.type === Fragment) return printChildren(children as ReactNode, indent);

  const tag = tagOf(element.type);
  const attrs = Object.entries(rest)
    .map(([key, value]) => formatProp(key, value, indent))
    .join('');
  const inner = printChildren(children as ReactNode, indent + INDENT);

  if (!inner) return `${indent}<${tag}${attrs} />`;
  return `${indent}<${tag}${attrs}>\n${inner}\n${indent}</${tag}>`;
}

/** The JSX for one node, without its imports. */
export function jsxOf(node: ReactNode): string {
  return printNode(node, '');
}

/* ------------------------------------------------------------------ */
/* Imports                                                             */
/* ------------------------------------------------------------------ */

type ImportMap = Map<string, Set<string>>;

function add(imports: ImportMap, ref: ExportRef) {
  const names = imports.get(ref.subpath) ?? new Set<string>();
  names.add(ref.name);
  imports.set(ref.subpath, names);
}

/**
 * `toast(...)` inside an `onClick` is an import too, but it is a call rather
 * than a tag, so the tree walk cannot see it. Scan the handler's source for
 * identifiers the kit exports instead. A false positive would have to be a
 * local variable named exactly like a kit export, in which case the import it
 * adds is the one you wanted anyway.
 */
function collectFromSource(source: string, imports: ImportMap) {
  for (const identifier of source.match(/\b[A-Za-z_$][\w$]*\b/g) ?? []) {
    const ref = byName.get(identifier);
    if (ref) add(imports, ref);
  }
}

/** A prop value can hide a component anywhere: in a handler, an array, a config object. */
function collectFromValue(value: unknown, imports: ImportMap) {
  if (typeof value === 'function') {
    collectFromSource(functionSource(value as (...args: never[]) => unknown), imports);
    return;
  }
  if (isValidElement(value)) {
    collect(value, imports);
    return;
  }
  if (Array.isArray(value)) {
    for (const item of value) collectFromValue(item, imports);
    return;
  }
  if (typeof value === 'object' && value !== null) {
    for (const item of Object.values(value)) collectFromValue(item, imports);
  }
}

function collect(node: ReactNode, imports: ImportMap) {
  if (Array.isArray(node)) {
    for (const child of node) collect(child as ReactNode, imports);
    return;
  }
  if (!isValidElement(node)) return;

  const element = node as ReactElement<Record<string, unknown>>;
  const ref = exportIndex.get(element.type);
  if (ref) add(imports, ref);

  for (const [key, value] of Object.entries(element.props)) {
    if (key !== 'children') collectFromValue(value, imports);
  }

  collect(element.props.children as ReactNode, imports);
}

/** One line per subpath, components first and icons last. */
function printImports(imports: ImportMap): string {
  return [...imports.entries()]
    .sort(([a], [b]) => {
      if (a === 'icons') return 1;
      if (b === 'icons') return -1;
      return a.localeCompare(b);
    })
    .map(([subpath, names]) => {
      const list = [...names].sort().join(', ');
      return `import { ${list} } from '${PACKAGE}/${subpath}';`;
    })
    .join('\n');
}

/* ------------------------------------------------------------------ */
/* Snippets                                                            */
/* ------------------------------------------------------------------ */

/** Import block plus JSX — the paste-and-it-compiles form. */
export function snippetOf(node: ReactNode): string {
  return snippetOfMany([node]);
}

/**
 * Several nodes under one deduplicated import block, for "copy every variant
 * in this grid". Thirty-five buttons want one import line, not thirty-five.
 */
export function snippetOfMany(nodes: readonly ReactNode[]): string {
  const imports: ImportMap = new Map();
  for (const node of nodes) collect(node, imports);

  const body = nodes
    .map((node) => jsxOf(node))
    .filter(Boolean)
    .join('\n');

  const head = printImports(imports);
  return head ? `${head}\n\n${body}` : body;
}