import { renderMarkdownTextRuns } from "@/components/slide-editor/text/markdown-text";
import type { Font, TextRun } from "@/components/slide-editor/types";
import { effectiveLineHeight } from "@/components/slide-editor/text/text-line-height";
import { textRunsContent } from "@/components/slide-editor/text/text-runs";
import type { TemplateV2TextEditStyle } from "@/components/slide-editor/text/template-v2-text-editing";

type UnknownRecord = Record<string, any>;

export type TemplateV2RawTextElement = UnknownRecord;
export type RenderTextFont = Omit<
  TemplateV2TextEditStyle,
  "horizontal" | "vertical"
>;
export type RenderTextRun = {
  text: string;
  font: RenderTextFont;
};
export type LaidToken = {
  text: string;
  font: RenderTextFont;
  x: number;
  y: number;
  width: number;
  height: number;
};
export type TemplateV2TextBox = {
  x: number;
  y: number;
  width: number;
  height: number;
};

const TEXT_AVERAGE_CHAR_EM = 0.5;
const DEFAULT_FONT: RenderTextFont = {
  family: "Arial",
  size: 18,
  color: "#111827",
  bold: false,
  italic: false,
  underline: false,
  lineHeight: 1.15,
  letterSpacing: 0,
  opacity: 1,
};
const TEXT_RENDER_WRAP = "word";
const MIN_TRANSFORM_FONT_SIZE = 1;
const MAX_TRANSFORM_FONT_SIZE = 512;
const TRANSFORM_FONT_SCALE_EPSILON = 0.001;

const richMeasureCtx: { ctx: CanvasRenderingContext2D | null } = { ctx: null };
let renderTextMeasureCanvas: HTMLCanvasElement | null = null;

function withoutFontWrap(font: UnknownRecord): UnknownRecord {
  return Object.fromEntries(
    Object.entries(font).filter(([key]) => key !== "wrap"),
  );
}

export function displayText(text: string) {
  return text
    .replace(/\*\*(.*?)\*\*/g, "$1")
    .replace(/__(.*?)__/g, "$1")
    .replace(/\*(.*?)\*/g, "$1")
    .replace(/_(.*?)_/g, "$1");
}

export function rawFont(element: TemplateV2RawTextElement) {
  const font = asRecord(element.font) ?? {};
  return fontFromRecord(font, DEFAULT_FONT);
}

export function fontFromRecord(
  font: UnknownRecord | null,
  fallback: RenderTextFont,
): RenderTextFont {
  return {
    family: readString(font?.family) ?? fallback.family,
    size: readNumber(font?.size) ?? fallback.size,
    color: readString(font?.color) ?? fallback.color,
    bold: readBoolean(font?.bold) ?? fallback.bold,
    italic: readBoolean(font?.italic) ?? fallback.italic,
    underline:
      readBoolean(font?.underline) ??
      (readString(font?.text_decoration) === "underline" ||
        readString(font?.textDecoration) === "underline"
        ? true
        : fallback.underline),
    lineHeight:
      readNumber(font?.line_height) ??
      readNumber(font?.lineHeight) ??
      fallback.lineHeight,
    letterSpacing:
      readNumber(font?.letter_spacing) ??
      readNumber(font?.letterSpacing) ??
      fallback.letterSpacing,
    opacity: readNumber(font?.opacity) ?? fallback.opacity,
  };
}

export function fontToSource(font: RenderTextFont): Font {
  return {
    family: font.family,
    size: font.size,
    color: font.color,
    bold: font.bold,
    italic: font.italic,
    underline: font.underline,
    line_height: font.lineHeight,
    letter_spacing: font.letterSpacing,
    opacity: font.opacity,
  };
}

export function rawTextStyle(
  element: TemplateV2RawTextElement,
): TemplateV2TextEditStyle {
  const font = rawFont(element);
  return {
    ...font,
    color: withHash(font.color) ?? "#111827",
    horizontal: readHorizontalAlignment(
      asRecord(element.alignment)?.horizontal,
    ),
    vertical: readVerticalAlignment(asRecord(element.alignment)?.vertical),
  };
}

export function applyTextStyle(
  element: TemplateV2RawTextElement,
  style: TemplateV2TextEditStyle,
): TemplateV2RawTextElement {
  const sourceFont = asRecord(element.font) ?? {};
  const nextFont = {
    ...withoutFontWrap(sourceFont),
    family: style.family,
    size: style.size,
    color: withHash(style.color) ?? "#111827",
    bold: style.bold,
    italic: style.italic,
    underline: style.underline,
    line_height: style.lineHeight,
    letter_spacing: style.letterSpacing,
    opacity: style.opacity,
  };
  const runs = readArray(element.runs);
  return {
    ...element,
    font: nextFont,
    alignment: {
      ...(asRecord(element.alignment) ?? {}),
      horizontal: style.horizontal,
      vertical: style.vertical,
    },
    ...(runs.length > 0
      ? {
        runs: runs.map((run) => {
          const record = asRecord(run) ?? {};
          return {
            ...record,
            font: {
              ...(asRecord(record.font) ?? {}),
              ...nextFont,
            },
          };
        }),
      }
      : {}),
  };
}

