/**
 * Pixel coordinates of a character index inside a `<textarea>`, relative to the
 * textarea's own border box (i.e. before subtracting `scrollTop`/`scrollLeft`).
 *
 * Textareas expose `selectionStart`/`selectionEnd` but no geometry for them, so
 * we use the well-known "mirror div" technique: build an off-screen `<div>` that
 * replicates every layout-affecting style of the textarea, fill it with the text
 * up to `position`, and read the offset of a marker span placed at that index.
 *
 * Framework-agnostic and DOM-only. In environments without layout (e.g. jsdom)
 * the offsets resolve to `0` rather than throwing, so callers stay safe.
 */
export interface CaretCoordinates {
  /** Distance from the textarea's top border to the top of the caret line. */
  top: number;
  /** Distance from the textarea's left border to the caret. */
  left: number;
  /** Line height at the caret (useful to offset below/above the line). */
  height: number;
}

/** Layout-affecting properties the mirror div must copy from the textarea. */
const MIRRORED_PROPERTIES = [
  'boxSizing',
  'width',
  'height',
  'overflowX',
  'overflowY',
  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft',
  'borderTopWidth',
  'borderRightWidth',
  'borderBottomWidth',
  'borderLeftWidth',
  'fontStyle',
  'fontVariant',
  'fontWeight',
  'fontStretch',
  'fontSize',
  'fontSizeAdjust',
  'lineHeight',
  'fontFamily',
  'textAlign',
  'textTransform',
  'textIndent',
  'textDecoration',
  'letterSpacing',
  'wordSpacing',
  'tabSize',
] as const;

function toPx(value: string | null): number {
  const n = parseFloat(value ?? '');
  return Number.isFinite(n) ? n : 0;
}

/**
 * Compute the {@link CaretCoordinates} of `position` within `textarea`.
 */
export function getCaretCoordinates(
  textarea: HTMLTextAreaElement,
  position: number,
): CaretCoordinates {
  const doc = textarea.ownerDocument;
  const win = doc.defaultView ?? window;
  const style = win.getComputedStyle(textarea);

  const div = doc.createElement('div');
  div.setAttribute('aria-hidden', 'true');
  const ds = div.style;
  ds.position = 'absolute';
  ds.top = '0';
  ds.left = '-9999px';
  ds.visibility = 'hidden';
  ds.whiteSpace = 'pre-wrap';
  ds.wordWrap = 'break-word';
  ds.overflow = 'hidden';

  for (const prop of MIRRORED_PROPERTIES) {
    // Copy each mirrored style verbatim; cast because index signatures differ.
    (ds as unknown as Record<string, string>)[prop] = style[prop as keyof CSSStyleDeclaration] as string;
  }
  // Pin the width to the textarea's content box so wrapping matches exactly.
  ds.width = `${textarea.clientWidth}px`;

  div.textContent = textarea.value.slice(0, position);

  const span = doc.createElement('span');
  // Trailing content (or a fallback glyph) gives the span a measurable box.
  span.textContent = textarea.value.slice(position) || '.';
  div.appendChild(span);

  doc.body.appendChild(div);
  const coords: CaretCoordinates = {
    top: span.offsetTop + toPx(style.borderTopWidth),
    left: span.offsetLeft + toPx(style.borderLeftWidth),
    height: toPx(style.lineHeight) || span.offsetHeight,
  };
  doc.body.removeChild(div);

  return coords;
}