import type { CSSProperties } from "react";
import type { ListBlockProps } from "@/features/editor/state/editorStore";

export interface ListExportTokens {
  Tag: "ul" | "ol";
  items: string[];
  listStyleParts: string[];
}

export const computeListExportTokens = (props: ListBlockProps): ListExportTokens => {
  const ordered = Boolean(props.ordered);
  const Tag: "ul" | "ol" = ordered ? "ol" : "ul";

  const items: string[] = [];

  if (Array.isArray(props.itemsTree) && props.itemsTree.length > 0) {
    const walk = (nodes: { text?: string; children?: any[] }[]) => {
      for (const node of nodes) {
        if (typeof node.text === "string" && node.text.trim() !== "") {
          items.push(node.text);
        }
        if (Array.isArray(node.children) && node.children.length > 0) {
          walk(node.children);
        }
      }
    };
    walk(props.itemsTree as any);
  } else if (Array.isArray(props.items)) {
    for (const raw of props.items) {
      if (typeof raw === "string" && raw.trim() !== "") {
        items.push(raw);
      }
    }
  }

  const alignToken = props.align;
  const align = alignToken === "center" ? "center" : alignToken === "right" ? "right" : "left";

  const listStyleParts: string[] = [`text-align:${align}`];
  if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
    listStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
  }

  return {
    Tag,
    items,
    listStyleParts,
  };
};

export interface ListEditorTokens {
  gapPx: number;
  listStyle: CSSProperties;
  bulletStyle: string;
}

export const computeListEditorTokens = (props: ListBlockProps): ListEditorTokens => {
  const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");

  const gapPx =
    typeof props.gapYPx === "number"
      ? props.gapYPx
      : props.gapY === "sm"
        ? 4
        : props.gapY === "lg"
          ? 16
          : 8;

  const listStyle: CSSProperties = {};
  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
    listStyle.fontSize = props.fontSizeCustom;
  }
  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
    listStyle.lineHeight = props.lineHeightCustom;
  }
  if (props.textColorCustom && props.textColorCustom.trim() !== "") {
    listStyle.color = props.textColorCustom;
  }

  const bulletStyle = bulletStyleRaw;

  return {
    gapPx,
    listStyle,
    bulletStyle,
  };
};

export interface ListPublicTokens {
  alignClass: string;
  gapEm: number;
  listStyle: CSSProperties;
  bulletStyle: string;
}

const pxToEm = (px: number, base = 16) => `${px / base}em`;

const convertPxStringToEm = (value?: string | null) => {
  if (!value) return null;
  const match = value.trim().match(/-?\d+(?:\.\d+)?/);
  if (!match) return null;
  const px = parseFloat(match[0]);
  if (!Number.isFinite(px)) return null;
  return pxToEm(px);
};

export const computeListPublicTokens = (props: ListBlockProps): ListPublicTokens => {
  const alignClass =
    props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left";

  const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");

  const gapPx =
    typeof props.gapYPx === "number"
      ? props.gapYPx
      : props.gapY === "sm"
        ? 4
        : props.gapY === "lg"
          ? 16
          : 8;

  const gapEm = gapPx / 16;

  const listStyle: CSSProperties = {};
  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
    const fontSizeValue = props.fontSizeCustom.trim();
    if (fontSizeValue.endsWith("px")) {
      const fontSizeEm = convertPxStringToEm(fontSizeValue);
      if (fontSizeEm) {
        listStyle.fontSize = fontSizeEm;
      }
    } else {
      listStyle.fontSize = fontSizeValue;
    }
  }
  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
    const lineHeightValue = props.lineHeightCustom.trim();
    if (lineHeightValue.endsWith("px")) {
      const lineHeightEm = convertPxStringToEm(lineHeightValue);
      if (lineHeightEm) {
        listStyle.lineHeight = lineHeightEm;
      }
    } else {
      listStyle.lineHeight = lineHeightValue;
    }
  }
  if (props.textColorCustom && props.textColorCustom.trim() !== "") {
    listStyle.color = props.textColorCustom;
  }
  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
    listStyle.backgroundColor = props.backgroundColorCustom.trim();
  }

  const bulletStyle = bulletStyleRaw;

  return {
    alignClass,
    gapEm,
    listStyle,
    bulletStyle,
  };
};