export function normalizeRawTextMarkdownElement(
  element: TemplateV2RawTextElement,
): {
  element: TemplateV2RawTextElement;
  runs: TextRun[];
  changed: boolean;
} {
  const originalSourceRuns = rawSourceTextRuns(element);
  const rawText = rawStoredTextContent(element);
  const hasSourceRuns = rawTextHasRuns(element);
  const reconciledSourceRuns = reconcileTextRunsWithStoredText(
    originalSourceRuns,
    rawText,
  );
  const sourceRuns = normalizeStyledSourceRunBoundaries(reconciledSourceRuns);
  const renderedRuns = renderMarkdownTextRuns(sourceRuns);
  const renderedText = textRunsContent(renderedRuns);
  const sourceHasMarkdown = sourceRuns.some((run) =>
    containsMarkdownSyntax(run.text),
  );
  const runsChanged = !sameTextRuns(originalSourceRuns, sourceRuns);
  const renderedRunsChanged = !sameTextRuns(sourceRuns, renderedRuns);
  const changed =
    runsChanged ||
    renderedRunsChanged ||
    sourceHasMarkdown ||
    ((!hasSourceRuns || containsMarkdownSyntax(rawText)) &&
      rawText !== renderedText);

  return {
    element: changed ? setRawTextRunsContent(element, renderedRuns) : element,
    runs: renderedRuns,
    changed,
  };
}

export function rawTextContent(element: TemplateV2RawTextElement) {
  const runs = readArray(element.runs);
  if (runs.length > 0) {
    const content = runs
      .map((run) => readString(asRecord(run)?.text) ?? "")
      .join("");
    if (content) return content;
  }
  return rawStoredTextContent(element);
}

export function rawStoredTextContent(element: TemplateV2RawTextElement) {
  const text = readString(element.text);
  if (text != null) return text;
  return "";
}

export function rawSourceTextRuns(
  element: TemplateV2RawTextElement,
): TextRun[] {
  const fallbackFont = fontToSource(rawFont(element));
  const runs = readArray(element.runs)
    .map((run) => {
      const record = asRecord(run);
      if (!record) return null;
      const text = readString(record.text) ?? "";
      if (!text) return null;
      return {
        text,
        font: fontToSource(
          fontFromRecord(asRecord(record.font), rawFont(element)),
        ),
      } satisfies TextRun;
    })
    .filter(Boolean) as TextRun[];

  return runs.length > 0
    ? runs
    : [{ text: rawTextContent(element) || " ", font: fallbackFont }];
}

export function rawTextRunsForEditor(
  element: TemplateV2RawTextElement,
): TextRun[] {
  return normalizeRawTextMarkdownElement(element).runs;
}

export function rawTextHasRuns(element: TemplateV2RawTextElement) {
  return readArray(element.runs).some((run) => {
    const record = asRecord(run);
    return Boolean(readString(record?.text));
  });
}

export function setRawTextContent(
  element: TemplateV2RawTextElement,
  text: string,
  style?: TemplateV2TextEditStyle,
): TemplateV2RawTextElement {
  const styled = style ? applyTextStyle(element, style) : element;
  const sourceRuns = readArray(styled.runs);
  const firstRun = asRecord(sourceRuns[0]) ?? {};
  const runs = stripPlainTextListMarkersFromRuns(
    renderMarkdownTextRuns([{ text, font: fontToSource(rawFont(styled)) }]),
  ).map((run) => ({
    ...firstRun,
    text: run.text,
    font: {
      ...(asRecord(firstRun.font) ?? {}),
      ...(asRecord(run.font) ?? {}),
    },
  }));
  return {
    ...styled,
    text: textRunsContent(runs),
    runs,
  };
}

export function setRawTextRunsContent(
  element: TemplateV2RawTextElement,
  runs: TextRun[],
): TemplateV2RawTextElement {
  const storageRuns = stripPlainTextListMarkersFromRuns(runs);
  const sourceRuns = readArray(element.runs);
  const nextRuns = (
    storageRuns.length > 0 ? storageRuns : [{ text: " " }]
  ).map(
    (run, index) => {
      const sourceRun = asRecord(sourceRuns[index]) ?? {};
      return {
        ...sourceRun,
        text: run.text,
        font: rawInlineTextFontRecord(run.font, sourceRun.font),
      };
    },
  );
  return {
    ...element,
    text: textRunsContent(nextRuns),
    runs: nextRuns,
  };
}

export function rawInlineTextFontRecord(value: unknown, fallback: unknown) {
  const font = asRecord(value);
  if (!font) return fallback;
  const fallbackFont = asRecord(fallback) ?? {};
  return {
    ...withoutFontWrap(fallbackFont),
    ...withoutFontWrap(font),
    line_height: font.line_height ?? font.lineHeight,
    letter_spacing: font.letter_spacing ?? font.letterSpacing,
    opacity: font.opacity,
  };
}

export function rawTextListContent(element: TemplateV2RawTextElement) {
  const items = readArray(element.items);
  if (items.length === 0) return "";
  return items.map(rawTextListItemText).join("\n");
}

export function rawTextListRunsForEditor(
  element: TemplateV2RawTextElement,
): TextRun[] {
  const baseFont = rawFont(element);
  const fallbackFont = fontToSource(baseFont);
  const items = readArray(element.items);
  const runs: TextRun[] = [];

  items.forEach((item, index) => {
    const itemRuns = renderMarkdownTextRuns(
      normalizeStyledSourceRunBoundaries(
        rawTextListItemSourceRuns(item, baseFont),
      ),
    );
    const itemFont = itemRuns[0]?.font ?? fallbackFont;
    const prefix = textListMarkerPrefix(element.marker, index);

    if (index > 0) appendTextRun(runs, "\n", itemFont);
    if (prefix) appendTextRun(runs, prefix, itemFont);
    itemRuns.forEach((run) =>
      appendTextRun(runs, run.text, run.font ?? itemFont),
    );
  });

  return runs.length > 0 ? runs : [{ text: " ", font: fallbackFont }];
}

export function rawTextListRenderTextRuns(
  element: TemplateV2RawTextElement,
): RenderTextRun[] {
  const baseFont = rawFont(element);
  return rawTextListRunsForEditor(element)
    .filter((run) => run.text)
    .map((run) => ({
      text: run.text,
      font: fontFromRecord(asRecord(run.font), baseFont),
    }));
}

export function rawTextListItemText(item: unknown) {
  if (typeof item === "string") return item;
  if (Array.isArray(item)) {
    return item
      .map((run) => readString(asRecord(run)?.text) ?? "")
      .join("");
  }
  const record = asRecord(item);
  if (!record) return "";
  const directText = readString(record.text);
  if (directText != null) return directText;
  return readArray(record.runs)
    .map((run) => readString(asRecord(run)?.text) ?? "")
    .join("");
}

export function rawTextListItemWithText(
  source: unknown,
  text: string,
): unknown {
  if (Array.isArray(source)) {
    const firstRun = asRecord(source[0]) ?? {};
    return [{ ...firstRun, text }];
  }
  if (typeof source === "string") return text;
  const record = asRecord(source);
  if (!record) return { type: "text", text };
  const runs = readArray(record.runs);
  if (runs.length > 0 || Object.hasOwn(record, "runs")) {
    const firstRun = asRecord(runs[0]) ?? {};
    return { ...record, runs: text ? [{ ...firstRun, text }] : [] };
  }
  return { ...record, type: record.type ?? "text", text };
}

export function setRawTextListContent(
  element: TemplateV2RawTextElement,
  draft: string,
): TemplateV2RawTextElement {
  const sourceItems = readArray(element.items);
  const texts = draft
    .split(/\r?\n/)
    .map((item) => item.replace(/^\s*(?:[•*-]|\d+\.)\s?/, "").trimEnd())
    .filter((item) => item.trim().length > 0);
  const items = (texts.length > 0 ? texts : [" "]).map((text, index) =>
    rawTextListItemWithText(
      sourceItems[index] ?? sourceItems[sourceItems.length - 1],
      text,
    ),
  );
  return { ...element, items };
}

export function setRawTextListRunsContent(
  element: TemplateV2RawTextElement,
  runs: TextRun[],
): TemplateV2RawTextElement {
  const sourceItems = readArray(element.items);
  const stripMarker = readString(element.marker) !== "none";
  const lines = splitTextRunsOnNewlines(runs)
    .map((line) => (stripMarker ? stripTextListMarkerFromRuns(line) : line))
    .map((line) => line.filter((run) => run.text))
    .filter((line) => textRunsContent(line).trim().length > 0);

  const fallbackItem = sourceItems[sourceItems.length - 1];
  const items = (lines.length > 0 ? lines : [[{ text: " " }]]).map(
    (line, index) =>
      rawTextListItemWithRuns(
        sourceItems[index] ?? fallbackItem,
        line as TextRun[],
      ),
  );

  return { ...element, items };
}

export function rawTableCellText(cell: unknown) {
  if (typeof cell === "string" || typeof cell === "number") {
    return displayText(String(cell));
  }
  const record = asRecord(cell);
  if (!record) return "";
  const runs = readArray(record.runs);
  if (runs.length > 0) {
    return textRunsContent(
      renderMarkdownTextRuns(
        runs.map((run) => ({
          text: readString(asRecord(run)?.text) ?? "",
          font: asRecord(run)?.font as TextRun["font"],
        })),
      ),
    );
  }
  const textRecord = asRecord(record.text);
  return displayText(readString(textRecord?.text) ?? readString(record.text) ?? "");
}

export function rawSvgContent(element: TemplateV2RawTextElement) {
  return readString(element.svg) ?? readString(element.data) ?? "";
}

export function setRawSvgContent(
  element: TemplateV2RawTextElement,
  draft: string,
): TemplateV2RawTextElement {
  return { ...element, svg: draft };
}

export function rawRenderTextRuns(
  element: TemplateV2RawTextElement,
): RenderTextRun[] {
  const baseFont = rawFont(element);
  const runs = normalizeRawTextMarkdownElement(element).runs;

  return runs
    .filter((run) => run.text)
    .map((run) => ({
      text: run.text,
      font: fontFromRecord(asRecord(run.font), baseFont),
    }));
}

export function textVisualLocalBox(
  element: TemplateV2RawTextElement,
  box: TemplateV2TextBox,
  options: {
    content?: string;
    runs?: RenderTextRun[];
  } = {},
): TemplateV2TextBox {
  const font = rawFont(element);
  const renderRuns = options.runs ?? rawRenderTextRuns(element);
  const content =
    options.content ??
    (options.runs ? textRunsContent(options.runs) : rawTextContent(element));
  const displayContent = displayText(content);
  const renderRunsDifferFromElement =
    renderRuns.length > 0 &&
    textRunsHaveMixedStyle([{ text: "", font }, ...renderRuns]);
  const align = readString(asRecord(element.alignment)?.horizontal) ?? "left";
  const verticalAlign =
    readString(asRecord(element.alignment)?.vertical) ?? "top";
  const textLineHeight = effectiveLineHeight({
    text: displayContent,
    width: box.width,
    fontSize: font.size,
    lineHeight: font.lineHeight,
    fallback: 1.15,
    wrap: TEXT_RENDER_WRAP,
  });

  if (renderRunsDifferFromElement) {
    const lines = layoutRenderTextRuns(renderRuns, box.width, TEXT_RENDER_WRAP);
    const lineMetrics = lines.map((line) => ({
      height: lineRenderHeight(line, textLineHeight),
      width: line.reduce((sum, segment) => sum + segment.width, 0),
    }));
    const totalHeight = lineMetrics.reduce(
      (sum, metric) => sum + metric.height,
      0,
    );
    const startY = verticalStartY(verticalAlign, box.height, totalHeight);
    const left = Math.min(
      0,
      ...lineMetrics.map((metric) =>
        lineStartX(align, box.width, metric.width, false),
      ),
    );
    const right = Math.max(
      box.width,
      ...lineMetrics.map((metric) => {
        const startX = lineStartX(
          align,
          box.width,
          metric.width,
          false,
        );
        return startX + metric.width;
      }),
    );
    return {
      x: box.x + left,
      y: box.y + Math.min(0, startY),
      width: Math.max(1, right - left),
      height: Math.max(box.height, totalHeight),
    };
  }

  if (renderRuns.length > 1) {
    const { tokens, contentHeight } = layoutRichText(
      renderRuns,
      box.width,
      font,
      align,
      verticalAlign,
      box.height,
      TEXT_RENDER_WRAP,
    );
    if (tokens.length === 0) return box;
    const left = Math.min(0, ...tokens.map((token) => token.x));
    const top = Math.min(0, ...tokens.map((token) => token.y));
    const right = Math.max(
      box.width,
      ...tokens.map((token) => token.x + token.width),
    );
    const bottom = Math.max(
      box.height,
      contentHeight,
      ...tokens.map((token) => token.y + token.height),
    );
    return {
      x: box.x + left,
      y: box.y + top,
      width: Math.max(1, right - left),
      height: Math.max(1, bottom - top),
    };
  }

  const textNodeRuns =
    renderRuns.length > 0 ? renderRuns : [{ text: displayContent, font }];
  return {
    ...box,
    height: Math.max(
      box.height,
      measureRenderTextRunsHeight(
        textNodeRuns,
        box.width,
        TEXT_RENDER_WRAP,
        textLineHeight,
      ),
    ),
  };
}

function measureRenderTextRunsHeight(
  runs: RenderTextRun[],
  width: number,
  wrap: string | null | undefined,
  fallbackLineHeight: number,
) {
  const lines = layoutRenderTextRuns(runs, width, wrap);
  if (lines.length === 0) return fallbackLineHeight;
  return lines.reduce(
    (sum, line) => sum + lineRenderHeight(line, fallbackLineHeight),
    0,
  );
}

export function textRunsHaveMixedStyle(runs: RenderTextRun[]) {
  const first = runs[0]?.font;
  return runs.some((run) => JSON.stringify(run.font) !== JSON.stringify(first));
}

export function layoutRichText(
  runs: RenderTextRun[],
  maxWidth: number,
  baseFont: RenderTextFont,
  align: string,
  verticalAlign: string,
  boxHeight: number,
  wrap: string | null | undefined,
): { tokens: LaidToken[]; contentHeight: number } {
  type Tok = {
    text: string;
    font: RenderTextFont;
    newline: boolean;
    space: boolean;
    width: number;
  };
  const tokens: Tok[] = [];
  for (const run of runs) {
    const display = displayText(run.text);
    if (!display) continue;
    for (const part of display.split(/(\n|[ \t]+)/)) {
      if (part === "") continue;
      if (part === "\n") {
        tokens.push({
          text: "",
          font: run.font,
          newline: true,
          space: false,
          width: 0,
        });
      } else {
        const space = /^[ \t]+$/.test(part);
        const measuredParts =
          wrap !== "none" && !space
            ? splitOversizedTextSegment(part, run.font, maxWidth, measureRunText)
            : [{ text: part, width: measureRunText(part, run.font) }];

        for (const measuredPart of measuredParts) {
          tokens.push({
            text: measuredPart.text,
            font: run.font,
            newline: false,
            space,
            width: measuredPart.width,
          });
        }
      }
    }
  }

  type Line = { toks: Tok[]; height: number; width: number };
  const lines: Line[] = [];
  let cur: Tok[] = [];
  let curWidth = 0;
  const flush = () => {
    const height = cur.length
      ? Math.max(...cur.map((t) => t.font.size * t.font.lineHeight))
      : baseFont.size * baseFont.lineHeight;
    lines.push({ toks: cur, height, width: curWidth });
    cur = [];
    curWidth = 0;
  };
  for (const tok of tokens) {
    if (tok.newline) {
      flush();
      continue;
    }
    if (tok.space && cur.length === 0) continue;
    if (
      wrap !== "none" &&
      !tok.space &&
      curWidth + tok.width > maxWidth &&
      cur.length > 0
    ) {
      flush();
    }
    cur.push(tok);
    curWidth += tok.width;
  }
  flush();

  const contentHeight = lines.reduce((sum, line) => sum + line.height, 0);
  let y =
    verticalAlign === "middle"
      ? (boxHeight - contentHeight) / 2
      : verticalAlign === "bottom"
        ? boxHeight - contentHeight
        : 0;
  if (y < 0) y = 0;

  const laid: LaidToken[] = [];
  for (const line of lines) {
    let lineWidth = line.width;
    for (let i = line.toks.length - 1; i >= 0 && line.toks[i].space; i--) {
      lineWidth -= line.toks[i].width;
    }
    let x = lineStartX(align, maxWidth, lineWidth, wrap === "none");
    for (const tok of line.toks) {
      if (tok.text) {
        const tokenBoxHeight = tok.font.size * tok.font.lineHeight;
        laid.push({
          text: tok.text,
          font: tok.font,
          x,
          y: y + (line.height - tokenBoxHeight),
          width: tok.width,
          height: tokenBoxHeight,
        });
      }
      x += tok.width;
    }
    y += line.height;
  }
  return { tokens: laid, contentHeight };
}

export function layoutRenderTextRuns(
  runs: RenderTextRun[],
  width: number,
  wrap: string | null | undefined,
) {
  const lines: Array<Array<RenderTextRun & { width: number }>> = [[]];
  let lineWidth = 0;

  const pushLine = () => {
    if (lines[lines.length - 1]?.length === 0) return;
    lines.push([]);
    lineWidth = 0;
  };

  for (const run of runs) {
    const parts = run.text.match(/\n|[^\S\n]+|[^\s]+/g) ?? [run.text];
    for (const part of parts) {
      if (part === "\n") {
        pushLine();
        continue;
      }
      const isWhitespace = part.trim().length === 0;
      const segments =
        wrap !== "none" && !isWhitespace
          ? splitOversizedTextSegment(part, run.font, width, measureRenderText)
          : [{ text: part, width: measureRenderText(part, run.font) }];

      for (const segment of segments) {
        if (
          wrap !== "none" &&
          !isWhitespace &&
          lineWidth > 0 &&
          lineWidth + segment.width > width
        ) {
          pushLine();
        }
        if (lines.length === 0) lines.push([]);
        lines[lines.length - 1].push({
          ...run,
          text: segment.text,
          width: segment.width,
        });
        lineWidth += segment.width;
      }
    }
  }

  return lines.filter((line) => line.length > 0);
}

export function lineRenderHeight(
  line: Array<RenderTextRun & { width: number }>,
  fallbackLineHeight: number,
) {
  return Math.max(
    1,
    ...line.map(
      (segment) =>
        segment.font.size * (segment.font.lineHeight ?? fallbackLineHeight),
    ),
  );
}

function splitOversizedTextSegment(
  text: string,
  font: RenderTextFont,
  maxWidth: number,
  measure: (text: string, font: RenderTextFont) => number,
): Array<{ text: string; width: number }> {
  const fullWidth = measure(text, font);
  if (!text || maxWidth <= 0 || fullWidth <= maxWidth) {
    return [{ text, width: fullWidth }];
  }

  const characters = Array.from(text);
  const segments: Array<{ text: string; width: number }> = [];
  let start = 0;

  while (start < characters.length) {
    let low = start + 1;
    let high = characters.length;
    let bestEnd = low;
    let bestWidth = measure(characters.slice(start, low).join(""), font);

    while (low <= high) {
      const mid = Math.floor((low + high) / 2);
      const candidate = characters.slice(start, mid).join("");
      const candidateWidth = measure(candidate, font);

      if (candidateWidth <= maxWidth || mid === start + 1) {
        bestEnd = mid;
        bestWidth = candidateWidth;
        low = mid + 1;
      } else {
        high = mid - 1;
      }
    }

    segments.push({
      text: characters.slice(start, bestEnd).join(""),
      width: bestWidth,
    });
    start = bestEnd;
  }

  return segments;
}

export function measureNoWrapTextWidth(text: string, font: RenderTextFont) {
  const lines = text.split(/\r?\n/);
  return Math.max(1, ...lines.map((line) => measureRenderText(line, font)));
}

export function measureNoWrapTextHeight(
  text: string,
  font: RenderTextFont,
  lineHeight: number,
) {
  const lineCount = Math.max(1, text.split(/\r?\n/).length);
  return lineCount * font.size * lineHeight;
}

export function lineStartX(
  align: string,
  boxWidth: number,
  lineWidth: number,
  allowOverflow: boolean,
) {
  const x =
    align === "center"
      ? (boxWidth - lineWidth) / 2
      : align === "right"
        ? boxWidth - lineWidth
        : 0;
  return allowOverflow ? x : Math.max(0, x);
}

export function verticalTextStartY(
  align: string,
  boxHeight: number,
  textHeight: number,
  allowOverflow: boolean,
) {
  const y = verticalStartY(align, boxHeight, textHeight);
  return allowOverflow ? y : Math.max(0, y);
}

function verticalStartY(align: string, boxHeight: number, textHeight: number) {
  const y =
    align === "middle"
      ? (boxHeight - textHeight) / 2
      : align === "bottom"
        ? boxHeight - textHeight
        : 0;
  return y;
}

export function rawFontRecordForEditor(value: unknown) {
  const font = asRecord(value);
  if (!font) return value;
  return {
    ...withoutFontWrap(font),
    line_height: font.line_height ?? font.lineHeight,
    letter_spacing: font.letter_spacing ?? font.letterSpacing,
  };
}

export function editorFontRecordToRaw(value: unknown, fallback: unknown) {
  const font = asRecord(value);
  if (!font) return fallback;
  const fallbackFont = asRecord(fallback) ?? {};
  return {
    ...withoutFontWrap(fallbackFont),
    ...withoutFontWrap(font),
    line_height: font.line_height ?? font.lineHeight,
    letter_spacing: font.letter_spacing ?? font.letterSpacing,
  };
}

export function rawFontToSource(value: unknown) {
  const font = asRecord(value) ?? {};
  return stripUndefined({
    ...withoutFontWrap(font),
    line_height: font.line_height ?? font.lineHeight,
    letter_spacing: font.letter_spacing ?? font.letterSpacing,
    opacity: font.opacity,
  });
}

export function fontScaleFromResize(scaleX: number, scaleY: number) {
  const safeX = Number.isFinite(scaleX) && scaleX > 0 ? scaleX : 1;
  const safeY = Number.isFinite(scaleY) && scaleY > 0 ? scaleY : 1;
  return Math.sqrt(safeX * safeY);
}

export function scaleRawTextMetrics(
  element: TemplateV2RawTextElement,
  scale: number,
): TemplateV2RawTextElement {
  if (
    !Number.isFinite(scale) ||
    Math.abs(scale - 1) < TRANSFORM_FONT_SCALE_EPSILON
  ) {
    return element;
  }

  return stripUndefined({
    ...element,
    font: scaleRawFontMetrics(element.font, scale),
    runs: scaleRawTextRunsMetrics(element.runs, scale),
    items: scaleRawTextListItemsMetrics(element.items, scale),
    columns: scaleRawTableCellsMetrics(element.columns, scale),
    rows: scaleRawTableRowsMetrics(element.rows, scale),
  });
}

function scaleRawTextRunsMetrics(value: unknown, scale: number) {
  if (!Array.isArray(value)) return value;
  return value.map((run) => {
    const record = asRecord(run);
    if (!record) return run;
    return stripUndefined({
      ...record,
      font: scaleRawFontMetrics(record.font, scale),
    });
  });
}

function scaleRawTextListItemsMetrics(value: unknown, scale: number) {
  if (!Array.isArray(value)) return value;
  return value.map((item) => {
    if (Array.isArray(item)) return scaleRawTextRunsMetrics(item, scale);
    const record = asRecord(item);
    if (!record) return item;
    return stripUndefined({
      ...record,
      font: scaleRawFontMetrics(record.font, scale),
      runs: scaleRawTextRunsMetrics(record.runs, scale),
    });
  });
}

function scaleRawTableRowsMetrics(value: unknown, scale: number) {
  if (!Array.isArray(value)) return value;
  return value.map((row) =>
    Array.isArray(row) ? scaleRawTableCellsMetrics(row, scale) : row,
  );
}

function scaleRawTableCellsMetrics(value: unknown, scale: number) {
  if (!Array.isArray(value)) return value;
  return value.map((cell) => {
    const record = asRecord(cell);
    if (!record) return cell;
    const textRecord = asRecord(record.text);
    return stripUndefined({
      ...record,
      font: scaleRawFontMetrics(record.font, scale),
      runs: scaleRawTextRunsMetrics(record.runs, scale),
      text: textRecord
        ? stripUndefined({
          ...textRecord,
          font: scaleRawFontMetrics(textRecord.font, scale),
          runs: scaleRawTextRunsMetrics(textRecord.runs, scale),
        })
        : record.text,
    });
  });
}

function scaleRawFontMetrics(value: unknown, scale: number) {
  const font = asRecord(value);
  if (!font) return value;

  const next = { ...font };
  const size = readNumber(font.size);
  if (size != null) {
    next.size = scaleFontSize(size, scale);
  }

  const letterSpacing = readNumber(font.letter_spacing);
  if (letterSpacing != null) {
    next.letter_spacing = scaleTextMetric(letterSpacing, scale);
  }

  const camelLetterSpacing = readNumber(font.letterSpacing);
  if (camelLetterSpacing != null) {
    next.letterSpacing = scaleTextMetric(camelLetterSpacing, scale);
  }

  return stripUndefined(next);
}

function scaleFontSize(size: number, scale: number) {
  return Math.min(
    MAX_TRANSFORM_FONT_SIZE,
    Math.max(MIN_TRANSFORM_FONT_SIZE, scaleTextMetric(size, scale)),
  );
}

function scaleTextMetric(value: number, scale: number) {
  return Math.round(value * scale * 100) / 100;
}

function rawTextListItemSourceRuns(
  item: unknown,
  fallback: RenderTextFont,
): TextRun[] {
  const fallbackFont = fontToSource(fallback);
  if (typeof item === "string") return [{ text: item, font: fallbackFont }];
  if (typeof item === "number") {
    return [{ text: String(item), font: fallbackFont }];
  }

  if (Array.isArray(item)) {
    const runs = item
      .map((run) => rawRunRecordToTextRun(run, fallback))
      .filter((run): run is TextRun => Boolean(run));
    return runs.length > 0 ? runs : [{ text: " ", font: fallbackFont }];
  }

  const record = asRecord(item);
  if (!record) return [];
  const itemFont = fontFromRecord(asRecord(record.font), fallback);
  const runs = readArray(record.runs)
    .map((run) => rawRunRecordToTextRun(run, itemFont))
    .filter((run): run is TextRun => Boolean(run));
  if (runs.length > 0) return runs;

  const text = readString(record.text);
  if (text != null) return [{ text, font: fontToSource(itemFont) }];
  return [];
}

function rawRunRecordToTextRun(
  value: unknown,
  fallback: RenderTextFont,
): TextRun | null {
  const record = asRecord(value);
  if (!record) return null;
  const text = readString(record.text) ?? "";
  if (!text) return null;
  return {
    text,
    font: fontToSource(fontFromRecord(asRecord(record.font), fallback)),
  };
}

function textListMarkerPrefix(value: unknown, index: number) {
  const marker = readString(value);
  if (marker === "none") return "";
  if (marker === "number") return `${index + 1}. `;
  return "• ";
}

function rawTextListItemWithRuns(source: unknown, runs: TextRun[]): unknown {
  const sourceRuns = Array.isArray(source)
    ? source
    : readArray(asRecord(source)?.runs);
  return runs.map((run, index) => {
    const sourceRun = asRecord(sourceRuns[index]) ?? {};
    return {
      ...sourceRun,
      text: run.text,
      font: rawInlineTextFontRecord(run.font, sourceRun.font),
    };
  });
}

function splitTextRunsOnNewlines(runs: TextRun[]): TextRun[][] {
  const lines: TextRun[][] = [[]];

  for (const run of runs) {
    const parts = (run.text || "").split(/\r?\n/);
    parts.forEach((part, index) => {
      if (index > 0) lines.push([]);
      if (!part) return;
      lines[lines.length - 1].push({
        ...run,
        text: part,
        font: run.font ? { ...run.font } : undefined,
      });
    });
  }

  return lines;
}

function stripPlainTextListMarkersFromRuns(runs: TextRun[]): TextRun[] {
  const lines = splitTextRunsOnNewlines(runs);
  const stripped: TextRun[] = [];

  lines.forEach((line, index) => {
    const normalizedLine = stripTextListMarkerFromRuns(line);
    const lineFont =
      normalizedLine[0]?.font ?? line[0]?.font ?? stripped.at(-1)?.font;

    if (index > 0) appendTextRun(stripped, "\n", lineFont);
    normalizedLine.forEach((run) =>
      appendTextRun(stripped, run.text, run.font),
    );
  });

  return stripped.length > 0 ? stripped : [{ text: " " }];
}

function stripTextListMarkerFromRuns(runs: TextRun[]): TextRun[] {
  const marker = textRunsContent(runs).match(
    /^\s*(?:[-*•]\s+|\d+[.)]\s+)/u,
  )?.[0];
  if (!marker) return runs;
  return removeTextRunPrefix(runs, marker.length);
}

function removeTextRunPrefix(runs: TextRun[], length: number): TextRun[] {
  let remaining = length;
  const stripped: TextRun[] = [];

  for (const run of runs) {
    if (remaining <= 0) {
      stripped.push(cloneTextRun(run));
      continue;
    }

    const text = run.text ?? "";
    if (text.length <= remaining) {
      remaining -= text.length;
      continue;
    }

    const consumed = remaining;
    remaining = 0;
    stripped.push({
      ...run,
      text: text.slice(consumed),
      font: run.font ? { ...run.font } : undefined,
    });
  }

  return stripped;
}

function appendTextRun(
  runs: TextRun[],
  text: string,
  font: TextRun["font"],
) {
  if (!text) return;
  const previous = runs[runs.length - 1];
  if (
    previous &&
    JSON.stringify(previous.font ?? null) === JSON.stringify(font ?? null)
  ) {
    previous.text += text;
    return;
  }
  runs.push(font ? { text, font: { ...font } } : { text });
}

function reconcileTextRunsWithStoredText(
  runs: TextRun[],
  storedText: string,
): TextRun[] {
  if (!storedText || runs.length === 0) return runs;
  if (containsMarkdownSyntax(storedText)) return runs;
  if (textRunsContent(runs) === storedText) return runs;

  const reconciled: TextRun[] = [];
  let cursor = 0;

  for (const run of runs) {
    const runText = run.text ?? "";
    if (!runText) continue;
    const index = storedText.indexOf(runText, cursor);
    if (index < 0) return runs;

    const gap = storedText.slice(cursor, index);
    appendRunText(reconciled, gap, run.font);
    reconciled.push(cloneTextRun(run));
    cursor = index + runText.length;
  }

  appendRunText(
    reconciled,
    storedText.slice(cursor),
    runs[runs.length - 1]?.font,
  );
  return textRunsContent(reconciled) === storedText ? reconciled : runs;
}

function normalizeStyledSourceRunBoundaries(runs: TextRun[]): TextRun[] {
  if (runs.length < 2) return runs;

  const normalized: TextRun[] = [];
  for (const run of runs) {
    const previous = normalized[normalized.length - 1];
    if (previous && shouldPreserveStyledRunBoundarySpace(previous, run)) {
      appendRunText(normalized, " ", previous.font);
    }
    normalized.push(cloneTextRun(run));
  }

  return sameTextRuns(normalized, runs) ? runs : normalized;
}

function shouldPreserveStyledRunBoundarySpace(left: TextRun, right: TextRun) {
  if (!hasInlineStyleBoundary(left.font, right.font)) return false;
  if (!left.text || !right.text) return false;
  if (/\s$/.test(left.text) || /^\s/.test(right.text)) return false;

  const leftCharacter = left.text.match(/\S(?=\s*$)/u)?.[0];
  const rightCharacter = right.text.match(/\S/u)?.[0];
  return Boolean(
    leftCharacter &&
    rightCharacter &&
    isWordLikeBoundaryCharacter(leftCharacter) &&
    isWordLikeBoundaryCharacter(rightCharacter),
  );
}

function hasInlineStyleBoundary(
  left: TextRun["font"],
  right: TextRun["font"],
) {
  return (
    Boolean(left?.bold) !== Boolean(right?.bold) ||
    Boolean(left?.italic) !== Boolean(right?.italic) ||
    Boolean(left?.underline) !== Boolean(right?.underline)
  );
}

function isWordLikeBoundaryCharacter(character: string) {
  return /[\p{L}\p{N}%°]/u.test(character);
}

function appendRunText(
  runs: TextRun[],
  text: string,
  font: TextRun["font"],
) {
  if (!text) return;
  const previous = runs[runs.length - 1];
  if (previous) {
    previous.text += text;
    return;
  }
  runs.push(font ? { text, font: { ...font } } : { text });
}

function cloneTextRun(run: TextRun): TextRun {
  return {
    ...run,
    font: run.font ? { ...run.font } : undefined,
  };
}

function containsMarkdownSyntax(text: string) {
  return /(\*\*|__|\*|_).+(\*\*|__|\*|_)/.test(text);
}

function sameTextRuns(left: TextRun[], right: TextRun[]) {
  if (left.length !== right.length) return false;
  return left.every(
    (run, index) =>
      run.text === right[index]?.text &&
      JSON.stringify(run.font ?? null) ===
      JSON.stringify(right[index]?.font ?? null),
  );
}

function measureContext(): CanvasRenderingContext2D | null {
  if (typeof document === "undefined") return null;
  if (!richMeasureCtx.ctx) {
    richMeasureCtx.ctx = document.createElement("canvas").getContext("2d");
  }
  return richMeasureCtx.ctx;
}

function richFontCss(font: RenderTextFont): string {
  const italic = font.italic ? "italic " : "";
  const weight = font.bold ? "700 " : "400 ";
  return `${italic}${weight}${font.size}px ${quotedFontFamily(font.family)}, Helvetica, sans-serif`;
}

function quotedFontFamily(family: string): string {
  const name = (family || DEFAULT_FONT.family).trim() || DEFAULT_FONT.family;
  return `"${name.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
}

function measureRunText(text: string, font: RenderTextFont): number {
  if (!text) return 0;
  const ctx = measureContext();
  if (!ctx) return text.length * font.size * TEXT_AVERAGE_CHAR_EM;
  ctx.font = richFontCss(font);
  const width = ctx.measureText(text).width;
  const spacing = font.letterSpacing
    ? font.letterSpacing * Math.max(0, text.length - 1)
    : 0;
  return width + spacing;
}

function measureRenderText(text: string, font: RenderTextFont) {
  const fallbackWidth =
    text.length * font.size * (font.bold ? 0.58 : TEXT_AVERAGE_CHAR_EM);
  if (typeof document === "undefined") return fallbackWidth;
  renderTextMeasureCanvas ??= document.createElement("canvas");
  const context = renderTextMeasureCanvas.getContext("2d");
  if (!context) return fallbackWidth;
  context.font = richFontCss(font);
  return (
    context.measureText(text).width +
    (font.letterSpacing ?? 0) * Math.max(0, text.length - 1)
  );
}

function readHorizontalAlignment(
  value: unknown,
): TemplateV2TextEditStyle["horizontal"] {
  const normalized = readString(value);
  if (normalized === "center" || normalized === "right") return normalized;
  return "left";
}

function readVerticalAlignment(
  value: unknown,
): TemplateV2TextEditStyle["vertical"] {
  const normalized = readString(value);
  if (normalized === "middle" || normalized === "bottom") return normalized;
  return "top";
}

function readArray(value: unknown): unknown[] {
  return Array.isArray(value) ? value : [];
}

function stripUndefined<T extends UnknownRecord>(value: T): T {
  return Object.fromEntries(
    Object.entries(value).filter(([, entry]) => entry !== undefined),
  ) as T;
}

function asRecord(value: unknown): UnknownRecord | null {
  return value && typeof value === "object" && !Array.isArray(value)
    ? (value as UnknownRecord)
    : null;
}

function readString(value: unknown): string | null {
  return typeof value === "string" ? value : null;
}

function readNumber(value: unknown): number | null {
  return typeof value === "number" && Number.isFinite(value) ? value : null;
}

function readBoolean(value: unknown): boolean | null {
  return typeof value === "boolean" ? value : null;
}

function withHash(value: string | null | undefined) {
  if (!value) return undefined;
  return value.startsWith("#") || value.startsWith("rgb") ? value : `#${value}`;
}